@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.
@@ -20,7 +20,7 @@ export declare class SelectPanelElement extends HTMLElement {
20
20
  ariaLiveContainer: HTMLElement;
21
21
  noResults: HTMLElement;
22
22
  fragmentErrorElement: HTMLElement;
23
- errorBannerElement: HTMLElement;
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
- if (this.remoteInput) {
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
- else {
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
- if (this.dialog) {
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
- else {
221
- const mutationObserver = new MutationObserver(() => {
222
- if (this.dialog) {
223
- if (this.getAttribute('data-open-on-load') === 'true') {
224
- this.show();
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
- // #hide will automatically be called by dialog event triggered from `data-close-dialog-id`
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 value = item.getAttribute('data-value');
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
- item.setAttribute(this.ariaSelectionType, 'true');
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 button = item.querySelector('button');
497
- const value = item.getAttribute('data-value');
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: button.querySelector('.ActionListItem-label')?.textContent?.trim(),
502
- inputName: button.getAttribute('data-input-name'),
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.showItem(item);
622
+ __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_showItem).call(this, item);
637
623
  atLeastOneResult = true;
638
624
  }
639
625
  else {
640
- this.hideItem(item);
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 value = item.getAttribute('data-value');
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.errorBannerElement.hasAttribute('hidden');
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.errorBannerElement.setAttribute('hidden', '');
670
+ this.bannerErrorElement.setAttribute('hidden', '');
682
671
  }
683
672
  else {
684
- errorElement = this.errorBannerElement;
685
- this.errorBannerElement?.removeAttribute('hidden');
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.errorBannerElement.setAttribute('hidden', '');
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, "errorBannerElement", void 0);
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.28.0-rc.bfe86ece",
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",
@@ -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",
@@ -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": "",
@@ -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": {