@optiaxiom/react 1.4.5 → 1.5.1

package/dist/esm/packages/react/src/input/InputControl-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-DTGYmare.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/input/InputControl.css.ts.vanilla-u-VlisWS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_6w5554',{bg:'transparent',flex:'auto',w:'full'},'_1grzmfo','qfp0m4'],variants:{size:{md:{},lg:{},xl:['e8rog5']}}});
+var control = recipeRuntime({base:['_7ucdz4',{bg:'transparent',flex:'auto',w:'full'},'_1fdalq6','_9z58tp'],variants:{size:{md:{},lg:{},xl:['uneeby']}}});
 
 export { control };

package/dist/esm/packages/react/src/input/InputControl.js

@@ -12,7 +12,16 @@ import { control } from './InputControl-css.js';
 
 const Slot = createSlot("@optiaxiom/react/InputControl");
 const InputControl = forwardRef(
-  ({ asChild, children, className, error: errorProp, size = "md", ...props }, outerRef) => {
+  ({
+    asChild,
+    children,
+    className,
+    error: errorProp,
+    onChange,
+    onValueChange,
+    size = "md",
+    ...props
+  }, outerRef) => {
     const Comp = asChild ? Slot : "input";
     const disabled = props.disabled;
     const readOnly = props.readOnly;
@@ -34,7 +43,23 @@ const InputControl = forwardRef(
         "data-readonly": readOnly ? "" : void 0,
         ...control({ size }, className),
         ...boxProps,
-        children: /* @__PURE__ */ jsx(Comp, { id: inputId, ref, ...restProps, children })
+        children: /* @__PURE__ */ jsx(
+          Comp,
+          {
+            id: inputId,
+            onChange: (event) => {
+              onChange?.(
+                event
+              );
+              if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+                onValueChange?.(event.target.value);
+              }
+            },
+            ref,
+            ...restProps,
+            children
+          }
+        )
       }
     );
   }

package/dist/esm/packages/react/src/input/InputRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cx5atBZp.css';
-import './../../../../assets/src/input/InputControl.css.ts.vanilla-DTGYmare.css';
-import './../../../../assets/src/input/InputRoot.css.ts.vanilla-CUEDvAsn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-1mT-GBsC.css';
+import './../../../../assets/src/input/InputControl.css.ts.vanilla-u-VlisWS.css';
+import './../../../../assets/src/input/InputRoot.css.ts.vanilla-Dt3RTsY7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1m8e690']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1bus3je']});
 
 export { root };

package/dist/esm/packages/react/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DnM-SqYs.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-X86I4gvB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var kbd = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',flexDirection:'row',fontFamily:'sans',gap:'2',whiteSpace:'nowrap'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',px:'6',rounded:'sm'},'_16iqid3'],subtle:{}}}});
-var keys = recipeRuntime({base:'aywuc0'});
+var kbd = recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',flexDirection:'row',fontFamily:'sans',gap:'2',whiteSpace:'nowrap'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',px:'6',rounded:'sm'},'izwo7d'],subtle:{}}}});
+var keys = recipeRuntime({base:'_1f624bu'});
 
 export { kbd, keys };

package/dist/esm/packages/react/src/label-menu-button/LabelMenuButton-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-Cx5atBZp.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-Dx1pjGJE.css';
-import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-CXGSSOar.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-1mT-GBsC.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-c0Df-0jA.css';
+import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-RT8TQ3_G.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'vefguh']});
+var button = recipeRuntime({base:[{justifyContent:'space-between'},'_1tovhm0']});
 var content = recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 

package/dist/esm/packages/react/src/layers/layers-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._12h7ywj';
-var reset = 'optiaxiom._1jqkdoc';
+var components = 'optiaxiom._1hnxwzp';
+var reset = 'optiaxiom._1s6q7tx';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

package/dist/esm/packages/react/src/layout/Layouts-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/layout/Layouts.css.ts.vanilla-GMnxoQ4-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/layout/Layouts.css.ts.vanilla-D1-Ij5nY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1nqcmt']});
+var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'mqx0ec']});
 
 export { layout };

package/dist/esm/packages/react/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-BJCeHHTC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-FPM0Un1u.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'p6ip7x']});
-var link = recipeRuntime({base:['_60vqyk','_1b185x6'],variants:{appearance:{'default':'_1w1nirf',inverse:'_1th8env',subtle:'_1vexzmb'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1gmstzu']});
+var link = recipeRuntime({base:['sr6hvo'],variants:{appearance:{'default':'e681zl',inverse:'_7dnb8t',subtle:'_145v0o'}}});
 
 export { icon, link };

package/dist/esm/packages/react/src/link/Link.js

@@ -18,19 +18,18 @@ const Link = forwardRef(
     asChild,
     children,
     className,
+    cover,
     disabled,
     external,
-    overlay,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "a";
     const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...link({ appearance }, className), ...boxProps, children: /* @__PURE__ */ jsx(Cover, { asChild: true, disabled: !overlay, inset: overlay === "inset", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...link({ appearance }, className), ...boxProps, children: /* @__PURE__ */ jsx(Cover, { asChild: true, disabled: !cover, inset: cover === "inset", children: /* @__PURE__ */ jsx(
       Comp,
       {
         "aria-disabled": disabled,
         "data-disabled": disabled ? "" : void 0,
-        "data-overlay": overlay ? "" : void 0,
         ref,
         ...external && { rel: "noopener noreferrer", target: "_blank" },
         ...restProps,

package/dist/esm/packages/react/src/listbox/ListboxCheckboxItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DN9kKQT8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DeoFu4V5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:[{display:'inline-flex'},'jmv7pw']});
+var checkbox = recipeRuntime({base:[{display:'inline-flex'},'_7nu7ej']});
 
 export { checkbox };

package/dist/esm/packages/react/src/listbox/ListboxItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-BU8QYqxz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-t0w4VnI3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'_1teohjo']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_16eydx3'],variants:{intent:{danger:'i39ghn',neutral:'_1fcquph'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'xb1bcj']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_10zhs37']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1rls0z8'],variants:{intent:{danger:'vgnfhz',neutral:'t5ual'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'s877xf']});
 
 export { description, item, title };

package/dist/esm/packages/react/src/listbox/ListboxItemIndicator-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CYu7IUFz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-BvbsDONo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['hdvefq'],variants:{active:{false:{},true:'r7300f'}}});
+var indicator = recipeRuntime({base:['_156togj'],variants:{active:{false:{},true:'_1f2f6e0'}}});
 
 export { indicator };

package/dist/esm/packages/react/src/menu/Menu.js

@@ -24,8 +24,8 @@ import { MenuSubProvider } from './MenuSubContext.js';
 function Menu({
   children,
   defaultOpen = false,
-  initialInputVisible,
   inputValue: inputValueProp,
+  inputVisible: inputVisibleProp,
   onInputValueChange,
   onOpenChange,
   open: openProp,
@@ -65,11 +65,15 @@ function Menu({
       }
     } else {
       if (open) {
-        setActiveItemStack([]);
+        setActiveItemStack(
+          (activeItemStack2) => activeItemStack2.length ? [] : activeItemStack2
+        );
       }
     }
   }, [open, size]);
+  const contentRef = useRef(null);
   const inputRef = useRef(null);
+  const triggerRef = useRef(null);
   const options = useMemo(
     () => size === "sm" ? optionsProp.map((option) => ({
       ...option,
@@ -77,7 +81,18 @@ function Menu({
         "\u2026",
         ""
       ) : resolveItemProperty(option.label, { inputValue })
-    })) : activeItemStack.length ? activeItemStack[activeItemStack.length - 1] : optionsProp,
+    })) : activeItemStack.length ? activeItemStack.reduce((result, stackItem) => {
+      const stackKey = stackItem.key ?? resolveItemProperty(stackItem.label, { inputValue });
+      for (const resultItem of result) {
+        const resultKey = resultItem.key ?? resolveItemProperty(resultItem.label, { inputValue });
+        if (resultKey === stackKey) {
+          return resolveItemProperty(resultItem.subOptions, {
+            inputValue
+          }) ?? [];
+        }
+      }
+      throw new Error(`Could not find item: ${stackKey}`);
+    }, optionsProp) : optionsProp,
     [activeItemStack, inputValue, optionsProp, size]
   );
   const hasSelectableItem = useMemo(
@@ -85,7 +100,7 @@ function Menu({
     [options]
   );
   const inputDefaultVisibleRef = useRef(hasSelectableItem);
-  inputDefaultVisibleRef.current = initialInputVisible !== void 0 ? initialInputVisible : hasSelectableItem || false;
+  inputDefaultVisibleRef.current = inputVisibleProp === "always" ? true : hasSelectableItem || false;
   const [inputVisible, setInputVisible] = useState(
     inputDefaultVisibleRef.current
   );
@@ -117,25 +132,28 @@ function Menu({
         }
       },
       open,
-      placeholder,
+      placeholder: activeItemStack.length ? resolveItemProperty(
+        activeItemStack[activeItemStack.length - 1].label,
+        { inputValue }
+      ) : placeholder,
       setActiveItemStack,
       setOpen,
       size,
       children: /* @__PURE__ */ jsx(
         Command,
         {
+          enabled: open ? activeItemStack.length + 1 : false,
           inputValue,
           onHover: (item) => {
-            setSubMenuOpen(!!item.subOptions?.length);
+            setSubMenuOpen(
+              typeof item.subOptions === "function" || !!item.subOptions?.length
+            );
           },
           onInputValueChange: setInputValue,
           onSelect: (item, { dismiss }) => {
-            if (item.subOptions?.length) {
+            if (typeof item.subOptions === "function" || item.subOptions?.length) {
               if (size === "lg") {
-                setActiveItemStack((stack) => [
-                  ...stack ?? [],
-                  item.subOptions ?? []
-                ]);
+                setActiveItemStack((stack) => [...stack ?? [], item]);
               } else {
                 setSubMenuOpen(true);
               }
@@ -146,15 +164,16 @@ function Menu({
               }
             }
           },
-          open: open ? activeItemStack.length + 1 : false,
           options,
           ...props,
           children: /* @__PURE__ */ jsx(
             MenuSubProvider,
             {
+              contentRef,
               inputRef,
               open: subMenuOpen,
               setOpen: setSubMenuOpen,
+              triggerRef,
               children
             }
           )

package/dist/esm/packages/react/src/menu/MenuContent.js

@@ -17,9 +17,7 @@ const MenuContent = forwardRef(
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const { labelId } = useFieldContext("@optiaxiom/react/MenuContent");
-    const { activeItemStack, inputVisible, placeholder, size } = useMenuContext(
-      "@optiaxiom/react/MenuContent"
-    );
+    const { activeItemStack, inputRef, inputVisible, placeholder, size } = useMenuContext("@optiaxiom/react/MenuContent");
     const { empty, loading } = useCommandContext(
       "@optiaxiom/react/MenuContent"
     );
@@ -39,10 +37,11 @@ const MenuContent = forwardRef(
           if (event.defaultPrevented) {
             return;
           }
-          if (event.target instanceof HTMLElement && event.target.closest('[role="option"]')) {
+          if (event.target instanceof Element && event.target.closest('[role="option"]')) {
             return;
           }
           event.preventDefault();
+          inputRef.current?.focus();
         },
         overflow: "hidden",
         p: size === "sm" ? "4" : "0",

package/dist/esm/packages/react/src/menu/MenuDialogContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-CO3bqvq6.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:'alashu'});
+
+export { content };

package/dist/esm/packages/react/src/menu/MenuDialogContent.js

@@ -10,17 +10,19 @@ import '../dialog/DialogForm.js';
 import { DialogHeader } from '../dialog/DialogHeader.js';
 import '../dialog/DialogTrigger.js';
 import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
+import { content } from './MenuDialogContent-css.js';
 
 const MenuDialogContent = forwardRef(
   ({
     align: _align,
     "aria-label": ariaLabel,
     children,
+    className,
     side: _side,
     sideOffset: _sideOffset,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs(DialogContent, { ref, transitionType: "pop", ...props, children: [
+    return /* @__PURE__ */ jsxs(DialogContent, { ref, ...content({}, className), ...props, children: [
       children,
       /* @__PURE__ */ jsx(VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsx(DialogHeader, { children: ariaLabel }) })
     ] });

package/dist/esm/packages/react/src/menu/MenuInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css';
-import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-B9ESb0EX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-CkB0e7dC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1fvwxh9']}}});
+var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1ytk0dp']}}});
 
 export { input };

package/dist/esm/packages/react/src/menu/MenuInput.js

@@ -10,6 +10,11 @@ import { CommandInput } from '../command/CommandInput.js';
 import '../command/CommandItem.js';
 import '../command/CommandListbox.js';
 import { useCommandContext } from '../command/CommandContext.js';
+import '../focus-bookmark/FocusBookmarkRestore.js';
+import { useFocusBookmark } from '../focus-bookmark/useFocusBookmark.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
 import { useMenuContext } from './MenuContext.js';
 import { input } from './MenuInput-css.js';
 
@@ -22,6 +27,7 @@ const MenuInput = forwardRef(
       "@optiaxiom/react/MenuInput"
     );
     const ref = useComposedRefs(inputRef, outerRef);
+    useFocusBookmark(inputRef);
     const [minWidth, setMinWidth] = useState(160);
     const containerRef = useRef(null);
     useEffect(() => {
@@ -52,7 +58,7 @@ const MenuInput = forwardRef(
             setActiveItemStack(
               (stack) => stack.length ? stack.slice(0, -1) : stack
             );
-          } else if (event.key === "ArrowRight" && highlightedItem?.subOptions?.length && size === "sm") {
+          } else if (event.key === "ArrowRight" && (typeof highlightedItem?.subOptions === "function" || highlightedItem?.subOptions?.length) && size === "sm") {
             event.preventDefault();
             downshift.selectItem(highlightedItem);
           }

package/dist/esm/packages/react/src/menu/MenuListbox.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import '../command/Command.js';
 import '../command/CommandInput.js';
 import '../command/CommandItem.js';
 import { CommandListbox } from '../command/CommandListbox.js';
-import { resolveItemProperty } from '../command/CommandContext.js';
+import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
 import '../listbox/Listbox.js';
 import '../listbox/ListboxCheckboxItem.js';
 import '../listbox/ListboxEmpty.js';
@@ -19,6 +19,10 @@ import '../listbox/ListboxRadioItem.js';
 import { ListboxSeparator } from '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
 import { shouldShowSeparator, shouldShowGroup } from '../listbox/utils.js';
+import { Popover } from '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import '../tooltip/TooltipContent.js';
 import '../tooltip/TooltipProvider.js';
@@ -28,20 +32,27 @@ import { MenuCheckboxItem } from './MenuCheckboxItem.js';
 import { useMenuContext } from './MenuContext.js';
 import { MenuItem } from './MenuItem.js';
 import { MenuRadioItem } from './MenuRadioItem.js';
-import { MenuSub } from './MenuSub.js';
+import { MenuSubContent } from './MenuSubContent.js';
+import { useMenuSubContext } from './MenuSubContext.js';
+import { MenuSubTrigger } from './MenuSubTrigger.js';
 
 const MenuListbox = forwardRef(
   ({ children, ...props }, ref) => {
+    const { inputValue } = useCommandContext("@optiaxiom/react/MenuListbox");
     const { size } = useMenuContext("@optiaxiom/react/MenuListbox");
-    return /* @__PURE__ */ jsx(CommandListbox, { ref, ...props, children: children ?? ((item, index, prevItem) => {
-      const Comp = item.subOptions?.length ? size === "sm" ? MenuSub : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : MenuRadioItem : MenuItem;
-      const group = item.group;
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
-        shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
-        Comp === MenuSub ? /* @__PURE__ */ jsx(Comp, { index, item }) : /* @__PURE__ */ jsx(Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsx(Comp, { index, item }) })
-      ] });
-    }) });
+    const { open } = useMenuSubContext("@optiaxiom/react/MenuListbox");
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CommandListbox, { ref, ...props, children: children ?? ((item, index, prevItem) => {
+        const Comp = typeof item.subOptions === "function" || item.subOptions?.length ? size === "sm" ? MenuSubTrigger : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : MenuRadioItem : MenuItem;
+        const group = item.group;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
+          shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
+          Comp === MenuSubTrigger ? /* @__PURE__ */ jsx(Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsx(MenuSubTrigger, { index, item }) }) : /* @__PURE__ */ jsx(Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsx(Comp, { index, item }) })
+        ] });
+      }) }),
+      !inputValue && size === "sm" && /* @__PURE__ */ jsx(Popover, { open, children: /* @__PURE__ */ jsx(MenuSubContent, {}) })
+    ] });
   }
 );
 MenuListbox.displayName = "@optiaxiom/react/MenuListbox";

package/dist/esm/packages/react/src/menu/MenuPopoverContent.js

@@ -30,15 +30,7 @@ const MenuPopoverContent = forwardRef(({ style, ...props }, outerRef) => {
     });
     return () => observer.disconnect();
   }, [open, props.side]);
-  return /* @__PURE__ */ jsx(
-    PopoverContent,
-    {
-      minW: "trigger",
-      ref,
-      style: { ...style, minHeight },
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(PopoverContent, { ref, style: { ...style, minHeight }, ...props });
 });
 MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";