@primer/view-components 0.29.0-rc.e93857ff → 0.30.0-rc.2e940d27

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

@@ -183,6 +183,15 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             for (const entry of entries) {
                 const elem = entry.target;
                 if (entry.isIntersecting && elem === this.dialog) {
+                    // Focus on the filter input when the dialog opens to work around a Safari limitation
+                    // that prevents the autofocus attribute from working as it does in other browsers
+                    if (this.filterInputTextField) {
+                        if (document.activeElement !== this.filterInputTextField) {
+                            this.filterInputTextField.focus();
+                        }
+                    }
+                    // signal that any focus hijinks are finished (thanks Safari)
+                    this.dialog.setAttribute('data-ready', 'true');
                     this.updateAnchorPosition();
                     if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
                         __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
@@ -191,11 +200,11 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             }
         }), "f");
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_waitForCondition).call(this, () => Boolean(this.dialog), () => {
+            __classPrivateFieldGet(this, _SelectPanelElement_dialogIntersectionObserver, "f").observe(this.dialog);
+            this.dialog.addEventListener('close', this, { signal });
             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, () => {
@@ -240,6 +249,8 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
             return;
         }
         if (event.target === this.dialog && event.type === 'close') {
+            // Remove data-ready so it can be set the next time the panel is opened
+            this.dialog.removeAttribute('data-ready');
             this.dispatchEvent(new CustomEvent('panelClosed', {
                 detail: { panel: this },
                 bubbles: true,
@@ -588,10 +599,34 @@ _SelectPanelElement_defaultFilterFn = function _SelectPanelElement_defaultFilter
     return text.indexOf(query.toLowerCase()) > -1;
 };
 _SelectPanelElement_handleSearchFieldEvent = function _SelectPanelElement_handleSearchFieldEvent(event) {
-    if (event.type === 'keydown' && event.key === 'ArrowDown') {
-        if (this.focusableItem) {
-            this.focusableItem.focus();
-            event.preventDefault();
+    if (event.type === 'keydown') {
+        const key = event.key;
+        if (key === 'Enter') {
+            const item = this.visibleItems[0];
+            if (item) {
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleItemActivated).call(this, item, false);
+            }
+        }
+        else if (key === 'ArrowDown') {
+            const item = (this.focusableItem || this.visibleItems[0]);
+            if (item) {
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                event.preventDefault();
+            }
+        }
+        else if (key === 'Home') {
+            const item = this.visibleItems[0];
+            if (item) {
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                event.preventDefault();
+            }
+        }
+        else if (key === 'End') {
+            if (this.visibleItems.length > 0) {
+                const item = this.visibleItems[this.visibleItems.length - 1];
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
+                event.preventDefault();
+            }
         }
     }
     if (event.type !== 'input')
@@ -751,7 +786,7 @@ _SelectPanelElement_handleDialogItemActivated = function _SelectPanelElement_han
     dialog.addEventListener('close', handleDialogClose, { signal });
     dialog.addEventListener('cancel', handleDialogClose, { signal });
 };
-_SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item) {
+_SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleItemActivated(item, shouldClose = true) {
     // Hide popover after current event loop to prevent changes in focus from
     // altering the target of the event. Not doing this specifically affects
     // <a> tags. It causes the event to be sent to the currently focused element
@@ -760,7 +795,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
     // works fine.
     if (this.selectVariant !== 'multiple') {
         setTimeout(() => {
-            if (this.open) {
+            if (this.open && shouldClose) {
                 this.hide();
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.29.0-rc.e93857ff",
+  "version": "0.30.0-rc.2e940d27",
   "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

@@ -2467,6 +2467,28 @@
         "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`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "SelectPanel::ItemList",
+    "status": "alpha",
+    "a11y_reviewed": true,
+    "short_name": "SelectPanelItemList",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)."
       }
     ]
   },

package/static/audited_at.json

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

package/static/constants.json

@@ -606,13 +606,15 @@
       "eventually_local",
       "local"
     ],
-    "ItemList": "Primer::Alpha::ActionList",
+    "ItemList": "Primer::Alpha::SelectPanel::ItemList",
     "SELECT_VARIANT_OPTIONS": [
       "single",
       "multiple",
       "none"
     ]
   },
+  "Primer::Alpha::SelectPanel::ItemList": {
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {

package/static/info_arch.json

@@ -7630,6 +7630,12 @@
         "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`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
       }
     ],
     "slots": [
@@ -8080,7 +8086,64 @@
       }
     ],
     "subcomponents": [
+      {
+        "fully_qualified_name": "Primer::Alpha::SelectPanel::ItemList",
+        "description": "The component that should be used to render the list of items in the body of a SelectPanel.",
+        "accessibility_docs": null,
+        "is_form_component": false,
+        "is_published": true,
+        "requires_js": true,
+        "component": "SelectPanel::ItemList",
+        "status": "alpha",
+        "a11y_reviewed": true,
+        "short_name": "SelectPanelItemList",
+        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb",
+        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}."
+          }
+        ],
+        "slots": [
+          {
+            "name": "heading",
+            "description": "Heading text rendered above the list of items.",
+            "parameters": [
+              {
+                "name": "component_klass",
+                "type": "Class",
+                "default": "N/A",
+                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
+              },
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "The arguments accepted by `component_klass`."
+              }
+            ]
+          },
+          {
+            "name": "items",
+            "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
+            "parameters": [
+
+            ]
+          }
+        ],
+        "methods": [
+
+        ],
+        "previews": [
 
+        ],
+        "subcomponents": [
+
+        ]
+      }
     ]
   },
   {

package/static/statuses.json

@@ -53,6 +53,7 @@
   "Primer::Alpha::SegmentedControl::Item": "alpha",
   "Primer::Alpha::Select": "alpha",
   "Primer::Alpha::SelectPanel": "alpha",
+  "Primer::Alpha::SelectPanel::ItemList": "alpha",
   "Primer::Alpha::SubmitButton": "alpha",
   "Primer::Alpha::TabContainer": "alpha",
   "Primer::Alpha::TabNav": "alpha",