@optiaxiom/react 1.4.5 → 1.5.0

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-Dclj4WBX.css';
+import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-CO9UYuYz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:[{display:'inline-flex'},'jmv7pw']});
+var checkbox = recipeRuntime({base:[{display:'inline-flex'},'jkt830']});
 
 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-Dclj4WBX.css';
+import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-C6F6cJM6.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'},'s5jxi4']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'yxy22s'],variants:{intent:{danger:'_15iadzr',neutral:'_1k5ucql'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_1tmli2q']});
 
 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-Dclj4WBX.css';
+import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-BYQQkUoP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['hdvefq'],variants:{active:{false:{},true:'r7300f'}}});
+var indicator = recipeRuntime({base:['_1mk0ber'],variants:{active:{false:{},true:'_167le8m'}}});
 
 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

@@ -39,7 +39,7 @@ 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();

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dclj4WBX.css';
+import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-D8P1_hWq.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:'lp6tc4'});
+
+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-Dclj4WBX.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-rG8GuTkp.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'},'_17xoloo']}}});
 
 export { input };

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

@@ -52,7 +52,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/MenuSubContent.js

@@ -1,13 +1,14 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
 import { Command } from '../command/Command.js';
 import '../command/CommandInput.js';
 import '../command/CommandItem.js';
 import '../command/CommandListbox.js';
-import { useCommandContext } from '../command/CommandContext.js';
+import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
 import '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
+import { PopoverAnchor } from '../popover/PopoverAnchor.js';
 import { PopoverContent } from '../popover/PopoverContent.js';
 import '../popover/PopoverTrigger.js';
 import { usePopoverContext } from '../popover/PopoverContext.js';
@@ -18,100 +19,142 @@ import { useMenuSubContext, MenuSubProvider } from './MenuSubContext.js';
 import { MenuSubInput } from './MenuSubInput.js';
 
 const MenuSubContent = forwardRef(
-  ({ align = "start", children, item, side = "right", ...props }, ref) => {
-    const options = useMemo(() => item.subOptions ?? [], [item]);
+  ({ align = "start", children, side = "right", ...props }, outerRef) => {
     const { onSelect, setOpen: setRootMenuOpen } = useMenuContext(
       "@optiaxiom/react/MenuSubContent"
     );
-    const { setInputValue } = useCommandContext(
+    const {
+      highlightedItem,
+      inputValue: parentInputValue,
+      setInputValue: setParentInputValue
+    } = useCommandContext("@optiaxiom/react/MenuSubContent");
+    const {
+      contentRef: parentContentRef,
+      inputRef: parentInputRef,
+      open: parentSubMenuOpen,
+      triggerRef: parentTriggerRef
+    } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const { open, presence } = usePopoverContext(
       "@optiaxiom/react/MenuSubContent"
     );
-    const { inputRef: parentInputRef, open: parentSubMenuOpen } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
-    const { open } = usePopoverContext("@optiaxiom/react/MenuSubContent");
+    const ref = useComposedRefs(parentContentRef, outerRef);
+    const itemRef = useRef(highlightedItem);
+    if (parentSubMenuOpen && highlightedItem && (typeof highlightedItem.subOptions === "function" || !!highlightedItem.subOptions?.length)) {
+      itemRef.current = highlightedItem;
+    }
+    const item = itemRef.current;
+    const [inputValue, setInputValue] = useState("");
+    const options = useMemo(
+      () => resolveItemProperty(item?.subOptions, { inputValue }) ?? [],
+      [inputValue, item]
+    );
+    const contentRef = useRef(null);
     const inputRef = useRef(null);
+    const triggerRef = useRef(null);
     const [subMenuOpen, setSubMenuOpen] = useState(false);
     useEffect(() => {
       if (!open) {
         setSubMenuOpen(false);
       }
     }, [open]);
-    return /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        align,
-        alignOffset: item.subOptionsInputVisible ? -46 : -4,
-        minW: "trigger",
-        onCloseAutoFocus: (event) => {
-          if (parentSubMenuOpen) {
-            return;
-          }
-          event.preventDefault();
-          parentInputRef.current?.focus();
-        },
-        onEscapeKeyDown: () => setRootMenuOpen(false),
-        onPointerDown: (event) => {
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.target instanceof HTMLElement && event.target.closest('[role="option"]')) {
-            return;
-          }
-          event.preventDefault();
-        },
-        onPointerEnter: () => {
-          if (item.subOptionsInputVisible) {
-            inputRef.current?.focus();
-          }
-        },
-        onPointerLeave: (event) => {
-          if (item.subOptionsInputVisible) {
+    useEffect(() => {
+      return () => {
+        setInputValue("");
+        setSubMenuOpen(false);
+      };
+    }, [item]);
+    if (!item || !(open || presence)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: parentTriggerRef }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align,
+          alignOffset: item.subOptionsInputVisible ? -46 : -4,
+          minW: "trigger",
+          onCloseAutoFocus: (event) => {
+            if (parentSubMenuOpen) {
+              return;
+            }
+            event.preventDefault();
             parentInputRef.current?.focus();
-            event.stopPropagation();
-          }
-        },
-        p: "4",
-        ref,
-        side,
-        sideOffset: 0,
-        ...props,
-        children: children ?? /* @__PURE__ */ jsxs(
-          Command,
-          {
-            onHover: (item2) => {
-              setSubMenuOpen(!!item2.subOptions?.length);
-            },
-            onInputValueChange: (inputValue) => {
-              if (item.subOptionsInputVisible) {
-                return;
-              }
+          },
+          onEscapeKeyDown: () => setRootMenuOpen(false),
+          onPointerDown: (event) => {
+            if (event.defaultPrevented) {
+              return;
+            }
+            if (event.target instanceof Element && event.target.closest('[role="option"]')) {
+              return;
+            }
+            event.preventDefault();
+          },
+          onPointerEnter: () => {
+            if (item.subOptionsInputVisible) {
+              inputRef.current?.focus();
+            }
+          },
+          onPointerLeave: (event) => {
+            if (item.subOptionsInputVisible) {
               parentInputRef.current?.focus();
-              setInputValue(inputValue);
-            },
-            onSelect: (item2, { dismiss }) => {
-              if (item2.subOptions?.length) {
-                setSubMenuOpen(true);
-              } else {
-                onSelect(item2, { dismiss });
-              }
-            },
-            open: true,
-            options,
-            children: [
-              /* @__PURE__ */ jsx(VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsx(MenuSubInput, { ref: inputRef }) }),
-              /* @__PURE__ */ jsx(
-                MenuSubProvider,
-                {
-                  inputRef,
-                  open: subMenuOpen,
-                  setOpen: setSubMenuOpen,
-                  children: /* @__PURE__ */ jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+              event.stopPropagation();
+            }
+          },
+          p: "4",
+          ref,
+          side,
+          sideOffset: 0,
+          ...props,
+          children: children ?? /* @__PURE__ */ jsxs(
+            Command,
+            {
+              enabled: true,
+              inputValue,
+              onHover: (item2) => {
+                setSubMenuOpen(
+                  typeof item2.subOptions === "function" || !!item2.subOptions?.length
+                );
+              },
+              onInputValueChange: (inputValue2) => {
+                if (item.subOptionsInputVisible) {
+                  setInputValue(inputValue2);
+                  return;
                 }
-              )
-            ]
-          }
-        )
-      }
-    );
+                parentInputRef.current?.focus();
+                setParentInputValue(inputValue2);
+              },
+              onSelect: (item2, { dismiss }) => {
+                if (typeof item2.subOptions === "function" || item2.subOptions?.length) {
+                  setSubMenuOpen(true);
+                } else {
+                  onSelect(item2, { dismiss });
+                }
+              },
+              options,
+              children: [
+                /* @__PURE__ */ jsx(VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsx(MenuSubInput, { ref: inputRef }) }),
+                /* @__PURE__ */ jsx(
+                  MenuSubProvider,
+                  {
+                    contentRef,
+                    inputRef,
+                    open: subMenuOpen,
+                    setOpen: setSubMenuOpen,
+                    triggerRef,
+                    children: /* @__PURE__ */ jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+                  }
+                )
+              ]
+            },
+            item.key ?? resolveItemProperty(item.label, {
+              inputValue: parentInputValue
+            })
+          )
+        }
+      )
+    ] });
   }
 );
 MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";

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

@@ -32,7 +32,7 @@ const MenuSubInput = forwardRef(
           if (event.key === "ArrowLeft") {
             event.preventDefault();
             setOpen(false);
-          } else if (event.key === "ArrowRight" && highlightedItem?.subOptions?.length) {
+          } else if (event.key === "ArrowRight" && (typeof highlightedItem?.subOptions === "function" || highlightedItem?.subOptions?.length)) {
             event.preventDefault();
             downshift.selectItem(highlightedItem);
           }

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

@@ -1,29 +1,37 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, useEffect } from 'react';
 import { useCommandContext } from '../command/CommandContext.js';
-import { FilteredSlot } from '../filtered-slot/FilteredSlot.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
-import '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import '../popover/PopoverContent.js';
-import { PopoverTrigger } from '../popover/PopoverTrigger.js';
 import { usePopoverContext } from '../popover/PopoverContext.js';
 import { MenuItem } from './MenuItem.js';
+import { useMenuSubContext } from './MenuSubContext.js';
 
 const MenuSubTrigger = forwardRef(
   ({
     children,
-    contentRef,
     item,
     onPointerDown,
     onPointerEnter,
     onPointerLeave,
+    onPointerMove,
     ...props
-  }, ref) => {
+  }, outerRef) => {
     const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
     const { open } = usePopoverContext("@optiaxiom/react/MenuSubTrigger");
-    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsx(
+    const { contentRef, triggerRef } = useMenuSubContext(
+      "@optiaxiom/react/MenuSubTrigger"
+    );
+    const pointerEnterRef = useRef(false);
+    const innerRef = useRef();
+    const ref = useComposedRefs(innerRef, outerRef);
+    useEffect(() => {
+      if (open && highlightedItem === item && innerRef.current) {
+        triggerRef.current = innerRef.current;
+      }
+    }, [highlightedItem, item, open, triggerRef]);
+    return /* @__PURE__ */ jsx(
       MenuItem,
       {
         addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}),
@@ -36,17 +44,23 @@ const MenuSubTrigger = forwardRef(
         },
         onPointerEnter: (event) => {
           onPointerEnter?.(event);
-          if (highlightedItem !== item) {
+          if (event.defaultPrevented) {
             return;
           }
-          downshift.selectItem(item);
+          if (highlightedItem === item) {
+            pointerEnterRef.current = true;
+          }
         },
         onPointerLeave: (event) => {
           onPointerLeave?.(event);
+          pointerEnterRef.current = false;
           const box = contentRef.current?.getBoundingClientRect();
           if (!box) {
             return;
           }
+          if (pauseInteractionRef.current.isInsideTriangle) {
+            return;
+          }
           const bottom = {
             x: box.left,
             y: box.top + box.height
@@ -67,11 +81,21 @@ const MenuSubTrigger = forwardRef(
             pauseInteractionRef.current.isInsideTriangle = null;
           }, 20);
         },
+        onPointerMove: (event) => {
+          onPointerMove?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (pointerEnterRef.current && downshift.isOpen) {
+            downshift.selectItem(item);
+          }
+          pointerEnterRef.current = false;
+        },
         ref,
         ...props,
         children
       }
-    ) }) });
+    );
   }
 );
 MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";

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

@@ -21,7 +21,13 @@ import { PopoverTrigger } from '../popover/PopoverTrigger.js';
 import { useMenuContext } from './MenuContext.js';
 
 const MenuTrigger = forwardRef(
-  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    asChild,
+    children,
+    onKeyDown,
+    ...props
+  }, outerRef) => {
     const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
     const Comp = size === "sm" ? PopoverTrigger : DialogTrigger;
     const buttonRef = useRef(null);
@@ -33,6 +39,10 @@ const MenuTrigger = forwardRef(
         "aria-labelledby": labelId,
         asChild: true,
         onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
           switch (event.key) {
             case "ArrowDown":
               setOpen(true);