@impulse-ui-native/select 2.0.0 → 2.0.1
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 +50 -0
- package/package.json +10 -10
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @impulse-ui-native/select
|
|
2
|
+
|
|
3
|
+
Single- and multi-value select controls that present their options in a themed flyout bottom sheet.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @impulse-ui-native/select
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
The package relies on the theme, layer, flyout, gesture, animation, safe-area, and list infrastructure. The simplest setup is to use `ThemeProvider` and mount one `LayerCenter` at the application root.
|
|
12
|
+
|
|
13
|
+
## Main exports
|
|
14
|
+
|
|
15
|
+
- `Select` chooses one primitive value.
|
|
16
|
+
- `MultiSelect` chooses an array of primitive values.
|
|
17
|
+
- `SelectOption` describes `{ label, value, disabled? }` entries.
|
|
18
|
+
- `SelectProps`, `MultiSelectProps`, and the supporting control/flyout types are exported for composition.
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { LayerCenter } from "@impulse-ui-native/layers";
|
|
24
|
+
import { Select } from "@impulse-ui-native/select";
|
|
25
|
+
|
|
26
|
+
const options = [
|
|
27
|
+
{ label: "Design", value: "design" },
|
|
28
|
+
{ label: "Engineering", value: "engineering" },
|
|
29
|
+
{ label: "Operations", value: "operations", disabled: true },
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
export function DepartmentField() {
|
|
33
|
+
const [value, setValue] = useState<string>();
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<>
|
|
37
|
+
<Select
|
|
38
|
+
label="Department"
|
|
39
|
+
options={options}
|
|
40
|
+
value={value}
|
|
41
|
+
onChange={setValue}
|
|
42
|
+
placeholder="Choose a department"
|
|
43
|
+
/>
|
|
44
|
+
<LayerCenter />
|
|
45
|
+
</>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Both controls support controlled `value` and uncontrolled `defaultValue` usage. Values are limited to strings, numbers, `null`, and `undefined`; multi-select stores an array of those values.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/select",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.mts",
|
|
@@ -18,15 +18,15 @@
|
|
|
18
18
|
"LICENSE"
|
|
19
19
|
],
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@impulse-ui-native/theme": "2.0.
|
|
22
|
-
"@impulse-ui-native/input": "2.0.
|
|
23
|
-
"@impulse-ui-native/
|
|
24
|
-
"@impulse-ui-native/
|
|
25
|
-
"@impulse-ui-native/
|
|
26
|
-
"@impulse-ui-native/types": "2.0.
|
|
27
|
-
"@impulse-ui-native/
|
|
28
|
-
"@impulse-ui-native/
|
|
29
|
-
"@impulse-ui-native/
|
|
21
|
+
"@impulse-ui-native/theme": "2.0.1",
|
|
22
|
+
"@impulse-ui-native/input": "2.0.1",
|
|
23
|
+
"@impulse-ui-native/icon": "2.0.1",
|
|
24
|
+
"@impulse-ui-native/layers": "2.0.1",
|
|
25
|
+
"@impulse-ui-native/core": "2.0.1",
|
|
26
|
+
"@impulse-ui-native/types": "2.0.1",
|
|
27
|
+
"@impulse-ui-native/primitives": "2.0.1",
|
|
28
|
+
"@impulse-ui-native/flyout": "2.0.1",
|
|
29
|
+
"@impulse-ui-native/portal": "2.0.1"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@shopify/flash-list": "2.0.2",
|