@xsolla/xui-dropdown 0.172.2 → 0.173.1

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 (14) hide show
  1. package/README.md +16 -0
  2. package/native/index.d.mts +7 -3
  3. package/native/index.d.ts +7 -3
  4. package/native/index.js +27 -51
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +27 -51
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +6 -6
  9. package/web/index.d.mts +7 -3
  10. package/web/index.d.ts +7 -3
  11. package/web/index.js +27 -51
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +27 -51
  14. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -39,9 +39,12 @@ import { Button } from '@xsolla/xui-button';
39
39
  | `onOpenChange` | `(open: boolean) => void` | — | Fired when the open state changes. |
40
40
  | `width` | `string \| number` | `'auto'` | Width of the menu (does not affect the trigger). |
41
41
  | `align` | `'start' \| 'end'` | `'start'` | Horizontal alignment of the menu relative to the trigger. |
42
+ | `borderRadius` | `number \| string` | `theme.shape.contextMenu.md.borderRadius` | Border radius of the menu. |
42
43
  | `id` | `string` | — | HTML id on the root container. |
43
44
  | `aria-label` | `string` | — | Accessible label for the menu. |
44
45
  | `testID` | `string` | — | Test identifier. |
46
+ | `overlayThemeMode` | `ThemeMode` | `themeMode` | Theme mode for the dropdown menu overlay. |
47
+ | `overlayThemeProductContext` | `ProductContext` | `themeProductContext` | Product context for the dropdown menu overlay. |
45
48
 
46
49
  Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
47
50
 
@@ -106,6 +109,19 @@ const [selected, setSelected] = useState('option1');
106
109
  </Dropdown>;
107
110
  ```
108
111
 
112
+ ### Custom border radius
113
+
114
+ ```tsx
115
+ import { Button } from '@xsolla/xui-button';
116
+ import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
117
+
118
+ <Dropdown trigger={<Button>Rounded menu</Button>} width={220} borderRadius={16}>
119
+ <DropdownItem>Profile</DropdownItem>
120
+ <DropdownItem>Billing</DropdownItem>
121
+ <DropdownItem>Settings</DropdownItem>
122
+ </Dropdown>;
123
+ ```
124
+
109
125
  ## Accessibility
110
126
 
111
127
  - Trigger exposes `aria-haspopup="menu"` and `aria-expanded`.
package/native/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ThemeOverrideProps } from '@xsolla/xui-core';
2
+ import { ThemeOverrideProps, ThemeMode, ProductContext } from '@xsolla/xui-core';
3
3
 
4
4
  interface DropdownProps extends ThemeOverrideProps {
5
5
  id?: string;
@@ -11,21 +11,25 @@ interface DropdownProps extends ThemeOverrideProps {
11
11
  width?: string | number;
12
12
  /** Horizontal alignment of dropdown menu relative to trigger. Default: "start" */
13
13
  align?: "start" | "end";
14
+ /** Border radius of the dropdown menu. Defaults to theme.shape.contextMenu.md.borderRadius */
15
+ borderRadius?: number | string;
14
16
  /** Accessible label for the dropdown menu */
15
17
  "aria-label"?: string;
16
18
  /** Test ID for testing frameworks */
17
19
  testID?: string;
20
+ /** Theme mode for the dropdown menu overlay. Defaults to themeMode when not set. */
21
+ overlayThemeMode?: ThemeMode;
22
+ /** Product context for the dropdown menu overlay. Defaults to themeProductContext when not set. */
23
+ overlayThemeProductContext?: ProductContext;
18
24
  }
19
25
  declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
20
26
  interface DropdownItemProps extends ThemeOverrideProps {
21
27
  children: React.ReactNode;
22
28
  onPress?: () => void;
23
29
  active?: boolean;
24
- /** Whether this item is selected (shows trailing checkmark with control/check/bg color) */
25
30
  selected?: boolean;
26
31
  disabled?: boolean;
27
32
  icon?: React.ReactNode;
28
- /** Test ID for testing frameworks */
29
33
  testID?: string;
30
34
  }
31
35
  declare const DropdownItem: React.FC<DropdownItemProps>;
package/native/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { ThemeOverrideProps } from '@xsolla/xui-core';
2
+ import { ThemeOverrideProps, ThemeMode, ProductContext } from '@xsolla/xui-core';
3
3
 
4
4
  interface DropdownProps extends ThemeOverrideProps {
5
5
  id?: string;
@@ -11,21 +11,25 @@ interface DropdownProps extends ThemeOverrideProps {
11
11
  width?: string | number;
12
12
  /** Horizontal alignment of dropdown menu relative to trigger. Default: "start" */
13
13
  align?: "start" | "end";
14
+ /** Border radius of the dropdown menu. Defaults to theme.shape.contextMenu.md.borderRadius */
15
+ borderRadius?: number | string;
14
16
  /** Accessible label for the dropdown menu */
15
17
  "aria-label"?: string;
16
18
  /** Test ID for testing frameworks */
17
19
  testID?: string;
20
+ /** Theme mode for the dropdown menu overlay. Defaults to themeMode when not set. */
21
+ overlayThemeMode?: ThemeMode;
22
+ /** Product context for the dropdown menu overlay. Defaults to themeProductContext when not set. */
23
+ overlayThemeProductContext?: ProductContext;
18
24
  }
19
25
  declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
20
26
  interface DropdownItemProps extends ThemeOverrideProps {
21
27
  children: React.ReactNode;
22
28
  onPress?: () => void;
23
29
  active?: boolean;
24
- /** Whether this item is selected (shows trailing checkmark with control/check/bg color) */
25
30
  selected?: boolean;
26
31
  disabled?: boolean;
27
32
  icon?: React.ReactNode;
28
- /** Test ID for testing frameworks */
29
33
  testID?: string;
30
34
  }
31
35
  declare const DropdownItem: React.FC<DropdownItemProps>;
package/native/index.js CHANGED
@@ -289,10 +289,13 @@ var Dropdown = import_react.default.forwardRef(
289
289
  onOpenChange,
290
290
  width = "auto",
291
291
  align = "start",
292
+ borderRadius,
292
293
  "aria-label": ariaLabel,
293
294
  testID,
294
295
  themeMode,
295
- themeProductContext
296
+ themeProductContext,
297
+ overlayThemeMode,
298
+ overlayThemeProductContext
296
299
  }, ref) => {
297
300
  const [internalIsOpen, setInternalIsOpen] = (0, import_react.useState)(false);
298
301
  const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
@@ -303,18 +306,20 @@ var Dropdown = import_react.default.forwardRef(
303
306
  ref,
304
307
  () => containerRef.current
305
308
  );
306
- const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
309
+ const { theme: rawTheme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
310
+ const theme = rawTheme;
311
+ const { theme: rawOverlayTheme } = (0, import_xui_core.useResolvedTheme)({
312
+ themeMode: overlayThemeMode ?? themeMode,
313
+ themeProductContext: overlayThemeProductContext ?? themeProductContext
314
+ });
315
+ const overlayTheme = rawOverlayTheme;
307
316
  const closeMenu = (0, import_react.useCallback)(() => {
308
- if (propIsOpen === void 0) {
309
- setInternalIsOpen(false);
310
- }
317
+ if (propIsOpen === void 0) setInternalIsOpen(false);
311
318
  if (onOpenChange) onOpenChange(false);
312
319
  }, [propIsOpen, onOpenChange]);
313
320
  const toggleOpen = (0, import_react.useCallback)(() => {
314
321
  const nextOpen = !isOpen;
315
- if (propIsOpen === void 0) {
316
- setInternalIsOpen(nextOpen);
317
- }
322
+ if (propIsOpen === void 0) setInternalIsOpen(nextOpen);
318
323
  if (onOpenChange) onOpenChange(nextOpen);
319
324
  }, [isOpen, propIsOpen, onOpenChange]);
320
325
  const focusTrigger = (0, import_react.useCallback)(() => {
@@ -322,9 +327,7 @@ var Dropdown = import_react.default.forwardRef(
322
327
  const focusable = triggerRef.current.querySelector(
323
328
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
324
329
  );
325
- if (focusable) {
326
- focusable.focus();
327
- }
330
+ if (focusable) focusable.focus();
328
331
  }
329
332
  }, []);
330
333
  const handleKeyDown = (0, import_react.useCallback)(
@@ -347,9 +350,7 @@ var Dropdown = import_react.default.forwardRef(
347
350
  toggleOpen();
348
351
  } else if (event.key === "ArrowDown" && !isOpen) {
349
352
  event.preventDefault();
350
- if (propIsOpen === void 0) {
351
- setInternalIsOpen(true);
352
- }
353
+ if (propIsOpen === void 0) setInternalIsOpen(true);
353
354
  if (onOpenChange) onOpenChange(true);
354
355
  }
355
356
  },
@@ -375,26 +376,11 @@ var Dropdown = import_react.default.forwardRef(
375
376
  {
376
377
  ref: containerRef,
377
378
  id,
378
- style: {
379
- position: "relative",
380
- width: "fit-content",
381
- alignSelf: "flex-start",
382
- height: "fit-content"
383
- },
379
+ style: { position: "relative", width: "fit-content", alignSelf: "flex-start", height: "fit-content" },
384
380
  onKeyDown: handleKeyDown,
385
381
  "data-testid": testID,
386
382
  children: [
387
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
388
- "div",
389
- {
390
- ref: triggerRef,
391
- onClick: toggleOpen,
392
- onKeyDown: handleTriggerKeyDown,
393
- "aria-haspopup": "menu",
394
- "aria-expanded": isOpen,
395
- children: trigger
396
- }
397
- ),
383
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: triggerRef, onClick: toggleOpen, onKeyDown: handleTriggerKeyDown, "aria-haspopup": "menu", "aria-expanded": isOpen, children: trigger }),
398
384
  isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
399
385
  Box,
400
386
  {
@@ -403,10 +389,10 @@ var Dropdown = import_react.default.forwardRef(
403
389
  top: "100%",
404
390
  ...align === "end" ? { right: 0 } : { left: 0 },
405
391
  marginTop: 4,
406
- backgroundColor: theme.colors.background.secondary,
407
- borderColor: theme.colors.border.secondary,
392
+ backgroundColor: overlayTheme.colors.background.secondary,
393
+ borderColor: overlayTheme.colors.border.secondary,
408
394
  borderWidth: 1,
409
- borderRadius: theme.shape.contextMenu.md.borderRadius,
395
+ borderRadius: borderRadius !== void 0 ? borderRadius : overlayTheme.shape.contextMenu.md.borderRadius,
410
396
  paddingVertical: 4,
411
397
  role: "menu",
412
398
  ...ariaLabel ? { "aria-label": ariaLabel } : {},
@@ -434,22 +420,17 @@ var DropdownItem = ({
434
420
  themeMode,
435
421
  themeProductContext
436
422
  }) => {
437
- const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
423
+ const { theme: rawTheme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
424
+ const theme = rawTheme;
438
425
  const brandColors = theme.colors.control.brand.primary;
439
426
  const contentColors = theme.colors.content;
440
427
  const getBackgroundColor = () => {
441
- if (selected) {
442
- return brandColors?.bg || theme.colors.control.input.bg;
443
- }
444
- if (active) {
445
- return theme.colors.control.input.bgHover;
446
- }
428
+ if (selected) return brandColors?.bg || theme.colors.control.input.bg;
429
+ if (active) return theme.colors.control.input.bgHover;
447
430
  return "transparent";
448
431
  };
449
432
  const getContentColor = () => {
450
- if (selected) {
451
- return contentColors?.on?.brand || theme.colors.content.primary;
452
- }
433
+ if (selected) return contentColors?.on?.brand || theme.colors.content.primary;
453
434
  return theme.colors.content.secondary;
454
435
  };
455
436
  const handleKeyDown = (event) => {
@@ -467,18 +448,13 @@ var DropdownItem = ({
467
448
  flexDirection: "row",
468
449
  alignItems: "center",
469
450
  backgroundColor: getBackgroundColor(),
470
- hoverStyle: !disabled && !selected ? {
471
- backgroundColor: theme.colors.control.input.bgHover
472
- } : void 0,
451
+ hoverStyle: !disabled && !selected ? { backgroundColor: theme.colors.control.input.bgHover } : void 0,
473
452
  role: "menuitem",
474
453
  tabIndex: disabled ? -1 : 0,
475
454
  "aria-disabled": disabled,
476
455
  onKeyDown: handleKeyDown,
477
456
  testID,
478
- style: {
479
- opacity: disabled ? 0.5 : 1,
480
- cursor: disabled ? "not-allowed" : "pointer"
481
- },
457
+ style: { opacity: disabled ? 0.5 : 1, cursor: disabled ? "not-allowed" : "pointer" },
482
458
  children: [
483
459
  icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { marginRight: 12, alignItems: "center", justifyContent: "center", children: icon }),
484
460
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color: getContentColor(), fontSize: 14, fontWeight: "400", children }) })
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Dropdown.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Dropdown\";\n","import React, { useState, useRef, useEffect, useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface DropdownProps extends ThemeOverrideProps {\n id?: string;\n trigger: React.ReactNode;\n children: React.ReactNode;\n isOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Width of the dropdown menu (does not affect trigger width) */\n width?: string | number;\n /** Horizontal alignment of dropdown menu relative to trigger. Default: \"start\" */\n align?: \"start\" | \"end\";\n /** Accessible label for the dropdown menu */\n \"aria-label\"?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(\n (\n {\n id,\n trigger,\n children,\n isOpen: propIsOpen,\n onOpenChange,\n width = \"auto\",\n align = \"start\",\n \"aria-label\": ariaLabel,\n testID,\n themeMode,\n themeProductContext,\n },\n ref\n ) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const isOpen = propIsOpen !== undefined ? propIsOpen : internalIsOpen;\n const containerRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Merge forwarded ref with internal container ref\n React.useImperativeHandle(\n ref,\n () => containerRef.current as HTMLDivElement\n );\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const closeMenu = useCallback(() => {\n if (propIsOpen === undefined) {\n setInternalIsOpen(false);\n }\n if (onOpenChange) onOpenChange(false);\n }, [propIsOpen, onOpenChange]);\n\n const toggleOpen = useCallback(() => {\n const nextOpen = !isOpen;\n if (propIsOpen === undefined) {\n setInternalIsOpen(nextOpen);\n }\n if (onOpenChange) onOpenChange(nextOpen);\n }, [isOpen, propIsOpen, onOpenChange]);\n\n // Safe focus helper for cross-platform compatibility\n const focusTrigger = useCallback(() => {\n if (typeof document !== \"undefined\" && triggerRef.current) {\n // Find the first focusable element within the trigger wrapper\n const focusable = triggerRef.current.querySelector<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n if (focusable) {\n focusable.focus();\n }\n }\n }, []);\n\n // Handle keyboard navigation\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Escape\" && isOpen) {\n event.preventDefault();\n closeMenu();\n focusTrigger();\n } else if (event.key === \"Tab\" && isOpen) {\n closeMenu();\n // Also restore focus on Tab for consistent keyboard navigation\n focusTrigger();\n }\n },\n [isOpen, closeMenu, focusTrigger]\n );\n\n // Handle trigger keyboard events\n const handleTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n toggleOpen();\n } else if (event.key === \"ArrowDown\" && !isOpen) {\n event.preventDefault();\n if (propIsOpen === undefined) {\n setInternalIsOpen(true);\n }\n if (onOpenChange) onOpenChange(true);\n }\n },\n [isOpen, toggleOpen, propIsOpen, onOpenChange]\n );\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n closeMenu();\n }\n };\n\n if (isOpen && typeof document !== \"undefined\") {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n if (typeof document !== \"undefined\") {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }\n };\n }, [isOpen, closeMenu]);\n\n return (\n <div\n ref={containerRef}\n id={id}\n style={{\n position: \"relative\",\n width: \"fit-content\",\n alignSelf: \"flex-start\",\n height: \"fit-content\",\n }}\n onKeyDown={handleKeyDown}\n data-testid={testID}\n >\n <div\n ref={triggerRef}\n onClick={toggleOpen}\n onKeyDown={handleTriggerKeyDown}\n aria-haspopup=\"menu\"\n aria-expanded={isOpen}\n >\n {trigger}\n </div>\n {isOpen && (\n <Box\n ref={menuRef}\n position=\"absolute\"\n top=\"100%\"\n {...(align === \"end\" ? { right: 0 } : { left: 0 })}\n marginTop={4}\n backgroundColor={theme.colors.background.secondary}\n borderColor={theme.colors.border.secondary}\n borderWidth={1}\n borderRadius={theme.shape.contextMenu.md.borderRadius}\n paddingVertical={4}\n role=\"menu\"\n {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n style={{\n zIndex: 1000,\n boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\",\n ...(width === \"auto\" ? { minWidth: \"100%\" } : { width }),\n }}\n >\n {children}\n </Box>\n )}\n </div>\n );\n }\n);\n\nexport interface DropdownItemProps extends ThemeOverrideProps {\n children: React.ReactNode;\n onPress?: () => void;\n active?: boolean;\n /** Whether this item is selected (shows trailing checkmark with control/check/bg color) */\n selected?: boolean;\n disabled?: boolean;\n icon?: React.ReactNode;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const DropdownItem: React.FC<DropdownItemProps> = ({\n children,\n onPress,\n active,\n selected,\n disabled,\n icon,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const brandColors = theme.colors.control.brand.primary;\n const contentColors = theme.colors.content;\n\n // Determine background color\n const getBackgroundColor = () => {\n if (selected) {\n return brandColors?.bg || theme.colors.control.input.bg; // Cyan background for selected items\n }\n if (active) {\n return theme.colors.control.input.bgHover;\n }\n return \"transparent\";\n };\n\n // Determine text/icon color\n const getContentColor = () => {\n if (selected) {\n return contentColors?.on?.brand || theme.colors.content.primary; // Black text on cyan background\n }\n return theme.colors.content.secondary;\n };\n\n // Handle keyboard activation\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if ((event.key === \"Enter\" || event.key === \" \") && !disabled && onPress) {\n event.preventDefault();\n onPress();\n }\n };\n\n return (\n <Box\n onPress={!disabled ? onPress : undefined}\n paddingHorizontal={16}\n paddingVertical={8}\n flexDirection=\"row\"\n alignItems=\"center\"\n backgroundColor={getBackgroundColor()}\n hoverStyle={\n !disabled && !selected\n ? {\n backgroundColor: theme.colors.control.input.bgHover,\n }\n : undefined\n }\n role=\"menuitem\"\n tabIndex={disabled ? -1 : 0}\n aria-disabled={disabled}\n onKeyDown={handleKeyDown}\n testID={testID}\n style={{\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n }}\n >\n {icon && (\n <Box marginRight={12} alignItems=\"center\" justifyContent=\"center\">\n {icon}\n </Box>\n )}\n <Box flex={1}>\n <Text color={getContentColor()} fontSize={14} fontWeight=\"400\">\n {children}\n </Text>\n </Box>\n </Box>\n );\n};\n\nDropdown.displayName = \"Dropdown\";\nDropdownItem.displayName = \"DropdownItem\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAgE;;;ACChE,0BAQO;AA2ID;AAxIC,IAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,CAAC,aAAkC;AAAA,IAC3D,iBACE,WAAW,YAAY,kBACnB,WAAW,kBACX;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN;AAEA,QAAM,cAAc,cAAc;AAIlC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAGJ,MAAI,OAAO,SAAS,KAAK;AACvB,UAAM,aAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,KAAK,IAAI;AAAA,QACnB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACV,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,CAAC,EAAE,QAAQ,MAAM,kBAAkB,OAAO;AAAA,QACjD,QAAQ;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,kBAAkB;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AC/LA,IAAAA,uBAKO;AAqEH,IAAAC,sBAAA;AAlEJ,IAAM,UAA6C;AAAA,EACjD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEA,IAAM,oBAAoB,CACxB,UACuB;AACvB,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,QAAM,SAAS,WAAW,KAAK;AAC/B,SAAO,MAAM,MAAM,IAAI,SAAY;AACrC;AAEO,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,MAAI,qBAAqB,aACrB,WAAW,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAS,EAAE,EAAE,KAAK,IACnD;AAEJ,MACE,uBAAuB,gBACvB,uBAAuB,qBACvB,uBAAuB,iBACvB;AACA,yBAAqB;AAAA,EACvB;AAEA,QAAM,gBAAgB,gCAAW,QAAQ,SAAS;AAElD,QAAM,YAAuB;AAAA,IAC3B,OAAO,SAAS,eAAe;AAAA,IAC/B,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,IACpD;AAAA,IACA,YAAY;AAAA,IACZ,oBAAoB,MAAM;AAAA,IAC1B,WAAW,aAAa,eAAe;AAAA,IACvC,YAAY,kBAAkB,cAAc,eAAe,UAAU;AAAA,IACrE,WAAW;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,cAAc;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,oBAAoB,OAAO,QAAQ,IAAI,IAAI;AAEjD,SACE;AAAA,IAAC,qBAAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ,cAAc,UAAU;AAAA,MAChC;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;AFjFA,sBAA0D;AAkIpD,IAAAC,sBAAA;AAhHC,IAAM,WAAW,aAAAC,QAAM;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,KAAK;AAC1D,UAAM,SAAS,eAAe,SAAY,aAAa;AACvD,UAAM,mBAAe,qBAAuB,IAAI;AAChD,UAAM,iBAAa,qBAAuB,IAAI;AAC9C,UAAM,cAAU,qBAAuB,IAAI;AAG3C,iBAAAA,QAAM;AAAA,MACJ;AAAA,MACA,MAAM,aAAa;AAAA,IACrB;AACA,UAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,UAAM,gBAAY,0BAAY,MAAM;AAClC,UAAI,eAAe,QAAW;AAC5B,0BAAkB,KAAK;AAAA,MACzB;AACA,UAAI,aAAc,cAAa,KAAK;AAAA,IACtC,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,UAAM,iBAAa,0BAAY,MAAM;AACnC,YAAM,WAAW,CAAC;AAClB,UAAI,eAAe,QAAW;AAC5B,0BAAkB,QAAQ;AAAA,MAC5B;AACA,UAAI,aAAc,cAAa,QAAQ;AAAA,IACzC,GAAG,CAAC,QAAQ,YAAY,YAAY,CAAC;AAGrC,UAAM,mBAAe,0BAAY,MAAM;AACrC,UAAI,OAAO,aAAa,eAAe,WAAW,SAAS;AAEzD,cAAM,YAAY,WAAW,QAAQ;AAAA,UACnC;AAAA,QACF;AACA,YAAI,WAAW;AACb,oBAAU,MAAM;AAAA,QAClB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAGL,UAAM,oBAAgB;AAAA,MACpB,CAAC,UAA+B;AAC9B,YAAI,MAAM,QAAQ,YAAY,QAAQ;AACpC,gBAAM,eAAe;AACrB,oBAAU;AACV,uBAAa;AAAA,QACf,WAAW,MAAM,QAAQ,SAAS,QAAQ;AACxC,oBAAU;AAEV,uBAAa;AAAA,QACf;AAAA,MACF;AAAA,MACA,CAAC,QAAQ,WAAW,YAAY;AAAA,IAClC;AAGA,UAAM,2BAAuB;AAAA,MAC3B,CAAC,UAA+B;AAC9B,YAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,gBAAM,eAAe;AACrB,qBAAW;AAAA,QACb,WAAW,MAAM,QAAQ,eAAe,CAAC,QAAQ;AAC/C,gBAAM,eAAe;AACrB,cAAI,eAAe,QAAW;AAC5B,8BAAkB,IAAI;AAAA,UACxB;AACA,cAAI,aAAc,cAAa,IAAI;AAAA,QACrC;AAAA,MACF;AAAA,MACA,CAAC,QAAQ,YAAY,YAAY,YAAY;AAAA,IAC/C;AAEA,gCAAU,MAAM;AACd,YAAM,qBAAqB,CAAC,UAAsB;AAChD,YACE,aAAa,WACb,CAAC,aAAa,QAAQ,SAAS,MAAM,MAAc,GACnD;AACA,oBAAU;AAAA,QACZ;AAAA,MACF;AAEA,UAAI,UAAU,OAAO,aAAa,aAAa;AAC7C,iBAAS,iBAAiB,aAAa,kBAAkB;AAAA,MAC3D;AACA,aAAO,MAAM;AACX,YAAI,OAAO,aAAa,aAAa;AACnC,mBAAS,oBAAoB,aAAa,kBAAkB;AAAA,QAC9D;AAAA,MACF;AAAA,IACF,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,WAAW;AAAA,UACX,QAAQ;AAAA,QACV;AAAA,QACA,WAAW;AAAA,QACX,eAAa;AAAA,QAEb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAW;AAAA,cACX,iBAAc;AAAA,cACd,iBAAe;AAAA,cAEd;AAAA;AAAA,UACH;AAAA,UACC,UACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,UAAS;AAAA,cACT,KAAI;AAAA,cACH,GAAI,UAAU,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE;AAAA,cAChD,WAAW;AAAA,cACX,iBAAiB,MAAM,OAAO,WAAW;AAAA,cACzC,aAAa,MAAM,OAAO,OAAO;AAAA,cACjC,aAAa;AAAA,cACb,cAAc,MAAM,MAAM,YAAY,GAAG;AAAA,cACzC,iBAAiB;AAAA,cACjB,MAAK;AAAA,cACJ,GAAI,YAAY,EAAE,cAAc,UAAU,IAAI,CAAC;AAAA,cAChD,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,GAAI,UAAU,SAAS,EAAE,UAAU,OAAO,IAAI,EAAE,MAAM;AAAA,cACxD;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAcO,IAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,QAAM,cAAc,MAAM,OAAO,QAAQ,MAAM;AAC/C,QAAM,gBAAgB,MAAM,OAAO;AAGnC,QAAM,qBAAqB,MAAM;AAC/B,QAAI,UAAU;AACZ,aAAO,aAAa,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA,IACvD;AACA,QAAI,QAAQ;AACV,aAAO,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AACA,WAAO;AAAA,EACT;AAGA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,UAAU;AACZ,aAAO,eAAe,IAAI,SAAS,MAAM,OAAO,QAAQ;AAAA,IAC1D;AACA,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AAGA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,SAAK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QAAQ,CAAC,YAAY,SAAS;AACxE,YAAM,eAAe;AACrB,cAAQ;AAAA,IACV;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,eAAc;AAAA,MACd,YAAW;AAAA,MACX,iBAAiB,mBAAmB;AAAA,MACpC,YACE,CAAC,YAAY,CAAC,WACV;AAAA,QACE,iBAAiB,MAAM,OAAO,QAAQ,MAAM;AAAA,MAC9C,IACA;AAAA,MAEN,MAAK;AAAA,MACL,UAAU,WAAW,KAAK;AAAA,MAC1B,iBAAe;AAAA,MACf,WAAW;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS,WAAW,MAAM;AAAA,QAC1B,QAAQ,WAAW,gBAAgB;AAAA,MACrC;AAAA,MAEC;AAAA,gBACC,6CAAC,OAAI,aAAa,IAAI,YAAW,UAAS,gBAAe,UACtD,gBACH;AAAA,QAEF,6CAAC,OAAI,MAAM,GACT,uDAAC,QAAK,OAAO,gBAAgB,GAAG,UAAU,IAAI,YAAW,OACtD,UACH,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,cAAc;AACvB,aAAa,cAAc;","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","React"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Dropdown.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Dropdown\";\n","import React, { useState, useRef, useEffect, useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps, type ThemeMode, type ProductContext } from \"@xsolla/xui-core\";\n\nexport interface DropdownProps extends ThemeOverrideProps {\n id?: string;\n trigger: React.ReactNode;\n children: React.ReactNode;\n isOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Width of the dropdown menu (does not affect trigger width) */\n width?: string | number;\n /** Horizontal alignment of dropdown menu relative to trigger. Default: \"start\" */\n align?: \"start\" | \"end\";\n /** Border radius of the dropdown menu. Defaults to theme.shape.contextMenu.md.borderRadius */\n borderRadius?: number | string;\n /** Accessible label for the dropdown menu */\n \"aria-label\"?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n /** Theme mode for the dropdown menu overlay. Defaults to themeMode when not set. */\n overlayThemeMode?: ThemeMode;\n /** Product context for the dropdown menu overlay. Defaults to themeProductContext when not set. */\n overlayThemeProductContext?: ProductContext;\n}\n\nexport const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(\n (\n {\n id,\n trigger,\n children,\n isOpen: propIsOpen,\n onOpenChange,\n width = \"auto\",\n align = \"start\",\n borderRadius,\n \"aria-label\": ariaLabel,\n testID,\n themeMode,\n themeProductContext,\n overlayThemeMode,\n overlayThemeProductContext,\n },\n ref\n ) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const isOpen = propIsOpen !== undefined ? propIsOpen : internalIsOpen;\n const containerRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n React.useImperativeHandle(\n ref,\n () => containerRef.current as HTMLDivElement\n );\n const { theme: rawTheme } = useResolvedTheme({ themeMode, themeProductContext });\n const theme = rawTheme as any;\n const { theme: rawOverlayTheme } = useResolvedTheme({\n themeMode: overlayThemeMode ?? themeMode,\n themeProductContext: overlayThemeProductContext ?? themeProductContext,\n });\n const overlayTheme = rawOverlayTheme as any;\n\n const closeMenu = useCallback(() => {\n if (propIsOpen === undefined) setInternalIsOpen(false);\n if (onOpenChange) onOpenChange(false);\n }, [propIsOpen, onOpenChange]);\n\n const toggleOpen = useCallback(() => {\n const nextOpen = !isOpen;\n if (propIsOpen === undefined) setInternalIsOpen(nextOpen);\n if (onOpenChange) onOpenChange(nextOpen);\n }, [isOpen, propIsOpen, onOpenChange]);\n\n const focusTrigger = useCallback(() => {\n if (typeof document !== \"undefined\" && triggerRef.current) {\n const focusable = triggerRef.current.querySelector<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n if (focusable) focusable.focus();\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Escape\" && isOpen) {\n event.preventDefault();\n closeMenu();\n focusTrigger();\n } else if (event.key === \"Tab\" && isOpen) {\n closeMenu();\n focusTrigger();\n }\n },\n [isOpen, closeMenu, focusTrigger]\n );\n\n const handleTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n toggleOpen();\n } else if (event.key === \"ArrowDown\" && !isOpen) {\n event.preventDefault();\n if (propIsOpen === undefined) setInternalIsOpen(true);\n if (onOpenChange) onOpenChange(true);\n }\n },\n [isOpen, toggleOpen, propIsOpen, onOpenChange]\n );\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n closeMenu();\n }\n };\n if (isOpen && typeof document !== \"undefined\") {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n if (typeof document !== \"undefined\") {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }\n };\n }, [isOpen, closeMenu]);\n\n return (\n <div\n ref={containerRef}\n id={id}\n style={{ position: \"relative\", width: \"fit-content\", alignSelf: \"flex-start\", height: \"fit-content\" }}\n onKeyDown={handleKeyDown}\n data-testid={testID}\n >\n <div ref={triggerRef} onClick={toggleOpen} onKeyDown={handleTriggerKeyDown} aria-haspopup=\"menu\" aria-expanded={isOpen}>\n {trigger}\n </div>\n {isOpen && (\n <Box\n ref={menuRef}\n position=\"absolute\"\n top=\"100%\"\n {...(align === \"end\" ? { right: 0 } : { left: 0 })}\n marginTop={4}\n backgroundColor={overlayTheme.colors.background.secondary}\n borderColor={overlayTheme.colors.border.secondary}\n borderWidth={1}\n borderRadius={borderRadius !== undefined ? borderRadius : overlayTheme.shape.contextMenu.md.borderRadius}\n paddingVertical={4}\n role=\"menu\"\n {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n style={{\n zIndex: 1000,\n boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\",\n ...(width === \"auto\" ? { minWidth: \"100%\" } : { width }),\n }}\n >\n {children}\n </Box>\n )}\n </div>\n );\n }\n);\n\nexport interface DropdownItemProps extends ThemeOverrideProps {\n children: React.ReactNode;\n onPress?: () => void;\n active?: boolean;\n selected?: boolean;\n disabled?: boolean;\n icon?: React.ReactNode;\n testID?: string;\n}\n\nexport const DropdownItem: React.FC<DropdownItemProps> = ({\n children,\n onPress,\n active,\n selected,\n disabled,\n icon,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme: rawTheme } = useResolvedTheme({ themeMode, themeProductContext });\n const theme = rawTheme as any;\n const brandColors = theme.colors.control.brand.primary;\n const contentColors = theme.colors.content;\n\n const getBackgroundColor = () => {\n if (selected) return brandColors?.bg || theme.colors.control.input.bg;\n if (active) return theme.colors.control.input.bgHover;\n return \"transparent\";\n };\n\n const getContentColor = () => {\n if (selected) return contentColors?.on?.brand || theme.colors.content.primary;\n return theme.colors.content.secondary;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if ((event.key === \"Enter\" || event.key === \" \") && !disabled && onPress) {\n event.preventDefault();\n onPress();\n }\n };\n\n return (\n <Box\n onPress={!disabled ? onPress : undefined}\n paddingHorizontal={16}\n paddingVertical={8}\n flexDirection=\"row\"\n alignItems=\"center\"\n backgroundColor={getBackgroundColor()}\n hoverStyle={\n !disabled && !selected\n ? { backgroundColor: theme.colors.control.input.bgHover }\n : undefined\n }\n role=\"menuitem\"\n tabIndex={disabled ? -1 : 0}\n aria-disabled={disabled}\n onKeyDown={handleKeyDown}\n testID={testID}\n style={{ opacity: disabled ? 0.5 : 1, cursor: disabled ? \"not-allowed\" : \"pointer\" }}\n >\n {icon && (\n <Box marginRight={12} alignItems=\"center\" justifyContent=\"center\">\n {icon}\n </Box>\n )}\n <Box flex={1}>\n <Text color={getContentColor()} fontSize={14} fontWeight=\"400\">\n {children}\n </Text>\n </Box>\n </Box>\n );\n};\n\nDropdown.displayName = \"Dropdown\";\nDropdownItem.displayName = \"DropdownItem\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId || testID || id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","React"]}
package/native/index.mjs CHANGED
@@ -259,10 +259,13 @@ var Dropdown = React.forwardRef(
259
259
  onOpenChange,
260
260
  width = "auto",
261
261
  align = "start",
262
+ borderRadius,
262
263
  "aria-label": ariaLabel,
263
264
  testID,
264
265
  themeMode,
265
- themeProductContext
266
+ themeProductContext,
267
+ overlayThemeMode,
268
+ overlayThemeProductContext
266
269
  }, ref) => {
267
270
  const [internalIsOpen, setInternalIsOpen] = useState(false);
268
271
  const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
@@ -273,18 +276,20 @@ var Dropdown = React.forwardRef(
273
276
  ref,
274
277
  () => containerRef.current
275
278
  );
276
- const { theme } = useResolvedTheme({ themeMode, themeProductContext });
279
+ const { theme: rawTheme } = useResolvedTheme({ themeMode, themeProductContext });
280
+ const theme = rawTheme;
281
+ const { theme: rawOverlayTheme } = useResolvedTheme({
282
+ themeMode: overlayThemeMode ?? themeMode,
283
+ themeProductContext: overlayThemeProductContext ?? themeProductContext
284
+ });
285
+ const overlayTheme = rawOverlayTheme;
277
286
  const closeMenu = useCallback(() => {
278
- if (propIsOpen === void 0) {
279
- setInternalIsOpen(false);
280
- }
287
+ if (propIsOpen === void 0) setInternalIsOpen(false);
281
288
  if (onOpenChange) onOpenChange(false);
282
289
  }, [propIsOpen, onOpenChange]);
283
290
  const toggleOpen = useCallback(() => {
284
291
  const nextOpen = !isOpen;
285
- if (propIsOpen === void 0) {
286
- setInternalIsOpen(nextOpen);
287
- }
292
+ if (propIsOpen === void 0) setInternalIsOpen(nextOpen);
288
293
  if (onOpenChange) onOpenChange(nextOpen);
289
294
  }, [isOpen, propIsOpen, onOpenChange]);
290
295
  const focusTrigger = useCallback(() => {
@@ -292,9 +297,7 @@ var Dropdown = React.forwardRef(
292
297
  const focusable = triggerRef.current.querySelector(
293
298
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
294
299
  );
295
- if (focusable) {
296
- focusable.focus();
297
- }
300
+ if (focusable) focusable.focus();
298
301
  }
299
302
  }, []);
300
303
  const handleKeyDown = useCallback(
@@ -317,9 +320,7 @@ var Dropdown = React.forwardRef(
317
320
  toggleOpen();
318
321
  } else if (event.key === "ArrowDown" && !isOpen) {
319
322
  event.preventDefault();
320
- if (propIsOpen === void 0) {
321
- setInternalIsOpen(true);
322
- }
323
+ if (propIsOpen === void 0) setInternalIsOpen(true);
323
324
  if (onOpenChange) onOpenChange(true);
324
325
  }
325
326
  },
@@ -345,26 +346,11 @@ var Dropdown = React.forwardRef(
345
346
  {
346
347
  ref: containerRef,
347
348
  id,
348
- style: {
349
- position: "relative",
350
- width: "fit-content",
351
- alignSelf: "flex-start",
352
- height: "fit-content"
353
- },
349
+ style: { position: "relative", width: "fit-content", alignSelf: "flex-start", height: "fit-content" },
354
350
  onKeyDown: handleKeyDown,
355
351
  "data-testid": testID,
356
352
  children: [
357
- /* @__PURE__ */ jsx3(
358
- "div",
359
- {
360
- ref: triggerRef,
361
- onClick: toggleOpen,
362
- onKeyDown: handleTriggerKeyDown,
363
- "aria-haspopup": "menu",
364
- "aria-expanded": isOpen,
365
- children: trigger
366
- }
367
- ),
353
+ /* @__PURE__ */ jsx3("div", { ref: triggerRef, onClick: toggleOpen, onKeyDown: handleTriggerKeyDown, "aria-haspopup": "menu", "aria-expanded": isOpen, children: trigger }),
368
354
  isOpen && /* @__PURE__ */ jsx3(
369
355
  Box,
370
356
  {
@@ -373,10 +359,10 @@ var Dropdown = React.forwardRef(
373
359
  top: "100%",
374
360
  ...align === "end" ? { right: 0 } : { left: 0 },
375
361
  marginTop: 4,
376
- backgroundColor: theme.colors.background.secondary,
377
- borderColor: theme.colors.border.secondary,
362
+ backgroundColor: overlayTheme.colors.background.secondary,
363
+ borderColor: overlayTheme.colors.border.secondary,
378
364
  borderWidth: 1,
379
- borderRadius: theme.shape.contextMenu.md.borderRadius,
365
+ borderRadius: borderRadius !== void 0 ? borderRadius : overlayTheme.shape.contextMenu.md.borderRadius,
380
366
  paddingVertical: 4,
381
367
  role: "menu",
382
368
  ...ariaLabel ? { "aria-label": ariaLabel } : {},
@@ -404,22 +390,17 @@ var DropdownItem = ({
404
390
  themeMode,
405
391
  themeProductContext
406
392
  }) => {
407
- const { theme } = useResolvedTheme({ themeMode, themeProductContext });
393
+ const { theme: rawTheme } = useResolvedTheme({ themeMode, themeProductContext });
394
+ const theme = rawTheme;
408
395
  const brandColors = theme.colors.control.brand.primary;
409
396
  const contentColors = theme.colors.content;
410
397
  const getBackgroundColor = () => {
411
- if (selected) {
412
- return brandColors?.bg || theme.colors.control.input.bg;
413
- }
414
- if (active) {
415
- return theme.colors.control.input.bgHover;
416
- }
398
+ if (selected) return brandColors?.bg || theme.colors.control.input.bg;
399
+ if (active) return theme.colors.control.input.bgHover;
417
400
  return "transparent";
418
401
  };
419
402
  const getContentColor = () => {
420
- if (selected) {
421
- return contentColors?.on?.brand || theme.colors.content.primary;
422
- }
403
+ if (selected) return contentColors?.on?.brand || theme.colors.content.primary;
423
404
  return theme.colors.content.secondary;
424
405
  };
425
406
  const handleKeyDown = (event) => {
@@ -437,18 +418,13 @@ var DropdownItem = ({
437
418
  flexDirection: "row",
438
419
  alignItems: "center",
439
420
  backgroundColor: getBackgroundColor(),
440
- hoverStyle: !disabled && !selected ? {
441
- backgroundColor: theme.colors.control.input.bgHover
442
- } : void 0,
421
+ hoverStyle: !disabled && !selected ? { backgroundColor: theme.colors.control.input.bgHover } : void 0,
443
422
  role: "menuitem",
444
423
  tabIndex: disabled ? -1 : 0,
445
424
  "aria-disabled": disabled,
446
425
  onKeyDown: handleKeyDown,
447
426
  testID,
448
- style: {
449
- opacity: disabled ? 0.5 : 1,
450
- cursor: disabled ? "not-allowed" : "pointer"
451
- },
427
+ style: { opacity: disabled ? 0.5 : 1, cursor: disabled ? "not-allowed" : "pointer" },
452
428
  children: [
453
429
  icon && /* @__PURE__ */ jsx3(Box, { marginRight: 12, alignItems: "center", justifyContent: "center", children: icon }),
454
430
  /* @__PURE__ */ jsx3(Box, { flex: 1, children: /* @__PURE__ */ jsx3(Text, { color: getContentColor(), fontSize: 14, fontWeight: "400", children }) })