@primer/view-components 0.7.0 → 0.7.1-rc.2f1da828

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

@@ -63,8 +63,9 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         if (!id)
             return null;
         for (const el of this.querySelectorAll(`[aria-controls]`)) {
-            if (el.getAttribute('aria-controls') === id)
+            if (el.getAttribute('aria-controls') === id) {
                 return el;
+            }
         }
         return null;
     }
@@ -95,15 +96,18 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
         __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_updateInput).call(this);
         if (this.includeFragment) {
-            this.includeFragment.addEventListener('include-fragment-replaced', this, { signal });
+            this.includeFragment.addEventListener('include-fragment-replaced', this, {
+                signal
+            });
         }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a, _b;
-        if (event.target === this.invokerElement && __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, 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();
@@ -111,13 +115,40 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
                 return;
             }
         }
-        if (!((_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.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 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 (!((_e = this.popoverElement) === null || _e === void 0 ? void 0 : _e.matches(':popover-open')))
             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 (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isActivationKeydown).call(this, event) || (event instanceof MouseEvent && event.type === 'click')) {
+        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

package/package.json

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