@xsolla/xui-context-menu 0.128.0 → 0.129.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/native/index.d.mts +14 -13
  2. package/native/index.d.ts +14 -13
  3. package/native/index.js +58 -21
  4. package/native/index.js.map +1 -1
  5. package/native/index.mjs +65 -28
  6. package/native/index.mjs.map +1 -1
  7. package/package.json +8 -8
  8. package/web/index.d.mts +14 -13
  9. package/web/index.d.ts +14 -13
  10. package/web/index.js +51 -20
  11. package/web/index.js.map +1 -1
  12. package/web/index.mjs +58 -27
  13. package/web/index.mjs.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-context-menu",
3
- "version": "0.128.0",
3
+ "version": "0.129.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,13 +13,13 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-checkbox": "0.128.0",
17
- "@xsolla/xui-core": "0.128.0",
18
- "@xsolla/xui-divider": "0.128.0",
19
- "@xsolla/xui-icons": "0.128.0",
20
- "@xsolla/xui-primitives-core": "0.128.0",
21
- "@xsolla/xui-radio": "0.128.0",
22
- "@xsolla/xui-spinner": "0.128.0"
16
+ "@xsolla/xui-checkbox": "0.129.0",
17
+ "@xsolla/xui-core": "0.129.0",
18
+ "@xsolla/xui-divider": "0.129.0",
19
+ "@xsolla/xui-icons": "0.129.0",
20
+ "@xsolla/xui-primitives-core": "0.129.0",
21
+ "@xsolla/xui-radio": "0.129.0",
22
+ "@xsolla/xui-spinner": "0.129.0"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "react": ">=16.8.0",
package/web/index.d.mts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React$1 from 'react';
2
2
  import React__default, { ReactNode, RefObject } from 'react';
3
+ import { ThemeOverrideProps } from '@xsolla/xui-core';
3
4
 
4
5
  /** Size variants for the context menu */
5
6
  type ContextMenuSize = "sm" | "md" | "lg" | "xl";
@@ -212,19 +213,19 @@ interface ContextMenuSizing {
212
213
  minWidth: number;
213
214
  }
214
215
 
215
- declare const ContextMenu: React__default.ForwardRefExoticComponent<ContextMenuProps & React__default.RefAttributes<any>> & {
216
- Item: React__default.ForwardRefExoticComponent<ContextMenuItemProps & React__default.RefAttributes<any>>;
217
- CheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React__default.RefAttributes<any>>;
216
+ declare const ContextMenu: React__default.ForwardRefExoticComponent<ContextMenuProps & ThemeOverrideProps & React__default.RefAttributes<any>> & {
217
+ Item: React__default.ForwardRefExoticComponent<ContextMenuItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
218
+ CheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
218
219
  RadioGroup: React__default.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React__default.RefAttributes<any>>;
219
- RadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & React__default.RefAttributes<any>>;
220
- Group: React__default.ForwardRefExoticComponent<ContextMenuGroupProps & React__default.RefAttributes<any>>;
221
- Separator: React__default.FC<ContextMenuSeparatorProps>;
222
- Search: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & React__default.RefAttributes<HTMLInputElement>>;
220
+ RadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
221
+ Group: React__default.ForwardRefExoticComponent<ContextMenuGroupProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
222
+ Separator: React__default.FC<ContextMenuSeparatorProps & ThemeOverrideProps>;
223
+ Search: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & ThemeOverrideProps & React__default.RefAttributes<HTMLInputElement>>;
223
224
  };
224
225
 
225
- declare const ContextMenuItem: React__default.ForwardRefExoticComponent<ContextMenuItemProps & React__default.RefAttributes<any>>;
226
+ declare const ContextMenuItem: React__default.ForwardRefExoticComponent<ContextMenuItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
226
227
 
227
- declare const ContextMenuCheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React__default.RefAttributes<any>>;
228
+ declare const ContextMenuCheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
228
229
 
229
230
  interface RadioGroupContextValue {
230
231
  value: string;
@@ -233,13 +234,13 @@ interface RadioGroupContextValue {
233
234
  declare const useRadioGroup: () => RadioGroupContextValue | null;
234
235
  declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<any>>;
235
236
 
236
- declare const ContextMenuRadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & React__default.RefAttributes<any>>;
237
+ declare const ContextMenuRadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
237
238
 
238
- declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & React$1.RefAttributes<any>>;
239
+ declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & ThemeOverrideProps & React$1.RefAttributes<any>>;
239
240
 
240
- declare const ContextMenuSeparator: React__default.FC<ContextMenuSeparatorProps>;
241
+ declare const ContextMenuSeparator: React__default.FC<ContextMenuSeparatorProps & ThemeOverrideProps>;
241
242
 
242
- declare const ContextMenuSearch: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & React__default.RefAttributes<HTMLInputElement>>;
243
+ declare const ContextMenuSearch: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & ThemeOverrideProps & React__default.RefAttributes<HTMLInputElement>>;
243
244
 
244
245
  declare const useContextMenu: () => ContextMenuContextValue | undefined;
245
246
  declare const useContextMenuRequired: () => ContextMenuContextValue;
package/web/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React$1 from 'react';
2
2
  import React__default, { ReactNode, RefObject } from 'react';
3
+ import { ThemeOverrideProps } from '@xsolla/xui-core';
3
4
 
4
5
  /** Size variants for the context menu */
5
6
  type ContextMenuSize = "sm" | "md" | "lg" | "xl";
@@ -212,19 +213,19 @@ interface ContextMenuSizing {
212
213
  minWidth: number;
213
214
  }
214
215
 
215
- declare const ContextMenu: React__default.ForwardRefExoticComponent<ContextMenuProps & React__default.RefAttributes<any>> & {
216
- Item: React__default.ForwardRefExoticComponent<ContextMenuItemProps & React__default.RefAttributes<any>>;
217
- CheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React__default.RefAttributes<any>>;
216
+ declare const ContextMenu: React__default.ForwardRefExoticComponent<ContextMenuProps & ThemeOverrideProps & React__default.RefAttributes<any>> & {
217
+ Item: React__default.ForwardRefExoticComponent<ContextMenuItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
218
+ CheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
218
219
  RadioGroup: React__default.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React__default.RefAttributes<any>>;
219
- RadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & React__default.RefAttributes<any>>;
220
- Group: React__default.ForwardRefExoticComponent<ContextMenuGroupProps & React__default.RefAttributes<any>>;
221
- Separator: React__default.FC<ContextMenuSeparatorProps>;
222
- Search: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & React__default.RefAttributes<HTMLInputElement>>;
220
+ RadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
221
+ Group: React__default.ForwardRefExoticComponent<ContextMenuGroupProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
222
+ Separator: React__default.FC<ContextMenuSeparatorProps & ThemeOverrideProps>;
223
+ Search: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & ThemeOverrideProps & React__default.RefAttributes<HTMLInputElement>>;
223
224
  };
224
225
 
225
- declare const ContextMenuItem: React__default.ForwardRefExoticComponent<ContextMenuItemProps & React__default.RefAttributes<any>>;
226
+ declare const ContextMenuItem: React__default.ForwardRefExoticComponent<ContextMenuItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
226
227
 
227
- declare const ContextMenuCheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React__default.RefAttributes<any>>;
228
+ declare const ContextMenuCheckboxItem: React__default.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
228
229
 
229
230
  interface RadioGroupContextValue {
230
231
  value: string;
@@ -233,13 +234,13 @@ interface RadioGroupContextValue {
233
234
  declare const useRadioGroup: () => RadioGroupContextValue | null;
234
235
  declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<any>>;
235
236
 
236
- declare const ContextMenuRadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & React__default.RefAttributes<any>>;
237
+ declare const ContextMenuRadioItem: React__default.ForwardRefExoticComponent<ContextMenuRadioItemProps & ThemeOverrideProps & React__default.RefAttributes<any>>;
237
238
 
238
- declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & React$1.RefAttributes<any>>;
239
+ declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & ThemeOverrideProps & React$1.RefAttributes<any>>;
239
240
 
240
- declare const ContextMenuSeparator: React__default.FC<ContextMenuSeparatorProps>;
241
+ declare const ContextMenuSeparator: React__default.FC<ContextMenuSeparatorProps & ThemeOverrideProps>;
241
242
 
242
- declare const ContextMenuSearch: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & React__default.RefAttributes<HTMLInputElement>>;
243
+ declare const ContextMenuSearch: React__default.ForwardRefExoticComponent<ContextMenuSearchProps & ThemeOverrideProps & React__default.RefAttributes<HTMLInputElement>>;
243
244
 
244
245
  declare const useContextMenu: () => ContextMenuContextValue | undefined;
245
246
  declare const useContextMenuRequired: () => ContextMenuContextValue;
package/web/index.js CHANGED
@@ -87,6 +87,8 @@ var StyledBox = import_styled_components.default.div`
87
87
  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
88
88
  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
89
89
  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
90
+ max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
91
+ max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
90
92
 
91
93
  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
92
94
  ${(props) => props.paddingHorizontal && `
@@ -419,9 +421,11 @@ var ContextMenuItem = (0, import_react4.forwardRef)(
419
421
  size: propSize,
420
422
  hasSubmenu,
421
423
  onPress,
422
- "data-testid": testId = "context-menu-item"
424
+ "data-testid": testId = "context-menu-item",
425
+ themeMode,
426
+ themeProductContext
423
427
  }, ref) => {
424
- const { theme } = (0, import_xui_core.useDesignSystem)();
428
+ const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
425
429
  const context = useContextMenu();
426
430
  const size = propSize || context?.size || "md";
427
431
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -586,9 +590,11 @@ var CheckboxIndicator = ({
586
590
  checked,
587
591
  indeterminate,
588
592
  size,
589
- disabled
593
+ disabled,
594
+ themeMode,
595
+ themeProductContext
590
596
  }) => {
591
- const { theme } = (0, import_xui_core2.useDesignSystem)();
597
+ const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
592
598
  const brandColors = theme.colors.control.brand.primary;
593
599
  const faintColors = theme.colors.control.faint;
594
600
  const contentColors = theme.colors.content;
@@ -651,9 +657,11 @@ var ContextMenuCheckboxItem = (0, import_react5.forwardRef)(
651
657
  size: propSize,
652
658
  onCheckedChange,
653
659
  onPress,
654
- "data-testid": testId = "context-menu-checkbox-item"
660
+ "data-testid": testId = "context-menu-checkbox-item",
661
+ themeMode,
662
+ themeProductContext
655
663
  }, ref) => {
656
- const { theme } = (0, import_xui_core2.useDesignSystem)();
664
+ const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
657
665
  const context = useContextMenu();
658
666
  const size = propSize || context?.size || "md";
659
667
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -733,7 +741,9 @@ var ContextMenuCheckboxItem = (0, import_react5.forwardRef)(
733
741
  checked,
734
742
  indeterminate,
735
743
  size,
736
- disabled
744
+ disabled,
745
+ themeMode,
746
+ themeProductContext
737
747
  }
738
748
  )
739
749
  }
@@ -804,9 +814,11 @@ var radioDotSizeMap = {
804
814
  var RadioIndicator = ({
805
815
  checked,
806
816
  size,
807
- disabled
817
+ disabled,
818
+ themeMode,
819
+ themeProductContext
808
820
  }) => {
809
- const { theme } = (0, import_xui_core3.useDesignSystem)();
821
+ const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
810
822
  const brandColors = theme.colors.control.brand.primary;
811
823
  const faintColors = theme.colors.control.faint;
812
824
  const contentColors = theme.colors.content;
@@ -858,9 +870,11 @@ var ContextMenuRadioItem = (0, import_react7.forwardRef)(
858
870
  disabled,
859
871
  size: propSize,
860
872
  onPress,
861
- "data-testid": testId = "context-menu-radio-item"
873
+ "data-testid": testId = "context-menu-radio-item",
874
+ themeMode,
875
+ themeProductContext
862
876
  }, ref) => {
863
- const { theme } = (0, import_xui_core3.useDesignSystem)();
877
+ const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
864
878
  const context = useContextMenu();
865
879
  const radioGroup = useRadioGroup();
866
880
  const size = propSize || context?.size || "md";
@@ -935,7 +949,16 @@ var ContextMenuRadioItem = (0, import_react7.forwardRef)(
935
949
  marginTop: description ? 2 : 0,
936
950
  alignItems: "center",
937
951
  justifyContent: "center",
938
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadioIndicator, { checked, size, disabled })
952
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
953
+ RadioIndicator,
954
+ {
955
+ checked,
956
+ size,
957
+ disabled,
958
+ themeMode,
959
+ themeProductContext
960
+ }
961
+ )
939
962
  }
940
963
  ),
941
964
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
@@ -976,9 +999,11 @@ var ContextMenuGroup = (0, import_react8.forwardRef)(
976
999
  description,
977
1000
  children,
978
1001
  size: propSize,
979
- "data-testid": testId = "context-menu-group"
1002
+ "data-testid": testId = "context-menu-group",
1003
+ themeMode,
1004
+ themeProductContext
980
1005
  }, ref) => {
981
- const { theme } = (0, import_xui_core4.useDesignSystem)();
1006
+ const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
982
1007
  const context = useContextMenu();
983
1008
  const size = propSize || context?.size || "md";
984
1009
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -1022,9 +1047,11 @@ var import_xui_core5 = require("@xsolla/xui-core");
1022
1047
  var import_jsx_runtime10 = require("react/jsx-runtime");
1023
1048
  var ContextMenuSeparator = ({
1024
1049
  size: propSize,
1025
- "data-testid": testId = "context-menu-separator"
1050
+ "data-testid": testId = "context-menu-separator",
1051
+ themeMode,
1052
+ themeProductContext
1026
1053
  }) => {
1027
- const { theme } = (0, import_xui_core5.useDesignSystem)();
1054
+ const { theme } = (0, import_xui_core5.useResolvedTheme)({ themeMode, themeProductContext });
1028
1055
  const context = useContextMenu();
1029
1056
  const size = propSize || context?.size || "md";
1030
1057
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -1492,9 +1519,11 @@ var ContextMenuSearch = (0, import_react9.forwardRef)(
1492
1519
  placeholder = "Search",
1493
1520
  autoFocus = true,
1494
1521
  size: propSize,
1495
- "data-testid": testId = "context-menu-search"
1522
+ "data-testid": testId = "context-menu-search",
1523
+ themeMode,
1524
+ themeProductContext
1496
1525
  }, ref) => {
1497
- const { theme } = (0, import_xui_core6.useDesignSystem)();
1526
+ const { theme } = (0, import_xui_core6.useResolvedTheme)({ themeMode, themeProductContext });
1498
1527
  const context = useContextMenu();
1499
1528
  const size = propSize || context?.size || "md";
1500
1529
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -1586,9 +1615,11 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
1586
1615
  closeOnSelect = true,
1587
1616
  isLoading,
1588
1617
  "aria-label": ariaLabel,
1589
- "data-testid": testId = "context-menu"
1618
+ "data-testid": testId = "context-menu",
1619
+ themeMode,
1620
+ themeProductContext
1590
1621
  }, ref) => {
1591
- const { theme } = (0, import_xui_core7.useDesignSystem)();
1622
+ const { theme } = (0, import_xui_core7.useResolvedTheme)({ themeMode, themeProductContext });
1592
1623
  const [internalIsOpen, setInternalIsOpen] = (0, import_react10.useState)(false);
1593
1624
  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(-1);
1594
1625
  const containerRef = (0, import_react10.useRef)(null);