@xsolla/xui-context-menu 0.128.0 → 0.130.0

package/web/index.mjs

@@ -46,6 +46,8 @@ var StyledBox = styled.div`
   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 && `
@@ -340,7 +342,7 @@ var InputPrimitive = forwardRef(
 InputPrimitive.displayName = "InputPrimitive";
 
 // src/ContextMenu.tsx
-import { useDesignSystem as useDesignSystem7 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme7 } from "@xsolla/xui-core";
 import { Spinner } from "@xsolla/xui-spinner";
 
 // src/ContextMenuContext.tsx
@@ -362,7 +364,7 @@ var useContextMenuRequired = () => {
 
 // src/ContextMenuItem.tsx
 import { forwardRef as forwardRef2, useEffect, useRef } from "react";
-import { useDesignSystem } from "@xsolla/xui-core";
+import { useResolvedTheme } from "@xsolla/xui-core";
 import { ArrowRight } from "@xsolla/xui-icons";
 import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var ContextMenuItem = forwardRef2(
@@ -378,9 +380,11 @@ var ContextMenuItem = forwardRef2(
     size: propSize,
     hasSubmenu,
     onPress,
-    "data-testid": testId = "context-menu-item"
+    "data-testid": testId = "context-menu-item",
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = useDesignSystem();
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
@@ -526,7 +530,7 @@ ContextMenuItem.displayName = "ContextMenuItem";
 
 // src/ContextMenuCheckboxItem.tsx
 import { forwardRef as forwardRef3, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
 import { Check, Minus } from "@xsolla/xui-icons";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var checkboxSizeMap = {
@@ -545,9 +549,11 @@ var CheckboxIndicator = ({
   checked,
   indeterminate,
   size,
-  disabled
+  disabled,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem2();
+  const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
   const brandColors = theme.colors.control.brand.primary;
   const faintColors = theme.colors.control.faint;
   const contentColors = theme.colors.content;
@@ -610,9 +616,11 @@ var ContextMenuCheckboxItem = forwardRef3(
     size: propSize,
     onCheckedChange,
     onPress,
-    "data-testid": testId = "context-menu-checkbox-item"
+    "data-testid": testId = "context-menu-checkbox-item",
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = useDesignSystem2();
+    const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
@@ -692,7 +700,9 @@ var ContextMenuCheckboxItem = forwardRef3(
                   checked,
                   indeterminate,
                   size,
-                  disabled
+                  disabled,
+                  themeMode,
+                  themeProductContext
                 }
               )
             }
@@ -746,7 +756,7 @@ ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
 
 // src/ContextMenuRadioItem.tsx
 import { forwardRef as forwardRef5, useEffect as useEffect3, useRef as useRef3 } from "react";
-import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var radioSizeMap = {
   sm: 14,
@@ -763,9 +773,11 @@ var radioDotSizeMap = {
 var RadioIndicator = ({
   checked,
   size,
-  disabled
+  disabled,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem3();
+  const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
   const brandColors = theme.colors.control.brand.primary;
   const faintColors = theme.colors.control.faint;
   const contentColors = theme.colors.content;
@@ -817,9 +829,11 @@ var ContextMenuRadioItem = forwardRef5(
     disabled,
     size: propSize,
     onPress,
-    "data-testid": testId = "context-menu-radio-item"
+    "data-testid": testId = "context-menu-radio-item",
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = useDesignSystem3();
+    const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
     const context = useContextMenu();
     const radioGroup = useRadioGroup();
     const size = propSize || context?.size || "md";
@@ -894,7 +908,16 @@ var ContextMenuRadioItem = forwardRef5(
               marginTop: description ? 2 : 0,
               alignItems: "center",
               justifyContent: "center",
-              children: /* @__PURE__ */ jsx8(RadioIndicator, { checked, size, disabled })
+              children: /* @__PURE__ */ jsx8(
+                RadioIndicator,
+                {
+                  checked,
+                  size,
+                  disabled,
+                  themeMode,
+                  themeProductContext
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxs3(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
@@ -927,7 +950,7 @@ ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
 
 // src/ContextMenuGroup.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var ContextMenuGroup = forwardRef6(
   ({
@@ -935,9 +958,11 @@ var ContextMenuGroup = forwardRef6(
     description,
     children,
     size: propSize,
-    "data-testid": testId = "context-menu-group"
+    "data-testid": testId = "context-menu-group",
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = useDesignSystem4();
+    const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
@@ -977,13 +1002,15 @@ var ContextMenuGroup = forwardRef6(
 ContextMenuGroup.displayName = "ContextMenuGroup";
 
 // src/ContextMenuSeparator.tsx
-import { useDesignSystem as useDesignSystem5 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme5 } from "@xsolla/xui-core";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var ContextMenuSeparator = ({
   size: propSize,
-  "data-testid": testId = "context-menu-separator"
+  "data-testid": testId = "context-menu-separator",
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem5();
+  const { theme } = useResolvedTheme5({ themeMode, themeProductContext });
   const context = useContextMenu();
   const size = propSize || context?.size || "md";
   const sizeStyles = theme.sizing.contextMenu(size);
@@ -1003,7 +1030,7 @@ ContextMenuSeparator.displayName = "ContextMenuSeparator";
 
 // src/ContextMenuSearch.tsx
 import React6, { forwardRef as forwardRef7, useRef as useRef4, useEffect as useEffect4 } from "react";
-import { useDesignSystem as useDesignSystem6 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme6 } from "@xsolla/xui-core";
 
 // ../icons-base/dist/web/index.mjs
 import styled5 from "styled-components";
@@ -1451,9 +1478,11 @@ var ContextMenuSearch = forwardRef7(
     placeholder = "Search",
     autoFocus = true,
     size: propSize,
-    "data-testid": testId = "context-menu-search"
+    "data-testid": testId = "context-menu-search",
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = useDesignSystem6();
+    const { theme } = useResolvedTheme6({ themeMode, themeProductContext });
     const context = useContextMenu();
     const size = propSize || context?.size || "md";
     const sizeStyles = theme.sizing.contextMenu(size);
@@ -1545,9 +1574,11 @@ var ContextMenuRoot = forwardRef8(
     closeOnSelect = true,
     isLoading,
     "aria-label": ariaLabel,
-    "data-testid": testId = "context-menu"
+    "data-testid": testId = "context-menu",
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = useDesignSystem7();
+    const { theme } = useResolvedTheme7({ themeMode, themeProductContext });
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
     const containerRef = useRef5(null);