@primer/view-components 0.28.0-rc.538292aa → 0.28.0

package/app/components/primer/alpha/select_panel_element.d.ts

@@ -20,7 +20,7 @@ export declare class SelectPanelElement extends HTMLElement {
     ariaLiveContainer: HTMLElement;
     noResults: HTMLElement;
     fragmentErrorElement: HTMLElement;
-    errorBannerElement: HTMLElement;
+    bannerErrorElement: HTMLElement;
     bodySpinner: HTMLElement;
     filterFn?: FilterFn;
     get open(): boolean;
@@ -52,8 +52,6 @@ export declare class SelectPanelElement extends HTMLElement {
     disableItem(item: SelectPanelItem | null): void;
     enableItem(item: SelectPanelItem | null): void;
     isItemHidden(item: SelectPanelItem | null): boolean;
-    hideItem(item: SelectPanelItem | null): void;
-    showItem(item: SelectPanelItem | null): void;
     isItemChecked(item: SelectPanelItem | null): boolean;
     checkItem(item: SelectPanelItem | null): void;
     uncheckItem(item: SelectPanelItem | null): void;

package/app/components/primer/alpha/select_panel_element.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     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");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-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;
+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;
 import { getAnchoredPosition } from '@primer/behaviors';
 import { controller, target } from '@github/catalyst';
 import { announceFromElement, announce } from '../aria_live';
@@ -170,64 +170,35 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_softDisableItems).call(this);
         updateWhenVisible(this);
-        if (this.remoteInput) {
+        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.remoteInput), () => {
             this.remoteInput.addEventListener('loadstart', this, { signal });
             this.remoteInput.addEventListener('loadend', this, { signal });
-        }
-        else {
-            const mutationObserver = new MutationObserver(() => {
-                if (this.remoteInput) {
-                    this.remoteInput.addEventListener('loadstart', this, { signal });
-                    this.remoteInput.addEventListener('loadend', this, { signal });
-                    mutationObserver.disconnect();
-                }
-            });
-            mutationObserver.observe(this, { childList: true, subtree: true });
-        }
-        if (this.includeFragment) {
+        });
+        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.includeFragment), () => {
             this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
             this.includeFragment.addEventListener('error', this, { signal });
             this.includeFragment.addEventListener('loadend', this, { signal });
-        }
-        else {
-            const mutationObserver = new MutationObserver(() => {
-                if (this.includeFragment) {
-                    this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
-                    this.includeFragment.addEventListener('error', this, { signal });
-                    this.includeFragment.addEventListener('loadend', this, { signal });
-                    mutationObserver.disconnect();
-                }
-            });
-            mutationObserver.observe(this, { childList: true, subtree: true });
-        }
+        });
         __classPrivateFieldSet(this, _SelectPanelElement_dialogIntersectionObserver, new IntersectionObserver(entries => {
             for (const entry of entries) {
                 const elem = entry.target;
                 if (entry.isIntersecting && elem === this.dialog) {
                     this.updateAnchorPosition();
-                    if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
-                        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
-                    }
                 }
             }
         }), "f");
-        if (this.dialog) {
+        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.dialog), () => {
             if (this.getAttribute('data-open-on-load') === 'true') {
                 this.show();
             }
             __classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
-        }
-        else {
-            const mutationObserver = new MutationObserver(() => {
-                if (this.dialog) {
-                    if (this.getAttribute('data-open-on-load') === 'true') {
-                        this.show();
-                    }
-                    __classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
-                    mutationObserver.disconnect();
-                }
+            this.dialog.addEventListener('close', this, { signal });
+        });
+        if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
+            __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => this.items.length > 0, () => {
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
             });
-            mutationObserver.observe(this, { childList: true, subtree: true });
         }
     }
     disconnectedCallback() {
@@ -262,7 +233,14 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             return;
         }
         if (targetIsCloseButton && eventIsActivation) {
-            // #hide will automatically be called by dialog event triggered from `data-close-dialog-id`
+            // hide() will automatically be called by dialog event triggered from `data-close-dialog-id`
+            return;
+        }
+        if (event.target === this.dialog && event.type === 'close') {
+            this.dispatchEvent(new CustomEvent('panelClosed', {
+                detail: { panel: this },
+                bubbles: true,
+            }));
             return;
         }
         const item = event.target.closest(visibleMenuItemSelectors)?.parentElement;
@@ -315,10 +293,6 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
     }
     hide() {
         this.dialog.close();
-        this.dispatchEvent(new CustomEvent('panelClosed', {
-            detail: { panel: this },
-            bubbles: true,
-        }));
     }
     get visibleItems() {
         return Array.from(this.querySelectorAll(visibleMenuItemSelectors)).map(element => element.parentElement);
@@ -367,16 +341,6 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             return false;
         }
     }
-    hideItem(item) {
-        if (item) {
-            item.setAttribute('hidden', 'hidden');
-        }
-    }
-    showItem(item) {
-        if (item) {
-            item.removeAttribute('hidden');
-        }
-    }
     isItemChecked(item) {
         if (item) {
             return __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).getAttribute(this.ariaSelectionType) === 'true';
@@ -408,6 +372,20 @@ _SelectPanelElement_selectedItems = new WeakMap();
 _SelectPanelElement_loadingDelayTimeoutId = new WeakMap();
 _SelectPanelElement_loadingAnnouncementTimeoutId = new WeakMap();
 _SelectPanelElement_instances = new WeakSet();
+_SelectPanelElement_waitForCondition = function _SelectPanelElement_waitForCondition(condition, body) {
+    if (condition()) {
+        body();
+    }
+    else {
+        const mutationObserver = new MutationObserver(() => {
+            if (condition()) {
+                body();
+                mutationObserver.disconnect();
+            }
+        });
+        mutationObserver.observe(this, { childList: true, subtree: true });
+    }
+};
 _SelectPanelElement_softDisableItems = function _SelectPanelElement_softDisableItems() {
     const { signal } = __classPrivateFieldGet(this, _SelectPanelElement_abortController, "f");
     for (const item of this.querySelectorAll(validSelectors.join(','))) {
@@ -483,23 +461,28 @@ _SelectPanelElement_isActivation = function _SelectPanelElement_isActivation(eve
 };
 _SelectPanelElement_checkSelectedItems = function _SelectPanelElement_checkSelectedItems() {
     for (const item of this.items) {
-        const value = item.getAttribute('data-value');
+        const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+        if (!itemContent)
+            continue;
+        const value = itemContent.getAttribute('data-value');
         if (value) {
             if (__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value)) {
-                item.setAttribute(this.ariaSelectionType, 'true');
+                itemContent.setAttribute(this.ariaSelectionType, 'true');
             }
         }
     }
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
 };
 _SelectPanelElement_addSelectedItem = function _SelectPanelElement_addSelectedItem(item) {
-    const button = item.querySelector('button');
-    const value = item.getAttribute('data-value');
+    const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+    if (!itemContent)
+        return;
+    const value = itemContent.getAttribute('data-value');
     if (value) {
         __classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").set(value, {
             value,
-            label: button.querySelector('.ActionListItem-label')?.textContent?.trim(),
-            inputName: button.getAttribute('data-input-name'),
+            label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
+            inputName: itemContent.getAttribute('data-input-name'),
             element: item,
         });
     }
@@ -633,11 +616,11 @@ _SelectPanelElement_updateItemVisibility = function _SelectPanelElement_updateIt
         const filter = this.filterFn || __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_defaultFilterFn);
         for (const item of this.items) {
             if (filter(item, query)) {
-                this.showItem(item);
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_showItem).call(this, item);
                 atLeastOneResult = true;
             }
             else {
-                this.hideItem(item);
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_hideItem).call(this, item);
             }
         }
     }
@@ -647,7 +630,10 @@ _SelectPanelElement_updateItemVisibility = function _SelectPanelElement_updateIt
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_maybeAnnounce).call(this);
     for (const item of this.items) {
-        const value = item.getAttribute('data-value');
+        const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
+        if (!itemContent)
+            continue;
+        const value = itemContent.getAttribute('data-value');
         if (value && !__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value) && this.isItemChecked(item)) {
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_addSelectedItem).call(this, item);
         }
@@ -672,17 +658,17 @@ _SelectPanelElement_inErrorState = function _SelectPanelElement_inErrorState() {
     if (this.fragmentErrorElement && !this.fragmentErrorElement.hasAttribute('hidden')) {
         return true;
     }
-    return !this.errorBannerElement.hasAttribute('hidden');
+    return !this.bannerErrorElement.hasAttribute('hidden');
 };
 _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(type) {
     let errorElement = this.fragmentErrorElement;
     if (type === ErrorStateType.BODY) {
         this.fragmentErrorElement?.removeAttribute('hidden');
-        this.errorBannerElement.setAttribute('hidden', '');
+        this.bannerErrorElement.setAttribute('hidden', '');
     }
     else {
-        errorElement = this.errorBannerElement;
-        this.errorBannerElement?.removeAttribute('hidden');
+        errorElement = this.bannerErrorElement;
+        this.bannerErrorElement?.removeAttribute('hidden');
         this.fragmentErrorElement?.setAttribute('hidden', '');
     }
     // check if the errorElement is visible in the dom
@@ -693,7 +679,7 @@ _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(t
 };
 _SelectPanelElement_clearErrorState = function _SelectPanelElement_clearErrorState() {
     this.fragmentErrorElement?.setAttribute('hidden', '');
-    this.errorBannerElement.setAttribute('hidden', '');
+    this.bannerErrorElement.setAttribute('hidden', '');
 };
 _SelectPanelElement_maybeAnnounce = function _SelectPanelElement_maybeAnnounce() {
     if (this.open && this.list) {
@@ -814,6 +800,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
         }
     }
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
+    __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateTabIndices).call(this);
     this.dispatchEvent(new CustomEvent('itemActivated', {
         bubbles: true,
         detail: { item, checked },
@@ -884,6 +871,16 @@ _SelectPanelElement_updateInput = function _SelectPanelElement_updateInput() {
 _SelectPanelElement_firstItem_get = function _SelectPanelElement_firstItem_get() {
     return (this.querySelector(visibleMenuItemSelectors)?.parentElement || null);
 };
+_SelectPanelElement_hideItem = function _SelectPanelElement_hideItem(item) {
+    if (item) {
+        item.setAttribute('hidden', 'hidden');
+    }
+};
+_SelectPanelElement_showItem = function _SelectPanelElement_showItem(item) {
+    if (item) {
+        item.removeAttribute('hidden');
+    }
+};
 _SelectPanelElement_getItemContent = function _SelectPanelElement_getItemContent(item) {
     return item.querySelector('.ActionListContent');
 };
@@ -913,7 +910,7 @@ __decorate([
 ], SelectPanelElement.prototype, "fragmentErrorElement", void 0);
 __decorate([
     target
-], SelectPanelElement.prototype, "errorBannerElement", void 0);
+], SelectPanelElement.prototype, "bannerErrorElement", void 0);
 __decorate([
     target
 ], SelectPanelElement.prototype, "bodySpinner", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.28.0-rc.538292aa",
+  "version": "0.28.0",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/info_arch.json

@@ -7511,7 +7511,7 @@
   },
   {
     "fully_qualified_name": "Primer::Alpha::SelectPanel",
-    "description": "Select panels allow for selecting from a large number of options and can be thought of as a more capable\nversion of the traditional HTML `<select>` element.\n\nSelect panels:\n\n1. feature an input field at the top that allows an end user to filter the list of results.\n1. can render their items statically or dynamically by fetching results from the server.\n1. allow selecting a single item or multiple items.\n1. permit leading visuals like Octicons, avatars, and custom SVGs.\n1. can be used as form inputs in Rails forms.\n\n## Static list items\n\nThe Rails `SelectPanel` component allows items to be provided statically or loaded dynamically from the\nserver. Providing items statically is done using a fetch strategy of `:local` in combination with the\n`item` slot:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new(fetch_strategy: :local))) do |panel| %>\n  <% panel.with_show_button { \"Select item\" } %>\n  <% panel.with_item(label: \"Item 1\") %>\n  <% panel.with_item(label: \"Item 2\") %>\n<% end %>\n```\n\n## Dynamic list items\n\nList items can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of items in addition to rendering the `SelectPanel` instance. Render the instance as\nnormal, providing your desired [fetch strategy](#fetch-strategies):\n\n```erb\n<%= render(\n  Primer::Alpha::SelectPanel.new(\n    fetch_strategy: :remote,\n    src: search_items_path  # a Rails URL helper\n  )\n) %>\n```\n\nDefine a controller action to serve the list of items. The `SelectPanel` component passes any filter text in\nthe `q=` URL parameter.\n\n```ruby\nclass SearchItemsController < ApplicationController\n  def show\n    # NOTE: params[:q] may be nil since there is no filter string available\n    # when the panel is first opened\n    @results = SomeModel.search(params[:q] || \"\")\n  end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::Alpha::SelectPanel::ItemList` in the action's template, search_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n  <% @results.each do |result| %>\n    <% list.with_item(label: result.title) do |item| %>\n      <% item.with_description(result.description) %>\n    <% end %>\n  <% end %>\n<% end %>\n```\n\n### Selection consistency\n\nThe `SelectPanel` component automatically \"remembers\" which items have been selected across item fetch requests,\nmeaning the controller that renders dynamic list items does not (and should not) remember these selections or\npersist them until the user has confirmed them, either by submitting the form or otherwise indicating completion.\nThe `SelectPanel` component does not include unconfirmed selection data in requests.\n\n## Fetch strategies\n\nThe list of items can be fetched from a remote URL, or provided as a static list, configured using the\n`fetch_strategy` attribute. Fetch strategies are summarized below.\n\n1. `:remote`: a query is made to the URL in the `src` attribute every time the input field changes.\n\n2. `:eventually_local`: a query is made to the URL in the `src` attribute when the panel is first opened. The\n    results are \"remembered\" and filtered in-memory for all subsequent filter operations, i.e. when the input\n    field changes.\n\n3. `:local`: the list of items is provided statically ahead of time and filtered in-memory. No requests are made\n    to the server.\n\n## Customizing filter behavior\n\nIf the fetch strategy is `:remote`, then filtering is handled server-side. The server should render a\n`Primer::Alpha::SelectPanel::ItemList` (an alias of {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}})\nin the response containing the filtered list of items. The component achieves remote fetching via the\n[remote-input-element](https://github.com/github/remote-input-element), which sends a request to the\nserver with the filter string in the `q=` parameter. Responses must be HTML fragments, eg. have a content\ntype of `text/html+fragment`.\n\n### Local filtering\n\nIf the fetch strategy is `:local` or `:eventually_local`, filtering is performed client-side. Filter behavior can\nbe customized in JavaScript by setting the `filterFn` attribute on the instance of `SelectPanelElement`, eg:\n\n```javascript\ndocument.querySelector(\"select-panel\").filterFn = (item: HTMLElement, query: string): boolean => {\n  // return true if the item should be displayed, false otherwise\n}\n```\n\nThe element's default filter function uses the value of the `data-filter-string` attribute, falling back to the\nelement's `innerText` property. It performs a case-insensitive substring match against the filter string.\n\n### `SelectPanel`s as form inputs\n\n`SelectPanel`s can be used as form inputs. They behave very similarly to how HTML `<select>` boxes behave, and\nplay nicely with Rails' built-in form mechanisms. Pass arguments via the `form_arguments:` argument, including\nthe Rails form builder object and the name of the field:\n\n```erb\n<% form_with(model: Address.new) do |f| %>\n  <%= render(Primer::Alpha::SelectPanel.new(form_arguments: { builder: f, name: \"country\" })) do |menu| %>\n    <% countries.each do |country|\n      <% menu.with_item(label: country.name, data: { value: country.code }) %>\n    <% end %>\n  <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"country\"`). If no value is provided for an item, the value of that item is the item's label.  Here's the\ncorresponding `AddressesController` that might be written to handle the form above:\n\n```ruby\nclass AddressesController < ApplicationController\n  def create\n    puts \"You chose #{address_params[:country]} as your country\"\n  end\n\n  private\n\n  def address_params\n    params.require(:address).permit(:country)\n  end\nend\n```\n\nIf items are provided dynamically, things become a bit more complicated. The `form_for` or `form_with` method call\nhappens in the view that renders the `SelectPanel`, which means the form builder object but isn't available in the\nview that renders the list items. In such a case, it can be useful to create an instance of the form builder maually:\n\n```erb\n<% builder = ActionView::Helpers::FormBuilder.new(\n  \"address\",  # the name of the model, used to wrap input names, eg 'address[country_code]'\n  nil,        # object (eg. the Address instance, which we can omit)\n  self,       # template\n  {}          # options\n) %>\n<%= render(Primer::Alpha::SelectPanel::ItemList.new(\n  form_arguments: { builder: builder, name: \"country\" }\n)) do |list| %>\n  <% countries.each do |country| %>\n    <% menu.with_item(label: country.name, data: { value: country.code }) %>\n  <% end %>\n<% end %>\n```\n\n### JavaScript API\n\n`SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.\n\n#### Utility methods\n\n* `show()`: Manually open the panel. Under normal circumstances, a show button is used to show the panel, but this method exists to support unusual use-cases.\n* `hide()`: Manually hides (closes) the panel.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\nNOTE: Item IDs are special values provided by the user that are attached to `SelectPanel` list items as the `data-item-id`\nHTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the panel, eg:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new) do |panel| %>\n  <% panel.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\nThe same is true when rendering `ItemList`s:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n  <% list.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\n#### State methods\n\n* `showItem(item: Element)`: Shows the item, i.e. makes it visible.\n* `hideItem(item: Element)`: Hides the item, i.e. makes it invisible.\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\n|Name                 |Type                                       |Bubbles |Cancelable |\n|:--------------------|:------------------------------------------|:-------|:----------|\n|`itemActivated`      |`CustomEvent<ItemActivatedEvent>`          |Yes     |No         |\n|`beforeItemActivated`|`CustomEvent<ItemActivatedEvent>`          |Yes     |Yes        |\n|`dialog:open`        |`CustomEvent<{dialog: HTMLDialogElement}>` |No      |No         |\n|`panelClosed`        |`CustomEvent<{panel: SelectPanelElement}>` |Yes     |No         |\n\n_Item activation_\n\nThe `<select-panel>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n  \"itemActivated\",\n  (event: CustomEvent<ItemActivatedEvent>) => {\n    event.detail.item     // Element: the <li> item that was activated\n    event.detail.checked  // boolean: whether or not the result of the activation checked the item\n  }\n)\n```\n\nThe `beforeItemActivated` event fires before an item is activated. Canceling this event will prevent the item\nfrom being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n  \"beforeItemActivated\",\n  (event: CustomEvent<ItemActivatedEvent>) => {\n    event.detail.item      // Element: the <li> item that was activated\n    event.detail.checked   // boolean: whether or not the result of the activation checked the item\n    event.preventDefault() // Cancel the event to prevent activation (eg. checking/unchecking)\n  }\n)\n```",
+    "description": "Select panels allow for selecting from a large number of options and can be thought of as a more capable\nversion of the traditional HTML `<select>` element.\n\nSelect panels:\n\n1. feature an input field at the top that allows an end user to filter the list of results.\n1. can render their items statically or dynamically by fetching results from the server.\n1. allow selecting a single item or multiple items.\n1. permit leading visuals like Octicons, avatars, and custom SVGs.\n1. can be used as form inputs in Rails forms.\n\n## Static list items\n\nThe Rails `SelectPanel` component allows items to be provided statically or loaded dynamically from the\nserver. Providing items statically is done using a fetch strategy of `:local` in combination with the\n`item` slot:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new(fetch_strategy: :local))) do |panel| %>\n  <% panel.with_show_button { \"Select item\" } %>\n  <% panel.with_item(label: \"Item 1\") %>\n  <% panel.with_item(label: \"Item 2\") %>\n<% end %>\n```\n\n## Dynamic list items\n\nList items can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of items in addition to rendering the `SelectPanel` instance. Render the instance as\nnormal, providing your desired [fetch strategy](#fetch-strategies):\n\n```erb\n<%= render(\n  Primer::Alpha::SelectPanel.new(\n    fetch_strategy: :remote,\n    src: search_items_path  # perhaps a Rails URL helper\n  )\n) %>\n```\n\nDefine a controller action to serve the list of items. The `SelectPanel` component passes any filter text in\nthe `q=` URL parameter.\n\n```ruby\nclass SearchItemsController < ApplicationController\n  def show\n    # NOTE: params[:q] may be nil since there is no filter string available\n    # when the panel is first opened\n    @results = SomeModel.search(params[:q] || \"\")\n  end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::Alpha::SelectPanel::ItemList` in the action's template, search_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n  <% @results.each do |result| %>\n    <% list.with_item(label: result.title) do |item| %>\n      <% item.with_description(result.description) %>\n    <% end %>\n  <% end %>\n<% end %>\n```\n\n### Selection consistency\n\nThe `SelectPanel` component automatically \"remembers\" which items have been selected across item fetch requests,\nmeaning the controller that renders dynamic list items does not (and should not) remember these selections or\npersist them until the user has confirmed them, either by submitting the form or otherwise indicating completion.\nThe `SelectPanel` component does not include unconfirmed selection data in requests.\n\n## Fetch strategies\n\nThe list of items can be fetched from a remote URL, or provided as a static list, configured using the\n`fetch_strategy` attribute. Fetch strategies are summarized below.\n\n1. `:remote`: a query is made to the URL in the `src` attribute every time the input field changes.\n\n2. `:eventually_local`: a query is made to the URL in the `src` attribute when the panel is first opened. The\n    results are \"remembered\" and filtered in-memory for all subsequent filter operations, i.e. when the input\n    field changes.\n\n3. `:local`: the list of items is provided statically ahead of time and filtered in-memory. No requests are made\n    to the server.\n\n## Customizing filter behavior\n\nIf the fetch strategy is `:remote`, then filtering is handled server-side. The server should render a\n`Primer::Alpha::SelectPanel::ItemList` (an alias of {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}})\nin the response containing the filtered list of items. The component achieves remote fetching via the\n[remote-input-element](https://github.com/github/remote-input-element), which sends a request to the\nserver with the filter string in the `q=` parameter. Responses must be HTML fragments, eg. have a content\ntype of `text/html+fragment`.\n\n### Local filtering\n\nIf the fetch strategy is `:local` or `:eventually_local`, filtering is performed client-side. Filter behavior can\nbe customized in JavaScript by setting the `filterFn` attribute on the instance of `SelectPanelElement`, eg:\n\n```javascript\ndocument.querySelector(\"select-panel\").filterFn = (item: HTMLElement, query: string): boolean => {\n  // return true if the item should be displayed, false otherwise\n}\n```\n\nThe element's default filter function uses the value of the `data-filter-string` attribute, falling back to the\nelement's `innerText` property. It performs a case-insensitive substring match against the filter string.\n\n### `SelectPanel`s as form inputs\n\n`SelectPanel`s can be used as form inputs. They behave very similarly to how HTML `<select>` boxes behave, and\nplay nicely with Rails' built-in form mechanisms. Pass arguments via the `form_arguments:` argument, including\nthe Rails form builder object and the name of the field. Each list item must also have a value specified in\n`content_arguments: { data: { value: } }`.\n\n```erb\n<% form_with(model: Address.new) do |f| %>\n  <%= render(Primer::Alpha::SelectPanel.new(form_arguments: { builder: f, name: \"country\" })) do |menu| %>\n    <% countries.each do |country|\n      <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>\n    <% end %>\n  <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"country\"`). If no value is provided for an item, the value of that item is the item's label.  Here's the\ncorresponding `AddressesController` that might be written to handle the form above:\n\n```ruby\nclass AddressesController < ApplicationController\n  def create\n    puts \"You chose #{address_params[:country]} as your country\"\n  end\n\n  private\n\n  def address_params\n    params.require(:address).permit(:country)\n  end\nend\n```\n\nIf items are provided dynamically, things become a bit more complicated. The `form_for` or `form_with` method call\nhappens in the view that renders the `SelectPanel`, which means the form builder object but isn't available in the\nview that renders the list items. In such a case, it can be useful to create an instance of the form builder maually:\n\n```erb\n<% builder = ActionView::Helpers::FormBuilder.new(\n  \"address\",  # the name of the model, used to wrap input names, eg 'address[country_code]'\n  nil,        # object (eg. the Address instance, which we can omit)\n  self,       # template\n  {}          # options\n) %>\n<%= render(Primer::Alpha::SelectPanel::ItemList.new(\n  form_arguments: { builder: builder, name: \"country\" }\n)) do |list| %>\n  <% countries.each do |country| %>\n    <% menu.with_item(label: country.name, data: { value: country.code }) %>\n  <% end %>\n<% end %>\n```\n\n### JavaScript API\n\n`SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.\n\n#### Utility methods\n\n* `show()`: Manually open the panel. Under normal circumstances, a show button is used to show the panel, but this method exists to support unusual use-cases.\n* `hide()`: Manually hides (closes) the panel.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\nNOTE: Item IDs are special values provided by the user that are attached to `SelectPanel` list items as the `data-item-id`\nHTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the panel, eg:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new) do |panel| %>\n  <% panel.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\nThe same is true when rendering `ItemList`s:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n  <% list.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\n#### State methods\n\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\n|Name                 |Type                                       |Bubbles |Cancelable |\n|:--------------------|:------------------------------------------|:-------|:----------|\n|`itemActivated`      |`CustomEvent<ItemActivatedEvent>`          |Yes     |No         |\n|`beforeItemActivated`|`CustomEvent<ItemActivatedEvent>`          |Yes     |Yes        |\n|`dialog:open`        |`CustomEvent<{dialog: HTMLDialogElement}>` |No      |No         |\n|`panelClosed`        |`CustomEvent<{panel: SelectPanelElement}>` |Yes     |No         |\n\n_Item activation_\n\nThe `<select-panel>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n  \"itemActivated\",\n  (event: CustomEvent<ItemActivatedEvent>) => {\n    event.detail.item     // Element: the <li> item that was activated\n    event.detail.checked  // boolean: whether or not the result of the activation checked the item\n  }\n)\n```\n\nThe `beforeItemActivated` event fires before an item is activated. Canceling this event will prevent the item\nfrom being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n  \"beforeItemActivated\",\n  (event: CustomEvent<ItemActivatedEvent>) => {\n    event.detail.item      // Element: the <li> item that was activated\n    event.detail.checked   // boolean: whether or not the result of the activation checked the item\n    event.preventDefault() // Cancel the event to prevent activation (eg. checking/unchecking)\n  }\n)\n```",
     "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
@@ -8051,6 +8051,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/single_select_form",
+        "name": "single_select_form",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/multiselect_form",
+        "name": "multiselect_form",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -6134,6 +6134,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/single_select_form",
+        "name": "single_select_form",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/multiselect_form",
+        "name": "multiselect_form",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },