one-design-next 0.0.4-alpha.57

package/dist/dropdown/index.js

@@ -0,0 +1,836 @@
+/**
+ * 多选的设计稿来源于互选需求：https://www.figma.com/design/DBgqcGDjdPnr7XObtGY7ES/%F0%9F%94%B5%E3%80%90%E5%B9%BF%E5%91%8A%E4%B8%BB%E4%BE%A7%E3%80%91%E4%BA%92%E9%80%89%E5%B9%B3%E5%8F%B0---%E4%BD%93%E9%AA%8C%E5%8D%87%E7%BA%A7%E4%B8%93%E9%A1%B9?node-id=461-72709&t=r6iaLWzcmAk5VXR6-4
+ */
+
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["sideOffset", "children", "matchWidth"],
+  _excluded2 = ["inset", "variant"],
+  _excluded3 = ["children", "checked"],
+  _excluded4 = ["children"],
+  _excluded5 = ["inset"],
+  _excluded6 = ["inset", "children"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Checkbox from "../checkbox";
+import Icon from "../icon";
+import Radio from "../radio";
+import ScrollArea from "../scroll-area";
+import "./style";
+
+// 基础组件定义 - 参考 shadcn/ui 结构
+function DropdownMenu(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Root, _extends({
+    "data-slot": "dropdown-menu"
+  }, props));
+}
+function DropdownMenuPortal(_ref2) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Portal, _extends({
+    "data-slot": "dropdown-menu-portal"
+  }, props));
+}
+var DropdownMenuTrigger = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, _extends({
+    ref: ref,
+    "data-slot": "dropdown-menu-trigger"
+  }, props));
+});
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+var DropdownMenuContent = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var _ref4$sideOffset = _ref4.sideOffset,
+    sideOffset = _ref4$sideOffset === void 0 ? 4 : _ref4$sideOffset,
+    children = _ref4.children,
+    matchWidth = _ref4.matchWidth,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Portal, null, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Content, _extends({
+    ref: ref,
+    "data-slot": "dropdown-menu-content",
+    "data-odn-dropdown-content": true,
+    "data-odn-dropdown-match-width": matchWidth,
+    sideOffset: sideOffset
+  }, props), /*#__PURE__*/React.createElement(ScrollArea, {
+    "data-odn-dropdown-scroll-area": true
+  }, children)));
+});
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+function DropdownMenuGroup(_ref5) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref5), _ref5));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Group, _extends({
+    "data-slot": "dropdown-menu-group"
+  }, props));
+}
+var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var inset = _ref6.inset,
+    _ref6$variant = _ref6.variant,
+    variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
+    props = _objectWithoutProperties(_ref6, _excluded2);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item, _extends({
+    ref: ref,
+    "data-slot": "dropdown-menu-item",
+    "data-odn-dropdown-item": true,
+    "data-inset": inset,
+    "data-variant": variant
+  }, props));
+});
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+function DropdownMenuCheckboxItem(_ref7) {
+  var children = _ref7.children,
+    checked = _ref7.checked,
+    props = _objectWithoutProperties(_ref7, _excluded3);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.CheckboxItem, _extends({
+    "data-slot": "dropdown-menu-checkbox-item",
+    "data-odn-dropdown-checkbox-item": true,
+    checked: checked
+  }, props), /*#__PURE__*/React.createElement("span", {
+    "data-odn-dropdown-item-indicator": true
+  }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, null, "\u2713")), children);
+}
+function DropdownMenuRadioGroup(_ref8) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref8), _ref8));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioGroup, _extends({
+    "data-slot": "dropdown-menu-radio-group"
+  }, props));
+}
+function DropdownMenuRadioItem(_ref9) {
+  var children = _ref9.children,
+    props = _objectWithoutProperties(_ref9, _excluded4);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioItem, _extends({
+    "data-slot": "dropdown-menu-radio-item",
+    "data-odn-dropdown-radio-item": true
+  }, props), /*#__PURE__*/React.createElement("span", {
+    "data-odn-dropdown-item-indicator": true
+  }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, null, "\u25CF")), children);
+}
+function DropdownMenuLabel(_ref10) {
+  var inset = _ref10.inset,
+    props = _objectWithoutProperties(_ref10, _excluded5);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Label, _extends({
+    "data-slot": "dropdown-menu-label",
+    "data-odn-dropdown-label": true,
+    "data-inset": inset
+  }, props));
+}
+function DropdownMenuSeparator(_ref11) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref11), _ref11));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, _extends({
+    "data-slot": "dropdown-menu-separator",
+    "data-odn-dropdown-separator": true
+  }, props));
+}
+function DropdownMenuShortcut(_ref12) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref12), _ref12));
+  return /*#__PURE__*/React.createElement("span", _extends({
+    "data-slot": "dropdown-menu-shortcut",
+    "data-odn-dropdown-shortcut": true
+  }, props));
+}
+function DropdownMenuSub(_ref13) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref13), _ref13));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Sub, _extends({
+    "data-slot": "dropdown-menu-sub"
+  }, props));
+}
+var DropdownMenuSubTrigger = /*#__PURE__*/React.forwardRef(function (_ref14, ref) {
+  var inset = _ref14.inset,
+    children = _ref14.children,
+    props = _objectWithoutProperties(_ref14, _excluded6);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.SubTrigger, _extends({
+    ref: ref,
+    "data-slot": "dropdown-menu-sub-trigger",
+    "data-odn-dropdown-sub-trigger": true,
+    "data-inset": inset
+  }, props), /*#__PURE__*/React.createElement("div", {
+    "data-odn-dropdown-item-label": true
+  }, children), /*#__PURE__*/React.createElement(Icon, {
+    "data-odn-dropdown-chevron": true,
+    name: "right"
+  }));
+});
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
+var DropdownMenuSubContent = /*#__PURE__*/React.forwardRef(function (_ref15, ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref15), _ref15));
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.SubContent, _extends({
+    ref: ref,
+    "data-slot": "dropdown-menu-sub-content",
+    "data-odn-dropdown-sub-content": true
+  }, props));
+});
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';
+
+// 用户 API 接口定义
+
+// 基础 Props 接口
+
+// 单选模式 Props
+
+// 多选模式 Props
+
+// 普通模式 Props
+
+// 为菜单项添加全选按钮的辅助函数
+var addSelectAllToMenu = function addSelectAllToMenu(menu, allowSelectAll, isSelectable, multiple) {
+  if (!allowSelectAll || !isSelectable || !multiple) {
+    // 如果不需要添加全选，或者不是多选模式，只处理children
+    return menu.map(function (item) {
+      if ('children' in item && item.children) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          children: addSelectAllToMenu(item.children, allowSelectAll, isSelectable, multiple)
+        });
+      }
+      return item;
+    });
+  }
+
+  // 处理每个菜单项
+  var processedItems = menu.map(function (item) {
+    // 如果是 group 类型，递归处理其 children，但不在 group 层级添加全选
+    if (item.type === 'group' && item.children) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        children: item.children.map(function (child) {
+          // 只处理有 value 和 children 的子项（真正的子菜单）
+          if ('value' in child && 'children' in child && child.children && child.children.length > 0) {
+            // 生成该层的全选 value
+            var childrenId = "selectAll_children_".concat(Math.random().toString(36).substr(2, 9));
+
+            // 在 children 最上方添加全选按钮和分隔符
+            var selectAllItem = {
+              value: childrenId,
+              label: '全选'
+            };
+            var separator = {
+              type: 'separator'
+            };
+
+            // 直接处理子项，不再递归添加全选
+            var processedChildren = child.children.map(function (grandChild) {
+              // 如果孙子项也有 children，继续处理
+              if ('value' in grandChild && 'children' in grandChild && grandChild.children && grandChild.children.length > 0) {
+                var grandChildrenId = "selectAll_children_".concat(Math.random().toString(36).substr(2, 9));
+                var grandSelectAllItem = {
+                  value: grandChildrenId,
+                  label: '全选'
+                };
+                var grandSeparator = {
+                  type: 'separator'
+                };
+                return _objectSpread(_objectSpread({}, grandChild), {}, {
+                  children: [grandSelectAllItem, grandSeparator].concat(_toConsumableArray(grandChild.children))
+                });
+              }
+              return grandChild;
+            });
+            return _objectSpread(_objectSpread({}, child), {}, {
+              children: [selectAllItem, separator].concat(_toConsumableArray(processedChildren))
+            });
+          }
+          return child;
+        })
+      });
+    }
+    return item;
+  });
+
+  // 在最外层菜单的最上方添加全选
+  var topLevelSelectAll = [{
+    type: 'group',
+    children: [{
+      value: 'selectAll',
+      label: '全选'
+    }]
+  }, {
+    type: 'separator'
+  }];
+  return [].concat(topLevelSelectAll, _toConsumableArray(processedItems));
+};
+
+// 递归渲染菜单项的辅助函数
+var renderMenuItem = function renderMenuItem(item, index, _onSelect, onItemClick, isSelectable, multiple, selectedValue, rawOnSelect, menu, layerMapping) {
+  var _item$value2;
+  var key = 'value' in item && item.value || "item-".concat(index);
+  switch (item.type) {
+    case 'label':
+      return /*#__PURE__*/React.createElement(DropdownMenuLabel, {
+        key: key
+      }, item.label);
+    case 'separator':
+      return /*#__PURE__*/React.createElement(DropdownMenuSeparator, {
+        key: key
+      });
+    case 'group':
+      return /*#__PURE__*/React.createElement(DropdownMenuGroup, {
+        key: key
+      }, item.children.map(function (child, childIndex) {
+        return renderMenuItem(child, childIndex, _onSelect, onItemClick, isSelectable, multiple, selectedValue, rawOnSelect, menu, layerMapping);
+      }));
+    default:
+      // 'item' or undefined (DropdownMenuItem)
+      // 检查是否有 children 属性，如果有则渲染为子菜单
+      if ('children' in item && item.children && item.children.length > 0) {
+        // 在多选模式下，带 children 的项目可以选择（全选该子菜单）
+        if (isSelectable && multiple) {
+          // 收集该子菜单所有可选择的子项值
+          var collectChildValues = function collectChildValues(items) {
+            var values = [];
+            items.forEach(function (item) {
+              if ('value' in item && item.value && !item.value.startsWith('selectAll')) {
+                // 包含当前项的值（无论是否有子项）
+                values.push(item.value);
+              }
+              if ('children' in item && item.children) {
+                // 如果有子项，递归收集子项
+                values.push.apply(values, _toConsumableArray(collectChildValues(item.children)));
+              }
+            });
+            return values;
+          };
+          var childValues = collectChildValues(item.children);
+          var allChildrenSelected = Array.isArray(selectedValue) && childValues.length > 0 && childValues.every(function (val) {
+            return selectedValue.includes(val);
+          });
+          return /*#__PURE__*/React.createElement(DropdownMenuSub, {
+            key: key
+          }, /*#__PURE__*/React.createElement(DropdownMenuSubTrigger, {
+            disabled: item.disabled,
+            onClick: function onClick(event) {
+              event.preventDefault();
+              event.stopPropagation();
+
+              // 切换该子菜单的全选状态
+              var currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+              var newValues;
+              if (allChildrenSelected) {
+                // 如果全选中，则取消选中该子菜单所有项（包括自己）
+                var allValuesToRemove = _toConsumableArray(childValues);
+                if (item.value) {
+                  allValuesToRemove.push(item.value);
+                }
+                newValues = currentValues.filter(function (val) {
+                  return !allValuesToRemove.includes(val);
+                });
+              } else {
+                // 如果未全选中，则选中该子菜单所有项（包括自己）
+                var allValuesToAdd = _toConsumableArray(childValues);
+                if (item.value) {
+                  allValuesToAdd.push(item.value);
+                }
+                var uniqueValues = new Set([].concat(_toConsumableArray(currentValues), _toConsumableArray(allValuesToAdd)));
+                newValues = Array.from(uniqueValues);
+              }
+
+              // 直接调用 rawOnSelect
+              if (rawOnSelect) {
+                rawOnSelect(newValues);
+              }
+            }
+          }, /*#__PURE__*/React.createElement(Checkbox, {
+            checked: allChildrenSelected,
+            indeterminate: !allChildrenSelected && Array.isArray(selectedValue) && childValues.some(function (val) {
+              return selectedValue.includes(val);
+            }),
+            "data-odn-dropdown-checkbox": true
+          }), item.label), /*#__PURE__*/React.createElement(DropdownMenuPortal, null, /*#__PURE__*/React.createElement(DropdownMenuSubContent, null, item.children.map(function (child, childIndex) {
+            return renderMenuItem(child, childIndex, _onSelect, onItemClick, isSelectable, multiple, selectedValue, rawOnSelect, menu, layerMapping);
+          }))));
+        }
+
+        // 普通子菜单渲染（单选模式或非选择模式）
+        return /*#__PURE__*/React.createElement(DropdownMenuSub, {
+          key: key
+        }, /*#__PURE__*/React.createElement(DropdownMenuSubTrigger, {
+          disabled: item.disabled
+        }, item.label), /*#__PURE__*/React.createElement(DropdownMenuPortal, null, /*#__PURE__*/React.createElement(DropdownMenuSubContent, null, item.children.map(function (child, childIndex) {
+          return renderMenuItem(child, childIndex, _onSelect, onItemClick, isSelectable, multiple, selectedValue, rawOnSelect, menu, layerMapping);
+        }))));
+      }
+
+      // 普通菜单项
+      // 计算是否选中
+      var isSelected = false;
+      if (isSelectable && selectedValue !== undefined) {
+        if (!multiple) {
+          isSelected = selectedValue === item.value;
+        } else if (Array.isArray(selectedValue)) {
+          var _item$value;
+          // 对于全选按钮，检查该层的所有选项是否都被选中
+          if ((_item$value = item.value) !== null && _item$value !== void 0 && _item$value.startsWith('selectAll') && layerMapping && item.value) {
+            var layerValues = layerMapping[item.value];
+            if (layerValues) {
+              isSelected = layerValues.length > 0 && layerValues.every(function (val) {
+                return selectedValue.includes(val);
+              });
+            }
+          } else {
+            // 普通选项，直接检查是否在选中列表中
+            isSelected = selectedValue.includes(item.value);
+          }
+        }
+      }
+      return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: key,
+        disabled: item.disabled,
+        onSelect: function onSelect(event) {
+          // 多选模式下，所有项都不关闭菜单
+          var shouldKeepOpen = isSelectable && multiple;
+          if (shouldKeepOpen) {
+            event.preventDefault();
+          }
+          _onSelect === null || _onSelect === void 0 || _onSelect(item.value);
+
+          // 只有在非保持打开的情况下才调用 onItemClick（关闭菜单）
+          if (!shouldKeepOpen) {
+            onItemClick === null || onItemClick === void 0 || onItemClick();
+          }
+        }
+      }, isSelectable && !multiple && /*#__PURE__*/React.createElement(Radio.Group, {
+        value: isSelected ? item.value : '',
+        options: [{
+          label: '',
+          value: item.value
+        }],
+        "data-odn-dropdown-radio": true
+      }), isSelectable && multiple && /*#__PURE__*/React.createElement(Checkbox, {
+        checked: isSelected,
+        indeterminate: (_item$value2 = item.value) !== null && _item$value2 !== void 0 && _item$value2.startsWith('selectAll') && layerMapping && item.value && Array.isArray(selectedValue) ? function () {
+          var layerValues = layerMapping[item.value];
+          if (layerValues) {
+            var selectedCount = layerValues.filter(function (val) {
+              return selectedValue.includes(val);
+            }).length;
+            // indeterminate 只在部分选中时显示（既不是全选也不是全不选）
+            return selectedCount > 0 && selectedCount < layerValues.length;
+          }
+          return false;
+        }() : false,
+        "data-odn-dropdown-checkbox": true
+      }), item.icon && /*#__PURE__*/React.createElement(Icon, {
+        name: item.icon,
+        "data-odn-dropdown-item-icon": true
+      }), /*#__PURE__*/React.createElement("span", {
+        "data-odn-dropdown-item-label": true
+      }, item.label), item.shortcut && /*#__PURE__*/React.createElement(DropdownMenuShortcut, null, item.shortcut));
+  }
+};
+
+// placement 到 Radix UI 属性的转换映射
+var placementToRadixProps = function placementToRadixProps() {
+  var placement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottom';
+  var placementMap = {
+    top: {
+      side: 'top',
+      align: 'center'
+    },
+    topLeft: {
+      side: 'top',
+      align: 'start'
+    },
+    topRight: {
+      side: 'top',
+      align: 'end'
+    },
+    right: {
+      side: 'right',
+      align: 'center'
+    },
+    rightTop: {
+      side: 'right',
+      align: 'start'
+    },
+    rightBottom: {
+      side: 'right',
+      align: 'end'
+    },
+    bottom: {
+      side: 'bottom',
+      align: 'center'
+    },
+    bottomLeft: {
+      side: 'bottom',
+      align: 'start'
+    },
+    bottomRight: {
+      side: 'bottom',
+      align: 'end'
+    },
+    left: {
+      side: 'left',
+      align: 'center'
+    },
+    leftTop: {
+      side: 'left',
+      align: 'start'
+    },
+    leftBottom: {
+      side: 'left',
+      align: 'end'
+    }
+  };
+  return placementMap[placement] || placementMap.bottomLeft;
+};
+var Dropdown = function Dropdown(props) {
+  var menu = props.menu,
+    children = props.children,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
+    visible = props.visible,
+    onVisibleChange = props.onVisibleChange,
+    _props$trigger = props.trigger,
+    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$allowSelectAll = props.allowSelectAll,
+    allowSelectAll = _props$allowSelectAll === void 0 ? false : _props$allowSelectAll,
+    _props$matchWidth = props.matchWidth,
+    matchWidth = _props$matchWidth === void 0 ? false : _props$matchWidth;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoverOpen = _useState2[0],
+    setHoverOpen = _useState2[1];
+  var hoverTimeoutRef = useRef();
+  var containerRef = useRef(null);
+
+  // 检查是否为选择模式
+  var isSelectable = 'selectable' in props && props.selectable;
+  var multiple = isSelectable ? props.multiple : undefined;
+  var selectedValue = isSelectable ? props.value : undefined;
+  var rawOnSelect = 'onSelect' in props ? props.onSelect : undefined;
+
+  // 处理菜单数据，如果需要则添加全选按钮
+  var processedMenu = useMemo(function () {
+    if (!menu) return undefined;
+    return addSelectAllToMenu(menu, allowSelectAll, isSelectable || false, multiple);
+  }, [menu, allowSelectAll, isSelectable, multiple]);
+
+  // 创建层级映射，用于全选功能
+  var layerMapping = useMemo(function () {
+    var mapping = {};
+    var collectLayerValues = function collectLayerValues(items) {
+      var processItem = function processItem(item, parentItem) {
+        // 如果该项有 children，为其创建全选映射
+        if ('value' in item && 'children' in item && item.children) {
+          // 收集该层的所有后代项值（不包括全选按钮），包括直接子项和所有后代
+          var collectAllDescendants = function collectAllDescendants(children) {
+            var values = [];
+            children.forEach(function (child) {
+              if ('value' in child && child.value && !child.value.startsWith('selectAll_')) {
+                values.push(child.value);
+              }
+              if ('children' in child && child.children) {
+                values.push.apply(values, _toConsumableArray(collectAllDescendants(child.children)));
+              }
+            });
+            return values;
+          };
+          var allDescendantValues = collectAllDescendants(item.children);
+
+          // 如果当前项有value，也要包含当前项本身
+          if (item.value) {
+            allDescendantValues.push(item.value);
+          }
+
+          // 查找该层的全选按钮
+          var selectAllItem = item.children.find(function (c) {
+            var _c$value;
+            return 'value' in c && ((_c$value = c.value) === null || _c$value === void 0 ? void 0 : _c$value.startsWith('selectAll_'));
+          });
+          var selectAllKey = selectAllItem && 'value' in selectAllItem ? selectAllItem.value : undefined;
+          if (selectAllKey && allDescendantValues.length > 0) {
+            mapping[selectAllKey] = allDescendantValues;
+          }
+
+          // 递归处理子项，传递当前项作为父项
+          item.children.forEach(function (child) {
+            processItem(child, item);
+          });
+        }
+      };
+      items.forEach(function (item) {
+        if (item.type === 'group' && item.children) {
+          item.children.forEach(function (child) {
+            processItem(child);
+          });
+        } else {
+          processItem(item);
+        }
+      });
+    };
+
+    // 收集所有可选值用于顶级全选
+    var getAllSelectableValues = function getAllSelectableValues(items) {
+      var values = [];
+      items.forEach(function (item) {
+        if ('value' in item && item.value && !item.value.startsWith('selectAll')) {
+          // 添加当前项的值（包括有 children 的项目）
+          values.push(item.value);
+        }
+
+        // 如果有子项，递归收集子项
+        if ('children' in item && item.children) {
+          values.push.apply(values, _toConsumableArray(getAllSelectableValues(item.children)));
+        }
+      });
+      return values;
+    };
+    if (processedMenu) {
+      collectLayerValues(processedMenu);
+      // 顶级全选映射
+      mapping['selectAll'] = getAllSelectableValues(processedMenu);
+    }
+    return mapping;
+  }, [processedMenu]);
+
+  // 创建适配的 onSelect 函数
+  var onSelect = useCallback(function (value) {
+    if (!rawOnSelect) return;
+    if (isSelectable && multiple) {
+      var currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+      var newValues;
+
+      // 检查是否是全选按钮
+      if (layerMapping[value]) {
+        // 是全选按钮，处理该层的全选逻辑
+        var layerValues = layerMapping[value];
+        var allSelected = layerValues.every(function (val) {
+          return currentValues.includes(val);
+        });
+        if (allSelected) {
+          // 如果该层已全选，则取消选中该层所有项
+          newValues = currentValues.filter(function (val) {
+            return !layerValues.includes(val);
+          });
+        } else {
+          // 如果该层未全选，则选中该层所有项
+          var valuesToAdd = layerValues.filter(function (val) {
+            return !currentValues.includes(val);
+          });
+          newValues = [].concat(_toConsumableArray(currentValues), _toConsumableArray(valuesToAdd));
+        }
+      } else {
+        // 普通选项切换
+        if (currentValues.includes(value)) {
+          newValues = currentValues.filter(function (v) {
+            return v !== value;
+          });
+        } else {
+          newValues = [].concat(_toConsumableArray(currentValues), [value]);
+        }
+      }
+
+      // 智能处理父子关系：当所有子项被选中时，自动选中父项
+      var processParentChildRelations = function processParentChildRelations(values) {
+        var processedValues = _toConsumableArray(values);
+
+        // 构建父子关系映射
+        var buildParentChildMap = function buildParentChildMap(items, parentValue) {
+          var map = {};
+          items.forEach(function (item) {
+            if ('value' in item && item.value && !item.value.startsWith('selectAll')) {
+              if (parentValue) {
+                if (!map[parentValue]) map[parentValue] = [];
+                map[parentValue].push(item.value);
+              }
+              if ('children' in item && item.children) {
+                Object.assign(map, buildParentChildMap(item.children, item.value));
+              }
+            } else if (item.type === 'group' && item.children) {
+              Object.assign(map, buildParentChildMap(item.children, parentValue));
+            }
+          });
+          return map;
+        };
+        var parentChildMap = processedMenu ? buildParentChildMap(processedMenu) : {};
+
+        // 检查每个父项是否应该被自动选中或取消选中
+        Object.entries(parentChildMap).forEach(function (_ref16) {
+          var _ref17 = _slicedToArray(_ref16, 2),
+            parent = _ref17[0],
+            children = _ref17[1];
+          var allChildrenSelected = children.every(function (child) {
+            return processedValues.includes(child);
+          });
+          var parentSelected = processedValues.includes(parent);
+          if (allChildrenSelected && !parentSelected) {
+            // 所有子项都选中但父项未选中，自动选中父项
+            processedValues.push(parent);
+          } else if (!allChildrenSelected && parentSelected) {
+            // 部分子项未选中但父项选中，取消选中父项
+            processedValues = processedValues.filter(function (v) {
+              return v !== parent;
+            });
+          }
+        });
+        return processedValues;
+      };
+
+      // 应用父子关系处理
+      newValues = processParentChildRelations(newValues);
+
+      // 过滤掉所有全选按钮的值，只返回实际的业务值
+      var filteredValues = newValues.filter(function (val) {
+        return !val.startsWith('selectAll');
+      });
+      rawOnSelect(filteredValues);
+    } else {
+      // radio 模式或普通模式
+      rawOnSelect(value);
+    }
+  }, [rawOnSelect, isSelectable, multiple, selectedValue, layerMapping]);
+
+  // 从 placement 转换为 Radix UI 所需的 align 和 side
+  var _placementToRadixProp = placementToRadixProps(placement),
+    side = _placementToRadixProp.side,
+    align = _placementToRadixProp.align;
+
+  // 计算最终的开启状态
+  var finalOpen = visible !== undefined ? visible : trigger === 'hover' ? hoverOpen : undefined;
+
+  // 处理 hover 进入
+  var handleMouseEnter = useCallback(function () {
+    if (trigger === 'hover' && !disabled) {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = undefined;
+      }
+      if (!hoverOpen) {
+        setHoverOpen(true);
+        onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(true);
+      }
+    }
+  }, [trigger, onVisibleChange, hoverOpen, disabled]);
+
+  // 处理 hover 离开
+  var handleMouseLeave = useCallback(function (event) {
+    if (trigger === 'hover') {
+      // 检查鼠标是否移动到了菜单内容区域
+      var relatedTarget = event.relatedTarget;
+      if (containerRef.current && relatedTarget && relatedTarget instanceof Node) {
+        // 如果鼠标移动到容器内的元素，不关闭菜单
+        if (containerRef.current.contains(relatedTarget)) {
+          return;
+        }
+      }
+      hoverTimeoutRef.current = setTimeout(function () {
+        setHoverOpen(false);
+        onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false);
+      }, 150);
+    }
+  }, [trigger, onVisibleChange]);
+
+  // 处理内容区域的鼠标事件
+  var handleContentMouseEnter = useCallback(function () {
+    if (trigger === 'hover' && hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = undefined;
+    }
+  }, [trigger]);
+  var handleContentMouseLeave = useCallback(function () {
+    if (trigger === 'hover') {
+      hoverTimeoutRef.current = setTimeout(function () {
+        setHoverOpen(false);
+        onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false);
+      }, 150);
+    }
+  }, [trigger, onVisibleChange]);
+
+  // 清理定时器
+  useEffect(function () {
+    return function () {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // 处理菜单项点击
+  var handleItemClick = useCallback(function () {
+    if (trigger === 'hover') {
+      // hover 模式下点击菜单项后关闭菜单
+      if (visible === undefined) {
+        // 非受控模式，直接设置内部状态
+        setHoverOpen(false);
+      }
+      // 受控模式，通知外部状态变化
+      onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(false);
+    }
+    // click 模式下由 Radix UI 自动处理关闭
+  }, [trigger, visible, onVisibleChange]);
+
+  // 处理状态变化
+  var handleOpenChange = useCallback(function (open) {
+    if (trigger === 'click' && !disabled) {
+      onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(open);
+    }
+    // hover 模式下不响应 click 事件的状态变化
+  }, [trigger, onVisibleChange, disabled]);
+  if (trigger === 'hover') {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: containerRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(DropdownMenu, {
+      open: disabled ? false : finalOpen,
+      onOpenChange: handleOpenChange,
+      modal: false
+    }, /*#__PURE__*/React.createElement(DropdownMenuTrigger, {
+      asChild: true,
+      disabled: disabled
+    }, children), /*#__PURE__*/React.createElement(DropdownMenuContent, {
+      align: align,
+      side: side,
+      matchWidth: matchWidth,
+      onMouseEnter: handleContentMouseEnter,
+      onMouseLeave: handleContentMouseLeave,
+      onCloseAutoFocus: function onCloseAutoFocus(e) {
+        // 防止 hover 时的自动聚焦 bug
+        e.preventDefault();
+      }
+    }, processedMenu === null || processedMenu === void 0 ? void 0 : processedMenu.map(function (item, index) {
+      return renderMenuItem(item, index, onSelect, handleItemClick, isSelectable, multiple, selectedValue, rawOnSelect, processedMenu, layerMapping);
+    }))));
+  }
+
+  // click 模式的默认渲染
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    open: disabled ? false : finalOpen,
+    onOpenChange: handleOpenChange
+  }, /*#__PURE__*/React.createElement(DropdownMenuTrigger, {
+    asChild: true,
+    disabled: disabled
+  }, children), /*#__PURE__*/React.createElement(DropdownMenuContent, {
+    align: align,
+    side: side,
+    matchWidth: matchWidth
+  }, processedMenu === null || processedMenu === void 0 ? void 0 : processedMenu.map(function (item, index) {
+    return renderMenuItem(item, index, onSelect, undefined, isSelectable, multiple, selectedValue, rawOnSelect, processedMenu, layerMapping);
+  })));
+};
+
+// 导出基础组件供高级用法
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+export default Dropdown;