@xsolla/xui-dropdown 0.99.0 → 0.101.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 +157 -25
  2. package/package.json +6 -6
package/README.md CHANGED
@@ -1,49 +1,181 @@
1
- # @xsolla/xui-dropdown
1
+ # Dropdown
2
2
 
3
- Generic dropdown container that attaches a positioned menu to any trigger element.
3
+ A cross-platform React dropdown menu component that displays a list of actions when triggered. Supports controlled and uncontrolled modes.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
+ npm install @xsolla/xui-dropdown
9
+ # or
8
10
  yarn add @xsolla/xui-dropdown
9
11
  ```
10
12
 
11
- ## Usage
13
+ ## Demo
14
+
15
+ ### Basic Dropdown
12
16
 
13
17
  ```tsx
18
+ import * as React from 'react';
14
19
  import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
20
+ import { Button } from '@xsolla/xui-button';
15
21
 
16
- <Dropdown trigger={<button>Options</button>}>
17
- <DropdownItem onPress={() => console.log('Edit')}>Edit</DropdownItem>
18
- <DropdownItem onPress={() => console.log('Delete')}>Delete</DropdownItem>
19
- </Dropdown>
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
+ }
20
77
  ```
21
78
 
22
- ## Components
79
+ ### Selection Indicator
23
80
 
24
- - `Dropdown` — wrapper that positions the menu relative to the trigger
25
- - `DropdownItem` — individual menu item with optional icon and selected state
81
+ ```tsx
82
+ import * as React from 'react';
83
+ import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
84
+ import { Button } from '@xsolla/xui-button';
26
85
 
27
- ## Props
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
28
137
 
29
138
  ### Dropdown
30
139
 
140
+ Container component for dropdown menu.
141
+
142
+ **Dropdown Props:**
143
+
31
144
  | Prop | Type | Default | Description |
32
- |------|------|---------|-------------|
33
- | `trigger` | `ReactNode` | — | Element that opens/closes the menu on click |
34
- | `children` | `ReactNode` | — | Menu content, typically `DropdownItem` elements |
35
- | `isOpen` | `boolean` | — | Controlled open state |
36
- | `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes |
37
- | `align` | `"start" \| "end"` | `"start"` | Horizontal alignment of the menu relative to the trigger |
38
- | `width` | `string \| number` | `"auto"` | Width of the dropdown menu |
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
+ ---
39
153
 
40
154
  ### DropdownItem
41
155
 
156
+ Individual menu item component.
157
+
158
+ **DropdownItem Props:**
159
+
42
160
  | Prop | Type | Default | Description |
43
- |------|------|---------|-------------|
44
- | `children` | `ReactNode` | — | Item label content |
45
- | `onPress` | `() => void` | — | Called when the item is activated |
46
- | `selected` | `boolean` | — | Highlights item with brand colour and shows a checkmark |
47
- | `active` | `boolean` | — | Highlights item with hover colour |
48
- | `disabled` | `boolean` | — | Prevents interaction and dims the item |
49
- | `icon` | `ReactNode` | — | Icon displayed to the left of the label |
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-dropdown",
3
- "version": "0.99.0",
3
+ "version": "0.101.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.99.0",
17
- "@xsolla/xui-core": "0.99.0",
18
- "@xsolla/xui-divider": "0.99.0",
19
- "@xsolla/xui-icons": "0.99.0",
20
- "@xsolla/xui-primitives-core": "0.99.0"
16
+ "@xsolla/xui-button": "0.101.0",
17
+ "@xsolla/xui-core": "0.101.0",
18
+ "@xsolla/xui-divider": "0.101.0",
19
+ "@xsolla/xui-icons": "0.101.0",
20
+ "@xsolla/xui-primitives-core": "0.101.0"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": ">=16.8.0",