@xsolla/xui-context-menu 0.133.0 → 0.134.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-context-menu",
-  "version": "0.133.0",
+  "version": "0.134.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,13 +13,13 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-checkbox": "0.133.0",
-    "@xsolla/xui-core": "0.133.0",
-    "@xsolla/xui-divider": "0.133.0",
-    "@xsolla/xui-icons": "0.133.0",
-    "@xsolla/xui-primitives-core": "0.133.0",
-    "@xsolla/xui-radio": "0.133.0",
-    "@xsolla/xui-spinner": "0.133.0"
+    "@xsolla/xui-checkbox": "0.134.0",
+    "@xsolla/xui-core": "0.134.0",
+    "@xsolla/xui-divider": "0.134.0",
+    "@xsolla/xui-icons": "0.134.0",
+    "@xsolla/xui-primitives-core": "0.134.0",
+    "@xsolla/xui-radio": "0.134.0",
+    "@xsolla/xui-spinner": "0.134.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -47,120 +47,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/ContextMenu.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // ../primitives-web/src/Box.tsx
-var import_react2 = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-
-// ../primitives-web/src/filterDOMProps.ts
 var import_react = __toESM(require("react"));
-var NON_HTML_PROPS = /* @__PURE__ */ new Set([
-  // BoxProps — layout & styling
-  "backgroundColor",
-  "borderColor",
-  "borderWidth",
-  "borderBottomWidth",
-  "borderBottomColor",
-  "borderTopWidth",
-  "borderTopColor",
-  "borderLeftWidth",
-  "borderLeftColor",
-  "borderRightWidth",
-  "borderRightColor",
-  "borderRadius",
-  "borderStyle",
-  "flexDirection",
-  "flexWrap",
-  "alignItems",
-  "justifyContent",
-  "alignSelf",
-  "flex",
-  "flexShrink",
-  "gap",
-  "position",
-  "top",
-  "bottom",
-  "left",
-  "right",
-  "outline",
-  "overflow",
-  "overflowX",
-  "overflowY",
-  "zIndex",
-  "cursor",
-  "padding",
-  "paddingHorizontal",
-  "paddingVertical",
-  "paddingTop",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-  "margin",
-  "marginTop",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-  "minWidth",
-  "minHeight",
-  "maxWidth",
-  "maxHeight",
-  "hoverStyle",
-  "pressStyle",
-  "focusStyle",
-  "outlineColor",
-  "outlineWidth",
-  "outlineOffset",
-  "outlineStyle",
-  // BoxProps — RN-only
-  "onPress",
-  "onLayout",
-  "onMoveShouldSetResponder",
-  "onResponderGrant",
-  "onResponderMove",
-  "onResponderRelease",
-  "onResponderTerminate",
-  "testID",
-  // Box — custom element type
-  "elementType",
-  // TextProps
-  "fontSize",
-  "fontWeight",
-  "fontFamily",
-  "lineHeight",
-  "whiteSpace",
-  "textAlign",
-  "textDecoration",
-  "numberOfLines",
-  "letterSpacing",
-  "textTransform",
-  // SpinnerProps
-  "strokeWidth",
-  // DividerProps
-  "vertical",
-  "dashStroke"
-]);
-function createFilteredElement(defaultTag) {
-  const Component = import_react.default.forwardRef(
-    ({ children, elementType, ...props }, ref) => {
-      const Tag = elementType || defaultTag;
-      const htmlProps = {};
-      for (const key of Object.keys(props)) {
-        if (!NON_HTML_PROPS.has(key)) {
-          htmlProps[key] = props[key];
-        }
-      }
-      return import_react.default.createElement(Tag, { ref, ...htmlProps }, children);
-    }
-  );
-  Component.displayName = `Filtered(${defaultTag})`;
-  return Component;
-}
-
-// ../primitives-web/src/Box.tsx
+var import_styled_components = __toESM(require("styled-components"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var FilteredDiv = createFilteredElement("div");
-var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
+var StyledBox = import_styled_components.default.div`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -247,7 +140,7 @@ var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box = import_react2.default.forwardRef(
+var Box = import_react.default.forwardRef(
   ({
     children,
     onPress,
@@ -299,7 +192,7 @@ var Box = import_react2.default.forwardRef(
       StyledBox,
       {
         ref,
-        elementType: as,
+        as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -330,8 +223,7 @@ Box.displayName = "Box";
 // ../primitives-web/src/Text.tsx
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var FilteredSpan = createFilteredElement("span");
-var StyledText = (0, import_styled_components2.default)(FilteredSpan)`
+var StyledText = import_styled_components2.default.span`
   color: ${(props) => props.color || "inherit"};
   font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
   font-weight: ${(props) => props.fontWeight || "normal"};
@@ -364,8 +256,7 @@ var Text = ({
 // ../primitives-web/src/Icon.tsx
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var FilteredDiv2 = createFilteredElement("div");
-var StyledIcon = (0, import_styled_components3.default)(FilteredDiv2)`
+var StyledIcon = import_styled_components3.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -385,7 +276,7 @@ var Icon = ({ children, ...props }) => {
 };
 
 // ../primitives-web/src/Input.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var StyledInput = import_styled_components4.default.input`
@@ -419,7 +310,7 @@ var StyledInput = import_styled_components4.default.input`
     -webkit-text-fill-color: ${(props) => props.color || "inherit"} !important;
   }
 `;
-var InputPrimitive = (0, import_react3.forwardRef)(
+var InputPrimitive = (0, import_react2.forwardRef)(
   ({
     value,
     placeholder,
@@ -496,14 +387,14 @@ var import_xui_core7 = require("@xsolla/xui-core");
 var import_xui_spinner = require("@xsolla/xui-spinner");
 
 // src/ContextMenuContext.tsx
-var import_react4 = require("react");
-var ContextMenuContext = (0, import_react4.createContext)(void 0);
+var import_react3 = require("react");
+var ContextMenuContext = (0, import_react3.createContext)(void 0);
 var useContextMenu = () => {
-  const context = (0, import_react4.useContext)(ContextMenuContext);
+  const context = (0, import_react3.useContext)(ContextMenuContext);
   return context;
 };
 var useContextMenuRequired = () => {
-  const context = (0, import_react4.useContext)(ContextMenuContext);
+  const context = (0, import_react3.useContext)(ContextMenuContext);
   if (!context) {
     throw new Error(
       "useContextMenuRequired must be used within a ContextMenu component"
@@ -513,11 +404,11 @@ var useContextMenuRequired = () => {
 };
 
 // src/ContextMenuItem.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_xui_core = require("@xsolla/xui-core");
 var import_xui_icons = require("@xsolla/xui-icons");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var ContextMenuItem = (0, import_react5.forwardRef)(
+var ContextMenuItem = (0, import_react4.forwardRef)(
   ({
     children,
     description,
@@ -538,10 +429,10 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    const itemRef = (0, import_react5.useRef)(null);
+    const itemRef = (0, import_react4.useRef)(null);
     const brandColors = theme.colors.control.brand.primary;
     const contentColors = theme.colors.content;
-    (0, import_react5.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       if (context && !disabled) {
         const id = typeof children === "string" ? children : String(Math.random());
         context.registerItem(id);
@@ -679,7 +570,7 @@ var ContextMenuItem = (0, import_react5.forwardRef)(
 ContextMenuItem.displayName = "ContextMenuItem";
 
 // src/ContextMenuCheckboxItem.tsx
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_xui_core2 = require("@xsolla/xui-core");
 var import_xui_icons2 = require("@xsolla/xui-icons");
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -754,7 +645,7 @@ var CheckboxIndicator = ({
     }
   );
 };
-var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
+var ContextMenuCheckboxItem = (0, import_react5.forwardRef)(
   ({
     children,
     description,
@@ -774,8 +665,8 @@ var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    const itemRef = (0, import_react6.useRef)(null);
-    (0, import_react6.useEffect)(() => {
+    const itemRef = (0, import_react5.useRef)(null);
+    (0, import_react5.useEffect)(() => {
       if (context && !disabled) {
         const id = typeof children === "string" ? children : String(Math.random());
         context.registerItem(id);
@@ -888,11 +779,11 @@ var ContextMenuCheckboxItem = (0, import_react6.forwardRef)(
 ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
 
 // src/ContextMenuRadioGroup.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react7.createContext)(null);
-var useRadioGroup = () => (0, import_react7.useContext)(RadioGroupContext);
-var ContextMenuRadioGroup = (0, import_react7.forwardRef)(
+var RadioGroupContext = (0, import_react6.createContext)(null);
+var useRadioGroup = () => (0, import_react6.useContext)(RadioGroupContext);
+var ContextMenuRadioGroup = (0, import_react6.forwardRef)(
   ({
     children,
     value,
@@ -905,7 +796,7 @@ var ContextMenuRadioGroup = (0, import_react7.forwardRef)(
 ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
 
 // src/ContextMenuRadioItem.tsx
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var radioSizeMap = {
@@ -971,7 +862,7 @@ var RadioIndicator = ({
     }
   );
 };
-var ContextMenuRadioItem = (0, import_react8.forwardRef)(
+var ContextMenuRadioItem = (0, import_react7.forwardRef)(
   ({
     children,
     description,
@@ -988,9 +879,9 @@ var ContextMenuRadioItem = (0, import_react8.forwardRef)(
     const radioGroup = useRadioGroup();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    const itemRef = (0, import_react8.useRef)(null);
+    const itemRef = (0, import_react7.useRef)(null);
     const checked = radioGroup?.value === value;
-    (0, import_react8.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (context && !disabled) {
         const id = typeof children === "string" ? children : String(Math.random());
         context.registerItem(id);
@@ -1099,10 +990,10 @@ var ContextMenuRadioItem = (0, import_react8.forwardRef)(
 ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
 
 // src/ContextMenuGroup.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_xui_core4 = require("@xsolla/xui-core");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var ContextMenuGroup = (0, import_react9.forwardRef)(
+var ContextMenuGroup = (0, import_react8.forwardRef)(
   ({
     label,
     description,
@@ -1179,7 +1070,7 @@ var ContextMenuSeparator = ({
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
 
 // src/ContextMenuSearch.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_xui_core6 = require("@xsolla/xui-core");
 
 // ../icons-base/dist/web/index.mjs
@@ -1620,7 +1511,7 @@ var Search = (props) => /* @__PURE__ */ (0, import_jsx_runtime384.jsx)(BaseIcon,
 // src/ContextMenuSearch.tsx
 var import_xui_divider = require("@xsolla/xui-divider");
 var import_jsx_runtime398 = require("react/jsx-runtime");
-var ContextMenuSearch = (0, import_react10.forwardRef)(
+var ContextMenuSearch = (0, import_react9.forwardRef)(
   ({
     value,
     onChange,
@@ -1636,14 +1527,14 @@ var ContextMenuSearch = (0, import_react10.forwardRef)(
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
-    const inputRef = (0, import_react10.useRef)(null);
+    const inputRef = (0, import_react9.useRef)(null);
     const inputColors = theme.colors.control.input;
-    import_react10.default.useImperativeHandle(
+    import_react9.default.useImperativeHandle(
       ref,
       () => inputRef.current,
       []
     );
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (autoFocus && inputRef.current) {
         setTimeout(() => {
           inputRef.current?.focus();
@@ -1707,7 +1598,7 @@ ContextMenuSearch.displayName = "ContextMenuSearch";
 
 // src/ContextMenu.tsx
 var import_jsx_runtime399 = require("react/jsx-runtime");
-var ContextMenuRoot = (0, import_react11.forwardRef)(
+var ContextMenuRoot = (0, import_react10.forwardRef)(
   ({
     children,
     list,
@@ -1729,21 +1620,21 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme } = (0, import_xui_core7.useResolvedTheme)({ themeMode, themeProductContext });
-    const [internalIsOpen, setInternalIsOpen] = (0, import_react11.useState)(false);
-    const [activeIndex, setActiveIndex] = (0, import_react11.useState)(-1);
-    const containerRef = (0, import_react11.useRef)(null);
-    const menuRef = (0, import_react11.useRef)(null);
-    const itemsRef = (0, import_react11.useRef)([]);
+    const [internalIsOpen, setInternalIsOpen] = (0, import_react10.useState)(false);
+    const [activeIndex, setActiveIndex] = (0, import_react10.useState)(-1);
+    const containerRef = (0, import_react10.useRef)(null);
+    const menuRef = (0, import_react10.useRef)(null);
+    const itemsRef = (0, import_react10.useRef)([]);
     const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
     const sizeStyles = theme.sizing.contextMenu(size);
-    const closeMenu = (0, import_react11.useCallback)(() => {
+    const closeMenu = (0, import_react10.useCallback)(() => {
       if (propIsOpen === void 0) {
         setInternalIsOpen(false);
       }
       onOpenChange?.(false);
       setActiveIndex(-1);
     }, [propIsOpen, onOpenChange]);
-    const toggleMenu = (0, import_react11.useCallback)(() => {
+    const toggleMenu = (0, import_react10.useCallback)(() => {
       const nextOpen = !isOpen;
       if (propIsOpen === void 0) {
         setInternalIsOpen(nextOpen);
@@ -1753,7 +1644,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
         setActiveIndex(-1);
       }
     }, [isOpen, propIsOpen, onOpenChange]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
           closeMenu();
@@ -1766,7 +1657,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, [isOpen, closeMenu]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       const handleEscape = (event) => {
         if (event.key === "Escape") {
           closeMenu();
@@ -1779,17 +1670,17 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
         document.removeEventListener("keydown", handleEscape);
       };
     }, [isOpen, closeMenu]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (isOpen && menuRef.current) {
         menuRef.current.focus();
       }
     }, [isOpen]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (!isOpen) {
         itemsRef.current = [];
       }
     }, [isOpen]);
-    const registerItem = (0, import_react11.useCallback)((id) => {
+    const registerItem = (0, import_react10.useCallback)((id) => {
       const index = itemsRef.current.indexOf(id);
       if (index === -1) {
         itemsRef.current.push(id);
@@ -1797,13 +1688,13 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       }
       return index;
     }, []);
-    const unregisterItem = (0, import_react11.useCallback)((id) => {
+    const unregisterItem = (0, import_react10.useCallback)((id) => {
       const index = itemsRef.current.indexOf(id);
       if (index !== -1) {
         itemsRef.current.splice(index, 1);
       }
     }, []);
-    const onItemSelect = (0, import_react11.useCallback)(
+    const onItemSelect = (0, import_react10.useCallback)(
       (item) => {
         onSelect?.(item);
         if (item.variant === "checkbox") {
@@ -1819,7 +1710,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       },
       [onSelect, onCheckedChange, closeOnSelect, closeMenu]
     );
-    const handleKeyDown = (0, import_react11.useCallback)(
+    const handleKeyDown = (0, import_react10.useCallback)(
       (event) => {
         const itemCount = itemsRef.current.length;
         if (itemCount === 0) return;
@@ -1851,7 +1742,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       },
       [closeMenu]
     );
-    const contextValue = (0, import_react11.useMemo)(
+    const contextValue = (0, import_react10.useMemo)(
       () => ({
         size,
         closeMenu,
@@ -1929,7 +1820,7 @@ var ContextMenuRoot = (0, import_react11.forwardRef)(
       });
     };
     const renderGroups = (groupsData) => {
-      return groupsData.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime399.jsxs)(import_react11.default.Fragment, { children: [
+      return groupsData.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime399.jsxs)(import_react10.default.Fragment, { children: [
         groupIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(ContextMenuSeparator, {}),
         /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
           ContextMenuGroup,
@@ -2038,15 +1929,15 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
 });
 
 // src/hooks/useContextMenuPosition.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 var useContextMenuPosition = ({
   position,
   menuRef,
   isOpen,
   offset = 8
 }) => {
-  const [adjustedPosition, setAdjustedPosition] = (0, import_react12.useState)();
-  (0, import_react12.useEffect)(() => {
+  const [adjustedPosition, setAdjustedPosition] = (0, import_react11.useState)();
+  (0, import_react11.useEffect)(() => {
     if (!isOpen || !position || !menuRef.current) {
       setAdjustedPosition(void 0);
       return;
@@ -2094,7 +1985,7 @@ var useContextMenuPosition = ({
 };
 
 // src/hooks/useKeyboardNavigation.ts
-var import_react13 = require("react");
+var import_react12 = require("react");
 var useKeyboardNavigation = ({
   isOpen,
   itemCount,
@@ -2104,9 +1995,9 @@ var useKeyboardNavigation = ({
   onClose,
   loop = true
 }) => {
-  const typeaheadBuffer = (0, import_react13.useRef)("");
-  const typeaheadTimeout = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const typeaheadBuffer = (0, import_react12.useRef)("");
+  const typeaheadTimeout = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!isOpen) {
       typeaheadBuffer.current = "";
       if (typeaheadTimeout.current) {
@@ -2114,7 +2005,7 @@ var useKeyboardNavigation = ({
       }
     }
   }, [isOpen]);
-  const handleKeyDown = (0, import_react13.useCallback)(
+  const handleKeyDown = (0, import_react12.useCallback)(
     (event) => {
       if (!isOpen || itemCount === 0) return;
       switch (event.key) {