@xsolla/xui-dropdown 0.150.0 → 0.151.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +76 -142
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -1,181 +1,115 @@
1
1
  # Dropdown
2
2
 
3
- A cross-platform React dropdown menu component that displays a list of actions when triggered. Supports controlled and uncontrolled modes.
3
+ A cross-platform dropdown menu that displays a list of actions when triggered; supports controlled and uncontrolled modes.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-dropdown
9
- # or
10
- yarn add @xsolla/xui-dropdown
11
9
  ```
12
10
 
13
- ## Demo
14
-
15
- ### Basic Dropdown
11
+ ## Imports
16
12
 
17
13
  ```tsx
18
- import * as React from 'react';
19
14
  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
- }
15
+ import type { DropdownProps, DropdownItemProps } from '@xsolla/xui-dropdown';
51
16
  ```
52
17
 
53
- ### Controlled Dropdown
18
+ ## Quick start
54
19
 
55
20
  ```tsx
56
- import * as React from 'react';
57
- import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
58
21
  import { Button } from '@xsolla/xui-button';
59
22
 
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
- }
23
+ <Dropdown trigger={<Button>Open menu</Button>}>
24
+ <DropdownItem onPress={() => console.log('Edit')}>Edit</DropdownItem>
25
+ <DropdownItem onPress={() => console.log('Duplicate')}>Duplicate</DropdownItem>
26
+ <DropdownItem onPress={() => console.log('Delete')}>Delete</DropdownItem>
27
+ </Dropdown>;
77
28
  ```
78
29
 
79
- ### Selection Indicator
30
+ ## API Reference
80
31
 
81
- ```tsx
82
- import * as React from 'react';
83
- import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
84
- import { Button } from '@xsolla/xui-button';
32
+ ### `<Dropdown>`
85
33
 
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
- ```
34
+ | Prop | Type | Default | Description |
35
+ | --- | --- | --- | --- |
36
+ | `trigger` | `ReactNode` | — | Element that opens the menu. |
37
+ | `children` | `ReactNode` | — | `DropdownItem` elements (or any nodes). |
38
+ | `isOpen` | `boolean` | — | Controlled open state. |
39
+ | `onOpenChange` | `(open: boolean) => void` | — | Fired when the open state changes. |
40
+ | `width` | `string \| number` | `'auto'` | Width of the menu (does not affect the trigger). |
41
+ | `align` | `'start' \| 'end'` | `'start'` | Horizontal alignment of the menu relative to the trigger. |
42
+ | `id` | `string` | — | HTML id on the root container. |
43
+ | `aria-label` | `string` | — | Accessible label for the menu. |
44
+ | `testID` | `string` | — | Test identifier. |
113
45
 
114
- ## Anatomy
46
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
115
47
 
116
- ```jsx
117
- import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
48
+ ### `<DropdownItem>`
118
49
 
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
50
+ | Prop | Type | Default | Description |
51
+ | --- | --- | --- | --- |
52
+ | `children` | `ReactNode` | — | Item content. |
53
+ | `onPress` | `() => void` | — | Press handler. |
54
+ | `icon` | `ReactNode` | — | Leading icon. |
55
+ | `selected` | `boolean` | `false` | Show selection styling and checkmark background. |
56
+ | `active` | `boolean` | `false` | Active/hover state. |
57
+ | `disabled` | `boolean` | `false` | Disable the item. |
58
+ | `testID` | `string` | — | Test identifier. |
137
59
 
138
- ### Dropdown
60
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
139
61
 
140
- Container component for dropdown menu.
62
+ ## Examples
141
63
 
142
- **Dropdown Props:**
64
+ ### With icons
143
65
 
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. |
66
+ ```tsx
67
+ import { Edit, TrashCan } from '@xsolla/xui-icons-base';
68
+ import { Copy } from '@xsolla/xui-icons';
151
69
 
152
- ---
70
+ <Dropdown trigger={<Button>Actions</Button>}>
71
+ <DropdownItem icon={<Edit size={16} />}>Edit</DropdownItem>
72
+ <DropdownItem icon={<Copy size={16} />}>Duplicate</DropdownItem>
73
+ <DropdownItem icon={<TrashCan size={16} />}>Delete</DropdownItem>
74
+ </Dropdown>;
75
+ ```
153
76
 
154
- ### DropdownItem
77
+ ### Controlled
155
78
 
156
- Individual menu item component.
79
+ ```tsx
80
+ const [isOpen, setIsOpen] = useState(false);
157
81
 
158
- **DropdownItem Props:**
82
+ <Dropdown trigger={<Button>Menu</Button>} isOpen={isOpen} onOpenChange={setIsOpen}>
83
+ <DropdownItem onPress={() => setIsOpen(false)}>Action 1</DropdownItem>
84
+ <DropdownItem onPress={() => setIsOpen(false)}>Action 2</DropdownItem>
85
+ </Dropdown>;
86
+ ```
159
87
 
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. |
88
+ ### Selection indicator
168
89
 
169
- ## Behavior
90
+ ```tsx
91
+ const [selected, setSelected] = useState('option1');
170
92
 
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
93
+ <Dropdown trigger={<Button>Select option</Button>} align="end">
94
+ <DropdownItem
95
+ selected={selected === 'option1'}
96
+ onPress={() => setSelected('option1')}
97
+ >
98
+ Option 1
99
+ </DropdownItem>
100
+ <DropdownItem
101
+ selected={selected === 'option2'}
102
+ onPress={() => setSelected('option2')}
103
+ >
104
+ Option 2
105
+ </DropdownItem>
106
+ </Dropdown>;
107
+ ```
175
108
 
176
109
  ## Accessibility
177
110
 
178
- - Uses `role="menu"` for dropdown container
179
- - Items use `role="menuitem"`
180
- - Keyboard support for navigation
181
- - Focus management when opening/closing
111
+ - Trigger exposes `aria-haspopup="menu"` and `aria-expanded`.
112
+ - Menu uses `role="menu"`; items use `role="menuitem"`.
113
+ - Enter/Space on the trigger toggles open; ArrowDown opens the menu.
114
+ - Escape and Tab close the menu and restore focus to the trigger.
115
+ - Clicking outside the dropdown closes it.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-dropdown",
3
- "version": "0.150.0",
3
+ "version": "0.151.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-button": "0.150.0",
17
- "@xsolla/xui-core": "0.150.0",
18
- "@xsolla/xui-divider": "0.150.0",
19
- "@xsolla/xui-icons": "0.150.0",
20
- "@xsolla/xui-primitives-core": "0.150.0"
16
+ "@xsolla/xui-button": "0.151.0",
17
+ "@xsolla/xui-core": "0.151.0",
18
+ "@xsolla/xui-divider": "0.151.0",
19
+ "@xsolla/xui-icons": "0.151.0",
20
+ "@xsolla/xui-primitives-core": "0.151.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": ">=16.8.0",