@primer/view-components 0.28.0-rc.bfe86ece → 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.bfe86ece",
+  "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/arguments.json

@@ -2352,6 +2352,124 @@
       }
     ]
   },
+  {
+    "component": "SelectPanel",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "SelectPanel",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
+    "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The URL to fetch search results from."
+      },
+      {
+        "name": "title",
+        "type": "String",
+        "default": "`\"Menu\"`",
+        "description": "The title that appears at the top of the panel."
+      },
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The unique ID of the panel."
+      },
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:small`",
+        "description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
+      },
+      {
+        "name": "select_variant",
+        "type": "Symbol",
+        "default": "`:single`",
+        "description": "One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
+      },
+      {
+        "name": "fetch_strategy",
+        "type": "Symbol",
+        "default": "`:remote`",
+        "description": "One of `:eventually_local`, `:local`, or `:remote`."
+      },
+      {
+        "name": "no_results_label",
+        "type": "String",
+        "default": "`\"No results found\"`",
+        "description": "The label to display when no results are found."
+      },
+      {
+        "name": "preload",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
+      },
+      {
+        "name": "dynamic_label",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not to display the text of the currently selected item in the show button."
+      },
+      {
+        "name": "dynamic_label_prefix",
+        "type": "String",
+        "default": "`nil`",
+        "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
+      },
+      {
+        "name": "dynamic_aria_label_prefix",
+        "type": "String",
+        "default": "`nil`",
+        "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."
+      },
+      {
+        "name": "body_id",
+        "type": "String",
+        "default": "`nil`",
+        "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."
+      },
+      {
+        "name": "list_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Form arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
+      },
+      {
+        "name": "show_filter",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Whether or not to show the filter input."
+      },
+      {
+        "name": "open_on_load",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Open the panel when the page loads."
+      },
+      {
+        "name": "anchor_align",
+        "type": "Symbol",
+        "default": "`:start`",
+        "description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
+      },
+      {
+        "name": "anchor_side",
+        "type": "Symbol",
+        "default": "`:outside_bottom`",
+        "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`."
+      }
+    ]
+  },
   {
     "component": "SubmitButton",
     "status": "alpha",

package/static/audited_at.json

@@ -52,6 +52,7 @@
   "Primer::Alpha::SegmentedControl": "2023-02-01",
   "Primer::Alpha::SegmentedControl::Item": "2023-02-01",
   "Primer::Alpha::Select": "",
+  "Primer::Alpha::SelectPanel": "",
   "Primer::Alpha::SubmitButton": "",
   "Primer::Alpha::TabContainer": "",
   "Primer::Alpha::TabNav": "",

package/static/constants.json

@@ -597,6 +597,22 @@
   },
   "Primer::Alpha::Select": {
   },
+  "Primer::Alpha::SelectPanel": {
+    "DEFAULT_FETCH_STRATEGY": "remote",
+    "DEFAULT_PRELOAD": false,
+    "DEFAULT_SELECT_VARIANT": "single",
+    "FETCH_STRATEGIES": [
+      "remote",
+      "eventually_local",
+      "local"
+    ],
+    "ItemList": "Primer::Alpha::ActionList",
+    "SELECT_VARIANT_OPTIONS": [
+      "single",
+      "multiple",
+      "none"
+    ]
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {