@hanwenbo/x-taro-ui 0.0.1

package/es/components/menubar/menubar.js

@@ -0,0 +1,810 @@
+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); }
+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 _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 _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 _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 _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 _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 _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; }
+import React, { useEffect, useId, useMemo, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { useTheme, withOpacity } from "../../theme";
+import { classNames } from "../../utils";
+import { resolveTaroAccessibilityProps } from "../../utils/taroProps";
+import { Icon } from "../icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var sizeMap = {
+  mini: {
+    minHeight: 28,
+    paddingX: 8,
+    fontSize: 12,
+    iconSize: 14,
+    gap: 4,
+    minWidth: 160
+  },
+  small: {
+    minHeight: 32,
+    paddingX: 10,
+    fontSize: 14,
+    iconSize: 16,
+    gap: 6,
+    minWidth: 160
+  },
+  middle: {
+    minHeight: 36,
+    paddingX: 12,
+    fontSize: 14,
+    iconSize: 16,
+    gap: 6,
+    minWidth: 160
+  },
+  large: {
+    minHeight: 40,
+    paddingX: 14,
+    fontSize: 16,
+    iconSize: 18,
+    gap: 8,
+    minWidth: 160
+  }
+};
+function normalizeVariant(variant) {
+  if (variant === 'filled') return 'pills';
+  if (variant === 'underlined') return 'tabs';
+  return variant;
+}
+function isActivationKey(key) {
+  return key === 'Enter' || key === ' ' || key === 'Spacebar';
+}
+function nodeText(node) {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  return undefined;
+}
+function renderNode(node, style) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: style,
+      children: node
+    });
+  }
+  return node;
+}
+function getItemActions(item) {
+  var _item$actions, _item$children;
+  return (_item$actions = item.actions) !== null && _item$actions !== void 0 && _item$actions.length ? item.actions : (_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : [];
+}
+function containsSelected(action, selectedKeys) {
+  var _action$children;
+  return selectedKeys.includes(action.key) || Boolean((_action$children = action.children) === null || _action$children === void 0 ? void 0 : _action$children.some(function (child) {
+    return containsSelected(child, selectedKeys);
+  }));
+}
+function getSubmenuPlacementStyle(placement) {
+  var opensAbove = placement.startsWith('top');
+  var alignsRight = placement === 'right' || placement.endsWith('right');
+  return {
+    top: opensAbove ? undefined : 'calc(100% + 4px)',
+    bottom: opensAbove ? 'calc(100% + 4px)' : undefined,
+    left: alignsRight ? undefined : 0,
+    right: alignsRight ? 0 : undefined,
+    transformOrigin: "".concat(opensAbove ? 'bottom' : 'top', " ").concat(alignsRight ? 'right' : 'left')
+  };
+}
+function getEntryRole(type) {
+  if (type === 'checkbox') return 'menuitemcheckbox';
+  if (type === 'radio') return 'menuitemradio';
+  return 'menuitem';
+}
+var Menubar = function Menubar(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    controlledSelectedKeys = _ref.selectedKeys,
+    defaultSelectedKeys = _ref.defaultSelectedKeys,
+    activeKey = _ref.activeKey,
+    defaultActiveKey = _ref.defaultActiveKey,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-left' : _ref$placement,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$equalWidth = _ref.equalWidth,
+    equalWidth = _ref$equalWidth === void 0 ? false : _ref$equalWidth,
+    _ref$emptyText = _ref.emptyText,
+    emptyText = _ref$emptyText === void 0 ? '暂无菜单配置' : _ref$emptyText,
+    onSelect = _ref.onSelect,
+    onChange = _ref.onChange,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _useState = useState(function () {
+      return defaultSelectedKeys !== null && defaultSelectedKeys !== void 0 ? defaultSelectedKeys : defaultActiveKey ? [defaultActiveKey] : [];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerSelectedKeys = _useState2[0],
+    setInnerSelectedKeys = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openKey = _useState4[0],
+    setOpenKey = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    openActionKey = _useState6[0],
+    setOpenActionKey = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    focusedEntry = _useState8[0],
+    setFocusedEntry = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    hoveredEntry = _useState10[0],
+    setHoveredEntry = _useState10[1];
+  var _useState11 = useState(),
+    _useState12 = _slicedToArray(_useState11, 2),
+    pressedEntry = _useState12[0],
+    setPressedEntry = _useState12[1];
+  var metrics = sizeMap[size];
+  var resolvedVariant = normalizeVariant(variant);
+  var selectedKeys = controlledSelectedKeys !== null && controlledSelectedKeys !== void 0 ? controlledSelectedKeys : activeKey === undefined ? innerSelectedKeys : [activeKey];
+  var selectionControlled = controlledSelectedKeys !== undefined || activeKey !== undefined;
+  var reactId = useId();
+  var safeId = useMemo(function () {
+    return reactId.replace(/[^a-zA-Z0-9_-]/g, '');
+  }, [reactId]);
+  var rootId = "x-menubar-root-".concat(safeId);
+  var hasDocument = process.env.TARO_ENV !== 'weapp' && Boolean(globalThis['document']);
+  var focusSelector = function focusSelector(selector) {
+    var _ownerDocument$queryS, _ownerDocument$queryS2;
+    var ownerDocument = globalThis['document'];
+    ownerDocument === null || ownerDocument === void 0 || (_ownerDocument$queryS = ownerDocument.querySelector(selector)) === null || _ownerDocument$queryS === void 0 || (_ownerDocument$queryS2 = _ownerDocument$queryS.focus) === null || _ownerDocument$queryS2 === void 0 || _ownerDocument$queryS2.call(_ownerDocument$queryS);
+  };
+  var focusTopItem = function focusTopItem(index) {
+    var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var nextIndex = (index + items.length) % items.length;
+    var attempts = 0;
+    while ((_items$nextIndex = items[nextIndex]) !== null && _items$nextIndex !== void 0 && _items$nextIndex.disabled && attempts < items.length) {
+      var _items$nextIndex;
+      nextIndex = (nextIndex + direction + items.length) % items.length;
+      attempts += 1;
+    }
+    focusSelector("#".concat(rootId, " [data-slot=\"menubar-item\"][data-index=\"").concat(nextIndex, "\"]"));
+  };
+  var focusAction = function focusAction(itemIndex, actionIndex) {
+    var _ref2, _focus, _ref3;
+    var child = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var direction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+    var slot = child ? 'menubar-nested-item' : 'menubar-submenu-item';
+    var ownerDocument = globalThis['document'];
+    var candidates = Array.from(ownerDocument.querySelectorAll("#".concat(rootId, " [data-item-index=\"").concat(itemIndex, "\"][data-slot=\"").concat(slot, "\"]"))).filter(function (element) {
+      return element.getAttribute('data-disabled') !== 'true' && element.tabIndex >= 0;
+    });
+    if (!candidates.length) return;
+    var exact = candidates.find(function (element) {
+      return Number(element.getAttribute('data-action-index')) === actionIndex;
+    });
+    var directionalCandidates = direction > 0 ? candidates : _toConsumableArray(candidates).reverse();
+    var next = (_ref2 = exact !== null && exact !== void 0 ? exact : directionalCandidates.find(function (element) {
+      var candidateIndex = Number(element.getAttribute('data-action-index'));
+      return direction > 0 ? candidateIndex > actionIndex : candidateIndex < actionIndex;
+    })) !== null && _ref2 !== void 0 ? _ref2 : directionalCandidates[0];
+    next === null || next === void 0 || (_focus = (_ref3 = next).focus) === null || _focus === void 0 || _focus.call(_ref3);
+  };
+  var updateUncontrolledSelection = function updateUncontrolledSelection(key) {
+    if (!selectionControlled) setInnerSelectedKeys([key]);
+  };
+  var closeMenus = function closeMenus() {
+    setOpenKey(undefined);
+    setOpenActionKey(undefined);
+    setPressedEntry(undefined);
+  };
+  var selectTopItem = function selectTopItem(item) {
+    updateUncontrolledSelection(item.key);
+    onSelect === null || onSelect === void 0 || onSelect(item.key, item);
+    onChange === null || onChange === void 0 || onChange(item.key, item);
+    var actions = getItemActions(item);
+    if (actions.length) {
+      setOpenKey(function (current) {
+        return current === item.key ? undefined : item.key;
+      });
+      setOpenActionKey(undefined);
+      return;
+    }
+    closeMenus();
+  };
+  var selectAction = function selectAction(item, action) {
+    updateUncontrolledSelection(action.key);
+    onSelect === null || onSelect === void 0 || onSelect(action.key, action);
+    onChange === null || onChange === void 0 || onChange(item.key, item, action);
+    closeMenus();
+  };
+  useEffect(function () {
+    if (!openKey || !hasDocument) {
+      return undefined;
+    }
+    var ownerDocument = globalThis['document'];
+    var closeOnOutside = function closeOnOutside(event) {
+      var root = ownerDocument.getElementById(rootId);
+      if (!root.contains(event.target)) closeMenus();
+    };
+    var closeOnEscape = function closeOnEscape(event) {
+      if (event.key !== 'Escape') return;
+      var itemIndex = items.findIndex(function (item) {
+        return item.key === openKey;
+      });
+      closeMenus();
+      if (itemIndex >= 0) focusTopItem(itemIndex);
+    };
+    ownerDocument.addEventListener('mousedown', closeOnOutside);
+    ownerDocument.addEventListener('touchstart', closeOnOutside);
+    ownerDocument.addEventListener('keydown', closeOnEscape);
+    return function () {
+      ownerDocument.removeEventListener('mousedown', closeOnOutside);
+      ownerDocument.removeEventListener('touchstart', closeOnOutside);
+      ownerDocument.removeEventListener('keydown', closeOnEscape);
+    };
+  });
+  var interactionProps = function interactionProps(entryId, disabled, activate, onArrowKey) {
+    return {
+      onBlur: function onBlur() {
+        setFocusedEntry(function (current) {
+          return current === entryId ? undefined : current;
+        });
+        setPressedEntry(function (current) {
+          return current === entryId ? undefined : current;
+        });
+      },
+      onFocus: function onFocus() {
+        if (!disabled) setFocusedEntry(entryId);
+      },
+      onKeyDown: function onKeyDown(event) {
+        var keyboardEvent = event;
+        if (disabled) return;
+        if (isActivationKey(keyboardEvent.key)) {
+          var _keyboardEvent$preven;
+          (_keyboardEvent$preven = keyboardEvent.preventDefault) === null || _keyboardEvent$preven === void 0 || _keyboardEvent$preven.call(keyboardEvent);
+          setPressedEntry(entryId);
+          return;
+        }
+        onArrowKey(keyboardEvent.key);
+      },
+      onKeyUp: function onKeyUp(event) {
+        var _keyboardEvent$preven2;
+        var keyboardEvent = event;
+        if (disabled || !isActivationKey(keyboardEvent.key)) return;
+        (_keyboardEvent$preven2 = keyboardEvent.preventDefault) === null || _keyboardEvent$preven2 === void 0 || _keyboardEvent$preven2.call(keyboardEvent);
+        setPressedEntry(undefined);
+        activate();
+      },
+      onClick: disabled ? undefined : activate,
+      onMouseDown: function onMouseDown() {
+        if (!disabled) setPressedEntry(entryId);
+      },
+      onMouseEnter: function onMouseEnter() {
+        if (!disabled) setHoveredEntry(entryId);
+      },
+      onMouseLeave: function onMouseLeave() {
+        setHoveredEntry(function (current) {
+          return current === entryId ? undefined : current;
+        });
+        setPressedEntry(function (current) {
+          return current === entryId ? undefined : current;
+        });
+      },
+      onMouseUp: function onMouseUp() {
+        return setPressedEntry(function (current) {
+          return current === entryId ? undefined : current;
+        });
+      },
+      onTouchCancel: function onTouchCancel() {
+        return setPressedEntry(function (current) {
+          return current === entryId ? undefined : current;
+        });
+      },
+      onTouchEnd: function onTouchEnd() {
+        return setPressedEntry(function (current) {
+          return current === entryId ? undefined : current;
+        });
+      },
+      onTouchStart: function onTouchStart() {
+        if (!disabled) setPressedEntry(entryId);
+      }
+    };
+  };
+  var interactionStyle = function interactionStyle(entryId, disabled, danger, active) {
+    var focused = !disabled && focusedEntry === entryId;
+    var hovered = !disabled && hoveredEntry === entryId;
+    var pressed = !disabled && pressedEntry === entryId;
+    var backgroundColor = active ? theme.colors.accent : 'transparent';
+    if (hovered || pressed) {
+      backgroundColor = danger ? withOpacity(theme.colors.destructive, 0.1) : theme.colors.accent;
+    }
+    return {
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      outline: 'none',
+      userSelect: 'none',
+      backgroundColor: backgroundColor,
+      boxShadow: focused ? "0 0 0 2px ".concat(withOpacity(theme.colors.ring, 0.28)) : 'none',
+      opacity: disabled ? 0.5 : pressed ? 0.86 : 1,
+      transform: pressed ? 'scale(0.985)' : 'scale(1)',
+      transition: 'background-color var(--x-duration-fast) var(--x-easing-standard), color var(--x-duration-fast) var(--x-easing-standard), box-shadow var(--x-duration-fast) var(--x-easing-standard), transform var(--x-duration-fast) var(--x-easing-standard), opacity var(--x-duration-fast) var(--x-easing-standard)'
+    };
+  };
+  var renderIndicator = function renderIndicator(action) {
+    if (action.type !== 'checkbox' && action.type !== 'radio') return null;
+    var indicatorName = action.checked === 'indeterminate' ? 'Minus' : action.checked ? action.type === 'radio' ? 'Circle' : 'Check' : undefined;
+    var indicatorColor = action.danger ? theme.colors.destructive : theme.colors.primary;
+    return /*#__PURE__*/_jsx(View, {
+      "data-slot": "menubar-indicator",
+      style: {
+        display: 'flex',
+        width: metrics.iconSize,
+        height: metrics.iconSize,
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: indicatorColor
+      },
+      children: indicatorName ? /*#__PURE__*/_jsx(Icon, {
+        name: indicatorName,
+        size: indicatorName === 'Circle' ? Math.max(6, metrics.iconSize - 8) : metrics.iconSize,
+        color: indicatorColor,
+        fill: indicatorName === 'Circle' ? 'currentColor' : 'none'
+      }) : null
+    });
+  };
+  var renderAction = function renderAction(item, action, itemIndex, actionIndex) {
+    var _action$children2, _nodeText;
+    if (action.type === 'separator') {
+      return /*#__PURE__*/_jsx(View, {
+        "data-slot": "menubar-separator",
+        style: {
+          marginTop: 4,
+          marginBottom: 4,
+          borderBottom: "1px solid ".concat(theme.colors.border)
+        }
+      }, action.key);
+    }
+    if (action.type === 'label') {
+      return /*#__PURE__*/_jsx(View, {
+        "data-slot": "menubar-label",
+        style: {
+          padding: "4px ".concat(metrics.paddingX, "px")
+        },
+        children: renderNode(action.label, {
+          fontSize: Math.max(10, metrics.fontSize - 2),
+          fontWeight: '500',
+          color: theme.colors['muted-foreground']
+        })
+      }, action.key);
+    }
+    var entryId = "action:".concat(item.key, ":").concat(action.key);
+    var nestedActions = (_action$children2 = action.children) !== null && _action$children2 !== void 0 ? _action$children2 : [];
+    var hasNestedActions = nestedActions.length > 0;
+    var nestedOpen = hasNestedActions && openActionKey === action.key;
+    var active = containsSelected(action, selectedKeys) || nestedOpen;
+    var role = getEntryRole(action.type);
+    var activate = function activate() {
+      if (hasNestedActions) {
+        setOpenActionKey(function (current) {
+          return current === action.key ? undefined : action.key;
+        });
+        return;
+      }
+      selectAction(item, action);
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      "data-slot": "menubar-action-host",
+      style: {
+        position: 'relative'
+      },
+      onMouseLeave: function onMouseLeave() {
+        if (hasNestedActions) setOpenActionKey(function (current) {
+          return current === action.key ? undefined : current;
+        });
+      },
+      children: [/*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread(_objectSpread({
+        "data-slot": "menubar-submenu-item",
+        "data-item-index": itemIndex,
+        "data-action-index": actionIndex,
+        "data-active": active ? 'true' : 'false',
+        "data-disabled": action.disabled ? 'true' : 'false',
+        "data-danger": action.danger ? 'true' : 'false',
+        "data-focused": focusedEntry === entryId ? 'true' : 'false',
+        "data-hovered": hoveredEntry === entryId ? 'true' : 'false',
+        "data-pressed": pressedEntry === entryId ? 'true' : 'false',
+        "data-checked": action.checked === undefined ? undefined : String(action.checked)
+      }, resolveTaroAccessibilityProps(role, nodeText(action.label))), {}, {
+        "aria-checked": action.type === 'checkbox' || action.type === 'radio' ? action.checked : undefined,
+        "aria-disabled": action.disabled,
+        "aria-expanded": hasNestedActions ? nestedOpen : undefined,
+        "aria-haspopup": hasNestedActions ? 'menu' : undefined,
+        tabIndex: action.disabled || !openKey ? -1 : 0,
+        className: classNames('x-menubar__submenu-item', active && 'x-menubar__submenu-item--active', action.disabled && 'x-menubar__submenu-item--disabled', action.danger && 'x-menubar__submenu-item--danger'),
+        style: _objectSpread({
+          boxSizing: 'border-box',
+          display: 'flex',
+          minHeight: metrics.minHeight,
+          alignItems: 'center',
+          gap: metrics.gap,
+          paddingLeft: metrics.paddingX,
+          paddingRight: metrics.paddingX,
+          borderRadius: 'var(--x-menu-surface-item-radius)',
+          color: action.danger ? theme.colors.destructive : active ? theme.colors['accent-foreground'] : theme.colors['popover-foreground']
+        }, interactionStyle(entryId, Boolean(action.disabled), Boolean(action.danger), active))
+      }, interactionProps(entryId, Boolean(action.disabled), activate, function (key) {
+        if (key === 'ArrowDown') focusAction(itemIndex, actionIndex + 1, false, 1);
+        if (key === 'ArrowUp') focusAction(itemIndex, actionIndex - 1, false, -1);
+        if (key === 'ArrowRight' && hasNestedActions) {
+          setOpenActionKey(action.key);
+          globalThis.setTimeout(function () {
+            return focusAction(itemIndex, 0, true);
+          }, 0);
+        }
+        if (key === 'Escape' || key === 'ArrowLeft') setOpenActionKey(undefined);
+      })), {}, {
+        onMouseEnter: function onMouseEnter() {
+          if (!action.disabled) {
+            setHoveredEntry(entryId);
+            if (hasNestedActions) setOpenActionKey(action.key);
+          }
+        },
+        children: [renderIndicator(action), action.icon ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "menubar-icon",
+          style: {
+            display: 'flex',
+            width: metrics.iconSize,
+            height: metrics.iconSize,
+            flexShrink: 0,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: action.icon
+        }) : null, /*#__PURE__*/_jsxs(View, {
+          style: {
+            display: 'flex',
+            minWidth: 0,
+            flex: 1,
+            flexDirection: 'column'
+          },
+          children: [renderNode(action.label, {
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontSize: metrics.fontSize,
+            color: action.danger ? theme.colors.destructive : active ? theme.colors['accent-foreground'] : theme.colors['popover-foreground']
+          }), action.description !== undefined && action.description !== null ? /*#__PURE__*/_jsx(View, {
+            style: {
+              marginTop: 2
+            },
+            children: renderNode(action.description, {
+              display: 'block',
+              fontSize: Math.max(10, metrics.fontSize - 3),
+              color: theme.colors['muted-foreground']
+            })
+          }) : null]
+        }), action.shortcut !== undefined && action.shortcut !== null ? /*#__PURE__*/_jsx(View, {
+          "data-slot": "menubar-shortcut",
+          style: {
+            flexShrink: 0,
+            paddingLeft: metrics.gap,
+            color: theme.colors['muted-foreground']
+          },
+          children: action.shortcut
+        }) : null, hasNestedActions ? /*#__PURE__*/_jsx(Icon, {
+          name: "ChevronRight",
+          size: metrics.iconSize,
+          color: theme.colors['muted-foreground']
+        }) : null]
+      })), hasNestedActions ? /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
+        "data-slot": "menubar-nested-submenu",
+        "data-open": nestedOpen ? 'true' : 'false',
+        "data-item-index": itemIndex
+      }, resolveTaroAccessibilityProps('menu', "".concat((_nodeText = nodeText(action.label)) !== null && _nodeText !== void 0 ? _nodeText : '操作', "\u5B50\u83DC\u5355"))), {}, {
+        "aria-hidden": !nestedOpen,
+        style: {
+          position: 'absolute',
+          top: -4,
+          left: 'calc(100% + 6px)',
+          zIndex: 1102,
+          boxSizing: 'border-box',
+          minWidth: metrics.minWidth,
+          maxWidth: 'calc(100vw - 32px)',
+          padding: 4,
+          pointerEvents: nestedOpen ? 'auto' : 'none',
+          visibility: nestedOpen ? 'visible' : 'hidden',
+          opacity: nestedOpen ? 1 : 0,
+          border: "1px solid ".concat(theme.colors.border),
+          borderRadius: 'var(--x-menubar-submenu-radius)',
+          backgroundColor: theme.colors.popover,
+          boxShadow: 'var(--x-menubar-submenu-shadow)',
+          transform: nestedOpen ? 'translateX(0) scale(1)' : 'translateX(-4px) scale(0.98)',
+          transformOrigin: 'top left',
+          transition: nestedOpen ? 'opacity var(--x-duration-overlayEnter) var(--x-easing-overlayEnter), transform var(--x-duration-overlayEnter) var(--x-easing-overlayEnter), visibility 0ms linear' : 'opacity var(--x-duration-overlayExit) var(--x-easing-overlayExit), transform var(--x-duration-overlayExit) var(--x-easing-overlayExit), visibility 0ms linear var(--x-duration-overlayExit)'
+        },
+        children: nestedActions.map(function (child, childIndex) {
+          var childId = "child:".concat(item.key, ":").concat(action.key, ":").concat(child.key);
+          var childActive = selectedKeys.includes(child.key);
+          return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread(_objectSpread({
+            "data-slot": "menubar-nested-item",
+            "data-item-index": itemIndex,
+            "data-action-index": childIndex,
+            "data-active": childActive ? 'true' : 'false',
+            "data-disabled": child.disabled ? 'true' : 'false'
+          }, resolveTaroAccessibilityProps(getEntryRole(child.type), nodeText(child.label))), {}, {
+            "aria-checked": child.type === 'checkbox' || child.type === 'radio' ? child.checked : undefined,
+            "aria-disabled": child.disabled,
+            tabIndex: child.disabled || !nestedOpen ? -1 : 0,
+            style: _objectSpread({
+              boxSizing: 'border-box',
+              display: 'flex',
+              minHeight: metrics.minHeight,
+              alignItems: 'center',
+              gap: metrics.gap,
+              paddingLeft: metrics.paddingX,
+              paddingRight: metrics.paddingX,
+              borderRadius: 'var(--x-menu-surface-item-radius)'
+            }, interactionStyle(childId, Boolean(child.disabled), Boolean(child.danger), childActive))
+          }, interactionProps(childId, Boolean(child.disabled), function () {
+            return selectAction(item, child);
+          }, function (key) {
+            if (key === 'ArrowDown') focusAction(itemIndex, childIndex + 1, true, 1);
+            if (key === 'ArrowUp') focusAction(itemIndex, childIndex - 1, true, -1);
+            if (key === 'Escape' || key === 'ArrowLeft') {
+              setOpenActionKey(undefined);
+              focusAction(itemIndex, actionIndex);
+            }
+          })), {}, {
+            children: [renderIndicator(child), child.icon ? /*#__PURE__*/_jsx(View, {
+              "data-slot": "menubar-icon",
+              style: {
+                display: 'flex',
+                width: metrics.iconSize,
+                height: metrics.iconSize,
+                flexShrink: 0,
+                alignItems: 'center',
+                justifyContent: 'center'
+              },
+              children: child.icon
+            }) : null, /*#__PURE__*/_jsxs(View, {
+              style: {
+                display: 'flex',
+                minWidth: 0,
+                flex: 1,
+                flexDirection: 'column'
+              },
+              children: [renderNode(child.label, {
+                display: 'block',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                fontSize: metrics.fontSize,
+                color: child.danger ? theme.colors.destructive : theme.colors['popover-foreground']
+              }), child.description !== undefined && child.description !== null ? /*#__PURE__*/_jsx(View, {
+                style: {
+                  marginTop: 2
+                },
+                children: renderNode(child.description, {
+                  display: 'block',
+                  fontSize: Math.max(10, metrics.fontSize - 3),
+                  color: theme.colors['muted-foreground']
+                })
+              }) : null]
+            }), child.shortcut !== undefined && child.shortcut !== null ? /*#__PURE__*/_jsx(View, {
+              "data-slot": "menubar-shortcut",
+              style: {
+                flexShrink: 0,
+                paddingLeft: metrics.gap
+              },
+              children: child.shortcut
+            }) : null]
+          }), child.key);
+        })
+      })) : null]
+    }, action.key);
+  };
+  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
+    id: rootId,
+    "data-slot": "menubar",
+    "data-size": size,
+    "data-variant": variant,
+    "data-resolved-variant": resolvedVariant,
+    "data-placement": placement
+  }, resolveTaroAccessibilityProps('menubar', '菜单栏')), {}, {
+    className: classNames('x-menubar', "x-menubar--".concat(resolvedVariant), "x-menubar--".concat(size), equalWidth && 'x-menubar--equal', className),
+    style: _objectSpread({
+      position: 'relative',
+      zIndex: openKey ? 1100 : undefined,
+      boxSizing: 'border-box',
+      display: 'flex',
+      minHeight: metrics.minHeight,
+      maxWidth: '100%',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      gap: resolvedVariant === 'pills' ? 4 : 0,
+      paddingRight: metrics.paddingX,
+      paddingBottom: resolvedVariant === 'pills' ? 4 : 0,
+      paddingLeft: metrics.paddingX,
+      overflowX: openKey ? 'visible' : 'auto',
+      overflowY: 'visible',
+      borderBottom: resolvedVariant === 'pills' ? 'none' : "1px solid ".concat(theme.colors.border),
+      backgroundColor: theme.colors.card
+    }, style),
+    children: [openKey && !hasDocument ? /*#__PURE__*/_jsx(View, {
+      "data-slot": "menubar-backdrop",
+      catchMove: true,
+      onClick: closeMenus,
+      style: {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 1099,
+        backgroundColor: 'transparent'
+      }
+    }) : null, items.length === 0 ? children || /*#__PURE__*/_jsx(View, {
+      "data-slot": "menubar-empty",
+      style: {
+        padding: metrics.paddingX
+      },
+      children: renderNode(emptyText, {
+        fontSize: metrics.fontSize,
+        color: theme.colors['muted-foreground']
+      })
+    }) : items.map(function (item, itemIndex) {
+      var _nodeText2;
+      var actions = getItemActions(item);
+      var hasActions = actions.length > 0;
+      var isOpen = item.key === openKey;
+      var active = selectedKeys.includes(item.key) || actions.some(function (action) {
+        return containsSelected(action, selectedKeys);
+      }) || isOpen;
+      var entryId = "item:".concat(item.key);
+      var triggerBackground = 'transparent';
+      if (active && resolvedVariant !== 'default') triggerBackground = theme.colors.accent;
+      if (hoveredEntry === entryId || pressedEntry === entryId) {
+        triggerBackground = theme.colors.accent;
+      }
+      return /*#__PURE__*/_jsxs(View, {
+        "data-slot": "menubar-item-host",
+        style: {
+          position: 'relative',
+          zIndex: 1100,
+          minWidth: 0,
+          maxWidth: equalWidth ? undefined : 220,
+          flex: equalWidth ? 1 : undefined,
+          flexShrink: equalWidth ? 1 : 0
+        },
+        children: [/*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread(_objectSpread({
+          "data-slot": "menubar-item",
+          "data-index": itemIndex,
+          "data-key": item.key,
+          "data-active": active ? 'true' : 'false',
+          "data-open": isOpen ? 'true' : 'false',
+          "data-disabled": item.disabled ? 'true' : 'false',
+          "data-focused": focusedEntry === entryId ? 'true' : 'false',
+          "data-hovered": hoveredEntry === entryId ? 'true' : 'false',
+          "data-pressed": pressedEntry === entryId ? 'true' : 'false'
+        }, resolveTaroAccessibilityProps('menuitem', nodeText(item.label))), {}, {
+          "aria-controls": hasActions ? "x-menubar-submenu-".concat(safeId, "-").concat(itemIndex) : undefined,
+          "aria-disabled": item.disabled,
+          "aria-expanded": hasActions ? isOpen : undefined,
+          "aria-haspopup": hasActions ? 'menu' : undefined,
+          tabIndex: item.disabled ? -1 : 0,
+          className: classNames('x-menubar__item', active && 'x-menubar__item--active', isOpen && 'x-menubar__item--open', item.disabled && 'x-menubar__item--disabled'),
+          style: _objectSpread(_objectSpread({}, interactionStyle(entryId, Boolean(item.disabled), false, false)), {}, {
+            boxSizing: 'border-box',
+            display: 'flex',
+            width: equalWidth ? '100%' : undefined,
+            minHeight: metrics.minHeight,
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: metrics.gap,
+            paddingLeft: metrics.paddingX,
+            paddingRight: metrics.paddingX,
+            overflow: 'hidden',
+            borderBottom: resolvedVariant === 'pills' ? 'none' : "2px solid ".concat(active ? theme.colors.primary : 'transparent'),
+            borderRadius: resolvedVariant === 'pills' ? 999 : resolvedVariant === 'tabs' ? 'var(--x-menubar-trigger-radius) var(--x-menubar-trigger-radius) 0 0' : 'var(--x-menubar-trigger-radius)',
+            backgroundColor: triggerBackground,
+            color: active ? theme.colors.primary : theme.colors.foreground
+          })
+        }, interactionProps(entryId, Boolean(item.disabled), function () {
+          return selectTopItem(item);
+        }, function (key) {
+          if (key === 'ArrowRight') focusTopItem(itemIndex + 1, 1);
+          if (key === 'ArrowLeft') focusTopItem(itemIndex - 1, -1);
+          if (key === 'ArrowDown' && hasActions) {
+            if (!isOpen) selectTopItem(item);
+            globalThis.setTimeout(function () {
+              return focusAction(itemIndex, 0);
+            }, 0);
+          }
+          if (key === 'Escape') closeMenus();
+        })), {}, {
+          children: [item.icon ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "menubar-icon",
+            style: {
+              display: 'flex',
+              width: metrics.iconSize,
+              height: metrics.iconSize,
+              flexShrink: 0,
+              alignItems: 'center',
+              justifyContent: 'center'
+            },
+            children: item.icon
+          }) : null, /*#__PURE__*/_jsx(View, {
+            "data-slot": "menubar-item-label",
+            style: {
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis'
+            },
+            children: renderNode(item.label, {
+              display: 'block',
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              fontSize: metrics.fontSize,
+              fontWeight: '500',
+              color: active ? theme.colors.primary : theme.colors.foreground
+            })
+          }), item.badge !== undefined && item.badge !== null && item.badge !== false ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "menubar-badge",
+            style: {
+              display: 'flex',
+              flexShrink: 0
+            },
+            children: item.badge
+          }) : null, hasActions ? /*#__PURE__*/_jsx(Icon, {
+            name: isOpen ? 'ChevronUp' : 'ChevronDown',
+            size: metrics.iconSize,
+            color: active ? theme.colors.primary : theme.colors['muted-foreground']
+          }) : null]
+        })), hasActions ? /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
+          id: "x-menubar-submenu-".concat(safeId, "-").concat(itemIndex),
+          "data-slot": "menubar-submenu",
+          "data-open": isOpen ? 'true' : 'false',
+          "data-item-index": itemIndex
+        }, resolveTaroAccessibilityProps('menu', "".concat((_nodeText2 = nodeText(item.label)) !== null && _nodeText2 !== void 0 ? _nodeText2 : '菜单', "\u5B50\u83DC\u5355"))), {}, {
+          "aria-hidden": !isOpen,
+          style: _objectSpread({
+            position: 'absolute',
+            zIndex: 1101,
+            boxSizing: 'border-box',
+            minWidth: metrics.minWidth,
+            maxWidth: 'calc(100vw - 32px)',
+            padding: 4,
+            overflow: 'visible',
+            pointerEvents: isOpen ? 'auto' : 'none',
+            visibility: isOpen ? 'visible' : 'hidden',
+            opacity: isOpen ? 1 : 0,
+            border: "1px solid ".concat(theme.colors.border),
+            borderRadius: 'var(--x-menubar-submenu-radius)',
+            backgroundColor: theme.colors.popover,
+            color: theme.colors['popover-foreground'],
+            boxShadow: 'var(--x-menubar-submenu-shadow)',
+            transform: isOpen ? 'translateY(0) scale(1)' : 'translateY(-4px) scale(0.98)',
+            transition: isOpen ? 'opacity var(--x-duration-overlayEnter) var(--x-easing-overlayEnter), transform var(--x-duration-overlayEnter) var(--x-easing-overlayEnter), visibility 0ms linear' : 'opacity var(--x-duration-overlayExit) var(--x-easing-overlayExit), transform var(--x-duration-overlayExit) var(--x-easing-overlayExit), visibility 0ms linear var(--x-duration-overlayExit)'
+          }, getSubmenuPlacementStyle(placement)),
+          children: actions.map(function (action, actionIndex) {
+            return renderAction(item, action, itemIndex, actionIndex);
+          })
+        })) : null]
+      }, item.key);
+    })]
+  }));
+};
+Menubar.displayName = 'Menubar';
+export default Menubar;