@xsolla/xui-select 0.172.2-pr359.1781798753 → 0.173.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.
- package/README.md +2 -0
- package/native/index.d.mts +5 -1
- package/native/index.d.ts +5 -1
- package/native/index.js +23 -17
- package/native/index.js.map +1 -1
- package/native/index.mjs +23 -17
- package/native/index.mjs.map +1 -1
- package/package.json +4 -4
- package/web/index.d.mts +5 -1
- package/web/index.d.ts +5 -1
- package/web/index.js +23 -17
- package/web/index.js.map +1 -1
- package/web/index.mjs +23 -17
- package/web/index.mjs.map +1 -1
package/README.md
CHANGED
|
@@ -323,6 +323,8 @@ The main select component. Renders a button trigger with dropdown menu.
|
|
|
323
323
|
| onClear | `() => void` | - | Callback when the clear button is pressed. |
|
|
324
324
|
| maxHeight | `number` | `300` | Maximum height of the dropdown in pixels. |
|
|
325
325
|
| fullWidth | `boolean` | `true` | Whether the select should stretch to fill the full width of its container. |
|
|
326
|
+
| overlayThemeMode | `ThemeMode` | `themeMode` | Theme mode for the dropdown overlay. |
|
|
327
|
+
| overlayThemeProductContext | `ProductContext` | `themeProductContext` | Product context for the dropdown overlay. |
|
|
326
328
|
|
|
327
329
|
**SelectOption Type:**
|
|
328
330
|
|
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 SelectOption {
|
|
5
5
|
label: string;
|
|
@@ -31,6 +31,10 @@ interface SelectProps extends ThemeOverrideProps {
|
|
|
31
31
|
maxHeight?: number;
|
|
32
32
|
fullWidth?: boolean;
|
|
33
33
|
testID?: string;
|
|
34
|
+
/** Theme mode for the dropdown overlay. Defaults to themeMode when not set. */
|
|
35
|
+
overlayThemeMode?: ThemeMode;
|
|
36
|
+
/** Product context for the dropdown overlay. Defaults to themeProductContext when not set. */
|
|
37
|
+
overlayThemeProductContext?: ProductContext;
|
|
34
38
|
}
|
|
35
39
|
declare const Select: React.FC<SelectProps>;
|
|
36
40
|
|
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 SelectOption {
|
|
5
5
|
label: string;
|
|
@@ -31,6 +31,10 @@ interface SelectProps extends ThemeOverrideProps {
|
|
|
31
31
|
maxHeight?: number;
|
|
32
32
|
fullWidth?: boolean;
|
|
33
33
|
testID?: string;
|
|
34
|
+
/** Theme mode for the dropdown overlay. Defaults to themeMode when not set. */
|
|
35
|
+
overlayThemeMode?: ThemeMode;
|
|
36
|
+
/** Product context for the dropdown overlay. Defaults to themeProductContext when not set. */
|
|
37
|
+
overlayThemeProductContext?: ProductContext;
|
|
34
38
|
}
|
|
35
39
|
declare const Select: React.FC<SelectProps>;
|
|
36
40
|
|
package/native/index.js
CHANGED
|
@@ -338,9 +338,17 @@ var Select = ({
|
|
|
338
338
|
fullWidth = true,
|
|
339
339
|
testID,
|
|
340
340
|
themeMode,
|
|
341
|
-
themeProductContext
|
|
341
|
+
themeProductContext,
|
|
342
|
+
overlayThemeMode,
|
|
343
|
+
overlayThemeProductContext
|
|
342
344
|
}) => {
|
|
343
|
-
const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
345
|
+
const { theme: rawTheme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
346
|
+
const theme = rawTheme;
|
|
347
|
+
const { theme: rawOverlayTheme } = (0, import_xui_core.useResolvedTheme)({
|
|
348
|
+
themeMode: overlayThemeMode ?? themeMode,
|
|
349
|
+
themeProductContext: overlayThemeProductContext ?? themeProductContext
|
|
350
|
+
});
|
|
351
|
+
const overlayTheme = rawOverlayTheme;
|
|
344
352
|
const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
|
|
345
353
|
const [selectedValue, setSelectedValue] = (0, import_react2.useState)(value);
|
|
346
354
|
const [searchValue, setSearchValue] = (0, import_react2.useState)("");
|
|
@@ -387,6 +395,7 @@ var Select = ({
|
|
|
387
395
|
) : options;
|
|
388
396
|
const sizeStyles = theme.sizing.input(size);
|
|
389
397
|
const inputColors = theme.colors.control.input;
|
|
398
|
+
const overlayInputColors = overlayTheme.colors.control.input;
|
|
390
399
|
const handlePress = () => {
|
|
391
400
|
if (!isDisable) {
|
|
392
401
|
if (onPress) onPress();
|
|
@@ -492,10 +501,10 @@ var Select = ({
|
|
|
492
501
|
position: "absolute",
|
|
493
502
|
top: sizeStyles.height + (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) + sizeStyles.fieldGap,
|
|
494
503
|
width: "100%",
|
|
495
|
-
backgroundColor:
|
|
496
|
-
borderColor:
|
|
504
|
+
backgroundColor: overlayTheme.colors.background.secondary,
|
|
505
|
+
borderColor: overlayTheme.colors.border.secondary,
|
|
497
506
|
borderWidth: 1,
|
|
498
|
-
borderRadius:
|
|
507
|
+
borderRadius: overlayTheme.shape.contextMenu[size].borderRadius,
|
|
499
508
|
style: {
|
|
500
509
|
zIndex: 1e3,
|
|
501
510
|
...isNative ? { elevation: 4 } : { boxShadow: "0 4px 12px rgba(0,0,0,0.1)" },
|
|
@@ -508,9 +517,9 @@ var Select = ({
|
|
|
508
517
|
paddingHorizontal: sizeStyles.paddingHorizontal,
|
|
509
518
|
paddingVertical: sizeStyles.paddingVertical,
|
|
510
519
|
borderBottomWidth: 1,
|
|
511
|
-
borderColor:
|
|
520
|
+
borderColor: overlayTheme.colors.border.secondary,
|
|
512
521
|
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: sizeStyles.paddingHorizontal / 2, paddingHorizontal: 4, children: [
|
|
513
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize - 2, color:
|
|
522
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize - 2, color: overlayInputColors.placeholder, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons_base.Search, {}) }),
|
|
514
523
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
515
524
|
Box,
|
|
516
525
|
{
|
|
@@ -525,7 +534,7 @@ var Select = ({
|
|
|
525
534
|
border: "none",
|
|
526
535
|
outline: "none",
|
|
527
536
|
background: "transparent",
|
|
528
|
-
color:
|
|
537
|
+
color: overlayInputColors.text,
|
|
529
538
|
fontSize: sizeStyles.fontSize,
|
|
530
539
|
width: "100%"
|
|
531
540
|
}
|
|
@@ -539,17 +548,14 @@ var Select = ({
|
|
|
539
548
|
{
|
|
540
549
|
paddingVertical: 4,
|
|
541
550
|
overflow: "scroll",
|
|
542
|
-
style: {
|
|
543
|
-
|
|
544
|
-
...isWeb ? { overflowY: "auto" } : {}
|
|
545
|
-
},
|
|
546
|
-
children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { paddingVertical: sizeStyles.paddingVertical * 2, paddingHorizontal: sizeStyles.paddingHorizontal, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: theme.colors.content.tertiary, fontSize: sizeStyles.fontSize, children: noOptionsMessage }) }) : filteredOptions.map((option, index) => {
|
|
551
|
+
style: { maxHeight: searchable ? maxHeight - 60 : maxHeight, ...isWeb ? { overflowY: "auto" } : {} },
|
|
552
|
+
children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { paddingVertical: sizeStyles.paddingVertical * 2, paddingHorizontal: sizeStyles.paddingHorizontal, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text, { color: overlayTheme.colors.content.tertiary, fontSize: sizeStyles.fontSize, children: noOptionsMessage }) }) : filteredOptions.map((option, index) => {
|
|
547
553
|
const optionValue = getOptionValue(option);
|
|
548
554
|
const optionLabel = getOptionLabel(option);
|
|
549
555
|
const isOptionDisabled = getOptionDisabled(option);
|
|
550
556
|
const isSelected = optionValue === selectedValue;
|
|
551
|
-
const brandColors =
|
|
552
|
-
const contentColors =
|
|
557
|
+
const brandColors = overlayTheme.colors.control.brand.primary;
|
|
558
|
+
const contentColors = overlayTheme.colors.content;
|
|
553
559
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
554
560
|
Box,
|
|
555
561
|
{
|
|
@@ -566,11 +572,11 @@ var Select = ({
|
|
|
566
572
|
...isWeb ? { cursor: isOptionDisabled ? "not-allowed" : "pointer" } : {},
|
|
567
573
|
opacity: isOptionDisabled ? 0.5 : 1
|
|
568
574
|
},
|
|
569
|
-
hoverStyle: !isSelected && !isOptionDisabled ? { backgroundColor:
|
|
575
|
+
hoverStyle: !isSelected && !isOptionDisabled ? { backgroundColor: overlayInputColors.bgHover } : void 0,
|
|
570
576
|
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
571
577
|
Text,
|
|
572
578
|
{
|
|
573
|
-
color: isSelected ? contentColors.on.brand :
|
|
579
|
+
color: isSelected ? contentColors.on.brand : overlayTheme.colors.content.secondary,
|
|
574
580
|
fontSize: sizeStyles.fontSize,
|
|
575
581
|
fontWeight: "400",
|
|
576
582
|
children: optionLabel
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Select.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/index.tsx"],"sourcesContent":["export * from \"./Select\";\n","import React, { useState, useRef, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon, isWeb, isNative } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n ChevronDown,\n ChevronUp,\n ExclamationMarkCr,\n Remove,\n Search as SearchIcon,\n} from \"@xsolla/xui-icons-base\";\n\nexport interface SelectOption {\n label: string;\n value: any;\n disabled?: boolean;\n}\n\nexport interface SelectProps extends ThemeOverrideProps {\n value?: string;\n placeholder?: string;\n onPress?: () => void;\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n state?: \"default\" | \"hover\" | \"focus\" | \"disable\" | \"error\";\n disabled?: boolean;\n label?: string;\n errorMessage?: string;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n filled?: boolean;\n iconOnly?: boolean;\n options?: (string | SelectOption)[];\n onChange?: (value: string) => void;\n searchable?: boolean;\n searchPlaceholder?: string;\n noOptionsMessage?: string;\n /** Show a clear button to reset the selected value (field variant only) */\n clearable?: boolean;\n /** Called when the clear button is pressed */\n onClear?: () => void;\n maxHeight?: number;\n fullWidth?: boolean;\n testID?: string;\n}\n\nexport const Select: React.FC<SelectProps> = ({\n value,\n placeholder = \"Select\",\n onPress,\n size = \"md\",\n state: externalState,\n disabled = false,\n label,\n errorMessage,\n iconLeft,\n iconRight,\n filled = true,\n iconOnly = false,\n options = [],\n onChange,\n searchable = false,\n searchPlaceholder = \"Search\",\n noOptionsMessage = \"No results\",\n clearable = false,\n onClear,\n maxHeight = 300,\n fullWidth = true,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const [isOpen, setIsOpen] = useState(false);\n const [selectedValue, setSelectedValue] = useState<string | undefined>(value);\n const [searchValue, setSearchValue] = useState(\"\");\n const containerRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const selectedItemRef = useRef<HTMLDivElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n const isDisable = externalState === \"disable\" || disabled;\n const isError = externalState === \"error\" || !!errorMessage;\n const isFocus = externalState === \"focus\" || isOpen;\n\n React.useEffect(() => {\n if (value !== undefined) setSelectedValue(value);\n }, [value]);\n\n useEffect(() => {\n if (isFocus && selectedItemRef.current && dropdownRef.current) {\n const timeoutId = setTimeout(() => {\n const selectedItem = selectedItemRef.current;\n if (selectedItem && isWeb) selectedItem.scrollIntoView({ block: \"nearest\" });\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [isFocus]);\n\n useEffect(() => {\n if (isFocus && searchable) searchInputRef.current?.focus();\n }, [isFocus, searchable]);\n\n useEffect(() => {\n if (!isFocus) setSearchValue(\"\");\n }, [isFocus]);\n\n useEffect(() => {\n if (isNative || !isOpen) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n const getOptionLabel = (option: string | SelectOption) =>\n typeof option === \"string\" ? option : option.label;\n const getOptionValue = (option: string | SelectOption) =>\n typeof option === \"string\" ? option : option.value;\n const getOptionDisabled = (option: string | SelectOption) =>\n typeof option === \"string\" ? false : option.disabled || false;\n\n const filteredOptions =\n searchable && searchValue\n ? options.filter((option) =>\n getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())\n )\n : options;\n\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handlePress = () => {\n if (!isDisable) {\n if (onPress) onPress();\n setIsOpen(!isOpen);\n }\n };\n\n const handleSelect = (option: string | SelectOption) => {\n if (getOptionDisabled(option)) return;\n const val = getOptionValue(option);\n setSelectedValue(val);\n setIsOpen(false);\n if (onChange) onChange(val);\n };\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (isDisable) return;\n setSelectedValue(undefined);\n if (onChange) onChange(\"\");\n if (onClear) onClear();\n };\n\n const isHover = externalState === \"hover\";\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n borderColor = isError ? theme.colors.border.alert : theme.colors.border.brand;\n } else if (isError) {\n borderColor = theme.colors.border.alert;\n } else if (isHover) {\n backgroundColor = inputColors.bgHover;\n borderColor = inputColors.borderHover;\n }\n\n if (filled === false && !isFocus && !isError && !isHover) {\n backgroundColor = \"transparent\";\n }\n\n const currentLabel = selectedValue\n ? getOptionLabel(\n options.find((o) => getOptionValue(o) === selectedValue) || selectedValue\n )\n : placeholder;\n\n const textColor = isDisable\n ? inputColors.textDisable\n : selectedValue\n ? inputColors.text\n : inputColors.placeholder;\n const iconColor = isDisable ? inputColors.textDisable : inputColors.text;\n\n return (\n <Box\n testID={testID}\n ref={containerRef}\n flexDirection=\"column\"\n gap={sizeStyles.fieldGap}\n width={fullWidth ? \"100%\" : undefined}\n position=\"relative\"\n >\n {label && (\n <Text color={theme.colors.content.secondary} fontSize={sizeStyles.fontSize - 2} fontWeight=\"500\">\n {label}\n </Text>\n )}\n <Box\n onPress={handlePress}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={sizeStyles.radius}\n height={sizeStyles.height}\n width={iconOnly ? sizeStyles.height : \"100%\"}\n paddingHorizontal={iconOnly ? 0 : sizeStyles.paddingHorizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent={iconOnly ? \"center\" : \"flex-start\"}\n gap={iconOnly ? 4 : 12}\n position=\"relative\"\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? { backgroundColor: inputColors.bgHover, borderColor: inputColors.borderHover }\n : undefined\n }\n >\n {iconLeft && (\n <Box alignItems=\"center\" justifyContent=\"center\">\n <Icon size={sizeStyles.iconSize} color={iconColor}>{iconLeft}</Icon>\n </Box>\n )}\n {!iconOnly && (\n <Box flex={1} height=\"100%\" justifyContent=\"center\" overflow=\"hidden\" overflowX=\"hidden\">\n <Text color={textColor} fontSize={sizeStyles.fontSize} numberOfLines={1} style={{ whiteSpace: \"nowrap\" }}>\n {currentLabel}\n </Text>\n </Box>\n )}\n <Box flexDirection=\"row\" alignItems=\"center\" gap={4}>\n {/* Clear button (field variant only) */}\n {clearable && !iconOnly && !isDisable && selectedValue && (\n <Box\n onPress={handleClear}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={isWeb ? { cursor: \"pointer\" } : undefined}\n >\n <Remove\n size={sizeStyles.iconSize}\n color={iconColor}\n variant=\"line\"\n />\n </Box>\n )}\n\n {/* Error icon */}\n {isError && (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.alert.primary}>\n <ExclamationMarkCr />\n </Icon>\n )}\n {iconRight !== undefined ? (\n <Icon size={sizeStyles.iconSize} color={iconColor}>{iconRight}</Icon>\n ) : isFocus ? (\n <ChevronUp size={sizeStyles.iconSize} color={iconColor} variant=\"line\" />\n ) : (\n <ChevronDown size={sizeStyles.iconSize} color={iconColor} variant=\"line\" />\n )}\n </Box>\n </Box>\n\n {isFocus && options.length > 0 && (\n <Box\n ref={dropdownRef}\n position=\"absolute\"\n top={\n sizeStyles.height +\n (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) +\n sizeStyles.fieldGap\n }\n width=\"100%\"\n backgroundColor={theme.colors.background.secondary}\n borderColor={theme.colors.border.secondary}\n borderWidth={1}\n borderRadius={theme.shape.contextMenu[size].borderRadius}\n style={{\n zIndex: 1000,\n ...(isNative ? { elevation: 4 } : { boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\" }),\n minWidth: iconOnly ? sizeStyles.height * 3 : undefined,\n }}\n >\n {searchable && !isNative && (\n <Box\n paddingHorizontal={sizeStyles.paddingHorizontal}\n paddingVertical={sizeStyles.paddingVertical}\n borderBottomWidth={1}\n borderColor={theme.colors.border.secondary}\n >\n <Box flexDirection=\"row\" alignItems=\"center\" gap={sizeStyles.paddingHorizontal / 2} paddingHorizontal={4}>\n <Icon size={sizeStyles.iconSize - 2} color={inputColors.placeholder}>\n <SearchIcon />\n </Icon>\n <Box\n as=\"input\"\n ref={searchInputRef}\n flex={1}\n type=\"text\"\n value={searchValue}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value)}\n placeholder={searchPlaceholder}\n style={{\n border: \"none\",\n outline: \"none\",\n background: \"transparent\",\n color: inputColors.text,\n fontSize: sizeStyles.fontSize,\n width: \"100%\",\n }}\n />\n </Box>\n </Box>\n )}\n <Box\n paddingVertical={4}\n overflow=\"scroll\"\n style={{\n maxHeight: searchable ? maxHeight - 60 : maxHeight,\n ...(isWeb ? { overflowY: \"auto\" } : {}),\n }}\n >\n {filteredOptions.length === 0 ? (\n <Box paddingVertical={sizeStyles.paddingVertical * 2} paddingHorizontal={sizeStyles.paddingHorizontal} alignItems=\"center\">\n <Text color={theme.colors.content.tertiary} fontSize={sizeStyles.fontSize}>\n {noOptionsMessage}\n </Text>\n </Box>\n ) : (\n filteredOptions.map((option, index) => {\n const optionValue = getOptionValue(option);\n const optionLabel = getOptionLabel(option);\n const isOptionDisabled = getOptionDisabled(option);\n const isSelected = optionValue === selectedValue;\n const brandColors = theme.colors.control.brand.primary;\n const contentColors = theme.colors.content;\n return (\n <Box\n testID={testID}\n key={index}\n ref={isSelected ? selectedItemRef : undefined}\n paddingVertical={sizeStyles.paddingVertical}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n onPress={isOptionDisabled ? undefined : () => handleSelect(option)}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n backgroundColor={isSelected ? brandColors.bg : \"transparent\"}\n style={{\n ...(isWeb ? { cursor: isOptionDisabled ? \"not-allowed\" : \"pointer\" } : {}),\n opacity: isOptionDisabled ? 0.5 : 1,\n }}\n hoverStyle={\n !isSelected && !isOptionDisabled\n ? { backgroundColor: theme.colors.control.input.bgHover }\n : undefined\n }\n >\n <Text\n color={isSelected ? contentColors.on.brand : theme.colors.content.secondary}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"400\"\n >\n {optionLabel}\n </Text>\n </Box>\n );\n })\n )}\n </Box>\n </Box>\n )}\n\n {isError && errorMessage && (\n <Text color={theme.colors.content.alert.primary} fontSize={sizeStyles.fontSize - 2} style={{ lineHeight: sizeStyles.lineHeight + \"px\" }}>\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n};\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","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n color,\n size,\n testID,\n \"data-testid\": dataTestId,\n}) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return (\n <View style={style} testID={dataTestId || testID}>\n {childrenWithProps}\n </View>\n );\n};\n","export * from \"./Box\";\nexport * from \"./Text\";\nexport * from \"./Spinner\";\nexport * from \"./Icon\";\nexport * from \"./Divider\";\nexport * from \"./Input\";\nexport * from \"./TextArea\";\nexport * from \"./LinearGradient\";\n\nexport const isWeb = false;\nexport const isNative = true;\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime","React","SearchIcon"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/Select.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/index.tsx"],"sourcesContent":["export * from \"./Select\";\n","import React, { useState, useRef, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon, isWeb, isNative } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps, type ThemeMode, type ProductContext } from \"@xsolla/xui-core\";\nimport {\n ChevronDown,\n ChevronUp,\n ExclamationMarkCr,\n Remove,\n Search as SearchIcon,\n} from \"@xsolla/xui-icons-base\";\n\nexport interface SelectOption {\n label: string;\n value: any;\n disabled?: boolean;\n}\n\nexport interface SelectProps extends ThemeOverrideProps {\n value?: string;\n placeholder?: string;\n onPress?: () => void;\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n state?: \"default\" | \"hover\" | \"focus\" | \"disable\" | \"error\";\n disabled?: boolean;\n label?: string;\n errorMessage?: string;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n filled?: boolean;\n iconOnly?: boolean;\n options?: (string | SelectOption)[];\n onChange?: (value: string) => void;\n searchable?: boolean;\n searchPlaceholder?: string;\n noOptionsMessage?: string;\n /** Show a clear button to reset the selected value (field variant only) */\n clearable?: boolean;\n /** Called when the clear button is pressed */\n onClear?: () => void;\n maxHeight?: number;\n fullWidth?: boolean;\n testID?: string;\n /** Theme mode for the dropdown overlay. Defaults to themeMode when not set. */\n overlayThemeMode?: ThemeMode;\n /** Product context for the dropdown overlay. Defaults to themeProductContext when not set. */\n overlayThemeProductContext?: ProductContext;\n}\n\nexport const Select: React.FC<SelectProps> = ({\n value,\n placeholder = \"Select\",\n onPress,\n size = \"md\",\n state: externalState,\n disabled = false,\n label,\n errorMessage,\n iconLeft,\n iconRight,\n filled = true,\n iconOnly = false,\n options = [],\n onChange,\n searchable = false,\n searchPlaceholder = \"Search\",\n noOptionsMessage = \"No results\",\n clearable = false,\n onClear,\n maxHeight = 300,\n fullWidth = true,\n testID,\n themeMode,\n themeProductContext,\n overlayThemeMode,\n overlayThemeProductContext,\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 const [isOpen, setIsOpen] = useState(false);\n const [selectedValue, setSelectedValue] = useState<string | undefined>(value);\n const [searchValue, setSearchValue] = useState(\"\");\n const containerRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const selectedItemRef = useRef<HTMLDivElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n const isDisable = externalState === \"disable\" || disabled;\n const isError = externalState === \"error\" || !!errorMessage;\n const isFocus = externalState === \"focus\" || isOpen;\n\n React.useEffect(() => {\n if (value !== undefined) setSelectedValue(value);\n }, [value]);\n\n useEffect(() => {\n if (isFocus && selectedItemRef.current && dropdownRef.current) {\n const timeoutId = setTimeout(() => {\n const selectedItem = selectedItemRef.current;\n if (selectedItem && isWeb) selectedItem.scrollIntoView({ block: \"nearest\" });\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [isFocus]);\n\n useEffect(() => {\n if (isFocus && searchable) searchInputRef.current?.focus();\n }, [isFocus, searchable]);\n\n useEffect(() => {\n if (!isFocus) setSearchValue(\"\");\n }, [isFocus]);\n\n useEffect(() => {\n if (isNative || !isOpen) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n const getOptionLabel = (option: string | SelectOption) =>\n typeof option === \"string\" ? option : option.label;\n const getOptionValue = (option: string | SelectOption) =>\n typeof option === \"string\" ? option : option.value;\n const getOptionDisabled = (option: string | SelectOption) =>\n typeof option === \"string\" ? false : option.disabled || false;\n\n const filteredOptions =\n searchable && searchValue\n ? options.filter((option) =>\n getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())\n )\n : options;\n\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n const overlayInputColors = overlayTheme.colors.control.input;\n\n const handlePress = () => {\n if (!isDisable) {\n if (onPress) onPress();\n setIsOpen(!isOpen);\n }\n };\n\n const handleSelect = (option: string | SelectOption) => {\n if (getOptionDisabled(option)) return;\n const val = getOptionValue(option);\n setSelectedValue(val);\n setIsOpen(false);\n if (onChange) onChange(val);\n };\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (isDisable) return;\n setSelectedValue(undefined);\n if (onChange) onChange(\"\");\n if (onClear) onClear();\n };\n\n const isHover = externalState === \"hover\";\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n borderColor = isError ? theme.colors.border.alert : theme.colors.border.brand;\n } else if (isError) {\n borderColor = theme.colors.border.alert;\n } else if (isHover) {\n backgroundColor = inputColors.bgHover;\n borderColor = inputColors.borderHover;\n }\n\n if (filled === false && !isFocus && !isError && !isHover) {\n backgroundColor = \"transparent\";\n }\n\n const currentLabel = selectedValue\n ? getOptionLabel(\n options.find((o) => getOptionValue(o) === selectedValue) || selectedValue\n )\n : placeholder;\n\n const textColor = isDisable\n ? inputColors.textDisable\n : selectedValue\n ? inputColors.text\n : inputColors.placeholder;\n const iconColor = isDisable ? inputColors.textDisable : inputColors.text;\n\n return (\n <Box\n testID={testID}\n ref={containerRef}\n flexDirection=\"column\"\n gap={sizeStyles.fieldGap}\n width={fullWidth ? \"100%\" : undefined}\n position=\"relative\"\n >\n {label && (\n <Text color={theme.colors.content.secondary} fontSize={sizeStyles.fontSize - 2} fontWeight=\"500\">\n {label}\n </Text>\n )}\n <Box\n onPress={handlePress}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={sizeStyles.radius}\n height={sizeStyles.height}\n width={iconOnly ? sizeStyles.height : \"100%\"}\n paddingHorizontal={iconOnly ? 0 : sizeStyles.paddingHorizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent={iconOnly ? \"center\" : \"flex-start\"}\n gap={iconOnly ? 4 : 12}\n position=\"relative\"\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? { backgroundColor: inputColors.bgHover, borderColor: inputColors.borderHover }\n : undefined\n }\n >\n {iconLeft && (\n <Box alignItems=\"center\" justifyContent=\"center\">\n <Icon size={sizeStyles.iconSize} color={iconColor}>{iconLeft}</Icon>\n </Box>\n )}\n {!iconOnly && (\n <Box flex={1} height=\"100%\" justifyContent=\"center\" overflow=\"hidden\" overflowX=\"hidden\">\n <Text color={textColor} fontSize={sizeStyles.fontSize} numberOfLines={1} style={{ whiteSpace: \"nowrap\" }}>\n {currentLabel}\n </Text>\n </Box>\n )}\n <Box flexDirection=\"row\" alignItems=\"center\" gap={4}>\n {/* Clear button (field variant only) */}\n {clearable && !iconOnly && !isDisable && selectedValue && (\n <Box\n onPress={handleClear}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={isWeb ? { cursor: \"pointer\" } : undefined}\n >\n <Remove\n size={sizeStyles.iconSize}\n color={iconColor}\n variant=\"line\"\n />\n </Box>\n )}\n\n {/* Error icon */}\n {isError && (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.alert.primary}>\n <ExclamationMarkCr />\n </Icon>\n )}\n {iconRight !== undefined ? (\n <Icon size={sizeStyles.iconSize} color={iconColor}>{iconRight}</Icon>\n ) : isFocus ? (\n <ChevronUp size={sizeStyles.iconSize} color={iconColor} variant=\"line\" />\n ) : (\n <ChevronDown size={sizeStyles.iconSize} color={iconColor} variant=\"line\" />\n )}\n </Box>\n </Box>\n\n {isFocus && options.length > 0 && (\n <Box\n ref={dropdownRef}\n position=\"absolute\"\n top={sizeStyles.height + (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) + sizeStyles.fieldGap}\n width=\"100%\"\n backgroundColor={overlayTheme.colors.background.secondary}\n borderColor={overlayTheme.colors.border.secondary}\n borderWidth={1}\n borderRadius={overlayTheme.shape.contextMenu[size].borderRadius}\n style={{\n zIndex: 1000,\n ...(isNative ? { elevation: 4 } : { boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\" }),\n minWidth: iconOnly ? sizeStyles.height * 3 : undefined,\n }}\n >\n {searchable && !isNative && (\n <Box\n paddingHorizontal={sizeStyles.paddingHorizontal}\n paddingVertical={sizeStyles.paddingVertical}\n borderBottomWidth={1}\n borderColor={overlayTheme.colors.border.secondary}\n >\n <Box flexDirection=\"row\" alignItems=\"center\" gap={sizeStyles.paddingHorizontal / 2} paddingHorizontal={4}>\n <Icon size={sizeStyles.iconSize - 2} color={overlayInputColors.placeholder}>\n <SearchIcon />\n </Icon>\n <Box\n as=\"input\"\n ref={searchInputRef}\n flex={1}\n type=\"text\"\n value={searchValue}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value)}\n placeholder={searchPlaceholder}\n style={{\n border: \"none\",\n outline: \"none\",\n background: \"transparent\",\n color: overlayInputColors.text,\n fontSize: sizeStyles.fontSize,\n width: \"100%\",\n }}\n />\n </Box>\n </Box>\n )}\n <Box\n paddingVertical={4}\n overflow=\"scroll\"\n style={{ maxHeight: searchable ? maxHeight - 60 : maxHeight, ...(isWeb ? { overflowY: \"auto\" } : {}) }}\n >\n {filteredOptions.length === 0 ? (\n <Box paddingVertical={sizeStyles.paddingVertical * 2} paddingHorizontal={sizeStyles.paddingHorizontal} alignItems=\"center\">\n <Text color={overlayTheme.colors.content.tertiary} fontSize={sizeStyles.fontSize}>\n {noOptionsMessage}\n </Text>\n </Box>\n ) : (\n filteredOptions.map((option, index) => {\n const optionValue = getOptionValue(option);\n const optionLabel = getOptionLabel(option);\n const isOptionDisabled = getOptionDisabled(option);\n const isSelected = optionValue === selectedValue;\n const brandColors = overlayTheme.colors.control.brand.primary;\n const contentColors = overlayTheme.colors.content;\n return (\n <Box\n testID={testID}\n key={index}\n ref={isSelected ? selectedItemRef : undefined}\n paddingVertical={sizeStyles.paddingVertical}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n onPress={isOptionDisabled ? undefined : () => handleSelect(option)}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n backgroundColor={isSelected ? brandColors.bg : \"transparent\"}\n style={{\n ...(isWeb ? { cursor: isOptionDisabled ? \"not-allowed\" : \"pointer\" } : {}),\n opacity: isOptionDisabled ? 0.5 : 1,\n }}\n hoverStyle={\n !isSelected && !isOptionDisabled\n ? { backgroundColor: overlayInputColors.bgHover }\n : undefined\n }\n >\n <Text\n color={isSelected ? contentColors.on.brand : overlayTheme.colors.content.secondary}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"400\"\n >\n {optionLabel}\n </Text>\n </Box>\n );\n })\n )}\n </Box>\n </Box>\n )}\n\n {isError && errorMessage && (\n <Text color={theme.colors.content.alert.primary} fontSize={sizeStyles.fontSize - 2} style={{ lineHeight: sizeStyles.lineHeight + \"px\" }}>\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n};\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","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n color,\n size,\n testID,\n \"data-testid\": dataTestId,\n}) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return (\n <View style={style} testID={dataTestId || testID}>\n {childrenWithProps}\n </View>\n );\n};\n","export * from \"./Box\";\nexport * from \"./Text\";\nexport * from \"./Spinner\";\nexport * from \"./Icon\";\nexport * from \"./Divider\";\nexport * from \"./Input\";\nexport * from \"./TextArea\";\nexport * from \"./LinearGradient\";\n\nexport const isWeb = false;\nexport const isNative = true;\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime","React","SearchIcon"]}
|
package/native/index.mjs
CHANGED
|
@@ -315,9 +315,17 @@ var Select = ({
|
|
|
315
315
|
fullWidth = true,
|
|
316
316
|
testID,
|
|
317
317
|
themeMode,
|
|
318
|
-
themeProductContext
|
|
318
|
+
themeProductContext,
|
|
319
|
+
overlayThemeMode,
|
|
320
|
+
overlayThemeProductContext
|
|
319
321
|
}) => {
|
|
320
|
-
const { theme } = useResolvedTheme({ themeMode, themeProductContext });
|
|
322
|
+
const { theme: rawTheme } = useResolvedTheme({ themeMode, themeProductContext });
|
|
323
|
+
const theme = rawTheme;
|
|
324
|
+
const { theme: rawOverlayTheme } = useResolvedTheme({
|
|
325
|
+
themeMode: overlayThemeMode ?? themeMode,
|
|
326
|
+
themeProductContext: overlayThemeProductContext ?? themeProductContext
|
|
327
|
+
});
|
|
328
|
+
const overlayTheme = rawOverlayTheme;
|
|
321
329
|
const [isOpen, setIsOpen] = useState(false);
|
|
322
330
|
const [selectedValue, setSelectedValue] = useState(value);
|
|
323
331
|
const [searchValue, setSearchValue] = useState("");
|
|
@@ -364,6 +372,7 @@ var Select = ({
|
|
|
364
372
|
) : options;
|
|
365
373
|
const sizeStyles = theme.sizing.input(size);
|
|
366
374
|
const inputColors = theme.colors.control.input;
|
|
375
|
+
const overlayInputColors = overlayTheme.colors.control.input;
|
|
367
376
|
const handlePress = () => {
|
|
368
377
|
if (!isDisable) {
|
|
369
378
|
if (onPress) onPress();
|
|
@@ -469,10 +478,10 @@ var Select = ({
|
|
|
469
478
|
position: "absolute",
|
|
470
479
|
top: sizeStyles.height + (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) + sizeStyles.fieldGap,
|
|
471
480
|
width: "100%",
|
|
472
|
-
backgroundColor:
|
|
473
|
-
borderColor:
|
|
481
|
+
backgroundColor: overlayTheme.colors.background.secondary,
|
|
482
|
+
borderColor: overlayTheme.colors.border.secondary,
|
|
474
483
|
borderWidth: 1,
|
|
475
|
-
borderRadius:
|
|
484
|
+
borderRadius: overlayTheme.shape.contextMenu[size].borderRadius,
|
|
476
485
|
style: {
|
|
477
486
|
zIndex: 1e3,
|
|
478
487
|
...isNative ? { elevation: 4 } : { boxShadow: "0 4px 12px rgba(0,0,0,0.1)" },
|
|
@@ -485,9 +494,9 @@ var Select = ({
|
|
|
485
494
|
paddingHorizontal: sizeStyles.paddingHorizontal,
|
|
486
495
|
paddingVertical: sizeStyles.paddingVertical,
|
|
487
496
|
borderBottomWidth: 1,
|
|
488
|
-
borderColor:
|
|
497
|
+
borderColor: overlayTheme.colors.border.secondary,
|
|
489
498
|
children: /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: sizeStyles.paddingHorizontal / 2, paddingHorizontal: 4, children: [
|
|
490
|
-
/* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize - 2, color:
|
|
499
|
+
/* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize - 2, color: overlayInputColors.placeholder, children: /* @__PURE__ */ jsx4(SearchIcon, {}) }),
|
|
491
500
|
/* @__PURE__ */ jsx4(
|
|
492
501
|
Box,
|
|
493
502
|
{
|
|
@@ -502,7 +511,7 @@ var Select = ({
|
|
|
502
511
|
border: "none",
|
|
503
512
|
outline: "none",
|
|
504
513
|
background: "transparent",
|
|
505
|
-
color:
|
|
514
|
+
color: overlayInputColors.text,
|
|
506
515
|
fontSize: sizeStyles.fontSize,
|
|
507
516
|
width: "100%"
|
|
508
517
|
}
|
|
@@ -516,17 +525,14 @@ var Select = ({
|
|
|
516
525
|
{
|
|
517
526
|
paddingVertical: 4,
|
|
518
527
|
overflow: "scroll",
|
|
519
|
-
style: {
|
|
520
|
-
|
|
521
|
-
...isWeb ? { overflowY: "auto" } : {}
|
|
522
|
-
},
|
|
523
|
-
children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx4(Box, { paddingVertical: sizeStyles.paddingVertical * 2, paddingHorizontal: sizeStyles.paddingHorizontal, alignItems: "center", children: /* @__PURE__ */ jsx4(Text, { color: theme.colors.content.tertiary, fontSize: sizeStyles.fontSize, children: noOptionsMessage }) }) : filteredOptions.map((option, index) => {
|
|
528
|
+
style: { maxHeight: searchable ? maxHeight - 60 : maxHeight, ...isWeb ? { overflowY: "auto" } : {} },
|
|
529
|
+
children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx4(Box, { paddingVertical: sizeStyles.paddingVertical * 2, paddingHorizontal: sizeStyles.paddingHorizontal, alignItems: "center", children: /* @__PURE__ */ jsx4(Text, { color: overlayTheme.colors.content.tertiary, fontSize: sizeStyles.fontSize, children: noOptionsMessage }) }) : filteredOptions.map((option, index) => {
|
|
524
530
|
const optionValue = getOptionValue(option);
|
|
525
531
|
const optionLabel = getOptionLabel(option);
|
|
526
532
|
const isOptionDisabled = getOptionDisabled(option);
|
|
527
533
|
const isSelected = optionValue === selectedValue;
|
|
528
|
-
const brandColors =
|
|
529
|
-
const contentColors =
|
|
534
|
+
const brandColors = overlayTheme.colors.control.brand.primary;
|
|
535
|
+
const contentColors = overlayTheme.colors.content;
|
|
530
536
|
return /* @__PURE__ */ jsx4(
|
|
531
537
|
Box,
|
|
532
538
|
{
|
|
@@ -543,11 +549,11 @@ var Select = ({
|
|
|
543
549
|
...isWeb ? { cursor: isOptionDisabled ? "not-allowed" : "pointer" } : {},
|
|
544
550
|
opacity: isOptionDisabled ? 0.5 : 1
|
|
545
551
|
},
|
|
546
|
-
hoverStyle: !isSelected && !isOptionDisabled ? { backgroundColor:
|
|
552
|
+
hoverStyle: !isSelected && !isOptionDisabled ? { backgroundColor: overlayInputColors.bgHover } : void 0,
|
|
547
553
|
children: /* @__PURE__ */ jsx4(
|
|
548
554
|
Text,
|
|
549
555
|
{
|
|
550
|
-
color: isSelected ? contentColors.on.brand :
|
|
556
|
+
color: isSelected ? contentColors.on.brand : overlayTheme.colors.content.secondary,
|
|
551
557
|
fontSize: sizeStyles.fontSize,
|
|
552
558
|
fontWeight: "400",
|
|
553
559
|
children: optionLabel
|
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Select.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon, isWeb, isNative } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n ChevronDown,\n ChevronUp,\n ExclamationMarkCr,\n Remove,\n Search as SearchIcon,\n} from \"@xsolla/xui-icons-base\";\n\nexport interface SelectOption {\n label: string;\n value: any;\n disabled?: boolean;\n}\n\nexport interface SelectProps extends ThemeOverrideProps {\n value?: string;\n placeholder?: string;\n onPress?: () => void;\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n state?: \"default\" | \"hover\" | \"focus\" | \"disable\" | \"error\";\n disabled?: boolean;\n label?: string;\n errorMessage?: string;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n filled?: boolean;\n iconOnly?: boolean;\n options?: (string | SelectOption)[];\n onChange?: (value: string) => void;\n searchable?: boolean;\n searchPlaceholder?: string;\n noOptionsMessage?: string;\n /** Show a clear button to reset the selected value (field variant only) */\n clearable?: boolean;\n /** Called when the clear button is pressed */\n onClear?: () => void;\n maxHeight?: number;\n fullWidth?: boolean;\n testID?: string;\n}\n\nexport const Select: React.FC<SelectProps> = ({\n value,\n placeholder = \"Select\",\n onPress,\n size = \"md\",\n state: externalState,\n disabled = false,\n label,\n errorMessage,\n iconLeft,\n iconRight,\n filled = true,\n iconOnly = false,\n options = [],\n onChange,\n searchable = false,\n searchPlaceholder = \"Search\",\n noOptionsMessage = \"No results\",\n clearable = false,\n onClear,\n maxHeight = 300,\n fullWidth = true,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const [isOpen, setIsOpen] = useState(false);\n const [selectedValue, setSelectedValue] = useState<string | undefined>(value);\n const [searchValue, setSearchValue] = useState(\"\");\n const containerRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const selectedItemRef = useRef<HTMLDivElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n const isDisable = externalState === \"disable\" || disabled;\n const isError = externalState === \"error\" || !!errorMessage;\n const isFocus = externalState === \"focus\" || isOpen;\n\n React.useEffect(() => {\n if (value !== undefined) setSelectedValue(value);\n }, [value]);\n\n useEffect(() => {\n if (isFocus && selectedItemRef.current && dropdownRef.current) {\n const timeoutId = setTimeout(() => {\n const selectedItem = selectedItemRef.current;\n if (selectedItem && isWeb) selectedItem.scrollIntoView({ block: \"nearest\" });\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [isFocus]);\n\n useEffect(() => {\n if (isFocus && searchable) searchInputRef.current?.focus();\n }, [isFocus, searchable]);\n\n useEffect(() => {\n if (!isFocus) setSearchValue(\"\");\n }, [isFocus]);\n\n useEffect(() => {\n if (isNative || !isOpen) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n const getOptionLabel = (option: string | SelectOption) =>\n typeof option === \"string\" ? option : option.label;\n const getOptionValue = (option: string | SelectOption) =>\n typeof option === \"string\" ? option : option.value;\n const getOptionDisabled = (option: string | SelectOption) =>\n typeof option === \"string\" ? false : option.disabled || false;\n\n const filteredOptions =\n searchable && searchValue\n ? options.filter((option) =>\n getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())\n )\n : options;\n\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handlePress = () => {\n if (!isDisable) {\n if (onPress) onPress();\n setIsOpen(!isOpen);\n }\n };\n\n const handleSelect = (option: string | SelectOption) => {\n if (getOptionDisabled(option)) return;\n const val = getOptionValue(option);\n setSelectedValue(val);\n setIsOpen(false);\n if (onChange) onChange(val);\n };\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (isDisable) return;\n setSelectedValue(undefined);\n if (onChange) onChange(\"\");\n if (onClear) onClear();\n };\n\n const isHover = externalState === \"hover\";\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n borderColor = isError ? theme.colors.border.alert : theme.colors.border.brand;\n } else if (isError) {\n borderColor = theme.colors.border.alert;\n } else if (isHover) {\n backgroundColor = inputColors.bgHover;\n borderColor = inputColors.borderHover;\n }\n\n if (filled === false && !isFocus && !isError && !isHover) {\n backgroundColor = \"transparent\";\n }\n\n const currentLabel = selectedValue\n ? getOptionLabel(\n options.find((o) => getOptionValue(o) === selectedValue) || selectedValue\n )\n : placeholder;\n\n const textColor = isDisable\n ? inputColors.textDisable\n : selectedValue\n ? inputColors.text\n : inputColors.placeholder;\n const iconColor = isDisable ? inputColors.textDisable : inputColors.text;\n\n return (\n <Box\n testID={testID}\n ref={containerRef}\n flexDirection=\"column\"\n gap={sizeStyles.fieldGap}\n width={fullWidth ? \"100%\" : undefined}\n position=\"relative\"\n >\n {label && (\n <Text color={theme.colors.content.secondary} fontSize={sizeStyles.fontSize - 2} fontWeight=\"500\">\n {label}\n </Text>\n )}\n <Box\n onPress={handlePress}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={sizeStyles.radius}\n height={sizeStyles.height}\n width={iconOnly ? sizeStyles.height : \"100%\"}\n paddingHorizontal={iconOnly ? 0 : sizeStyles.paddingHorizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent={iconOnly ? \"center\" : \"flex-start\"}\n gap={iconOnly ? 4 : 12}\n position=\"relative\"\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? { backgroundColor: inputColors.bgHover, borderColor: inputColors.borderHover }\n : undefined\n }\n >\n {iconLeft && (\n <Box alignItems=\"center\" justifyContent=\"center\">\n <Icon size={sizeStyles.iconSize} color={iconColor}>{iconLeft}</Icon>\n </Box>\n )}\n {!iconOnly && (\n <Box flex={1} height=\"100%\" justifyContent=\"center\" overflow=\"hidden\" overflowX=\"hidden\">\n <Text color={textColor} fontSize={sizeStyles.fontSize} numberOfLines={1} style={{ whiteSpace: \"nowrap\" }}>\n {currentLabel}\n </Text>\n </Box>\n )}\n <Box flexDirection=\"row\" alignItems=\"center\" gap={4}>\n {/* Clear button (field variant only) */}\n {clearable && !iconOnly && !isDisable && selectedValue && (\n <Box\n onPress={handleClear}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={isWeb ? { cursor: \"pointer\" } : undefined}\n >\n <Remove\n size={sizeStyles.iconSize}\n color={iconColor}\n variant=\"line\"\n />\n </Box>\n )}\n\n {/* Error icon */}\n {isError && (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.alert.primary}>\n <ExclamationMarkCr />\n </Icon>\n )}\n {iconRight !== undefined ? (\n <Icon size={sizeStyles.iconSize} color={iconColor}>{iconRight}</Icon>\n ) : isFocus ? (\n <ChevronUp size={sizeStyles.iconSize} color={iconColor} variant=\"line\" />\n ) : (\n <ChevronDown size={sizeStyles.iconSize} color={iconColor} variant=\"line\" />\n )}\n </Box>\n </Box>\n\n {isFocus && options.length > 0 && (\n <Box\n ref={dropdownRef}\n position=\"absolute\"\n top={\n sizeStyles.height +\n (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) +\n sizeStyles.fieldGap\n }\n width=\"100%\"\n backgroundColor={theme.colors.background.secondary}\n borderColor={theme.colors.border.secondary}\n borderWidth={1}\n borderRadius={theme.shape.contextMenu[size].borderRadius}\n style={{\n zIndex: 1000,\n ...(isNative ? { elevation: 4 } : { boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\" }),\n minWidth: iconOnly ? sizeStyles.height * 3 : undefined,\n }}\n >\n {searchable && !isNative && (\n <Box\n paddingHorizontal={sizeStyles.paddingHorizontal}\n paddingVertical={sizeStyles.paddingVertical}\n borderBottomWidth={1}\n borderColor={theme.colors.border.secondary}\n >\n <Box flexDirection=\"row\" alignItems=\"center\" gap={sizeStyles.paddingHorizontal / 2} paddingHorizontal={4}>\n <Icon size={sizeStyles.iconSize - 2} color={inputColors.placeholder}>\n <SearchIcon />\n </Icon>\n <Box\n as=\"input\"\n ref={searchInputRef}\n flex={1}\n type=\"text\"\n value={searchValue}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value)}\n placeholder={searchPlaceholder}\n style={{\n border: \"none\",\n outline: \"none\",\n background: \"transparent\",\n color: inputColors.text,\n fontSize: sizeStyles.fontSize,\n width: \"100%\",\n }}\n />\n </Box>\n </Box>\n )}\n <Box\n paddingVertical={4}\n overflow=\"scroll\"\n style={{\n maxHeight: searchable ? maxHeight - 60 : maxHeight,\n ...(isWeb ? { overflowY: \"auto\" } : {}),\n }}\n >\n {filteredOptions.length === 0 ? (\n <Box paddingVertical={sizeStyles.paddingVertical * 2} paddingHorizontal={sizeStyles.paddingHorizontal} alignItems=\"center\">\n <Text color={theme.colors.content.tertiary} fontSize={sizeStyles.fontSize}>\n {noOptionsMessage}\n </Text>\n </Box>\n ) : (\n filteredOptions.map((option, index) => {\n const optionValue = getOptionValue(option);\n const optionLabel = getOptionLabel(option);\n const isOptionDisabled = getOptionDisabled(option);\n const isSelected = optionValue === selectedValue;\n const brandColors = theme.colors.control.brand.primary;\n const contentColors = theme.colors.content;\n return (\n <Box\n testID={testID}\n key={index}\n ref={isSelected ? selectedItemRef : undefined}\n paddingVertical={sizeStyles.paddingVertical}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n onPress={isOptionDisabled ? undefined : () => handleSelect(option)}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n backgroundColor={isSelected ? brandColors.bg : \"transparent\"}\n style={{\n ...(isWeb ? { cursor: isOptionDisabled ? \"not-allowed\" : \"pointer\" } : {}),\n opacity: isOptionDisabled ? 0.5 : 1,\n }}\n hoverStyle={\n !isSelected && !isOptionDisabled\n ? { backgroundColor: theme.colors.control.input.bgHover }\n : undefined\n }\n >\n <Text\n color={isSelected ? contentColors.on.brand : theme.colors.content.secondary}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"400\"\n >\n {optionLabel}\n </Text>\n </Box>\n );\n })\n )}\n </Box>\n </Box>\n )}\n\n {isError && errorMessage && (\n <Text color={theme.colors.content.alert.primary} fontSize={sizeStyles.fontSize - 2} style={{ lineHeight: sizeStyles.lineHeight + \"px\" }}>\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n};\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","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n color,\n size,\n testID,\n \"data-testid\": dataTestId,\n}) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return (\n <View style={style} testID={dataTestId || testID}>\n {childrenWithProps}\n </View>\n );\n};\n","export * from \"./Box\";\nexport * from \"./Text\";\nexport * from \"./Spinner\";\nexport * from \"./Icon\";\nexport * from \"./Divider\";\nexport * from \"./Input\";\nexport * from \"./TextArea\";\nexport * from \"./LinearGradient\";\n\nexport const isWeb = false;\nexport const isNative = true;\n"],"mappings":";AAAA,OAAOA,UAAS,UAAU,QAAQ,iBAAiB;;;ACCnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;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;AAAA,EACE,QAAQ;AAAA,EAGR;AAAA,OACK;AAqEH,gBAAAC,YAAA;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,WAAW,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,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ,cAAc,UAAU;AAAA,MAChC;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ACpFA,OAAO,WAAW;AAClB,SAAS,QAAAC,aAAuB;AA+B5B,gBAAAC,YAAA;AA5BG,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAmB;AAAA,IACvB,OAAO,OAAO,SAAS,WAAW,OAAO;AAAA,IACzC,QAAQ,OAAO,SAAS,WAAW,OAAO;AAAA,IAC1C,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAIA,QAAM,oBAAoB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAChE,QAAI,MAAM,eAAe,KAAK,GAAG;AAC/B,aAAO,MAAM,aAAa,OAAO;AAAA,QAC/B,OAAO,MAAM,MAAM,SAAS;AAAA;AAAA,QAE5B,MAAM,MAAM,MAAM,QAAQ;AAAA,MAC5B,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SACE,gBAAAA,KAACD,OAAA,EAAK,OAAc,QAAQ,cAAc,QACvC,6BACH;AAEJ;;;AC3BO,IAAM,QAAQ;AACd,IAAM,WAAW;;;AJPxB,SAAS,wBAAiD;AAC1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,OACL;AA+LC,gBAAAE,MAoCA,YApCA;AA5JD,IAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU,CAAC;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA6B,KAAK;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,kBAAkB,OAAuB,IAAI;AACnD,QAAM,iBAAiB,OAAyB,IAAI;AAEpD,QAAM,YAAY,kBAAkB,aAAa;AACjD,QAAM,UAAU,kBAAkB,WAAW,CAAC,CAAC;AAC/C,QAAM,UAAU,kBAAkB,WAAW;AAE7C,EAAAC,OAAM,UAAU,MAAM;AACpB,QAAI,UAAU,OAAW,kBAAiB,KAAK;AAAA,EACjD,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,QAAI,WAAW,gBAAgB,WAAW,YAAY,SAAS;AAC7D,YAAM,YAAY,WAAW,MAAM;AACjC,cAAM,eAAe,gBAAgB;AACrC,YAAI,gBAAgB,MAAO,cAAa,eAAe,EAAE,OAAO,UAAU,CAAC;AAAA,MAC7E,GAAG,CAAC;AACJ,aAAO,MAAM,aAAa,SAAS;AAAA,IACrC;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,QAAI,WAAW,WAAY,gBAAe,SAAS,MAAM;AAAA,EAC3D,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,YAAU,MAAM;AACd,QAAI,CAAC,QAAS,gBAAe,EAAE;AAAA,EACjC,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,QAAI,YAAY,CAAC,OAAQ;AACzB,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UAAI,aAAa,WAAW,CAAC,aAAa,QAAQ,SAAS,MAAM,MAAc,GAAG;AAChF,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,EAC3E,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,iBAAiB,CAAC,WACtB,OAAO,WAAW,WAAW,SAAS,OAAO;AAC/C,QAAM,iBAAiB,CAAC,WACtB,OAAO,WAAW,WAAW,SAAS,OAAO;AAC/C,QAAM,oBAAoB,CAAC,WACzB,OAAO,WAAW,WAAW,QAAQ,OAAO,YAAY;AAE1D,QAAM,kBACJ,cAAc,cACV,QAAQ;AAAA,IAAO,CAAC,WACd,eAAe,MAAM,EAAE,YAAY,EAAE,SAAS,YAAY,YAAY,CAAC;AAAA,EACzE,IACA;AAEN,QAAM,aAAa,MAAM,OAAO,MAAM,IAAI;AAC1C,QAAM,cAAc,MAAM,OAAO,QAAQ;AAEzC,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,WAAW;AACd,UAAI,QAAS,SAAQ;AACrB,gBAAU,CAAC,MAAM;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,WAAkC;AACtD,QAAI,kBAAkB,MAAM,EAAG;AAC/B,UAAM,MAAM,eAAe,MAAM;AACjC,qBAAiB,GAAG;AACpB,cAAU,KAAK;AACf,QAAI,SAAU,UAAS,GAAG;AAAA,EAC5B;AAEA,QAAM,cAAc,CAAC,MAAwB;AAC3C,MAAE,gBAAgB;AAClB,QAAI,UAAW;AACf,qBAAiB,MAAS;AAC1B,QAAI,SAAU,UAAS,EAAE;AACzB,QAAI,QAAS,SAAQ;AAAA,EACvB;AAEA,QAAM,UAAU,kBAAkB;AAClC,MAAI,kBAAkB,YAAY;AAClC,MAAI,cAAc,YAAY;AAE9B,MAAI,WAAW;AACb,sBAAkB,YAAY;AAC9B,kBAAc,YAAY;AAAA,EAC5B,WAAW,SAAS;AAClB,sBAAkB,MAAM,OAAO,QAAQ,MAAM;AAC7C,kBAAc,UAAU,MAAM,OAAO,OAAO,QAAQ,MAAM,OAAO,OAAO;AAAA,EAC1E,WAAW,SAAS;AAClB,kBAAc,MAAM,OAAO,OAAO;AAAA,EACpC,WAAW,SAAS;AAClB,sBAAkB,YAAY;AAC9B,kBAAc,YAAY;AAAA,EAC5B;AAEA,MAAI,WAAW,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,SAAS;AACxD,sBAAkB;AAAA,EACpB;AAEA,QAAM,eAAe,gBACjB;AAAA,IACE,QAAQ,KAAK,CAAC,MAAM,eAAe,CAAC,MAAM,aAAa,KAAK;AAAA,EAC9D,IACA;AAEJ,QAAM,YAAY,YACd,YAAY,cACZ,gBACE,YAAY,OACZ,YAAY;AAClB,QAAM,YAAY,YAAY,YAAY,cAAc,YAAY;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,eAAc;AAAA,MACd,KAAK,WAAW;AAAA,MAChB,OAAO,YAAY,SAAS;AAAA,MAC5B,UAAS;AAAA,MAER;AAAA,iBACC,gBAAAD,KAAC,QAAK,OAAO,MAAM,OAAO,QAAQ,WAAW,UAAU,WAAW,WAAW,GAAG,YAAW,OACxF,iBACH;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,aAAa,gBAAgB,gBAAgB,IAAI;AAAA,YACjD,cAAc,WAAW;AAAA,YACzB,QAAQ,WAAW;AAAA,YACnB,OAAO,WAAW,WAAW,SAAS;AAAA,YACtC,mBAAmB,WAAW,IAAI,WAAW;AAAA,YAC7C,eAAc;AAAA,YACd,YAAW;AAAA,YACX,gBAAgB,WAAW,WAAW;AAAA,YACtC,KAAK,WAAW,IAAI;AAAA,YACpB,UAAS;AAAA,YACT,YACE,CAAC,aAAa,CAAC,WAAW,CAAC,UACvB,EAAE,iBAAiB,YAAY,SAAS,aAAa,YAAY,YAAY,IAC7E;AAAA,YAGL;AAAA,0BACC,gBAAAA,KAAC,OAAI,YAAW,UAAS,gBAAe,UACtC,0BAAAA,KAAC,QAAK,MAAM,WAAW,UAAU,OAAO,WAAY,oBAAS,GAC/D;AAAA,cAED,CAAC,YACA,gBAAAA,KAAC,OAAI,MAAM,GAAG,QAAO,QAAO,gBAAe,UAAS,UAAS,UAAS,WAAU,UAC9E,0BAAAA,KAAC,QAAK,OAAO,WAAW,UAAU,WAAW,UAAU,eAAe,GAAG,OAAO,EAAE,YAAY,SAAS,GACpG,wBACH,GACF;AAAA,cAEF,qBAAC,OAAI,eAAc,OAAM,YAAW,UAAS,KAAK,GAE/C;AAAA,6BAAa,CAAC,YAAY,CAAC,aAAa,iBACvC,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS;AAAA,oBACT,YAAW;AAAA,oBACX,gBAAe;AAAA,oBACf,OAAO,QAAQ,EAAE,QAAQ,UAAU,IAAI;AAAA,oBAEvC,0BAAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,MAAM,WAAW;AAAA,wBACjB,OAAO;AAAA,wBACP,SAAQ;AAAA;AAAA,oBACV;AAAA;AAAA,gBACF;AAAA,gBAID,WACC,gBAAAA,KAAC,QAAK,MAAM,WAAW,UAAU,OAAO,MAAM,OAAO,QAAQ,MAAM,SACjE,0BAAAA,KAAC,qBAAkB,GACrB;AAAA,gBAED,cAAc,SACb,gBAAAA,KAAC,QAAK,MAAM,WAAW,UAAU,OAAO,WAAY,qBAAU,IAC5D,UACF,gBAAAA,KAAC,aAAU,MAAM,WAAW,UAAU,OAAO,WAAW,SAAQ,QAAO,IAEvE,gBAAAA,KAAC,eAAY,MAAM,WAAW,UAAU,OAAO,WAAW,SAAQ,QAAO;AAAA,iBAE7E;AAAA;AAAA;AAAA,QACF;AAAA,QAEC,WAAW,QAAQ,SAAS,KAC3B;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,UAAS;AAAA,YACT,KACE,WAAW,UACV,QAAQ,WAAW,WAAW,WAAW,WAAW,KACrD,WAAW;AAAA,YAEb,OAAM;AAAA,YACN,iBAAiB,MAAM,OAAO,WAAW;AAAA,YACzC,aAAa,MAAM,OAAO,OAAO;AAAA,YACjC,aAAa;AAAA,YACb,cAAc,MAAM,MAAM,YAAY,IAAI,EAAE;AAAA,YAC5C,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,GAAI,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,6BAA6B;AAAA,cAC5E,UAAU,WAAW,WAAW,SAAS,IAAI;AAAA,YAC/C;AAAA,YAEC;AAAA,4BAAc,CAAC,YACd,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,mBAAmB,WAAW;AAAA,kBAC9B,iBAAiB,WAAW;AAAA,kBAC5B,mBAAmB;AAAA,kBACnB,aAAa,MAAM,OAAO,OAAO;AAAA,kBAEjC,+BAAC,OAAI,eAAc,OAAM,YAAW,UAAS,KAAK,WAAW,oBAAoB,GAAG,mBAAmB,GACrG;AAAA,oCAAAA,KAAC,QAAK,MAAM,WAAW,WAAW,GAAG,OAAO,YAAY,aACtD,0BAAAA,KAAC,cAAW,GACd;AAAA,oBACA,gBAAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,IAAG;AAAA,wBACH,KAAK;AAAA,wBACL,MAAM;AAAA,wBACN,MAAK;AAAA,wBACL,OAAO;AAAA,wBACP,UAAU,CAAC,MAA2C,eAAe,EAAE,OAAO,KAAK;AAAA,wBACnF,aAAa;AAAA,wBACb,OAAO;AAAA,0BACL,QAAQ;AAAA,0BACR,SAAS;AAAA,0BACT,YAAY;AAAA,0BACZ,OAAO,YAAY;AAAA,0BACnB,UAAU,WAAW;AAAA,0BACrB,OAAO;AAAA,wBACT;AAAA;AAAA,oBACF;AAAA,qBACF;AAAA;AAAA,cACF;AAAA,cAEF,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,iBAAiB;AAAA,kBACjB,UAAS;AAAA,kBACT,OAAO;AAAA,oBACL,WAAW,aAAa,YAAY,KAAK;AAAA,oBACzC,GAAI,QAAQ,EAAE,WAAW,OAAO,IAAI,CAAC;AAAA,kBACvC;AAAA,kBAEC,0BAAgB,WAAW,IAC1B,gBAAAA,KAAC,OAAI,iBAAiB,WAAW,kBAAkB,GAAG,mBAAmB,WAAW,mBAAmB,YAAW,UAChH,0BAAAA,KAAC,QAAK,OAAO,MAAM,OAAO,QAAQ,UAAU,UAAU,WAAW,UAC9D,4BACH,GACF,IAEA,gBAAgB,IAAI,CAAC,QAAQ,UAAU;AACrC,0BAAM,cAAc,eAAe,MAAM;AACzC,0BAAM,cAAc,eAAe,MAAM;AACzC,0BAAM,mBAAmB,kBAAkB,MAAM;AACjD,0BAAM,aAAa,gBAAgB;AACnC,0BAAM,cAAc,MAAM,OAAO,QAAQ,MAAM;AAC/C,0BAAM,gBAAgB,MAAM,OAAO;AACnC,2BACE,gBAAAA;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBAEA,KAAK,aAAa,kBAAkB;AAAA,wBACpC,iBAAiB,WAAW;AAAA,wBAC5B,mBAAmB,WAAW;AAAA,wBAC9B,SAAS,mBAAmB,SAAY,MAAM,aAAa,MAAM;AAAA,wBACjE,eAAc;AAAA,wBACd,YAAW;AAAA,wBACX,gBAAe;AAAA,wBACf,iBAAiB,aAAa,YAAY,KAAK;AAAA,wBAC/C,OAAO;AAAA,0BACL,GAAI,QAAQ,EAAE,QAAQ,mBAAmB,gBAAgB,UAAU,IAAI,CAAC;AAAA,0BACxE,SAAS,mBAAmB,MAAM;AAAA,wBACpC;AAAA,wBACA,YACE,CAAC,cAAc,CAAC,mBACZ,EAAE,iBAAiB,MAAM,OAAO,QAAQ,MAAM,QAAQ,IACtD;AAAA,wBAGN,0BAAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,OAAO,aAAa,cAAc,GAAG,QAAQ,MAAM,OAAO,QAAQ;AAAA,4BAClE,UAAU,WAAW;AAAA,4BACrB,YAAW;AAAA,4BAEV;AAAA;AAAA,wBACH;AAAA;AAAA,sBAzBK;AAAA,oBA0BP;AAAA,kBAEJ,CAAC;AAAA;AAAA,cAEL;AAAA;AAAA;AAAA,QACF;AAAA,QAGD,WAAW,gBACV,gBAAAA,KAAC,QAAK,OAAO,MAAM,OAAO,QAAQ,MAAM,SAAS,UAAU,WAAW,WAAW,GAAG,OAAO,EAAE,YAAY,WAAW,aAAa,KAAK,GACnI,wBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["React","jsx","View","jsx","jsx","React"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Select.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon, isWeb, isNative } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps, type ThemeMode, type ProductContext } from \"@xsolla/xui-core\";\nimport {\n ChevronDown,\n ChevronUp,\n ExclamationMarkCr,\n Remove,\n Search as SearchIcon,\n} from \"@xsolla/xui-icons-base\";\n\nexport interface SelectOption {\n label: string;\n value: any;\n disabled?: boolean;\n}\n\nexport interface SelectProps extends ThemeOverrideProps {\n value?: string;\n placeholder?: string;\n onPress?: () => void;\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\";\n state?: \"default\" | \"hover\" | \"focus\" | \"disable\" | \"error\";\n disabled?: boolean;\n label?: string;\n errorMessage?: string;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n filled?: boolean;\n iconOnly?: boolean;\n options?: (string | SelectOption)[];\n onChange?: (value: string) => void;\n searchable?: boolean;\n searchPlaceholder?: string;\n noOptionsMessage?: string;\n /** Show a clear button to reset the selected value (field variant only) */\n clearable?: boolean;\n /** Called when the clear button is pressed */\n onClear?: () => void;\n maxHeight?: number;\n fullWidth?: boolean;\n testID?: string;\n /** Theme mode for the dropdown overlay. Defaults to themeMode when not set. */\n overlayThemeMode?: ThemeMode;\n /** Product context for the dropdown overlay. Defaults to themeProductContext when not set. */\n overlayThemeProductContext?: ProductContext;\n}\n\nexport const Select: React.FC<SelectProps> = ({\n value,\n placeholder = \"Select\",\n onPress,\n size = \"md\",\n state: externalState,\n disabled = false,\n label,\n errorMessage,\n iconLeft,\n iconRight,\n filled = true,\n iconOnly = false,\n options = [],\n onChange,\n searchable = false,\n searchPlaceholder = \"Search\",\n noOptionsMessage = \"No results\",\n clearable = false,\n onClear,\n maxHeight = 300,\n fullWidth = true,\n testID,\n themeMode,\n themeProductContext,\n overlayThemeMode,\n overlayThemeProductContext,\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 const [isOpen, setIsOpen] = useState(false);\n const [selectedValue, setSelectedValue] = useState<string | undefined>(value);\n const [searchValue, setSearchValue] = useState(\"\");\n const containerRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const selectedItemRef = useRef<HTMLDivElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n const isDisable = externalState === \"disable\" || disabled;\n const isError = externalState === \"error\" || !!errorMessage;\n const isFocus = externalState === \"focus\" || isOpen;\n\n React.useEffect(() => {\n if (value !== undefined) setSelectedValue(value);\n }, [value]);\n\n useEffect(() => {\n if (isFocus && selectedItemRef.current && dropdownRef.current) {\n const timeoutId = setTimeout(() => {\n const selectedItem = selectedItemRef.current;\n if (selectedItem && isWeb) selectedItem.scrollIntoView({ block: \"nearest\" });\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [isFocus]);\n\n useEffect(() => {\n if (isFocus && searchable) searchInputRef.current?.focus();\n }, [isFocus, searchable]);\n\n useEffect(() => {\n if (!isFocus) setSearchValue(\"\");\n }, [isFocus]);\n\n useEffect(() => {\n if (isNative || !isOpen) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n const getOptionLabel = (option: string | SelectOption) =>\n typeof option === \"string\" ? option : option.label;\n const getOptionValue = (option: string | SelectOption) =>\n typeof option === \"string\" ? option : option.value;\n const getOptionDisabled = (option: string | SelectOption) =>\n typeof option === \"string\" ? false : option.disabled || false;\n\n const filteredOptions =\n searchable && searchValue\n ? options.filter((option) =>\n getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())\n )\n : options;\n\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n const overlayInputColors = overlayTheme.colors.control.input;\n\n const handlePress = () => {\n if (!isDisable) {\n if (onPress) onPress();\n setIsOpen(!isOpen);\n }\n };\n\n const handleSelect = (option: string | SelectOption) => {\n if (getOptionDisabled(option)) return;\n const val = getOptionValue(option);\n setSelectedValue(val);\n setIsOpen(false);\n if (onChange) onChange(val);\n };\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (isDisable) return;\n setSelectedValue(undefined);\n if (onChange) onChange(\"\");\n if (onClear) onClear();\n };\n\n const isHover = externalState === \"hover\";\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n borderColor = isError ? theme.colors.border.alert : theme.colors.border.brand;\n } else if (isError) {\n borderColor = theme.colors.border.alert;\n } else if (isHover) {\n backgroundColor = inputColors.bgHover;\n borderColor = inputColors.borderHover;\n }\n\n if (filled === false && !isFocus && !isError && !isHover) {\n backgroundColor = \"transparent\";\n }\n\n const currentLabel = selectedValue\n ? getOptionLabel(\n options.find((o) => getOptionValue(o) === selectedValue) || selectedValue\n )\n : placeholder;\n\n const textColor = isDisable\n ? inputColors.textDisable\n : selectedValue\n ? inputColors.text\n : inputColors.placeholder;\n const iconColor = isDisable ? inputColors.textDisable : inputColors.text;\n\n return (\n <Box\n testID={testID}\n ref={containerRef}\n flexDirection=\"column\"\n gap={sizeStyles.fieldGap}\n width={fullWidth ? \"100%\" : undefined}\n position=\"relative\"\n >\n {label && (\n <Text color={theme.colors.content.secondary} fontSize={sizeStyles.fontSize - 2} fontWeight=\"500\">\n {label}\n </Text>\n )}\n <Box\n onPress={handlePress}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={sizeStyles.radius}\n height={sizeStyles.height}\n width={iconOnly ? sizeStyles.height : \"100%\"}\n paddingHorizontal={iconOnly ? 0 : sizeStyles.paddingHorizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent={iconOnly ? \"center\" : \"flex-start\"}\n gap={iconOnly ? 4 : 12}\n position=\"relative\"\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? { backgroundColor: inputColors.bgHover, borderColor: inputColors.borderHover }\n : undefined\n }\n >\n {iconLeft && (\n <Box alignItems=\"center\" justifyContent=\"center\">\n <Icon size={sizeStyles.iconSize} color={iconColor}>{iconLeft}</Icon>\n </Box>\n )}\n {!iconOnly && (\n <Box flex={1} height=\"100%\" justifyContent=\"center\" overflow=\"hidden\" overflowX=\"hidden\">\n <Text color={textColor} fontSize={sizeStyles.fontSize} numberOfLines={1} style={{ whiteSpace: \"nowrap\" }}>\n {currentLabel}\n </Text>\n </Box>\n )}\n <Box flexDirection=\"row\" alignItems=\"center\" gap={4}>\n {/* Clear button (field variant only) */}\n {clearable && !iconOnly && !isDisable && selectedValue && (\n <Box\n onPress={handleClear}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={isWeb ? { cursor: \"pointer\" } : undefined}\n >\n <Remove\n size={sizeStyles.iconSize}\n color={iconColor}\n variant=\"line\"\n />\n </Box>\n )}\n\n {/* Error icon */}\n {isError && (\n <Icon size={sizeStyles.iconSize} color={theme.colors.content.alert.primary}>\n <ExclamationMarkCr />\n </Icon>\n )}\n {iconRight !== undefined ? (\n <Icon size={sizeStyles.iconSize} color={iconColor}>{iconRight}</Icon>\n ) : isFocus ? (\n <ChevronUp size={sizeStyles.iconSize} color={iconColor} variant=\"line\" />\n ) : (\n <ChevronDown size={sizeStyles.iconSize} color={iconColor} variant=\"line\" />\n )}\n </Box>\n </Box>\n\n {isFocus && options.length > 0 && (\n <Box\n ref={dropdownRef}\n position=\"absolute\"\n top={sizeStyles.height + (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) + sizeStyles.fieldGap}\n width=\"100%\"\n backgroundColor={overlayTheme.colors.background.secondary}\n borderColor={overlayTheme.colors.border.secondary}\n borderWidth={1}\n borderRadius={overlayTheme.shape.contextMenu[size].borderRadius}\n style={{\n zIndex: 1000,\n ...(isNative ? { elevation: 4 } : { boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\" }),\n minWidth: iconOnly ? sizeStyles.height * 3 : undefined,\n }}\n >\n {searchable && !isNative && (\n <Box\n paddingHorizontal={sizeStyles.paddingHorizontal}\n paddingVertical={sizeStyles.paddingVertical}\n borderBottomWidth={1}\n borderColor={overlayTheme.colors.border.secondary}\n >\n <Box flexDirection=\"row\" alignItems=\"center\" gap={sizeStyles.paddingHorizontal / 2} paddingHorizontal={4}>\n <Icon size={sizeStyles.iconSize - 2} color={overlayInputColors.placeholder}>\n <SearchIcon />\n </Icon>\n <Box\n as=\"input\"\n ref={searchInputRef}\n flex={1}\n type=\"text\"\n value={searchValue}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value)}\n placeholder={searchPlaceholder}\n style={{\n border: \"none\",\n outline: \"none\",\n background: \"transparent\",\n color: overlayInputColors.text,\n fontSize: sizeStyles.fontSize,\n width: \"100%\",\n }}\n />\n </Box>\n </Box>\n )}\n <Box\n paddingVertical={4}\n overflow=\"scroll\"\n style={{ maxHeight: searchable ? maxHeight - 60 : maxHeight, ...(isWeb ? { overflowY: \"auto\" } : {}) }}\n >\n {filteredOptions.length === 0 ? (\n <Box paddingVertical={sizeStyles.paddingVertical * 2} paddingHorizontal={sizeStyles.paddingHorizontal} alignItems=\"center\">\n <Text color={overlayTheme.colors.content.tertiary} fontSize={sizeStyles.fontSize}>\n {noOptionsMessage}\n </Text>\n </Box>\n ) : (\n filteredOptions.map((option, index) => {\n const optionValue = getOptionValue(option);\n const optionLabel = getOptionLabel(option);\n const isOptionDisabled = getOptionDisabled(option);\n const isSelected = optionValue === selectedValue;\n const brandColors = overlayTheme.colors.control.brand.primary;\n const contentColors = overlayTheme.colors.content;\n return (\n <Box\n testID={testID}\n key={index}\n ref={isSelected ? selectedItemRef : undefined}\n paddingVertical={sizeStyles.paddingVertical}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n onPress={isOptionDisabled ? undefined : () => handleSelect(option)}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n backgroundColor={isSelected ? brandColors.bg : \"transparent\"}\n style={{\n ...(isWeb ? { cursor: isOptionDisabled ? \"not-allowed\" : \"pointer\" } : {}),\n opacity: isOptionDisabled ? 0.5 : 1,\n }}\n hoverStyle={\n !isSelected && !isOptionDisabled\n ? { backgroundColor: overlayInputColors.bgHover }\n : undefined\n }\n >\n <Text\n color={isSelected ? contentColors.on.brand : overlayTheme.colors.content.secondary}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"400\"\n >\n {optionLabel}\n </Text>\n </Box>\n );\n })\n )}\n </Box>\n </Box>\n )}\n\n {isError && errorMessage && (\n <Text color={theme.colors.content.alert.primary} fontSize={sizeStyles.fontSize - 2} style={{ lineHeight: sizeStyles.lineHeight + \"px\" }}>\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n};\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","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n color,\n size,\n testID,\n \"data-testid\": dataTestId,\n}) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return (\n <View style={style} testID={dataTestId || testID}>\n {childrenWithProps}\n </View>\n );\n};\n","export * from \"./Box\";\nexport * from \"./Text\";\nexport * from \"./Spinner\";\nexport * from \"./Icon\";\nexport * from \"./Divider\";\nexport * from \"./Input\";\nexport * from \"./TextArea\";\nexport * from \"./LinearGradient\";\n\nexport const isWeb = false;\nexport const isNative = true;\n"],"mappings":"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","names":["React","jsx","View","jsx","jsx","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.173.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-icons-base": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.173.0",
|
|
17
|
+
"@xsolla/xui-icons-base": "0.173.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.173.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|