@primer/view-components 0.28.0-rc.bfe86ece → 0.29.0-rc.e262bef4
Sign up to get free protection for your applications and to get access to all the features.
- package/app/assets/javascripts/app/components/primer/alpha/select_panel_element.d.ts +1 -3
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/components/primer/alpha/select_panel_element.d.ts +1 -3
- package/app/components/primer/alpha/select_panel_element.js +68 -68
- package/package.json +1 -1
- package/static/arguments.json +140 -0
- package/static/audited_at.json +2 -0
- package/static/constants.json +18 -0
- package/static/info_arch.json +949 -105
- package/static/previews.json +294 -0
- package/static/statuses.json +2 -0
@@ -20,7 +20,7 @@ export declare class SelectPanelElement extends HTMLElement {
|
|
20
20
|
ariaLiveContainer: HTMLElement;
|
21
21
|
noResults: HTMLElement;
|
22
22
|
fragmentErrorElement: HTMLElement;
|
23
|
-
|
23
|
+
bannerErrorElement: HTMLElement;
|
24
24
|
bodySpinner: HTMLElement;
|
25
25
|
filterFn?: FilterFn;
|
26
26
|
get open(): boolean;
|
@@ -52,8 +52,6 @@ export declare class SelectPanelElement extends HTMLElement {
|
|
52
52
|
disableItem(item: SelectPanelItem | null): void;
|
53
53
|
enableItem(item: SelectPanelItem | null): void;
|
54
54
|
isItemHidden(item: SelectPanelItem | null): boolean;
|
55
|
-
hideItem(item: SelectPanelItem | null): void;
|
56
|
-
showItem(item: SelectPanelItem | null): void;
|
57
55
|
isItemChecked(item: SelectPanelItem | null): boolean;
|
58
56
|
checkItem(item: SelectPanelItem | null): void;
|
59
57
|
uncheckItem(item: SelectPanelItem | null): void;
|
@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
15
15
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
16
16
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
17
17
|
};
|
18
|
-
var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_getItemContent;
|
18
|
+
var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
|
19
19
|
import { getAnchoredPosition } from '@primer/behaviors';
|
20
20
|
import { controller, target } from '@github/catalyst';
|
21
21
|
import { announceFromElement, announce } from '../aria_live';
|
@@ -170,36 +170,15 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
170
170
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
|
171
171
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_softDisableItems).call(this);
|
172
172
|
updateWhenVisible(this);
|
173
|
-
|
173
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.remoteInput), () => {
|
174
174
|
this.remoteInput.addEventListener('loadstart', this, { signal });
|
175
175
|
this.remoteInput.addEventListener('loadend', this, { signal });
|
176
|
-
}
|
177
|
-
|
178
|
-
const mutationObserver = new MutationObserver(() => {
|
179
|
-
if (this.remoteInput) {
|
180
|
-
this.remoteInput.addEventListener('loadstart', this, { signal });
|
181
|
-
this.remoteInput.addEventListener('loadend', this, { signal });
|
182
|
-
mutationObserver.disconnect();
|
183
|
-
}
|
184
|
-
});
|
185
|
-
mutationObserver.observe(this, { childList: true, subtree: true });
|
186
|
-
}
|
187
|
-
if (this.includeFragment) {
|
176
|
+
});
|
177
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.includeFragment), () => {
|
188
178
|
this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
|
189
179
|
this.includeFragment.addEventListener('error', this, { signal });
|
190
180
|
this.includeFragment.addEventListener('loadend', this, { signal });
|
191
|
-
}
|
192
|
-
else {
|
193
|
-
const mutationObserver = new MutationObserver(() => {
|
194
|
-
if (this.includeFragment) {
|
195
|
-
this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
|
196
|
-
this.includeFragment.addEventListener('error', this, { signal });
|
197
|
-
this.includeFragment.addEventListener('loadend', this, { signal });
|
198
|
-
mutationObserver.disconnect();
|
199
|
-
}
|
200
|
-
});
|
201
|
-
mutationObserver.observe(this, { childList: true, subtree: true });
|
202
|
-
}
|
181
|
+
});
|
203
182
|
__classPrivateFieldSet(this, _SelectPanelElement_dialogIntersectionObserver, new IntersectionObserver(entries => {
|
204
183
|
for (const entry of entries) {
|
205
184
|
const elem = entry.target;
|
@@ -211,23 +190,18 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
211
190
|
}
|
212
191
|
}
|
213
192
|
}), "f");
|
214
|
-
|
193
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.dialog), () => {
|
215
194
|
if (this.getAttribute('data-open-on-load') === 'true') {
|
216
195
|
this.show();
|
217
196
|
}
|
218
197
|
__classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
}
|
226
|
-
__classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
|
227
|
-
mutationObserver.disconnect();
|
228
|
-
}
|
198
|
+
this.dialog.addEventListener('close', this, { signal });
|
199
|
+
});
|
200
|
+
if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
|
201
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => this.items.length > 0, () => {
|
202
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
|
203
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
|
229
204
|
});
|
230
|
-
mutationObserver.observe(this, { childList: true, subtree: true });
|
231
205
|
}
|
232
206
|
}
|
233
207
|
disconnectedCallback() {
|
@@ -262,7 +236,14 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
262
236
|
return;
|
263
237
|
}
|
264
238
|
if (targetIsCloseButton && eventIsActivation) {
|
265
|
-
//
|
239
|
+
// hide() will automatically be called by dialog event triggered from `data-close-dialog-id`
|
240
|
+
return;
|
241
|
+
}
|
242
|
+
if (event.target === this.dialog && event.type === 'close') {
|
243
|
+
this.dispatchEvent(new CustomEvent('panelClosed', {
|
244
|
+
detail: { panel: this },
|
245
|
+
bubbles: true,
|
246
|
+
}));
|
266
247
|
return;
|
267
248
|
}
|
268
249
|
const item = event.target.closest(visibleMenuItemSelectors)?.parentElement;
|
@@ -315,10 +296,6 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
315
296
|
}
|
316
297
|
hide() {
|
317
298
|
this.dialog.close();
|
318
|
-
this.dispatchEvent(new CustomEvent('panelClosed', {
|
319
|
-
detail: { panel: this },
|
320
|
-
bubbles: true,
|
321
|
-
}));
|
322
299
|
}
|
323
300
|
get visibleItems() {
|
324
301
|
return Array.from(this.querySelectorAll(visibleMenuItemSelectors)).map(element => element.parentElement);
|
@@ -367,16 +344,6 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
367
344
|
return false;
|
368
345
|
}
|
369
346
|
}
|
370
|
-
hideItem(item) {
|
371
|
-
if (item) {
|
372
|
-
item.setAttribute('hidden', 'hidden');
|
373
|
-
}
|
374
|
-
}
|
375
|
-
showItem(item) {
|
376
|
-
if (item) {
|
377
|
-
item.removeAttribute('hidden');
|
378
|
-
}
|
379
|
-
}
|
380
347
|
isItemChecked(item) {
|
381
348
|
if (item) {
|
382
349
|
return __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).getAttribute(this.ariaSelectionType) === 'true';
|
@@ -408,6 +375,20 @@ _SelectPanelElement_selectedItems = new WeakMap();
|
|
408
375
|
_SelectPanelElement_loadingDelayTimeoutId = new WeakMap();
|
409
376
|
_SelectPanelElement_loadingAnnouncementTimeoutId = new WeakMap();
|
410
377
|
_SelectPanelElement_instances = new WeakSet();
|
378
|
+
_SelectPanelElement_waitForCondition = function _SelectPanelElement_waitForCondition(condition, body) {
|
379
|
+
if (condition()) {
|
380
|
+
body();
|
381
|
+
}
|
382
|
+
else {
|
383
|
+
const mutationObserver = new MutationObserver(() => {
|
384
|
+
if (condition()) {
|
385
|
+
body();
|
386
|
+
mutationObserver.disconnect();
|
387
|
+
}
|
388
|
+
});
|
389
|
+
mutationObserver.observe(this, { childList: true, subtree: true });
|
390
|
+
}
|
391
|
+
};
|
411
392
|
_SelectPanelElement_softDisableItems = function _SelectPanelElement_softDisableItems() {
|
412
393
|
const { signal } = __classPrivateFieldGet(this, _SelectPanelElement_abortController, "f");
|
413
394
|
for (const item of this.querySelectorAll(validSelectors.join(','))) {
|
@@ -483,23 +464,28 @@ _SelectPanelElement_isActivation = function _SelectPanelElement_isActivation(eve
|
|
483
464
|
};
|
484
465
|
_SelectPanelElement_checkSelectedItems = function _SelectPanelElement_checkSelectedItems() {
|
485
466
|
for (const item of this.items) {
|
486
|
-
const
|
467
|
+
const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
|
468
|
+
if (!itemContent)
|
469
|
+
continue;
|
470
|
+
const value = itemContent.getAttribute('data-value');
|
487
471
|
if (value) {
|
488
472
|
if (__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value)) {
|
489
|
-
|
473
|
+
itemContent.setAttribute(this.ariaSelectionType, 'true');
|
490
474
|
}
|
491
475
|
}
|
492
476
|
}
|
493
477
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
|
494
478
|
};
|
495
479
|
_SelectPanelElement_addSelectedItem = function _SelectPanelElement_addSelectedItem(item) {
|
496
|
-
const
|
497
|
-
|
480
|
+
const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
|
481
|
+
if (!itemContent)
|
482
|
+
return;
|
483
|
+
const value = itemContent.getAttribute('data-value');
|
498
484
|
if (value) {
|
499
485
|
__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").set(value, {
|
500
486
|
value,
|
501
|
-
label:
|
502
|
-
inputName:
|
487
|
+
label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
|
488
|
+
inputName: itemContent.getAttribute('data-input-name'),
|
503
489
|
element: item,
|
504
490
|
});
|
505
491
|
}
|
@@ -633,11 +619,11 @@ _SelectPanelElement_updateItemVisibility = function _SelectPanelElement_updateIt
|
|
633
619
|
const filter = this.filterFn || __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_defaultFilterFn);
|
634
620
|
for (const item of this.items) {
|
635
621
|
if (filter(item, query)) {
|
636
|
-
this.
|
622
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_showItem).call(this, item);
|
637
623
|
atLeastOneResult = true;
|
638
624
|
}
|
639
625
|
else {
|
640
|
-
this.
|
626
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_hideItem).call(this, item);
|
641
627
|
}
|
642
628
|
}
|
643
629
|
}
|
@@ -647,7 +633,10 @@ _SelectPanelElement_updateItemVisibility = function _SelectPanelElement_updateIt
|
|
647
633
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
|
648
634
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_maybeAnnounce).call(this);
|
649
635
|
for (const item of this.items) {
|
650
|
-
const
|
636
|
+
const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
|
637
|
+
if (!itemContent)
|
638
|
+
continue;
|
639
|
+
const value = itemContent.getAttribute('data-value');
|
651
640
|
if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value) && this.isItemChecked(item)) {
|
652
641
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
|
653
642
|
}
|
@@ -672,17 +661,17 @@ _SelectPanelElement_inErrorState = function _SelectPanelElement_inErrorState() {
|
|
672
661
|
if (this.fragmentErrorElement && !this.fragmentErrorElement.hasAttribute('hidden')) {
|
673
662
|
return true;
|
674
663
|
}
|
675
|
-
return !this.
|
664
|
+
return !this.bannerErrorElement.hasAttribute('hidden');
|
676
665
|
};
|
677
666
|
_SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(type) {
|
678
667
|
let errorElement = this.fragmentErrorElement;
|
679
668
|
if (type === ErrorStateType.BODY) {
|
680
669
|
this.fragmentErrorElement?.removeAttribute('hidden');
|
681
|
-
this.
|
670
|
+
this.bannerErrorElement.setAttribute('hidden', '');
|
682
671
|
}
|
683
672
|
else {
|
684
|
-
errorElement = this.
|
685
|
-
this.
|
673
|
+
errorElement = this.bannerErrorElement;
|
674
|
+
this.bannerErrorElement?.removeAttribute('hidden');
|
686
675
|
this.fragmentErrorElement?.setAttribute('hidden', '');
|
687
676
|
}
|
688
677
|
// check if the errorElement is visible in the dom
|
@@ -693,7 +682,7 @@ _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(t
|
|
693
682
|
};
|
694
683
|
_SelectPanelElement_clearErrorState = function _SelectPanelElement_clearErrorState() {
|
695
684
|
this.fragmentErrorElement?.setAttribute('hidden', '');
|
696
|
-
this.
|
685
|
+
this.bannerErrorElement.setAttribute('hidden', '');
|
697
686
|
};
|
698
687
|
_SelectPanelElement_maybeAnnounce = function _SelectPanelElement_maybeAnnounce() {
|
699
688
|
if (this.open && this.list) {
|
@@ -814,6 +803,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
|
|
814
803
|
}
|
815
804
|
}
|
816
805
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
|
806
|
+
__classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
|
817
807
|
this.dispatchEvent(new CustomEvent('itemActivated', {
|
818
808
|
bubbles: true,
|
819
809
|
detail: { item, checked },
|
@@ -884,6 +874,16 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
|
|
884
874
|
_SelectPanelElement_firstItem_get = function _SelectPanelElement_firstItem_get() {
|
885
875
|
return (this.querySelector(visibleMenuItemSelectors)?.parentElement || null);
|
886
876
|
};
|
877
|
+
_SelectPanelElement_hideItem = function _SelectPanelElement_hideItem(item) {
|
878
|
+
if (item) {
|
879
|
+
item.setAttribute('hidden', 'hidden');
|
880
|
+
}
|
881
|
+
};
|
882
|
+
_SelectPanelElement_showItem = function _SelectPanelElement_showItem(item) {
|
883
|
+
if (item) {
|
884
|
+
item.removeAttribute('hidden');
|
885
|
+
}
|
886
|
+
};
|
887
887
|
_SelectPanelElement_getItemContent = function _SelectPanelElement_getItemContent(item) {
|
888
888
|
return item.querySelector('.ActionListContent');
|
889
889
|
};
|
@@ -913,7 +913,7 @@ __decorate([
|
|
913
913
|
], SelectPanelElement.prototype, "fragmentErrorElement", void 0);
|
914
914
|
__decorate([
|
915
915
|
target
|
916
|
-
], SelectPanelElement.prototype, "
|
916
|
+
], SelectPanelElement.prototype, "bannerErrorElement", void 0);
|
917
917
|
__decorate([
|
918
918
|
target
|
919
919
|
], SelectPanelElement.prototype, "bodySpinner", void 0);
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@primer/view-components",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.29.0-rc.e262bef4",
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
6
6
|
"module": "app/components/primer/primer.js",
|
package/static/arguments.json
CHANGED
@@ -2352,6 +2352,146 @@
|
|
2352
2352
|
}
|
2353
2353
|
]
|
2354
2354
|
},
|
2355
|
+
{
|
2356
|
+
"component": "SelectPanel",
|
2357
|
+
"status": "alpha",
|
2358
|
+
"a11y_reviewed": false,
|
2359
|
+
"short_name": "SelectPanel",
|
2360
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
|
2361
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
|
2362
|
+
"parameters": [
|
2363
|
+
{
|
2364
|
+
"name": "src",
|
2365
|
+
"type": "String",
|
2366
|
+
"default": "`nil`",
|
2367
|
+
"description": "The URL to fetch search results from."
|
2368
|
+
},
|
2369
|
+
{
|
2370
|
+
"name": "title",
|
2371
|
+
"type": "String",
|
2372
|
+
"default": "`\"Menu\"`",
|
2373
|
+
"description": "The title that appears at the top of the panel."
|
2374
|
+
},
|
2375
|
+
{
|
2376
|
+
"name": "id",
|
2377
|
+
"type": "String",
|
2378
|
+
"default": "`self.class.generate_id`",
|
2379
|
+
"description": "The unique ID of the panel."
|
2380
|
+
},
|
2381
|
+
{
|
2382
|
+
"name": "size",
|
2383
|
+
"type": "Symbol",
|
2384
|
+
"default": "`:small`",
|
2385
|
+
"description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
|
2386
|
+
},
|
2387
|
+
{
|
2388
|
+
"name": "select_variant",
|
2389
|
+
"type": "Symbol",
|
2390
|
+
"default": "`:single`",
|
2391
|
+
"description": "One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
|
2392
|
+
},
|
2393
|
+
{
|
2394
|
+
"name": "fetch_strategy",
|
2395
|
+
"type": "Symbol",
|
2396
|
+
"default": "`:remote`",
|
2397
|
+
"description": "One of `:eventually_local`, `:local`, or `:remote`."
|
2398
|
+
},
|
2399
|
+
{
|
2400
|
+
"name": "no_results_label",
|
2401
|
+
"type": "String",
|
2402
|
+
"default": "`\"No results found\"`",
|
2403
|
+
"description": "The label to display when no results are found."
|
2404
|
+
},
|
2405
|
+
{
|
2406
|
+
"name": "preload",
|
2407
|
+
"type": "Boolean",
|
2408
|
+
"default": "`false`",
|
2409
|
+
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
|
2410
|
+
},
|
2411
|
+
{
|
2412
|
+
"name": "dynamic_label",
|
2413
|
+
"type": "Boolean",
|
2414
|
+
"default": "`false`",
|
2415
|
+
"description": "Whether or not to display the text of the currently selected item in the show button."
|
2416
|
+
},
|
2417
|
+
{
|
2418
|
+
"name": "dynamic_label_prefix",
|
2419
|
+
"type": "String",
|
2420
|
+
"default": "`nil`",
|
2421
|
+
"description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
|
2422
|
+
},
|
2423
|
+
{
|
2424
|
+
"name": "dynamic_aria_label_prefix",
|
2425
|
+
"type": "String",
|
2426
|
+
"default": "`nil`",
|
2427
|
+
"description": "If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button."
|
2428
|
+
},
|
2429
|
+
{
|
2430
|
+
"name": "body_id",
|
2431
|
+
"type": "String",
|
2432
|
+
"default": "`nil`",
|
2433
|
+
"description": "The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a \"-body\" suffix."
|
2434
|
+
},
|
2435
|
+
{
|
2436
|
+
"name": "list_arguments",
|
2437
|
+
"type": "Hash",
|
2438
|
+
"default": "`{}`",
|
2439
|
+
"description": "Arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
|
2440
|
+
},
|
2441
|
+
{
|
2442
|
+
"name": "form_arguments",
|
2443
|
+
"type": "Hash",
|
2444
|
+
"default": "`{}`",
|
2445
|
+
"description": "Form arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
|
2446
|
+
},
|
2447
|
+
{
|
2448
|
+
"name": "show_filter",
|
2449
|
+
"type": "Boolean",
|
2450
|
+
"default": "`true`",
|
2451
|
+
"description": "Whether or not to show the filter input."
|
2452
|
+
},
|
2453
|
+
{
|
2454
|
+
"name": "open_on_load",
|
2455
|
+
"type": "Boolean",
|
2456
|
+
"default": "`false`",
|
2457
|
+
"description": "Open the panel when the page loads."
|
2458
|
+
},
|
2459
|
+
{
|
2460
|
+
"name": "anchor_align",
|
2461
|
+
"type": "Symbol",
|
2462
|
+
"default": "`:start`",
|
2463
|
+
"description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
|
2464
|
+
},
|
2465
|
+
{
|
2466
|
+
"name": "anchor_side",
|
2467
|
+
"type": "Symbol",
|
2468
|
+
"default": "`:outside_bottom`",
|
2469
|
+
"description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
2470
|
+
},
|
2471
|
+
{
|
2472
|
+
"name": "system_arguments",
|
2473
|
+
"type": "Hash",
|
2474
|
+
"default": "N/A",
|
2475
|
+
"description": "[System arguments](/system-arguments)"
|
2476
|
+
}
|
2477
|
+
]
|
2478
|
+
},
|
2479
|
+
{
|
2480
|
+
"component": "SelectPanel::ItemList",
|
2481
|
+
"status": "alpha",
|
2482
|
+
"a11y_reviewed": true,
|
2483
|
+
"short_name": "SelectPanelItemList",
|
2484
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb",
|
2485
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/",
|
2486
|
+
"parameters": [
|
2487
|
+
{
|
2488
|
+
"name": "system_arguments",
|
2489
|
+
"type": "Hash",
|
2490
|
+
"default": "N/A",
|
2491
|
+
"description": "The arguments accepted by [ActionList](/components/alpha/actionlist)."
|
2492
|
+
}
|
2493
|
+
]
|
2494
|
+
},
|
2355
2495
|
{
|
2356
2496
|
"component": "SubmitButton",
|
2357
2497
|
"status": "alpha",
|
package/static/audited_at.json
CHANGED
@@ -52,6 +52,8 @@
|
|
52
52
|
"Primer::Alpha::SegmentedControl": "2023-02-01",
|
53
53
|
"Primer::Alpha::SegmentedControl::Item": "2023-02-01",
|
54
54
|
"Primer::Alpha::Select": "",
|
55
|
+
"Primer::Alpha::SelectPanel": "",
|
56
|
+
"Primer::Alpha::SelectPanel::ItemList": "2023-07-10",
|
55
57
|
"Primer::Alpha::SubmitButton": "",
|
56
58
|
"Primer::Alpha::TabContainer": "",
|
57
59
|
"Primer::Alpha::TabNav": "",
|
package/static/constants.json
CHANGED
@@ -597,6 +597,24 @@
|
|
597
597
|
},
|
598
598
|
"Primer::Alpha::Select": {
|
599
599
|
},
|
600
|
+
"Primer::Alpha::SelectPanel": {
|
601
|
+
"DEFAULT_FETCH_STRATEGY": "remote",
|
602
|
+
"DEFAULT_PRELOAD": false,
|
603
|
+
"DEFAULT_SELECT_VARIANT": "single",
|
604
|
+
"FETCH_STRATEGIES": [
|
605
|
+
"remote",
|
606
|
+
"eventually_local",
|
607
|
+
"local"
|
608
|
+
],
|
609
|
+
"ItemList": "Primer::Alpha::SelectPanel::ItemList",
|
610
|
+
"SELECT_VARIANT_OPTIONS": [
|
611
|
+
"single",
|
612
|
+
"multiple",
|
613
|
+
"none"
|
614
|
+
]
|
615
|
+
},
|
616
|
+
"Primer::Alpha::SelectPanel::ItemList": {
|
617
|
+
},
|
600
618
|
"Primer::Alpha::SubmitButton": {
|
601
619
|
},
|
602
620
|
"Primer::Alpha::TabContainer": {
|