@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-SY4P2AXW.js

@@ -0,0 +1,571 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Menu.tsx
+
+
+
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var MenuContext = _react.createContext.call(void 0, null);
+function useMenuContext() {
+  return _react.useContext.call(void 0, MenuContext);
+}
+var Menu = ({
+  items,
+  mode = "vertical",
+  theme = "light",
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
+  openKeys: controlledOpenKeys,
+  defaultOpenKeys = [],
+  collapsed = false,
+  multiple = true,
+  inlineIndent = 24,
+  className,
+  style,
+  onSelect,
+  onOpenChange,
+  onSearch,
+  searchable = false,
+  searchValue: controlledSearchValue,
+  defaultSearchValue = "",
+  searchPlaceholder = "Search menu",
+  emptyText = "No menu items found",
+  children
+}) => {
+  const menuRef = _react.useRef.call(void 0, null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = _react.useState.call(void 0, defaultSelectedKeys);
+  const [internalOpenKeys, setInternalOpenKeys] = _react.useState.call(void 0, defaultOpenKeys);
+  const [internalSearchValue, setInternalSearchValue] = _react.useState.call(void 0, defaultSearchValue);
+  const selectedKeys = controlledSelectedKeys !== void 0 ? controlledSelectedKeys : internalSelectedKeys;
+  const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
+  const searchValue = controlledSearchValue !== void 0 ? controlledSearchValue : internalSearchValue;
+  const handleSelect = _react.useCallback.call(void 0, 
+    (key) => {
+      const newSelectedKeys = _tigercatcore.replaceKeys.call(void 0, key, selectedKeys);
+      if (controlledSelectedKeys === void 0) {
+        setInternalSelectedKeys(newSelectedKeys);
+      }
+      _optionalChain([onSelect, 'optionalCall', _ => _(key, { selectedKeys: newSelectedKeys })]);
+    },
+    [controlledSelectedKeys, selectedKeys, onSelect]
+  );
+  const handleOpenChange = _react.useCallback.call(void 0, 
+    (key) => {
+      const toggled = _tigercatcore.toggleKey.call(void 0, key, openKeys);
+      const newOpenKeys = multiple ? toggled : toggled.includes(key) ? [key] : [];
+      if (controlledOpenKeys === void 0) {
+        setInternalOpenKeys(newOpenKeys);
+      }
+      _optionalChain([onOpenChange, 'optionalCall', _2 => _2(key, { openKeys: newOpenKeys })]);
+    },
+    [openKeys, multiple, controlledOpenKeys, onOpenChange]
+  );
+  const handleSearchInput = _react.useCallback.call(void 0, 
+    (event) => {
+      const value = event.target.value;
+      if (controlledSearchValue === void 0) {
+        setInternalSearchValue(value);
+      }
+      _optionalChain([onSearch, 'optionalCall', _3 => _3(value)]);
+    },
+    [controlledSearchValue, onSearch]
+  );
+  const menuClasses = _react.useMemo.call(void 0, () => {
+    return _tigercatcore.classNames.call(void 0, _tigercatcore.getMenuClasses.call(void 0, mode, theme, collapsed), className);
+  }, [mode, theme, collapsed, className]);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      mode,
+      theme,
+      collapsed,
+      inlineIndent,
+      selectedKeys,
+      openKeys,
+      handleSelect,
+      handleOpenChange
+    }),
+    [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
+  );
+  const filteredItems = _react.useMemo.call(void 0, 
+    () => _tigercatcore.filterMenuItems.call(void 0, _nullishCoalesce(items, () => ( [])), searchValue),
+    [items, searchValue]
+  );
+  function renderDataItem(item) {
+    if (item.children && item.children.length > 0) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        SubMenu,
+        {
+          itemKey: item.key,
+          title: item.label,
+          icon: item.icon,
+          disabled: item.disabled,
+          children: item.children.map(renderDataItem)
+        },
+        item.key
+      );
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuItem, { itemKey: item.key, icon: item.icon, disabled: item.disabled, children: item.label }, item.key);
+  }
+  const dataChildren = filteredItems.map(renderDataItem);
+  const hasSlotChildren = _react2.default.Children.count(children) > 0;
+  const emptyChild = items && items.length > 0 && dataChildren.length === 0 && !hasSlotChildren ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { role: "none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.menuSearchEmptyClasses, children: emptyText }) }) : null;
+  _react.useEffect.call(void 0, () => {
+    if (menuRef.current) _tigercatcore.initRovingTabIndex.call(void 0, menuRef.current);
+  }, [mode, collapsed, selectedKeys, openKeys, filteredItems]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "ul",
+    {
+      ref: menuRef,
+      className: menuClasses,
+      style,
+      role: "menu",
+      "data-tiger-menu-root": "true",
+      "data-tiger-menu-mode": mode,
+      children: [
+        searchable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { role: "none", className: _tigercatcore.menuSearchFieldClasses, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            type: "search",
+            value: searchValue,
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            className: _tigercatcore.menuSearchInputClasses,
+            onChange: handleSearchInput
+          }
+        ) }),
+        dataChildren,
+        children,
+        emptyChild
+      ]
+    }
+  ) });
+};
+var MenuItem = ({
+  itemKey,
+  disabled = false,
+  icon,
+  className,
+  children,
+  level = 0,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = useMenuContext();
+  if (!menuContext) {
+    console.warn("MenuItem must be used within Menu component");
+  }
+  const isSelected = !!menuContext && _tigercatcore.isKeySelected.call(void 0, itemKey, menuContext.selectedKeys);
+  const effectiveCollapsed = _nullishCoalesce(collapsedOverride, () => ( (menuContext ? menuContext.collapsed : false)));
+  const itemClasses = _tigercatcore.classNames.call(void 0, 
+    menuContext ? _tigercatcore.getMenuItemClasses.call(void 0, isSelected, disabled, menuContext.theme, effectiveCollapsed) : "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200",
+    className
+  );
+  const indentStyle = menuContext && menuContext.mode === "inline" && level > 0 ? _tigercatcore.getMenuItemIndent.call(void 0, level, menuContext.inlineIndent) : {};
+  const handleClick = _react.useCallback.call(void 0, () => {
+    if (!disabled && menuContext) {
+      menuContext.handleSelect(itemKey);
+    }
+  }, [disabled, menuContext, itemKey]);
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (event) => {
+      if (!menuContext) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = _optionalChain([rootMenu, 'optionalAccess', _4 => _4.dataset, 'access', _5 => _5.tigerMenuRoot]) === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        _tigercatcore.moveFocusInMenu.call(void 0, current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        _tigercatcore.moveFocusInMenu.call(void 0, current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        _tigercatcore.focusMenuEdge.call(void 0, current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        _tigercatcore.focusMenuEdge.call(void 0, current, "end");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    },
+    [menuContext, handleClick]
+  );
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.menuItemIconClasses, children: icon });
+  };
+  const renderLabel = () => {
+    if (!effectiveCollapsed) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1", children });
+    if (!icon) {
+      const text = String(children || "");
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1 text-center", children: text.charAt(0).toUpperCase() });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { role: "none", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      style: indentStyle,
+      role: "menuitem",
+      "data-tiger-menuitem": "true",
+      "data-tiger-selected": isSelected ? "true" : "false",
+      "aria-current": isSelected ? "page" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      disabled,
+      tabIndex: -1,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        renderIcon(),
+        renderLabel()
+      ]
+    }
+  ) });
+};
+function isComponentNamed(elementType, name) {
+  if (typeof elementType !== "function" && typeof elementType !== "object") return false;
+  const maybeFn = elementType;
+  return maybeFn.displayName === name || maybeFn.name === name;
+}
+var MenuItemGroup = ({
+  title,
+  className,
+  children,
+  level = 0
+}) => {
+  const enhancedChildren = _react2.default.Children.map(children, (child) => {
+    if (!_react2.default.isValidElement(child)) return child;
+    if (child.type === MenuItem || isComponentNamed(child.type, "SubMenu")) {
+      return _react2.default.cloneElement(child, {
+        level
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "list-none", children: [
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.menuItemGroupTitleClasses, children: title }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { role: "group", className, children: enhancedChildren })
+  ] });
+};
+var ExpandIcon = ({ expanded }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "svg",
+  {
+    className: _tigercatcore.getSubMenuExpandIconClasses.call(void 0, expanded),
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
+  }
+);
+var SubMenu = ({
+  itemKey,
+  title = "",
+  icon,
+  disabled = false,
+  className,
+  level = 0,
+  children,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = useMenuContext();
+  if (!menuContext) {
+    console.warn("SubMenu must be used within Menu component");
+  }
+  const [isHovered, setIsHovered] = _react.useState.call(void 0, false);
+  const [isOpenByKeyboard, setIsOpenByKeyboard] = _react.useState.call(void 0, false);
+  const submenuContentRef = _react.useRef.call(void 0, null);
+  const heightTransitionRef = _react.useRef.call(void 0, null);
+  const effectiveCollapsed = _nullishCoalesce(collapsedOverride, () => ( (menuContext ? menuContext.collapsed : false)));
+  const isPopup = !!menuContext && (menuContext.mode === "horizontal" || menuContext.mode === "vertical" && effectiveCollapsed);
+  const isOpen = !!menuContext && _tigercatcore.isKeyOpen.call(void 0, itemKey, menuContext.openKeys);
+  const isExpanded = isPopup ? isHovered || isOpenByKeyboard : isOpen;
+  const isInlineOrVertical = _optionalChain([menuContext, 'optionalAccess', _6 => _6.mode]) !== "horizontal" && !isPopup;
+  const [hasRenderedInline, setHasRenderedInline] = _react.useState.call(void 0, 
+    () => isInlineOrVertical ? isExpanded : false
+  );
+  _react.useEffect.call(void 0, () => {
+    if (!isInlineOrVertical || !isExpanded || hasRenderedInline) return;
+    setHasRenderedInline(true);
+  }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const disposeHeightTransition = _react.useCallback.call(void 0, () => {
+    _optionalChain([heightTransitionRef, 'access', _7 => _7.current, 'optionalAccess', _8 => _8.dispose, 'call', _9 => _9()]);
+    heightTransitionRef.current = null;
+  }, []);
+  _react.useEffect.call(void 0, () => disposeHeightTransition, [disposeHeightTransition]);
+  _react.useLayoutEffect.call(void 0, () => {
+    if (!isInlineOrVertical || !hasRenderedInline || !submenuContentRef.current) {
+      disposeHeightTransition();
+      return;
+    }
+    if (!heightTransitionRef.current) {
+      heightTransitionRef.current = _tigercatcore.createSubmenuHeightTransitionController.call(void 0, 
+        submenuContentRef.current,
+        { expanded: isExpanded }
+      );
+      return;
+    }
+    heightTransitionRef.current.update(isExpanded);
+  }, [disposeHeightTransition, hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const titleClasses = _react.useMemo.call(void 0, () => {
+    if (!menuContext) return "";
+    return _tigercatcore.classNames.call(void 0, _tigercatcore.getSubMenuTitleClasses.call(void 0, menuContext.theme, disabled), className);
+  }, [menuContext, disabled, className]);
+  const contentClasses = _react.useMemo.call(void 0, () => {
+    if (!menuContext) return "";
+    if (menuContext.mode === "horizontal") {
+      return level === 0 ? _tigercatcore.submenuContentHorizontalClasses : _tigercatcore.submenuContentHorizontalNestedClasses;
+    }
+    if (isPopup) return _tigercatcore.submenuContentPopupClasses;
+    if (menuContext.mode === "inline") return _tigercatcore.submenuContentInlineClasses;
+    return _tigercatcore.submenuContentVerticalClasses;
+  }, [menuContext, isPopup, level]);
+  const handleTitleClick = _react.useCallback.call(void 0, () => {
+    if (!menuContext || disabled) return;
+    if (menuContext.mode === "horizontal") return;
+    if (isPopup) {
+      setIsOpenByKeyboard((prev) => !prev);
+      setIsHovered(true);
+      return;
+    }
+    setHasRenderedInline(true);
+    menuContext.handleOpenChange(itemKey);
+  }, [disabled, menuContext, itemKey, isPopup]);
+  const handleMouseEnter = _react.useCallback.call(void 0, () => {
+    if (_optionalChain([menuContext, 'optionalAccess', _10 => _10.mode]) === "horizontal" || isPopup) setIsHovered(true);
+  }, [menuContext, isPopup]);
+  const handleMouseLeave = _react.useCallback.call(void 0, () => {
+    if (_optionalChain([menuContext, 'optionalAccess', _11 => _11.mode]) === "horizontal" || isPopup) {
+      setIsHovered(false);
+      setIsOpenByKeyboard(false);
+    }
+  }, [menuContext, isPopup]);
+  const openInline = _react.useCallback.call(void 0, 
+    (titleEl) => {
+      if (!menuContext) return;
+      setHasRenderedInline(true);
+      menuContext.handleOpenChange(itemKey);
+      setTimeout(() => _tigercatcore.focusFirstChildItem.call(void 0, titleEl), 0);
+    },
+    [menuContext, itemKey]
+  );
+  const handleTitleKeyDown = _react.useCallback.call(void 0, 
+    (event) => {
+      if (!menuContext || disabled) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = _optionalChain([rootMenu, 'optionalAccess', _12 => _12.dataset, 'access', _13 => _13.tigerMenuRoot]) === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        _tigercatcore.moveFocusInMenu.call(void 0, current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        _tigercatcore.moveFocusInMenu.call(void 0, current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        _tigercatcore.focusMenuEdge.call(void 0, current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        _tigercatcore.focusMenuEdge.call(void 0, current, "end");
+        return;
+      }
+      if (event.key === "Escape" || event.key === "ArrowLeft") {
+        if (menuContext.mode === "horizontal" || isPopup) {
+          event.preventDefault();
+          setIsOpenByKeyboard(false);
+          setIsHovered(false);
+          return;
+        }
+        if (isOpen) {
+          event.preventDefault();
+          menuContext.handleOpenChange(itemKey);
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (menuContext.mode === "horizontal" || isPopup) {
+          setIsOpenByKeyboard(true);
+          return;
+        }
+        openInline(current);
+        return;
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        if (menuContext.mode === "horizontal" || isPopup) {
+          event.preventDefault();
+          setIsOpenByKeyboard(true);
+          return;
+        }
+        if (!isOpen) {
+          event.preventDefault();
+          openInline(current);
+        }
+      }
+    },
+    [menuContext, disabled, isOpen, isPopup, itemKey, openInline]
+  );
+  const indentStyle = !menuContext || menuContext.mode === "horizontal" || level === 0 ? {} : _tigercatcore.getMenuItemIndent.call(void 0, level, menuContext.inlineIndent);
+  if (!menuContext) return null;
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.menuItemIconClasses, children: icon });
+  };
+  const renderTitle = () => {
+    if (!effectiveCollapsed) {
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        renderIcon(),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1", children: title }),
+        menuContext.mode !== "horizontal" && !isPopup && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExpandIcon, { expanded: isExpanded })
+      ] });
+    } else if (!icon) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-1 text-center", children: title.charAt(0).toUpperCase() });
+    } else {
+      return renderIcon();
+    }
+  };
+  const renderContent = () => {
+    const nextLevel = level + 1;
+    const enhancedChildren = _react2.default.Children.map(children, (child) => {
+      if (!_react2.default.isValidElement(child)) return child;
+      if (child.type === MenuItem || child.type === SubMenu || child.type === MenuItemGroup) {
+        return _react2.default.cloneElement(
+          child,
+          {
+            level: nextLevel
+          }
+        );
+      }
+      return child;
+    });
+    const popupZIndex = isPopup ? _tigercatcore.getSubmenuPopupZIndex.call(void 0, level) : {};
+    if (isPopup) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "ul",
+        {
+          className: contentClasses,
+          style: { display: isExpanded ? "block" : "none", ...popupZIndex },
+          role: "menu",
+          "aria-hidden": isExpanded ? void 0 : "true",
+          children: enhancedChildren
+        }
+      );
+    }
+    if (!hasRenderedInline) return null;
+    const isHidden = !isExpanded;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: submenuContentRef,
+        className: _tigercatcore.submenuHeightTransitionClasses,
+        style: heightTransitionRef.current ? void 0 : _tigercatcore.getInitialSubmenuHeightTransitionStyle.call(void 0, isExpanded),
+        "aria-hidden": isHidden ? "true" : void 0,
+        "data-tiger-menu-hidden": isHidden ? "true" : void 0,
+        "data-tiger-submenu-motion": "height",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: contentClasses, role: "menu", children: enhancedChildren })
+      }
+    );
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "li",
+    {
+      className: isPopup ? "relative" : "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      role: "none",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: titleClasses,
+            style: indentStyle,
+            onClick: handleTitleClick,
+            onKeyDown: handleTitleKeyDown,
+            role: "menuitem",
+            "data-tiger-menuitem": "true",
+            "aria-expanded": isExpanded ? "true" : "false",
+            "aria-haspopup": "true",
+            "aria-disabled": disabled ? "true" : void 0,
+            disabled,
+            tabIndex: -1,
+            children: renderTitle()
+          }
+        ),
+        renderContent()
+      ]
+    }
+  );
+};
+
+
+
+
+
+
+
+exports.useMenuContext = useMenuContext; exports.Menu = Menu; exports.MenuItem = MenuItem; exports.MenuItemGroup = MenuItemGroup; exports.SubMenu = SubMenu;