@expcat/tigercat-react 1.3.3 → 1.4.0

package/dist/{chunk-RQXY2MGX.mjs → chunk-D7UR526A.mjs}

@@ -4,78 +4,55 @@ import {
 } from "./chunk-SEWNVIHH.mjs";
 
 // src/components/Menu.tsx
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useMemo,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef
-} from "react";
+import React5 from "react";
 import {
-  classNames,
-  getMenuClasses,
-  getMenuItemClasses,
-  getMenuItemIndent,
-  getSubMenuTitleClasses,
-  getSubMenuExpandIconClasses,
-  getSubmenuPopupZIndex,
-  getTransformOrigin,
-  filterMenuItems,
-  isKeySelected,
-  isKeyOpen,
-  menuItemIconClasses,
-  menuCollapsedIconClasses,
-  menuItemGroupTitleClasses,
   menuSearchFieldClasses,
-  menuSearchEmptyClasses,
   menuSearchInputClasses,
-  submenuContentHorizontalClasses,
-  submenuContentHorizontalNestedClasses,
-  submenuContentPopupClasses,
-  submenuContentVerticalClasses,
-  submenuContentInlineClasses,
-  submenuHeightTransitionClasses,
-  getInitialSubmenuHeightTransitionStyle,
-  createSubmenuHeightTransitionController,
-  moveFocusInMenu,
-  focusMenuEdge,
-  focusFirstChildItem,
-  replaceKeys,
-  toggleKey,
-  initRovingTabIndex
+  menuSearchEmptyClasses
 } from "@expcat/tigercat-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/Menu/context.ts
+import { createContext, useContext } from "react";
 var MenuContext = createContext(null);
 function useMenuContext() {
   return useContext(MenuContext);
 }
-var Menu = ({
-  items,
-  mode = "vertical",
-  theme = "light",
-  selectedKeys: controlledSelectedKeys,
-  defaultSelectedKeys = [],
-  openKeys: controlledOpenKeys,
-  defaultOpenKeys = [],
-  collapsed = false,
-  multiple = true,
-  inlineIndent = 24,
-  popupPortal = false,
-  className,
-  style,
-  onSelect,
-  onOpenChange,
-  onSearch,
-  searchable = false,
-  searchValue: controlledSearchValue,
-  defaultSearchValue = "",
-  searchPlaceholder = "Search menu",
-  emptyText = "No menu items found",
-  children
-}) => {
+
+// src/components/Menu/state.ts
+import { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import {
+  classNames,
+  getMenuClasses,
+  filterMenuItems,
+  replaceKeys,
+  toggleKey,
+  initRovingTabIndex
+} from "@expcat/tigercat-core";
+function useMenuRootState(props) {
+  const {
+    items,
+    mode = "vertical",
+    theme = "light",
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys = [],
+    openKeys: controlledOpenKeys,
+    defaultOpenKeys = [],
+    collapsed = false,
+    multiple = true,
+    inlineIndent = 24,
+    popupPortal = false,
+    className,
+    style,
+    onSelect,
+    onOpenChange,
+    onSearch,
+    searchable = false,
+    searchValue: controlledSearchValue,
+    defaultSearchValue = "",
+    searchPlaceholder = "Search menu",
+    emptyText = "No menu items found"
+  } = props;
+  const children = props.children;
   const menuRef = useRef(null);
   const resolvedMode = collapsed && mode === "inline" ? "vertical" : mode;
   const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys);
@@ -146,57 +123,41 @@ var Menu = ({
     () => filterMenuItems(items ?? [], searchValue),
     [items, searchValue]
   );
-  function renderDataItem(item) {
-    if (item.children && item.children.length > 0) {
-      return /* @__PURE__ */ jsx(
-        SubMenu,
-        {
-          itemKey: item.key,
-          title: item.label,
-          icon: item.icon,
-          disabled: item.disabled,
-          children: item.children.map(renderDataItem)
-        },
-        item.key
-      );
-    }
-    return /* @__PURE__ */ jsx(MenuItem, { itemKey: item.key, icon: item.icon, disabled: item.disabled, children: item.label }, item.key);
-  }
-  const dataChildren = filteredItems.map(renderDataItem);
-  const hasSlotChildren = React.Children.count(children) > 0;
-  const emptyChild = items && items.length > 0 && dataChildren.length === 0 && !hasSlotChildren ? /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx("div", { className: menuSearchEmptyClasses, children: emptyText }) }) : null;
   useEffect(() => {
     if (menuRef.current) initRovingTabIndex(menuRef.current);
   }, [resolvedMode, collapsed, selectedKeys, openKeys, filteredItems]);
-  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-    "ul",
-    {
-      ref: menuRef,
-      className: menuClasses,
-      style,
-      role: "menu",
-      "data-tiger-menu-root": "true",
-      "data-tiger-menu-mode": resolvedMode,
-      "data-tiger-menu-requested-mode": mode,
-      children: [
-        searchable && /* @__PURE__ */ jsx("li", { role: "none", className: menuSearchFieldClasses, children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "search",
-            value: searchValue,
-            placeholder: searchPlaceholder,
-            "aria-label": searchPlaceholder,
-            className: menuSearchInputClasses,
-            onChange: handleSearchInput
-          }
-        ) }),
-        dataChildren,
-        children,
-        emptyChild
-      ]
-    }
-  ) });
-};
+  return {
+    menuRef,
+    menuClasses,
+    style,
+    resolvedMode,
+    mode,
+    contextValue,
+    searchable,
+    searchValue,
+    searchPlaceholder,
+    emptyText,
+    handleSearchInput,
+    filteredItems,
+    items,
+    children
+  };
+}
+
+// src/components/Menu/menu-item.tsx
+import { useCallback as useCallback2 } from "react";
+import {
+  classNames as classNames2,
+  getMenuItemClasses,
+  getMenuItemIndent,
+  isKeySelected,
+  menuItemIconClasses,
+  menuCollapsedIconClasses,
+  moveFocusInMenu,
+  focusMenuEdge,
+  getMenuNavigationKeys
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MenuItem = ({
   itemKey,
   disabled = false,
@@ -212,25 +173,23 @@ var MenuItem = ({
   }
   const isSelected = !!menuContext && isKeySelected(itemKey, menuContext.selectedKeys);
   const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
-  const itemClasses = classNames(
+  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 && menuContext.mode === "inline" && level > 0 ? getMenuItemIndent(level, menuContext.inlineIndent) : {};
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback2(() => {
     if (!disabled && menuContext) {
       menuContext.handleSelect(itemKey);
     }
   }, [disabled, menuContext, itemKey]);
-  const handleKeyDown = useCallback(
+  const handleKeyDown = useCallback2(
     (event) => {
       if (!menuContext) return;
       const current = event.currentTarget;
       const rootMenu = current.closest('ul[role="menu"]');
       const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
-      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
-      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
-      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      const { nextKey, prevKey } = getMenuNavigationKeys(menuContext.mode, isRoot);
       if (event.key === nextKey) {
         event.preventDefault();
         moveFocusInMenu(current, 1);
@@ -299,6 +258,51 @@ var MenuItem = ({
     }
   ) });
 };
+
+// src/components/Menu/submenu.tsx
+import React4, { useState as useState2, useMemo as useMemo2, useCallback as useCallback3, useEffect as useEffect2, useLayoutEffect, useRef as useRef2 } from "react";
+import {
+  classNames as classNames3,
+  getSubMenuTitleClasses,
+  getSubmenuPopupZIndex,
+  getTransformOrigin,
+  getMenuItemIndent as getMenuItemIndent2,
+  isKeyOpen,
+  menuItemIconClasses as menuItemIconClasses2,
+  menuCollapsedIconClasses as menuCollapsedIconClasses2,
+  submenuContentHorizontalClasses,
+  submenuContentHorizontalNestedClasses,
+  submenuContentPopupClasses,
+  submenuContentVerticalClasses,
+  submenuContentInlineClasses,
+  submenuHeightTransitionClasses,
+  getInitialSubmenuHeightTransitionStyle,
+  createSubmenuHeightTransitionController,
+  moveFocusInMenu as moveFocusInMenu2,
+  focusMenuEdge as focusMenuEdge2,
+  focusFirstChildItem,
+  getMenuNavigationKeys as getMenuNavigationKeys2
+} from "@expcat/tigercat-core";
+
+// src/components/Menu/icons.tsx
+import { getSubMenuExpandIconClasses } from "@expcat/tigercat-core";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsx2(
+  "svg",
+  {
+    className: getSubMenuExpandIconClasses(expanded),
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx2("path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
+  }
+);
+
+// src/components/Menu/menu-item-group.tsx
+import React3 from "react";
+import { menuItemGroupTitleClasses } from "@expcat/tigercat-core";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function isComponentNamed(elementType, name) {
   if (typeof elementType !== "function" && typeof elementType !== "object") return false;
   const maybeFn = elementType;
@@ -311,10 +315,10 @@ var MenuItemGroup = ({
   level = 0,
   collapsed
 }) => {
-  const enhancedChildren = React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) return child;
+  const enhancedChildren = React3.Children.map(children, (child) => {
+    if (!React3.isValidElement(child)) return child;
     if (child.type === MenuItem || isComponentNamed(child.type, "SubMenu")) {
-      return React.cloneElement(
+      return React3.cloneElement(
         child,
         {
           level,
@@ -324,22 +328,14 @@ var MenuItemGroup = ({
     }
     return child;
   });
-  return /* @__PURE__ */ jsxs("li", { className: "list-none", children: [
-    title && /* @__PURE__ */ jsx("div", { className: menuItemGroupTitleClasses, children: title }),
-    /* @__PURE__ */ jsx("ul", { role: "group", className, children: enhancedChildren })
+  return /* @__PURE__ */ jsxs2("li", { className: "list-none", children: [
+    title && /* @__PURE__ */ jsx3("div", { className: menuItemGroupTitleClasses, children: title }),
+    /* @__PURE__ */ jsx3("ul", { role: "group", className, children: enhancedChildren })
   ] });
 };
-var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: getSubMenuExpandIconClasses(expanded),
-    width: "12",
-    height: "12",
-    viewBox: "0 0 12 12",
-    fill: "currentColor",
-    children: /* @__PURE__ */ jsx("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 Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var SubMenu = ({
   itemKey,
   title = "",
@@ -354,13 +350,13 @@ var SubMenu = ({
   if (!menuContext) {
     console.warn("SubMenu must be used within Menu component");
   }
-  const [isHovered, setIsHovered] = useState(false);
-  const [isOpenByKeyboard, setIsOpenByKeyboard] = useState(false);
-  const popupCloseTimerRef = useRef(null);
-  const titleRef = useRef(null);
-  const popupRef = useRef(null);
-  const submenuContentRef = useRef(null);
-  const heightTransitionRef = useRef(null);
+  const [isHovered, setIsHovered] = useState2(false);
+  const [isOpenByKeyboard, setIsOpenByKeyboard] = useState2(false);
+  const popupCloseTimerRef = useRef2(null);
+  const titleRef = useRef2(null);
+  const popupRef = useRef2(null);
+  const submenuContentRef = useRef2(null);
+  const heightTransitionRef = useRef2(null);
   const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
   const isPopup = !!menuContext && (menuContext.mode === "horizontal" || menuContext.mode === "vertical" && effectiveCollapsed);
   const isOpen = !!menuContext && isKeyOpen(itemKey, menuContext.openKeys);
@@ -379,18 +375,18 @@ var SubMenu = ({
     offset: 4
   });
   const isInlineOrVertical = menuContext?.mode !== "horizontal" && !isPopup;
-  const [hasRenderedInline, setHasRenderedInline] = useState(
+  const [hasRenderedInline, setHasRenderedInline] = useState2(
     () => isInlineOrVertical ? isExpanded : false
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (!isInlineOrVertical || !isExpanded || hasRenderedInline) return;
     setHasRenderedInline(true);
   }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
-  const disposeHeightTransition = useCallback(() => {
+  const disposeHeightTransition = useCallback3(() => {
     heightTransitionRef.current?.dispose();
     heightTransitionRef.current = null;
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       disposeHeightTransition();
       if (popupCloseTimerRef.current) {
@@ -412,11 +408,11 @@ var SubMenu = ({
     }
     heightTransitionRef.current.update(isExpanded);
   }, [disposeHeightTransition, hasRenderedInline, isExpanded, isInlineOrVertical]);
-  const titleClasses = useMemo(() => {
+  const titleClasses = useMemo2(() => {
     if (!menuContext) return "";
-    return classNames(getSubMenuTitleClasses(menuContext.theme, disabled), className);
+    return classNames3(getSubMenuTitleClasses(menuContext.theme, disabled), className);
   }, [menuContext, disabled, className]);
-  const contentClasses = useMemo(() => {
+  const contentClasses = useMemo2(() => {
     if (!menuContext) return "";
     if (menuContext.mode === "horizontal") {
       return level === 0 ? submenuContentHorizontalClasses : submenuContentHorizontalNestedClasses;
@@ -425,7 +421,7 @@ var SubMenu = ({
     if (menuContext.mode === "inline") return submenuContentInlineClasses;
     return submenuContentVerticalClasses;
   }, [menuContext, isPopup, level]);
-  const handleTitleClick = useCallback(() => {
+  const handleTitleClick = useCallback3(() => {
     if (!menuContext || disabled) return;
     if (menuContext.mode === "horizontal") return;
     if (isPopup) {
@@ -436,14 +432,14 @@ var SubMenu = ({
     setHasRenderedInline(true);
     menuContext.handleOpenChange(itemKey);
   }, [disabled, menuContext, itemKey, isPopup]);
-  const handleMouseEnter = useCallback(() => {
+  const handleMouseEnter = useCallback3(() => {
     if (popupCloseTimerRef.current) {
       clearTimeout(popupCloseTimerRef.current);
       popupCloseTimerRef.current = null;
     }
     if (menuContext?.mode === "horizontal" || isPopup) setIsHovered(true);
   }, [menuContext, isPopup]);
-  const handleMouseLeave = useCallback(() => {
+  const handleMouseLeave = useCallback3(() => {
     if (menuContext?.mode === "horizontal" || isPopup) {
       const close = () => {
         setIsHovered(false);
@@ -456,7 +452,7 @@ var SubMenu = ({
       close();
     }
   }, [menuContext, isPopup, popupPortal]);
-  const openInline = useCallback(
+  const openInline = useCallback3(
     (titleEl) => {
       if (!menuContext) return;
       setHasRenderedInline(true);
@@ -465,33 +461,31 @@ var SubMenu = ({
     },
     [menuContext, itemKey]
   );
-  const handleTitleKeyDown = useCallback(
+  const handleTitleKeyDown = useCallback3(
     (event) => {
       if (!menuContext || disabled) return;
       const current = event.currentTarget;
       const rootMenu = current.closest('ul[role="menu"]');
       const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
-      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
-      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
-      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      const { nextKey, prevKey } = getMenuNavigationKeys2(menuContext.mode, isRoot);
       if (event.key === nextKey) {
         event.preventDefault();
-        moveFocusInMenu(current, 1);
+        moveFocusInMenu2(current, 1);
         return;
       }
       if (event.key === prevKey) {
         event.preventDefault();
-        moveFocusInMenu(current, -1);
+        moveFocusInMenu2(current, -1);
         return;
       }
       if (event.key === "Home") {
         event.preventDefault();
-        focusMenuEdge(current, "start");
+        focusMenuEdge2(current, "start");
         return;
       }
       if (event.key === "End") {
         event.preventDefault();
-        focusMenuEdge(current, "end");
+        focusMenuEdge2(current, "end");
         return;
       }
       if (event.key === "Escape" || event.key === "ArrowLeft") {
@@ -530,41 +524,41 @@ var SubMenu = ({
     },
     [menuContext, disabled, isOpen, isPopup, itemKey, openInline]
   );
-  const indentStyle = !menuContext || menuContext.mode === "horizontal" || level === 0 ? {} : getMenuItemIndent(level, menuContext.inlineIndent);
+  const indentStyle = !menuContext || menuContext.mode === "horizontal" || level === 0 ? {} : getMenuItemIndent2(level, menuContext.inlineIndent);
   if (!menuContext) return null;
   const renderIcon = () => {
     if (!icon) return null;
-    const iconClasses = effectiveCollapsed ? menuCollapsedIconClasses : menuItemIconClasses;
+    const iconClasses = effectiveCollapsed ? menuCollapsedIconClasses2 : menuItemIconClasses2;
     if (typeof icon === "string") {
-      return /* @__PURE__ */ jsx("span", { className: iconClasses, dangerouslySetInnerHTML: { __html: icon } });
+      return /* @__PURE__ */ jsx4("span", { className: iconClasses, dangerouslySetInnerHTML: { __html: icon } });
     }
-    return /* @__PURE__ */ jsx("span", { className: iconClasses, children: icon });
+    return /* @__PURE__ */ jsx4("span", { className: iconClasses, children: icon });
   };
   const renderTitle = () => {
     if (!effectiveCollapsed) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
+      return /* @__PURE__ */ jsxs3(Fragment2, { children: [
         renderIcon(),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children: title }),
-        menuContext.mode !== "horizontal" && !isPopup && /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded })
+        /* @__PURE__ */ jsx4("span", { className: "flex-1", children: title }),
+        menuContext.mode !== "horizontal" && !isPopup && /* @__PURE__ */ jsx4(ExpandIcon, { expanded: isExpanded })
       ] });
     } else if (!icon) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", "aria-hidden": "true", children: title.charAt(0).toUpperCase() }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: title })
+      return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx4("span", { className: "flex-1 text-center", "aria-hidden": "true", children: title.charAt(0).toUpperCase() }),
+        /* @__PURE__ */ jsx4("span", { className: "sr-only", children: title })
       ] });
     } else {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
+      return /* @__PURE__ */ jsxs3(Fragment2, { children: [
         renderIcon(),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: title })
+        /* @__PURE__ */ jsx4("span", { className: "sr-only", children: title })
       ] });
     }
   };
   const renderContent = () => {
     const nextLevel = level + 1;
-    const enhancedChildren = React.Children.map(children, (child) => {
-      if (!React.isValidElement(child)) return child;
+    const enhancedChildren = React4.Children.map(children, (child) => {
+      if (!React4.isValidElement(child)) return child;
       if (child.type === MenuItem || child.type === SubMenu || child.type === MenuItemGroup) {
-        return React.cloneElement(
+        return React4.cloneElement(
           child,
           {
             level: nextLevel,
@@ -584,7 +578,7 @@ var SubMenu = ({
         transformOrigin: getTransformOrigin(currentPopupPlacement),
         ...popupZIndex
       } : { display: isExpanded ? "block" : "none", ...popupZIndex };
-      const popup = /* @__PURE__ */ jsx(
+      const popup = /* @__PURE__ */ jsx4(
         "ul",
         {
           ref: popupPortal ? popupRef : void 0,
@@ -601,7 +595,7 @@ var SubMenu = ({
       if (popupPortal) {
         return renderBodyPortal(popup);
       }
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx4(
         "ul",
         {
           className: contentClasses,
@@ -615,7 +609,7 @@ var SubMenu = ({
     }
     if (!hasRenderedInline) return null;
     const isHidden = !isExpanded;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx4(
       "div",
       {
         ref: submenuContentRef,
@@ -624,11 +618,11 @@ var SubMenu = ({
         "aria-hidden": isHidden ? "true" : void 0,
         "data-tiger-menu-hidden": isHidden ? "true" : void 0,
         "data-tiger-submenu-motion": "height",
-        children: /* @__PURE__ */ jsx("ul", { className: contentClasses, role: "menu", children: enhancedChildren })
+        children: /* @__PURE__ */ jsx4("ul", { className: contentClasses, role: "menu", children: enhancedChildren })
       }
     );
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "li",
     {
       className: isPopup && !popupPortal ? "relative" : "",
@@ -636,7 +630,7 @@ var SubMenu = ({
       onMouseLeave: handleMouseLeave,
       role: "none",
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             ref: titleRef,
@@ -662,10 +656,63 @@ var SubMenu = ({
   );
 };
 
+// src/components/Menu.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Menu = (props) => {
+  const ctx = useMenuRootState(props);
+  function renderDataItem(item) {
+    if (item.children && item.children.length > 0) {
+      return /* @__PURE__ */ jsx5(
+        SubMenu,
+        {
+          itemKey: item.key,
+          title: item.label,
+          icon: item.icon,
+          disabled: item.disabled,
+          children: item.children.map(renderDataItem)
+        },
+        item.key
+      );
+    }
+    return /* @__PURE__ */ jsx5(MenuItem, { itemKey: item.key, icon: item.icon, disabled: item.disabled, children: item.label }, item.key);
+  }
+  const dataChildren = ctx.filteredItems.map(renderDataItem);
+  const hasSlotChildren = React5.Children.count(ctx.children) > 0;
+  const emptyChild = ctx.items && ctx.items.length > 0 && dataChildren.length === 0 && !hasSlotChildren ? /* @__PURE__ */ jsx5("li", { role: "none", children: /* @__PURE__ */ jsx5("div", { className: menuSearchEmptyClasses, children: ctx.emptyText }) }) : null;
+  return /* @__PURE__ */ jsx5(MenuContext.Provider, { value: ctx.contextValue, children: /* @__PURE__ */ jsxs4(
+    "ul",
+    {
+      ref: ctx.menuRef,
+      className: ctx.menuClasses,
+      style: ctx.style,
+      role: "menu",
+      "data-tiger-menu-root": "true",
+      "data-tiger-menu-mode": ctx.resolvedMode,
+      "data-tiger-menu-requested-mode": ctx.mode,
+      children: [
+        ctx.searchable && /* @__PURE__ */ jsx5("li", { role: "none", className: menuSearchFieldClasses, children: /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "search",
+            value: ctx.searchValue,
+            placeholder: ctx.searchPlaceholder,
+            "aria-label": ctx.searchPlaceholder,
+            className: menuSearchInputClasses,
+            onChange: ctx.handleSearchInput
+          }
+        ) }),
+        dataChildren,
+        ctx.children,
+        emptyChild
+      ]
+    }
+  ) });
+};
+
 export {
   useMenuContext,
-  Menu,
   MenuItem,
   MenuItemGroup,
-  SubMenu
+  SubMenu,
+  Menu
 };