@primer/view-components 0.31.0-rc.dab49dc3 → 0.31.0-rc.e1721641

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

@@ -6,6 +6,7 @@ type SelectedItem = {
     label: string | null | undefined;
     value: string | null | undefined;
     inputName: string | null | undefined;
+    element: SelectPanelItem;
 };
 export type SelectPanelItem = HTMLLIElement;
 export type FilterFn = (item: SelectPanelItem, query: string) => boolean;

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

@@ -502,6 +502,7 @@ _SelectPanelElement_addSelectedItem = function _SelectPanelElement_addSelectedIt
             value,
             label: itemContent.querySelector('.ActionListItem-label')?.textContent?.trim(),
             inputName: itemContent.getAttribute('data-input-name'),
+            element: item,
         });
     }
 };
@@ -611,9 +612,7 @@ _SelectPanelElement_handleSearchFieldEvent = function _SelectPanelElement_handle
         if (key === 'Enter') {
             const item = this.visibleItems[0];
             if (item) {
-                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
-                if (itemContent)
-                    itemContent.click();
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_handleItemActivated).call(this, item, false);
             }
         }
         else if (key === 'ArrowDown') {
@@ -626,18 +625,14 @@ _SelectPanelElement_handleSearchFieldEvent = function _SelectPanelElement_handle
         else if (key === 'Home') {
             const item = this.visibleItems[0];
             if (item) {
-                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
-                if (itemContent)
-                    itemContent.focus();
+                __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];
-                const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
-                if (itemContent)
-                    itemContent.focus();
+                __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item).focus();
                 event.preventDefault();
             }
         }
@@ -805,7 +800,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
@@ -814,7 +809,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
     // works fine.
     if (this.selectVariant !== 'multiple') {
         setTimeout(() => {
-            if (this.open) {
+            if (this.open && shouldClose) {
                 this.hide();
             }
         });
@@ -833,8 +828,7 @@ _SelectPanelElement_handleItemActivated = function _SelectPanelElement_handleIte
         return;
     const itemContent = __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, item);
     if (this.selectVariant === 'single') {
-        const value = this.selectedItems[0]?.value;
-        const element = this.visibleItems.find(el => __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, el)?.getAttribute('data-value') === value);
+        const element = this.selectedItems[0]?.element;
         if (element) {
             __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_getItemContent).call(this, element)?.setAttribute(this.ariaSelectionType, 'false');
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.31.0-rc.dab49dc3",
+  "version": "0.31.0-rc.e1721641",
   "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

@@ -8105,19 +8105,6 @@
             "color-contrast"
           ]
         }
-      },
-      {
-        "preview_path": "primer/alpha/select_panel/list_of_links",
-        "name": "list_of_links",
-        "snapshot": "interactive",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -6160,19 +6160,6 @@
             "color-contrast"
           ]
         }
-      },
-      {
-        "preview_path": "primer/alpha/select_panel/list_of_links",
-        "name": "list_of_links",
-        "snapshot": "interactive",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
       }
     ]
   },