@primer/view-components 0.21.1-rc.1c4aed32 → 0.21.1-rc.1f8abf9d

package/app/components/primer/dialog_helper.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _DialogHelperElement_abortController;
+var _DialogHelperElement_instances, _DialogHelperElement_abortController, _DialogHelperElement_handleDialogOpenAttribute;
 function dialogInvokerButtonHandler(event) {
     const target = event.target;
     const button = target?.closest('button');
@@ -73,6 +73,7 @@ function dialogInvokerButtonHandler(event) {
 export class DialogHelperElement extends HTMLElement {
     constructor() {
         super(...arguments);
+        _DialogHelperElement_instances.add(this);
         _DialogHelperElement_abortController.set(this, null);
     }
     get dialog() {
@@ -86,10 +87,11 @@ export class DialogHelperElement extends HTMLElement {
         new MutationObserver(records => {
             for (const record of records) {
                 if (record.target === this.dialog) {
-                    this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
+                    __classPrivateFieldGet(this, _DialogHelperElement_instances, "m", _DialogHelperElement_handleDialogOpenAttribute).call(this);
                 }
             }
         }).observe(this, { subtree: true, attributeFilter: ['open'] });
+        __classPrivateFieldGet(this, _DialogHelperElement_instances, "m", _DialogHelperElement_handleDialogOpenAttribute).call(this);
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")?.abort();
@@ -110,7 +112,18 @@ export class DialogHelperElement extends HTMLElement {
         }
     }
 }
-_DialogHelperElement_abortController = new WeakMap();
+_DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_instances = new WeakSet(), _DialogHelperElement_handleDialogOpenAttribute = function _DialogHelperElement_handleDialogOpenAttribute() {
+    if (!this.dialog)
+        return;
+    this.ownerDocument.body.classList.toggle('has-modal', this.dialog.matches(':modal'));
+    // We don't want to show the Dialog component as non-modal
+    if (this.dialog.matches('[open]:not(:modal)')) {
+        // eslint-disable-next-line no-restricted-syntax
+        this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), { once: true });
+        this.dialog.close();
+        this.dialog.showModal();
+    }
+};
 if (!window.customElements.get('dialog-helper')) {
     window.DialogHelperElement = DialogHelperElement;
     window.customElements.define('dialog-helper', DialogHelperElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.21.1-rc.1c4aed32",
+  "version": "0.21.1-rc.1f8abf9d",
   "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

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

package/static/previews.json

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