@xsolla/xui-context-menu 0.172.2 → 0.173.1

package/web/index.mjs

@@ -1,18 +1,269 @@
 // 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";
-import {
-  useResolvedTheme as useResolvedTheme2,
-  useId as useId2
-} from "@xsolla/xui-core";
+
+// ../../foundation/primitives-web/src/Box.tsx
+import React2 from "react";
+import styled from "styled-components";
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+import React from "react";
+
+// ../../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = React.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React.createElement(
+        Tag,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../../foundation/primitives-web/src/Box.tsx
+import { jsx } from "react/jsx-runtime";
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = styled(FilteredDiv)`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  overflow: ${(props) => props.overflow || "visible"};
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = React2.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    onError,
+    onLoad,
+    type,
+    disabled,
+    id,
+    testID,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          onError,
+          onLoad,
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom,
+            ...props.style
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledBox,
+      {
+        ref,
+        elementType: as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// src/ContextMenu.tsx
+import { useDesignSystem as useDesignSystem2, useId as useId2 } from "@xsolla/xui-core";
 import { Spinner } from "@xsolla/xui-spinner";
 
 // src/ContextMenuContext.tsx
@@ -33,7 +284,7 @@ var useContextMenuRequired = () => {
 };
 
 // src/ContextMenuItem.tsx
-import React, { useEffect, useLayoutEffect, useState } from "react";
+import React3, { useEffect, useLayoutEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   useResolvedTheme,
@@ -43,7 +294,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 +304,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 +360,7 @@ var SubmenuChevron = ({
       width: size,
       height: size
     },
-    children: /* @__PURE__ */ jsx(
+    children: /* @__PURE__ */ jsx2(
       "svg",
       {
         width: size,
@@ -84,7 +368,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 +390,7 @@ var OptionCell = ({
   leadingIcon,
   status,
   iconWrapper,
+  slot,
   slotContent,
   value,
   hint,
@@ -114,12 +399,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);
@@ -131,9 +421,9 @@ var OptionCell = ({
   const [isHovered, setIsHovered] = useState(false);
   const [submenuOpen, setSubmenuOpen] = useState(false);
   const [submenuPos, setSubmenuPos] = useState(null);
-  const optionRef = React.useRef(null);
-  const submenuWrapperRef = React.useRef(null);
-  const closeTimerRef = React.useRef(
+  const optionRef = React3.useRef(null);
+  const submenuWrapperRef = React3.useRef(null);
+  const closeTimerRef = React3.useRef(
     null
   );
   const cancelClose = () => {
@@ -176,7 +466,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,8 +500,8 @@ var OptionCell = ({
       window.removeEventListener("scroll", update, true);
       window.removeEventListener("resize", update);
     };
-  }, [hasSubmenu, submenuOpen]);
-  const onSelectRef = React.useRef(onSelect);
+  });
+  const onSelectRef = React3.useRef(onSelect);
   onSelectRef.current = onSelect;
   useEffect(() => {
     if (!registerCell || !unregisterCell) return;
@@ -204,12 +519,12 @@ var OptionCell = ({
       onSelect: () => onSelectRef.current?.()
     });
   }, [registerCell, id, disabled]);
-  const index = getCellIndex ? getCellIndex(id) : -1;
-  const isActive = ctx ? index >= 0 && ctx.activeIndex === index : false;
+  const index2 = getCellIndex ? getCellIndex(id) : -1;
+  const isActive = ctx ? index2 >= 0 && ctx.activeIndex === index2 : false;
   const inHoverState = isActive || !ctx && isHovered || hasSubmenu && submenuOpen;
   const handleEnter = () => {
     if (disabled) return;
-    if (ctx && index >= 0) ctx.setActiveIndex(index);
+    if (ctx && index2 >= 0) ctx.setActiveIndex(index2);
     if (!ctx) setIsHovered(true);
     if (hasSubmenu) setSubmenuOpen(true);
   };
@@ -219,7 +534,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 +542,9 @@ var OptionCell = ({
       setSubmenuOpen(true);
       return;
     }
+    if (checked !== void 0) {
+      onCheckedChange?.(!checked);
+    }
     onSelect?.();
   };
   const closeSubmenuAndFocus = () => {
@@ -256,6 +574,9 @@ var OptionCell = ({
     }
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
+      if (checked !== void 0) {
+        onCheckedChange?.(!checked);
+      }
       onSelect?.();
     }
   };
@@ -299,13 +620,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 +638,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 +659,7 @@ var OptionCell = ({
         leadingIcon,
         status,
         iconWrapper,
+        slot,
         slotContent,
         /* @__PURE__ */ jsxs(
           "span",
@@ -350,7 +672,7 @@ var OptionCell = ({
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 Typography,
                 {
                   variant: variants.label,
@@ -363,7 +685,7 @@ var OptionCell = ({
                   children: label
                 }
               ),
-              description !== void 0 && /* @__PURE__ */ jsx(
+              description !== void 0 && /* @__PURE__ */ jsx2(
                 Typography,
                 {
                   variant: variants.description,
@@ -383,7 +705,7 @@ var OptionCell = ({
               alignItems: "flex-end"
             },
             children: [
-              value !== void 0 && /* @__PURE__ */ jsx(
+              value !== void 0 && /* @__PURE__ */ jsx2(
                 Typography,
                 {
                   variant: variants.label,
@@ -392,7 +714,7 @@ var OptionCell = ({
                   children: value
                 }
               ),
-              hint !== void 0 && /* @__PURE__ */ jsx(
+              hint !== void 0 && /* @__PURE__ */ jsx2(
                 Typography,
                 {
                   variant: variants.description,
@@ -403,7 +725,7 @@ var OptionCell = ({
             ]
           }
         ),
-        keyboardShortcut && /* @__PURE__ */ jsx(
+        keyboardShortcut && /* @__PURE__ */ jsx2(
           Typography,
           {
             as: "kbd",
@@ -412,7 +734,7 @@ var OptionCell = ({
             children: keyboardShortcut
           }
         ),
-        hasSubmenu && /* @__PURE__ */ jsx(
+        hasSubmenu && /* @__PURE__ */ jsx2(
           SubmenuChevron,
           {
             color: theme.colors.content.tertiary,
@@ -421,7 +743,7 @@ var OptionCell = ({
         ),
         trailingIcon,
         hasSubmenu && submenuOpen && submenu && submenuPos && typeof document !== "undefined" && createPortal(
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "div",
             {
               ref: submenuWrapperRef,
@@ -452,7 +774,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 +806,7 @@ var HeadingCell = ({
         paddingBottom: sizing.itemPaddingVertical
       },
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           Typography,
           {
             variant: variants.headingAccent,
@@ -489,7 +815,7 @@ var HeadingCell = ({
             children: label
           }
         ),
-        description !== void 0 && /* @__PURE__ */ jsx(
+        description !== void 0 && /* @__PURE__ */ jsx2(
           Typography,
           {
             variant: variants.description,
@@ -504,6 +830,7 @@ var HeadingCell = ({
 var SearchCell = ({
   size: propSize,
   value,
+  onChange,
   onValueChange,
   placeholder = "Search",
   autoFocus,
@@ -513,7 +840,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 +856,7 @@ var SearchCell = ({
     registerCell(id, { type: "search" });
     return () => unregisterCell(id);
   }, [registerCell, unregisterCell, id]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       style: {
@@ -546,7 +877,7 @@ var SearchCell = ({
             borderBottom: `1px solid ${theme.colors.border.secondary}`
           },
           children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               Search,
               {
                 variant: "line",
@@ -555,16 +886,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 +921,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 +935,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 +949,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 +1111,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 +1159,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 +1186,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 +1210,7 @@ var useKeyboardNavigation = ({
     },
     [cells]
   );
-  const findPrevOption = useCallback(
+  const findPrevOption = useCallback2(
     (from) => {
       const len = cells.length;
       if (len === 0) return -1;
@@ -747,7 +1222,7 @@ var useKeyboardNavigation = ({
     },
     [cells]
   );
-  const handleKeyDown = useCallback(
+  const handleKeyDown = useCallback2(
     (event) => {
       if (!isOpen) return;
       switch (event.key) {
@@ -817,458 +1292,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 index2 = cellsRef.current.findIndex((cell) => cell.id === id);
+      if (index2 >= 0) {
+        cellsRef.current.splice(index2, 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, index2) => {
+      if (!isOption(item)) {
+        return /* @__PURE__ */ jsx4(
+          ContextMenuItem,
+          {
+            ...item,
+            themeMode,
+            themeProductContext
+          },
+          `context-menu-item-${index2}`
+        );
+      }
+      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-${index2}`
       );
-    }
-    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,