@xsolla/xui-list 0.149.1 → 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.
- package/README.md +63 -147
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
# List
|
|
2
2
|
|
|
3
|
-
A cross-platform
|
|
3
|
+
A cross-platform list container with optional section titles and interactive rows. Rows support hover, press, and basic keyboard activation.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-list
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-list
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
11
|
+
## Imports
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
```tsx
|
|
14
|
+
import { List } from '@xsolla/xui-list';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
16
18
|
|
|
17
19
|
```tsx
|
|
18
20
|
import * as React from 'react';
|
|
19
21
|
import { List } from '@xsolla/xui-list';
|
|
20
22
|
|
|
21
|
-
export default function
|
|
23
|
+
export default function QuickStart() {
|
|
22
24
|
return (
|
|
23
25
|
<List>
|
|
24
26
|
<List.Row>Item 1</List.Row>
|
|
@@ -29,19 +31,53 @@ export default function BasicList() {
|
|
|
29
31
|
}
|
|
30
32
|
```
|
|
31
33
|
|
|
32
|
-
|
|
34
|
+
## API Reference
|
|
35
|
+
|
|
36
|
+
### `<List>`
|
|
37
|
+
|
|
38
|
+
Container. Extends `BoxProps`; layout/style props are forwarded to the underlying `Box`.
|
|
39
|
+
|
|
40
|
+
| Prop | Type | Default | Description |
|
|
41
|
+
| --- | --- | --- | --- |
|
|
42
|
+
| `children` | `ReactNode` | - | Rows and section titles. |
|
|
43
|
+
|
|
44
|
+
### `<List.Row>`
|
|
45
|
+
|
|
46
|
+
| Prop | Type | Default | Description |
|
|
47
|
+
| --- | --- | --- | --- |
|
|
48
|
+
| `children` | `ReactNode` | - | Row content. |
|
|
49
|
+
| `hoverable` | `boolean` | `false` | Render hover and press background even without a press handler. |
|
|
50
|
+
| `onClick` | `() => void` | - | Web click handler. Takes precedence when both are set. |
|
|
51
|
+
| `onPress` | `() => void` | - | Cross-platform press handler. |
|
|
52
|
+
|
|
53
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
54
|
+
|
|
55
|
+
When a press handler or `hoverable` is set, the row is focusable (`tabIndex={0}`) and activates on `Enter` or `Space`.
|
|
56
|
+
|
|
57
|
+
### `<List.Title>`
|
|
58
|
+
|
|
59
|
+
Section heading rendered above a group of rows.
|
|
60
|
+
|
|
61
|
+
| Prop | Type | Default | Description |
|
|
62
|
+
| --- | --- | --- | --- |
|
|
63
|
+
| `children` | `ReactNode` | - | Title text. |
|
|
64
|
+
|
|
65
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
66
|
+
|
|
67
|
+
## Examples
|
|
68
|
+
|
|
69
|
+
### Sectioned list
|
|
33
70
|
|
|
34
71
|
```tsx
|
|
35
72
|
import * as React from 'react';
|
|
36
73
|
import { List } from '@xsolla/xui-list';
|
|
37
74
|
|
|
38
|
-
export default function
|
|
75
|
+
export default function Sectioned() {
|
|
39
76
|
return (
|
|
40
77
|
<List>
|
|
41
78
|
<List.Title>Fruits</List.Title>
|
|
42
79
|
<List.Row>Apple</List.Row>
|
|
43
80
|
<List.Row>Banana</List.Row>
|
|
44
|
-
<List.Row>Cherry</List.Row>
|
|
45
81
|
<List.Title>Vegetables</List.Title>
|
|
46
82
|
<List.Row>Carrot</List.Row>
|
|
47
83
|
<List.Row>Broccoli</List.Row>
|
|
@@ -50,95 +86,44 @@ export default function SectionedList() {
|
|
|
50
86
|
}
|
|
51
87
|
```
|
|
52
88
|
|
|
53
|
-
###
|
|
89
|
+
### Interactive rows
|
|
54
90
|
|
|
55
91
|
```tsx
|
|
56
92
|
import * as React from 'react';
|
|
57
93
|
import { List } from '@xsolla/xui-list';
|
|
58
94
|
|
|
59
|
-
export default function
|
|
95
|
+
export default function Interactive() {
|
|
60
96
|
return (
|
|
61
97
|
<List>
|
|
62
|
-
<List.Row
|
|
63
|
-
<List.Row
|
|
64
|
-
<List.Row hoverable>Hoverable
|
|
98
|
+
<List.Row onPress={() => console.log('1')}>Activate row 1</List.Row>
|
|
99
|
+
<List.Row onPress={() => console.log('2')}>Activate row 2</List.Row>
|
|
100
|
+
<List.Row hoverable>Hoverable but inert</List.Row>
|
|
65
101
|
</List>
|
|
66
102
|
);
|
|
67
103
|
}
|
|
68
104
|
```
|
|
69
105
|
|
|
70
|
-
###
|
|
71
|
-
|
|
72
|
-
```tsx
|
|
73
|
-
import * as React from 'react';
|
|
74
|
-
import { List } from '@xsolla/xui-list';
|
|
75
|
-
|
|
76
|
-
export default function ClickableList() {
|
|
77
|
-
const handleClick = (item: string) => {
|
|
78
|
-
console.log('Clicked:', item);
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
return (
|
|
82
|
-
<List>
|
|
83
|
-
<List.Row onClick={() => handleClick('Item 1')}>Click me - Item 1</List.Row>
|
|
84
|
-
<List.Row onClick={() => handleClick('Item 2')}>Click me - Item 2</List.Row>
|
|
85
|
-
<List.Row onClick={() => handleClick('Item 3')}>Click me - Item 3</List.Row>
|
|
86
|
-
</List>
|
|
87
|
-
);
|
|
88
|
-
}
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
## Anatomy
|
|
92
|
-
|
|
93
|
-
```jsx
|
|
94
|
-
import { List } from '@xsolla/xui-list';
|
|
95
|
-
|
|
96
|
-
<List>
|
|
97
|
-
<List.Title>Section Header</List.Title> {/* Section title */}
|
|
98
|
-
<List.Row {/* List item */}
|
|
99
|
-
hoverable={false} // Show hover background
|
|
100
|
-
onClick={handleClick} // Click handler
|
|
101
|
-
onPress={handlePress} // Press handler (RN)
|
|
102
|
-
>
|
|
103
|
-
Row Content
|
|
104
|
-
</List.Row>
|
|
105
|
-
</List>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
## Examples
|
|
109
|
-
|
|
110
|
-
### Settings Menu
|
|
106
|
+
### Settings menu (with Cell)
|
|
111
107
|
|
|
112
108
|
```tsx
|
|
113
109
|
import * as React from 'react';
|
|
114
110
|
import { List } from '@xsolla/xui-list';
|
|
115
111
|
import { Cell } from '@xsolla/xui-cell';
|
|
116
|
-
import {
|
|
117
|
-
import { ChevronRight, Shield } from '@xsolla/xui-icons-base';
|
|
112
|
+
import { ChevronRight } from '@xsolla/xui-icons-base';
|
|
118
113
|
|
|
119
114
|
export default function SettingsMenu() {
|
|
120
115
|
return (
|
|
121
116
|
<List>
|
|
122
117
|
<List.Title>Account</List.Title>
|
|
123
|
-
<List.Row
|
|
124
|
-
<Cell>
|
|
125
|
-
<Cell.Slot><User size={20} /></Cell.Slot>
|
|
126
|
-
<Cell.Content>Profile</Cell.Content>
|
|
127
|
-
<Cell.Slot><ChevronRight size={16} /></Cell.Slot>
|
|
128
|
-
</Cell>
|
|
129
|
-
</List.Row>
|
|
130
|
-
<List.Row onClick={() => console.log('Security')}>
|
|
118
|
+
<List.Row onPress={() => {}}>
|
|
131
119
|
<Cell>
|
|
132
|
-
<Cell.
|
|
133
|
-
<Cell.Content>Security</Cell.Content>
|
|
120
|
+
<Cell.Text title="Profile" />
|
|
134
121
|
<Cell.Slot><ChevronRight size={16} /></Cell.Slot>
|
|
135
122
|
</Cell>
|
|
136
123
|
</List.Row>
|
|
137
|
-
<List.
|
|
138
|
-
<List.Row onClick={() => console.log('Notifications')}>
|
|
124
|
+
<List.Row onPress={() => {}}>
|
|
139
125
|
<Cell>
|
|
140
|
-
<Cell.
|
|
141
|
-
<Cell.Content>Notifications</Cell.Content>
|
|
126
|
+
<Cell.Text title="Security" />
|
|
142
127
|
<Cell.Slot><ChevronRight size={16} /></Cell.Slot>
|
|
143
128
|
</Cell>
|
|
144
129
|
</List.Row>
|
|
@@ -147,84 +132,15 @@ export default function SettingsMenu() {
|
|
|
147
132
|
}
|
|
148
133
|
```
|
|
149
134
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
```tsx
|
|
153
|
-
import * as React from 'react';
|
|
154
|
-
import { List } from '@xsolla/xui-list';
|
|
155
|
-
import { Radio } from '@xsolla/xui-radio';
|
|
156
|
-
|
|
157
|
-
export default function SelectionList() {
|
|
158
|
-
const [selected, setSelected] = React.useState('option1');
|
|
159
|
-
|
|
160
|
-
return (
|
|
161
|
-
<List>
|
|
162
|
-
<List.Row onClick={() => setSelected('option1')}>
|
|
163
|
-
<Radio checked={selected === 'option1'} />
|
|
164
|
-
<span style={{ marginLeft: 12 }}>Option 1</span>
|
|
165
|
-
</List.Row>
|
|
166
|
-
<List.Row onClick={() => setSelected('option2')}>
|
|
167
|
-
<Radio checked={selected === 'option2'} />
|
|
168
|
-
<span style={{ marginLeft: 12 }}>Option 2</span>
|
|
169
|
-
</List.Row>
|
|
170
|
-
<List.Row onClick={() => setSelected('option3')}>
|
|
171
|
-
<Radio checked={selected === 'option3'} />
|
|
172
|
-
<span style={{ marginLeft: 12 }}>Option 3</span>
|
|
173
|
-
</List.Row>
|
|
174
|
-
</List>
|
|
175
|
-
);
|
|
176
|
-
}
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
## API Reference
|
|
180
|
-
|
|
181
|
-
### List
|
|
182
|
-
|
|
183
|
-
Container component for list items.
|
|
184
|
-
|
|
185
|
-
**List Props:**
|
|
186
|
-
|
|
187
|
-
| Prop | Type | Default | Description |
|
|
188
|
-
| :--- | :--- | :------ | :---------- |
|
|
189
|
-
| children | `ReactNode` | - | List rows and titles. |
|
|
190
|
-
|
|
191
|
-
---
|
|
192
|
-
|
|
193
|
-
### List.Row
|
|
194
|
-
|
|
195
|
-
Individual list item component.
|
|
196
|
-
|
|
197
|
-
**List.Row Props:**
|
|
198
|
-
|
|
199
|
-
| Prop | Type | Default | Description |
|
|
200
|
-
| :--- | :--- | :------ | :---------- |
|
|
201
|
-
| children | `ReactNode` | - | Row content. |
|
|
202
|
-
| hoverable | `boolean` | `false` | Show hover background effect. |
|
|
203
|
-
| onClick | `() => void` | - | Click handler (web). |
|
|
204
|
-
| onPress | `() => void` | - | Press handler (React Native). |
|
|
205
|
-
|
|
206
|
-
---
|
|
207
|
-
|
|
208
|
-
### List.Title
|
|
209
|
-
|
|
210
|
-
Section title component.
|
|
211
|
-
|
|
212
|
-
**List.Title Props:**
|
|
213
|
-
|
|
214
|
-
| Prop | Type | Default | Description |
|
|
215
|
-
| :--- | :--- | :------ | :---------- |
|
|
216
|
-
| children | `ReactNode` | - | Title text. |
|
|
217
|
-
|
|
218
|
-
## Keyboard Navigation
|
|
135
|
+
## Keyboard
|
|
219
136
|
|
|
220
137
|
| Key | Action |
|
|
221
|
-
|
|
|
222
|
-
| Enter | Activate row
|
|
223
|
-
| Space | Activate row
|
|
138
|
+
| --- | --- |
|
|
139
|
+
| `Enter` | Activate the focused row when a press handler is set. |
|
|
140
|
+
| `Space` | Activate the focused row when a press handler is set. |
|
|
224
141
|
|
|
225
142
|
## Accessibility
|
|
226
143
|
|
|
227
|
-
-
|
|
228
|
-
-
|
|
229
|
-
-
|
|
230
|
-
- Keyboard navigation with Enter/Space to activate
|
|
144
|
+
- Interactive rows are focusable via `tabIndex={0}` and respond to `Enter`/`Space`.
|
|
145
|
+
- The current implementation passes `role: "list"` / `role: "listitem"` inside the `style` object, where it has no effect on either web or native (`role` is not a valid CSS property and native ignores it). Treat `List` as visually-only and add semantic markup yourself if list semantics are required (e.g. wrap children in a `<ul>` / `<li>` outside the package) and provide an accessible label on the container.
|
|
146
|
+
- Decorative icons inside rows should be marked `aria-hidden`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-list",
|
|
3
|
-
"version": "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",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-avatar": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-avatar": "0.151.0",
|
|
14
|
+
"@xsolla/xui-core": "0.151.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.151.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|