@xsolla/xui-status-dropdown 0.150.0 → 0.152.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 +82 -11
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,24 +1,95 @@
|
|
|
1
|
-
#
|
|
1
|
+
# StatusDropdown
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A compact interactive status tag that opens a menu to change the current status. Cross-platform (web and native).
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
|
|
8
|
+
npm install @xsolla/xui-status-dropdown
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Imports
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
14
|
import { StatusDropdown } from '@xsolla/xui-status-dropdown';
|
|
15
|
+
import type { StatusDropdownProps, StatusDropdownPalette } from '@xsolla/xui-status-dropdown';
|
|
16
|
+
import { ContextMenuItem } from '@xsolla/xui-context-menu';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Quick start
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
const [status, setStatus] = useState('Success');
|
|
23
|
+
|
|
24
|
+
<StatusDropdown label={status} palette="Success" dot>
|
|
25
|
+
<ContextMenuItem onPress={() => setStatus('Success')}>Success</ContextMenuItem>
|
|
26
|
+
<ContextMenuItem onPress={() => setStatus('Warning')}>Warning</ContextMenuItem>
|
|
27
|
+
<ContextMenuItem onPress={() => setStatus('Alert')}>Alert</ContextMenuItem>
|
|
28
|
+
</StatusDropdown>;
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## API Reference
|
|
32
|
+
|
|
33
|
+
### `<StatusDropdown>`
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
| --- | --- | --- | --- |
|
|
37
|
+
| `label` | `string` | — | Current status text shown on the trigger. |
|
|
38
|
+
| `palette` | `'Neutral' \| 'Success' \| 'Warning' \| 'Alert' \| 'Brand'` | `'Neutral'` | Colour palette for the trigger. |
|
|
39
|
+
| `dot` | `boolean` | `false` | Show a small status dot before the label. |
|
|
40
|
+
| `children` | `ReactNode` | — | Menu content; typically `ContextMenuItem` elements. |
|
|
41
|
+
| `onSelect` | `(value: any) => void` | — | Fired when a menu item is selected. |
|
|
42
|
+
| `isOpen` | `boolean` | — | Controlled open state. |
|
|
43
|
+
| `onOpenChange` | `(isOpen: boolean) => void` | — | Fires when the open state changes. |
|
|
44
|
+
| `aria-label` | `string` | `` `Status: ${label}` `` | Accessible label for the trigger. |
|
|
45
|
+
| `id` | `string` | — | HTML id on the underlying dropdown. |
|
|
46
|
+
| `testID` | `string` | — | Test identifier; suffixed for inner trigger and dot. |
|
|
47
|
+
|
|
48
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
49
|
+
|
|
50
|
+
### Types
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
type StatusDropdownPalette = 'Neutral' | 'Success' | 'Warning' | 'Alert' | 'Brand';
|
|
54
|
+
```
|
|
15
55
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
56
|
+
## Examples
|
|
57
|
+
|
|
58
|
+
### Controlled selection
|
|
59
|
+
|
|
60
|
+
Item-level `onPress` handlers on each `ContextMenuItem` drive the controlled value; this is the recommended pattern.
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
const STATUSES = [
|
|
64
|
+
{ label: 'Success', palette: 'Success' },
|
|
65
|
+
{ label: 'Warning', palette: 'Warning' },
|
|
66
|
+
{ label: 'Alert', palette: 'Alert' },
|
|
67
|
+
{ label: 'Neutral', palette: 'Neutral' },
|
|
68
|
+
{ label: 'Brand', palette: 'Brand' },
|
|
69
|
+
] as const;
|
|
70
|
+
|
|
71
|
+
const [current, setCurrent] = useState(STATUSES[0]);
|
|
72
|
+
|
|
73
|
+
<StatusDropdown label={current.label} palette={current.palette} dot>
|
|
74
|
+
{STATUSES.map((s) => (
|
|
75
|
+
<ContextMenuItem key={s.label} onPress={() => setCurrent(s)}>
|
|
76
|
+
{s.label}
|
|
77
|
+
</ContextMenuItem>
|
|
78
|
+
))}
|
|
23
79
|
</StatusDropdown>
|
|
24
80
|
```
|
|
81
|
+
|
|
82
|
+
### Without dot
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
<StatusDropdown label="Warning" palette="Warning">
|
|
86
|
+
<ContextMenuItem>Success</ContextMenuItem>
|
|
87
|
+
<ContextMenuItem>Warning</ContextMenuItem>
|
|
88
|
+
</StatusDropdown>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Accessibility
|
|
92
|
+
|
|
93
|
+
- Trigger renders with `role="button"` and `aria-haspopup="listbox"`.
|
|
94
|
+
- An `aria-label` is auto-generated from `label` when not supplied.
|
|
95
|
+
- Menu open state is communicated through the underlying `Dropdown`; chevron rotates with the open state.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-status-dropdown",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.152.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-context-menu": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-dropdown": "0.
|
|
19
|
-
"@xsolla/xui-primitives-core": "0.
|
|
20
|
-
"@xsolla/xui-status": "0.
|
|
16
|
+
"@xsolla/xui-context-menu": "0.152.0",
|
|
17
|
+
"@xsolla/xui-core": "0.152.0",
|
|
18
|
+
"@xsolla/xui-dropdown": "0.152.0",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.152.0",
|
|
20
|
+
"@xsolla/xui-status": "0.152.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": ">=16.8.0",
|