@primer/view-components 0.10.0 → 0.10.1-rc.26c7a5a1

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

@@ -15,7 +15,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_inputName, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_isActivationKeydown, _ActionMenuElement_firstItem_get;
+var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isKeyboardActivation, _ActionMenuElement_isMouseActivation, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_activateItem, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get, _ActionMenuElement_items_get;
 import { controller, target } from '@github/catalyst';
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
@@ -27,6 +27,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         _ActionMenuElement_abortController.set(this, void 0);
         _ActionMenuElement_originalLabel.set(this, '');
         _ActionMenuElement_inputName.set(this, '');
+        _ActionMenuElement_invokerBeingClicked.set(this, false);
     }
     get selectVariant() {
         return this.getAttribute('data-select-variant');
@@ -94,8 +95,10 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         this.addEventListener('click', this, { signal });
         this.addEventListener('mouseover', this, { signal });
         this.addEventListener('focusout', this, { signal });
+        this.addEventListener('mousedown', this, { signal });
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
         if (this.includeFragment) {
             this.includeFragment.addEventListener('include-fragment-replaced', this, {
                 signal
@@ -106,98 +109,182 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a, _b, _c, _d, _e;
-        const activation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event);
-        if (event.target === this.invokerElement && activation) {
-            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;
-            }
+        var _a, _b, _c;
+        const targetIsInvoker = (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+        const eventIsActivation = __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event);
+        if (targetIsInvoker && event.type === 'mousedown') {
+            __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, true, "f");
+            return;
         }
-        // Ignore events within dialogs within menus
-        if (((_b = event.target) === null || _b === void 0 ? void 0 : _b.closest('dialog')) || ((_c = event.target) === null || _c === void 0 ? void 0 : _c.closest('modal-dialog'))) {
+        // Prevent safari bug that dismisses menu on mousedown instead of allowing
+        // the click event to propagate to the button
+        if (event.type === 'mousedown') {
+            event.preventDefault();
             return;
         }
-        // If a dialog has been rendered within the menu, we do not want to hide
-        // the entire menu, as that will also hide the Dialog. Instead we want to
-        // show the Dialog while hiding just the visible part of the menu.
-        if ((activation || event.type === 'click') && ((_d = event.target) === null || _d === void 0 ? void 0 : _d.closest('[data-show-dialog-id]'))) {
-            const dialogInvoker = event.target.closest('[data-show-dialog-id]');
-            const dialog = this.ownerDocument.getElementById((dialogInvoker === null || dialogInvoker === void 0 ? void 0 : dialogInvoker.getAttribute('data-show-dialog-id')) || '');
-            if (dialogInvoker && dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
-                this.querySelector('.ActionListWrap').style.display = 'none';
-                const dialog_controller = new AbortController();
-                const { signal } = dialog_controller;
-                const handleDialogClose = () => {
-                    var _a, _b;
-                    dialog_controller.abort();
-                    this.querySelector('.ActionListWrap').style.display = '';
-                    if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
-                        (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
-                    }
-                };
-                dialog.addEventListener('close', handleDialogClose, { signal });
-                dialog.addEventListener('cancel', handleDialogClose, { signal });
-                return;
-            }
+        if (targetIsInvoker && eventIsActivation) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleInvokerActivated).call(this, event);
+            __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, false, "f");
+            return;
         }
-        if (!((_e = this.popoverElement) === null || _e === void 0 ? void 0 : _e.matches(':popover-open')))
+        // Ignore events within dialogs within menus
+        if (((_b = event.target) === null || _b === void 0 ? void 0 : _b.closest('dialog')) || ((_c = event.target) === null || _c === void 0 ? void 0 : _c.closest('modal-dialog'))) {
             return;
-        if (event.type === 'include-fragment-replaced') {
-            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
-                __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
         }
-        else if (activation || (event instanceof MouseEvent && event.type === 'click')) {
-            // 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, _b;
-                    if ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open')) {
-                        (_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
-                    }
-                });
-            }
-            // The rest of the code below deals with single/multiple selection behavior, and should not
-            // interfere with events fired by menu items whose behavior is specified outside the library.
-            if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
-                return;
-            const item = event.target.closest(menuItemSelectors.join(','));
-            if (!item)
+        if (event.type === 'focusout') {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_invokerBeingClicked, "f"))
                 return;
-            const ariaChecked = item.getAttribute('aria-checked');
-            const checked = ariaChecked !== 'true';
-            if (this.selectVariant === 'single') {
-                // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
-                if (checked) {
-                    item.setAttribute('aria-checked', 'true');
+            // Give the browser time to focus the next element
+            requestAnimationFrame(() => {
+                if (!this.contains(document.activeElement) || document.activeElement === this.invokerElement) {
+                    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleFocusOut).call(this);
                 }
-                for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
-                    if (checkedItem !== item) {
-                        checkedItem.setAttribute('aria-checked', 'false');
-                    }
+            });
+            return;
+        }
+        const item = event.target.closest(menuItemSelectors.join(','));
+        const targetIsItem = item !== null;
+        if (targetIsItem && eventIsActivation) {
+            const dialogInvoker = item.closest('[data-show-dialog-id]');
+            if (dialogInvoker) {
+                const dialog = this.ownerDocument.getElementById(dialogInvoker.getAttribute('data-show-dialog-id') || '');
+                if (dialog && this.contains(dialogInvoker) && this.contains(dialog)) {
+                    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleDialogItemActivated).call(this, event, dialog);
+                    return;
                 }
-                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
             }
-            else {
-                // multi-select mode allows unchecking a checked item
-                item.setAttribute('aria-checked', `${checked}`);
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_activateItem).call(this, event, item);
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, event, item);
+            return;
+        }
+        if (event.type === 'include-fragment-replaced') {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleIncludeFragmentReplaced).call(this);
+        }
+    }
+};
+_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_inputName = new WeakMap(), _ActionMenuElement_invokerBeingClicked = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_softDisableItems = function _ActionMenuElement_softDisableItems() {
+    const { signal } = __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f");
+    for (const item of __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_items_get)) {
+        item.addEventListener('click', __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).bind(this), { signal });
+        item.addEventListener('keydown', __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_potentiallyDisallowActivation).bind(this), { signal });
+    }
+}, _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_potentiallyDisallowActivation(event) {
+    if (!__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivation).call(this, event))
+        return;
+    const item = event.target.closest(menuItemSelectors.join(','));
+    if (!item)
+        return;
+    if (item.getAttribute('aria-disabled')) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+    }
+}, _ActionMenuElement_isKeyboardActivation = function _ActionMenuElement_isKeyboardActivation(event) {
+    return (event instanceof KeyboardEvent &&
+        event.type === 'keydown' &&
+        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+        (event.key === 'Enter' || event.key === ' '));
+}, _ActionMenuElement_isMouseActivation = function _ActionMenuElement_isMouseActivation(event) {
+    return event instanceof MouseEvent && event.type === 'click';
+}, _ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {
+    return __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isMouseActivation).call(this, event) || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivation).call(this, event);
+}, _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
+    var _a;
+    event.preventDefault();
+    event.stopPropagation();
+    if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+    }
+    else {
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_show).call(this);
+        (_a = __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+}, _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handleDialogItemActivated(event, dialog) {
+    this.querySelector('.ActionListWrap').style.display = 'none';
+    const dialog_controller = new AbortController();
+    const { signal } = dialog_controller;
+    const handleDialogClose = () => {
+        dialog_controller.abort();
+        this.querySelector('.ActionListWrap').style.display = '';
+        if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+        }
+    };
+    dialog.addEventListener('close', handleDialogClose, { signal });
+    dialog.addEventListener('cancel', handleDialogClose, { signal });
+}, _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemActivated(event, item) {
+    // 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(() => {
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
             }
-            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
-            if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
-                // prevent buttons from being clicked twice
-                event.preventDefault();
+        });
+    }
+    // The rest of the code below deals with single/multiple selection behavior, and should not
+    // interfere with events fired by menu items whose behavior is specified outside the library.
+    if (this.selectVariant !== 'multiple' && this.selectVariant !== 'single')
+        return;
+    const ariaChecked = item.getAttribute('aria-checked');
+    const checked = ariaChecked !== 'true';
+    if (this.selectVariant === 'single') {
+        // Only check, never uncheck here. Single-select mode does not allow unchecking a checked item.
+        if (checked) {
+            item.setAttribute('aria-checked', 'true');
+        }
+        for (const checkedItem of this.querySelectorAll('[aria-checked]')) {
+            if (checkedItem !== item) {
+                checkedItem.setAttribute('aria-checked', 'false');
             }
         }
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
     }
-};
-_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_inputName = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
+    else {
+        // multi-select mode allows unchecking a checked item
+        item.setAttribute('aria-checked', `${checked}`);
+    }
+    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
+    if (event instanceof KeyboardEvent && event.target instanceof HTMLButtonElement) {
+        // prevent buttons from being clicked twice
+        event.preventDefault();
+        return;
+    }
+}, _ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event, item) {
+    const eventWillActivateByDefault = (event instanceof MouseEvent && event.type === 'click') ||
+        (event instanceof KeyboardEvent &&
+            event.type === 'keydown' &&
+            !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
+            event.key === 'Enter');
+    // if the event will result in activating the current item by default, i.e. is a
+    // mouse click or keyboard enter, bail out
+    if (eventWillActivateByDefault)
+        return;
+    // otherwise, event will not result in activation by default, so we stop it and
+    // simulate a click
+    event.stopPropagation();
+    const elem = item;
+    elem.click();
+}, _ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_handleIncludeFragmentReplaced() {
+    if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
+        __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
+    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_softDisableItems).call(this);
+}, _ActionMenuElement_handleFocusOut = function _ActionMenuElement_handleFocusOut() {
+    __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+}, _ActionMenuElement_show = function _ActionMenuElement_show() {
+    var _a;
+    (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.showPopover();
+}, _ActionMenuElement_hide = function _ActionMenuElement_hide() {
+    var _a;
+    (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover();
+}, _ActionMenuElement_isOpen = function _ActionMenuElement_isOpen() {
+    var _a;
+    return (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(':popover-open');
+}, _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
     if (!this.dynamicLabel)
         return;
     const invokerLabel = this.invokerLabel;
@@ -252,13 +339,10 @@ _ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalL
             input.remove();
         }
     }
-}, _ActionMenuElement_isActivationKeydown = function _ActionMenuElement_isActivationKeydown(event) {
-    return (event instanceof KeyboardEvent &&
-        event.type === 'keydown' &&
-        !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
-        (event.key === 'Enter' || event.key === ' '));
 }, _ActionMenuElement_firstItem_get = function _ActionMenuElement_firstItem_get() {
     return this.querySelector(menuItemSelectors.join(','));
+}, _ActionMenuElement_items_get = function _ActionMenuElement_items_get() {
+    return Array.from(this.querySelectorAll(menuItemSelectors.join(',')));
 };
 __decorate([
     target

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.10.0",
+  "version": "0.10.1-rc.26c7a5a1",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -45,7 +45,7 @@
     "@github/auto-check-element": "^5.2.0",
     "@github/auto-complete-element": "^3.3.4",
     "@github/catalyst": "^1.6.0",
-    "@github/clipboard-copy-element": "^1.1.2",
+    "@github/clipboard-copy-element": "^1.3.0",
     "@github/details-menu-element": "^1.0.12",
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.1.1",