@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.
@@ -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": {