@primer/view-components 0.1.6-rc.9ad1d596 → 0.1.6-rc.b4e1d9f6

package/app/components/primer/alpha/action_menu/action_menu_element.d.ts

@@ -10,6 +10,7 @@ export declare class ActionMenuElement extends HTMLElement {
     set dynamicLabel(value: boolean);
     get popoverElement(): HTMLElement | null;
     get invokerElement(): HTMLElement | null;
+    get invokerLabel(): HTMLElement | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;

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);
@@ -68,6 +68,11 @@ export class ActionMenuElement extends HTMLElement {
         }
         return null;
     }
+    get invokerLabel() {
+        if (!this.invokerElement)
+            return null;
+        return this.invokerElement.querySelector('.Button-label');
+    }
     connectedCallback() {
         const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
         this.addEventListener('keydown', this, { signal });
@@ -81,17 +86,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,31 +116,48 @@ 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(); });
+            }
         }
     }
 }
 _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
     if (!this.dynamicLabel)
         return;
-    const invoker = this.invokerElement;
-    if (!invoker)
+    const invokerLabel = this.invokerLabel;
+    if (!invokerLabel)
         return;
-    const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',');
-    const item = this.querySelector(selector);
-    if (item && this.dynamicLabel) {
-        __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invoker.textContent || ''), "f");
+    const itemLabel = this.querySelector('[aria-checked=true] .ActionListItem-label');
+    if (itemLabel && this.dynamicLabel) {
+        __classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invokerLabel.textContent || ''), "f");
         const prefixSpan = document.createElement('span');
         prefixSpan.classList.add('color-fg-muted');
         const contentSpan = document.createElement('span');
         prefixSpan.textContent = this.dynamicLabelPrefix;
-        contentSpan.textContent = item.textContent || '';
-        invoker.replaceChildren(prefixSpan, contentSpan);
+        contentSpan.textContent = itemLabel.textContent || '';
+        invokerLabel.replaceChildren(prefixSpan, contentSpan);
     }
     else {
-        invoker.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
-    }
+        invokerLabel.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/app/components/primer/alpha/overlay.css

@@ -1 +1 @@
-.Overlay[popover]{border-width:0;padding:0;position:absolute;width:min(192px,100vw - 2rem)}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}
+.Overlay[popover]{border-width:0;min-width:192px;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.1.6-rc.9ad1d596",
+  "version": "0.1.6-rc.b4e1d9f6",
   "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": {

package/static/info_arch.json

@@ -695,6 +695,11 @@
         "preview_path": "/lookbook/preview/primer/alpha/action_menu/playground",
         "name": "playground"
       },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/action_menu/content_labels",
+        "preview_path": "/lookbook/preview/primer/alpha/action_menu/content_labels",
+        "name": "content_labels"
+      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/action_menu/default",
         "preview_path": "/lookbook/preview/primer/alpha/action_menu/default",

package/static/previews.json

@@ -123,6 +123,11 @@
         "preview_path": "/lookbook/preview/primer/alpha/action_menu/playground",
         "name": "playground"
       },
+      {
+        "inspect_path": "/lookbook/inspect/primer/alpha/action_menu/content_labels",
+        "preview_path": "/lookbook/preview/primer/alpha/action_menu/content_labels",
+        "name": "content_labels"
+      },
       {
         "inspect_path": "/lookbook/inspect/primer/alpha/action_menu/default",
         "preview_path": "/lookbook/preview/primer/alpha/action_menu/default",