@primer/view-components 0.18.0 → 0.18.1-rc.096ff957

package/app/components/primer/dialog_helper.js

@@ -18,7 +18,6 @@ function dialogInvokerButtonHandler(event) {
     // If the user is clicking a valid dialog trigger
     let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
     if (dialogId) {
-        event.stopPropagation();
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
             dialog.showModal();
@@ -26,7 +25,6 @@ function dialogInvokerButtonHandler(event) {
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
-            event.stopPropagation();
         }
     }
     dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -54,6 +52,21 @@ export class DialogHelperElement extends HTMLElement {
             for (const record of records) {
                 if (record.target === this.dialog) {
                     this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
+                    // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+                    // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+                    // any popover that is currently open, regardless of whether or not another top layer element,
+                    // such as a <dialog> is nested inside.
+                    // See https://github.com/whatwg/html/issues/9998.
+                    // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
+                    // we must undo the work they did to hide ancestral popovers of the dialog:
+                    if (this.dialog.hasAttribute('open')) {
+                        let node = this.dialog;
+                        while (node) {
+                            node = node.closest('[popover]:not(:popover-open)');
+                            if (node)
+                                node.showPopover();
+                        }
+                    }
                 }
             }
         }).observe(this, { subtree: true, attributeFilter: ['open'] });
@@ -65,11 +78,8 @@ export class DialogHelperElement extends HTMLElement {
     handleEvent(event) {
         const target = event.target;
         const dialog = this.dialog;
-        if (!(dialog === null || dialog === void 0 ? void 0 : dialog.open))
-            return;
-        // if the target is inside the dialog, but is not the dialog itself, leave
-        // the dialog open
-        if ((target === null || target === void 0 ? void 0 : target.closest('dialog')) === dialog && target !== dialog)
+        // The click target _must_ be the dialog element itself, and not elements underneath or inside.
+        if (target !== dialog || !(dialog === null || dialog === void 0 ? void 0 : dialog.open))
             return;
         const rect = dialog.getBoundingClientRect();
         const clickWasInsideDialog = rect.top <= event.clientY &&

package/package.json

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

package/static/info_arch.json

@@ -3375,6 +3375,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
+        "name": "dialog_inside_overlay",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -3139,6 +3139,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
+        "name": "dialog_inside_overlay",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },