@atlaskit/modal-dialog 16.3.2 → 16.3.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/modal-dialog
 
+## 16.3.3
+
+### Patch Changes
+
+- [`ccb9237bc10d9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ccb9237bc10d9) -
+  Add the `dismissedBy` API to control Dialog dismissal consistently across browsers. Align Dialog
+  with Popover by notifying `onClose` after native dismissal, ensure both primitives unmount after
+  native dismissal, and simplify Modal close handling behind `platform-dst-top-layer`.
+- Updated dependencies
+
 ## 16.3.2
 
 ### Patch Changes

package/dist/cjs/internal/components/modal-wrapper.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _bindEventListener = require("bind-event-listener");
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactScrolllock = _interopRequireWildcard(require("react-scrolllock"));
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -91,7 +92,7 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.3.1"
+    packageVersion: "16.3.2"
   });
 }
 function getScrollMode(_ref) {
@@ -149,6 +150,17 @@ function getTopLayerSurfaceHeight(input) {
   }
   return input;
 }
+function getDialogDismissedBy(_ref2) {
+  var shouldCloseOnEscapePress = _ref2.shouldCloseOnEscapePress,
+    shouldCloseOnOverlayClick = _ref2.shouldCloseOnOverlayClick;
+  if (shouldCloseOnEscapePress && shouldCloseOnOverlayClick) {
+    return 'escape-and-outside-click';
+  }
+  if (shouldCloseOnEscapePress) {
+    return 'escape';
+  }
+  return 'none';
+}
 
 /**
  * Top-layer rendering path (platform-dst-top-layer).
@@ -158,8 +170,7 @@ function getTopLayerSurfaceHeight(input) {
  *
  * Key decisions:
  * - Animation: CSS transitions via @starting-style / allow-discrete.
- * - Close gating: onDialogClose only forwards allowed reasons
- *   (see notes/guides/dialog-close-flow.md).
+ * - Close gating: Dialog only forwards allowed reasons.
  * - onClose event param: undefined - consumers should use close reason.
  * - Focus restoration: native <dialog> behavior replaces react-focus-lock's
  *   returnFocus (see accessibility-criteria.md).
@@ -226,21 +237,38 @@ function ModalWrapperTopLayer(props) {
     };
   }, [defaultTestId, titleId, onCloseHandler, providedOnClose, isFullScreen]);
 
-  // Only forward close when the reason is allowed by props.
-  // Passes a synthetic event to satisfy the KeyboardOrMouseEvent contract.
-  var onDialogClose = (0, _react.useCallback)(function (_ref2) {
-    var reason = _ref2.reason;
-    if (reason === 'escape' && shouldCloseOnEscapePress) {
-      onCloseHandler((0, _dialog.createCloseEvent)({
-        reason: reason
-      }));
-    }
-    if (reason === 'overlay-click' && shouldCloseOnOverlayClick) {
-      onCloseHandler((0, _dialog.createCloseEvent)({
-        reason: reason
-      }));
+  // Dialog has already applied the close behavior configured by `dismissedBy`.
+  // Pass a synthetic event to satisfy the KeyboardOrMouseEvent contract.
+  var onDialogClose = (0, _react.useCallback)(function (_ref3) {
+    var reason = _ref3.reason;
+    onCloseHandler((0, _dialog.createCloseEvent)({
+      reason: reason
+    }));
+  }, [onCloseHandler]);
+  var dismissedBy = getDialogDismissedBy({
+    shouldCloseOnEscapePress: shouldCloseOnEscapePress,
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick
+  });
+  var shouldShimCloseOnOverlayClick = shouldCloseOnOverlayClick && !shouldCloseOnEscapePress;
+
+  // Required until we fully remove `shouldCloseOnEscapePress`.
+  // Dialog's `dismissedBy` options do not support outside click without Escape (because it is a bad pattern)
+  (0, _react.useEffect)(function () {
+    var dialog = dialogRef.current;
+    if (!dialog || !shouldShimCloseOnOverlayClick) {
+      return;
     }
-  }, [onCloseHandler, shouldCloseOnEscapePress, shouldCloseOnOverlayClick]);
+    return (0, _bindEventListener.bind)(dialog, {
+      type: 'click',
+      listener: function listener(event) {
+        if (event.target === event.currentTarget) {
+          onDialogClose({
+            reason: 'overlay-click'
+          });
+        }
+      }
+    });
+  }, [onDialogClose, shouldShimCloseOnOverlayClick]);
 
   // ExitingPersistence: isExiting → isOpen={false} → Dialog exit animation →
   // onExitFinish → onCloseComplete + unmount.
@@ -293,6 +321,7 @@ function ModalWrapperTopLayer(props) {
   return /*#__PURE__*/React.createElement(_dialog.Dialog, (0, _extends2.default)({
     ref: dialogRef,
     onClose: onDialogClose,
+    dismissedBy: dismissedBy,
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,

package/dist/es2019/internal/components/modal-wrapper.js

@@ -4,6 +4,7 @@ import "./modal-wrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { bind } from 'bind-event-listener';
 import FocusLock from 'react-focus-lock';
 import ScrollLock, { TouchScrollable } from 'react-scrolllock';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
@@ -81,7 +82,7 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.3.1"
+    packageVersion: "16.3.2"
   });
 }
 function getScrollMode({
@@ -140,6 +141,18 @@ function getTopLayerSurfaceHeight(input) {
   }
   return input;
 }
+function getDialogDismissedBy({
+  shouldCloseOnEscapePress,
+  shouldCloseOnOverlayClick
+}) {
+  if (shouldCloseOnEscapePress && shouldCloseOnOverlayClick) {
+    return 'escape-and-outside-click';
+  }
+  if (shouldCloseOnEscapePress) {
+    return 'escape';
+  }
+  return 'none';
+}
 
 /**
  * Top-layer rendering path (platform-dst-top-layer).
@@ -149,8 +162,7 @@ function getTopLayerSurfaceHeight(input) {
  *
  * Key decisions:
  * - Animation: CSS transitions via @starting-style / allow-discrete.
- * - Close gating: onDialogClose only forwards allowed reasons
- *   (see notes/guides/dialog-close-flow.md).
+ * - Close gating: Dialog only forwards allowed reasons.
  * - onClose event param: undefined - consumers should use close reason.
  * - Focus restoration: native <dialog> behavior replaces react-focus-lock's
  *   returnFocus (see accessibility-criteria.md).
@@ -211,22 +223,39 @@ function ModalWrapperTopLayer(props) {
     isFullScreen: isFullScreen !== null && isFullScreen !== void 0 ? isFullScreen : false
   }), [defaultTestId, titleId, onCloseHandler, providedOnClose, isFullScreen]);
 
-  // Only forward close when the reason is allowed by props.
-  // Passes a synthetic event to satisfy the KeyboardOrMouseEvent contract.
+  // Dialog has already applied the close behavior configured by `dismissedBy`.
+  // Pass a synthetic event to satisfy the KeyboardOrMouseEvent contract.
   const onDialogClose = useCallback(({
     reason
   }) => {
-    if (reason === 'escape' && shouldCloseOnEscapePress) {
-      onCloseHandler(createCloseEvent({
-        reason
-      }));
-    }
-    if (reason === 'overlay-click' && shouldCloseOnOverlayClick) {
-      onCloseHandler(createCloseEvent({
-        reason
-      }));
+    onCloseHandler(createCloseEvent({
+      reason
+    }));
+  }, [onCloseHandler]);
+  const dismissedBy = getDialogDismissedBy({
+    shouldCloseOnEscapePress,
+    shouldCloseOnOverlayClick
+  });
+  const shouldShimCloseOnOverlayClick = shouldCloseOnOverlayClick && !shouldCloseOnEscapePress;
+
+  // Required until we fully remove `shouldCloseOnEscapePress`.
+  // Dialog's `dismissedBy` options do not support outside click without Escape (because it is a bad pattern)
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog || !shouldShimCloseOnOverlayClick) {
+      return;
     }
-  }, [onCloseHandler, shouldCloseOnEscapePress, shouldCloseOnOverlayClick]);
+    return bind(dialog, {
+      type: 'click',
+      listener(event) {
+        if (event.target === event.currentTarget) {
+          onDialogClose({
+            reason: 'overlay-click'
+          });
+        }
+      }
+    });
+  }, [onDialogClose, shouldShimCloseOnOverlayClick]);
 
   // ExitingPersistence: isExiting → isOpen={false} → Dialog exit animation →
   // onExitFinish → onCloseComplete + unmount.
@@ -279,6 +308,7 @@ function ModalWrapperTopLayer(props) {
   return /*#__PURE__*/React.createElement(Dialog, _extends({
     ref: dialogRef,
     onClose: onDialogClose,
+    dismissedBy: dismissedBy,
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,

package/dist/esm/internal/components/modal-wrapper.js

@@ -5,6 +5,7 @@ import "./modal-wrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { bind } from 'bind-event-listener';
 import FocusLock from 'react-focus-lock';
 import ScrollLock, { TouchScrollable } from 'react-scrolllock';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
@@ -82,7 +83,7 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.3.1"
+    packageVersion: "16.3.2"
   });
 }
 function getScrollMode(_ref) {
@@ -140,6 +141,17 @@ function getTopLayerSurfaceHeight(input) {
   }
   return input;
 }
+function getDialogDismissedBy(_ref2) {
+  var shouldCloseOnEscapePress = _ref2.shouldCloseOnEscapePress,
+    shouldCloseOnOverlayClick = _ref2.shouldCloseOnOverlayClick;
+  if (shouldCloseOnEscapePress && shouldCloseOnOverlayClick) {
+    return 'escape-and-outside-click';
+  }
+  if (shouldCloseOnEscapePress) {
+    return 'escape';
+  }
+  return 'none';
+}
 
 /**
  * Top-layer rendering path (platform-dst-top-layer).
@@ -149,8 +161,7 @@ function getTopLayerSurfaceHeight(input) {
  *
  * Key decisions:
  * - Animation: CSS transitions via @starting-style / allow-discrete.
- * - Close gating: onDialogClose only forwards allowed reasons
- *   (see notes/guides/dialog-close-flow.md).
+ * - Close gating: Dialog only forwards allowed reasons.
  * - onClose event param: undefined - consumers should use close reason.
  * - Focus restoration: native <dialog> behavior replaces react-focus-lock's
  *   returnFocus (see accessibility-criteria.md).
@@ -217,21 +228,38 @@ function ModalWrapperTopLayer(props) {
     };
   }, [defaultTestId, titleId, onCloseHandler, providedOnClose, isFullScreen]);
 
-  // Only forward close when the reason is allowed by props.
-  // Passes a synthetic event to satisfy the KeyboardOrMouseEvent contract.
-  var onDialogClose = useCallback(function (_ref2) {
-    var reason = _ref2.reason;
-    if (reason === 'escape' && shouldCloseOnEscapePress) {
-      onCloseHandler(createCloseEvent({
-        reason: reason
-      }));
-    }
-    if (reason === 'overlay-click' && shouldCloseOnOverlayClick) {
-      onCloseHandler(createCloseEvent({
-        reason: reason
-      }));
+  // Dialog has already applied the close behavior configured by `dismissedBy`.
+  // Pass a synthetic event to satisfy the KeyboardOrMouseEvent contract.
+  var onDialogClose = useCallback(function (_ref3) {
+    var reason = _ref3.reason;
+    onCloseHandler(createCloseEvent({
+      reason: reason
+    }));
+  }, [onCloseHandler]);
+  var dismissedBy = getDialogDismissedBy({
+    shouldCloseOnEscapePress: shouldCloseOnEscapePress,
+    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick
+  });
+  var shouldShimCloseOnOverlayClick = shouldCloseOnOverlayClick && !shouldCloseOnEscapePress;
+
+  // Required until we fully remove `shouldCloseOnEscapePress`.
+  // Dialog's `dismissedBy` options do not support outside click without Escape (because it is a bad pattern)
+  useEffect(function () {
+    var dialog = dialogRef.current;
+    if (!dialog || !shouldShimCloseOnOverlayClick) {
+      return;
     }
-  }, [onCloseHandler, shouldCloseOnEscapePress, shouldCloseOnOverlayClick]);
+    return bind(dialog, {
+      type: 'click',
+      listener: function listener(event) {
+        if (event.target === event.currentTarget) {
+          onDialogClose({
+            reason: 'overlay-click'
+          });
+        }
+      }
+    });
+  }, [onDialogClose, shouldShimCloseOnOverlayClick]);
 
   // ExitingPersistence: isExiting → isOpen={false} → Dialog exit animation →
   // onExitFinish → onCloseComplete + unmount.
@@ -284,6 +312,7 @@ function ModalWrapperTopLayer(props) {
   return /*#__PURE__*/React.createElement(Dialog, _extends({
     ref: dialogRef,
     onClose: onDialogClose,
+    dismissedBy: dismissedBy,
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "16.3.2",
+	"version": "16.3.3",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/theme": "^28.0.0",
 		"@atlaskit/tokens": "^16.7.0",
-		"@atlaskit/top-layer": "^4.0.0",
+		"@atlaskit/top-layer": "^4.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",