@startupjs-ui/select 0.1.13 → 0.1.19
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/CHANGELOG.md +16 -0
- package/README.mdx +32 -4
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.19](https://github.com/startupjs/startupjs-ui/compare/v0.1.18...v0.1.19) (2026-03-17)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/select
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @startupjs-ui/select
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @startupjs-ui/select
|
package/README.mdx
CHANGED
|
@@ -6,7 +6,9 @@ import { Sandbox } from '@startupjs-ui/docs'
|
|
|
6
6
|
|
|
7
7
|
Inherits [TextInput props](/docs/forms/TextInput).
|
|
8
8
|
|
|
9
|
-
Select lets user pick one
|
|
9
|
+
Select lets the user pick one option from a list. It works similarly to the HTML `<select>` element.
|
|
10
|
+
|
|
11
|
+
Options can be provided as simple strings, numbers, or objects with `{ value, label }` shape.
|
|
10
12
|
|
|
11
13
|
```jsx
|
|
12
14
|
import { Select } from 'startupjs-ui'
|
|
@@ -14,6 +16,8 @@ import { Select } from 'startupjs-ui'
|
|
|
14
16
|
|
|
15
17
|
## Simple example
|
|
16
18
|
|
|
19
|
+
Pass an array of options and use `value` / `onChange` to control the selected item.
|
|
20
|
+
|
|
17
21
|
```jsx example
|
|
18
22
|
const [color, setColor] = useState()
|
|
19
23
|
return (
|
|
@@ -30,6 +34,8 @@ return (
|
|
|
30
34
|
|
|
31
35
|
## Disabled
|
|
32
36
|
|
|
37
|
+
Set `disabled` to prevent all user interaction with the select. The component appears grayed out.
|
|
38
|
+
|
|
33
39
|
```jsx example
|
|
34
40
|
return (
|
|
35
41
|
<Select
|
|
@@ -45,6 +51,8 @@ return (
|
|
|
45
51
|
|
|
46
52
|
## Readonly
|
|
47
53
|
|
|
54
|
+
Set `readonly` to display the current value as non-editable text. Unlike `disabled`, the value is still clearly visible.
|
|
55
|
+
|
|
48
56
|
```jsx example
|
|
49
57
|
return (
|
|
50
58
|
<Select
|
|
@@ -58,9 +66,9 @@ return (
|
|
|
58
66
|
)
|
|
59
67
|
```
|
|
60
68
|
|
|
61
|
-
## Showing
|
|
69
|
+
## Showing empty value
|
|
62
70
|
|
|
63
|
-
By default the
|
|
71
|
+
By default, the select includes an empty option that lets the user clear their selection. To prevent this, set `showEmptyValue={false}`.
|
|
64
72
|
|
|
65
73
|
```jsx example
|
|
66
74
|
const [color, setColor] = useState('red')
|
|
@@ -76,7 +84,7 @@ return (
|
|
|
76
84
|
|
|
77
85
|
## Change empty value label
|
|
78
86
|
|
|
79
|
-
|
|
87
|
+
Use the `emptyValueLabel` prop to customize the label displayed for the empty option.
|
|
80
88
|
|
|
81
89
|
```jsx example
|
|
82
90
|
const [color, setColor] = useState()
|
|
@@ -90,6 +98,26 @@ return (
|
|
|
90
98
|
)
|
|
91
99
|
```
|
|
92
100
|
|
|
101
|
+
## Props
|
|
102
|
+
|
|
103
|
+
| Prop | Type | Default | Description |
|
|
104
|
+
|---|---|---|---|
|
|
105
|
+
| `options` | `SelectOption[]` | `[]` | Available options -- strings, numbers, or `{ value, label }` objects |
|
|
106
|
+
| `value` | `any` | | Currently selected value |
|
|
107
|
+
| `showEmptyValue` | `boolean` | `true` | Whether to include an empty/none option in the list |
|
|
108
|
+
| `emptyValueLabel` | `string \| number` | | Label displayed for the empty option |
|
|
109
|
+
| `disabled` | `boolean` | `false` | Disables all interaction |
|
|
110
|
+
| `readonly` | `boolean` | `false` | Renders the value as non-editable text |
|
|
111
|
+
| `size` | `'l' \| 'm' \| 's'` | `'m'` | Size preset (inherited from TextInput) |
|
|
112
|
+
| `placeholder` | `string \| number` | | Placeholder text when no value is selected |
|
|
113
|
+
| `style` | `StyleProp<ViewStyle>` | | Custom styles for the wrapper element |
|
|
114
|
+
| `inputStyle` | `StyleProp<TextStyle>` | | Custom styles for the input element |
|
|
115
|
+
| `ref` | `RefObject` | | Ref forwarded to the underlying TextInput |
|
|
116
|
+
| `testID` | `string` | | Test identifier passed to the wrapper |
|
|
117
|
+
| `onChange` | `(value: any) => void` | | Called when the selected value changes |
|
|
118
|
+
| `onFocus` | `(...args) => void` | | Called when the select receives focus |
|
|
119
|
+
| `onBlur` | `(...args) => void` | | Called when the select loses focus |
|
|
120
|
+
|
|
93
121
|
## Sandbox
|
|
94
122
|
|
|
95
123
|
<Sandbox
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/select",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.19",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,15 +9,15 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@react-native-picker/picker": "^2.11.1",
|
|
12
|
-
"@startupjs-ui/core": "^0.1.
|
|
13
|
-
"@startupjs-ui/div": "^0.1.
|
|
14
|
-
"@startupjs-ui/span": "^0.1.
|
|
15
|
-
"@startupjs-ui/text-input": "^0.1.
|
|
12
|
+
"@startupjs-ui/core": "^0.1.19",
|
|
13
|
+
"@startupjs-ui/div": "^0.1.19",
|
|
14
|
+
"@startupjs-ui/span": "^0.1.19",
|
|
15
|
+
"@startupjs-ui/text-input": "^0.1.19"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": "*",
|
|
19
19
|
"react-native": "*",
|
|
20
20
|
"startupjs": "*"
|
|
21
21
|
},
|
|
22
|
-
"gitHead": "
|
|
22
|
+
"gitHead": "bfcca786dc363f42a09b6eef4feb7ca8139302fc"
|
|
23
23
|
}
|