@xsolla/xui-dropdown 0.141.1 → 0.148.0-pr266.1777533632
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 +181 -0
- package/native/index.d.mts +2 -1
- package/native/index.d.ts +2 -1
- package/native/index.js +148 -130
- package/native/index.js.map +1 -1
- package/native/index.mjs +138 -130
- package/native/index.mjs.map +1 -1
- package/package.json +6 -6
- package/web/index.d.mts +2 -1
- package/web/index.d.ts +2 -1
- package/web/index.js +138 -130
- package/web/index.js.map +1 -1
- package/web/index.mjs +138 -130
- package/web/index.mjs.map +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
# Dropdown
|
|
2
|
+
|
|
3
|
+
A cross-platform React dropdown menu component that displays a list of actions when triggered. Supports controlled and uncontrolled modes.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @xsolla/xui-dropdown
|
|
9
|
+
# or
|
|
10
|
+
yarn add @xsolla/xui-dropdown
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic Dropdown
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
|
|
20
|
+
import { Button } from '@xsolla/xui-button';
|
|
21
|
+
|
|
22
|
+
export default function BasicDropdown() {
|
|
23
|
+
return (
|
|
24
|
+
<Dropdown trigger={<Button>Open Menu</Button>}>
|
|
25
|
+
<DropdownItem onPress={() => console.log('Edit')}>Edit</DropdownItem>
|
|
26
|
+
<DropdownItem onPress={() => console.log('Duplicate')}>Duplicate</DropdownItem>
|
|
27
|
+
<DropdownItem onPress={() => console.log('Delete')}>Delete</DropdownItem>
|
|
28
|
+
</Dropdown>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Dropdown with Icons
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import * as React from 'react';
|
|
37
|
+
import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
|
|
38
|
+
import { Button } from '@xsolla/xui-button';
|
|
39
|
+
import { Copy } from '@xsolla/xui-icons';
|
|
40
|
+
import { Edit, TrashCan } from '@xsolla/xui-icons-base';
|
|
41
|
+
|
|
42
|
+
export default function DropdownWithIcons() {
|
|
43
|
+
return (
|
|
44
|
+
<Dropdown trigger={<Button>Actions</Button>}>
|
|
45
|
+
<DropdownItem icon={<Edit size={16} />}>Edit</DropdownItem>
|
|
46
|
+
<DropdownItem icon={<Copy size={16} />}>Duplicate</DropdownItem>
|
|
47
|
+
<DropdownItem icon={<TrashCan size={16} />}>Delete</DropdownItem>
|
|
48
|
+
</Dropdown>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Controlled Dropdown
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import * as React from 'react';
|
|
57
|
+
import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
|
|
58
|
+
import { Button } from '@xsolla/xui-button';
|
|
59
|
+
|
|
60
|
+
export default function ControlledDropdown() {
|
|
61
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<div>
|
|
65
|
+
<Dropdown
|
|
66
|
+
trigger={<Button>Menu</Button>}
|
|
67
|
+
isOpen={isOpen}
|
|
68
|
+
onOpenChange={setIsOpen}
|
|
69
|
+
>
|
|
70
|
+
<DropdownItem onPress={() => setIsOpen(false)}>Action 1</DropdownItem>
|
|
71
|
+
<DropdownItem onPress={() => setIsOpen(false)}>Action 2</DropdownItem>
|
|
72
|
+
</Dropdown>
|
|
73
|
+
<p>Dropdown is: {isOpen ? 'Open' : 'Closed'}</p>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Selection Indicator
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import * as React from 'react';
|
|
83
|
+
import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
|
|
84
|
+
import { Button } from '@xsolla/xui-button';
|
|
85
|
+
|
|
86
|
+
export default function SelectionDropdown() {
|
|
87
|
+
const [selected, setSelected] = React.useState('option1');
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<Dropdown trigger={<Button>Select Option</Button>}>
|
|
91
|
+
<DropdownItem
|
|
92
|
+
selected={selected === 'option1'}
|
|
93
|
+
onPress={() => setSelected('option1')}
|
|
94
|
+
>
|
|
95
|
+
Option 1
|
|
96
|
+
</DropdownItem>
|
|
97
|
+
<DropdownItem
|
|
98
|
+
selected={selected === 'option2'}
|
|
99
|
+
onPress={() => setSelected('option2')}
|
|
100
|
+
>
|
|
101
|
+
Option 2
|
|
102
|
+
</DropdownItem>
|
|
103
|
+
<DropdownItem
|
|
104
|
+
selected={selected === 'option3'}
|
|
105
|
+
onPress={() => setSelected('option3')}
|
|
106
|
+
>
|
|
107
|
+
Option 3
|
|
108
|
+
</DropdownItem>
|
|
109
|
+
</Dropdown>
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Anatomy
|
|
115
|
+
|
|
116
|
+
```jsx
|
|
117
|
+
import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
|
|
118
|
+
|
|
119
|
+
<Dropdown
|
|
120
|
+
trigger={<TriggerElement />} // Element that opens dropdown
|
|
121
|
+
isOpen={boolean} // Controlled open state
|
|
122
|
+
onOpenChange={handler} // Open state change handler
|
|
123
|
+
width={200} // Custom dropdown width
|
|
124
|
+
>
|
|
125
|
+
<DropdownItem
|
|
126
|
+
onPress={handler} // Click handler
|
|
127
|
+
icon={<Icon />} // Leading icon
|
|
128
|
+
selected={boolean} // Show selection checkmark
|
|
129
|
+
disabled={boolean} // Disabled state
|
|
130
|
+
>
|
|
131
|
+
Item Label
|
|
132
|
+
</DropdownItem>
|
|
133
|
+
</Dropdown>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## API Reference
|
|
137
|
+
|
|
138
|
+
### Dropdown
|
|
139
|
+
|
|
140
|
+
Container component for dropdown menu.
|
|
141
|
+
|
|
142
|
+
**Dropdown Props:**
|
|
143
|
+
|
|
144
|
+
| Prop | Type | Default | Description |
|
|
145
|
+
| :--- | :--- | :------ | :---------- |
|
|
146
|
+
| trigger | `ReactNode` | - | **Required.** Element that triggers dropdown. |
|
|
147
|
+
| children | `ReactNode` | - | **Required.** DropdownItem components. |
|
|
148
|
+
| isOpen | `boolean` | - | Controlled open state. |
|
|
149
|
+
| onOpenChange | `(open: boolean) => void` | - | Open state change handler. |
|
|
150
|
+
| width | `string \| number` | - | Custom dropdown width. |
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
### DropdownItem
|
|
155
|
+
|
|
156
|
+
Individual menu item component.
|
|
157
|
+
|
|
158
|
+
**DropdownItem Props:**
|
|
159
|
+
|
|
160
|
+
| Prop | Type | Default | Description |
|
|
161
|
+
| :--- | :--- | :------ | :---------- |
|
|
162
|
+
| children | `ReactNode` | - | **Required.** Item content. |
|
|
163
|
+
| onPress | `() => void` | - | Click handler. |
|
|
164
|
+
| icon | `ReactNode` | - | Leading icon. |
|
|
165
|
+
| selected | `boolean` | `false` | Show selection checkmark. |
|
|
166
|
+
| active | `boolean` | `false` | Active/hover state. |
|
|
167
|
+
| disabled | `boolean` | `false` | Disabled state. |
|
|
168
|
+
|
|
169
|
+
## Behavior
|
|
170
|
+
|
|
171
|
+
- Clicking outside the dropdown closes it
|
|
172
|
+
- Selected items show a checkmark and highlighted background
|
|
173
|
+
- Disabled items are visually muted and not clickable
|
|
174
|
+
- Dropdown positions below trigger by default
|
|
175
|
+
|
|
176
|
+
## Accessibility
|
|
177
|
+
|
|
178
|
+
- Uses `role="menu"` for dropdown container
|
|
179
|
+
- Items use `role="menuitem"`
|
|
180
|
+
- Keyboard support for navigation
|
|
181
|
+
- Focus management when opening/closing
|
package/native/index.d.mts
CHANGED
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
3
3
|
|
|
4
4
|
interface DropdownProps extends ThemeOverrideProps {
|
|
5
|
+
id?: string;
|
|
5
6
|
trigger: React.ReactNode;
|
|
6
7
|
children: React.ReactNode;
|
|
7
8
|
isOpen?: boolean;
|
|
@@ -15,7 +16,7 @@ interface DropdownProps extends ThemeOverrideProps {
|
|
|
15
16
|
/** Test ID for testing frameworks */
|
|
16
17
|
testID?: string;
|
|
17
18
|
}
|
|
18
|
-
declare const Dropdown: React.
|
|
19
|
+
declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
|
|
19
20
|
interface DropdownItemProps extends ThemeOverrideProps {
|
|
20
21
|
children: React.ReactNode;
|
|
21
22
|
onPress?: () => void;
|
package/native/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
3
3
|
|
|
4
4
|
interface DropdownProps extends ThemeOverrideProps {
|
|
5
|
+
id?: string;
|
|
5
6
|
trigger: React.ReactNode;
|
|
6
7
|
children: React.ReactNode;
|
|
7
8
|
isOpen?: boolean;
|
|
@@ -15,7 +16,7 @@ interface DropdownProps extends ThemeOverrideProps {
|
|
|
15
16
|
/** Test ID for testing frameworks */
|
|
16
17
|
testID?: string;
|
|
17
18
|
}
|
|
18
|
-
declare const Dropdown: React.
|
|
19
|
+
declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
|
|
19
20
|
interface DropdownItemProps extends ThemeOverrideProps {
|
|
20
21
|
children: React.ReactNode;
|
|
21
22
|
onPress?: () => void;
|
package/native/index.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// src/index.tsx
|
|
@@ -26,7 +36,7 @@ __export(index_exports, {
|
|
|
26
36
|
module.exports = __toCommonJS(index_exports);
|
|
27
37
|
|
|
28
38
|
// src/Dropdown.tsx
|
|
29
|
-
var import_react = require("react");
|
|
39
|
+
var import_react = __toESM(require("react"));
|
|
30
40
|
|
|
31
41
|
// ../../foundation/primitives-native/src/Box.tsx
|
|
32
42
|
var import_react_native = require("react-native");
|
|
@@ -268,141 +278,149 @@ var Text = ({
|
|
|
268
278
|
// src/Dropdown.tsx
|
|
269
279
|
var import_xui_core = require("@xsolla/xui-core");
|
|
270
280
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
271
|
-
var Dropdown = (
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
setInternalIsOpen(nextOpen);
|
|
299
|
-
}
|
|
300
|
-
if (onOpenChange) onOpenChange(nextOpen);
|
|
301
|
-
}, [isOpen, propIsOpen, onOpenChange]);
|
|
302
|
-
const focusTrigger = (0, import_react.useCallback)(() => {
|
|
303
|
-
if (typeof document !== "undefined" && triggerRef.current) {
|
|
304
|
-
const focusable = triggerRef.current.querySelector(
|
|
305
|
-
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
306
|
-
);
|
|
307
|
-
if (focusable) {
|
|
308
|
-
focusable.focus();
|
|
281
|
+
var Dropdown = import_react.default.forwardRef(
|
|
282
|
+
({
|
|
283
|
+
id,
|
|
284
|
+
trigger,
|
|
285
|
+
children,
|
|
286
|
+
isOpen: propIsOpen,
|
|
287
|
+
onOpenChange,
|
|
288
|
+
width = "auto",
|
|
289
|
+
align = "start",
|
|
290
|
+
"aria-label": ariaLabel,
|
|
291
|
+
testID,
|
|
292
|
+
themeMode,
|
|
293
|
+
themeProductContext
|
|
294
|
+
}, ref) => {
|
|
295
|
+
const [internalIsOpen, setInternalIsOpen] = (0, import_react.useState)(false);
|
|
296
|
+
const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
|
|
297
|
+
const containerRef = (0, import_react.useRef)(null);
|
|
298
|
+
const triggerRef = (0, import_react.useRef)(null);
|
|
299
|
+
const menuRef = (0, import_react.useRef)(null);
|
|
300
|
+
import_react.default.useImperativeHandle(
|
|
301
|
+
ref,
|
|
302
|
+
() => containerRef.current
|
|
303
|
+
);
|
|
304
|
+
const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
305
|
+
const closeMenu = (0, import_react.useCallback)(() => {
|
|
306
|
+
if (propIsOpen === void 0) {
|
|
307
|
+
setInternalIsOpen(false);
|
|
309
308
|
}
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
if (
|
|
315
|
-
|
|
316
|
-
closeMenu();
|
|
317
|
-
focusTrigger();
|
|
318
|
-
} else if (event.key === "Tab" && isOpen) {
|
|
319
|
-
closeMenu();
|
|
320
|
-
focusTrigger();
|
|
309
|
+
if (onOpenChange) onOpenChange(false);
|
|
310
|
+
}, [propIsOpen, onOpenChange]);
|
|
311
|
+
const toggleOpen = (0, import_react.useCallback)(() => {
|
|
312
|
+
const nextOpen = !isOpen;
|
|
313
|
+
if (propIsOpen === void 0) {
|
|
314
|
+
setInternalIsOpen(nextOpen);
|
|
321
315
|
}
|
|
322
|
-
|
|
323
|
-
[isOpen,
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
event.preventDefault();
|
|
332
|
-
if (propIsOpen === void 0) {
|
|
333
|
-
setInternalIsOpen(true);
|
|
316
|
+
if (onOpenChange) onOpenChange(nextOpen);
|
|
317
|
+
}, [isOpen, propIsOpen, onOpenChange]);
|
|
318
|
+
const focusTrigger = (0, import_react.useCallback)(() => {
|
|
319
|
+
if (typeof document !== "undefined" && triggerRef.current) {
|
|
320
|
+
const focusable = triggerRef.current.querySelector(
|
|
321
|
+
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
322
|
+
);
|
|
323
|
+
if (focusable) {
|
|
324
|
+
focusable.focus();
|
|
334
325
|
}
|
|
335
|
-
if (onOpenChange) onOpenChange(true);
|
|
336
|
-
}
|
|
337
|
-
},
|
|
338
|
-
[isOpen, toggleOpen, propIsOpen, onOpenChange]
|
|
339
|
-
);
|
|
340
|
-
(0, import_react.useEffect)(() => {
|
|
341
|
-
const handleClickOutside = (event) => {
|
|
342
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
343
|
-
closeMenu();
|
|
344
|
-
}
|
|
345
|
-
};
|
|
346
|
-
if (isOpen && typeof document !== "undefined") {
|
|
347
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
348
|
-
}
|
|
349
|
-
return () => {
|
|
350
|
-
if (typeof document !== "undefined") {
|
|
351
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
352
326
|
}
|
|
353
|
-
};
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
327
|
+
}, []);
|
|
328
|
+
const handleKeyDown = (0, import_react.useCallback)(
|
|
329
|
+
(event) => {
|
|
330
|
+
if (event.key === "Escape" && isOpen) {
|
|
331
|
+
event.preventDefault();
|
|
332
|
+
closeMenu();
|
|
333
|
+
focusTrigger();
|
|
334
|
+
} else if (event.key === "Tab" && isOpen) {
|
|
335
|
+
closeMenu();
|
|
336
|
+
focusTrigger();
|
|
337
|
+
}
|
|
364
338
|
},
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
children: trigger
|
|
377
|
-
}
|
|
378
|
-
),
|
|
379
|
-
isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
380
|
-
Box,
|
|
381
|
-
{
|
|
382
|
-
ref: menuRef,
|
|
383
|
-
position: "absolute",
|
|
384
|
-
top: "100%",
|
|
385
|
-
...align === "end" ? { right: 0 } : { left: 0 },
|
|
386
|
-
marginTop: 4,
|
|
387
|
-
backgroundColor: theme.colors.background.secondary,
|
|
388
|
-
borderColor: theme.colors.border.secondary,
|
|
389
|
-
borderWidth: 1,
|
|
390
|
-
borderRadius: theme.radius.button,
|
|
391
|
-
paddingVertical: 4,
|
|
392
|
-
role: "menu",
|
|
393
|
-
...ariaLabel ? { "aria-label": ariaLabel } : {},
|
|
394
|
-
style: {
|
|
395
|
-
zIndex: 1e3,
|
|
396
|
-
boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
|
|
397
|
-
...width === "auto" ? { minWidth: "100%" } : { width }
|
|
398
|
-
},
|
|
399
|
-
children
|
|
339
|
+
[isOpen, closeMenu, focusTrigger]
|
|
340
|
+
);
|
|
341
|
+
const handleTriggerKeyDown = (0, import_react.useCallback)(
|
|
342
|
+
(event) => {
|
|
343
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
344
|
+
event.preventDefault();
|
|
345
|
+
toggleOpen();
|
|
346
|
+
} else if (event.key === "ArrowDown" && !isOpen) {
|
|
347
|
+
event.preventDefault();
|
|
348
|
+
if (propIsOpen === void 0) {
|
|
349
|
+
setInternalIsOpen(true);
|
|
400
350
|
}
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
351
|
+
if (onOpenChange) onOpenChange(true);
|
|
352
|
+
}
|
|
353
|
+
},
|
|
354
|
+
[isOpen, toggleOpen, propIsOpen, onOpenChange]
|
|
355
|
+
);
|
|
356
|
+
(0, import_react.useEffect)(() => {
|
|
357
|
+
const handleClickOutside = (event) => {
|
|
358
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
359
|
+
closeMenu();
|
|
360
|
+
}
|
|
361
|
+
};
|
|
362
|
+
if (isOpen && typeof document !== "undefined") {
|
|
363
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
364
|
+
}
|
|
365
|
+
return () => {
|
|
366
|
+
if (typeof document !== "undefined") {
|
|
367
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
368
|
+
}
|
|
369
|
+
};
|
|
370
|
+
}, [isOpen, closeMenu]);
|
|
371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
372
|
+
"div",
|
|
373
|
+
{
|
|
374
|
+
ref: containerRef,
|
|
375
|
+
id,
|
|
376
|
+
style: {
|
|
377
|
+
position: "relative",
|
|
378
|
+
width: "fit-content",
|
|
379
|
+
alignSelf: "flex-start",
|
|
380
|
+
height: "fit-content"
|
|
381
|
+
},
|
|
382
|
+
onKeyDown: handleKeyDown,
|
|
383
|
+
"data-testid": testID,
|
|
384
|
+
children: [
|
|
385
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
386
|
+
"div",
|
|
387
|
+
{
|
|
388
|
+
ref: triggerRef,
|
|
389
|
+
onClick: toggleOpen,
|
|
390
|
+
onKeyDown: handleTriggerKeyDown,
|
|
391
|
+
"aria-haspopup": "menu",
|
|
392
|
+
"aria-expanded": isOpen,
|
|
393
|
+
children: trigger
|
|
394
|
+
}
|
|
395
|
+
),
|
|
396
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
397
|
+
Box,
|
|
398
|
+
{
|
|
399
|
+
ref: menuRef,
|
|
400
|
+
position: "absolute",
|
|
401
|
+
top: "100%",
|
|
402
|
+
...align === "end" ? { right: 0 } : { left: 0 },
|
|
403
|
+
marginTop: 4,
|
|
404
|
+
backgroundColor: theme.colors.background.secondary,
|
|
405
|
+
borderColor: theme.colors.border.secondary,
|
|
406
|
+
borderWidth: 1,
|
|
407
|
+
borderRadius: theme.radius.button,
|
|
408
|
+
paddingVertical: 4,
|
|
409
|
+
role: "menu",
|
|
410
|
+
...ariaLabel ? { "aria-label": ariaLabel } : {},
|
|
411
|
+
style: {
|
|
412
|
+
zIndex: 1e3,
|
|
413
|
+
boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
|
|
414
|
+
...width === "auto" ? { minWidth: "100%" } : { width }
|
|
415
|
+
},
|
|
416
|
+
children
|
|
417
|
+
}
|
|
418
|
+
)
|
|
419
|
+
]
|
|
420
|
+
}
|
|
421
|
+
);
|
|
422
|
+
}
|
|
423
|
+
);
|
|
406
424
|
var DropdownItem = ({
|
|
407
425
|
children,
|
|
408
426
|
onPress,
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Dropdown.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Dropdown\";\n","import React, { useState, useRef, useEffect, useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface DropdownProps extends ThemeOverrideProps {\n trigger: React.ReactNode;\n children: React.ReactNode;\n isOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Width of the dropdown menu (does not affect trigger width) */\n width?: string | number;\n /** Horizontal alignment of dropdown menu relative to trigger. Default: \"start\" */\n align?: \"start\" | \"end\";\n /** Accessible label for the dropdown menu */\n \"aria-label\"?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n trigger,\n children,\n isOpen: propIsOpen,\n onOpenChange,\n width = \"auto\",\n align = \"start\",\n \"aria-label\": ariaLabel,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const isOpen = propIsOpen !== undefined ? propIsOpen : internalIsOpen;\n const containerRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const closeMenu = useCallback(() => {\n if (propIsOpen === undefined) {\n setInternalIsOpen(false);\n }\n if (onOpenChange) onOpenChange(false);\n }, [propIsOpen, onOpenChange]);\n\n const toggleOpen = useCallback(() => {\n const nextOpen = !isOpen;\n if (propIsOpen === undefined) {\n setInternalIsOpen(nextOpen);\n }\n if (onOpenChange) onOpenChange(nextOpen);\n }, [isOpen, propIsOpen, onOpenChange]);\n\n // Safe focus helper for cross-platform compatibility\n const focusTrigger = useCallback(() => {\n if (typeof document !== \"undefined\" && triggerRef.current) {\n // Find the first focusable element within the trigger wrapper\n const focusable = triggerRef.current.querySelector<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n if (focusable) {\n focusable.focus();\n }\n }\n }, []);\n\n // Handle keyboard navigation\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Escape\" && isOpen) {\n event.preventDefault();\n closeMenu();\n focusTrigger();\n } else if (event.key === \"Tab\" && isOpen) {\n closeMenu();\n // Also restore focus on Tab for consistent keyboard navigation\n focusTrigger();\n }\n },\n [isOpen, closeMenu, focusTrigger]\n );\n\n // Handle trigger keyboard events\n const handleTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n toggleOpen();\n } else if (event.key === \"ArrowDown\" && !isOpen) {\n event.preventDefault();\n if (propIsOpen === undefined) {\n setInternalIsOpen(true);\n }\n if (onOpenChange) onOpenChange(true);\n }\n },\n [isOpen, toggleOpen, propIsOpen, onOpenChange]\n );\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n closeMenu();\n }\n };\n\n if (isOpen && typeof document !== \"undefined\") {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n if (typeof document !== \"undefined\") {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }\n };\n }, [isOpen, closeMenu]);\n\n return (\n <div\n ref={containerRef}\n style={{\n position: \"relative\",\n width: \"fit-content\",\n alignSelf: \"flex-start\",\n height: \"fit-content\",\n }}\n onKeyDown={handleKeyDown}\n data-testid={testID}\n >\n <div\n ref={triggerRef}\n onClick={toggleOpen}\n onKeyDown={handleTriggerKeyDown}\n aria-haspopup=\"menu\"\n aria-expanded={isOpen}\n >\n {trigger}\n </div>\n {isOpen && (\n <Box\n ref={menuRef}\n position=\"absolute\"\n top=\"100%\"\n {...(align === \"end\" ? { right: 0 } : { left: 0 })}\n marginTop={4}\n backgroundColor={theme.colors.background.secondary}\n borderColor={theme.colors.border.secondary}\n borderWidth={1}\n borderRadius={theme.radius.button}\n paddingVertical={4}\n role=\"menu\"\n {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n style={{\n zIndex: 1000,\n boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\",\n ...(width === \"auto\" ? { minWidth: \"100%\" } : { width }),\n }}\n >\n {children}\n </Box>\n )}\n </div>\n );\n};\n\nexport interface DropdownItemProps extends ThemeOverrideProps {\n children: React.ReactNode;\n onPress?: () => void;\n active?: boolean;\n /** Whether this item is selected (shows trailing checkmark with control/check/bg color) */\n selected?: boolean;\n disabled?: boolean;\n icon?: React.ReactNode;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const DropdownItem: React.FC<DropdownItemProps> = ({\n children,\n onPress,\n active,\n selected,\n disabled,\n icon,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const brandColors = theme.colors.control.brand.primary;\n const contentColors = theme.colors.content;\n\n // Determine background color\n const getBackgroundColor = () => {\n if (selected) {\n return brandColors?.bg || theme.colors.control.input.bg; // Cyan background for selected items\n }\n if (active) {\n return theme.colors.control.input.bgHover;\n }\n return \"transparent\";\n };\n\n // Determine text/icon color\n const getContentColor = () => {\n if (selected) {\n return contentColors?.on?.brand || theme.colors.content.primary; // Black text on cyan background\n }\n return theme.colors.content.secondary;\n };\n\n // Handle keyboard activation\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if ((event.key === \"Enter\" || event.key === \" \") && !disabled && onPress) {\n event.preventDefault();\n onPress();\n }\n };\n\n return (\n <Box\n onPress={!disabled ? onPress : undefined}\n paddingHorizontal={16}\n paddingVertical={8}\n flexDirection=\"row\"\n alignItems=\"center\"\n backgroundColor={getBackgroundColor()}\n hoverStyle={\n !disabled && !selected\n ? {\n backgroundColor: theme.colors.control.input.bgHover,\n }\n : undefined\n }\n role=\"menuitem\"\n tabIndex={disabled ? -1 : 0}\n aria-disabled={disabled}\n onKeyDown={handleKeyDown}\n testID={testID}\n style={{\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n }}\n >\n {icon && (\n <Box marginRight={12} alignItems=\"center\" justifyContent=\"center\">\n {icon}\n </Box>\n )}\n <Box flex={1}>\n <Text color={getContentColor()} fontSize={14} fontWeight=\"400\">\n {children}\n </Text>\n </Box>\n </Box>\n );\n};\n\nDropdown.displayName = \"Dropdown\";\nDropdownItem.displayName = \"DropdownItem\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n 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={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/Dropdown.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Dropdown\";\n","import React, { useState, useRef, useEffect, useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\n\nexport interface DropdownProps extends ThemeOverrideProps {\n id?: string;\n trigger: React.ReactNode;\n children: React.ReactNode;\n isOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Width of the dropdown menu (does not affect trigger width) */\n width?: string | number;\n /** Horizontal alignment of dropdown menu relative to trigger. Default: \"start\" */\n align?: \"start\" | \"end\";\n /** Accessible label for the dropdown menu */\n \"aria-label\"?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(\n (\n {\n id,\n trigger,\n children,\n isOpen: propIsOpen,\n onOpenChange,\n width = \"auto\",\n align = \"start\",\n \"aria-label\": ariaLabel,\n testID,\n themeMode,\n themeProductContext,\n },\n ref\n ) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const isOpen = propIsOpen !== undefined ? propIsOpen : internalIsOpen;\n const containerRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Merge forwarded ref with internal container ref\n React.useImperativeHandle(\n ref,\n () => containerRef.current as HTMLDivElement\n );\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const closeMenu = useCallback(() => {\n if (propIsOpen === undefined) {\n setInternalIsOpen(false);\n }\n if (onOpenChange) onOpenChange(false);\n }, [propIsOpen, onOpenChange]);\n\n const toggleOpen = useCallback(() => {\n const nextOpen = !isOpen;\n if (propIsOpen === undefined) {\n setInternalIsOpen(nextOpen);\n }\n if (onOpenChange) onOpenChange(nextOpen);\n }, [isOpen, propIsOpen, onOpenChange]);\n\n // Safe focus helper for cross-platform compatibility\n const focusTrigger = useCallback(() => {\n if (typeof document !== \"undefined\" && triggerRef.current) {\n // Find the first focusable element within the trigger wrapper\n const focusable = triggerRef.current.querySelector<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n if (focusable) {\n focusable.focus();\n }\n }\n }, []);\n\n // Handle keyboard navigation\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Escape\" && isOpen) {\n event.preventDefault();\n closeMenu();\n focusTrigger();\n } else if (event.key === \"Tab\" && isOpen) {\n closeMenu();\n // Also restore focus on Tab for consistent keyboard navigation\n focusTrigger();\n }\n },\n [isOpen, closeMenu, focusTrigger]\n );\n\n // Handle trigger keyboard events\n const handleTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n toggleOpen();\n } else if (event.key === \"ArrowDown\" && !isOpen) {\n event.preventDefault();\n if (propIsOpen === undefined) {\n setInternalIsOpen(true);\n }\n if (onOpenChange) onOpenChange(true);\n }\n },\n [isOpen, toggleOpen, propIsOpen, onOpenChange]\n );\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n closeMenu();\n }\n };\n\n if (isOpen && typeof document !== \"undefined\") {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n return () => {\n if (typeof document !== \"undefined\") {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }\n };\n }, [isOpen, closeMenu]);\n\n return (\n <div\n ref={containerRef}\n id={id}\n style={{\n position: \"relative\",\n width: \"fit-content\",\n alignSelf: \"flex-start\",\n height: \"fit-content\",\n }}\n onKeyDown={handleKeyDown}\n data-testid={testID}\n >\n <div\n ref={triggerRef}\n onClick={toggleOpen}\n onKeyDown={handleTriggerKeyDown}\n aria-haspopup=\"menu\"\n aria-expanded={isOpen}\n >\n {trigger}\n </div>\n {isOpen && (\n <Box\n ref={menuRef}\n position=\"absolute\"\n top=\"100%\"\n {...(align === \"end\" ? { right: 0 } : { left: 0 })}\n marginTop={4}\n backgroundColor={theme.colors.background.secondary}\n borderColor={theme.colors.border.secondary}\n borderWidth={1}\n borderRadius={theme.radius.button}\n paddingVertical={4}\n role=\"menu\"\n {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n style={{\n zIndex: 1000,\n boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\",\n ...(width === \"auto\" ? { minWidth: \"100%\" } : { width }),\n }}\n >\n {children}\n </Box>\n )}\n </div>\n );\n }\n);\n\nexport interface DropdownItemProps extends ThemeOverrideProps {\n children: React.ReactNode;\n onPress?: () => void;\n active?: boolean;\n /** Whether this item is selected (shows trailing checkmark with control/check/bg color) */\n selected?: boolean;\n disabled?: boolean;\n icon?: React.ReactNode;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const DropdownItem: React.FC<DropdownItemProps> = ({\n children,\n onPress,\n active,\n selected,\n disabled,\n icon,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const brandColors = theme.colors.control.brand.primary;\n const contentColors = theme.colors.content;\n\n // Determine background color\n const getBackgroundColor = () => {\n if (selected) {\n return brandColors?.bg || theme.colors.control.input.bg; // Cyan background for selected items\n }\n if (active) {\n return theme.colors.control.input.bgHover;\n }\n return \"transparent\";\n };\n\n // Determine text/icon color\n const getContentColor = () => {\n if (selected) {\n return contentColors?.on?.brand || theme.colors.content.primary; // Black text on cyan background\n }\n return theme.colors.content.secondary;\n };\n\n // Handle keyboard activation\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if ((event.key === \"Enter\" || event.key === \" \") && !disabled && onPress) {\n event.preventDefault();\n onPress();\n }\n };\n\n return (\n <Box\n onPress={!disabled ? onPress : undefined}\n paddingHorizontal={16}\n paddingVertical={8}\n flexDirection=\"row\"\n alignItems=\"center\"\n backgroundColor={getBackgroundColor()}\n hoverStyle={\n !disabled && !selected\n ? {\n backgroundColor: theme.colors.control.input.bgHover,\n }\n : undefined\n }\n role=\"menuitem\"\n tabIndex={disabled ? -1 : 0}\n aria-disabled={disabled}\n onKeyDown={handleKeyDown}\n testID={testID}\n style={{\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n }}\n >\n {icon && (\n <Box marginRight={12} alignItems=\"center\" justifyContent=\"center\">\n {icon}\n </Box>\n )}\n <Box flex={1}>\n <Text color={getContentColor()} fontSize={14} fontWeight=\"400\">\n {children}\n </Text>\n </Box>\n </Box>\n );\n};\n\nDropdown.displayName = \"Dropdown\";\nDropdownItem.displayName = \"DropdownItem\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n 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={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime","React"]}
|