@atlaskit/modal-dialog 15.0.4 → 15.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/modal-dialog
 
+## 15.1.1
+
+### Patch Changes
+
+- [`68077cab1f95d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/68077cab1f95d) -
+  Fixed styling related issues behind the new motion uplift
+- Updated dependencies
+
+## 15.1.0
+
+### Minor Changes
+
+- [`cfeab708c0a5d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cfeab708c0a5d) -
+  Add ref forwarding to the modal dialog. The ref will be placed on the outer container of the modal
+  dialog.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.0.4
 
 ### Patch Changes

package/dist/cjs/full-screen.js

@@ -1,10 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FullScreenModalDialog = FullScreenModalDialog;
+exports.FullScreenModalDialog = void 0;
 Object.defineProperty(exports, "ModalBody", {
   enumerable: true,
   get: function get() {
@@ -36,14 +37,16 @@ Object.defineProperty(exports, "ModalTransition", {
   }
 });
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _modalWrapper = _interopRequireDefault(require("./internal/components/modal-wrapper"));
 var _modalTransition = _interopRequireDefault(require("./modal-transition"));
 var _modalHeader = _interopRequireDefault(require("./modal-header"));
 var _modalTitle = _interopRequireDefault(require("./modal-title"));
 var _modalBody = _interopRequireDefault(require("./modal-body"));
 var _modalFooter = _interopRequireDefault(require("./modal-footer"));
-function FullScreenModalDialog(props) {
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var FullScreenModalDialog = exports.FullScreenModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_modalWrapper.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, props, {
@@ -82,6 +85,8 @@ function FullScreenModalDialog(props) {
      *
      * We don't want consumers to disable it.
      */,
-    isBlanketHidden: false
+    isBlanketHidden: false,
+    ref: ref
   }));
-}
+});
+FullScreenModalDialog.displayName = 'FullScreenModalDialog';

package/dist/cjs/internal/components/modal-dialog.compiled.css

@@ -24,4 +24,5 @@
 ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
-@media (min-width:30rem){._1jyk1osq{height:100%}._1jyk1wug{height:auto}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
+@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
+@media (max-width:29.9375rem){._1if81osq{height:100%}}

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

@@ -54,12 +54,13 @@ var dialogStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
   borderRadius: "_epkxfajl",
   borderRadiusT26Shape: "_epkxpb1k",
-  motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
+  motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
+  rootMotion: "_yakv1wug _4lht1wug",
   fullscreen: "_1jyk1osq"
 };
 var viewportScrollStyles = null;
 var bodyScrollStyles = null;
-var ModalDialog = function ModalDialog(props) {
+var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$width = props.width,
     width = _props$width === void 0 ? 'medium' : _props$width,
     _props$shouldScrollIn = props.shouldScrollInViewport,
@@ -131,10 +132,16 @@ var ModalDialog = function ModalDialog(props) {
     enteringAnimation: "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)",
     exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)",
     onFinish: onMotionFinish,
-    xcss: (0, _css.cx)(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
+    xcss: (0, _css.cx)(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      '--modal-dialog-width': dialogWidth(width),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      '--modal-dialog-height': dialogHeight(height)
+    }
   }, /*#__PURE__*/React.createElement("section", {
     "aria-label": label,
-    ref: motionRef,
+    ref: (0, _mergeRefs.default)([motionRef, ref]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--modal-dialog-width': dialogWidth(width),
@@ -148,7 +155,7 @@ var ModalDialog = function ModalDialog(props) {
     tabIndex: -1,
     "aria-modal": true,
     "data-ds--level": currentLevel,
-    className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
+    className: (0, _runtime.ax)([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
   }, children)) : /*#__PURE__*/React.createElement(_fadeIn.default
   /**
    * We don't want a 'slide in' for the full screen modals.
@@ -158,7 +165,7 @@ var ModalDialog = function ModalDialog(props) {
   }, function (bottomFadeInProps) {
     return /*#__PURE__*/React.createElement("section", (0, _extends2.default)({}, bottomFadeInProps, {
       "aria-label": label,
-      ref: (0, _mergeRefs.default)([bottomFadeInProps.ref, motionRef]),
+      ref: (0, _mergeRefs.default)([bottomFadeInProps.ref, motionRef, ref]),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         '--modal-dialog-width': dialogWidth(width),
@@ -176,7 +183,7 @@ var ModalDialog = function ModalDialog(props) {
       "data-ds--level": currentLevel
     }), children);
   }))));
-};
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = ModalDialog;

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

@@ -74,18 +74,7 @@ var allowlistElements = function allowlistElements(element, callback) {
   }
   return true;
 };
-
-/**
- * __Modal wrapper__
- *
- * A modal wrapper displays content that requires user interaction, in a layer above the page.
- * This component is primary container for other modal components.
- *
- * - [Examples](https://atlassian.design/components/modal-dialog/examples)
- * - [Code](https://atlassian.design/components/modal-dialog/code)
- * - [Usage](https://atlassian.design/components/modal-dialog/usage)
- */
-var InternalModalWrapper = function InternalModalWrapper(props) {
+var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var autoFocus = props.autoFocus,
     focusLockAllowlist = props.focusLockAllowlist,
     _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
@@ -359,7 +348,8 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     onOpenComplete: onOpenComplete,
     hasProvidedOnClose: Boolean(providedOnClose),
     isFullScreen: isFullScreen,
-    UNSAFE_shouldDisableMotionUplift: UNSAFE_shouldDisableMotionUplift
+    UNSAFE_shouldDisableMotionUplift: UNSAFE_shouldDisableMotionUplift,
+    ref: ref
   }, children));
   var returnFocus = true;
   var onDeactivation = _noop.default;
@@ -400,5 +390,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
       whiteList: allowListCallback
     }, /*#__PURE__*/React.createElement(_reactScrolllock.default, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(_reactScrolllock.TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
   })));
-};
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = InternalModalWrapper;

package/dist/cjs/modal-dialog.js

@@ -1,16 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = ModalWrapper;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _modalWrapper = _interopRequireDefault(require("./internal/components/modal-wrapper"));
-function ModalWrapper(props) {
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
+var ModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/_react.default.createElement(_modalWrapper.default, (0, _extends2.default)({}, props, {
-    isFullScreen: false
+    isFullScreen: false,
+    ref: ref
   }));
-}
+});
+ModalWrapper.displayName = 'ModalWrapper';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var _default = exports.default = ModalWrapper;

package/dist/es2019/full-screen.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { forwardRef } from 'react';
 import InternalModalWrapper from './internal/components/modal-wrapper';
-export function FullScreenModalDialog(props) {
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const FullScreenModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(InternalModalWrapper
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, props, {
@@ -40,9 +41,11 @@ export function FullScreenModalDialog(props) {
      *
      * We don't want consumers to disable it.
      */,
-    isBlanketHidden: false
+    isBlanketHidden: false,
+    ref: ref
   }));
-}
+});
+FullScreenModalDialog.displayName = 'FullScreenModalDialog';
 export { default as ModalTransition } from './modal-transition';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalTitle } from './modal-title';

package/dist/es2019/internal/components/modal-dialog.compiled.css

@@ -24,4 +24,5 @@
 ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
-@media (min-width:30rem){._1jyk1osq{height:100%}._1jyk1wug{height:auto}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
+@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
+@media (max-width:29.9375rem){._1if81osq{height:100%}}

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./modal-dialog.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useEffect, useMemo } from 'react';
+import { forwardRef, useEffect, useMemo } from 'react';
 import { cx } from '@atlaskit/css';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
@@ -43,12 +43,13 @@ const dialogStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
   borderRadius: "_epkxfajl",
   borderRadiusT26Shape: "_epkxpb1k",
-  motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
+  motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
+  rootMotion: "_yakv1wug _4lht1wug",
   fullscreen: "_1jyk1osq"
 };
 const viewportScrollStyles = null;
 const bodyScrollStyles = null;
-const ModalDialog = props => {
+const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     width = 'medium',
     shouldScrollInViewport = false,
@@ -114,10 +115,16 @@ const ModalDialog = props => {
     enteringAnimation: "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)",
     exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)",
     onFinish: onMotionFinish,
-    xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
+    xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      '--modal-dialog-width': dialogWidth(width),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      '--modal-dialog-height': dialogHeight(height)
+    }
   }, /*#__PURE__*/React.createElement("section", {
     "aria-label": label,
-    ref: motionRef,
+    ref: mergeRefs([motionRef, ref]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--modal-dialog-width': dialogWidth(width),
@@ -131,7 +138,7 @@ const ModalDialog = props => {
     tabIndex: -1,
     "aria-modal": true,
     "data-ds--level": currentLevel,
-    className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
+    className: ax([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
   }, children)) : /*#__PURE__*/React.createElement(FadeIn
   /**
    * We don't want a 'slide in' for the full screen modals.
@@ -140,7 +147,7 @@ const ModalDialog = props => {
     onFinish: onMotionFinish
   }, bottomFadeInProps => /*#__PURE__*/React.createElement("section", _extends({}, bottomFadeInProps, {
     "aria-label": label,
-    ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
+    ref: mergeRefs([bottomFadeInProps.ref, motionRef, ref]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--modal-dialog-width': dialogWidth(width),
@@ -157,7 +164,7 @@ const ModalDialog = props => {
     "aria-modal": true,
     "data-ds--level": currentLevel
   }), children)))));
-};
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default ModalDialog;

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./modal-wrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import ScrollLock, { TouchScrollable } from 'react-scrolllock';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
@@ -64,18 +64,7 @@ const allowlistElements = (element, callback) => {
   }
   return true;
 };
-
-/**
- * __Modal wrapper__
- *
- * A modal wrapper displays content that requires user interaction, in a layer above the page.
- * This component is primary container for other modal components.
- *
- * - [Examples](https://atlassian.design/components/modal-dialog/examples)
- * - [Code](https://atlassian.design/components/modal-dialog/code)
- * - [Usage](https://atlassian.design/components/modal-dialog/usage)
- */
-const InternalModalWrapper = props => {
+const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     autoFocus,
     focusLockAllowlist,
@@ -344,7 +333,8 @@ const InternalModalWrapper = props => {
     onOpenComplete: onOpenComplete,
     hasProvidedOnClose: Boolean(providedOnClose),
     isFullScreen: isFullScreen,
-    UNSAFE_shouldDisableMotionUplift: UNSAFE_shouldDisableMotionUplift
+    UNSAFE_shouldDisableMotionUplift: UNSAFE_shouldDisableMotionUplift,
+    ref: ref
   }, children));
   let returnFocus = true;
   let onDeactivation = noop;
@@ -383,5 +373,7 @@ const InternalModalWrapper = props => {
     onDeactivation: onDeactivation,
     whiteList: allowListCallback
   }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket)))));
-};
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default InternalModalWrapper;

package/dist/es2019/modal-dialog.js

@@ -1,9 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { forwardRef } from 'react';
 import InternalModalWrapper from './internal/components/modal-wrapper';
-export default function ModalWrapper(props) {
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
+const ModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement(InternalModalWrapper, _extends({}, props, {
-    isFullScreen: false
+    isFullScreen: false,
+    ref: ref
   }));
-}
+});
+ModalWrapper.displayName = 'ModalWrapper';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default ModalWrapper;

package/dist/esm/full-screen.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { forwardRef } from 'react';
 import InternalModalWrapper from './internal/components/modal-wrapper';
-export function FullScreenModalDialog(props) {
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var FullScreenModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(InternalModalWrapper
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, props, {
@@ -40,9 +41,11 @@ export function FullScreenModalDialog(props) {
      *
      * We don't want consumers to disable it.
      */,
-    isBlanketHidden: false
+    isBlanketHidden: false,
+    ref: ref
   }));
-}
+});
+FullScreenModalDialog.displayName = 'FullScreenModalDialog';
 export { default as ModalTransition } from './modal-transition';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalTitle } from './modal-title';

package/dist/esm/internal/components/modal-dialog.compiled.css

@@ -24,4 +24,5 @@
 ._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
 ._ra3xnqa1:focus-visible{outline-style:solid}
 @media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
-@media (min-width:30rem){._1jyk1osq{height:100%}._1jyk1wug{height:auto}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
+@media (min-width:30rem){._1jyk1jm9{height:var(--modal-dialog-height,auto)}._1jyk1osq{height:100%}._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}._yakv1wug{margin-inline-end:auto}._4lht1wug{margin-inline-start:auto}}
+@media (max-width:29.9375rem){._1if81osq{height:100%}}

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

@@ -5,7 +5,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import "./modal-dialog.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useEffect, useMemo } from 'react';
+import { forwardRef, useEffect, useMemo } from 'react';
 import { cx } from '@atlaskit/css';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
@@ -45,12 +45,13 @@ var dialogStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
   borderRadius: "_epkxfajl",
   borderRadiusT26Shape: "_epkxpb1k",
-  motion: "_4t3i1osq _c71l1kw7 _p12f1kw7 _1jyk1wug _yakv1kw7 _4lht1kw7",
+  motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
+  rootMotion: "_yakv1wug _4lht1wug",
   fullscreen: "_1jyk1osq"
 };
 var viewportScrollStyles = null;
 var bodyScrollStyles = null;
-var ModalDialog = function ModalDialog(props) {
+var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$width = props.width,
     width = _props$width === void 0 ? 'medium' : _props$width,
     _props$shouldScrollIn = props.shouldScrollInViewport,
@@ -122,10 +123,16 @@ var ModalDialog = function ModalDialog(props) {
     enteringAnimation: "var(--ds-modal-enter, 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100)",
     exitingAnimation: "var(--ds-modal-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95)",
     onFinish: onMotionFinish,
-    xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
+    xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      '--modal-dialog-width': dialogWidth(width),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      '--modal-dialog-height': dialogHeight(height)
+    }
   }, /*#__PURE__*/React.createElement("section", {
     "aria-label": label,
-    ref: motionRef,
+    ref: mergeRefs([motionRef, ref]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--modal-dialog-width': dialogWidth(width),
@@ -139,7 +146,7 @@ var ModalDialog = function ModalDialog(props) {
     tabIndex: -1,
     "aria-modal": true,
     "data-ds--level": currentLevel,
-    className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
+    className: ax([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7"])
   }, children)) : /*#__PURE__*/React.createElement(FadeIn
   /**
    * We don't want a 'slide in' for the full screen modals.
@@ -149,7 +156,7 @@ var ModalDialog = function ModalDialog(props) {
   }, function (bottomFadeInProps) {
     return /*#__PURE__*/React.createElement("section", _extends({}, bottomFadeInProps, {
       "aria-label": label,
-      ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
+      ref: mergeRefs([bottomFadeInProps.ref, motionRef, ref]),
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         '--modal-dialog-width': dialogWidth(width),
@@ -167,7 +174,7 @@ var ModalDialog = function ModalDialog(props) {
       "data-ds--level": currentLevel
     }), children);
   }))));
-};
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default ModalDialog;

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

@@ -4,7 +4,7 @@ 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, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import ScrollLock, { TouchScrollable } from 'react-scrolllock';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
@@ -65,18 +65,7 @@ var allowlistElements = function allowlistElements(element, callback) {
   }
   return true;
 };
-
-/**
- * __Modal wrapper__
- *
- * A modal wrapper displays content that requires user interaction, in a layer above the page.
- * This component is primary container for other modal components.
- *
- * - [Examples](https://atlassian.design/components/modal-dialog/examples)
- * - [Code](https://atlassian.design/components/modal-dialog/code)
- * - [Usage](https://atlassian.design/components/modal-dialog/usage)
- */
-var InternalModalWrapper = function InternalModalWrapper(props) {
+var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var autoFocus = props.autoFocus,
     focusLockAllowlist = props.focusLockAllowlist,
     _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
@@ -350,7 +339,8 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     onOpenComplete: onOpenComplete,
     hasProvidedOnClose: Boolean(providedOnClose),
     isFullScreen: isFullScreen,
-    UNSAFE_shouldDisableMotionUplift: UNSAFE_shouldDisableMotionUplift
+    UNSAFE_shouldDisableMotionUplift: UNSAFE_shouldDisableMotionUplift,
+    ref: ref
   }, children));
   var returnFocus = true;
   var onDeactivation = noop;
@@ -391,5 +381,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
       whiteList: allowListCallback
     }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket));
   })));
-};
+});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default InternalModalWrapper;

package/dist/esm/modal-dialog.js

@@ -1,9 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { forwardRef } from 'react';
 import InternalModalWrapper from './internal/components/modal-wrapper';
-export default function ModalWrapper(props) {
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
+var ModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   return /*#__PURE__*/React.createElement(InternalModalWrapper, _extends({}, props, {
-    isFullScreen: false
+    isFullScreen: false,
+    ref: ref
   }));
-}
+});
+ModalWrapper.displayName = 'ModalWrapper';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default ModalWrapper;

package/dist/types/full-screen.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ModalDialogProps } from './types';
 export interface FullScreenModalDialogProps extends Omit<ModalDialogProps, 'width' | 'height' | 'shouldScrollInViewport' | 'shouldCloseOnOverlayClick' | 'isBlanketHidden'> {
 }
-export declare function FullScreenModalDialog(props: FullScreenModalDialogProps): React.JSX.Element;
+export declare const FullScreenModalDialog: React.ForwardRefExoticComponent<React.PropsWithoutRef<FullScreenModalDialogProps> & React.RefAttributes<HTMLElement>>;
 export { default as ModalTransition } from './modal-transition';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalTitle } from './modal-title';

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

@@ -6,5 +6,5 @@ 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;
+declare const ModalDialog: React.ForwardRefExoticComponent<React.PropsWithoutRef<InternalModalDialogProps> & React.RefAttributes<HTMLElement>>;
 export default ModalDialog;

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

@@ -5,15 +5,5 @@
 import type { ModalDialogProps } from '../../types';
 import type { InternalModalWrapperProps } from '../types';
 export type { ModalDialogProps };
-/**
- * __Modal wrapper__
- *
- * A modal wrapper displays content that requires user interaction, in a layer above the page.
- * This component is primary container for other modal components.
- *
- * - [Examples](https://atlassian.design/components/modal-dialog/examples)
- * - [Code](https://atlassian.design/components/modal-dialog/code)
- * - [Usage](https://atlassian.design/components/modal-dialog/usage)
- */
-declare const InternalModalWrapper: (props: InternalModalWrapperProps) => JSX.Element;
+declare const InternalModalWrapper: React.ForwardRefExoticComponent<React.PropsWithoutRef<InternalModalWrapperProps> & React.RefAttributes<HTMLElement>>;
 export default InternalModalWrapper;

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

@@ -1,4 +1,15 @@
 import React from 'react';
 import { type ModalDialogProps } from './internal/components/modal-wrapper';
 export type { ModalDialogProps };
-export default function ModalWrapper(props: ModalDialogProps): React.JSX.Element;
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
+declare const ModalWrapper: React.ForwardRefExoticComponent<React.PropsWithoutRef<ModalDialogProps> & React.RefAttributes<HTMLElement>>;
+export default ModalWrapper;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ModalDialogProps } from './types';
 export interface FullScreenModalDialogProps extends Omit<ModalDialogProps, 'width' | 'height' | 'shouldScrollInViewport' | 'shouldCloseOnOverlayClick' | 'isBlanketHidden'> {
 }
-export declare function FullScreenModalDialog(props: FullScreenModalDialogProps): React.JSX.Element;
+export declare const FullScreenModalDialog: React.ForwardRefExoticComponent<React.PropsWithoutRef<FullScreenModalDialogProps> & React.RefAttributes<HTMLElement>>;
 export { default as ModalTransition } from './modal-transition';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalTitle } from './modal-title';

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

@@ -6,5 +6,5 @@ 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;
+declare const ModalDialog: React.ForwardRefExoticComponent<React.PropsWithoutRef<InternalModalDialogProps> & React.RefAttributes<HTMLElement>>;
 export default ModalDialog;

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

@@ -5,15 +5,5 @@
 import type { ModalDialogProps } from '../../types';
 import type { InternalModalWrapperProps } from '../types';
 export type { ModalDialogProps };
-/**
- * __Modal wrapper__
- *
- * A modal wrapper displays content that requires user interaction, in a layer above the page.
- * This component is primary container for other modal components.
- *
- * - [Examples](https://atlassian.design/components/modal-dialog/examples)
- * - [Code](https://atlassian.design/components/modal-dialog/code)
- * - [Usage](https://atlassian.design/components/modal-dialog/usage)
- */
-declare const InternalModalWrapper: (props: InternalModalWrapperProps) => JSX.Element;
+declare const InternalModalWrapper: React.ForwardRefExoticComponent<React.PropsWithoutRef<InternalModalWrapperProps> & React.RefAttributes<HTMLElement>>;
 export default InternalModalWrapper;

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

@@ -1,4 +1,15 @@
 import React from 'react';
 import { type ModalDialogProps } from './internal/components/modal-wrapper';
 export type { ModalDialogProps };
-export default function ModalWrapper(props: ModalDialogProps): React.JSX.Element;
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
+declare const ModalWrapper: React.ForwardRefExoticComponent<React.PropsWithoutRef<ModalDialogProps> & React.RefAttributes<HTMLElement>>;
+export default ModalWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "15.0.4",
+	"version": "15.1.1",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/theme": "^23.2.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/top-layer": "^0.6.0",
+		"@atlaskit/top-layer": "^0.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -71,12 +71,12 @@
 		"@atlaskit/code": "^17.5.0",
 		"@atlaskit/datetime-picker": "^17.8.0",
 		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/dropdown-menu": "^16.8.0",
+		"@atlaskit/dropdown-menu": "^16.9.0",
 		"@atlaskit/flag": "^17.11.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/popup": "^4.19.0",
+		"@atlaskit/popup": "^4.20.0",
 		"@atlaskit/radio": "^8.6.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/select": "^21.12.0",