@primer/view-components 0.16.0-rc.02d1611c → 0.16.0-rc.29acc449

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/app/components/primer/alpha/overlay.css

@@ -1 +1 @@
-anchored-position[popover]{border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{border-width:0;display:flex;padding:0}anchored-position:not(.Overlay){background:none}.Overlay[popover]:not(:popover-open){display:none}anchored-position.not-anchored::backdrop,dialog::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}
+anchored-position[popover]{border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}.Overlay{border-width:0;display:flex;padding:0}anchored-position:not(.Overlay){background:none}.Overlay[popover]:not(:popover-open){display:none}anchored-position.not-anchored::backdrop,dialog::backdrop{background-color:var(--overlay-backdrop-bgColor,var(--color-neutral-muted))}@media (forced-colors:active){.Overlay{outline:1px solid #0000}}

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

@@ -202,6 +202,16 @@ class ToolTipElement extends HTMLElement {
         margin-top: -6px;
         border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
+
+      @media (forced-colors: active) {
+        :host {
+          outline: solid 1px transparent;
+        }
+
+        :host:before {
+          display: none;
+        }
+      }
     `;
     }
     get showReason() {
@@ -288,7 +298,10 @@ class ToolTipElement extends HTMLElement {
         const showing = isPopoverOpen(this);
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        const shouldShow = event.type === 'mouseenter' || event.type === 'focus';
+        const shouldShow = event.type === 'mouseenter' ||
+            // Only show tooltip on focus if running in headless browser (for tests) or if focus ring
+            // is visible (i.e. if user is using keyboard navigation)
+            (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')));
         const isMouseLeaveFromButton = event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
             event.relatedTarget !== this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.16.0-rc.02d1611c",
+  "version": "0.16.0-rc.29acc449",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -73,7 +73,7 @@
     "chokidar-cli": "^3.0.0",
     "cssnano": "^6.0.1",
     "eslint": "^8.23.1",
-    "eslint-plugin-custom-elements": "^0.0.6",
+    "eslint-plugin-custom-elements": "^0.0.8",
     "eslint-plugin-github": "^4.9.2",
     "eslint-plugin-prettier": "^5.0.0",
     "markdownlint-cli2": "^0.11.0",