@primer/view-components 0.28.0-rc.4d641547 → 0.28.0-rc.bfe86ece

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;
-    bannerErrorElement: HTMLElement;
+    errorBannerElement: HTMLElement;
     bodySpinner: HTMLElement;
     filterFn?: FilterFn;
     get open(): boolean;
@@ -52,6 +52,8 @@ 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_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;
+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;
 import { getAnchoredPosition } from '@primer/behaviors';
 import { controller, target } from '@github/catalyst';
 import { announceFromElement, announce } from '../aria_live';
@@ -170,35 +170,64 @@ 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);
-        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.remoteInput), () => {
+        if (this.remoteInput) {
             this.remoteInput.addEventListener('loadstart', this, { signal });
             this.remoteInput.addEventListener('loadend', this, { signal });
-        });
-        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.includeFragment), () => {
+        }
+        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) {
             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");
-        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.dialog), () => {
+        if (this.dialog) {
             if (this.getAttribute('data-open-on-load') === 'true') {
                 this.show();
             }
             __classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
-            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);
+        }
+        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();
+                }
             });
+            mutationObserver.observe(this, { childList: true, subtree: true });
         }
     }
     disconnectedCallback() {
@@ -233,14 +262,7 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             return;
         }
         if (targetIsCloseButton && eventIsActivation) {
-            // 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,
-            }));
+            // #hide will automatically be called by dialog event triggered from `data-close-dialog-id`
             return;
         }
         const item = event.target.closest(visibleMenuItemSelectors)?.parentElement;
@@ -293,6 +315,10 @@ 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);
@@ -341,6 +367,16 @@ 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';
@@ -372,18 +408,6 @@ _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(() => {
-            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(','))) {
@@ -459,28 +483,23 @@ _SelectPanelElement_isActivation = function _SelectPanelElement_isActivation(eve
 };
 _SelectPanelElement_checkSelectedItems = function _SelectPanelElement_checkSelectedItems() {
     for (const item of this.items) {
-        const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
-        if (!itemContent)
-            continue;
-        const value = itemContent.getAttribute('data-value');
+        const value = item.getAttribute('data-value');
         if (value) {
             if (__classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").has(value)) {
-                itemContent.setAttribute(this.ariaSelectionType, 'true');
+                item.setAttribute(this.ariaSelectionType, 'true');
             }
         }
     }
     __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateInput).call(this);
 };
 _SelectPanelElement_addSelectedItem = function _SelectPanelElement_addSelectedItem(item) {
-    const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
-    if (!itemContent)
-        return;
-    const value = itemContent.getAttribute('data-value');
+    const button = item.querySelector('button');
+    const value = item.getAttribute('data-value');
     if (value) {
         __classPrivateFieldGet(this, _SelectPanelElement_selectedItems, "f").set(value, {
             value,
-            label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
-            inputName: itemContent.getAttribute('data-input-name'),
+            label: button.querySelector('.ActionListItem-label')?.textContent?.trim(),
+            inputName: button.getAttribute('data-input-name'),
             element: item,
         });
     }
@@ -614,11 +633,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)) {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_showItem).call(this, item);
+                this.showItem(item);
                 atLeastOneResult = true;
             }
             else {
-                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_hideItem).call(this, item);
+                this.hideItem(item);
             }
         }
     }
@@ -628,10 +647,7 @@ _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 itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
-        if (!itemContent)
-            continue;
-        const value = itemContent.getAttribute('data-value');
+        const value = item.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);
         }
@@ -656,17 +672,17 @@ _SelectPanelElement_inErrorState = function _SelectPanelElement_inErrorState() {
     if (this.fragmentErrorElement && !this.fragmentErrorElement.hasAttribute('hidden')) {
         return true;
     }
-    return !this.bannerErrorElement.hasAttribute('hidden');
+    return !this.errorBannerElement.hasAttribute('hidden');
 };
 _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(type) {
     let errorElement = this.fragmentErrorElement;
     if (type === ErrorStateType.BODY) {
         this.fragmentErrorElement?.removeAttribute('hidden');
-        this.bannerErrorElement.setAttribute('hidden', '');
+        this.errorBannerElement.setAttribute('hidden', '');
     }
     else {
-        errorElement = this.bannerErrorElement;
-        this.bannerErrorElement?.removeAttribute('hidden');
+        errorElement = this.errorBannerElement;
+        this.errorBannerElement?.removeAttribute('hidden');
         this.fragmentErrorElement?.setAttribute('hidden', '');
     }
     // check if the errorElement is visible in the dom
@@ -677,7 +693,7 @@ _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(t
 };
 _SelectPanelElement_clearErrorState = function _SelectPanelElement_clearErrorState() {
     this.fragmentErrorElement?.setAttribute('hidden', '');
-    this.bannerErrorElement.setAttribute('hidden', '');
+    this.errorBannerElement.setAttribute('hidden', '');
 };
 _SelectPanelElement_maybeAnnounce = function _SelectPanelElement_maybeAnnounce() {
     if (this.open && this.list) {
@@ -798,7 +814,6 @@ _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 },
@@ -869,16 +884,6 @@ _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');
 };
@@ -908,7 +913,7 @@ __decorate([
 ], SelectPanelElement.prototype, "fragmentErrorElement", void 0);
 __decorate([
     target
-], SelectPanelElement.prototype, "bannerErrorElement", void 0);
+], SelectPanelElement.prototype, "errorBannerElement", 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.4d641547",
+  "version": "0.28.0-rc.bfe86ece",
   "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,124 +2352,6 @@
       }
     ]
   },
-  {
-    "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,7 +52,6 @@
   "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,22 +597,6 @@
   },
   "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": {