@spectrum-web-components/picker 0.0.0-20241209155954
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 +464 -0
- package/package.json +111 -0
- package/sp-picker.d.ts +6 -0
- package/sp-picker.dev.js +5 -0
- package/sp-picker.dev.js.map +7 -0
- package/sp-picker.js +2 -0
- package/sp-picker.js.map +7 -0
- package/src/DesktopController.d.ts +7 -0
- package/src/DesktopController.dev.js +72 -0
- package/src/DesktopController.dev.js.map +7 -0
- package/src/DesktopController.js +2 -0
- package/src/DesktopController.js.map +7 -0
- package/src/InteractionController.d.ts +43 -0
- package/src/InteractionController.dev.js +121 -0
- package/src/InteractionController.dev.js.map +7 -0
- package/src/InteractionController.js +2 -0
- package/src/InteractionController.js.map +7 -0
- package/src/MobileController.d.ts +9 -0
- package/src/MobileController.dev.js +51 -0
- package/src/MobileController.dev.js.map +7 -0
- package/src/MobileController.js +2 -0
- package/src/MobileController.js.map +7 -0
- package/src/Picker.d.ts +133 -0
- package/src/Picker.dev.js +713 -0
- package/src/Picker.dev.js.map +7 -0
- package/src/Picker.js +116 -0
- package/src/Picker.js.map +7 -0
- package/src/index.d.ts +1 -0
- package/src/index.dev.js +3 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -0
- package/src/index.js.map +7 -0
- package/src/picker-overrides.css.d.ts +2 -0
- package/src/picker-overrides.css.dev.js +7 -0
- package/src/picker-overrides.css.dev.js.map +7 -0
- package/src/picker-overrides.css.js +4 -0
- package/src/picker-overrides.css.js.map +7 -0
- package/src/picker.css.d.ts +2 -0
- package/src/picker.css.dev.js +7 -0
- package/src/picker.css.dev.js.map +7 -0
- package/src/picker.css.js +4 -0
- package/src/picker.css.js.map +7 -0
- package/src/spectrum-config.js +124 -0
- package/src/spectrum-picker.css.d.ts +2 -0
- package/src/spectrum-picker.css.dev.js +7 -0
- package/src/spectrum-picker.css.dev.js.map +7 -0
- package/src/spectrum-picker.css.js +4 -0
- package/src/spectrum-picker.css.js.map +7 -0
- package/src/strategies.d.ts +6 -0
- package/src/strategies.dev.js +8 -0
- package/src/strategies.dev.js.map +7 -0
- package/src/strategies.js +2 -0
- package/src/strategies.js.map +7 -0
- package/sync/index.d.ts +3 -0
- package/sync/index.dev.js +5 -0
- package/sync/index.dev.js.map +7 -0
- package/sync/index.js +2 -0
- package/sync/index.js.map +7 -0
- package/sync/sp-picker.d.ts +2 -0
- package/sync/sp-picker.dev.js +4 -0
- package/sync/sp-picker.dev.js.map +7 -0
- package/sync/sp-picker.js +2 -0
- package/sync/sp-picker.js.map +7 -0
package/README.md
ADDED
|
@@ -0,0 +1,464 @@
|
|
|
1
|
+
## Description
|
|
2
|
+
|
|
3
|
+
An `<sp-picker>` is an alternative to HTML's `<select>` element. Use `<sp-menu-item>` elements to outline the options that will be made available to the user when interacting with the `<sp-picker>` element.
|
|
4
|
+
|
|
5
|
+
### Usage
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@spectrum-web-components/picker)
|
|
8
|
+
[](https://bundlephobia.com/result?p=@spectrum-web-components/picker)
|
|
9
|
+
[](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/guTpKeAjgecibF150Qbg/src/index.ts)
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
yarn add @spectrum-web-components/picker
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import the side effectful registration of `<sp-picker>` via:
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
import '@spectrum-web-components/picker/sp-picker.js';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
The default of `<sp-picker>` will load dependencies in `@spectrum-web-components/overlay` asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `<sp-picker>` as follows:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
import '@spectrum-web-components/picker/sync/sp-picker.js';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
When looking to leverage the `Picker` base class as a type and/or for extension purposes, do so via:
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
import { Picker } from '@spectrum-web-components/picker';
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Sizes
|
|
34
|
+
|
|
35
|
+
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
36
|
+
<sp-tab value="s">Small</sp-tab>
|
|
37
|
+
<sp-tab-panel value="s">
|
|
38
|
+
|
|
39
|
+
```html demo
|
|
40
|
+
<sp-field-group>
|
|
41
|
+
<div>
|
|
42
|
+
<sp-field-label for="picker-s" size="s">Selection type:</sp-field-label>
|
|
43
|
+
<sp-picker id="picker-s" size="s" label="Selection type">
|
|
44
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
45
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
46
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
47
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
48
|
+
<sp-menu-divider></sp-menu-divider>
|
|
49
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
50
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
51
|
+
</sp-picker>
|
|
52
|
+
</div>
|
|
53
|
+
<div>
|
|
54
|
+
<sp-field-label for="picker-s-quiet" size="s">
|
|
55
|
+
Selection type:
|
|
56
|
+
</sp-field-label>
|
|
57
|
+
<sp-picker id="picker-s-quiet" quiet size="s" label="Selection type">
|
|
58
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
59
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
60
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
61
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
62
|
+
<sp-menu-divider></sp-menu-divider>
|
|
63
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
64
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
65
|
+
</sp-picker>
|
|
66
|
+
</div>
|
|
67
|
+
</sp-field-group>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
</sp-tab-panel>
|
|
71
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
72
|
+
<sp-tab-panel value="m">
|
|
73
|
+
|
|
74
|
+
```html demo
|
|
75
|
+
<sp-field-group>
|
|
76
|
+
<div>
|
|
77
|
+
<sp-field-label for="picker-m" size="m">Selection type:</sp-field-label>
|
|
78
|
+
<sp-picker id="picker-m" size="m" label="Selection type">
|
|
79
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
80
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
81
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
82
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
83
|
+
<sp-menu-divider></sp-menu-divider>
|
|
84
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
85
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
86
|
+
</sp-picker>
|
|
87
|
+
</div>
|
|
88
|
+
<div>
|
|
89
|
+
<sp-field-label for="picker-m-quiet" size="m">
|
|
90
|
+
Selection type:
|
|
91
|
+
</sp-field-label>
|
|
92
|
+
<sp-picker id="picker-m-quiet" quiet size="m" label="Selection type">
|
|
93
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
94
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
95
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
96
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
97
|
+
<sp-menu-divider></sp-menu-divider>
|
|
98
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
99
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
100
|
+
</sp-picker>
|
|
101
|
+
</div>
|
|
102
|
+
</sp-field-group>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
</sp-tab-panel>
|
|
106
|
+
<sp-tab value="l">Large</sp-tab>
|
|
107
|
+
<sp-tab-panel value="l">
|
|
108
|
+
|
|
109
|
+
```html demo
|
|
110
|
+
<sp-field-group>
|
|
111
|
+
<div>
|
|
112
|
+
<sp-field-label for="picker-l" size="l">Selection type:</sp-field-label>
|
|
113
|
+
<sp-picker id="picker-l" size="l" label="Selection type">
|
|
114
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
115
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
116
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
117
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
118
|
+
<sp-menu-divider></sp-menu-divider>
|
|
119
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
120
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
121
|
+
</sp-picker>
|
|
122
|
+
</div>
|
|
123
|
+
<div>
|
|
124
|
+
<sp-field-label for="picker-l-quiet" size="l">
|
|
125
|
+
Selection type:
|
|
126
|
+
</sp-field-label>
|
|
127
|
+
<sp-picker id="picker-l-quiet" quiet size="l" label="Selection type">
|
|
128
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
129
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
130
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
131
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
132
|
+
<sp-menu-divider></sp-menu-divider>
|
|
133
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
134
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
135
|
+
</sp-picker>
|
|
136
|
+
</div>
|
|
137
|
+
</sp-field-group>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
</sp-tab-panel>
|
|
141
|
+
<sp-tab value="xl">Extra Large</sp-tab>
|
|
142
|
+
<sp-tab-panel value="xl">
|
|
143
|
+
|
|
144
|
+
```html demo
|
|
145
|
+
<sp-field-group>
|
|
146
|
+
<div>
|
|
147
|
+
<sp-field-label for="picker-xl" size="xl">
|
|
148
|
+
Selection type:
|
|
149
|
+
</sp-field-label>
|
|
150
|
+
<sp-picker id="picker-xl" size="xl" label="Selection type">
|
|
151
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
152
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
153
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
154
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
155
|
+
<sp-menu-divider></sp-menu-divider>
|
|
156
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
157
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
158
|
+
</sp-picker>
|
|
159
|
+
</div>
|
|
160
|
+
<div>
|
|
161
|
+
<sp-field-label for="picker-xl-quiet" size="xl">
|
|
162
|
+
Selection type:
|
|
163
|
+
</sp-field-label>
|
|
164
|
+
<sp-picker id="picker-xl-quiet" quiet size="xl" label="Selection type">
|
|
165
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
166
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
167
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
168
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
169
|
+
<sp-menu-divider></sp-menu-divider>
|
|
170
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
171
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
172
|
+
</sp-picker>
|
|
173
|
+
</div>
|
|
174
|
+
</sp-field-group>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
</sp-tab-panel>
|
|
178
|
+
</sp-tabs>
|
|
179
|
+
|
|
180
|
+
## Icons
|
|
181
|
+
|
|
182
|
+
`<sp-menu-item>`s in an `<sp-picker>` that are provided content addressed to their `icon` slot will be passed to the `<sp-picker>` element when that item is chosen.
|
|
183
|
+
|
|
184
|
+
```html
|
|
185
|
+
<sp-field-label for="picker-icons">Choose an action...</sp-field-label>
|
|
186
|
+
<sp-picker label="What would you like to do?" value="item-2" id="picker-icons">
|
|
187
|
+
<sp-menu-item>
|
|
188
|
+
<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>
|
|
189
|
+
Save
|
|
190
|
+
</sp-menu-item>
|
|
191
|
+
<sp-menu-item>
|
|
192
|
+
<sp-icon-stopwatch slot="icon"></sp-icon-stopwatch>
|
|
193
|
+
Finish
|
|
194
|
+
</sp-menu-item>
|
|
195
|
+
<sp-menu-item>
|
|
196
|
+
<sp-icon-user-activity slot="icon"></sp-icon-user-activity>
|
|
197
|
+
Review
|
|
198
|
+
</sp-menu-item>
|
|
199
|
+
</sp-picker>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
When you choose to leverage `<sp-menu-item>` elements without text content, you will need to be sure to leverage the `value` attribute so that the `<sp-picker>` element can differentiate between the available options. Further, it is important that you apply accessible labeling to the `[slot="icon"]` content as follows:
|
|
203
|
+
|
|
204
|
+
```html
|
|
205
|
+
<sp-field-label for="picker-icons-only">Choose an action...</sp-field-label>
|
|
206
|
+
<sp-picker
|
|
207
|
+
label="What would you like to do?"
|
|
208
|
+
value="item-2"
|
|
209
|
+
id="picker-icons-only"
|
|
210
|
+
>
|
|
211
|
+
<sp-menu-item value="item-1">
|
|
212
|
+
<sp-icon-save-floppy slot="icon" label="Save"></sp-icon-save-floppy>
|
|
213
|
+
</sp-menu-item>
|
|
214
|
+
<sp-menu-item value="item-2">
|
|
215
|
+
<sp-icon-stopwatch slot="icon" label="Finish"></sp-icon-stopwatch>
|
|
216
|
+
</sp-menu-item>
|
|
217
|
+
<sp-menu-item value="item-3">
|
|
218
|
+
<sp-icon-user-activity
|
|
219
|
+
slot="icon"
|
|
220
|
+
label="Review"
|
|
221
|
+
></sp-icon-user-activity>
|
|
222
|
+
</sp-menu-item>
|
|
223
|
+
</sp-picker>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### Advanced icon management
|
|
227
|
+
|
|
228
|
+
The `icons` attribute allows you to manage whether to `only` display the icon in the `<sp-picker>` element or to display `none` of the icons in the `<sp-picker>`.
|
|
229
|
+
|
|
230
|
+
When using `icons="only"` and your `<sp-menu-item>` elements still have text content, that content will be applied to `<sp-picker>` element in a non-visible way.
|
|
231
|
+
|
|
232
|
+
```html
|
|
233
|
+
<sp-field-label for="picker-icons-value">Choose an action...</sp-field-label>
|
|
234
|
+
<sp-picker
|
|
235
|
+
label="What would you like to do?"
|
|
236
|
+
value="item-2"
|
|
237
|
+
id="picker-icons-value"
|
|
238
|
+
icons="only"
|
|
239
|
+
>
|
|
240
|
+
<sp-menu-item>
|
|
241
|
+
<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>
|
|
242
|
+
Save
|
|
243
|
+
</sp-menu-item>
|
|
244
|
+
<sp-menu-item>
|
|
245
|
+
<sp-icon-stopwatch slot="icon"></sp-icon-stopwatch>
|
|
246
|
+
Finish
|
|
247
|
+
</sp-menu-item>
|
|
248
|
+
<sp-menu-item>
|
|
249
|
+
<sp-icon-user-activity slot="icon"></sp-icon-user-activity>
|
|
250
|
+
Review
|
|
251
|
+
</sp-menu-item>
|
|
252
|
+
</sp-picker>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
When using `icons="none"`, the icons will only be available in the overlaid menu.
|
|
256
|
+
|
|
257
|
+
```html
|
|
258
|
+
<sp-field-label for="picker-icons-none">Choose an action...</sp-field-label>
|
|
259
|
+
<sp-picker
|
|
260
|
+
label="What would you like to do?"
|
|
261
|
+
value="item-2"
|
|
262
|
+
id="picker-icons-none"
|
|
263
|
+
icons="none"
|
|
264
|
+
>
|
|
265
|
+
<sp-menu-item>
|
|
266
|
+
<sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>
|
|
267
|
+
Save
|
|
268
|
+
</sp-menu-item>
|
|
269
|
+
<sp-menu-item>
|
|
270
|
+
<sp-icon-stopwatch slot="icon"></sp-icon-stopwatch>
|
|
271
|
+
Finish
|
|
272
|
+
</sp-menu-item>
|
|
273
|
+
<sp-menu-item>
|
|
274
|
+
<sp-icon-user-activity slot="icon"></sp-icon-user-activity>
|
|
275
|
+
Review
|
|
276
|
+
</sp-menu-item>
|
|
277
|
+
</sp-picker>
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
## Value
|
|
281
|
+
|
|
282
|
+
When the `value` of an `<sp-picker>` matches the `value` attribute or the trimmed `textContent` (or `itemText`) of a descendent `<sp-menu-item>` element, it will make that element as `selected`.
|
|
283
|
+
|
|
284
|
+
### Matching `value`
|
|
285
|
+
|
|
286
|
+
```html
|
|
287
|
+
<sp-field-label for="picker-value">Selection type:</sp-field-label>
|
|
288
|
+
<sp-picker
|
|
289
|
+
label="Select a Country with a very long label, too long in fact"
|
|
290
|
+
value="item-2"
|
|
291
|
+
id="picker-value"
|
|
292
|
+
>
|
|
293
|
+
<sp-menu-item value="item-1">Deselect</sp-menu-item>
|
|
294
|
+
<sp-menu-item value="item-2">Select inverse</sp-menu-item>
|
|
295
|
+
<sp-menu-item value="item-3">Feather...</sp-menu-item>
|
|
296
|
+
<sp-menu-item value="item-4">Select and mask...</sp-menu-item>
|
|
297
|
+
<sp-menu-divider></sp-menu-divider>
|
|
298
|
+
<sp-menu-item value="item-5">Save selection</sp-menu-item>
|
|
299
|
+
<sp-menu-item disabled value="item-6">Make work path</sp-menu-item>
|
|
300
|
+
</sp-picker>
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### Matching `itemText`
|
|
304
|
+
|
|
305
|
+
```html
|
|
306
|
+
<sp-field-label for="picker-item-text">Selection type:</sp-field-label>
|
|
307
|
+
<sp-picker
|
|
308
|
+
label="Select a Country with a very long label, too long in fact"
|
|
309
|
+
value="Feather..."
|
|
310
|
+
id="picker-item-text"
|
|
311
|
+
>
|
|
312
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
313
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
314
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
315
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
316
|
+
<sp-menu-divider></sp-menu-divider>
|
|
317
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
318
|
+
<sp-menu-item>Make work path</sp-menu-item>
|
|
319
|
+
</sp-picker>
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
## States
|
|
323
|
+
|
|
324
|
+
### Invalid
|
|
325
|
+
|
|
326
|
+
```html
|
|
327
|
+
<sp-field-label for="picker-invalid">Standard:</sp-field-label>
|
|
328
|
+
<sp-picker
|
|
329
|
+
label="Select a Country with a very long label, too long in fact"
|
|
330
|
+
invalid
|
|
331
|
+
id="picker-invalid"
|
|
332
|
+
>
|
|
333
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
334
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
335
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
336
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
337
|
+
<sp-menu-divider></sp-menu-divider>
|
|
338
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
339
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
340
|
+
</sp-picker>
|
|
341
|
+
<br />
|
|
342
|
+
<br />
|
|
343
|
+
<sp-field-label for="picker-invalid-quiet">Quiet:</sp-field-label>
|
|
344
|
+
<sp-picker
|
|
345
|
+
label="Select a Country with a very long label, too long in fact"
|
|
346
|
+
invalid
|
|
347
|
+
quiet
|
|
348
|
+
id="picker-invalid-quiet"
|
|
349
|
+
>
|
|
350
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
351
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
352
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
353
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
354
|
+
<sp-menu-divider></sp-menu-divider>
|
|
355
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
356
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
357
|
+
</sp-picker>
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
### Side Label
|
|
361
|
+
|
|
362
|
+
```html
|
|
363
|
+
<sp-field-label side-aligned="start" for="picker-sideLabel">
|
|
364
|
+
Standard:
|
|
365
|
+
</sp-field-label>
|
|
366
|
+
<sp-picker
|
|
367
|
+
label="Select a Country with a very long label, too long in fact"
|
|
368
|
+
id="picker-sideLabel"
|
|
369
|
+
>
|
|
370
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
371
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
372
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
373
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
374
|
+
<sp-menu-divider></sp-menu-divider>
|
|
375
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
376
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
377
|
+
</sp-picker>
|
|
378
|
+
<br />
|
|
379
|
+
<br />
|
|
380
|
+
<sp-field-label side-aligned="start" for="picker-sideLabel-quiet">
|
|
381
|
+
Quiet:
|
|
382
|
+
</sp-field-label>
|
|
383
|
+
<sp-picker
|
|
384
|
+
label="Select a Country with a very long label, too long in fact"
|
|
385
|
+
quiet
|
|
386
|
+
id="picker-sideLabel-quiet"
|
|
387
|
+
>
|
|
388
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
389
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
390
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
391
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
392
|
+
<sp-menu-divider></sp-menu-divider>
|
|
393
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
394
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
395
|
+
</sp-picker>
|
|
396
|
+
```
|
|
397
|
+
|
|
398
|
+
### Disabled
|
|
399
|
+
|
|
400
|
+
```html
|
|
401
|
+
<sp-field-label for="picker-disabled">Standard:</sp-field-label>
|
|
402
|
+
<sp-picker
|
|
403
|
+
label="Select a Country with a very long label, too long in fact"
|
|
404
|
+
disabled
|
|
405
|
+
id="picker-disabled"
|
|
406
|
+
>
|
|
407
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
408
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
409
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
410
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
411
|
+
<sp-menu-divider></sp-menu-divider>
|
|
412
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
413
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
414
|
+
</sp-picker>
|
|
415
|
+
<br />
|
|
416
|
+
<br />
|
|
417
|
+
<sp-field-label for="picker-disabled-quiet">Quiet:</sp-field-label>
|
|
418
|
+
<sp-picker
|
|
419
|
+
label="Select a Country with a very long label, too long in fact"
|
|
420
|
+
disabled
|
|
421
|
+
quiet
|
|
422
|
+
id="picker-disabled-quiet"
|
|
423
|
+
>
|
|
424
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
425
|
+
<sp-menu-item>Select inverse</sp-menu-item>
|
|
426
|
+
<sp-menu-item>Feather...</sp-menu-item>
|
|
427
|
+
<sp-menu-item>Select and mask...</sp-menu-item>
|
|
428
|
+
<sp-menu-divider></sp-menu-divider>
|
|
429
|
+
<sp-menu-item>Save selection</sp-menu-item>
|
|
430
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
431
|
+
</sp-picker>
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
### Pending
|
|
435
|
+
|
|
436
|
+
When in pending state, `<sp-picker>` elements will not respond to click events and will be delivered with a `<sp-progress-circle>` to visually outline that it is pending. It will not toggle open or display its `<sp-menu-item>` descendants until the attribute is removed.
|
|
437
|
+
|
|
438
|
+
```html
|
|
439
|
+
<sp-field-label for="picker-loading">Standard:</sp-field-label>
|
|
440
|
+
<sp-picker id="picker-loading" label="Loading blending modes..." pending>
|
|
441
|
+
<sp-menu-item>Pass through</sp-menu-item>
|
|
442
|
+
<sp-menu-item>Normal</sp-menu-item>
|
|
443
|
+
<sp-menu-item>Multiply</sp-menu-item>
|
|
444
|
+
<sp-menu-item>Screen</sp-menu-item>
|
|
445
|
+
</sp-picker>
|
|
446
|
+
<br />
|
|
447
|
+
<br />
|
|
448
|
+
<sp-field-label for="picker-loading-quiet">Quiet:</sp-field-label>
|
|
449
|
+
<sp-picker
|
|
450
|
+
id="picker-loading-quiet"
|
|
451
|
+
label="Loading blending modes..."
|
|
452
|
+
pending
|
|
453
|
+
quiet
|
|
454
|
+
>
|
|
455
|
+
<sp-menu-item>Pass through</sp-menu-item>
|
|
456
|
+
<sp-menu-item>Normal</sp-menu-item>
|
|
457
|
+
<sp-menu-item>Multiply</sp-menu-item>
|
|
458
|
+
<sp-menu-item>Screen</sp-menu-item>
|
|
459
|
+
</sp-picker>
|
|
460
|
+
```
|
|
461
|
+
|
|
462
|
+
## Accessibility
|
|
463
|
+
|
|
464
|
+
To render accessibly, an `<sp-picker>` element should be paired with an `<sp-field-label>` element that has a `for` attribute referencing the `id` of the `<sp-picker>` element. For an accessible label that renders within the bounds of the picker itself, but still fulfills the accessibility contract, use the `label` attribute or a `<span slot="label">` as a child element of `<sp-picker>`.
|
package/package.json
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spectrum-web-components/picker",
|
|
3
|
+
"version": "0.0.0-20241209155954",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"description": "",
|
|
8
|
+
"license": "Apache-2.0",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
+
"directory": "packages/picker"
|
|
13
|
+
},
|
|
14
|
+
"author": "",
|
|
15
|
+
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/picker",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/adobe/spectrum-web-components/issues"
|
|
18
|
+
},
|
|
19
|
+
"main": "src/index.js",
|
|
20
|
+
"module": "src/index.js",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"development": "./src/index.dev.js",
|
|
25
|
+
"default": "./src/index.js"
|
|
26
|
+
},
|
|
27
|
+
"./package.json": "./package.json",
|
|
28
|
+
"./src/DesktopController.js": {
|
|
29
|
+
"development": "./src/DesktopController.dev.js",
|
|
30
|
+
"default": "./src/DesktopController.js"
|
|
31
|
+
},
|
|
32
|
+
"./src/InteractionController.js": {
|
|
33
|
+
"development": "./src/InteractionController.dev.js",
|
|
34
|
+
"default": "./src/InteractionController.js"
|
|
35
|
+
},
|
|
36
|
+
"./src/MobileController.js": {
|
|
37
|
+
"development": "./src/MobileController.dev.js",
|
|
38
|
+
"default": "./src/MobileController.js"
|
|
39
|
+
},
|
|
40
|
+
"./src/Picker.js": {
|
|
41
|
+
"development": "./src/Picker.dev.js",
|
|
42
|
+
"default": "./src/Picker.js"
|
|
43
|
+
},
|
|
44
|
+
"./src/index.js": {
|
|
45
|
+
"development": "./src/index.dev.js",
|
|
46
|
+
"default": "./src/index.js"
|
|
47
|
+
},
|
|
48
|
+
"./src/picker-overrides.css.js": "./src/picker-overrides.css.js",
|
|
49
|
+
"./src/picker.css.js": "./src/picker.css.js",
|
|
50
|
+
"./src/strategies.js": {
|
|
51
|
+
"development": "./src/strategies.dev.js",
|
|
52
|
+
"default": "./src/strategies.js"
|
|
53
|
+
},
|
|
54
|
+
"./sync/index.js": {
|
|
55
|
+
"development": "./sync/index.dev.js",
|
|
56
|
+
"default": "./sync/index.js"
|
|
57
|
+
},
|
|
58
|
+
"./sync/sp-picker.js": {
|
|
59
|
+
"development": "./sync/sp-picker.dev.js",
|
|
60
|
+
"default": "./sync/sp-picker.js"
|
|
61
|
+
},
|
|
62
|
+
"./sp-picker.js": {
|
|
63
|
+
"development": "./sp-picker.dev.js",
|
|
64
|
+
"default": "./sp-picker.js"
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"scripts": {
|
|
68
|
+
"test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
|
|
69
|
+
},
|
|
70
|
+
"files": [
|
|
71
|
+
"**/*.d.ts",
|
|
72
|
+
"**/*.js",
|
|
73
|
+
"**/*.js.map",
|
|
74
|
+
"custom-elements.json",
|
|
75
|
+
"!stories/",
|
|
76
|
+
"!test/"
|
|
77
|
+
],
|
|
78
|
+
"keywords": [
|
|
79
|
+
"spectrum css",
|
|
80
|
+
"web components",
|
|
81
|
+
"lit-element",
|
|
82
|
+
"lit-html"
|
|
83
|
+
],
|
|
84
|
+
"dependencies": {
|
|
85
|
+
"@spectrum-web-components/base": "0.0.0-20241209155954",
|
|
86
|
+
"@spectrum-web-components/button": "0.0.0-20241209155954",
|
|
87
|
+
"@spectrum-web-components/field-label": "0.0.0-20241209155954",
|
|
88
|
+
"@spectrum-web-components/icon": "0.0.0-20241209155954",
|
|
89
|
+
"@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
|
|
90
|
+
"@spectrum-web-components/icons-workflow": "0.0.0-20241209155954",
|
|
91
|
+
"@spectrum-web-components/menu": "0.0.0-20241209155954",
|
|
92
|
+
"@spectrum-web-components/overlay": "0.0.0-20241209155954",
|
|
93
|
+
"@spectrum-web-components/popover": "0.0.0-20241209155954",
|
|
94
|
+
"@spectrum-web-components/progress-circle": "0.0.0-20241209155954",
|
|
95
|
+
"@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
|
|
96
|
+
"@spectrum-web-components/shared": "0.0.0-20241209155954",
|
|
97
|
+
"@spectrum-web-components/tooltip": "0.0.0-20241209155954",
|
|
98
|
+
"@spectrum-web-components/tray": "0.0.0-20241209155954"
|
|
99
|
+
},
|
|
100
|
+
"devDependencies": {
|
|
101
|
+
"@spectrum-css/picker": "^9.0.0-s2-foundations.15"
|
|
102
|
+
},
|
|
103
|
+
"types": "./src/index.d.ts",
|
|
104
|
+
"customElements": "custom-elements.json",
|
|
105
|
+
"sideEffects": [
|
|
106
|
+
"./sp-*.js",
|
|
107
|
+
"./**/*.dev.js",
|
|
108
|
+
"./sync/index.js",
|
|
109
|
+
"./sync/sp-*.js"
|
|
110
|
+
]
|
|
111
|
+
}
|
package/sp-picker.d.ts
ADDED
package/sp-picker.dev.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-picker.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Picker } from './src/Picker.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-picker', Picker);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-picker': Picker;\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,cAAc,aAAa,MAAM;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/sp-picker.js
ADDED
package/sp-picker.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-picker.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Picker } from './src/Picker.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-picker', Picker);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-picker': Picker;\n }\n}\n"],
|
|
5
|
+
"mappings": "aAYA,OAAS,UAAAA,MAAc,kBACvB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,YAAaD,CAAM",
|
|
6
|
+
"names": ["Picker", "defineElement"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { InteractionController, InteractionTypes } from './InteractionController.js';
|
|
2
|
+
export declare class DesktopController extends InteractionController {
|
|
3
|
+
type: InteractionTypes;
|
|
4
|
+
handlePointerdown(event: PointerEvent): void;
|
|
5
|
+
handleActivate(event?: Event): void;
|
|
6
|
+
init(): void;
|
|
7
|
+
}
|