@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-HZGTQGSM.mjs

@@ -0,0 +1,943 @@
+import {
+  useSidebarContext
+} from "./chunk-5J7EDMS7.mjs";
+import {
+  Icon
+} from "./chunk-WPRXOO6N.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Menu.tsx
+import {
+  getMenuItemKind,
+  menuSearchEmptyClasses,
+  menuSearchFieldClasses,
+  menuSearchInputClasses
+} from "@expcat/tigercat-core";
+
+// src/components/Menu/context.ts
+import { createContext, useContext } from "react";
+import { devWarn } from "@expcat/tigercat-core";
+var MenuContext = createContext(null);
+var SubMenuScopeContext = createContext(null);
+function useMenuContext() {
+  return useContext(MenuContext);
+}
+function useSubMenuScope() {
+  return useContext(SubMenuScopeContext);
+}
+function warnMissingMenuContext(component) {
+  devWarn(`Menu.${component}.context`, `${component} must be used within Menu component`);
+}
+
+// src/components/Menu/state.ts
+import React2, { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  classNames,
+  getMenuClasses,
+  getMenuListRole,
+  mergeTigerLocale,
+  nextOpenKeys,
+  nextSelectedKeys,
+  reconcileSearchOpenKeys,
+  resolveMenuCollapsed,
+  resolveMenuMode,
+  resolveSearchFilter,
+  warnControlledSearchOpenKeys
+} from "@expcat/tigercat-core";
+
+// src/components/Menu/render.tsx
+import React from "react";
+import {
+  getIconDefinition,
+  getMenuCollapsedInitial,
+  getMenuPlainText,
+  menuCollapsedIconClasses,
+  menuItemIconClasses,
+  resolveMenuIconKind
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function renderMenuIcon(icon, collapsed) {
+  const kind = resolveMenuIconKind(icon);
+  if (kind === "none") return null;
+  const iconClasses = collapsed ? menuCollapsedIconClasses : menuItemIconClasses;
+  if (kind === "name" && typeof icon === "string") {
+    const definition = getIconDefinition(icon);
+    return definition ? /* @__PURE__ */ jsx("span", { className: iconClasses, children: /* @__PURE__ */ jsx(Icon, { icon: definition }) }) : null;
+  }
+  return /* @__PURE__ */ jsx("span", { className: iconClasses, children: icon });
+}
+function renderCollapsedLabel(text, icon) {
+  if (resolveMenuIconKind(icon) !== "none") {
+    return text ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: text }) : null;
+  }
+  const initial = getMenuCollapsedInitial(text);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    initial ? /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", "aria-hidden": "true", children: initial }) : null,
+    text ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: text }) : null
+  ] });
+}
+function getReactMenuPlainText(children) {
+  return getMenuPlainText(
+    React.Children.toArray(children).map((child) => {
+      if (typeof child === "string" || typeof child === "number") return child;
+      return child;
+    })
+  );
+}
+function collectReactMenuKeys(children) {
+  const keys = [];
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    const props = child.props;
+    if (props.itemKey != null) keys.push(props.itemKey);
+    if (props.children) keys.push(...collectReactMenuKeys(props.children));
+  });
+  return keys;
+}
+var MENU_CHILD_NAMES = /* @__PURE__ */ new Set([
+  "MenuItem",
+  "SubMenu",
+  "MenuItemGroup",
+  "TigerMenuItem",
+  "TigerSubMenu",
+  "TigerMenuItemGroup"
+]);
+function isMenuChildElement(child) {
+  if (typeof child.type !== "function" && typeof child.type !== "object") return false;
+  const type = child.type;
+  return MENU_CHILD_NAMES.has(type.displayName ?? type.name ?? "");
+}
+function mapMenuChildren(children, next) {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    if (!isMenuChildElement(child)) return child;
+    return React.cloneElement(child, next);
+  });
+}
+
+// src/components/Menu/state.ts
+function useMenuRootState(props) {
+  const {
+    items,
+    mode = "vertical",
+    theme = "light",
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys = [],
+    openKeys: controlledOpenKeys,
+    defaultOpenKeys = [],
+    collapsed: collapsedProp,
+    multiple = true,
+    inlineIndent = 24,
+    popupPortal = true,
+    className,
+    style,
+    onSelectedKeysChange,
+    onOpenKeysChange,
+    onSelect,
+    onOpenChange,
+    onSearchChange,
+    searchable = false,
+    searchValue: controlledSearchValue,
+    defaultSearchValue = "",
+    searchPlaceholder,
+    emptyText,
+    filterMode = "subtree",
+    children,
+    ...rest
+  } = props;
+  const config = useTigerConfig();
+  const locale = useMemo(() => mergeTigerLocale(config.locale), [config.locale]);
+  const dir = config.direction === "rtl" ? "rtl" : "ltr";
+  const sidebar = useSidebarContext();
+  const collapsed = resolveMenuCollapsed(mode, collapsedProp ?? sidebar?.collapsed ?? false);
+  const resolvedMode = resolveMenuMode(mode, collapsed);
+  const menuRef = useRef(null);
+  const searchExpandKeysRef = useRef([]);
+  const openKeysRef = useRef([]);
+  const [selectedKeys, setSelectedKeys] = useControlledState({
+    value: controlledSelectedKeys,
+    defaultValue: defaultSelectedKeys,
+    onChange: onSelectedKeysChange
+  });
+  const [openKeys, setOpenKeys] = useControlledState({
+    value: controlledOpenKeys,
+    defaultValue: defaultOpenKeys,
+    onChange: onOpenKeysChange
+  });
+  openKeysRef.current = openKeys;
+  const [searchValue, setSearchValue] = useControlledState({
+    value: controlledSearchValue,
+    defaultValue: defaultSearchValue,
+    onChange: onSearchChange
+  });
+  const handleSelect = useCallback(
+    (key) => {
+      const next = nextSelectedKeys(selectedKeys, key);
+      setSelectedKeys(next);
+      onSelect?.(key, { selectedKeys: next });
+    },
+    [selectedKeys, setSelectedKeys, onSelect]
+  );
+  const handleOpenChange = useCallback(
+    (key, open) => {
+      const next = nextOpenKeys({ current: openKeys, key, multiple, open });
+      setOpenKeys(next);
+      onOpenChange?.(key, { openKeys: next });
+    },
+    [openKeys, multiple, setOpenKeys, onOpenChange]
+  );
+  const handleSearchInput = useCallback(
+    (event) => {
+      setSearchValue(event.target.value);
+    },
+    [setSearchValue]
+  );
+  const { filtered: filteredItems, expandKeys } = useMemo(
+    () => resolveSearchFilter({ items, query: searchValue, filterMode }),
+    [items, searchValue, filterMode]
+  );
+  useEffect(() => {
+    const current = openKeysRef.current;
+    const reconciled = reconcileSearchOpenKeys({
+      openKeys: current,
+      previousSearchExpandKeys: searchExpandKeysRef.current,
+      nextSearchExpandKeys: expandKeys
+    });
+    searchExpandKeysRef.current = reconciled.searchExpandKeys;
+    const unchanged = reconciled.openKeys.length === current.length && reconciled.openKeys.every((key, index) => key === current[index]);
+    if (!unchanged) {
+      setOpenKeys(reconciled.openKeys);
+    }
+    warnControlledSearchOpenKeys({
+      controlled: controlledOpenKeys !== void 0,
+      openKeys: controlledOpenKeys ?? reconciled.openKeys,
+      searchExpandKeys: reconciled.searchExpandKeys
+    });
+  }, [expandKeys, searchValue, setOpenKeys, controlledOpenKeys]);
+  const handleSearchKeyDown = useCallback((event) => {
+    if (event.key !== "ArrowDown") return;
+    event.preventDefault();
+    const first = menuRef.current?.querySelector('[data-tiger-menuitem="true"]');
+    first?.focus();
+  }, []);
+  const menuClasses = useMemo(() => {
+    return classNames(getMenuClasses(resolvedMode, theme, collapsed), className);
+  }, [resolvedMode, theme, collapsed, className]);
+  const slotKeys = useMemo(() => collectReactMenuKeys(children), [children]);
+  const tabStopKey = useMemo(() => {
+    if (resolvedMode !== "horizontal") return void 0;
+    const rootKeys = items && items.length > 0 ? items.map((item) => item.key).filter((key) => key != null) : slotKeys;
+    const selected = rootKeys.find(
+      (key) => selectedKeys.some((item) => String(item) === String(key))
+    );
+    return selected ?? rootKeys[0];
+  }, [items, slotKeys, resolvedMode, selectedKeys]);
+  const contextValue = useMemo(
+    () => ({
+      mode: resolvedMode,
+      theme,
+      collapsed,
+      inlineIndent,
+      popupPortal,
+      selectedKeys,
+      openKeys,
+      dir,
+      handleSelect,
+      handleOpenChange,
+      tabStopKey
+    }),
+    [
+      resolvedMode,
+      theme,
+      collapsed,
+      inlineIndent,
+      popupPortal,
+      selectedKeys,
+      openKeys,
+      dir,
+      handleSelect,
+      handleOpenChange,
+      tabStopKey
+    ]
+  );
+  const hasSlotChildren = React2.Children.count(children) > 0;
+  const empty = Boolean(items && items.length > 0 && filteredItems.length === 0 && !hasSlotChildren);
+  const {
+    id,
+    role: _role,
+    ...navRest
+  } = rest;
+  return {
+    navProps: { id, ...navRest },
+    menuRef,
+    menuClasses,
+    style,
+    listRole: getMenuListRole(resolvedMode, { isRoot: true }),
+    resolvedMode,
+    mode,
+    contextValue,
+    searchable,
+    searchValue,
+    searchPlaceholder: searchPlaceholder ?? locale?.common?.searchPlaceholder ?? "Search",
+    emptyText: emptyText ?? locale?.common?.emptyText ?? "No data",
+    handleSearchInput,
+    handleSearchKeyDown,
+    filteredItems,
+    items,
+    children,
+    empty
+  };
+}
+
+// src/components/Menu/menu-item.tsx
+import { useCallback as useCallback2 } from "react";
+import {
+  classNames as classNames2,
+  focusMenuEdge,
+  getMenuItemClasses,
+  getMenuItemIndent,
+  getMenuNavigationKeys,
+  isKeySelected,
+  isMenuRoving,
+  moveFocusInMenu,
+  sameMenuKey,
+  shouldIndentMenuItem
+} from "@expcat/tigercat-core";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MenuItem = ({
+  itemKey,
+  disabled = false,
+  icon,
+  href,
+  className,
+  children,
+  level = 0,
+  collapsed: collapsedOverride,
+  ...rest
+}) => {
+  const menuContext = useMenuContext();
+  const submenuScope = useSubMenuScope();
+  if (!menuContext) {
+    warnMissingMenuContext("MenuItem");
+  }
+  const isSelected = !!menuContext && isKeySelected(itemKey, menuContext.selectedKeys);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const inPopup = Boolean(submenuScope?.popup);
+  const usesMenuRole = inPopup || menuContext?.mode === "horizontal";
+  const roving = Boolean(
+    menuContext && isMenuRoving(menuContext.mode, {
+      popup: inPopup,
+      isRoot: !submenuScope
+    })
+  );
+  const isTabStop = !disabled && (!roving || menuContext?.tabStopKey != null && sameMenuKey(itemKey, menuContext.tabStopKey) || inPopup && false);
+  const itemClasses = classNames2(
+    menuContext ? getMenuItemClasses(isSelected, disabled, menuContext.theme, effectiveCollapsed) : "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200",
+    className
+  );
+  const indentStyle = menuContext && shouldIndentMenuItem(menuContext.mode, level) ? getMenuItemIndent(level, menuContext.inlineIndent) : {};
+  const handleClick = useCallback2(() => {
+    if (!disabled && menuContext) {
+      menuContext.handleSelect(itemKey);
+    }
+  }, [disabled, menuContext, itemKey]);
+  const handleKeyDown = useCallback2(
+    (event) => {
+      if (!menuContext) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('[data-tiger-menu-root="true"]');
+      const isRoot = Boolean(rootMenu && current.closest("[data-tiger-menu-list]") === rootMenu);
+      const { nextKey, prevKey, closeKey } = getMenuNavigationKeys(
+        menuContext.mode,
+        isRoot,
+        menuContext.dir
+      );
+      if (event.key === nextKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusMenuEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusMenuEdge(current, "end");
+        return;
+      }
+      if ((event.key === "Escape" || event.key === closeKey) && submenuScope) {
+        event.preventDefault();
+        submenuScope.close();
+        submenuScope.titleRef.current?.focus();
+      }
+    },
+    [menuContext, submenuScope]
+  );
+  const label = getReactMenuPlainText(children);
+  const content = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    renderMenuIcon(icon, effectiveCollapsed),
+    effectiveCollapsed ? renderCollapsedLabel(label, icon) : /* @__PURE__ */ jsx2("span", { className: "flex-1", children })
+  ] });
+  const shared = {
+    className: itemClasses,
+    style: indentStyle,
+    "data-tiger-menuitem": "true",
+    "data-tiger-selected": isSelected ? "true" : "false",
+    "aria-disabled": disabled ? true : void 0,
+    tabIndex: disabled ? -1 : roving ? isTabStop ? 0 : -1 : 0,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest
+  };
+  const role = usesMenuRole ? "menuitem" : void 0;
+  const wrapperRole = usesMenuRole ? "none" : void 0;
+  if (href) {
+    return /* @__PURE__ */ jsx2("li", { role: wrapperRole, children: /* @__PURE__ */ jsx2(
+      "a",
+      {
+        ...shared,
+        href: disabled ? void 0 : href,
+        role,
+        "aria-current": isSelected ? "page" : void 0,
+        "aria-disabled": disabled ? true : void 0,
+        children: content
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx2("li", { role: wrapperRole, children: /* @__PURE__ */ jsx2("button", { ...shared, type: "button", role, disabled, children: content }) });
+};
+MenuItem.displayName = "MenuItem";
+
+// src/components/Menu/menu-item-group.tsx
+import { useId } from "react";
+import {
+  classNames as classNames3,
+  getMenuItemIndent as getMenuItemIndent2,
+  menuItemGroupTitleClasses,
+  shouldIndentMenuItem as shouldIndentMenuItem2
+} from "@expcat/tigercat-core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var MenuItemGroup = ({
+  title,
+  className,
+  children,
+  level = 0,
+  collapsed
+}) => {
+  const menuContext = useMenuContext();
+  const submenuScope = useSubMenuScope();
+  const titleId = useId();
+  const hidden = Boolean(collapsed ?? menuContext?.collapsed);
+  const usesMenuRole = Boolean(submenuScope?.popup) || menuContext?.mode === "horizontal";
+  const indentStyle = menuContext && shouldIndentMenuItem2(menuContext.mode, level) ? getMenuItemIndent2(level, menuContext.inlineIndent) : void 0;
+  return /* @__PURE__ */ jsxs3("li", { role: usesMenuRole ? "none" : void 0, children: [
+    title ? /* @__PURE__ */ jsx3(
+      "div",
+      {
+        id: titleId,
+        className: classNames3(menuItemGroupTitleClasses, hidden && "sr-only"),
+        style: indentStyle,
+        children: title
+      }
+    ) : null,
+    /* @__PURE__ */ jsx3(
+      "ul",
+      {
+        role: usesMenuRole ? "group" : void 0,
+        className,
+        "aria-labelledby": title ? titleId : void 0,
+        children: mapMenuChildren(children, { level, collapsed })
+      }
+    )
+  ] });
+};
+MenuItemGroup.displayName = "MenuItemGroup";
+
+// src/components/Menu/submenu.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState,
+  useId as useId2
+} from "react";
+import {
+  classNames as classNames4,
+  createSubmenuHeightTransitionController,
+  focusFirstChildItem,
+  focusMenuEdge as focusMenuEdge2,
+  getMenuItemIndent as getMenuItemIndent3,
+  getMenuListRole as getMenuListRole2,
+  getMenuNavigationKeys as getMenuNavigationKeys2,
+  getMenuPopupPlacement,
+  getSubMenuTitleClasses,
+  hasSelectedMenuDescendant,
+  isKeyOpen,
+  isMenuRoving as isMenuRoving2,
+  isSubmenuPopup,
+  MENU_POPUP_HOVER_CLOSE_MS,
+  moveFocusInMenu as moveFocusInMenu2,
+  sameMenuKey as sameMenuKey2,
+  shouldIndentMenuItem as shouldIndentMenuItem3,
+  submenuContentInlineClasses,
+  submenuContentPopupClasses,
+  submenuContentVerticalClasses,
+  submenuHeightTransitionClasses
+} from "@expcat/tigercat-core";
+
+// src/components/Menu/icons.tsx
+import { getSubMenuExpandIconClasses } from "@expcat/tigercat-core";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ExpandIcon = ({
+  expanded,
+  popup
+}) => /* @__PURE__ */ jsx4(
+  "svg",
+  {
+    className: getSubMenuExpandIconClasses(expanded, { popup }),
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx4("path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
+  }
+);
+
+// src/components/Menu/submenu.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SubMenu = ({
+  itemKey,
+  title = "",
+  icon,
+  disabled = false,
+  className,
+  level = 0,
+  children,
+  collapsed: collapsedOverride,
+  ...rest
+}) => {
+  const menuContext = useMenuContext();
+  const parentScope = useSubMenuScope();
+  if (!menuContext) {
+    warnMissingMenuContext("SubMenu");
+  }
+  const titleRef = useRef2(null);
+  const popupRef = useRef2(null);
+  const submenuContentRef = useRef2(null);
+  const heightTransitionRef = useRef2(null);
+  const popupCloseTimerRef = useRef2(null);
+  const titleId = useId2();
+  const listId = useId2();
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const isPopup = Boolean(menuContext && isSubmenuPopup(menuContext.mode, effectiveCollapsed));
+  const isOpen = Boolean(menuContext && isKeyOpen(itemKey, menuContext.openKeys));
+  const isExpanded = isOpen;
+  const popupPortal = Boolean(isPopup && menuContext?.popupPortal);
+  const overlay = useAnchoredOverlay({
+    referenceRef: titleRef,
+    floatingRef: popupRef,
+    enabled: isPopup && isExpanded,
+    placement: getMenuPopupPlacement(menuContext?.mode ?? "vertical", level),
+    offset: popupPortal ? 4 : 0,
+    portal: popupPortal,
+    dismissOnEscape: true,
+    dismissOnOutside: true,
+    onDismiss: () => {
+      menuContext?.handleOpenChange(itemKey, false);
+    }
+  });
+  const isInlineOrVertical = Boolean(menuContext && !isPopup);
+  const [hasRenderedInline, setHasRenderedInline] = useState(
+    () => isInlineOrVertical ? isExpanded : false
+  );
+  useEffect2(() => {
+    if (!isInlineOrVertical || !isExpanded || hasRenderedInline) return;
+    setHasRenderedInline(true);
+  }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
+  useEffect2(() => {
+    return () => {
+      heightTransitionRef.current?.dispose();
+      heightTransitionRef.current = null;
+      if (popupCloseTimerRef.current) clearTimeout(popupCloseTimerRef.current);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!isInlineOrVertical || !hasRenderedInline || !submenuContentRef.current) {
+      heightTransitionRef.current?.dispose();
+      heightTransitionRef.current = null;
+      return;
+    }
+    if (!heightTransitionRef.current) {
+      heightTransitionRef.current = createSubmenuHeightTransitionController(
+        submenuContentRef.current,
+        { expanded: isExpanded }
+      );
+      return;
+    }
+    heightTransitionRef.current.update(isExpanded);
+  }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const descendantKeys = useMemo2(() => collectReactMenuKeys(children), [children]);
+  const childSelected = Boolean(
+    menuContext && hasSelectedMenuDescendant(menuContext.selectedKeys, descendantKeys)
+  );
+  const titleClasses = useMemo2(() => {
+    if (!menuContext) return "";
+    return classNames4(
+      getSubMenuTitleClasses(menuContext.theme, disabled, {
+        collapsed: effectiveCollapsed,
+        childSelected
+      }),
+      className
+    );
+  }, [menuContext, disabled, className, effectiveCollapsed, childSelected]);
+  const contentClasses = useMemo2(() => {
+    if (!menuContext) return "";
+    if (isPopup) return submenuContentPopupClasses;
+    if (menuContext.mode === "inline") return submenuContentInlineClasses;
+    return submenuContentVerticalClasses;
+  }, [menuContext, isPopup]);
+  const clearCloseTimer = () => {
+    if (popupCloseTimerRef.current) {
+      clearTimeout(popupCloseTimerRef.current);
+      popupCloseTimerRef.current = null;
+    }
+  };
+  const handleTitleClick = useCallback3(
+    (event) => {
+      if (!menuContext || disabled) return;
+      if (isInlineOrVertical) setHasRenderedInline(true);
+      const pointerType = "pointerType" in event.nativeEvent ? event.nativeEvent.pointerType : "";
+      if (isPopup && isExpanded && pointerType === "mouse") return;
+      menuContext.handleOpenChange(itemKey);
+    },
+    [disabled, menuContext, itemKey, isInlineOrVertical, isPopup, isExpanded]
+  );
+  const handleMouseEnter = useCallback3(() => {
+    if (!menuContext || disabled || !isPopup) return;
+    clearCloseTimer();
+    menuContext.handleOpenChange(itemKey, true);
+  }, [menuContext, disabled, isPopup, itemKey]);
+  const handleMouseLeave = useCallback3(() => {
+    if (!menuContext || !isPopup) return;
+    clearCloseTimer();
+    popupCloseTimerRef.current = setTimeout(() => {
+      menuContext.handleOpenChange(itemKey, false);
+    }, MENU_POPUP_HOVER_CLOSE_MS);
+  }, [menuContext, isPopup, itemKey]);
+  const focusFirstChild = useCallback3(
+    (titleEl) => {
+      const run = () => focusFirstChildItem(titleEl, isPopup ? popupRef.current : null);
+      if (isPopup) {
+        requestAnimationFrame(run);
+        return;
+      }
+      requestAnimationFrame(run);
+    },
+    [isPopup]
+  );
+  const handleTitleKeyDown = useCallback3(
+    (event) => {
+      if (!menuContext || disabled) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('[data-tiger-menu-root="true"]');
+      const isRoot = Boolean(rootMenu && current.closest("[data-tiger-menu-list]") === rootMenu);
+      const { nextKey, prevKey, openKey, closeKey } = getMenuNavigationKeys2(
+        menuContext.mode,
+        isRoot,
+        menuContext.dir
+      );
+      if (event.key === nextKey) {
+        event.preventDefault();
+        moveFocusInMenu2(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocusInMenu2(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusMenuEdge2(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusMenuEdge2(current, "end");
+        return;
+      }
+      if (event.key === "Escape" || event.key === closeKey) {
+        if (isExpanded) {
+          event.preventDefault();
+          menuContext.handleOpenChange(itemKey, false);
+          return;
+        }
+        if (parentScope) {
+          event.preventDefault();
+          parentScope.close();
+          parentScope.titleRef.current?.focus();
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!isExpanded) {
+          setHasRenderedInline(true);
+          menuContext.handleOpenChange(itemKey, true);
+        }
+        focusFirstChild(current);
+        return;
+      }
+      if (event.key === openKey || isPopup && event.key === "ArrowDown") {
+        event.preventDefault();
+        if (!isExpanded) {
+          setHasRenderedInline(true);
+          menuContext.handleOpenChange(itemKey, true);
+        }
+        focusFirstChild(current);
+      }
+    },
+    [menuContext, disabled, isExpanded, isPopup, itemKey, parentScope, focusFirstChild]
+  );
+  const indentStyle = !menuContext || !shouldIndentMenuItem3(menuContext.mode, level) ? {} : getMenuItemIndent3(level, menuContext.inlineIndent);
+  const closeSelf = useCallback3(() => {
+    menuContext?.handleOpenChange(itemKey, false);
+  }, [menuContext, itemKey]);
+  const scopeValue = useMemo2(
+    () => ({
+      itemKey,
+      popup: isPopup,
+      titleRef,
+      close: closeSelf
+    }),
+    [itemKey, isPopup, closeSelf]
+  );
+  if (!menuContext) return null;
+  const inPopup = Boolean(parentScope?.popup);
+  const roving = isMenuRoving2(menuContext.mode, { popup: inPopup, isRoot: !parentScope });
+  const isTabStop = !disabled && roving && menuContext.tabStopKey != null && sameMenuKey2(itemKey, menuContext.tabStopKey);
+  const titleRole = inPopup || menuContext.mode === "horizontal" ? "menuitem" : void 0;
+  const listRole = getMenuListRole2(menuContext.mode, { popup: isPopup });
+  const label = title || getReactMenuPlainText(children);
+  const renderTitle = () => {
+    if (effectiveCollapsed) {
+      return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        renderMenuIcon(icon, true),
+        renderCollapsedLabel(label, icon)
+      ] });
+    }
+    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      renderMenuIcon(icon, false),
+      /* @__PURE__ */ jsx5("span", { className: "flex-1", children: title }),
+      /* @__PURE__ */ jsx5(ExpandIcon, { expanded: isExpanded, popup: isPopup })
+    ] });
+  };
+  const nestedContext = isPopup ? {
+    ...menuContext,
+    collapsed: false
+  } : menuContext;
+  const enhancedChildren = /* @__PURE__ */ jsx5(MenuContext.Provider, { value: nestedContext, children: /* @__PURE__ */ jsx5(SubMenuScopeContext.Provider, { value: scopeValue, children: mapMenuChildren(children, {
+    level: level + 1,
+    collapsed: isPopup ? false : void 0
+  }) }) });
+  const renderContent = () => {
+    if (isPopup) {
+      const popup = /* @__PURE__ */ jsx5(
+        "ul",
+        {
+          ref: popupRef,
+          id: listId,
+          className: classNames4(contentClasses, overlay.floatingClasses),
+          style: { ...overlay.floatingStyles, display: isExpanded ? "block" : "none" },
+          "data-positioned": overlay.positioned,
+          role: listRole,
+          "aria-labelledby": titleId,
+          "aria-hidden": isExpanded ? void 0 : "true",
+          "data-tiger-menu-list": "",
+          "data-tiger-submenu-popup": "",
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          children: enhancedChildren
+        }
+      );
+      return renderOverlayPortal(popup, overlay.target, !popupPortal);
+    }
+    if (!hasRenderedInline) return null;
+    const isHidden = !isExpanded;
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        ref: submenuContentRef,
+        className: submenuHeightTransitionClasses,
+        "aria-hidden": isHidden ? "true" : void 0,
+        "data-tiger-menu-hidden": isHidden ? "true" : void 0,
+        "data-tiger-submenu-motion": "height",
+        children: /* @__PURE__ */ jsx5(
+          "ul",
+          {
+            id: listId,
+            className: contentClasses,
+            role: listRole,
+            "aria-labelledby": titleId,
+            "data-tiger-menu-list": "",
+            children: enhancedChildren
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs4(
+    "li",
+    {
+      className: isPopup && !popupPortal ? "relative" : "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      role: inPopup || menuContext.mode === "horizontal" ? "none" : void 0,
+      "data-tiger-submenu": "",
+      "data-child-selected": childSelected ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            ...rest,
+            ref: titleRef,
+            id: titleId,
+            type: "button",
+            className: titleClasses,
+            style: indentStyle,
+            onClick: handleTitleClick,
+            onKeyDown: handleTitleKeyDown,
+            role: titleRole,
+            "data-tiger-menuitem": "true",
+            "data-tiger-submenu-title": "",
+            "aria-expanded": isExpanded ? "true" : "false",
+            "aria-haspopup": isPopup ? "menu" : void 0,
+            "aria-controls": listId,
+            "aria-disabled": disabled ? true : void 0,
+            "data-state": isExpanded ? "open" : "closed",
+            disabled,
+            tabIndex: disabled ? -1 : roving ? isTabStop ? 0 : -1 : 0,
+            children: renderTitle()
+          }
+        ),
+        renderContent()
+      ]
+    }
+  );
+};
+SubMenu.displayName = "SubMenu";
+
+// src/components/Menu.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function renderDataItem(item) {
+  const kind = getMenuItemKind(item);
+  if (kind === "divider") {
+    return /* @__PURE__ */ jsx6(
+      "li",
+      {
+        role: "separator",
+        className: "my-1 border-t border-[var(--tiger-border,#e5e7eb)]"
+      },
+      item.key ?? `divider-${item.label}`
+    );
+  }
+  if (kind === "group") {
+    return /* @__PURE__ */ jsx6(MenuItemGroup, { title: item.title ?? item.label, children: (item.children ?? []).map(renderDataItem) }, item.key ?? item.title);
+  }
+  if (kind === "submenu") {
+    return /* @__PURE__ */ jsx6(
+      SubMenu,
+      {
+        itemKey: item.key ?? item.label ?? "",
+        title: item.label ?? item.title,
+        icon: item.icon,
+        disabled: item.disabled,
+        children: (item.children ?? []).map(renderDataItem)
+      },
+      item.key
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    MenuItem,
+    {
+      itemKey: item.key ?? item.label ?? "",
+      icon: item.icon,
+      disabled: item.disabled,
+      href: item.href,
+      children: item.label
+    },
+    item.key
+  );
+}
+var Menu = (props) => {
+  const ctx = useMenuRootState(props);
+  const dataChildren = ctx.filteredItems.map(renderDataItem);
+  return /* @__PURE__ */ jsx6(MenuContext.Provider, { value: ctx.contextValue, children: /* @__PURE__ */ jsxs5(
+    "nav",
+    {
+      ...ctx.navProps,
+      className: ctx.menuClasses,
+      style: ctx.style,
+      "data-tiger-menu": "",
+      "data-tiger-menu-mode": ctx.resolvedMode,
+      "data-tiger-menu-requested-mode": ctx.mode,
+      children: [
+        ctx.searchable && /* @__PURE__ */ jsx6("div", { className: menuSearchFieldClasses, children: /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: "search",
+            value: ctx.searchValue,
+            placeholder: ctx.searchPlaceholder,
+            "aria-label": ctx.searchPlaceholder,
+            className: menuSearchInputClasses,
+            onChange: ctx.handleSearchInput,
+            onKeyDown: ctx.handleSearchKeyDown
+          }
+        ) }),
+        ctx.empty ? /* @__PURE__ */ jsx6("div", { className: menuSearchEmptyClasses, children: ctx.emptyText }) : null,
+        /* @__PURE__ */ jsxs5(
+          "ul",
+          {
+            ref: ctx.menuRef,
+            role: ctx.listRole,
+            "data-tiger-menu-root": "true",
+            "data-tiger-menu-list": "",
+            "data-tiger-menu-mode": ctx.resolvedMode,
+            children: [
+              dataChildren,
+              ctx.children
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export {
+  useMenuContext,
+  MenuItem,
+  MenuItemGroup,
+  SubMenu,
+  Menu
+};