@rcarls/rc-listbox 0.2.0 → 0.3.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 +24 -7
- package/dist/custom-elements.json +196 -91
- package/dist/rc-listbox-CTedy14U.js +337 -0
- package/dist/rc-listbox-CTedy14U.js.map +1 -0
- package/dist/rc-listbox-define.js +1 -1
- package/dist/rc-listbox.js +1 -1
- package/dist/types/packages/rc-listbox/src/rc-listbox.d.ts +138 -58
- package/package.json +7 -10
- package/dist/demo.css +0 -85
- package/dist/demo.js +0 -40
- package/dist/rc-listbox-D1vHntE2.js +0 -291
- package/dist/rc-listbox-D1vHntE2.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
# `@rcarls/rc-listbox`
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
elements into light DOM so parent components can use `aria-activedescendant`
|
|
5
|
-
with IDs that resolve in the same document or shadow root.
|
|
3
|
+
Listbox that keeps option DOM in light DOM for `aria-activedescendant` navigation, following the [WAI-ARIA Listbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/).
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-listbox](https://richardcarls.github.io/rc-webcomponents/components/rc-listbox).
|
|
6
|
+
|
|
7
|
+
`rc-listbox` is primarily an infrastructure component that can be used
|
|
8
|
+
directly when an application or component controls option data and selection state.
|
|
10
9
|
|
|
11
10
|
## Installation
|
|
12
11
|
|
|
@@ -42,6 +41,24 @@ listbox.options = [
|
|
|
42
41
|
listbox.setSelectedValues(['apple']);
|
|
43
42
|
```
|
|
44
43
|
|
|
44
|
+
Options may also represent actions instead of selectable values:
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
listbox.options = [
|
|
48
|
+
{ value: 'none', label: 'None' },
|
|
49
|
+
{ kind: 'action', action: 'clear', value: 'clear', label: 'Clear selection' },
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
listbox.addEventListener('rc-listbox-change', (event) => {
|
|
53
|
+
if (event.detail.reason === 'action') {
|
|
54
|
+
// event.detail.option is narrowed to ListboxActionOption
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// event.detail.option is narrowed to ListboxSelectableOption
|
|
59
|
+
});
|
|
60
|
+
```
|
|
61
|
+
|
|
45
62
|
## API
|
|
46
63
|
|
|
47
64
|
| Property / method | Type | Description |
|
|
@@ -65,7 +82,7 @@ listbox.setSelectedValues(['apple']);
|
|
|
65
82
|
|
|
66
83
|
| Event | Detail | Description |
|
|
67
84
|
| --- | --- | --- |
|
|
68
|
-
| `rc-listbox-change` | `{
|
|
85
|
+
| `rc-listbox-change` | `{ reason: 'select'; value; selected; option } \| { reason: 'action'; action; option }` | Fires when an option or action row is activated. |
|
|
69
86
|
|
|
70
87
|
## Accessibility
|
|
71
88
|
|
|
@@ -46,21 +46,75 @@
|
|
|
46
46
|
"declarations": [
|
|
47
47
|
{
|
|
48
48
|
"kind": "class",
|
|
49
|
-
"description": "A
|
|
49
|
+
"description": "A WAI-ARIA listbox component that renders a `<ul role=\"presentation\">`\n+ `<li role=\"option\">` subtree directly into its own light DOM to facilitate\n`aria-activedescendant` virtual navigation with IDs inside the same document\nor shadow root.\n\nPre-rendered `<ul>/<li>` children are accepted as a progressive enhancement\nbaseline. The component reads them on first connect if no `options` setter\nhas been called.\n\nConsumers drive this component via its JS API:\n - Set `options` to populate the list\n - Set `value` / `defaultValue` to manage selection\n - Call `toggleOption()` for internal keyboard/pointer activation\n - Call `filterOptions()` to filter visible options\n - Read `navigableItems` to feed `ActiveDescendantController`",
|
|
50
50
|
"name": "RCListbox",
|
|
51
|
+
"cssProperties": [
|
|
52
|
+
{
|
|
53
|
+
"description": "Gap between the checkmark and option label.",
|
|
54
|
+
"name": "--rc-listbox-option-gap",
|
|
55
|
+
"default": "0.25rem"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"description": "Minimum block size (height) of each option row.",
|
|
59
|
+
"name": "--rc-listbox-option-min-block-size",
|
|
60
|
+
"default": "0px"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"description": "Block-axis padding of each option row.",
|
|
64
|
+
"name": "--rc-listbox-option-padding-block",
|
|
65
|
+
"default": "2px"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"description": "Inline-axis padding of each option row.",
|
|
69
|
+
"name": "--rc-listbox-option-padding-inline",
|
|
70
|
+
"default": "4px"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"description": "CSS transition applied to each option row.",
|
|
74
|
+
"name": "--rc-listbox-option-transition"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"description": "Background of a hovered option.",
|
|
78
|
+
"name": "--rc-listbox-hover-bg"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"description": "Text color of a hovered option.",
|
|
82
|
+
"name": "--rc-listbox-hover-color"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"description": "Background of the keyboard-active option.",
|
|
86
|
+
"name": "--rc-listbox-active-bg"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"description": "Text color of the keyboard-active option.",
|
|
90
|
+
"name": "--rc-listbox-active-color"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"description": "Background of a selected option.",
|
|
94
|
+
"name": "--rc-listbox-selected-bg"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"description": "Text color of a selected option.",
|
|
98
|
+
"name": "--rc-listbox-selected-color"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"description": "Text color of a disabled option.",
|
|
102
|
+
"name": "--rc-listbox-disabled-color"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"description": "Opacity of a disabled option.",
|
|
106
|
+
"name": "--rc-listbox-disabled-opacity"
|
|
107
|
+
}
|
|
108
|
+
],
|
|
51
109
|
"cssParts": [
|
|
52
110
|
{
|
|
53
|
-
"description": "Individual option elements",
|
|
111
|
+
"description": "Individual `<li role=\"option\">` elements",
|
|
54
112
|
"name": "option"
|
|
55
113
|
},
|
|
56
114
|
{
|
|
57
|
-
"description": "The checkmark
|
|
115
|
+
"description": "The checkmark `<span>` inside each option (when `checkmark` is true)",
|
|
58
116
|
"name": "option-checkmark"
|
|
59
117
|
},
|
|
60
|
-
{
|
|
61
|
-
"description": "The label text span inside each option",
|
|
62
|
-
"name": "option-label"
|
|
63
|
-
},
|
|
64
118
|
{
|
|
65
119
|
"description": "The \"Create\" option when allow-create is active",
|
|
66
120
|
"name": "create-option"
|
|
@@ -68,11 +122,38 @@
|
|
|
68
122
|
],
|
|
69
123
|
"slots": [
|
|
70
124
|
{
|
|
71
|
-
"description": "
|
|
125
|
+
"description": "Accepts pre-rendered `<ul>` with `<li>` children for progressive enhancement.",
|
|
72
126
|
"name": "—"
|
|
73
127
|
}
|
|
74
128
|
],
|
|
75
129
|
"members": [
|
|
130
|
+
{
|
|
131
|
+
"kind": "field",
|
|
132
|
+
"name": "_styledRoots",
|
|
133
|
+
"privacy": "private",
|
|
134
|
+
"static": true,
|
|
135
|
+
"readonly": true,
|
|
136
|
+
"default": "new Set<Document | ShadowRoot>()"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"kind": "method",
|
|
140
|
+
"name": "_ensureBaseStyles",
|
|
141
|
+
"privacy": "private",
|
|
142
|
+
"static": true,
|
|
143
|
+
"return": {
|
|
144
|
+
"type": {
|
|
145
|
+
"text": "void"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
"parameters": [
|
|
149
|
+
{
|
|
150
|
+
"name": "root",
|
|
151
|
+
"type": {
|
|
152
|
+
"text": "Document | ShadowRoot"
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
]
|
|
156
|
+
},
|
|
76
157
|
{
|
|
77
158
|
"kind": "field",
|
|
78
159
|
"name": "multiple",
|
|
@@ -91,7 +172,7 @@
|
|
|
91
172
|
"text": "boolean"
|
|
92
173
|
},
|
|
93
174
|
"default": "false",
|
|
94
|
-
"description": "Render a checkmark indicator inside each option element.\nHidden by default; enable for combobox / select patterns where the\nconsumer's CSS shows it conditionally via `[aria-selected='true']`.",
|
|
175
|
+
"description": "Render a checkmark indicator inside each option element.\n\nHidden by default; enable for combobox / select patterns where the\nconsumer's CSS shows it conditionally via `[aria-selected='true']`.",
|
|
95
176
|
"attribute": "checkmark",
|
|
96
177
|
"reflects": true
|
|
97
178
|
},
|
|
@@ -102,45 +183,9 @@
|
|
|
102
183
|
"text": "FilterStrategy"
|
|
103
184
|
},
|
|
104
185
|
"default": "'contains'",
|
|
105
|
-
"description": "How option labels are matched against the active filter text.\nDefaults to `'contains'` (substring). Set to `'prefix'` for starts-with\nmatching, or pass a custom predicate for full control.\nFunction values are JS-only; string values may be set via the\n`filter-strategy` attribute.",
|
|
186
|
+
"description": "How option labels are matched against the active filter text.\n\nDefaults to `'contains'` (substring). Set to `'prefix'` for starts-with\nmatching, or pass a custom predicate for full control.\nFunction values are JS-only; string values may be set via the\n`filter-strategy` attribute.",
|
|
106
187
|
"attribute": "filter-strategy"
|
|
107
188
|
},
|
|
108
|
-
{
|
|
109
|
-
"kind": "field",
|
|
110
|
-
"name": "_options",
|
|
111
|
-
"type": {
|
|
112
|
-
"text": "ListboxOption[]"
|
|
113
|
-
},
|
|
114
|
-
"privacy": "private",
|
|
115
|
-
"default": "[]"
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
"kind": "field",
|
|
119
|
-
"name": "_selectedValues",
|
|
120
|
-
"type": {
|
|
121
|
-
"text": "Set<string>"
|
|
122
|
-
},
|
|
123
|
-
"privacy": "private",
|
|
124
|
-
"default": "new Set()"
|
|
125
|
-
},
|
|
126
|
-
{
|
|
127
|
-
"kind": "field",
|
|
128
|
-
"name": "_filterText",
|
|
129
|
-
"type": {
|
|
130
|
-
"text": "string"
|
|
131
|
-
},
|
|
132
|
-
"privacy": "private",
|
|
133
|
-
"default": "''"
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
"kind": "field",
|
|
137
|
-
"name": "_createLabel",
|
|
138
|
-
"type": {
|
|
139
|
-
"text": "string | null"
|
|
140
|
-
},
|
|
141
|
-
"privacy": "private",
|
|
142
|
-
"default": "null"
|
|
143
|
-
},
|
|
144
189
|
{
|
|
145
190
|
"kind": "field",
|
|
146
191
|
"name": "_defaultValue",
|
|
@@ -168,17 +213,36 @@
|
|
|
168
213
|
},
|
|
169
214
|
{
|
|
170
215
|
"kind": "field",
|
|
171
|
-
"name": "
|
|
216
|
+
"name": "_filterText",
|
|
217
|
+
"type": {
|
|
218
|
+
"text": "string"
|
|
219
|
+
},
|
|
172
220
|
"privacy": "private",
|
|
221
|
+
"default": "''"
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
"kind": "field",
|
|
225
|
+
"name": "_uid",
|
|
226
|
+
"privacy": "protected",
|
|
173
227
|
"readonly": true,
|
|
174
|
-
"default": "`rc-lb-${++_uid}`"
|
|
228
|
+
"default": "`rc-lb-${++_uid}`",
|
|
229
|
+
"description": "Unique ID prefix for all rendered option elements in this instance."
|
|
175
230
|
},
|
|
176
231
|
{
|
|
177
232
|
"kind": "field",
|
|
178
|
-
"name": "
|
|
179
|
-
"privacy": "
|
|
233
|
+
"name": "_itemsCollectionCtrl",
|
|
234
|
+
"privacy": "protected",
|
|
235
|
+
"readonly": true,
|
|
236
|
+
"default": "new ItemsCollectionController(this, { idPrefix: this._uid, onInitFromDom: () => this._applySelectionFromSource(), onActivate: (option) => this._handleActivate(option), })",
|
|
237
|
+
"description": "Manages the `<ul>/<li>` option DOM subtree in the component's light DOM."
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"kind": "field",
|
|
241
|
+
"name": "_activeDescendantCtrl",
|
|
242
|
+
"privacy": "protected",
|
|
180
243
|
"readonly": true,
|
|
181
|
-
"default": "new ActiveDescendantController(this, { host: () => this, items: () => this.navigableItems, })"
|
|
244
|
+
"default": "new ActiveDescendantController(this, { host: () => this, items: () => this.navigableItems, })",
|
|
245
|
+
"description": "Active-descendant controller; tracks keyboard focus within the option list."
|
|
182
246
|
},
|
|
183
247
|
{
|
|
184
248
|
"kind": "field",
|
|
@@ -204,7 +268,7 @@
|
|
|
204
268
|
"type": {
|
|
205
269
|
"text": "ListboxOption[]"
|
|
206
270
|
},
|
|
207
|
-
"description": "Replace the full options list.
|
|
271
|
+
"description": "Replace the full options list."
|
|
208
272
|
},
|
|
209
273
|
{
|
|
210
274
|
"kind": "method",
|
|
@@ -216,7 +280,7 @@
|
|
|
216
280
|
},
|
|
217
281
|
"parameters": [
|
|
218
282
|
{
|
|
219
|
-
"name": "
|
|
283
|
+
"name": "option",
|
|
220
284
|
"type": {
|
|
221
285
|
"text": "ListboxOption"
|
|
222
286
|
}
|
|
@@ -230,6 +294,7 @@
|
|
|
230
294
|
"type": {
|
|
231
295
|
"text": "string[]"
|
|
232
296
|
},
|
|
297
|
+
"description": "Current selection as a consistently-array-shaped read-only view.",
|
|
233
298
|
"readonly": true
|
|
234
299
|
},
|
|
235
300
|
{
|
|
@@ -282,7 +347,7 @@
|
|
|
282
347
|
}
|
|
283
348
|
}
|
|
284
349
|
],
|
|
285
|
-
"description": "Toggle the selected state of the option with `value`.\nIn single-select mode,
|
|
350
|
+
"description": "Toggle the selected state of the option with `value`.\nIn single-select mode, toggling a selected item deselects it (and selects\nthe new item). Fires `rc-listbox-change`."
|
|
286
351
|
},
|
|
287
352
|
{
|
|
288
353
|
"kind": "method",
|
|
@@ -291,7 +356,8 @@
|
|
|
291
356
|
"type": {
|
|
292
357
|
"text": "void"
|
|
293
358
|
}
|
|
294
|
-
}
|
|
359
|
+
},
|
|
360
|
+
"description": "Clears all selected values without firing `rc-listbox-change`."
|
|
295
361
|
},
|
|
296
362
|
{
|
|
297
363
|
"kind": "method",
|
|
@@ -309,7 +375,7 @@
|
|
|
309
375
|
}
|
|
310
376
|
}
|
|
311
377
|
],
|
|
312
|
-
"description": "Filter visible options to those whose label
|
|
378
|
+
"description": "Filter visible options to those whose label matches `text` (case-insensitive)."
|
|
313
379
|
},
|
|
314
380
|
{
|
|
315
381
|
"kind": "method",
|
|
@@ -318,7 +384,8 @@
|
|
|
318
384
|
"type": {
|
|
319
385
|
"text": "void"
|
|
320
386
|
}
|
|
321
|
-
}
|
|
387
|
+
},
|
|
388
|
+
"description": "Removes any active filter, making all options visible."
|
|
322
389
|
},
|
|
323
390
|
{
|
|
324
391
|
"kind": "field",
|
|
@@ -326,7 +393,7 @@
|
|
|
326
393
|
"type": {
|
|
327
394
|
"text": "Element[]"
|
|
328
395
|
},
|
|
329
|
-
"description": "Ordered list of option elements
|
|
396
|
+
"description": "Ordered list of currently navigable option elements (visible and not disabled).\n\nFeed this to `ActiveDescendantController.items` in the parent component.\nIncludes the create option element when one is set.",
|
|
330
397
|
"readonly": true
|
|
331
398
|
},
|
|
332
399
|
{
|
|
@@ -345,51 +412,54 @@
|
|
|
345
412
|
}
|
|
346
413
|
}
|
|
347
414
|
],
|
|
348
|
-
"description": "Show or hide the \"Create\" option at the end of the list.\nPass `null` to hide it, or a non-empty string to show \"
|
|
415
|
+
"description": "Show or hide the \"Create\" option at the end of the list.\n\nPass `null` to hide it, or a non-empty string to show `Create \"{label}\"`.\nFires `rc-listbox-change` with `reason: 'action'` and `action: 'create'`\nwhen activated."
|
|
349
416
|
},
|
|
350
417
|
{
|
|
351
418
|
"kind": "field",
|
|
352
419
|
"name": "_onBlur",
|
|
353
|
-
"privacy": "
|
|
420
|
+
"privacy": "protected",
|
|
421
|
+
"description": "Clears the active descendant when focus leaves the listbox."
|
|
354
422
|
},
|
|
355
423
|
{
|
|
356
424
|
"kind": "field",
|
|
357
425
|
"name": "_onKeydown",
|
|
358
|
-
"privacy": "
|
|
426
|
+
"privacy": "protected",
|
|
427
|
+
"description": "Handles arrow-key navigation and Enter/Space activation.\n\nPasses modifier-key combos through to parent handlers unchanged."
|
|
359
428
|
},
|
|
360
429
|
{
|
|
361
430
|
"kind": "method",
|
|
362
|
-
"name": "
|
|
431
|
+
"name": "_handleActivate",
|
|
363
432
|
"privacy": "private",
|
|
364
433
|
"return": {
|
|
365
434
|
"type": {
|
|
366
435
|
"text": "void"
|
|
367
436
|
}
|
|
368
437
|
},
|
|
369
|
-
"
|
|
438
|
+
"parameters": [
|
|
439
|
+
{
|
|
440
|
+
"name": "option",
|
|
441
|
+
"type": {
|
|
442
|
+
"text": "ListboxOption"
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
],
|
|
446
|
+
"description": "Routes pointer activations from the controller."
|
|
370
447
|
},
|
|
371
448
|
{
|
|
372
449
|
"kind": "method",
|
|
373
|
-
"name": "
|
|
374
|
-
"privacy": "
|
|
450
|
+
"name": "_selectActiveItem",
|
|
451
|
+
"privacy": "protected",
|
|
375
452
|
"return": {
|
|
376
453
|
"type": {
|
|
377
|
-
"text": "
|
|
454
|
+
"text": "void"
|
|
378
455
|
}
|
|
379
456
|
},
|
|
380
|
-
"
|
|
381
|
-
{
|
|
382
|
-
"name": "index",
|
|
383
|
-
"type": {
|
|
384
|
-
"text": "number"
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
]
|
|
457
|
+
"description": "Selects the active-descendant item without toggling.\n\nUsed by arrow-key navigation so the item under the cursor is always selected."
|
|
388
458
|
},
|
|
389
459
|
{
|
|
390
460
|
"kind": "method",
|
|
391
461
|
"name": "_isVisible",
|
|
392
|
-
"privacy": "
|
|
462
|
+
"privacy": "protected",
|
|
393
463
|
"return": {
|
|
394
464
|
"type": {
|
|
395
465
|
"text": "boolean"
|
|
@@ -397,17 +467,18 @@
|
|
|
397
467
|
},
|
|
398
468
|
"parameters": [
|
|
399
469
|
{
|
|
400
|
-
"name": "
|
|
470
|
+
"name": "option",
|
|
401
471
|
"type": {
|
|
402
472
|
"text": "ListboxOption"
|
|
403
473
|
}
|
|
404
474
|
}
|
|
405
|
-
]
|
|
475
|
+
],
|
|
476
|
+
"description": "Returns `true` when `opt` passes the current `_filterText` and `filterStrategy`."
|
|
406
477
|
},
|
|
407
478
|
{
|
|
408
479
|
"kind": "method",
|
|
409
480
|
"name": "_applySelection",
|
|
410
|
-
"privacy": "
|
|
481
|
+
"privacy": "protected",
|
|
411
482
|
"return": {
|
|
412
483
|
"type": {
|
|
413
484
|
"text": "void"
|
|
@@ -420,22 +491,24 @@
|
|
|
420
491
|
"text": "string[]"
|
|
421
492
|
}
|
|
422
493
|
}
|
|
423
|
-
]
|
|
494
|
+
],
|
|
495
|
+
"description": "Directly replaces the selection without firing an event.\n\nEnforces the single-select limit when `multiple` is false."
|
|
424
496
|
},
|
|
425
497
|
{
|
|
426
498
|
"kind": "method",
|
|
427
499
|
"name": "_applySelectionFromSource",
|
|
428
|
-
"privacy": "
|
|
500
|
+
"privacy": "protected",
|
|
429
501
|
"return": {
|
|
430
502
|
"type": {
|
|
431
503
|
"text": "void"
|
|
432
504
|
}
|
|
433
|
-
}
|
|
505
|
+
},
|
|
506
|
+
"description": "Re-applies `_value` or `_defaultValue` after `options` or DOM bootstrap changes."
|
|
434
507
|
},
|
|
435
508
|
{
|
|
436
509
|
"kind": "method",
|
|
437
510
|
"name": "_normalizeValue",
|
|
438
|
-
"privacy": "
|
|
511
|
+
"privacy": "protected",
|
|
439
512
|
"return": {
|
|
440
513
|
"type": {
|
|
441
514
|
"text": "string[]"
|
|
@@ -448,12 +521,42 @@
|
|
|
448
521
|
"text": "string | string[]"
|
|
449
522
|
}
|
|
450
523
|
}
|
|
451
|
-
]
|
|
524
|
+
],
|
|
525
|
+
"description": "Coerces a `string | string[]` value to `string[]`."
|
|
526
|
+
},
|
|
527
|
+
{
|
|
528
|
+
"kind": "method",
|
|
529
|
+
"name": "_activeOption",
|
|
530
|
+
"privacy": "protected",
|
|
531
|
+
"return": {
|
|
532
|
+
"type": {
|
|
533
|
+
"text": "ListboxOption | null"
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
},
|
|
537
|
+
{
|
|
538
|
+
"kind": "method",
|
|
539
|
+
"name": "_dispatchAction",
|
|
540
|
+
"privacy": "protected",
|
|
541
|
+
"return": {
|
|
542
|
+
"type": {
|
|
543
|
+
"text": "void"
|
|
544
|
+
}
|
|
545
|
+
},
|
|
546
|
+
"parameters": [
|
|
547
|
+
{
|
|
548
|
+
"name": "option",
|
|
549
|
+
"type": {
|
|
550
|
+
"text": "ListboxActionOption"
|
|
551
|
+
}
|
|
552
|
+
}
|
|
553
|
+
],
|
|
554
|
+
"description": "Fires `rc-listbox-change` for a command/action row without mutating selection."
|
|
452
555
|
},
|
|
453
556
|
{
|
|
454
557
|
"kind": "method",
|
|
455
558
|
"name": "_dispatchChange",
|
|
456
|
-
"privacy": "
|
|
559
|
+
"privacy": "protected",
|
|
457
560
|
"return": {
|
|
458
561
|
"type": {
|
|
459
562
|
"text": "void"
|
|
@@ -463,7 +566,7 @@
|
|
|
463
566
|
{
|
|
464
567
|
"name": "option",
|
|
465
568
|
"type": {
|
|
466
|
-
"text": "
|
|
569
|
+
"text": "ListboxSelectableOption"
|
|
467
570
|
}
|
|
468
571
|
},
|
|
469
572
|
{
|
|
@@ -472,15 +575,16 @@
|
|
|
472
575
|
"text": "boolean"
|
|
473
576
|
}
|
|
474
577
|
}
|
|
475
|
-
]
|
|
578
|
+
],
|
|
579
|
+
"description": "Fires `rc-listbox-change` with a fully-populated detail object."
|
|
476
580
|
},
|
|
477
581
|
{
|
|
478
582
|
"kind": "method",
|
|
479
583
|
"name": "_selectedOptionsFor",
|
|
480
|
-
"privacy": "
|
|
584
|
+
"privacy": "protected",
|
|
481
585
|
"return": {
|
|
482
586
|
"type": {
|
|
483
|
-
"text": "
|
|
587
|
+
"text": "ListboxSelectableOption[]"
|
|
484
588
|
}
|
|
485
589
|
},
|
|
486
590
|
"parameters": [
|
|
@@ -490,7 +594,8 @@
|
|
|
490
594
|
"text": "string[]"
|
|
491
595
|
}
|
|
492
596
|
}
|
|
493
|
-
]
|
|
597
|
+
],
|
|
598
|
+
"description": "Maps value strings to their `ListboxOption` objects.\nCreates synthetic `{ value, label: value }` entries for values not in the list."
|
|
494
599
|
}
|
|
495
600
|
],
|
|
496
601
|
"events": [
|
|
@@ -518,7 +623,7 @@
|
|
|
518
623
|
"text": "boolean"
|
|
519
624
|
},
|
|
520
625
|
"default": "false",
|
|
521
|
-
"description": "Render a checkmark indicator inside each option element.\nHidden by default; enable for combobox / select patterns where the\nconsumer's CSS shows it conditionally via `[aria-selected='true']`.",
|
|
626
|
+
"description": "Render a checkmark indicator inside each option element.\n\nHidden by default; enable for combobox / select patterns where the\nconsumer's CSS shows it conditionally via `[aria-selected='true']`.",
|
|
522
627
|
"fieldName": "checkmark"
|
|
523
628
|
},
|
|
524
629
|
{
|
|
@@ -527,7 +632,7 @@
|
|
|
527
632
|
"text": "FilterStrategy"
|
|
528
633
|
},
|
|
529
634
|
"default": "'contains'",
|
|
530
|
-
"description": "How option labels are matched against the active filter text.\nDefaults to `'contains'` (substring). Set to `'prefix'` for starts-with\nmatching, or pass a custom predicate for full control.\nFunction values are JS-only; string values may be set via the\n`filter-strategy` attribute.",
|
|
635
|
+
"description": "How option labels are matched against the active filter text.\n\nDefaults to `'contains'` (substring). Set to `'prefix'` for starts-with\nmatching, or pass a custom predicate for full control.\nFunction values are JS-only; string values may be set via the\n`filter-strategy` attribute.",
|
|
531
636
|
"fieldName": "filterStrategy"
|
|
532
637
|
}
|
|
533
638
|
],
|