@atlaskit/modal-dialog 14.18.3 → 15.0.1

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

@@ -1,32 +1,65 @@
 /* modal-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
 import "./modal-wrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import ScrollLock, { TouchScrollable } from 'react-scrolllock';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
+import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import { useId } from '@atlaskit/ds-lib/use-id';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { Motion } from '@atlaskit/motion';
+import { useExitingPersistence } from '@atlaskit/motion/exiting-persistence';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { layers } from '@atlaskit/theme/constants';
+import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
+import { createCloseEvent } from '@atlaskit/top-layer/create-close-event';
+import { Dialog } from '@atlaskit/top-layer/dialog';
+import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
+import { ModalContext, ScrollContext } from '../context';
 import useModalStack from '../hooks/use-modal-stack';
 import usePreventProgrammaticScroll from '../hooks/use-prevent-programmatic-scroll';
-import ModalDialog from './modal-dialog';
+import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
+import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
+import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
+import ModalDialog, { dialogHeight, dialogWidth as getDialogWidth } from './modal-dialog';
+var modalAnimation = dialogSlideUpAndFade();
 var fillScreenStyles = null;
+
+// Visual styles for modal content inside native <dialog>.
+// Uses cssMap (not css) to avoid triggering no-nested-styles lint rule.
+
+var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
+var topLayerStyles = {
+  content: "_1e0c1txw _4t3i1osq _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _zg7p130s",
+  borderRadius: "_epkxfajl",
+  borderRadiusT26: "_epkxpb1k"
+};
+
+// Scroll-mode styles for the content div.
+// Height overrides use ID-scoped <style> (see dialogPositionStyles) because
+// Compiled atomic classes have specificity (0,1,0) (increaseSpecificity is disabled).
+// The doubled-ID selector (#id#id > div) at (2,0,1) reliably wins.
+// Only non-height properties needing the && boost remain here.
+
+var topLayerBodyScrollStyles = null;
+var topLayerViewportScrollStyles = null;
 var allowlistElements = function allowlistElements(element, callback) {
-  // Allow focus to reach elements outside the modal:
-  // if AUI dialog is allowListed and visible
-  if (document.querySelector('.aui-blanket:not([hidden])')) {
+  // Allow focus outside modal when AUI dialog is visible
+  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- legacy FocusLock allowlist
+  if (Boolean(document.querySelector('.aui-blanket:not([hidden])'))) {
     return false;
   }
-  // allows to pass a callback function to allow elements be ignored by focus lock
+  // Optional callback to let consumers exclude elements from focus lock
   if (typeof callback === 'function') {
     return callback(element);
   }
@@ -44,8 +77,7 @@ var allowlistElements = function allowlistElements(element, callback) {
  * - [Usage](https://atlassian.design/components/modal-dialog/usage)
  */
 var InternalModalWrapper = function InternalModalWrapper(props) {
-  var _props$autoFocus = props.autoFocus,
-    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+  var autoFocus = props.autoFocus,
     focusLockAllowlist = props.focusLockAllowlist,
     _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
     shouldCloseOnEscapePress = _props$shouldCloseOnE === void 0 ? true : _props$shouldCloseOnE,
@@ -76,10 +108,8 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
   var stackIndex = stackIndexOverride || calculatedStackIndex;
   var isForeground = stackIndex === 0;
 
-  // When a user supplies a ref to focus we skip auto focus via react-focus-lock
-  // When flag is true and a ref is not supplied, autofocus is true. See https://product-fabric.atlassian.net/browse/DSP-24307
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  var autoFocusLock = typeof autoFocus === 'boolean';
+  // If no ref is provided, autofocus on first element
+  var autoFocusLock = !(_typeof(autoFocus) === 'object');
   var onCloseHandler = usePlatformLeafEventHandler({
     fn: providedOnClose || noop,
     action: 'closed',
@@ -93,20 +123,216 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     }
   }, [shouldCloseOnOverlayClick, onCloseHandler]);
 
-  // This ensures to prevent additional re-renders while nothing is passed to focusLockAllowlist explicitly.
+  // Stable callback to avoid re-renders when focusLockAllowlist is not provided.
   var allowListCallback = useCallback(function (element) {
     return allowlistElements(element, focusLockAllowlist);
   }, [focusLockAllowlist]);
-  usePreventProgrammaticScroll();
+
+  // Called outside the feature-flag branch to keep hook order stable.
+  // Legacy path: FadeIn calls onFinish. Top-layer path: called directly.
+  var _useExitingPersistenc = useExitingPersistence(),
+    isExiting = _useExitingPersistenc.isExiting,
+    onExitFinish = _useExitingPersistenc.onFinish;
+
+  // Prevent background scroll (top-layer path uses DialogScrollLock instead).
+  // Safe conditional hook: feature flags are resolved once at startup.
+  if (!fg('platform-dst-top-layer')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    usePreventProgrammaticScroll();
+  }
   useNotifyOpenLayerObserver({
     type: 'modal',
-    // Modal dialog is conditionally rendered when visible, so when this runs it is always open.
+    // Always open — modal is conditionally rendered when visible.
     isOpen: true,
-    // Passing a no-op for now, as there isn't a real use case for closing the modal dialog programmatically
-    // by the OpenLayerObserver. The only current use case is closing layers when resizing the nav layout,
-    // which cannot happen while a modal dialog is open.
+    // No-op: no current use case for programmatic close via OpenLayerObserver.
     onClose: noop
   });
+
+  /**
+   * Top-layer path (platform-dst-top-layer).
+   *
+   * Replaces Portal, FocusLock, ScrollLock, Blanket, Positioner, and z-index
+   * management with native <dialog> via @atlaskit/top-layer/dialog.
+   *
+   * Key decisions:
+   * - Animation: CSS transitions via @starting-style / allow-discrete.
+   * - Close gating: onDialogClose only forwards allowed reasons
+   *   (see notes/guides/dialog-close-flow.md).
+   * - onClose event param: undefined - consumers should use close reason.
+   * - Focus restoration: native <dialog> behavior replaces react-focus-lock's
+   *   returnFocus (see accessibility-criteria.md).
+   */
+  if (fg('platform-dst-top-layer')) {
+    // Native <dialog> always restores focus on close - no opt-out via shouldReturnFocus.
+    var defaultTestId = testId || 'modal-dialog';
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var id = useId();
+    var titleId = "modal-dialog-title-".concat(id);
+
+    // Content container ref - used for onOpenComplete/onCloseComplete callbacks.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var contentRef = useRef(null);
+
+    // Cache last content element for onCloseComplete after children unmount
+    // (with reduced motion, contentRef clears before onExitFinish fires).
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var lastContentElRef = useRef(null);
+    if (contentRef.current) {
+      lastContentElRef.current = contentRef.current;
+    }
+
+    // Native <dialog> ref - needed for ExitingPersistence to call dialog.close().
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var dialogRef = useRef(null);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var modalDialogContext = useMemo(function () {
+      return {
+        testId: defaultTestId,
+        titleId: titleId,
+        onClose: onCloseHandler,
+        hasProvidedOnClose: Boolean(providedOnClose),
+        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.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var onDialogClose = useCallback(function (_ref) {
+      var reason = _ref.reason;
+      if (reason === 'escape' && shouldCloseOnEscapePress) {
+        onCloseHandler(createCloseEvent({
+          reason: reason
+        }));
+      }
+      if (reason === 'overlay-click' && shouldCloseOnOverlayClick) {
+        onCloseHandler(createCloseEvent({
+          reason: reason
+        }));
+      }
+    }, [onCloseHandler, shouldCloseOnEscapePress, shouldCloseOnOverlayClick]);
+
+    // ExitingPersistence: isExiting → isOpen={false} → Dialog exit animation →
+    // onExitFinish → onCloseComplete + unmount.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var handleDialogExitFinish = useCallback(function () {
+      var _contentRef$current;
+      var el = (_contentRef$current = contentRef.current) !== null && _contentRef$current !== void 0 ? _contentRef$current : lastContentElRef.current;
+      if (onCloseComplete && el) {
+        onCloseComplete(el);
+      }
+      lastContentElRef.current = null;
+      onExitFinish === null || onExitFinish === void 0 || onExitFinish();
+    }, [onExitFinish, onCloseComplete]);
+
+    // Fire onOpenComplete after mount.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(function () {
+      if (onOpenComplete && contentRef.current) {
+        onOpenComplete(contentRef.current, true);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Honor `shouldReturnFocus={ref}` on unmount.
+    // Native <dialog>.close() restores focus to the trigger that opened it,
+    // but the consumer asked for focus to go to a specific element instead.
+    // Run this in an unmount cleanup so it fires after dialog.close()
+    // (which fires in the Dialog's effect cleanup).
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var shouldReturnFocusRef = useRef(shouldReturnFocus);
+    shouldReturnFocusRef.current = shouldReturnFocus;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(function () {
+      return function () {
+        var target = shouldReturnFocusRef.current;
+        if (_typeof(target) === 'object' && target.current) {
+          target.current.focus();
+        }
+      };
+    }, []);
+
+    // Focus a ref-targeted element after mount (when autoFocus is a ref).
+    // When true, native <dialog>.showModal() handles focus automatically.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useAutoFocus(_typeof(autoFocus) === 'object' ? autoFocus : undefined, _typeof(autoFocus) === 'object');
+
+    // Chrome cross-origin iframe DnD workaround (crbug.com/362301053)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(function () {
+      return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
+    }, []);
+
+    // Responsive layout via ID-scoped <style> (same pattern as Dialog's hideBackdrop).
+    // ID selector beats Compiled atomic classes without !important and supports @media.
+    var namedWidth = getDialogWidth(width !== null && width !== void 0 ? width : 'medium');
+    var dialogId = "modal-dialog-".concat(id);
+    var escapedDialogId = CSS.escape(dialogId);
+
+    // Percentage widths need special handling in the top layer.
+    // In legacy, the percentage resolved against the Positioner's max-width
+    // (100vw - 120px). In the top layer, the <dialog>'s containing block is the
+    // viewport (100vw), so a raw percentage would produce a wider modal.
+    // Transform e.g. '42%' → 'calc(42 * (100vw - 120px) / 100)' to match legacy.
+    var resolvedWidth = namedWidth.endsWith('%') ? "calc(".concat(parseFloat(namedWidth), " * (100vw - 120px) / 100)") : namedWidth;
+    var dialogStyle = isFullScreen ? {
+      width: '100vw',
+      height: '100vh',
+      margin: '0'
+    } : {
+      width: "min(".concat(resolvedWidth, ", 100vw)")
+    };
+
+    // Shift stacked background modals down by space.100 (8px) per level.
+    if (stackIndex > 0) {
+      dialogStyle['transform'] = "translateY(calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", "))");
+    }
+
+    // Mobile: viewport fill. Desktop (≥ 30rem): gutter margins, auto height.
+    // Content-div height set via #id > div to beat Compiled's atomic specificity.
+    var desktopMargin = shouldScrollInViewport ? '60px auto' : '60px auto auto';
+    var resolvedHeight = dialogHeight(height);
+    // Body-scroll: specified height or auto. Viewport-scroll: uses min-height.
+    var desktopContentHeight = shouldScrollInViewport ? 'auto' : resolvedHeight;
+    var desktopContentMinHeight = shouldScrollInViewport ? resolvedHeight : 'auto';
+    // Viewport-scroll: the legacy Positioner was a fixed 100vh container that
+    // scrolled internally, so the modal section could fill (100vh - 60px top gutter).
+    // In the top layer the <dialog> sizes to content with height:auto, so we need
+    // an explicit min-height to ensure the dialog stretches to the same visible area.
+    var desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
+    // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
+    // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
+    var dialogPositionStyles = isFullScreen ? ''
+    // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
+    : "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
+    return /*#__PURE__*/React.createElement(Dialog, {
+      ref: dialogRef,
+      id: dialogId,
+      onClose: onDialogClose,
+      onExitFinish: handleDialogExitFinish,
+      animate: isFullScreen ? false : modalAnimation,
+      isOpen: !isExiting,
+      shouldHideBackdrop: stackIndex > 0 || Boolean(isBlanketHidden),
+      label: label,
+      labelledBy: label ? undefined : titleId,
+      testId: defaultTestId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: dialogStyle
+    }, /*#__PURE__*/React.createElement(DialogScrollLock, null), dialogPositionStyles &&
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+    React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
+      ref: contentRef,
+      className: ax([topLayerStyles.content, !isFullScreen && topLayerStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && topLayerStyles.borderRadiusT26, !isFullScreen && !shouldScrollInViewport && "_bolhzwhf", !isFullScreen && shouldScrollInViewport && "_1tke1kxc _c71lglyw"])
+    }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
+      value: modalDialogContext
+    }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
+      value: shouldScrollInViewport
+    }, children))));
+  }
   var modalDialogWithBlanket = /*#__PURE__*/React.createElement(Blanket, {
     isTinted: !isBlanketHidden,
     onBlanketClicked: onBlanketClicked,

package/dist/types/internal/components/modal-dialog.d.ts

@@ -2,6 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+import type { ModalDialogProps } from '../../types';
 import type { InternalModalDialogProps } from '../types';
+export declare const dialogWidth: (input?: ModalDialogProps["width"]) => string;
+export declare const dialogHeight: (input?: ModalDialogProps["height"]) => string;
 declare const ModalDialog: (props: InternalModalDialogProps) => JSX.Element;
 export default ModalDialog;

package/dist/types/types.d.ts

@@ -19,10 +19,8 @@ export interface ModalDialogProps {
      * accessibility regressions. Pass an element `ref` to focus on a specific element.
      *
      * Default value is `true`.
-     *
-     * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-28588 Learn more about why `false` should not be used and will be removed.}
      */
-    autoFocus?: boolean | RefObject<HTMLElement | null | undefined>;
+    autoFocus?: RefObject<HTMLElement | null | undefined>;
     /**
      * Contents of the modal dialog.
      */

package/dist/types-ts4.5/internal/components/modal-dialog.d.ts

@@ -2,6 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+import type { ModalDialogProps } from '../../types';
 import type { InternalModalDialogProps } from '../types';
+export declare const dialogWidth: (input?: ModalDialogProps["width"]) => string;
+export declare const dialogHeight: (input?: ModalDialogProps["height"]) => string;
 declare const ModalDialog: (props: InternalModalDialogProps) => JSX.Element;
 export default ModalDialog;

package/dist/types-ts4.5/types.d.ts

@@ -19,10 +19,8 @@ export interface ModalDialogProps {
      * accessibility regressions. Pass an element `ref` to focus on a specific element.
      *
      * Default value is `true`.
-     *
-     * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-28588 Learn more about why `false` should not be used and will be removed.}
      */
-    autoFocus?: boolean | RefObject<HTMLElement | null | undefined>;
+    autoFocus?: RefObject<HTMLElement | null | undefined>;
     /**
      * Contents of the modal dialog.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "14.18.3",
+	"version": "15.0.1",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/icon": "^34.5.0",
 		"@atlaskit/layering": "^3.7.0",
 		"@atlaskit/motion": "^6.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -48,6 +48,7 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/theme": "^23.2.0",
 		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/top-layer": "^0.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -63,7 +64,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/avatar": "^25.14.0",
-		"@atlaskit/avatar-group": "^12.7.0",
+		"@atlaskit/avatar-group": "^12.8.0",
 		"@atlaskit/banner": "^14.1.0",
 		"@atlaskit/breadcrumbs": "^16.1.0",
 		"@atlaskit/checkbox": "^17.3.0",
@@ -75,14 +76,14 @@
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/popup": "^4.17.0",
+		"@atlaskit/popup": "^4.18.0",
 		"@atlaskit/radio": "^8.6.0",
 		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/select": "^21.10.0",
-		"@atlaskit/spotlight": "^0.13.0",
+		"@atlaskit/select": "^21.11.0",
+		"@atlaskit/spotlight": "^0.14.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tooltip": "^22.0.0",
-		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlaskit/tooltip": "^22.1.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
@@ -140,6 +141,9 @@
 		},
 		"platform-dst-motion-uplift-modal": {
 			"type": "boolean"
+		},
+		"platform-dst-top-layer": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/modal-dialog/"