@xsolla/xui-context-menu 0.127.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/native/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/native/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/native/index.js CHANGED
@@ -92,6 +92,10 @@ var Box = ({
92
92
  left,
93
93
  right,
94
94
  width,
95
+ minWidth,
96
+ minHeight,
97
+ maxWidth,
98
+ maxHeight,
95
99
  flex,
96
100
  overflow,
97
101
  zIndex,
@@ -123,6 +127,10 @@ var Box = ({
123
127
  zIndex,
124
128
  height,
125
129
  width,
130
+ minWidth,
131
+ minHeight,
132
+ maxWidth,
133
+ maxHeight,
126
134
  padding,
127
135
  paddingHorizontal,
128
136
  paddingVertical,
@@ -251,7 +259,7 @@ var Text = ({
251
259
  }
252
260
  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
253
261
  const baseStyle = {
254
- color,
262
+ color: color ?? incomingStyle?.color,
255
263
  fontSize: typeof fontSize === "number" ? fontSize : void 0,
256
264
  fontWeight,
257
265
  fontFamily: resolvedFontFamily,
@@ -464,9 +472,11 @@ var ContextMenuItem = (0, import_react4.forwardRef)(
464
472
  size: propSize,
465
473
  hasSubmenu,
466
474
  onPress,
467
- "data-testid": testId = "context-menu-item"
475
+ "data-testid": testId = "context-menu-item",
476
+ themeMode,
477
+ themeProductContext
468
478
  }, ref) => {
469
- const { theme } = (0, import_xui_core.useDesignSystem)();
479
+ const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
470
480
  const context = useContextMenu();
471
481
  const size = propSize || context?.size || "md";
472
482
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -631,9 +641,11 @@ var CheckboxIndicator = ({
631
641
  checked,
632
642
  indeterminate,
633
643
  size,
634
- disabled
644
+ disabled,
645
+ themeMode,
646
+ themeProductContext
635
647
  }) => {
636
- const { theme } = (0, import_xui_core2.useDesignSystem)();
648
+ const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
637
649
  const brandColors = theme.colors.control.brand.primary;
638
650
  const faintColors = theme.colors.control.faint;
639
651
  const contentColors = theme.colors.content;
@@ -696,9 +708,11 @@ var ContextMenuCheckboxItem = (0, import_react5.forwardRef)(
696
708
  size: propSize,
697
709
  onCheckedChange,
698
710
  onPress,
699
- "data-testid": testId = "context-menu-checkbox-item"
711
+ "data-testid": testId = "context-menu-checkbox-item",
712
+ themeMode,
713
+ themeProductContext
700
714
  }, ref) => {
701
- const { theme } = (0, import_xui_core2.useDesignSystem)();
715
+ const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
702
716
  const context = useContextMenu();
703
717
  const size = propSize || context?.size || "md";
704
718
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -778,7 +792,9 @@ var ContextMenuCheckboxItem = (0, import_react5.forwardRef)(
778
792
  checked,
779
793
  indeterminate,
780
794
  size,
781
- disabled
795
+ disabled,
796
+ themeMode,
797
+ themeProductContext
782
798
  }
783
799
  )
784
800
  }
@@ -849,9 +865,11 @@ var radioDotSizeMap = {
849
865
  var RadioIndicator = ({
850
866
  checked,
851
867
  size,
852
- disabled
868
+ disabled,
869
+ themeMode,
870
+ themeProductContext
853
871
  }) => {
854
- const { theme } = (0, import_xui_core3.useDesignSystem)();
872
+ const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
855
873
  const brandColors = theme.colors.control.brand.primary;
856
874
  const faintColors = theme.colors.control.faint;
857
875
  const contentColors = theme.colors.content;
@@ -903,9 +921,11 @@ var ContextMenuRadioItem = (0, import_react7.forwardRef)(
903
921
  disabled,
904
922
  size: propSize,
905
923
  onPress,
906
- "data-testid": testId = "context-menu-radio-item"
924
+ "data-testid": testId = "context-menu-radio-item",
925
+ themeMode,
926
+ themeProductContext
907
927
  }, ref) => {
908
- const { theme } = (0, import_xui_core3.useDesignSystem)();
928
+ const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
909
929
  const context = useContextMenu();
910
930
  const radioGroup = useRadioGroup();
911
931
  const size = propSize || context?.size || "md";
@@ -980,7 +1000,16 @@ var ContextMenuRadioItem = (0, import_react7.forwardRef)(
980
1000
  marginTop: description ? 2 : 0,
981
1001
  alignItems: "center",
982
1002
  justifyContent: "center",
983
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadioIndicator, { checked, size, disabled })
1003
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1004
+ RadioIndicator,
1005
+ {
1006
+ checked,
1007
+ size,
1008
+ disabled,
1009
+ themeMode,
1010
+ themeProductContext
1011
+ }
1012
+ )
984
1013
  }
985
1014
  ),
986
1015
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
@@ -1021,9 +1050,11 @@ var ContextMenuGroup = (0, import_react8.forwardRef)(
1021
1050
  description,
1022
1051
  children,
1023
1052
  size: propSize,
1024
- "data-testid": testId = "context-menu-group"
1053
+ "data-testid": testId = "context-menu-group",
1054
+ themeMode,
1055
+ themeProductContext
1025
1056
  }, ref) => {
1026
- const { theme } = (0, import_xui_core4.useDesignSystem)();
1057
+ const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
1027
1058
  const context = useContextMenu();
1028
1059
  const size = propSize || context?.size || "md";
1029
1060
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -1067,9 +1098,11 @@ var import_xui_core5 = require("@xsolla/xui-core");
1067
1098
  var import_jsx_runtime10 = require("react/jsx-runtime");
1068
1099
  var ContextMenuSeparator = ({
1069
1100
  size: propSize,
1070
- "data-testid": testId = "context-menu-separator"
1101
+ "data-testid": testId = "context-menu-separator",
1102
+ themeMode,
1103
+ themeProductContext
1071
1104
  }) => {
1072
- const { theme } = (0, import_xui_core5.useDesignSystem)();
1105
+ const { theme } = (0, import_xui_core5.useResolvedTheme)({ themeMode, themeProductContext });
1073
1106
  const context = useContextMenu();
1074
1107
  const size = propSize || context?.size || "md";
1075
1108
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -1537,9 +1570,11 @@ var ContextMenuSearch = (0, import_react9.forwardRef)(
1537
1570
  placeholder = "Search",
1538
1571
  autoFocus = true,
1539
1572
  size: propSize,
1540
- "data-testid": testId = "context-menu-search"
1573
+ "data-testid": testId = "context-menu-search",
1574
+ themeMode,
1575
+ themeProductContext
1541
1576
  }, ref) => {
1542
- const { theme } = (0, import_xui_core6.useDesignSystem)();
1577
+ const { theme } = (0, import_xui_core6.useResolvedTheme)({ themeMode, themeProductContext });
1543
1578
  const context = useContextMenu();
1544
1579
  const size = propSize || context?.size || "md";
1545
1580
  const sizeStyles = theme.sizing.contextMenu(size);
@@ -1631,9 +1666,11 @@ var ContextMenuRoot = (0, import_react10.forwardRef)(
1631
1666
  closeOnSelect = true,
1632
1667
  isLoading,
1633
1668
  "aria-label": ariaLabel,
1634
- "data-testid": testId = "context-menu"
1669
+ "data-testid": testId = "context-menu",
1670
+ themeMode,
1671
+ themeProductContext
1635
1672
  }, ref) => {
1636
- const { theme } = (0, import_xui_core7.useDesignSystem)();
1673
+ const { theme } = (0, import_xui_core7.useResolvedTheme)({ themeMode, themeProductContext });
1637
1674
  const [internalIsOpen, setInternalIsOpen] = (0, import_react10.useState)(false);
1638
1675
  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(-1);
1639
1676
  const containerRef = (0, import_react10.useRef)(null);