@xsolla/xui-context-menu 0.172.2 → 0.173.1

package/native/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   ContextMenu: () => ContextMenu,
   ContextMenuContext: () => ContextMenuContext,
   ContextMenuItem: () => ContextMenuItem,
+  ContextMenuSubmenu: () => ContextMenuSubmenu,
   useContextMenu: () => useContextMenu,
   useContextMenuPosition: () => useContextMenuPosition,
   useContextMenuRequired: () => useContextMenuRequired,
@@ -41,9 +42,184 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/ContextMenu.tsx
-var import_react5 = __toESM(require("react"));
-var import_react_dom2 = require("react-dom");
-var import_xui_core2 = require("@xsolla/xui-core");
+var import_react6 = require("react");
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// src/ContextMenu.tsx
+var import_xui_core3 = require("@xsolla/xui-core");
 var import_xui_spinner = require("@xsolla/xui-spinner");
 
 // src/ContextMenuContext.tsx
@@ -71,7 +247,7 @@ var import_xui_typography = require("@xsolla/xui-typography");
 var import_xui_checkbox = require("@xsolla/xui-checkbox");
 var import_xui_radio = require("@xsolla/xui-radio");
 var import_xui_icons_base = require("@xsolla/xui-icons-base");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var sizeToVariants = {
   xl: { label: "bodyLg", description: "bodyLg", headingAccent: "bodyLgAccent" },
   lg: { label: "bodyLg", description: "bodyMd", headingAccent: "bodyMdAccent" },
@@ -81,18 +257,51 @@ var sizeToVariants = {
 var sizeLabelOverride = {
   xl: { fontSize: 20, lineHeight: "26px" }
 };
+var SUBMENU_GAP = 8;
+var SUBMENU_VIEWPORT_PADDING = 8;
+var clipsOverflow = (style) => {
+  return /(auto|scroll|hidden|clip)/.test(
+    `${style.overflow}${style.overflowX}${style.overflowY}`
+  );
+};
+var getSubmenuBoundary = (node) => {
+  const viewport = {
+    top: SUBMENU_VIEWPORT_PADDING,
+    right: window.innerWidth - SUBMENU_VIEWPORT_PADDING,
+    bottom: window.innerHeight - SUBMENU_VIEWPORT_PADDING,
+    left: SUBMENU_VIEWPORT_PADDING
+  };
+  let current = node.parentElement;
+  while (current && current !== document.body) {
+    const style = window.getComputedStyle(current);
+    if (clipsOverflow(style) && current.getAttribute("role") !== "menu") {
+      const rect = current.getBoundingClientRect();
+      return {
+        top: Math.max(viewport.top, rect.top + SUBMENU_VIEWPORT_PADDING),
+        right: Math.min(viewport.right, rect.right - SUBMENU_VIEWPORT_PADDING),
+        bottom: Math.min(
+          viewport.bottom,
+          rect.bottom - SUBMENU_VIEWPORT_PADDING
+        ),
+        left: Math.max(viewport.left, rect.left + SUBMENU_VIEWPORT_PADDING)
+      };
+    }
+    current = current.parentElement;
+  }
+  return viewport;
+};
 var ContextMenuItem = (props) => {
-  if (props.type === "option") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionCell, { ...props });
-  if (props.type === "heading") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadingCell, { ...props });
-  if (props.type === "divider") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DividerCell, { ...props });
-  if (props.type === "search") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchCell, { ...props });
+  if (props.type === "option") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OptionCell, { ...props });
+  if (props.type === "heading") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HeadingCell, { ...props });
+  if (props.type === "divider") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DividerCell, { ...props });
+  if (props.type === "search") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SearchCell, { ...props });
   return null;
 };
 ContextMenuItem.displayName = "ContextMenuItem";
 var SubmenuChevron = ({
   color,
   size
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "span",
   {
     "data-testid": "ctxmenu-submenu-chevron",
@@ -104,7 +313,7 @@ var SubmenuChevron = ({
       width: size,
       height: size
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "svg",
       {
         width: size,
@@ -112,7 +321,7 @@ var SubmenuChevron = ({
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
             d: "M17.0605 11.6464C17.2558 11.8417 17.2558 12.1583 17.0605 12.3536L9.70703 19.707L8.29297 18.293L14.5859 12L8.29297 5.70703L9.70703 4.29297L17.0605 11.6464Z",
@@ -134,6 +343,7 @@ var OptionCell = ({
   leadingIcon,
   status,
   iconWrapper,
+  slot,
   slotContent,
   value,
   hint,
@@ -142,12 +352,17 @@ var OptionCell = ({
   hasSubmenu,
   submenu,
   onSelect,
+  onCheckedChange,
   testID,
   themeMode,
   themeProductContext,
   "data-testid": testId
 }) => {
-  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const { theme: rawTheme } = (0, import_xui_core.useResolvedTheme)({
+    themeMode,
+    themeProductContext
+  });
+  const theme = rawTheme;
   const ctx = useContextMenu();
   const size = propSize ?? ctx?.size ?? "md";
   const sizing = theme.sizing.contextMenu(size);
@@ -204,7 +419,32 @@ var OptionCell = ({
       const node = optionRef.current;
       if (!node) return;
       const rect = node.getBoundingClientRect();
-      setSubmenuPos({ top: rect.top, left: rect.right });
+      const submenuRect = submenuWrapperRef.current?.getBoundingClientRect();
+      const submenuWidth = submenuRect?.width ?? 0;
+      const submenuHeight = submenuRect?.height ?? 0;
+      const boundary = getSubmenuBoundary(node);
+      const rightSideLeft = rect.right + SUBMENU_GAP;
+      const leftSideLeft = rect.left - SUBMENU_GAP - submenuWidth;
+      const opensLeft = submenuWidth > 0 && rightSideLeft + submenuWidth > boundary.right;
+      let left = opensLeft ? leftSideLeft : rightSideLeft;
+      if (submenuWidth > 0) {
+        if (opensLeft) {
+          left = Math.max(SUBMENU_VIEWPORT_PADDING, left);
+        } else {
+          left = Math.min(
+            Math.max(boundary.left, left),
+            Math.max(boundary.left, boundary.right - submenuWidth)
+          );
+        }
+      }
+      let top = rect.top;
+      if (submenuHeight > 0 && top + submenuHeight > boundary.bottom) {
+        top = boundary.bottom - submenuHeight;
+      }
+      top = Math.max(boundary.top, top);
+      setSubmenuPos(
+        (prev) => prev?.top === top && prev.left === left ? prev : { top, left }
+      );
     };
     update();
     window.addEventListener("scroll", update, true);
@@ -213,7 +453,7 @@ var OptionCell = ({
       window.removeEventListener("scroll", update, true);
       window.removeEventListener("resize", update);
     };
-  }, [hasSubmenu, submenuOpen]);
+  });
   const onSelectRef = import_react2.default.useRef(onSelect);
   onSelectRef.current = onSelect;
   (0, import_react2.useEffect)(() => {
@@ -247,7 +487,7 @@ var OptionCell = ({
   };
   const labelColor = disabled ? theme.colors.control.input.textDisable : destructive ? theme.colors.content.alert.primary : theme.colors.content.primary;
   const bg = inHoverState ? theme.colors.control.input.bgHover : "transparent";
-  const role = !hasSubmenu && checked !== void 0 ? "menuitemcheckbox" : "menuitem";
+  const role = !hasSubmenu && checked !== void 0 ? leadingControl === "radio" ? "menuitemradio" : "menuitemcheckbox" : "menuitem";
   const ariaChecked = !hasSubmenu && checked !== void 0 ? checked ? "true" : "false" : void 0;
   const handleClick = () => {
     if (disabled) return;
@@ -255,6 +495,9 @@ var OptionCell = ({
       setSubmenuOpen(true);
       return;
     }
+    if (checked !== void 0) {
+      onCheckedChange?.(!checked);
+    }
     onSelect?.();
   };
   const closeSubmenuAndFocus = () => {
@@ -284,10 +527,13 @@ var OptionCell = ({
     }
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
+      if (checked !== void 0) {
+        onCheckedChange?.(!checked);
+      }
       onSelect?.();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ref: optionRef,
@@ -327,13 +573,13 @@ var OptionCell = ({
         outline: "none"
       },
       children: [
-        leadingControl === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        leadingControl === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
             "data-testid": "ctxmenu-leading-checkbox",
             "aria-hidden": "true",
             style: { pointerEvents: "none", display: "inline-flex" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_xui_checkbox.Checkbox,
               {
                 size,
@@ -345,13 +591,13 @@ var OptionCell = ({
             )
           }
         ),
-        leadingControl === "radio" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        leadingControl === "radio" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
             "data-testid": "ctxmenu-leading-radio",
             "aria-hidden": "true",
             style: { pointerEvents: "none", display: "inline-flex" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_xui_radio.Radio,
               {
                 size,
@@ -366,8 +612,9 @@ var OptionCell = ({
         leadingIcon,
         status,
         iconWrapper,
+        slot,
         slotContent,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "span",
           {
             style: {
@@ -378,7 +625,7 @@ var OptionCell = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_xui_typography.Typography,
                 {
                   variant: variants.label,
@@ -391,7 +638,7 @@ var OptionCell = ({
                   children: label
                 }
               ),
-              description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_xui_typography.Typography,
                 {
                   variant: variants.description,
@@ -402,7 +649,7 @@ var OptionCell = ({
             ]
           }
         ),
-        (value !== void 0 || hint !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        (value !== void 0 || hint !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "span",
           {
             style: {
@@ -411,7 +658,7 @@ var OptionCell = ({
               alignItems: "flex-end"
             },
             children: [
-              value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_xui_typography.Typography,
                 {
                   variant: variants.label,
@@ -420,7 +667,7 @@ var OptionCell = ({
                   children: value
                 }
               ),
-              hint !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              hint !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_xui_typography.Typography,
                 {
                   variant: variants.description,
@@ -431,7 +678,7 @@ var OptionCell = ({
             ]
           }
         ),
-        keyboardShortcut && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        keyboardShortcut && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_xui_typography.Typography,
           {
             as: "kbd",
@@ -440,7 +687,7 @@ var OptionCell = ({
             children: keyboardShortcut
           }
         ),
-        hasSubmenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        hasSubmenu && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           SubmenuChevron,
           {
             color: theme.colors.content.tertiary,
@@ -449,7 +696,7 @@ var OptionCell = ({
         ),
         trailingIcon,
         hasSubmenu && submenuOpen && submenu && submenuPos && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "div",
             {
               ref: submenuWrapperRef,
@@ -480,7 +727,11 @@ var HeadingCell = ({
   themeProductContext,
   "data-testid": testId
 }) => {
-  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const { theme: rawTheme } = (0, import_xui_core.useResolvedTheme)({
+    themeMode,
+    themeProductContext
+  });
+  const theme = rawTheme;
   const ctx = useContextMenu();
   const size = propSize ?? ctx?.size ?? "md";
   const sizing = theme.sizing.contextMenu(size);
@@ -493,7 +744,7 @@ var HeadingCell = ({
     registerCell(id, { type: "heading" });
     return () => unregisterCell(id);
   }, [registerCell, unregisterCell, id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       role: "presentation",
@@ -508,7 +759,7 @@ var HeadingCell = ({
         paddingBottom: sizing.itemPaddingVertical
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_xui_typography.Typography,
           {
             variant: variants.headingAccent,
@@ -517,7 +768,7 @@ var HeadingCell = ({
             children: label
           }
         ),
-        description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        description !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_xui_typography.Typography,
           {
             variant: variants.description,
@@ -532,6 +783,7 @@ var HeadingCell = ({
 var SearchCell = ({
   size: propSize,
   value,
+  onChange,
   onValueChange,
   placeholder = "Search",
   autoFocus,
@@ -541,7 +793,11 @@ var SearchCell = ({
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const { theme: rawTheme } = (0, import_xui_core.useResolvedTheme)({
+    themeMode,
+    themeProductContext
+  });
+  const theme = rawTheme;
   const ctx = useContextMenu();
   const size = propSize ?? ctx?.size ?? "md";
   const sizing = theme.sizing.contextMenu(size);
@@ -553,7 +809,7 @@ var SearchCell = ({
     registerCell(id, { type: "search" });
     return () => unregisterCell(id);
   }, [registerCell, unregisterCell, id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       style: {
@@ -563,7 +819,7 @@ var SearchCell = ({
         paddingTop: sizing.searchPaddingVertical,
         paddingBottom: sizing.searchPaddingVertical
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           style: {
@@ -574,7 +830,7 @@ var SearchCell = ({
             borderBottom: `1px solid ${theme.colors.border.secondary}`
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_xui_icons_base.Search,
               {
                 variant: "line",
@@ -583,16 +839,19 @@ var SearchCell = ({
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "input",
               {
                 type: "search",
                 role: "searchbox",
                 "aria-label": ariaLabel,
                 placeholder,
-                value,
+                value: value ?? "",
                 autoFocus,
-                onChange: (e) => onValueChange(e.target.value),
+                onChange: (e) => {
+                  onChange?.(e);
+                  onValueChange?.(e.target.value);
+                },
                 "data-testid": testId || testID,
                 style: {
                   flex: 1,
@@ -615,7 +874,11 @@ var SearchCell = ({
   );
 };
 var DividerCell = ({ themeMode, themeProductContext, "data-testid": testId }) => {
-  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const { theme: rawTheme } = (0, import_xui_core.useResolvedTheme)({
+    themeMode,
+    themeProductContext
+  });
+  const theme = rawTheme;
   const ctx = useContextMenu();
   const id = (0, import_xui_core.useId)();
   const registerCell = ctx?.registerCell;
@@ -625,7 +888,7 @@ var DividerCell = ({ themeMode, themeProductContext, "data-testid": testId }) =>
     registerCell(id, { type: "divider" });
     return () => unregisterCell(id);
   }, [registerCell, unregisterCell, id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       role: "separator",
@@ -639,8 +902,150 @@ var DividerCell = ({ themeMode, themeProductContext, "data-testid": testId }) =>
   );
 };
 
-// src/hooks/useContextMenuPosition.ts
+// src/ContextMenuSubmenu.tsx
 var import_react3 = require("react");
+var import_xui_core2 = require("@xsolla/xui-core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SUBMENU_GAP2 = 4;
+var OPEN_DELAY_MS = 200;
+var CLOSE_GRACE_MS = 100;
+var ContextMenuSubmenu = ({
+  label,
+  icon,
+  disabled,
+  children,
+  size: propSize,
+  "data-testid": testId = "context-menu-submenu"
+}) => {
+  const { theme } = (0, import_xui_core2.useDesignSystem)();
+  const xuiTheme = theme;
+  const context = useContextMenu();
+  const size = propSize || context?.size || "md";
+  const sizeStyles = xuiTheme.sizing.contextMenu(size);
+  const borderRadius = xuiTheme.shape?.contextMenu?.[size]?.borderRadius ?? xuiTheme.radius?.button ?? 8;
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [visible, setVisible] = (0, import_react3.useState)(false);
+  const [openLeft, setOpenLeft] = (0, import_react3.useState)(false);
+  const [topOffset, setTopOffset] = (0, import_react3.useState)(0);
+  const triggerRef = (0, import_react3.useRef)(null);
+  const submenuRef = (0, import_react3.useRef)(null);
+  const openTimerRef = (0, import_react3.useRef)(null);
+  const closeTimerRef = (0, import_react3.useRef)(null);
+  const clearTimers = (0, import_react3.useCallback)(() => {
+    if (openTimerRef.current) clearTimeout(openTimerRef.current);
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+  }, []);
+  const calculatePlacement = (0, import_react3.useCallback)(() => {
+    if (!triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const estimatedWidth = sizeStyles.minWidth + 32;
+    const wouldOverflowRight = triggerRect.right + estimatedWidth + SUBMENU_GAP2 > window.innerWidth - 8;
+    setOpenLeft(wouldOverflowRight);
+    setTopOffset(0);
+  }, [sizeStyles.minWidth]);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (!isOpen || !submenuRef.current || !triggerRef.current) return;
+    const submenuRect = submenuRef.current.getBoundingClientRect();
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const wouldOverflowRight = triggerRect.right + submenuRect.width + SUBMENU_GAP2 > window.innerWidth - 8;
+    setOpenLeft(wouldOverflowRight);
+    const overflowBottom = triggerRect.top + submenuRect.height - (window.innerHeight - 8);
+    if (overflowBottom > 0) {
+      setTopOffset(-Math.min(overflowBottom, triggerRect.top - 8));
+    } else {
+      setTopOffset(0);
+    }
+  }, [isOpen]);
+  (0, import_react3.useEffect)(() => {
+    if (!isOpen) {
+      setVisible(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(raf);
+  }, [isOpen]);
+  (0, import_react3.useEffect)(() => () => clearTimers(), [clearTimers]);
+  const handleTriggerEnter = () => {
+    if (disabled) return;
+    clearTimers();
+    openTimerRef.current = setTimeout(() => {
+      calculatePlacement();
+      setIsOpen(true);
+    }, OPEN_DELAY_MS);
+  };
+  const handleTriggerLeave = () => {
+    clearTimers();
+    closeTimerRef.current = setTimeout(() => setIsOpen(false), CLOSE_GRACE_MS);
+  };
+  const handleSubmenuEnter = () => clearTimers();
+  const handleSubmenuLeave = () => {
+    clearTimers();
+    closeTimerRef.current = setTimeout(() => setIsOpen(false), CLOSE_GRACE_MS);
+  };
+  const submenuPositionStyle = openLeft ? { right: `calc(100% + ${SUBMENU_GAP2}px)` } : { left: `calc(100% + ${SUBMENU_GAP2}px)` };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ref: triggerRef,
+      style: { position: "relative" },
+      onMouseEnter: handleTriggerEnter,
+      onMouseLeave: handleTriggerLeave,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ContextMenuItem,
+          {
+            type: "option",
+            label,
+            leadingIcon: icon,
+            disabled,
+            hasSubmenu: true,
+            size,
+            "data-testid": `${testId}-trigger`
+          }
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            ref: submenuRef,
+            onMouseEnter: handleSubmenuEnter,
+            onMouseLeave: handleSubmenuLeave,
+            style: {
+              position: "absolute",
+              top: topOffset,
+              ...submenuPositionStyle,
+              zIndex: 1001,
+              opacity: visible ? 1 : 0,
+              transform: visible ? "translateX(0)" : openLeft ? "translateX(4px)" : "translateX(-4px)",
+              transition: "opacity 100ms ease, transform 100ms ease"
+            },
+            "data-testid": `${testId}-content`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Box,
+              {
+                role: "menu",
+                backgroundColor: xuiTheme.colors.background.secondary,
+                borderColor: xuiTheme.colors.border.secondary,
+                borderWidth: 1,
+                borderRadius,
+                paddingVertical: sizeStyles.paddingVertical,
+                style: {
+                  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                  minWidth: sizeStyles.minWidth
+                },
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+ContextMenuSubmenu.displayName = "ContextMenuSubmenu";
+
+// src/hooks/useContextMenuPosition.ts
+var import_react4 = require("react");
 var splitPlacement = (placement) => {
   const [vertical, horizontal] = placement.split("-");
   return { vertical, horizontal };
@@ -653,8 +1058,8 @@ var useContextMenuPosition = ({
   placement = "bottom-start",
   offset = 4
 }) => {
-  const [resolved, setResolved] = (0, import_react3.useState)();
-  (0, import_react3.useEffect)(() => {
+  const [resolved, setResolved] = (0, import_react4.useState)();
+  (0, import_react4.useEffect)(() => {
     if (!isOpen) {
       setResolved(void 0);
       return;
@@ -701,30 +1106,19 @@ var useContextMenuPosition = ({
         (prev) => prev && prev.top === next.top && prev.left === next.left && prev.placement === next.placement ? prev : next
       );
     };
-    let rafId = window.requestAnimationFrame(compute);
+    const rafId = window.requestAnimationFrame(compute);
     const onResize = () => compute();
-    let scrollRafPending = false;
-    const onScroll = () => {
-      if (scrollRafPending) return;
-      scrollRafPending = true;
-      rafId = window.requestAnimationFrame(() => {
-        scrollRafPending = false;
-        compute();
-      });
-    };
     window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, true);
     return () => {
       window.cancelAnimationFrame(rafId);
       window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onScroll, true);
     };
   }, [isOpen, placement, offset, triggerRef, panelRef]);
   return resolved;
 };
 
 // src/hooks/useKeyboardNavigation.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var isNavigableOption = (meta) => meta.type === "option" && !meta.disabled;
 var isTextInputTarget = (target) => {
   if (!(target instanceof HTMLElement)) return false;
@@ -739,19 +1133,19 @@ var useKeyboardNavigation = ({
   onClose,
   triggerRef
 }) => {
-  const findFirstOption = (0, import_react4.useCallback)(() => {
+  const findFirstOption = (0, import_react5.useCallback)(() => {
     for (let i = 0; i < cells.length; i += 1) {
       if (isNavigableOption(cells[i].meta)) return i;
     }
     return -1;
   }, [cells]);
-  const findLastOption = (0, import_react4.useCallback)(() => {
+  const findLastOption = (0, import_react5.useCallback)(() => {
     for (let i = cells.length - 1; i >= 0; i -= 1) {
       if (isNavigableOption(cells[i].meta)) return i;
     }
     return -1;
   }, [cells]);
-  const findNextOption = (0, import_react4.useCallback)(
+  const findNextOption = (0, import_react5.useCallback)(
     (from) => {
       const len = cells.length;
       if (len === 0) return -1;
@@ -763,7 +1157,7 @@ var useKeyboardNavigation = ({
     },
     [cells]
   );
-  const findPrevOption = (0, import_react4.useCallback)(
+  const findPrevOption = (0, import_react5.useCallback)(
     (from) => {
       const len = cells.length;
       if (len === 0) return -1;
@@ -775,7 +1169,7 @@ var useKeyboardNavigation = ({
     },
     [cells]
   );
-  const handleKeyDown = (0, import_react4.useCallback)(
+  const handleKeyDown = (0, import_react5.useCallback)(
     (event) => {
       if (!isOpen) return;
       switch (event.key) {
@@ -845,459 +1239,383 @@ var useKeyboardNavigation = ({
 };
 
 // src/ContextMenu.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_EMPTY_MESSAGE = "No results";
 var SEARCH_DEBOUNCE_MS = 200;
-var EmptyMessage = ({
-  children,
-  color
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "div",
-  {
-    style: {
-      padding: 12,
-      color,
-      fontSize: 14,
-      textAlign: "center"
-    },
-    children
+var textFromNode = (node) => {
+  if (node === null || node === void 0 || typeof node === "boolean")
+    return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textFromNode).join(" ");
+  if ((0, import_react6.isValidElement)(node)) return textFromNode(node.props.children);
+  return "";
+};
+var filterItems = (items, query) => {
+  const normalized = query.trim().toLowerCase();
+  if (!normalized) return [...items];
+  const result = [];
+  let pendingStructural = [];
+  for (const item of items) {
+    if (item.type === "option") {
+      const label = textFromNode(item.label).toLowerCase();
+      if (label.includes(normalized)) {
+        result.push(...pendingStructural, item);
+        pendingStructural = [];
+      }
+      continue;
+    }
+    if (item.type === "heading") {
+      pendingStructural = [item];
+      continue;
+    }
+    if (item.type === "divider") {
+      if (result.length > 0) pendingStructural.push(item);
+      continue;
+    }
   }
-);
-var ContextMenu = (props) => {
-  const {
-    type,
-    items,
+  return result;
+};
+var isOption = (item) => item.type === "option";
+var ContextMenuRoot = (0, import_react6.forwardRef)(
+  ({
     children,
+    type = "list",
+    items = [],
     size = "md",
     searchable,
     loading,
-    emptyMessage,
+    isLoading,
+    emptyMessage = DEFAULT_EMPTY_MESSAGE,
     empty,
-    trigger,
-    isOpen,
+    isOpen: propIsOpen,
     onOpenChange,
-    closeOnSelect,
-    width,
-    maxHeight,
+    trigger,
     placement = "bottom-start",
+    position,
+    width,
+    maxHeight = 300,
     onSelect,
+    closeOnSelect,
     "aria-label": ariaLabel,
-    "data-testid": testId,
     testID,
+    "data-testid": dataTestId,
     themeMode,
-    themeProductContext
-  } = props;
-  const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
-  const isControlled = isOpen !== void 0;
-  const [internalOpen, setInternalOpen] = (0, import_react5.useState)(false);
-  const open = isControlled ? !!isOpen : internalOpen;
-  const setOpen = (0, import_react5.useCallback)(
-    (next) => {
-      if (!isControlled) setInternalOpen(next);
-      onOpenChange?.(next);
-    },
-    [isControlled, onOpenChange]
-  );
-  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(-1);
-  const cellsRef = (0, import_react5.useRef)([]);
-  const [cellsVersion, setCellsVersion] = (0, import_react5.useState)(0);
-  const triggerRef = (0, import_react5.useRef)(null);
-  const panelRef = (0, import_react5.useRef)(null);
-  const menuId = (0, import_xui_core2.useId)();
-  const [query, setQuery] = (0, import_react5.useState)("");
-  const [debouncedQuery, setDebouncedQuery] = (0, import_react5.useState)("");
-  const debounceTimerRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
-    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-    debounceTimerRef.current = setTimeout(() => {
-      setDebouncedQuery(query);
-    }, SEARCH_DEBOUNCE_MS);
-    return () => {
-      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-    };
-  }, [query]);
-  const closeMenu = (0, import_react5.useCallback)(() => {
-    setOpen(false);
-    setActiveIndex(-1);
-  }, [setOpen]);
-  const registerCell = (0, import_react5.useCallback)((id, meta) => {
-    const existing = cellsRef.current.findIndex((c) => c.id === id);
-    if (existing === -1) {
+    themeProductContext,
+    style
+  }, ref) => {
+    const { theme } = (0, import_xui_core3.useDesignSystem)();
+    const xuiTheme = theme;
+    const menuId = (0, import_xui_core3.useId)();
+    const [internalIsOpen, setInternalIsOpen] = (0, import_react6.useState)(false);
+    const [activeIndex, setActiveIndex] = (0, import_react6.useState)(-1);
+    const [cellsVersion, setCellsVersion] = (0, import_react6.useState)(0);
+    const [query, setQuery] = (0, import_react6.useState)("");
+    const [debouncedQuery, setDebouncedQuery] = (0, import_react6.useState)("");
+    const containerRef = (0, import_react6.useRef)(null);
+    const triggerRef = (0, import_react6.useRef)(null);
+    const panelRef = (0, import_react6.useRef)(null);
+    const cellsRef = (0, import_react6.useRef)([]);
+    const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
+    const sizeStyles = xuiTheme.sizing.contextMenu(size);
+    const borderRadius = xuiTheme.shape?.contextMenu?.[size]?.borderRadius ?? xuiTheme.radius?.button ?? 8;
+    const shouldCloseOnSelect = closeOnSelect ?? (type === "checkbox" ? false : true);
+    const positioned = useContextMenuPosition({
+      triggerRef,
+      panelRef,
+      isOpen: isOpen && !!trigger && !position,
+      placement
+    });
+    const setOpen = (0, import_react6.useCallback)(
+      (nextOpen) => {
+        if (propIsOpen === void 0) setInternalIsOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+        if (!nextOpen) setActiveIndex(-1);
+      },
+      [propIsOpen, onOpenChange]
+    );
+    const closeMenu = (0, import_react6.useCallback)(() => {
+      setOpen(false);
+    }, [setOpen]);
+    const toggleMenu = (0, import_react6.useCallback)(() => {
+      setOpen(!isOpen);
+    }, [isOpen, setOpen]);
+    const registerCell = (0, import_react6.useCallback)((id, meta) => {
+      const existingIndex = cellsRef.current.findIndex(
+        (cell) => cell.id === id
+      );
+      if (existingIndex >= 0) {
+        cellsRef.current[existingIndex] = { id, meta };
+        setCellsVersion((version) => version + 1);
+        return existingIndex;
+      }
       cellsRef.current.push({ id, meta });
-      setCellsVersion((v) => v + 1);
+      setCellsVersion((version) => version + 1);
       return cellsRef.current.length - 1;
-    }
-    const prev = cellsRef.current[existing].meta;
-    cellsRef.current[existing] = { id, meta };
-    if (prev.disabled !== meta.disabled || prev.type !== meta.type) {
-      setCellsVersion((v) => v + 1);
-    }
-    return existing;
-  }, []);
-  const unregisterCell = (0, import_react5.useCallback)((id) => {
-    const idx = cellsRef.current.findIndex((c) => c.id === id);
-    if (idx !== -1) {
-      cellsRef.current.splice(idx, 1);
-      setCellsVersion((v) => v + 1);
-    }
-  }, []);
-  const getCellIndex = (0, import_react5.useCallback)(
-    (id) => cellsRef.current.findIndex((c) => c.id === id),
-    []
-  );
-  const ctx = (0, import_react5.useMemo)(
-    () => ({
-      size,
-      menuId,
-      closeMenu,
-      registerCell,
-      unregisterCell,
-      getCellIndex,
-      cellsVersion,
+    }, []);
+    const unregisterCell = (0, import_react6.useCallback)((id) => {
+      const index = cellsRef.current.findIndex((cell) => cell.id === id);
+      if (index >= 0) {
+        cellsRef.current.splice(index, 1);
+        setCellsVersion((version) => version + 1);
+      }
+    }, []);
+    const getCellIndex = (0, import_react6.useCallback)((id) => {
+      return cellsRef.current.findIndex((cell) => cell.id === id);
+    }, []);
+    const cells = (0, import_react6.useMemo)(() => [...cellsRef.current], [cellsVersion]);
+    const keyboard = useKeyboardNavigation({
+      isOpen,
+      cells,
       activeIndex,
       setActiveIndex,
-      query,
-      setQuery
-    }),
-    [
-      size,
-      menuId,
-      closeMenu,
-      registerCell,
-      unregisterCell,
-      getCellIndex,
-      cellsVersion,
-      activeIndex,
-      query
-    ]
-  );
-  const triggerNode = (0, import_react5.useMemo)(() => {
-    if (!trigger) return null;
-    const inner = (0, import_react5.isValidElement)(trigger) ? (0, import_react5.cloneElement)(
-      trigger,
-      {
-        "aria-haspopup": "menu",
-        "aria-expanded": open ? "true" : "false"
-      }
-    ) : trigger;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "span",
-      {
-        ref: (node) => {
-          if (!node) {
-            triggerRef.current = null;
-            return;
-          }
-          const focusable = node.querySelector(
-            "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
-          );
-          triggerRef.current = focusable ?? node;
-        },
-        onClick: () => setOpen(!open),
-        style: { display: "inline-flex" },
-        children: inner
-      }
-    );
-  }, [trigger, open, setOpen]);
-  const usePortal = !!trigger && typeof document !== "undefined";
-  const position = useContextMenuPosition({
-    triggerRef,
-    panelRef,
-    isOpen: open && usePortal,
-    placement
-  });
-  const cellsForNav = (0, import_react5.useMemo)(
-    () => cellsRef.current.map((c) => ({ id: c.id, meta: c.meta })),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [cellsVersion]
-  );
-  const { handleKeyDown } = useKeyboardNavigation({
-    isOpen: open,
-    cells: cellsForNav,
-    activeIndex,
-    setActiveIndex,
-    onClose: closeMenu,
-    triggerRef
-  });
-  const sizingFn = theme.sizing.contextMenu;
-  const sizing = sizingFn ? sizingFn(size) : {};
-  const radiusObj = theme.radius;
-  const radiusVal = sizing.borderRadius ?? radiusObj?.contextMenu ?? 8;
-  const shadowObj = theme.shadow;
-  const shadowVal = shadowObj?.popover ?? "";
-  const panelPaddingVertical = sizing.paddingVertical ?? 8;
-  const glassBackground = theme.colors.layer?.float ?? theme.colors.background.primary;
-  const panelStyle = {
-    background: glassBackground,
-    backdropFilter: "blur(12px)",
-    WebkitBackdropFilter: "blur(12px)",
-    border: `1px solid ${theme.colors.border.secondary}`,
-    borderRadius: radiusVal,
-    boxShadow: shadowVal,
-    width: width ?? sizing.panelWidth,
-    maxHeight,
-    overflow: "hidden",
-    display: open ? "flex" : "none",
-    flexDirection: "column",
-    outline: "none",
-    fontFamily: theme.fonts.body,
-    paddingTop: panelPaddingVertical,
-    paddingBottom: panelPaddingVertical
-  };
-  if (usePortal) {
-    panelStyle.position = "fixed";
-    panelStyle.top = position?.top ?? 0;
-    panelStyle.left = position?.left ?? 0;
-  }
-  const filteredItems = (0, import_react5.useMemo)(() => {
-    if (!items) return void 0;
-    if (!searchable || !debouncedQuery) return items.slice();
-    const q = debouncedQuery.toLowerCase();
-    const matchedFlags = items.map((item) => {
-      if (item.type === "option") {
-        return String(item.label ?? "").toLowerCase().includes(q);
-      }
-      return false;
+      onClose: closeMenu,
+      triggerRef
     });
-    const result = [];
-    let pendingHeading = null;
-    let lastEmittedWasContent = false;
-    let groupHasOption = false;
-    for (let i = 0; i < items.length; i += 1) {
-      const item = items[i];
-      if (item.type === "heading") {
-        pendingHeading = { item, idx: i };
-        groupHasOption = false;
-      } else if (item.type === "divider") {
-        if (lastEmittedWasContent) {
-          result.push(item);
-          lastEmittedWasContent = false;
-        }
-        pendingHeading = null;
-        groupHasOption = false;
-      } else if (item.type === "option") {
-        if (matchedFlags[i]) {
-          if (pendingHeading) {
-            result.push(pendingHeading.item);
-            pendingHeading = null;
-          }
-          result.push(item);
-          lastEmittedWasContent = true;
-          groupHasOption = true;
-        }
+    (0, import_react6.useEffect)(() => {
+      if (!isOpen) {
+        cellsRef.current = [];
+        setCellsVersion((version) => version + 1);
+        setQuery("");
+        setDebouncedQuery("");
       }
-    }
-    while (result.length > 0 && result[result.length - 1].type === "divider") {
-      result.pop();
-    }
-    void groupHasOption;
-    return result;
-  }, [items, searchable, debouncedQuery]);
-  const effectiveCloseOnSelect = closeOnSelect !== void 0 ? closeOnSelect : type !== "checkbox";
-  const renderPresetItem = (item, key) => {
-    if (item.type === "heading") {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        ContextMenuItem,
-        {
-          ...item,
-          size: item.size ?? size
-        },
-        `h-${key}`
+    }, [isOpen]);
+    (0, import_react6.useEffect)(() => {
+      const timer = setTimeout(
+        () => setDebouncedQuery(query),
+        SEARCH_DEBOUNCE_MS
       );
-    }
-    if (item.type === "divider") {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      return () => clearTimeout(timer);
+    }, [query]);
+    (0, import_react6.useEffect)(() => {
+      if (!isOpen || !trigger) return;
+      const onMouseDown = (event) => {
+        const target = event.target;
+        if (!target || containerRef.current?.contains(target)) return;
+        closeMenu();
+      };
+      const onScroll = () => closeMenu();
+      document.addEventListener("mousedown", onMouseDown);
+      window.addEventListener("scroll", onScroll);
+      return () => {
+        document.removeEventListener("mousedown", onMouseDown);
+        window.removeEventListener("scroll", onScroll);
+      };
+    }, [isOpen, trigger, closeMenu]);
+    (0, import_react6.useLayoutEffect)(() => {
+      if (!isOpen || !panelRef.current) return;
+      const searchbox = panelRef.current.querySelector('[role="searchbox"]');
+      const firstOption = panelRef.current.querySelector(
+        '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
+      );
+      (searchbox ?? firstOption)?.focus();
+    }, [isOpen]);
+    (0, import_react6.useLayoutEffect)(() => {
+      if (!isOpen || !panelRef.current) return;
+      const activeElement = document.activeElement;
+      if (activeElement && panelRef.current.contains(activeElement)) return;
+      panelRef.current.focus();
+    }, [isOpen, cellsVersion]);
+    (0, import_react6.useEffect)(() => {
+      if (isOpen) return;
+      triggerRef.current?.focus();
+    }, [isOpen]);
+    const contextValue = (0, import_react6.useMemo)(
+      () => ({
+        size,
+        menuId,
+        closeMenu,
+        activeIndex,
+        setActiveIndex,
+        registerCell,
+        unregisterCell,
+        getCellIndex,
+        cellsVersion,
+        query,
+        setQuery
+      }),
+      [
+        size,
+        menuId,
+        closeMenu,
+        activeIndex,
+        registerCell,
+        unregisterCell,
+        getCellIndex,
+        cellsVersion,
+        query
+      ]
+    );
+    const renderPresetItem = (item, index) => {
+      if (!isOption(item)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ContextMenuItem,
+          {
+            ...item,
+            themeMode,
+            themeProductContext
+          },
+          `context-menu-item-${index}`
+        );
+      }
+      const leadingControl = item.leadingControl ?? (type === "checkbox" ? "checkbox" : type === "radio" ? "radio" : void 0);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         ContextMenuItem,
         {
           ...item,
-          size: item.size ?? size
+          leadingControl,
+          themeMode,
+          themeProductContext,
+          onSelect: () => {
+            item.onSelect?.();
+            onSelect?.(item);
+            if (shouldCloseOnSelect) closeMenu();
+          }
         },
-        `d-${key}`
+        `context-menu-item-${index}`
       );
-    }
-    const composed = composeItemForPreset(type, item);
-    const originalSelect = composed.onSelect;
-    const wrappedSelect = () => {
-      originalSelect?.();
-      onSelect?.(item);
-      if (effectiveCloseOnSelect) closeMenu();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      ContextMenuItem,
+    const renderedItems = searchable ? filterItems(items, debouncedQuery) : [...items];
+    const renderContent = () => {
+      if (loading || isLoading || type === "loading") {
+        const brandColor = xuiTheme.colors.control.brand.primary.bg;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            padding: 16,
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: 60,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_spinner.Spinner, { size: "md", color: brandColor })
+          }
+        );
+      }
+      if (children) return children;
+      const content = renderedItems.map(renderPresetItem);
+      if (searchable) {
+        content.unshift(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              "data-sticky": "top",
+              style: {
+                position: "sticky",
+                top: 0,
+                zIndex: 1,
+                backgroundColor: xuiTheme.colors.background.secondary
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                ContextMenuItem,
+                {
+                  type: "search",
+                  value: query,
+                  onValueChange: setQuery,
+                  placeholder: "Search",
+                  autoFocus: true,
+                  themeMode,
+                  themeProductContext
+                }
+              )
+            },
+            "context-menu-search"
+          )
+        );
+      }
+      if (content.length > (searchable ? 1 : 0)) return content;
+      return empty ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { padding: 16 }, children: emptyMessage });
+    };
+    const assignPanelRef = (node) => {
+      panelRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const assignTriggerRef = (node) => {
+      triggerRef.current = node;
+    };
+    const triggerNode = trigger && (0, import_react6.isValidElement)(trigger) ? (0, import_react6.cloneElement)(trigger, {
+      ref: assignTriggerRef,
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen ? "true" : "false",
+      onClick: (event) => {
+        trigger.props.onClick?.(event);
+        if (!event.defaultPrevented) toggleMenu();
+      }
+    }) : trigger ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
       {
-        ...composed,
-        size: composed.size ?? size,
-        onSelect: wrappedSelect
-      },
-      `o-${key}`
-    );
-  };
-  const isLoadingState = loading;
-  let bodyContent = null;
-  let isBodyEmpty = false;
-  let searchNode = null;
-  if (isLoadingState) {
-    bodyContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ref: assignTriggerRef,
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "menu",
+        "aria-expanded": isOpen ? "true" : "false",
+        onClick: toggleMenu,
+        children: trigger
+      }
+    ) : null;
+    const positionStyle = position ? {
+      position: "fixed",
+      left: position.x,
+      top: position.y
+    } : trigger ? {
+      position: "fixed",
+      left: positioned?.left ?? 0,
+      top: positioned?.top ?? 0
+    } : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
+        ref: containerRef,
         style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: 16
+          position: trigger || position ? "relative" : void 0,
+          display: trigger ? "inline-block" : void 0
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_spinner.Spinner, { size: size === "xl" ? "lg" : size === "lg" ? "md" : "sm" })
-      }
-    );
-  } else if (children !== void 0 && children !== null) {
-    const childArr = import_react5.default.Children.toArray(children);
-    if (childArr.length === 0) {
-      isBodyEmpty = true;
-    } else {
-      bodyContent = children;
-    }
-  } else if (type && items) {
-    if (searchable) {
-      searchNode = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        ContextMenuItem,
-        {
-          type: "search",
-          value: query,
-          onValueChange: setQuery,
-          size
-        }
-      );
-    }
-    const visible = filteredItems ?? [];
-    const optionCount = visible.filter((i) => i.type === "option").length;
-    if (optionCount === 0) {
-      isBodyEmpty = true;
-    } else {
-      bodyContent = visible.map((it, idx) => renderPresetItem(it, idx));
-    }
-  } else {
-    isBodyEmpty = true;
-  }
-  if (isBodyEmpty) {
-    bodyContent = empty ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EmptyMessage, { color: theme.colors.content.tertiary, children: emptyMessage ?? "No results" });
-  }
-  const hasStickySearch = !!searchNode;
-  const prevOpenRef = (0, import_react5.useRef)(false);
-  const skipFocusRestoreRef = (0, import_react5.useRef)(false);
-  (0, import_react5.useEffect)(() => {
-    const wasOpen = prevOpenRef.current;
-    prevOpenRef.current = open;
-    if (!wasOpen && open) {
-      const timer = setTimeout(() => {
-        const panel2 = panelRef.current;
-        if (!panel2) return;
-        const search = panel2.querySelector("[role='searchbox']");
-        if (search) {
-          search.focus();
-          return;
-        }
-        const firstOption = panel2.querySelector(
-          "[role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']"
-        );
-        if (firstOption) {
-          firstOption.focus();
-          setActiveIndex(-1);
-        } else {
-          panel2.focus();
-        }
-      }, 0);
-      return () => clearTimeout(timer);
-    }
-    if (wasOpen && !open) {
-      if (!skipFocusRestoreRef.current) {
-        triggerRef.current?.focus();
-      }
-      skipFocusRestoreRef.current = false;
-    }
-  }, [open]);
-  (0, import_react5.useEffect)(() => {
-    if (!open || !usePortal || typeof document === "undefined") return;
-    const handlePointerDown = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (panelRef.current?.contains(target)) return;
-      if (triggerRef.current?.contains(target)) return;
-      if (target instanceof Element) {
-        const portals = document.querySelectorAll(
-          "[data-xui-context-menu-portal]"
-        );
-        for (let i = 0; i < portals.length; i += 1) {
-          const portal = portals[i];
-          if (portal.getAttribute("data-xui-context-menu-portal") === menuId && portal.contains(target)) {
-            return;
-          }
-        }
+        children: [
+          triggerNode,
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Box,
+            {
+              ref: assignPanelRef,
+              role: "menu",
+              "aria-label": ariaLabel,
+              "data-testid": dataTestId ?? testID ?? "context-menu",
+              "data-placement": positioned?.placement ?? placement,
+              backgroundColor: xuiTheme.colors.background.secondary,
+              borderColor: xuiTheme.colors.border.secondary,
+              borderWidth: 1,
+              borderRadius,
+              paddingVertical: sizeStyles.paddingVertical,
+              width,
+              minWidth: sizeStyles.minWidth,
+              tabIndex: -1,
+              onKeyDown: keyboard.handleKeyDown,
+              onMouseLeave: () => setActiveIndex(-1),
+              style: {
+                ...positionStyle,
+                ...style,
+                zIndex: 1e3,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                maxHeight,
+                overflowY: "auto",
+                outline: "none"
+              },
+              children: renderContent()
+            }
+          )
+        ]
       }
-      skipFocusRestoreRef.current = true;
-      closeMenu();
-    };
-    document.addEventListener("mousedown", handlePointerDown);
-    return () => document.removeEventListener("mousedown", handlePointerDown);
-  }, [open, usePortal, closeMenu, menuId]);
-  const resolvedPlacement = position?.placement ?? placement;
-  const scrollContainerStyle = {
-    overflowY: "auto",
-    flex: 1,
-    minHeight: 0
-  };
-  const stickyHeaderStyle = {
-    position: "sticky",
-    top: 0,
-    zIndex: 1,
-    // Match the glass panel so options scrolling underneath blur instead of
-    // showing through the translucent header.
-    background: glassBackground,
-    backdropFilter: "blur(12px)",
-    WebkitBackdropFilter: "blur(12px)"
-  };
-  const panel = open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContextMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      ref: panelRef,
-      role: "menu",
-      "aria-label": ariaLabel,
-      "data-testid": testId || testID,
-      "data-placement": usePortal ? resolvedPlacement : void 0,
-      tabIndex: -1,
-      onKeyDown: handleKeyDown,
-      onMouseLeave: () => setActiveIndex(-1),
-      style: panelStyle,
-      children: [
-        hasStickySearch && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-sticky": "top", style: stickyHeaderStyle, children: searchNode }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: scrollContainerStyle, children: bodyContent })
-      ]
-    }
-  ) }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    triggerNode,
-    usePortal ? panel && (0, import_react_dom2.createPortal)(panel, document.body) : panel
-  ] });
-};
-ContextMenu.displayName = "ContextMenu";
-function composeItemForPreset(type, item) {
-  switch (type) {
-    case "checkbox":
-      return { ...item, leadingControl: "checkbox" };
-    case "radio":
-      return { ...item, leadingControl: "radio" };
-    case "list":
-    case "phone":
-    case "status":
-    case "brandLogo":
-    case "avatar":
-    default:
-      return { ...item };
+    ) });
   }
-}
+);
+ContextMenuRoot.displayName = "ContextMenu";
+var ContextMenu = Object.assign(ContextMenuRoot, {
+  Item: ContextMenuItem,
+  Submenu: ContextMenuSubmenu
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ContextMenu,
   ContextMenuContext,
   ContextMenuItem,
+  ContextMenuSubmenu,
   useContextMenu,
   useContextMenuPosition,
   useContextMenuRequired,