@atlaskit/modal-dialog 16.6.0 → 16.6.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/modal-dialog
 
+## 16.6.2
+
+### Patch Changes
+
+- [`610d564dbc5dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/610d564dbc5dd) -
+  Behind `platform-dst-top-layer`, harden the Popover and Dialog animation lifecycle state machine
+  and completion callbacks, restore focus before controlled Popover closure removes native
+  listeners, and preserve Modal Dialog open-complete callbacks across reopen cycles.
+- Updated dependencies
+
+## 16.6.1
+
+### Patch Changes
+
+- [`d20edab2fda3a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d20edab2fda3a) -
+  Cleaned up new shape theme styles, making new border and radius values the default.
+
 ## 16.6.0
 
 ### Minor Changes

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

@@ -23,5 +23,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){._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 (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}._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

@@ -1,4 +1,4 @@
-/* modal-dialog.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-dialog.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -37,8 +37,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
 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",
+  borderRadius: "_epkxpb1k",
   motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
   rootMotion: "_yakv1wug _4lht1wug",
   fullscreen: "_1jyk1osq"
@@ -69,15 +68,17 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var titleId = "modal-dialog-title-".concat(id);
   var defaultTestId = testId || 'modal-dialog';
   (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
-    // iframe is not working. We are applying the workaround for this bug in modal so
-    // that consumers of our modal don't have to worry about this bug and are free to
-    // create whatever drag and drop experience they like inside a modal
-    //
-    // Chrome bug: https://issues.chromium.org/issues/362301053
+    return (
+      // 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
+      // iframe is not working. We are applying the workaround for this bug in modal so
+      // that consumers of our modal don't have to worry about this bug and are free to
+      // create whatever drag and drop experience they like inside a modal
+      //
+      // Chrome bug: https://issues.chromium.org/issues/362301053
 
-    return (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)());
+      (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)())
+    );
   }, []);
   (0, _useAutoFocus.default)(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
@@ -140,7 +141,7 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: -1,
     "aria-modal": true,
     "data-ds--level": currentLevel,
-    className: (0, _runtime.ax)([dialogStyles.root, dialogStyles.rootMotion, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _fg.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, 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 +159,7 @@ var ModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         '--modal-dialog-height': (0, _dialogHeight.dialogHeight)(height)
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _fg.fg)('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
+      className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
       role: "dialog",
       "aria-labelledby": label ? undefined : titleId,
       "data-testid": defaultTestId,

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

@@ -1,4 +1,4 @@
-/* modal-wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -93,7 +93,7 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.5.4"
+    packageVersion: "16.6.1"
   });
 }
 function getScrollMode(_ref) {
@@ -282,14 +282,11 @@ function ModalWrapperTopLayer(props) {
     lastContentElRef.current = null;
     onExitFinish === null || onExitFinish === void 0 || onExitFinish();
   }, [onExitFinish, onCloseComplete]);
-
-  // Fire onOpenComplete after mount.
-  (0, _react.useEffect)(function () {
+  var handleDialogEnterFinish = (0, _react.useCallback)(function () {
     if (onOpenComplete && contentRef.current) {
       onOpenComplete(contentRef.current, true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onOpenComplete]);
 
   // Honor `shouldReturnFocus={ref}` on unmount.
   // Native <dialog>.close() restores focus to the trigger that opened it,
@@ -326,6 +323,7 @@ function ModalWrapperTopLayer(props) {
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,
+    onEnterFinish: handleDialogEnterFinish,
     shouldHideBackdrop: isBlanketHidden
     // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
     // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.

package/dist/cjs/internal/components/positioner.js

@@ -1,4 +1,4 @@
-/* positioner.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* positioner.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/internal/components/scroll-container.js

@@ -1,4 +1,4 @@
-/* scroll-container.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* scroll-container.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/modal-body.js

@@ -1,4 +1,4 @@
-/* modal-body.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-body.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/modal-footer.js

@@ -1,4 +1,4 @@
-/* modal-footer.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-footer.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/modal-header.js

@@ -1,4 +1,4 @@
-/* modal-header.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-header.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/modal-title.js

@@ -1,4 +1,4 @@
-/* modal-title.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-title.tsx generated by @compiled/babel-plugin v3.0.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -23,5 +23,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){._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 (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}._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

@@ -1,4 +1,4 @@
-/* modal-dialog.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-dialog.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./modal-dialog.compiled.css";
 import * as React from 'react';
@@ -26,8 +26,7 @@ import Positioner from './positioner';
 const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
 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",
+  borderRadius: "_epkxpb1k",
   motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
   rootMotion: "_yakv1wug _4lht1wug",
   fullscreen: "_1jyk1osq"
@@ -55,17 +54,16 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
   const id = useId();
   const titleId = `modal-dialog-title-${id}`;
   const defaultTestId = testId || 'modal-dialog';
-  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
-    // iframe is not working. We are applying the workaround for this bug in modal so
-    // that consumers of our modal don't have to worry about this bug and are free to
-    // create whatever drag and drop experience they like inside a modal
-    //
-    // Chrome bug: https://issues.chromium.org/issues/362301053
+  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
+  // iframe is not working. We are applying the workaround for this bug in modal so
+  // that consumers of our modal don't have to worry about this bug and are free to
+  // create whatever drag and drop experience they like inside a modal
+  //
+  // Chrome bug: https://issues.chromium.org/issues/362301053
 
-    return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
-  }, []);
+  combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal()), []);
   useAutoFocus(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
   typeof autoFocus === 'object');
@@ -123,7 +121,7 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
     tabIndex: -1,
     "aria-modal": true,
     "data-ds--level": currentLevel,
-    className: ax([dialogStyles.root, dialogStyles.rootMotion, !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, 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 +138,7 @@ const ModalDialog = /*#__PURE__*/forwardRef((props, ref) => {
       '--modal-dialog-height': dialogHeight(height)
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
+    className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
     role: "dialog",
     "aria-labelledby": label ? undefined : titleId,
     "data-testid": defaultTestId,

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

@@ -1,4 +1,4 @@
-/* modal-wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./modal-wrapper.compiled.css";
 import * as React from 'react';
@@ -83,7 +83,7 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.5.4"
+    packageVersion: "16.6.1"
   });
 }
 function getScrollMode({
@@ -269,14 +269,11 @@ function ModalWrapperTopLayer(props) {
     lastContentElRef.current = null;
     onExitFinish === null || onExitFinish === void 0 ? void 0 : onExitFinish();
   }, [onExitFinish, onCloseComplete]);
-
-  // Fire onOpenComplete after mount.
-  useEffect(() => {
+  const handleDialogEnterFinish = useCallback(() => {
     if (onOpenComplete && contentRef.current) {
       onOpenComplete(contentRef.current, true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onOpenComplete]);
 
   // Honor `shouldReturnFocus={ref}` on unmount.
   // Native <dialog>.close() restores focus to the trigger that opened it,
@@ -313,6 +310,7 @@ function ModalWrapperTopLayer(props) {
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,
+    onEnterFinish: handleDialogEnterFinish,
     shouldHideBackdrop: isBlanketHidden
     // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
     // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.

package/dist/es2019/internal/components/positioner.js

@@ -1,4 +1,4 @@
-/* positioner.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* positioner.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./positioner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/internal/components/scroll-container.js

@@ -1,4 +1,4 @@
-/* scroll-container.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* scroll-container.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./scroll-container.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useEffect, useRef, useState } from 'react';

package/dist/es2019/modal-body.js

@@ -1,4 +1,4 @@
-/* modal-body.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-body.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./modal-body.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/es2019/modal-footer.js

@@ -1,4 +1,4 @@
-/* modal-footer.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-footer.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./modal-footer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/modal-header.js

@@ -1,4 +1,4 @@
-/* modal-header.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-header.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./modal-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/es2019/modal-title.js

@@ -1,4 +1,4 @@
-/* modal-title.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-title.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./modal-title.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -23,5 +23,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){._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 (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}._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

@@ -1,4 +1,4 @@
-/* modal-dialog.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-dialog.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
@@ -28,8 +28,7 @@ import Positioner from './positioner';
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
 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",
+  borderRadius: "_epkxpb1k",
   motion: "_c71l1kw7 _p12f1kw7 _1e0c1txw _1jyk1jm9 _1if81osq",
   rootMotion: "_yakv1wug _4lht1wug",
   fullscreen: "_1jyk1osq"
@@ -60,15 +59,17 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
   var titleId = "modal-dialog-title-".concat(id);
   var defaultTestId = testId || 'modal-dialog';
   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
-    // iframe is not working. We are applying the workaround for this bug in modal so
-    // that consumers of our modal don't have to worry about this bug and are free to
-    // create whatever drag and drop experience they like inside a modal
-    //
-    // Chrome bug: https://issues.chromium.org/issues/362301053
+    return (
+      // 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
+      // iframe is not working. We are applying the workaround for this bug in modal so
+      // that consumers of our modal don't have to worry about this bug and are free to
+      // create whatever drag and drop experience they like inside a modal
+      //
+      // Chrome bug: https://issues.chromium.org/issues/362301053
 
-    return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
+      combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal())
+    );
   }, []);
   useAutoFocus(autoFocus,
   // When a user supplies  a ref to focus we enable this hook
@@ -131,7 +132,7 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: -1,
     "aria-modal": true,
     "data-ds--level": currentLevel,
-    className: ax([dialogStyles.root, dialogStyles.rootMotion, !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, 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 +150,7 @@ var ModalDialog = /*#__PURE__*/forwardRef(function (props, ref) {
         '--modal-dialog-height': dialogHeight(height)
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
+      className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
       role: "dialog",
       "aria-labelledby": label ? undefined : titleId,
       "data-testid": defaultTestId,

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

@@ -1,4 +1,4 @@
-/* modal-wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import "./modal-wrapper.compiled.css";
@@ -84,7 +84,7 @@ function useModalCloseHandler(providedOnClose) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.5.4"
+    packageVersion: "16.6.1"
   });
 }
 function getScrollMode(_ref) {
@@ -273,14 +273,11 @@ function ModalWrapperTopLayer(props) {
     lastContentElRef.current = null;
     onExitFinish === null || onExitFinish === void 0 || onExitFinish();
   }, [onExitFinish, onCloseComplete]);
-
-  // Fire onOpenComplete after mount.
-  useEffect(function () {
+  var handleDialogEnterFinish = useCallback(function () {
     if (onOpenComplete && contentRef.current) {
       onOpenComplete(contentRef.current, true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [onOpenComplete]);
 
   // Honor `shouldReturnFocus={ref}` on unmount.
   // Native <dialog>.close() restores focus to the trigger that opened it,
@@ -317,6 +314,7 @@ function ModalWrapperTopLayer(props) {
     onExitFinish: handleDialogExitFinish,
     shouldAnimate: !isFullScreen,
     isOpen: !isExiting,
+    onEnterFinish: handleDialogEnterFinish,
     shouldHideBackdrop: isBlanketHidden
     // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
     // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.

package/dist/esm/internal/components/positioner.js

@@ -1,4 +1,4 @@
-/* positioner.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* positioner.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./positioner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/internal/components/scroll-container.js

@@ -1,4 +1,4 @@
-/* scroll-container.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* scroll-container.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./scroll-container.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/modal-body.js

@@ -1,4 +1,4 @@
-/* modal-body.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-body.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./modal-body.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/esm/modal-footer.js

@@ -1,4 +1,4 @@
-/* modal-footer.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-footer.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./modal-footer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/modal-header.js

@@ -1,4 +1,4 @@
-/* modal-header.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-header.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./modal-header.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/esm/modal-title.js

@@ -1,4 +1,4 @@
-/* modal-title.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* modal-title.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./modal-title.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "16.6.0",
+	"version": "16.6.2",
 	"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": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tokens": "^16.10.0",
+		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/top-layer": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -64,13 +64,13 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^27.3.0",
+		"@atlaskit/avatar": "^28.0.0",
 		"@atlaskit/avatar-group": "^14.3.0",
 		"@atlaskit/banner": "^15.3.0",
 		"@atlaskit/breadcrumbs": "^17.7.0",
 		"@atlaskit/checkbox": "^19.2.0",
 		"@atlaskit/code": "^19.2.0",
-		"@atlaskit/datetime-picker": "^18.5.0",
+		"@atlaskit/datetime-picker": "^18.6.0",
 		"@atlaskit/docs": "^12.2.0",
 		"@atlaskit/dropdown-menu": "^18.3.0",
 		"@atlaskit/flag": "^18.5.0",
@@ -88,6 +88,7 @@
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@atlassian/testing-library": "^0.11.0",
+		"@atlassian/workbench": "workspace:*",
 		"@testing-library/dom": "^10.1.0",
 		"@types/raf-schd": "^4.0.1",
 		"jscodeshift": "^17.0.0",
@@ -106,9 +107,6 @@
 		"platform_modal-dialog-heading-icon-a11y-fix": {
 			"type": "boolean"
 		},
-		"platform-dst-shape-theme-default": {
-			"type": "boolean"
-		},
 		"platform-dst-motion-uplift-modal": {
 			"type": "boolean"
 		},