@xsolla/xui-context-menu 0.172.2 → 0.173.1

package/native/index.mjs

@@ -1,18 +1,196 @@
 // src/ContextMenu.tsx
-import React2, {
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useMemo,
-  useRef,
-  useState as useState3,
+import {
+  cloneElement,
+  forwardRef,
   isValidElement,
-  cloneElement
+  useCallback as useCallback3,
+  useEffect as useEffect4,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo,
+  useRef as useRef2,
+  useState as useState4
 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+
+// ../../foundation/primitives-native/src/Box.tsx
 import {
-  useResolvedTheme as useResolvedTheme2,
-  useId as useId2
-} from "@xsolla/xui-core";
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "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__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// src/ContextMenu.tsx
+import { useDesignSystem as useDesignSystem2, useId as useId2 } from "@xsolla/xui-core";
 import { Spinner } from "@xsolla/xui-spinner";
 
 // src/ContextMenuContext.tsx
@@ -43,7 +221,7 @@ import { Typography } from "@xsolla/xui-typography";
 import { Checkbox } from "@xsolla/xui-checkbox";
 import { Radio } from "@xsolla/xui-radio";
 import { Search } from "@xsolla/xui-icons-base";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var sizeToVariants = {
   xl: { label: "bodyLg", description: "bodyLg", headingAccent: "bodyLgAccent" },
   lg: { label: "bodyLg", description: "bodyMd", headingAccent: "bodyMdAccent" },
@@ -53,18 +231,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__ */ jsx(OptionCell, { ...props });
-  if (props.type === "heading") return /* @__PURE__ */ jsx(HeadingCell, { ...props });
-  if (props.type === "divider") return /* @__PURE__ */ jsx(DividerCell, { ...props });
-  if (props.type === "search") return /* @__PURE__ */ jsx(SearchCell, { ...props });
+  if (props.type === "option") return /* @__PURE__ */ jsx2(OptionCell, { ...props });
+  if (props.type === "heading") return /* @__PURE__ */ jsx2(HeadingCell, { ...props });
+  if (props.type === "divider") return /* @__PURE__ */ jsx2(DividerCell, { ...props });
+  if (props.type === "search") return /* @__PURE__ */ jsx2(SearchCell, { ...props });
   return null;
 };
 ContextMenuItem.displayName = "ContextMenuItem";
 var SubmenuChevron = ({
   color,
   size
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx2(
   "span",
   {
     "data-testid": "ctxmenu-submenu-chevron",
@@ -76,7 +287,7 @@ var SubmenuChevron = ({
       width: size,
       height: size
     },
-    children: /* @__PURE__ */ jsx(
+    children: /* @__PURE__ */ jsx2(
       "svg",
       {
         width: size,
@@ -84,7 +295,7 @@ var SubmenuChevron = ({
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx2(
           "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",
@@ -106,6 +317,7 @@ var OptionCell = ({
   leadingIcon,
   status,
   iconWrapper,
+  slot,
   slotContent,
   value,
   hint,
@@ -114,12 +326,17 @@ var OptionCell = ({
   hasSubmenu,
   submenu,
   onSelect,
+  onCheckedChange,
   testID,
   themeMode,
   themeProductContext,
   "data-testid": testId
 }) => {
-  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const { theme: rawTheme } = useResolvedTheme({
+    themeMode,
+    themeProductContext
+  });
+  const theme = rawTheme;
   const ctx = useContextMenu();
   const size = propSize ?? ctx?.size ?? "md";
   const sizing = theme.sizing.contextMenu(size);
@@ -176,7 +393,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);
@@ -185,7 +427,7 @@ var OptionCell = ({
       window.removeEventListener("scroll", update, true);
       window.removeEventListener("resize", update);
     };
-  }, [hasSubmenu, submenuOpen]);
+  });
   const onSelectRef = React.useRef(onSelect);
   onSelectRef.current = onSelect;
   useEffect(() => {
@@ -219,7 +461,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;
@@ -227,6 +469,9 @@ var OptionCell = ({
       setSubmenuOpen(true);
       return;
     }
+    if (checked !== void 0) {
+      onCheckedChange?.(!checked);
+    }
     onSelect?.();
   };
   const closeSubmenuAndFocus = () => {
@@ -256,6 +501,9 @@ var OptionCell = ({
     }
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
+      if (checked !== void 0) {
+        onCheckedChange?.(!checked);
+      }
       onSelect?.();
     }
   };
@@ -299,13 +547,13 @@ var OptionCell = ({
         outline: "none"
       },
       children: [
-        leadingControl === "checkbox" && /* @__PURE__ */ jsx(
+        leadingControl === "checkbox" && /* @__PURE__ */ jsx2(
           "span",
           {
             "data-testid": "ctxmenu-leading-checkbox",
             "aria-hidden": "true",
             style: { pointerEvents: "none", display: "inline-flex" },
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx2(
               Checkbox,
               {
                 size,
@@ -317,13 +565,13 @@ var OptionCell = ({
             )
           }
         ),
-        leadingControl === "radio" && /* @__PURE__ */ jsx(
+        leadingControl === "radio" && /* @__PURE__ */ jsx2(
           "span",
           {
             "data-testid": "ctxmenu-leading-radio",
             "aria-hidden": "true",
             style: { pointerEvents: "none", display: "inline-flex" },
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx2(
               Radio,
               {
                 size,
@@ -338,6 +586,7 @@ var OptionCell = ({
         leadingIcon,
         status,
         iconWrapper,
+        slot,
         slotContent,
         /* @__PURE__ */ jsxs(
           "span",
@@ -350,7 +599,7 @@ var OptionCell = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 Typography,
                 {
                   variant: variants.label,
@@ -363,7 +612,7 @@ var OptionCell = ({
                   children: label
                 }
               ),
-              description !== void 0 && /* @__PURE__ */ jsx(
+              description !== void 0 && /* @__PURE__ */ jsx2(
                 Typography,
                 {
                   variant: variants.description,
@@ -383,7 +632,7 @@ var OptionCell = ({
               alignItems: "flex-end"
             },
             children: [
-              value !== void 0 && /* @__PURE__ */ jsx(
+              value !== void 0 && /* @__PURE__ */ jsx2(
                 Typography,
                 {
                   variant: variants.label,
@@ -392,7 +641,7 @@ var OptionCell = ({
                   children: value
                 }
               ),
-              hint !== void 0 && /* @__PURE__ */ jsx(
+              hint !== void 0 && /* @__PURE__ */ jsx2(
                 Typography,
                 {
                   variant: variants.description,
@@ -403,7 +652,7 @@ var OptionCell = ({
             ]
           }
         ),
-        keyboardShortcut && /* @__PURE__ */ jsx(
+        keyboardShortcut && /* @__PURE__ */ jsx2(
           Typography,
           {
             as: "kbd",
@@ -412,7 +661,7 @@ var OptionCell = ({
             children: keyboardShortcut
           }
         ),
-        hasSubmenu && /* @__PURE__ */ jsx(
+        hasSubmenu && /* @__PURE__ */ jsx2(
           SubmenuChevron,
           {
             color: theme.colors.content.tertiary,
@@ -421,7 +670,7 @@ var OptionCell = ({
         ),
         trailingIcon,
         hasSubmenu && submenuOpen && submenu && submenuPos && typeof document !== "undefined" && createPortal(
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "div",
             {
               ref: submenuWrapperRef,
@@ -452,7 +701,11 @@ var HeadingCell = ({
   themeProductContext,
   "data-testid": testId
 }) => {
-  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const { theme: rawTheme } = useResolvedTheme({
+    themeMode,
+    themeProductContext
+  });
+  const theme = rawTheme;
   const ctx = useContextMenu();
   const size = propSize ?? ctx?.size ?? "md";
   const sizing = theme.sizing.contextMenu(size);
@@ -480,7 +733,7 @@ var HeadingCell = ({
         paddingBottom: sizing.itemPaddingVertical
       },
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           Typography,
           {
             variant: variants.headingAccent,
@@ -489,7 +742,7 @@ var HeadingCell = ({
             children: label
           }
         ),
-        description !== void 0 && /* @__PURE__ */ jsx(
+        description !== void 0 && /* @__PURE__ */ jsx2(
           Typography,
           {
             variant: variants.description,
@@ -504,6 +757,7 @@ var HeadingCell = ({
 var SearchCell = ({
   size: propSize,
   value,
+  onChange,
   onValueChange,
   placeholder = "Search",
   autoFocus,
@@ -513,7 +767,11 @@ var SearchCell = ({
   themeMode,
   themeProductContext
 }) => {
-  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const { theme: rawTheme } = useResolvedTheme({
+    themeMode,
+    themeProductContext
+  });
+  const theme = rawTheme;
   const ctx = useContextMenu();
   const size = propSize ?? ctx?.size ?? "md";
   const sizing = theme.sizing.contextMenu(size);
@@ -525,7 +783,7 @@ var SearchCell = ({
     registerCell(id, { type: "search" });
     return () => unregisterCell(id);
   }, [registerCell, unregisterCell, id]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       style: {
@@ -546,7 +804,7 @@ var SearchCell = ({
             borderBottom: `1px solid ${theme.colors.border.secondary}`
           },
           children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               Search,
               {
                 variant: "line",
@@ -555,16 +813,19 @@ var SearchCell = ({
                 "aria-hidden": true
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "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,
@@ -587,7 +848,11 @@ var SearchCell = ({
   );
 };
 var DividerCell = ({ themeMode, themeProductContext, "data-testid": testId }) => {
-  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const { theme: rawTheme } = useResolvedTheme({
+    themeMode,
+    themeProductContext
+  });
+  const theme = rawTheme;
   const ctx = useContextMenu();
   const id = useId();
   const registerCell = ctx?.registerCell;
@@ -597,7 +862,7 @@ var DividerCell = ({ themeMode, themeProductContext, "data-testid": testId }) =>
     registerCell(id, { type: "divider" });
     return () => unregisterCell(id);
   }, [registerCell, unregisterCell, id]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       role: "separator",
@@ -611,8 +876,156 @@ var DividerCell = ({ themeMode, themeProductContext, "data-testid": testId }) =>
   );
 };
 
+// src/ContextMenuSubmenu.tsx
+import {
+  useState as useState2,
+  useRef,
+  useEffect as useEffect2,
+  useLayoutEffect as useLayoutEffect2,
+  useCallback
+} from "react";
+import { useDesignSystem } from "@xsolla/xui-core";
+import { jsx as jsx3, jsxs as jsxs2 } from "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 } = 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] = useState2(false);
+  const [visible, setVisible] = useState2(false);
+  const [openLeft, setOpenLeft] = useState2(false);
+  const [topOffset, setTopOffset] = useState2(0);
+  const triggerRef = useRef(null);
+  const submenuRef = useRef(null);
+  const openTimerRef = useRef(null);
+  const closeTimerRef = useRef(null);
+  const clearTimers = useCallback(() => {
+    if (openTimerRef.current) clearTimeout(openTimerRef.current);
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+  }, []);
+  const calculatePlacement = 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]);
+  useLayoutEffect2(() => {
+    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]);
+  useEffect2(() => {
+    if (!isOpen) {
+      setVisible(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(raf);
+  }, [isOpen]);
+  useEffect2(() => () => 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__ */ jsxs2(
+    "div",
+    {
+      ref: triggerRef,
+      style: { position: "relative" },
+      onMouseEnter: handleTriggerEnter,
+      onMouseLeave: handleTriggerLeave,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx3(
+          ContextMenuItem,
+          {
+            type: "option",
+            label,
+            leadingIcon: icon,
+            disabled,
+            hasSubmenu: true,
+            size,
+            "data-testid": `${testId}-trigger`
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx3(
+          "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__ */ jsx3(
+              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
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 var splitPlacement = (placement) => {
   const [vertical, horizontal] = placement.split("-");
   return { vertical, horizontal };
@@ -625,8 +1038,8 @@ var useContextMenuPosition = ({
   placement = "bottom-start",
   offset = 4
 }) => {
-  const [resolved, setResolved] = useState2();
-  useEffect2(() => {
+  const [resolved, setResolved] = useState3();
+  useEffect3(() => {
     if (!isOpen) {
       setResolved(void 0);
       return;
@@ -673,30 +1086,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
-import { useCallback } from "react";
+import { useCallback as useCallback2 } from "react";
 var isNavigableOption = (meta) => meta.type === "option" && !meta.disabled;
 var isTextInputTarget = (target) => {
   if (!(target instanceof HTMLElement)) return false;
@@ -711,19 +1113,19 @@ var useKeyboardNavigation = ({
   onClose,
   triggerRef
 }) => {
-  const findFirstOption = useCallback(() => {
+  const findFirstOption = useCallback2(() => {
     for (let i = 0; i < cells.length; i += 1) {
       if (isNavigableOption(cells[i].meta)) return i;
     }
     return -1;
   }, [cells]);
-  const findLastOption = useCallback(() => {
+  const findLastOption = useCallback2(() => {
     for (let i = cells.length - 1; i >= 0; i -= 1) {
       if (isNavigableOption(cells[i].meta)) return i;
     }
     return -1;
   }, [cells]);
-  const findNextOption = useCallback(
+  const findNextOption = useCallback2(
     (from) => {
       const len = cells.length;
       if (len === 0) return -1;
@@ -735,7 +1137,7 @@ var useKeyboardNavigation = ({
     },
     [cells]
   );
-  const findPrevOption = useCallback(
+  const findPrevOption = useCallback2(
     (from) => {
       const len = cells.length;
       if (len === 0) return -1;
@@ -747,7 +1149,7 @@ var useKeyboardNavigation = ({
     },
     [cells]
   );
-  const handleKeyDown = useCallback(
+  const handleKeyDown = useCallback2(
     (event) => {
       if (!isOpen) return;
       switch (event.key) {
@@ -817,458 +1219,382 @@ var useKeyboardNavigation = ({
 };
 
 // src/ContextMenu.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_EMPTY_MESSAGE = "No results";
 var SEARCH_DEBOUNCE_MS = 200;
-var EmptyMessage = ({
-  children,
-  color
-}) => /* @__PURE__ */ jsx2(
-  "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 (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 = 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 } = useResolvedTheme2({ themeMode, themeProductContext });
-  const isControlled = isOpen !== void 0;
-  const [internalOpen, setInternalOpen] = useState3(false);
-  const open = isControlled ? !!isOpen : internalOpen;
-  const setOpen = useCallback2(
-    (next) => {
-      if (!isControlled) setInternalOpen(next);
-      onOpenChange?.(next);
-    },
-    [isControlled, onOpenChange]
-  );
-  const [activeIndex, setActiveIndex] = useState3(-1);
-  const cellsRef = useRef([]);
-  const [cellsVersion, setCellsVersion] = useState3(0);
-  const triggerRef = useRef(null);
-  const panelRef = useRef(null);
-  const menuId = useId2();
-  const [query, setQuery] = useState3("");
-  const [debouncedQuery, setDebouncedQuery] = useState3("");
-  const debounceTimerRef = useRef(null);
-  useEffect3(() => {
-    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-    debounceTimerRef.current = setTimeout(() => {
-      setDebouncedQuery(query);
-    }, SEARCH_DEBOUNCE_MS);
-    return () => {
-      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-    };
-  }, [query]);
-  const closeMenu = useCallback2(() => {
-    setOpen(false);
-    setActiveIndex(-1);
-  }, [setOpen]);
-  const registerCell = useCallback2((id, meta) => {
-    const existing = cellsRef.current.findIndex((c) => c.id === id);
-    if (existing === -1) {
+    themeProductContext,
+    style
+  }, ref) => {
+    const { theme } = useDesignSystem2();
+    const xuiTheme = theme;
+    const menuId = useId2();
+    const [internalIsOpen, setInternalIsOpen] = useState4(false);
+    const [activeIndex, setActiveIndex] = useState4(-1);
+    const [cellsVersion, setCellsVersion] = useState4(0);
+    const [query, setQuery] = useState4("");
+    const [debouncedQuery, setDebouncedQuery] = useState4("");
+    const containerRef = useRef2(null);
+    const triggerRef = useRef2(null);
+    const panelRef = useRef2(null);
+    const cellsRef = useRef2([]);
+    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 = useCallback3(
+      (nextOpen) => {
+        if (propIsOpen === void 0) setInternalIsOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+        if (!nextOpen) setActiveIndex(-1);
+      },
+      [propIsOpen, onOpenChange]
+    );
+    const closeMenu = useCallback3(() => {
+      setOpen(false);
+    }, [setOpen]);
+    const toggleMenu = useCallback3(() => {
+      setOpen(!isOpen);
+    }, [isOpen, setOpen]);
+    const registerCell = useCallback3((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 = useCallback2((id) => {
-    const idx = cellsRef.current.findIndex((c) => c.id === id);
-    if (idx !== -1) {
-      cellsRef.current.splice(idx, 1);
-      setCellsVersion((v) => v + 1);
-    }
-  }, []);
-  const getCellIndex = useCallback2(
-    (id) => cellsRef.current.findIndex((c) => c.id === id),
-    []
-  );
-  const ctx = useMemo(
-    () => ({
-      size,
-      menuId,
-      closeMenu,
-      registerCell,
-      unregisterCell,
-      getCellIndex,
-      cellsVersion,
+    }, []);
+    const unregisterCell = useCallback3((id) => {
+      const index = cellsRef.current.findIndex((cell) => cell.id === id);
+      if (index >= 0) {
+        cellsRef.current.splice(index, 1);
+        setCellsVersion((version) => version + 1);
+      }
+    }, []);
+    const getCellIndex = useCallback3((id) => {
+      return cellsRef.current.findIndex((cell) => cell.id === id);
+    }, []);
+    const cells = useMemo(() => [...cellsRef.current], [cellsVersion]);
+    const keyboard = useKeyboardNavigation({
+      isOpen,
+      cells,
       activeIndex,
       setActiveIndex,
-      query,
-      setQuery
-    }),
-    [
-      size,
-      menuId,
-      closeMenu,
-      registerCell,
-      unregisterCell,
-      getCellIndex,
-      cellsVersion,
-      activeIndex,
-      query
-    ]
-  );
-  const triggerNode = useMemo(() => {
-    if (!trigger) return null;
-    const inner = isValidElement(trigger) ? cloneElement(
-      trigger,
-      {
-        "aria-haspopup": "menu",
-        "aria-expanded": open ? "true" : "false"
-      }
-    ) : trigger;
-    return /* @__PURE__ */ jsx2(
-      "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 = 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 = 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;
-        }
+    useEffect4(() => {
+      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__ */ jsx2(
-        ContextMenuItem,
-        {
-          ...item,
-          size: item.size ?? size
-        },
-        `h-${key}`
+    }, [isOpen]);
+    useEffect4(() => {
+      const timer = setTimeout(
+        () => setDebouncedQuery(query),
+        SEARCH_DEBOUNCE_MS
       );
-    }
-    if (item.type === "divider") {
-      return /* @__PURE__ */ jsx2(
+      return () => clearTimeout(timer);
+    }, [query]);
+    useEffect4(() => {
+      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]);
+    useLayoutEffect3(() => {
+      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]);
+    useLayoutEffect3(() => {
+      if (!isOpen || !panelRef.current) return;
+      const activeElement = document.activeElement;
+      if (activeElement && panelRef.current.contains(activeElement)) return;
+      panelRef.current.focus();
+    }, [isOpen, cellsVersion]);
+    useEffect4(() => {
+      if (isOpen) return;
+      triggerRef.current?.focus();
+    }, [isOpen]);
+    const contextValue = 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__ */ jsx4(
+          ContextMenuItem,
+          {
+            ...item,
+            themeMode,
+            themeProductContext
+          },
+          `context-menu-item-${index}`
+        );
+      }
+      const leadingControl = item.leadingControl ?? (type === "checkbox" ? "checkbox" : type === "radio" ? "radio" : void 0);
+      return /* @__PURE__ */ jsx4(
         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__ */ jsx2(
-      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__ */ jsx4(
+          Box,
+          {
+            padding: 16,
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: 60,
+            children: /* @__PURE__ */ jsx4(Spinner, { size: "md", color: brandColor })
+          }
+        );
+      }
+      if (children) return children;
+      const content = renderedItems.map(renderPresetItem);
+      if (searchable) {
+        content.unshift(
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              "data-sticky": "top",
+              style: {
+                position: "sticky",
+                top: 0,
+                zIndex: 1,
+                backgroundColor: xuiTheme.colors.background.secondary
+              },
+              children: /* @__PURE__ */ jsx4(
+                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__ */ jsx4("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 && isValidElement(trigger) ? cloneElement(trigger, {
+      ref: assignTriggerRef,
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen ? "true" : "false",
+      onClick: (event) => {
+        trigger.props.onClick?.(event);
+        if (!event.defaultPrevented) toggleMenu();
+      }
+    }) : trigger ? /* @__PURE__ */ jsx4(
+      "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__ */ jsx2(
+        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__ */ jsx4(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3(
       "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__ */ jsx2(Spinner, { size: size === "xl" ? "lg" : size === "lg" ? "md" : "sm" })
-      }
-    );
-  } else if (children !== void 0 && children !== null) {
-    const childArr = React2.Children.toArray(children);
-    if (childArr.length === 0) {
-      isBodyEmpty = true;
-    } else {
-      bodyContent = children;
-    }
-  } else if (type && items) {
-    if (searchable) {
-      searchNode = /* @__PURE__ */ jsx2(
-        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__ */ jsx2(EmptyMessage, { color: theme.colors.content.tertiary, children: emptyMessage ?? "No results" });
-  }
-  const hasStickySearch = !!searchNode;
-  const prevOpenRef = useRef(false);
-  const skipFocusRestoreRef = useRef(false);
-  useEffect3(() => {
-    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]);
-  useEffect3(() => {
-    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__ */ jsx4(
+            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__ */ jsx2(ContextMenuContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs2(
-    "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__ */ jsx2("div", { "data-sticky": "top", style: stickyHeaderStyle, children: searchNode }),
-        /* @__PURE__ */ jsx2("div", { style: scrollContainerStyle, children: bodyContent })
-      ]
-    }
-  ) }) : null;
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    triggerNode,
-    usePortal ? panel && createPortal2(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
+});
 export {
   ContextMenu,
   ContextMenuContext,
   ContextMenuItem,
+  ContextMenuSubmenu,
   useContextMenu,
   useContextMenuPosition,
   useContextMenuRequired,