@primer/view-components 0.28.0-rc.bfe86ece → 0.29.0-rc.e262bef4
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/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": {
|