@spark-web/select 6.0.0-rc.0 → 6.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/CHANGELOG.md +50 -8
- package/CLAUDE.md +105 -0
- package/dist/declarations/src/select.d.ts +7 -7
- package/dist/spark-web-select.cjs.d.ts +1 -1
- package/package.json +10 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,61 @@
|
|
|
1
1
|
# @spark-web/select
|
|
2
2
|
|
|
3
|
-
## 6.0.
|
|
3
|
+
## 6.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#782](https://github.com/brighte-labs/spark-web/pull/782)
|
|
8
|
+
[`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)
|
|
9
|
+
Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
|
|
10
|
+
**docs:** add CLAUDE.md AI context files to foundation and form packages;
|
|
11
|
+
patch data-table with manual sort and spinner overlay patterns
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
[[`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)]:
|
|
14
|
+
- @spark-web/box@6.0.1
|
|
15
|
+
- @spark-web/field@5.3.1
|
|
16
|
+
- @spark-web/text-input@6.0.1
|
|
17
|
+
|
|
18
|
+
## 6.0.0
|
|
4
19
|
|
|
5
20
|
### Minor Changes
|
|
6
21
|
|
|
7
|
-
-
|
|
22
|
+
- [#667](https://github.com/brighte-labs/spark-web/pull/667)
|
|
23
|
+
[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)
|
|
24
|
+
Thanks [@Leo704099](https://github.com/Leo704099)! - Support react 17 to 19
|
|
8
25
|
|
|
9
26
|
### Patch Changes
|
|
10
27
|
|
|
11
|
-
- Updated dependencies
|
|
12
|
-
-
|
|
13
|
-
- @spark-web/
|
|
14
|
-
- @spark-web/
|
|
15
|
-
- @spark-web/
|
|
16
|
-
- @spark-web/
|
|
28
|
+
- Updated dependencies
|
|
29
|
+
[[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
|
|
30
|
+
- @spark-web/text-input@6.0.0
|
|
31
|
+
- @spark-web/field@5.3.0
|
|
32
|
+
- @spark-web/theme@5.13.0
|
|
33
|
+
- @spark-web/icon@5.1.0
|
|
34
|
+
- @spark-web/box@6.0.0
|
|
35
|
+
|
|
36
|
+
## 5.0.2
|
|
37
|
+
|
|
38
|
+
### Patch Changes
|
|
39
|
+
|
|
40
|
+
- [#698](https://github.com/brighte-labs/spark-web/pull/698)
|
|
41
|
+
[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
|
|
42
|
+
Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
|
|
43
|
+
|
|
44
|
+
- Updated dependencies
|
|
45
|
+
[[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
|
|
46
|
+
- @spark-web/box@5.2.2
|
|
47
|
+
- @spark-web/field@5.1.3
|
|
48
|
+
- @spark-web/text-input@5.3.2
|
|
49
|
+
- @spark-web/theme@5.12.1
|
|
50
|
+
|
|
51
|
+
## 5.0.1
|
|
52
|
+
|
|
53
|
+
### Patch Changes
|
|
54
|
+
|
|
55
|
+
- Updated dependencies
|
|
56
|
+
[[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
|
|
57
|
+
- @spark-web/theme@5.12.0
|
|
58
|
+
- @spark-web/field@5.1.2
|
|
17
59
|
|
|
18
60
|
## 5.0.0
|
|
19
61
|
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# @spark-web/select — AI Context
|
|
2
|
+
|
|
3
|
+
## What this is
|
|
4
|
+
|
|
5
|
+
A native `<select>` element styled to match the Spark design system. Accepts a
|
|
6
|
+
flat list of options or grouped options. Must always be wrapped in a `Field`
|
|
7
|
+
from `@spark-web/field`. Use for filter dropdowns (role, status, state) and form
|
|
8
|
+
selects with a small, known set of options.
|
|
9
|
+
|
|
10
|
+
## What this is NOT
|
|
11
|
+
|
|
12
|
+
- Not a combobox or searchable select — for searchable/async options use a
|
|
13
|
+
third-party combobox component with Spark styling
|
|
14
|
+
- Not usable without `Field` — always wrap in `<Field label="…">`
|
|
15
|
+
- Not responsible for its own label
|
|
16
|
+
|
|
17
|
+
## Props interface
|
|
18
|
+
|
|
19
|
+
| Prop | Type | Notes |
|
|
20
|
+
| -------------- | ------------------------ | ----------------------------------------------------- |
|
|
21
|
+
| `options` | `Array<Option \| Group>` | required — the selectable values |
|
|
22
|
+
| `value` | `string \| number` | Controlled value |
|
|
23
|
+
| `onChange` | `ChangeEventHandler` | — |
|
|
24
|
+
| `placeholder` | `string` | Shown as disabled first option when no value selected |
|
|
25
|
+
| `defaultValue` | `string \| number` | Uncontrolled initial value |
|
|
26
|
+
| `name` | `string` | — |
|
|
27
|
+
| `required` | `boolean` | — |
|
|
28
|
+
| `data` | `DataAttributeMap` | Test/analytics attributes |
|
|
29
|
+
|
|
30
|
+
### Option shape
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
type Option = { label: string; value: string | number; disabled?: boolean };
|
|
34
|
+
type Group = { label: string; options: Option[] };
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
`Option`, `Group`, and `OptionsOrGroups` are exported from `@spark-web/select`
|
|
38
|
+
and can be imported for type annotations.
|
|
39
|
+
|
|
40
|
+
## Common patterns
|
|
41
|
+
|
|
42
|
+
### Filter dropdown
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
<Field label="Status" labelVisibility="hidden">
|
|
46
|
+
<Select
|
|
47
|
+
placeholder="Select status"
|
|
48
|
+
options={[
|
|
49
|
+
{ label: 'Active', value: 'active' },
|
|
50
|
+
{ label: 'Inactive', value: 'inactive' },
|
|
51
|
+
{ label: 'Suspended', value: 'suspended' },
|
|
52
|
+
]}
|
|
53
|
+
value={statusFilter}
|
|
54
|
+
onChange={e => setStatusFilter(e.target.value)}
|
|
55
|
+
/>
|
|
56
|
+
</Field>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Grouped options
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<Field label="Role">
|
|
63
|
+
<Select
|
|
64
|
+
placeholder="Select role"
|
|
65
|
+
options={[
|
|
66
|
+
{
|
|
67
|
+
label: 'Admin roles',
|
|
68
|
+
options: [
|
|
69
|
+
{ label: 'Admin', value: 'ADMIN' },
|
|
70
|
+
{ label: 'Admin Operations', value: 'ADMIN_OPERATIONS' },
|
|
71
|
+
],
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
label: 'Other',
|
|
75
|
+
options: [{ label: 'Vendor', value: 'VENDOR' }],
|
|
76
|
+
},
|
|
77
|
+
]}
|
|
78
|
+
value={role}
|
|
79
|
+
onChange={e => setRole(e.target.value)}
|
|
80
|
+
/>
|
|
81
|
+
</Field>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Resettable filter (with an "All" option)
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
<Select
|
|
88
|
+
value={filter}
|
|
89
|
+
onChange={e => setFilter(e.target.value)}
|
|
90
|
+
options={[
|
|
91
|
+
{ label: 'All statuses', value: '' },
|
|
92
|
+
{ label: 'Active', value: 'active' },
|
|
93
|
+
{ label: 'Inactive', value: 'inactive' },
|
|
94
|
+
]}
|
|
95
|
+
/>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Do NOTs
|
|
99
|
+
|
|
100
|
+
- NEVER use `Select` without a parent `Field`
|
|
101
|
+
- NEVER use raw `<select>` — always use `Select`
|
|
102
|
+
- NEVER use `Select` for more than ~20 options without a searchable combobox
|
|
103
|
+
- NEVER pass `disabled` directly — set it on the parent `Field`
|
|
104
|
+
- NEVER use `Select` for boolean toggles — use a `Checkbox` or two `Button`
|
|
105
|
+
options instead
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
2
2
|
import type { SelectHTMLAttributes } from 'react';
|
|
3
|
-
export
|
|
3
|
+
export type Option = {
|
|
4
4
|
/** Whether or not the option is disabled. */
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
/** Label for the option. */
|
|
@@ -8,15 +8,15 @@ export declare type Option = {
|
|
|
8
8
|
/** Value of the option. */
|
|
9
9
|
value: string | number;
|
|
10
10
|
};
|
|
11
|
-
export
|
|
11
|
+
export type Group = {
|
|
12
12
|
/** List of options for the group. */
|
|
13
13
|
options: Array<Option>;
|
|
14
14
|
/** Label for the group. */
|
|
15
15
|
label: string;
|
|
16
16
|
};
|
|
17
|
-
export
|
|
18
|
-
export
|
|
19
|
-
export
|
|
17
|
+
export type OptionsOrGroups = Array<Option | Group>;
|
|
18
|
+
export type NativeSelectProps = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'>;
|
|
19
|
+
export type SelectProps = NativeSelectProps & {
|
|
20
20
|
/** Sets data attributes for the element. */
|
|
21
21
|
data?: DataAttributeMap;
|
|
22
22
|
/** The values that can be selected by the input. */
|
|
@@ -26,9 +26,9 @@ export declare type SelectProps = NativeSelectProps & {
|
|
|
26
26
|
};
|
|
27
27
|
export declare const Select: import("react").ForwardRefExoticComponent<NativeSelectProps & {
|
|
28
28
|
/** Sets data attributes for the element. */
|
|
29
|
-
data?: DataAttributeMap
|
|
29
|
+
data?: DataAttributeMap;
|
|
30
30
|
/** The values that can be selected by the input. */
|
|
31
31
|
options: OptionsOrGroups;
|
|
32
32
|
/** Placeholder text for when the input does not have an initial value. */
|
|
33
|
-
placeholder?: string
|
|
33
|
+
placeholder?: string;
|
|
34
34
|
} & import("react").RefAttributes<HTMLSelectElement>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from "./declarations/src/index";
|
|
1
|
+
export * from "./declarations/src/index.js";
|
|
2
2
|
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXNlbGVjdC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/select",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.1",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -11,26 +11,27 @@
|
|
|
11
11
|
"module": "dist/spark-web-select.esm.js",
|
|
12
12
|
"files": [
|
|
13
13
|
"CHANGELOG.md",
|
|
14
|
+
"CLAUDE.md",
|
|
14
15
|
"dist",
|
|
15
16
|
"README.md"
|
|
16
17
|
],
|
|
17
18
|
"dependencies": {
|
|
18
19
|
"@babel/runtime": "^7.25.0",
|
|
19
20
|
"@emotion/react": "^11.14.0",
|
|
20
|
-
"@spark-web/box": "^6.0.
|
|
21
|
-
"@spark-web/icon": "^5.1.0
|
|
22
|
-
"@spark-web/text-input": "^6.0.
|
|
23
|
-
"@spark-web/theme": "^5.
|
|
21
|
+
"@spark-web/box": "^6.0.1",
|
|
22
|
+
"@spark-web/icon": "^5.1.0",
|
|
23
|
+
"@spark-web/text-input": "^6.0.1",
|
|
24
|
+
"@spark-web/theme": "^5.13.0"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
|
-
"@spark-web/field": "^5.
|
|
27
|
-
"@spark-web/utils": "^5.1.0
|
|
27
|
+
"@spark-web/field": "^5.3.1",
|
|
28
|
+
"@spark-web/utils": "^5.1.0",
|
|
28
29
|
"@types/react": "^19.1.0",
|
|
29
30
|
"react": "^19.1.0"
|
|
30
31
|
},
|
|
31
32
|
"peerDependencies": {
|
|
32
|
-
"@spark-web/field": "^5.
|
|
33
|
-
"react": "
|
|
33
|
+
"@spark-web/field": "^5.3.1",
|
|
34
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
34
35
|
},
|
|
35
36
|
"engines": {
|
|
36
37
|
"node": ">=14"
|