@primer/view-components 0.16.0-rc.ef9d34b6 → 0.16.0-rc.ff0c22b0

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

@@ -90,12 +90,14 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         return results;
     }
     connectedCallback() {
+        var _a;
         const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
         this.addEventListener('keydown', this, { signal });
         this.addEventListener('click', this, { signal });
         this.addEventListener('mouseover', this, { signal });
         this.addEventListener('focusout', this, { signal });
         this.addEventListener('mousedown', this, { signal });
+        (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', 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);
@@ -109,9 +111,12 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
         __classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
     }
     handleEvent(event) {
-        var _a, _b;
+        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 (event.type === 'toggle' && event.newState === 'open') {
+            (_b = __classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get)) === null || _b === void 0 ? void 0 : _b.focus();
+        }
         if (targetIsInvoker && event.type === 'mousedown') {
             __classPrivateFieldSet(this, _ActionMenuElement_invokerBeingClicked, true, "f");
             return;
@@ -160,7 +165,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
                 event.preventDefault();
                 if (item.getAttribute('type') === 'submit') {
-                    (_b = item.closest('form')) === null || _b === void 0 ? void 0 : _b.submit();
+                    (_c = item.closest('form')) === null || _c === void 0 ? void 0 : _c.submit();
                 }
             }
             return;
@@ -288,7 +293,6 @@ _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)) {
@@ -296,10 +300,10 @@ _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleIn
     }
     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) {
+    var _a;
     this.querySelector('.ActionListWrap').style.display = 'none';
     const dialog_controller = new AbortController();
     const { signal } = dialog_controller;
@@ -316,8 +320,24 @@ _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handl
             setTimeout(() => { var _a; return (_a = this.invokerElement) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
         }
     };
-    // a modal <dialog> element will close all popovers
-    setTimeout(() => __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_show).call(this), 0);
+    // At this point, the dialog is about to open. When it opens, all other popovers (incuding
+    // this ActionMenu) will be closed. We listen to the toggle event here, which will fire when
+    // the menu is closed and manually re-open it. When the menu is re-opened, it gets added to
+    // the top of the popover stack. Only the item at the top of the stack will close when the
+    // escape key is pressed, so we add another beforetoggle listener. When the escape key is
+    // pressed, the listener is invoked, which manually closes the dialog. Closing the dialog
+    // causes the dialog's close event to fire, which
+    (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', (toggleEvent) => {
+        var _a;
+        if (toggleEvent.newState === 'closed') {
+            __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_show).call(this);
+            (_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.addEventListener('beforetoggle', (beforeToggleEvent) => {
+                if (beforeToggleEvent.newState === 'closed') {
+                    dialog.close();
+                }
+            }, { signal });
+        }
+    }, { signal, once: true });
     dialog.addEventListener('close', handleDialogClose, { signal });
     dialog.addEventListener('cancel', handleDialogClose, { signal });
 };

package/package.json

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