# DropMenu

下拉菜单组件，点击或悬停触发菜单列表，支持单选、多选、分组和多级菜单。

## 适用场景

- 操作按钮的下拉菜单（动作列表）
- 需要从菜单中选择一个或多个选项
- 分组展示菜单项（分割线分组或 Popper 子菜单分组）

## Props

### DropMenuOptionObject Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| value | `MenuItemId` | `-` | 是 | 选项的值，亦是选项的唯一标识 |
| label | `ReactNode` | `-` | 否 | 选项显示内容 |
| onClick | `MouseEventHandler<Element>` | `-` | 否 | 点击回调 |
| disabled | `boolean` | `-` | 否 | 是否禁用 |
| popperTriggerType | `"hover" \| "click"` | `-` | 否 | popper 子菜单触发类型，不设置则跟随 DropMenu `triggerType` |
| children | `DropMenuOptionObject[]` | `-` | 否 | 子选项（分组时使用） |

### DropMenu Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| options | `DropMenuOptionObject[]` | `-` | 否 | 菜单列表 |
| triggerType | `"hover" \| "click"` | `"hover"` | 否 | 触发方式 |
| size | `"xs" \| "sm" \| "md" \| "lg"` | `-` | 否 | 尺寸，默认读取 ConfigContext `baseSize` |
| defaultValue | `DropMenuValue` | `-` | 否 | 选中默认值（单选未选为 null，多选未选为 []） |
| value | `DropMenuValue` | `-` | 否 | 选中控制值（单选 null 为未选，undefined 为不控制） |
| onChange | `(value: DropMenuValue) => void` | `-` | 否 | 值变化时的回调 |
| mode | `"single" \| "multiple"` | `"single"` | 否 | 选择模式 |
| withSelectAll | `boolean` | `true` | 否 | 多选模式下是否有「全选」 |
| disabled | `boolean` | `-` | 否 | 是否禁用 |
| groupType | `"group" \| "popper"` | `"group"` | 否 | 选项分组类型：group 为分割线分组，popper 为子菜单弹出 |
| menuPopperVisible | `boolean` | `-` | 否 | 菜单 popper 是否显示 |
| onChangeMenuPopperVisible | `(visible: boolean, e?) => void` | `-` | 否 | menuPopperVisible 改变时的回调 |
| matchMinWidthToTarget | `boolean` | `-` | 否 | popper 最小宽度匹配到 target 的宽度 |
| placement | `Placement` | `-` | 否 | popper 位置 |
| mouseEnterDelay | `number` | `-` | 否 | mouseEnter 延迟触发（ms） |
| focusDelay | `number` | `-` | 否 | focus 延迟触发（ms） |
| mouseLeaveDelay | `number` | `-` | 否 | mouseLeave 延迟触发（ms） |
| blurDelay | `number` | `-` | 否 | blur 延迟触发（ms） |
| refPopperWrap | `Ref<HTMLDivElement>` | `-` | 否 | popperWrap 的 element ref |
| withArrow | `boolean` | `-` | 否 | 是否带箭头 |

## 典型用法

### 基础下拉菜单（hover 触发）

```tsx
import { Button } from '@befe/brick-comp-button'
import { DropMenu } from '@befe/brick-comp-drop-menu'

const options = [
    { value: 'edit', label: '编辑', onClick: () => console.log('edit') },
    { value: 'delete', label: '删除', onClick: () => console.log('delete') },
    { value: 'export', label: '导出', disabled: true },
]

<DropMenu options={options}>
    <Button>操作</Button>
</DropMenu>
```

### click 触发 + 带选中值

```tsx
<DropMenu
    triggerType={'click'}
    options={options}
    onChange={(value) => console.log('selected:', value)}
>
    <Button>点击选择</Button>
</DropMenu>
```

### 分组菜单

```tsx
const options = [
    { value: 'opt1', label: '选项1' },
    {
        value: 'group1',
        label: '分类一',
        children: [
            { value: 'opt2', label: '选项2' },
            { value: 'opt3', label: '选项3' },
        ],
    },
]

// 分割线分组（默认）
<DropMenu options={options} triggerType={'click'}>
    <Button>分割线分组</Button>
</DropMenu>

// Popper 子菜单分组
<DropMenu options={options} groupType={'popper'} triggerType={'click'}>
    <Button>Popper 分组</Button>
</DropMenu>
```

### 多选模式

```tsx
<DropMenu
    options={options}
    mode={'multiple'}
    onChange={(values) => console.log(values)}
>
    <Button>多选</Button>
</DropMenu>
```

## 注意事项

- 破坏性变更（2021）：延迟相关 props 已去掉 `InMS` 后缀：`mouseEnterDelayInMS` → `mouseEnterDelay`，`mouseLeaveDelayInMS` → `mouseLeaveDelay`，`focusDelayInMS` → `focusDelay`，`blurDelayInMS` → `blurDelay`
- 同一个 DropMenu 下，暂不支持不同 `groupType` 混用
- 单选模式中，`value=null` 表示受控的「未选择」，`value=undefined` 表示不受控
- 多选模式的「未选择」受控值为 `[]`