@xsolla/xui-dropdown 0.95.0 → 0.97.0-pr154.1771807405
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 +49 -0
- package/package.json +6 -6
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @xsolla/xui-dropdown
|
|
2
|
+
|
|
3
|
+
Generic dropdown container that attaches a positioned menu to any trigger element.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-dropdown
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Dropdown, DropdownItem } from '@xsolla/xui-dropdown';
|
|
15
|
+
|
|
16
|
+
<Dropdown trigger={<button>Options</button>}>
|
|
17
|
+
<DropdownItem onPress={() => console.log('Edit')}>Edit</DropdownItem>
|
|
18
|
+
<DropdownItem onPress={() => console.log('Delete')}>Delete</DropdownItem>
|
|
19
|
+
</Dropdown>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Components
|
|
23
|
+
|
|
24
|
+
- `Dropdown` — wrapper that positions the menu relative to the trigger
|
|
25
|
+
- `DropdownItem` — individual menu item with optional icon and selected state
|
|
26
|
+
|
|
27
|
+
## Props
|
|
28
|
+
|
|
29
|
+
### Dropdown
|
|
30
|
+
|
|
31
|
+
| 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 |
|
|
39
|
+
|
|
40
|
+
### DropdownItem
|
|
41
|
+
|
|
42
|
+
| 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 |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-dropdown",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0-pr154.1771807405",
|
|
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.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-divider": "0.
|
|
19
|
-
"@xsolla/xui-icons": "0.
|
|
20
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-button": "0.97.0-pr154.1771807405",
|
|
17
|
+
"@xsolla/xui-core": "0.97.0-pr154.1771807405",
|
|
18
|
+
"@xsolla/xui-divider": "0.97.0-pr154.1771807405",
|
|
19
|
+
"@xsolla/xui-icons": "0.97.0-pr154.1771807405",
|
|
20
|
+
"@xsolla/xui-primitives-core": "0.97.0-pr154.1771807405"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": ">=16.8.0",
|