@atlaskit/modal-dialog 16.6.1 → 16.6.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/modal-dialog
 
+## 16.6.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/context/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/modal-dialog/context",
+  "main": "../dist/cjs/internal/context.js",
+  "module": "../dist/esm/internal/context.js",
+  "module:es2019": "../dist/es2019/internal/context.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/internal/context.d.ts"
+}

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");

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.6.0"
+    packageVersion: "16.6.2"
   });
 }
 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.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';

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.6.0"
+    packageVersion: "16.6.2"
   });
 }
 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.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";

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.6.0"
+    packageVersion: "16.6.2"
   });
 }
 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/dist/types/index.d.ts

@@ -1,9 +1,10 @@
 export { default } from './modal-dialog';
 export { default as ModalTransition } from './modal-transition';
-export type { KeyboardOrMouseEvent, Appearance, ModalAttributes, ModalDialogProps, ModalHeaderProps, ModalTitleProps, ModalBodyProps, ModalFooterProps, OnCloseHandler, OnCloseCompleteHandler, OnOpenCompleteHandler, OnStackChangeHandler, } from './types';
-export { default as ModalHeader } from './modal-header';
-export { default as ModalTitle } from './modal-title';
-export { default as ModalBody } from './modal-body';
-export { default as ModalFooter } from './modal-footer';
+export type { KeyboardOrMouseEvent, Appearance, ModalDialogProps, OnCloseHandler, OnCloseCompleteHandler, OnOpenCompleteHandler, OnStackChangeHandler, } from './types';
+export type { ModalAttributes } from './internal/context';
+export { default as ModalHeader, type ModalHeaderProps } from './modal-header';
+export { default as ModalTitle, type ModalTitleProps } from './modal-title';
+export { default as ModalBody, type ModalBodyProps } from './modal-body';
+export { default as ModalFooter, type ModalFooterProps } from './modal-footer';
 export { CloseButton } from './close-button';
 export { useModal } from './hooks';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ModalDialogProps } from './internal/components/modal-wrapper';
+import { type ModalDialogProps } from './types';
 export type { ModalDialogProps };
 /**
  * __Modal wrapper__

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "16.6.1",
+	"version": "16.6.3",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/button": "^25.3.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/icon": "^37.6.0",
+		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/layering": "^5.2.0",
 		"@atlaskit/motion": "^8.6.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
@@ -48,8 +48,8 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tokens": "^16.11.0",
-		"@atlaskit/top-layer": "^4.4.0",
+		"@atlaskit/tokens": "^16.12.0",
+		"@atlaskit/top-layer": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -70,7 +70,7 @@
 		"@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.7.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",