@atlaskit/modal-dialog 15.0.4 → 15.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 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.js

@@ -59,7 +59,7 @@ var dialogStyles = {
 };
 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,
@@ -134,7 +134,7 @@ var ModalDialog = function ModalDialog(props) {
     xcss: (0, _css.cx)(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
   }, /*#__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),
@@ -158,7 +158,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 +176,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,
@@ -124,7 +113,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "15.0.4"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -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.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';
@@ -48,7 +48,7 @@ const dialogStyles = {
 };
 const viewportScrollStyles = null;
 const bodyScrollStyles = null;
-const ModalDialog = props => {
+const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     width = 'medium',
     shouldScrollInViewport = false,
@@ -117,7 +117,7 @@ const ModalDialog = props => {
     xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
   }, /*#__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),
@@ -140,7 +140,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 +157,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,
@@ -110,7 +99,7 @@ const InternalModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "15.0.4"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -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.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';
@@ -50,7 +50,7 @@ var dialogStyles = {
 };
 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,
@@ -125,7 +125,7 @@ var ModalDialog = function ModalDialog(props) {
     xcss: cx(dialogStyles.motion, isFullScreen && dialogStyles.fullscreen)
   }, /*#__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),
@@ -149,7 +149,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 +167,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,
@@ -115,7 +104,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "0.0.0-development"
+    packageVersion: "15.0.4"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -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.0",
 	"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",