@atlaskit/modal-dialog 14.18.2 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/modal-dialog
 
+## 15.0.0
+
+### Major Changes
+
+- [`babe23b40c154`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/babe23b40c154) -
+  Removes the `boolean` type for the `autoFocus` prop in the modal dialog. This improves the
+  accessibility of the modal dialog by ensuring focus always moves to the first interactive element,
+  as per the WCAG accessibility guidelines for modal dialogs.
+
+  You can run the included codemod to remove all boolean instances of `autoFocus`.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.18.3
+
+### Patch Changes
+
+- [`5a711f8d38b68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5a711f8d38b68) -
+  Changed the motion uplift feature gate from `platform-dst-motion-uplift` to
+  `platform-dst-motion-uplift-modal`
+- Updated dependencies
+
 ## 14.18.2
 
 ### Patch Changes

package/codemods/{not-yet-boolean-autofocus-removal.tsx → 15.0.0-boolean-autofocus-removal.tsx}

@@ -1,9 +1,9 @@
 import type { API, FileInfo, Options } from 'jscodeshift';
 
-import { removeAutoFocus } from './migrations/remove-props';
+import { removeBooleanAutoFocus } from './migrations/remove-props';
 import { createTransformer } from './utils/create-transformer';
 
 const transformer: (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
-	createTransformer('@atlaskit/modal-dialog', [removeAutoFocus]);
+	createTransformer('@atlaskit/modal-dialog', [removeBooleanAutoFocus]);
 
 export default transformer;

package/codemods/__tests__/{not-yet-boolean-autofocus-removal.tsx → next-boolean-autofocus-removal.tsx}

@@ -1,6 +1,6 @@
 jest.autoMockOff();
 
-import transformer from '../not-yet-boolean-autofocus-removal';
+import transformer from '../15.0.0-boolean-autofocus-removal';
 
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 

package/codemods/migrations/remove-props.tsx

@@ -1,6 +1,6 @@
 import { createRemoveFuncIfBooleanFor } from '../utils/create-remove-func-if-boolean-for';
 
-export const removeAutoFocus: (
+export const removeBooleanAutoFocus: (
 	j: import('jscodeshift/src/core').JSCodeshift,
 	source: import('jscodeshift/src/Collection').Collection<Node>,
 ) => void = createRemoveFuncIfBooleanFor('@atlaskit/modal-dialog', 'ModalDialog', 'autoFocus');

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

@@ -28,6 +28,7 @@ var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion
 var _element = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element");
 var _external = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external");
 var _textSelection = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection");
+var _scrollContext = require("../scroll-context");
 var _width = require("../width");
 var _positioner = _interopRequireDefault(require("./positioner"));
 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" != _typeof3(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); }
@@ -64,7 +65,7 @@ var ModalDialog = function ModalDialog(props) {
     _props$shouldScrollIn = props.shouldScrollInViewport,
     shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
     shouldCloseOnEscapePress = props.shouldCloseOnEscapePress,
-    providedAutoFocus = props.autoFocus,
+    autoFocus = props.autoFocus,
     stackIndex = props.stackIndex,
     onClose = props.onClose,
     onCloseComplete = props.onCloseComplete,
@@ -81,10 +82,6 @@ var ModalDialog = function ModalDialog(props) {
   var id = (0, _useId.useId)();
   var titleId = "modal-dialog-title-".concat(id);
   var defaultTestId = testId || 'modal-dialog';
-  // https://product-fabric.atlassian.net/browse/DSP-24307
-  // If flag and falsy, use true instead.
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  var autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   (0, _react.useEffect)(function () {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain
@@ -96,7 +93,7 @@ var ModalDialog = function ModalDialog(props) {
 
     return (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)());
   }, []);
-  (0, _useAutoFocus.default)((0, _typeof2.default)(autoFocus) === 'object' ? autoFocus : undefined,
+  (0, _useAutoFocus.default)(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
   (0, _typeof2.default)(autoFocus) === 'object');
   var _useOnMotionFinish = (0, _useOnMotionFinish3.default)({
@@ -128,9 +125,9 @@ var ModalDialog = function ModalDialog(props) {
     isFullScreen: isFullScreen
   }, /*#__PURE__*/React.createElement(_context.ModalContext.Provider, {
     value: modalDialogContext
-  }, /*#__PURE__*/React.createElement(_context.ScrollContext.Provider, {
+  }, /*#__PURE__*/React.createElement(_scrollContext.ScrollContext.Provider, {
     value: shouldScrollInViewport
-  }, !UNSAFE_shouldDisableMotionUplift && (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.Motion, {
+  }, !UNSAFE_shouldDisableMotionUplift && (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-modal') ? /*#__PURE__*/React.createElement(_motion.Motion, {
     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,

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

@@ -2,7 +2,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
 var _reactScrolllock = _interopRequireWildcard(require("react-scrolllock"));
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -27,7 +28,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _useModalStack = _interopRequireDefault(require("../hooks/use-modal-stack"));
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("../hooks/use-prevent-programmatic-scroll"));
 var _modalDialog = _interopRequireDefault(require("./modal-dialog"));
-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); }
+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" != _typeof3(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); }
 var fillScreenStyles = null;
 var allowlistElements = function allowlistElements(element, callback) {
   // Allow focus to reach elements outside the modal:
@@ -53,8 +54,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,
@@ -85,16 +85,14 @@ 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 = !((0, _typeof2.default)(autoFocus) === 'object');
   var onCloseHandler = (0, _analyticsNext.usePlatformLeafEventHandler)({
     fn: providedOnClose || _noop.default,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.18.1"
+    packageVersion: "14.18.3"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -152,7 +150,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(_portal.default, {
     zIndex: _constants.layers.modal()
-  }, !UNSAFE_shouldDisableMotionUplift && (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(_motion.Motion, {
+  }, !UNSAFE_shouldDisableMotionUplift && (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-modal') ? /*#__PURE__*/React.createElement(_motion.Motion, {
     enteringAnimation: "var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)",
     exitingAnimation: "var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/cjs/internal/context.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScrollContext = exports.ModalContext = void 0;
+exports.ModalContext = void 0;
+Object.defineProperty(exports, "ScrollContext", {
+  enumerable: true,
+  get: function get() {
+    return _scrollContext.ScrollContext;
+  }
+});
 var _react = require("react");
+var _scrollContext = require("./scroll-context");
 /* eslint-disable @repo/internal/react/require-jsdoc */
-var ModalContext = exports.ModalContext = /*#__PURE__*/(0, _react.createContext)(null);
-var ScrollContext = exports.ScrollContext = /*#__PURE__*/(0, _react.createContext)(null);
+var ModalContext = exports.ModalContext = /*#__PURE__*/(0, _react.createContext)(null);

package/dist/cjs/internal/hooks/use-scroll.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useScroll;
 var _react = require("react");
-var _context = require("../context");
+var _scrollContext = require("../scroll-context");
 /**
  * This returns whether or not scrolling is allowed based on the existing
  * scrolling context.
  */
 function useScroll() {
-  var shouldScrollInViewport = (0, _react.useContext)(_context.ScrollContext);
+  var shouldScrollInViewport = (0, _react.useContext)(_scrollContext.ScrollContext);
   if (shouldScrollInViewport == null) {
     throw Error('@atlaskit/modal-dialog: Scroll context unavailable – this component needs to be a child of ModalDialog.');
   }

package/dist/cjs/internal/scroll-context.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollContext = void 0;
+var _react = require("react");
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Scroll context__
+ *
+ * A scroll context {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+var ScrollContext = exports.ScrollContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -13,11 +13,12 @@ import { Motion } from '@atlaskit/motion';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { ModalContext, ScrollContext } from '../context';
+import { ModalContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
 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 { ScrollContext } from '../scroll-context';
 import { width } from '../width';
 import Positioner from './positioner';
 const dialogWidth = input => {
@@ -52,7 +53,7 @@ const ModalDialog = props => {
     width = 'medium',
     shouldScrollInViewport = false,
     shouldCloseOnEscapePress,
-    autoFocus: providedAutoFocus,
+    autoFocus,
     stackIndex,
     onClose,
     onCloseComplete,
@@ -68,10 +69,6 @@ const ModalDialog = props => {
   const id = useId();
   const titleId = `modal-dialog-title-${id}`;
   const defaultTestId = testId || 'modal-dialog';
-  // https://product-fabric.atlassian.net/browse/DSP-24307
-  // If flag and falsy, use true instead.
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  const autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   useEffect(() => {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain
@@ -83,7 +80,7 @@ const ModalDialog = props => {
 
     return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
   }, []);
-  useAutoFocus(typeof autoFocus === 'object' ? autoFocus : undefined,
+  useAutoFocus(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
   typeof autoFocus === 'object');
   const [motionRef, onMotionFinish] = useOnMotionFinish({
@@ -113,7 +110,7 @@ const ModalDialog = props => {
     value: modalDialogContext
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: shouldScrollInViewport
-  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
+  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift-modal') ? /*#__PURE__*/React.createElement(Motion, {
     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,

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

@@ -45,7 +45,7 @@ const allowlistElements = (element, callback) => {
  */
 const InternalModalWrapper = props => {
   const {
-    autoFocus = true,
+    autoFocus,
     focusLockAllowlist,
     shouldCloseOnEscapePress = true,
     shouldCloseOnOverlayClick = true,
@@ -71,16 +71,14 @@ const InternalModalWrapper = props => {
   const stackIndex = stackIndexOverride || calculatedStackIndex;
   const 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
-  const autoFocusLock = typeof autoFocus === 'boolean';
+  // If no ref is provided, autofocus on first element
+  const autoFocusLock = !(typeof autoFocus === 'object');
   const onCloseHandler = usePlatformLeafEventHandler({
     fn: providedOnClose || noop,
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.18.1"
+    packageVersion: "14.18.3"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -136,7 +134,7 @@ const InternalModalWrapper = props => {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(Portal, {
     zIndex: layers.modal()
-  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
+  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift-modal') ? /*#__PURE__*/React.createElement(Motion, {
     enteringAnimation: "var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)",
     exitingAnimation: "var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/es2019/internal/context.js

@@ -1,4 +1,4 @@
 import { createContext } from 'react';
 /* eslint-disable @repo/internal/react/require-jsdoc */
 export const ModalContext = /*#__PURE__*/createContext(null);
-export const ScrollContext = /*#__PURE__*/createContext(null);
+export { ScrollContext } from './scroll-context';

package/dist/es2019/internal/hooks/use-scroll.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ScrollContext } from '../context';
+import { ScrollContext } from '../scroll-context';
 
 /**
  * This returns whether or not scrolling is allowed based on the existing

package/dist/es2019/internal/scroll-context.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Scroll context__
+ *
+ * A scroll context {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export const ScrollContext = /*#__PURE__*/createContext(null);

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

@@ -15,11 +15,12 @@ import { Motion } from '@atlaskit/motion';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { ModalContext, ScrollContext } from '../context';
+import { ModalContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
 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 { ScrollContext } from '../scroll-context';
 import { width } from '../width';
 import Positioner from './positioner';
 var dialogWidth = function dialogWidth(input) {
@@ -55,7 +56,7 @@ var ModalDialog = function ModalDialog(props) {
     _props$shouldScrollIn = props.shouldScrollInViewport,
     shouldScrollInViewport = _props$shouldScrollIn === void 0 ? false : _props$shouldScrollIn,
     shouldCloseOnEscapePress = props.shouldCloseOnEscapePress,
-    providedAutoFocus = props.autoFocus,
+    autoFocus = props.autoFocus,
     stackIndex = props.stackIndex,
     onClose = props.onClose,
     onCloseComplete = props.onCloseComplete,
@@ -72,10 +73,6 @@ var ModalDialog = function ModalDialog(props) {
   var id = useId();
   var titleId = "modal-dialog-title-".concat(id);
   var defaultTestId = testId || 'modal-dialog';
-  // https://product-fabric.atlassian.net/browse/DSP-24307
-  // If flag and falsy, use true instead.
-  // When we remove boolean `autoFocus`, we won't have to worry about this
-  var autoFocus = !providedAutoFocus ? true : providedAutoFocus;
   useEffect(function () {
     // Modal dialogs can appear on top of iframe elements that are on another domain.
     // There is a Chrome bug where drag and drop in an element on top of a cross domain
@@ -87,7 +84,7 @@ var ModalDialog = function ModalDialog(props) {
 
     return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
   }, []);
-  useAutoFocus(_typeof(autoFocus) === 'object' ? autoFocus : undefined,
+  useAutoFocus(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
   _typeof(autoFocus) === 'object');
   var _useOnMotionFinish = useOnMotionFinish({
@@ -121,7 +118,7 @@ var ModalDialog = function ModalDialog(props) {
     value: modalDialogContext
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: shouldScrollInViewport
-  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
+  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift-modal') ? /*#__PURE__*/React.createElement(Motion, {
     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,

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

@@ -1,5 +1,6 @@
 /* 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";
@@ -44,8 +45,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,16 +76,14 @@ 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',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.18.1"
+    packageVersion: "14.18.3"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -143,7 +141,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(Portal, {
     zIndex: layers.modal()
-  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift') ? /*#__PURE__*/React.createElement(Motion, {
+  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift-modal') ? /*#__PURE__*/React.createElement(Motion, {
     enteringAnimation: "var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)",
     exitingAnimation: "var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/esm/internal/context.js

@@ -1,4 +1,4 @@
 import { createContext } from 'react';
 /* eslint-disable @repo/internal/react/require-jsdoc */
 export var ModalContext = /*#__PURE__*/createContext(null);
-export var ScrollContext = /*#__PURE__*/createContext(null);
+export { ScrollContext } from './scroll-context';

package/dist/esm/internal/hooks/use-scroll.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ScrollContext } from '../context';
+import { ScrollContext } from '../scroll-context';
 
 /**
  * This returns whether or not scrolling is allowed based on the existing

package/dist/esm/internal/scroll-context.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Scroll context__
+ *
+ * A scroll context {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export var ScrollContext = /*#__PURE__*/createContext(null);

package/dist/types/internal/context.d.ts

@@ -27,4 +27,4 @@ export type ModalAttributes = {
     isFullScreen: boolean;
 };
 export declare const ModalContext: Context<ModalAttributes | null>;
-export declare const ScrollContext: Context<boolean | null>;
+export { ScrollContext } from './scroll-context';

package/dist/types/internal/scroll-context.d.ts

@@ -0,0 +1,11 @@
+import { type Context } from 'react';
+/**
+ * __Scroll context__
+ *
+ * A scroll context {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export declare const ScrollContext: Context<boolean | null>;

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/context.d.ts

@@ -27,4 +27,4 @@ export type ModalAttributes = {
     isFullScreen: boolean;
 };
 export declare const ModalContext: Context<ModalAttributes | null>;
-export declare const ScrollContext: Context<boolean | null>;
+export { ScrollContext } from './scroll-context';

package/dist/types-ts4.5/internal/scroll-context.d.ts

@@ -0,0 +1,11 @@
+import { type Context } from 'react';
+/**
+ * __Scroll context__
+ *
+ * A scroll context {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export declare const ScrollContext: Context<boolean | null>;

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.2",
+	"version": "15.0.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,14 +39,14 @@
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.3.0",
+		"@atlaskit/icon": "^34.4.0",
 		"@atlaskit/layering": "^3.7.0",
-		"@atlaskit/motion": "^6.0.0",
+		"@atlaskit/motion": "^6.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/portal": "^5.4.0",
+		"@atlaskit/portal": "^5.5.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/theme": "^23.1.0",
+		"@atlaskit/theme": "^23.2.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -62,26 +62,26 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.13.0",
+		"@atlaskit/avatar": "^25.14.0",
 		"@atlaskit/avatar-group": "^12.7.0",
-		"@atlaskit/banner": "^14.0.0",
+		"@atlaskit/banner": "^14.1.0",
 		"@atlaskit/breadcrumbs": "^16.1.0",
 		"@atlaskit/checkbox": "^17.3.0",
-		"@atlaskit/code": "^17.4.0",
-		"@atlaskit/datetime-picker": "^17.7.0",
+		"@atlaskit/code": "^17.5.0",
+		"@atlaskit/datetime-picker": "^17.8.0",
 		"@atlaskit/docs": "^11.8.0",
 		"@atlaskit/dropdown-menu": "^16.8.0",
-		"@atlaskit/flag": "^17.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.16.0",
-		"@atlaskit/radio": "^8.5.0",
+		"@atlaskit/popup": "^4.17.0",
+		"@atlaskit/radio": "^8.6.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/select": "^21.10.0",
-		"@atlaskit/spotlight": "^0.12.0",
+		"@atlaskit/spotlight": "^0.14.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tooltip": "^21.2.0",
+		"@atlaskit/tooltip": "^22.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
@@ -138,7 +138,7 @@
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},
-		"platform-dst-motion-uplift": {
+		"platform-dst-motion-uplift-modal": {
 			"type": "boolean"
 		}
 	},

package/offerings.json

@@ -1,37 +0,0 @@
-[
-	{
-		"name": "Modal",
-		"package": "@atlaskit/modal-dialog",
-		"import": {
-			"name": "Modal",
-			"package": "@atlaskit/modal-dialog",
-			"type": "default"
-		},
-		"keywords": ["modal", "dialog", "popup", "overlay", "focused", "interaction", "layer"],
-		"categories": ["overlay"],
-		"shortDescription": "A modal dialog component for important content.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Ensure modal content is announced by screen readers",
-			"Provide appropriate focus management",
-			"Use clear, descriptive modal titles",
-			"Ensure keyboard navigation and escape key support",
-			"Maintain focus within modal when open"
-		],
-		"usageGuidelines": [
-			"Use for important content that requires user attention",
-			"Keep modal content focused on a single task",
-			"Provide clear action buttons",
-			"Use appropriate modal sizes for content",
-			"Consider mobile responsiveness"
-		],
-		"contentGuidelines": [
-			"Use clear, descriptive titles",
-			"Keep content focused on a single task or message",
-			"Include clear action buttons",
-			"Use sentence case for all text",
-			"Provide clear next steps"
-		],
-		"examples": ["./examples/constellation/modal-default.tsx"]
-	}
-]