@xsolla/xui-multi-select 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 +149 -23
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,43 +1,169 @@
1
- # @xsolla/xui-multi-select
1
+ # Multi Select
2
2
 
3
- Multi-value dropdown select with tag or text display of selected items.
3
+ A cross-platform React multi-select component that allows users to select multiple options from a dropdown list with checkboxes.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
+ npm install @xsolla/xui-multi-select
9
+ # or
8
10
  yarn add @xsolla/xui-multi-select
9
11
  ```
10
12
 
11
- ## Usage
13
+ ## Demo
14
+
15
+ ### Basic Multi Select
12
16
 
13
17
  ```tsx
18
+ import * as React from 'react';
19
+ import { MultiSelect } from '@xsolla/xui-multi-select';
20
+
21
+ export default function BasicMultiSelect() {
22
+ const [selected, setSelected] = React.useState<string[]>([]);
23
+
24
+ return (
25
+ <MultiSelect
26
+ options={['React', 'Vue', 'Angular', 'Svelte']}
27
+ value={selected}
28
+ onChange={setSelected}
29
+ placeholder="Select frameworks"
30
+ />
31
+ );
32
+ }
33
+ ```
34
+
35
+ ### With Label
36
+
37
+ ```tsx
38
+ import * as React from 'react';
39
+ import { MultiSelect } from '@xsolla/xui-multi-select';
40
+
41
+ export default function LabeledMultiSelect() {
42
+ const [selected, setSelected] = React.useState<string[]>(['Marketing']);
43
+
44
+ return (
45
+ <MultiSelect
46
+ label="Departments"
47
+ options={['Engineering', 'Marketing', 'Sales', 'Design', 'HR']}
48
+ value={selected}
49
+ onChange={setSelected}
50
+ placeholder="Select departments"
51
+ />
52
+ );
53
+ }
54
+ ```
55
+
56
+ ### Multi Select Sizes
57
+
58
+ ```tsx
59
+ import * as React from 'react';
60
+ import { MultiSelect } from '@xsolla/xui-multi-select';
61
+
62
+ export default function MultiSelectSizes() {
63
+ const options = ['Option 1', 'Option 2', 'Option 3'];
64
+
65
+ return (
66
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
67
+ <MultiSelect options={options} size="xs" placeholder="Extra Small" />
68
+ <MultiSelect options={options} size="sm" placeholder="Small" />
69
+ <MultiSelect options={options} size="md" placeholder="Medium" />
70
+ <MultiSelect options={options} size="lg" placeholder="Large" />
71
+ <MultiSelect options={options} size="xl" placeholder="Extra Large" />
72
+ </div>
73
+ );
74
+ }
75
+ ```
76
+
77
+ ## Anatomy
78
+
79
+ ```jsx
14
80
  import { MultiSelect } from '@xsolla/xui-multi-select';
15
81
 
16
82
  <MultiSelect
17
- label="Platforms"
18
- options={[
19
- { label: 'Web', value: 'web' },
20
- { label: 'iOS', value: 'ios' },
21
- { label: 'Android', value: 'android' },
22
- ]}
23
- value={selected}
24
- onChange={setSelected}
83
+ options={['a', 'b', 'c']} // Available options
84
+ value={selectedArray} // Currently selected values
85
+ onChange={setSelected} // Selection change handler
86
+ placeholder="Select..." // Placeholder text
87
+ label="Label" // Label above select
88
+ size="md" // Size variant
89
+ disabled={false} // Disabled state
25
90
  />
26
91
  ```
27
92
 
28
- ## Props
93
+ ## Examples
94
+
95
+ ### Form Integration
96
+
97
+ ```tsx
98
+ import * as React from 'react';
99
+ import { MultiSelect } from '@xsolla/xui-multi-select';
100
+ import { Button } from '@xsolla/xui-button';
101
+
102
+ export default function FormMultiSelect() {
103
+ const [skills, setSkills] = React.useState<string[]>([]);
104
+
105
+ const handleSubmit = () => {
106
+ console.log('Selected skills:', skills);
107
+ };
108
+
109
+ return (
110
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}>
111
+ <MultiSelect
112
+ label="Skills"
113
+ options={['JavaScript', 'TypeScript', 'Python', 'Go', 'Rust', 'Java']}
114
+ value={skills}
115
+ onChange={setSkills}
116
+ placeholder="Select your skills"
117
+ />
118
+ <Button onPress={handleSubmit}>Submit</Button>
119
+ </div>
120
+ );
121
+ }
122
+ ```
123
+
124
+ ### Disabled State
125
+
126
+ ```tsx
127
+ import * as React from 'react';
128
+ import { MultiSelect } from '@xsolla/xui-multi-select';
129
+
130
+ export default function DisabledMultiSelect() {
131
+ return (
132
+ <MultiSelect
133
+ options={['Option 1', 'Option 2', 'Option 3']}
134
+ value={['Option 1']}
135
+ disabled
136
+ placeholder="Disabled select"
137
+ />
138
+ );
139
+ }
140
+ ```
141
+
142
+ ## API Reference
29
143
 
30
144
  ### MultiSelect
31
145
 
146
+ **MultiSelect Props:**
147
+
32
148
  | Prop | Type | Default | Description |
33
- |------|------|---------|-------------|
34
- | `options` | `MultiSelectOption[]` | — | List of options (`{ label, value, disabled? }`) |
35
- | `value` | `MultiSelectValue` | — | Array of selected values |
36
- | `onChange` | `(values: MultiSelectValue) => void` | — | Called when the selection changes |
37
- | `placeholder` | `string` | `"Select"` | Placeholder text when nothing is selected |
38
- | `label` | `string` | — | Label displayed above the control |
39
- | `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the control |
40
- | `state` | `"default" \| "hover" \| "focus" \| "disable" \| "error"` | — | Visual state |
41
- | `disabled` | `boolean` | `false` | Disables the control |
42
- | `errorMessage` | `string` | — | Error message shown below the control |
43
- | `variant` | `"tag" \| "text"` | `"tag"` | Display selected items as tags or comma-separated text |
149
+ | :--- | :--- | :------ | :---------- |
150
+ | options | `string[]` | - | **Required.** Available options. |
151
+ | value | `string[]` | `[]` | Currently selected values. |
152
+ | onChange | `(value: string[]) => void` | - | Selection change handler. |
153
+ | placeholder | `string` | - | Placeholder when nothing selected. |
154
+ | size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Component size. |
155
+ | label | `string` | - | Label above select. |
156
+ | disabled | `boolean` | `false` | Disabled state. |
157
+
158
+ ## Display Behavior
159
+
160
+ - When no items selected: Shows placeholder
161
+ - When items selected: Shows "N selected" text
162
+ - Dropdown shows checkboxes for each option
163
+ - Checked items are visually indicated
164
+
165
+ ## Accessibility
166
+
167
+ - Uses checkbox pattern for selections
168
+ - Dropdown is keyboard navigable
169
+ - Selection state announced to screen readers
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-multi-select",
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",
@@ -10,10 +10,10 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-checkbox": "0.99.0",
14
- "@xsolla/xui-core": "0.99.0",
15
- "@xsolla/xui-dropdown": "0.99.0",
16
- "@xsolla/xui-primitives-core": "0.99.0"
13
+ "@xsolla/xui-checkbox": "0.101.0",
14
+ "@xsolla/xui-core": "0.101.0",
15
+ "@xsolla/xui-dropdown": "0.101.0",
16
+ "@xsolla/xui-primitives-core": "0.101.0"
17
17
  },
18
18
  "peerDependencies": {
19
19
  "react": ">=16.8.0",