@primer/view-components 0.0.117 → 0.0.118-rc.0aa1e9c0

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

@@ -21,9 +21,11 @@ const overlayStack = [];
 function clickHandler(event) {
     const target = event.target;
     const button = target === null || target === void 0 ? void 0 : target.closest('button');
+    if (!button)
+        return;
     // 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 (button && dialogId) {
+    if (dialogId) {
         event.stopPropagation();
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof ModalDialogElement) {
@@ -36,17 +38,6 @@ function clickHandler(event) {
     const topLevelDialog = overlayStack[overlayStack.length - 1];
     if (!topLevelDialog)
         return;
-    // Check if the click happened outside the boundary of the top level dialog
-    const clickOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`);
-    // Only close dialog if it's a click outside the dialog and the dialog has a
-    // button?
-    if (!button) {
-        if (clickOutsideDialog) {
-            overlayStack.pop();
-            topLevelDialog.close();
-        }
-        return;
-    }
     dialogId = button.getAttribute('data-close-dialog-id');
     if (dialogId === topLevelDialog.id) {
         overlayStack.pop();
@@ -58,6 +49,26 @@ function clickHandler(event) {
         topLevelDialog.close(true);
     }
 }
+function mousedownHandler(event) {
+    const target = event.target;
+    if (target === null || target === void 0 ? void 0 : target.closest('button'))
+        return;
+    // Find the top level dialog that is open.
+    const topLevelDialog = overlayStack[overlayStack.length - 1];
+    if (!topLevelDialog)
+        return;
+    // Check if the mousedown happened outside the boundary of the top level dialog
+    const mouseDownOutsideDialog = !target.closest(`#${topLevelDialog.getAttribute('id')}`);
+    // Only close dialog if it's a click outside the dialog and the dialog has a button?
+    if (mouseDownOutsideDialog) {
+        target.ownerDocument.addEventListener('mouseup', (upEvent) => {
+            if (upEvent.target === target) {
+                overlayStack.pop();
+                topLevelDialog.close();
+            }
+        }, { once: true });
+    }
+}
 export class ModalDialogElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -109,6 +120,7 @@ export class ModalDialogElement extends HTMLElement {
         if (!this.hasAttribute('role'))
             this.setAttribute('role', 'dialog');
         document.addEventListener('click', clickHandler);
+        document.addEventListener('mousedown', mousedownHandler);
         this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
     }
     show() {

package/package.json

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