@primer/view-components 0.1.6-rc.ddfd9f3d → 0.1.6-rc.e29fc534

package/app/components/primer/alpha/action_menu/action_menu_element.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_isEnterKeydown, _ActionMenuElement_firstItem_get;
 import '@github/include-fragment-element';
 const popoverSelector = (() => {
     try {
@@ -20,7 +20,7 @@ const popoverSelector = (() => {
         return '.\\:open';
     }
 })();
-const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="none"]'];
+const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
 export class ActionMenuElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -81,17 +81,21 @@ export class ActionMenuElement extends HTMLElement {
     }
     handleEvent(event) {
         var _a, _b, _c, _d;
-        if (!((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(popoverSelector)))
+        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event)) {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) {
+                event.preventDefault();
+                (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+                return;
+            }
+        }
+        if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.matches(popoverSelector)))
             return;
         if (event.type === 'focusout' && !this.contains(event.relatedTarget)) {
-            (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
+            (_c = this.popoverElement) === null || _c === void 0 ? void 0 : _c.hidePopover();
         }
-        else if ((event instanceof KeyboardEvent &&
-            event.type === 'keydown' &&
-            !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-            event.key === 'Enter') ||
-            (event instanceof MouseEvent && event.type === 'click')) {
-            const item = (_c = event.target.closest(menuItemSelectors.join(','))) === null || _c === void 0 ? void 0 : _c.closest('li');
+        else if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isEnterKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
+            const item = (_d = event.target.closest(menuItemSelectors.join(','))) === null || _d === void 0 ? void 0 : _d.closest('li');
             if (!item)
                 return;
             const ariaChecked = item.getAttribute('aria-checked');
@@ -107,8 +111,19 @@ export class ActionMenuElement extends HTMLElement {
                 }
                 __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
             }
-            event.preventDefault();
-            (_d = this.popoverElement) === null || _d === void 0 ? void 0 : _d.hidePopover();
+            if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+                // prevent buttons from being clicked twice
+                event.preventDefault();
+            }
+            // 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
+            // instead of the anchor, which effectively prevents navigation, i.e. it
+            // appears as if hitting enter does nothing. Curiously, clicking instead
+            // works fine.
+            if (this.selectVariant !== 'multiple') {
+                setTimeout(() => { var _a; return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover(); });
+            }
         }
     }
 }
@@ -118,8 +133,7 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
     const invoker = this.invokerElement;
     if (!invoker)
         return;
-    const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',');
-    const item = this.querySelector(selector);
+    const item = this.querySelector('[aria-checked=true]');
     if (item && this.dynamicLabel) {
         __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invoker.textContent || ''), "f");
         const prefixSpan = document.createElement('span');
@@ -132,6 +146,13 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
     else {
         invoker.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
     }
+}, _ActionMenuElement_isEnterKeydown = function _ActionMenuElement_isEnterKeydown(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        event.key === 'Enter');
+}, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
+    return this.querySelector(menuItemSelectors.join(','));
 };
 if (!window.customElements.get('action-menu')) {
     window.ActionMenuElement = ActionMenuElement;

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

@@ -20,7 +20,13 @@ function focusIfNeeded(elem) {
 const overlayStack = [];
 function clickHandler(event) {
     const target = event.target;
-    const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    let button = null;
+    if (target instanceof HTMLButtonElement) {
+        button = target;
+    }
+    else {
+        button = target === null || target === void 0 ? void 0 : target.querySelector('button');
+    }
     if (!button)
         return;
     // If the user is clicking a valid dialog trigger
@@ -49,6 +55,17 @@ function clickHandler(event) {
         topLevelDialog.close(true);
     }
 }
+function keydownHandler(event) {
+    if (!(event instanceof KeyboardEvent) ||
+        event.type !== 'keydown' ||
+        event.key !== 'Enter' ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.metaKey ||
+        event.shiftKey)
+        return;
+    clickHandler(event);
+}
 function mousedownHandler(event) {
     const target = event.target;
     if (target === null || target === void 0 ? void 0 : target.closest('button'))
@@ -122,6 +139,7 @@ export class ModalDialogElement extends HTMLElement {
         if (!this.hasAttribute('role'))
             this.setAttribute('role', 'dialog');
         document.addEventListener('click', clickHandler);
+        document.addEventListener('keydown', keydownHandler);
         document.addEventListener('mousedown', mousedownHandler);
         this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
     }

package/package.json

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

package/static/constants.json

@@ -102,18 +102,12 @@
     ]
   },
   "Primer::Alpha::ActionMenu::List": {
-    "DEFAULT_ITEM_TAG": "span",
-    "ITEM_ACTION_OPTIONS": [
-      "classes",
-      "onclick",
-      "href",
-      "value"
-    ],
+    "DEFAULT_ITEM_TAG": "button",
     "ITEM_TAG_OPTIONS": [
       "a",
       "button",
       "clipboard-copy",
-      "span"
+      "button"
     ]
   },
   "Primer::Alpha::AutoComplete": {