@primer/view-components 0.32.0-rc.ae50af33 → 0.32.1-rc.0adf06d8

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

@@ -147,7 +147,7 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
             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)) {
+                if (dialog && this.contains(dialogInvoker)) {
                     __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleDialogItemActivated).call(this, event, dialog);
                     return;
                 }
@@ -289,20 +289,33 @@ _ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleIn
     }
 };
 _ActionMenuElement_handleDialogItemActivated = function _ActionMenuElement_handleDialogItemActivated(event, dialog) {
-    this.querySelector('.ActionListWrap').style.display = 'none';
+    if (this.contains(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);
+        if (this.contains(dialog)) {
+            this.querySelector('.ActionListWrap').style.display = '';
+            if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isOpen).call(this)) {
+                __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_hide).call(this);
+            }
         }
         const activeElement = this.ownerDocument.activeElement;
         const lostFocus = this.ownerDocument.activeElement === this.ownerDocument.body;
         const focusInClosedMenu = this.contains(activeElement);
-        if (lostFocus || focusInClosedMenu) {
-            setTimeout(() => this.invokerElement?.focus(), 0);
+        const focusInDialog = dialog.contains(activeElement);
+        if (lostFocus || focusInClosedMenu || focusInDialog) {
+            setTimeout(() => {
+                // if the activeElement has changed after a task, then it's likely
+                // that other JS has tried to shift focus. We should respect that
+                // focus shift as long as it's not back at the document.
+                const newActiveElement = this.ownerDocument.activeElement;
+                if (newActiveElement === activeElement || newActiveElement === this.ownerDocument.body) {
+                    this.invokerElement?.focus();
+                }
+            }, 0);
         }
     };
     // a modal <dialog> element will close all popovers

package/app/components/primer/alpha/overlay.css

@@ -1 +1 @@
-anchored-position[popover]{border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}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}}
+anchored-position[popover]{border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}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))}select-panel dialog::backdrop{background:none}@media (forced-colors:active){.Overlay{outline:1px solid #0000}}

package/app/components/primer/alpha/overlay.css.json

@@ -6,6 +6,7 @@
     ".Overlay[popover]:not(:popover-open)",
     "anchored-position.not-anchored::backdrop",
     "dialog::backdrop",
+    "select-panel dialog::backdrop",
     ".Overlay"
   ]
 }

package/lib/primer/forms/primer_text_field.js

@@ -19,7 +19,6 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _PrimerTextFieldElement_abortController;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
-const SCREENREADER_TEXT_CLASSNAME = 'spinner-screenreader-text';
 let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -84,12 +83,10 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     }
     showLeadingSpinner() {
         this.leadingSpinner?.removeAttribute('hidden');
-        this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.removeAttribute('hidden');
         this.leadingVisual?.setAttribute('hidden', '');
     }
     hideLeadingSpinner() {
         this.leadingSpinner?.setAttribute('hidden', '');
-        this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.setAttribute('hidden', '');
         this.leadingVisual?.removeAttribute('hidden');
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.32.0-rc.ae50af33",
+  "version": "0.32.1-rc.0adf06d8",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",