@atlaskit/modal-dialog 14.5.3 → 14.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 14.6.0
+
+### Minor Changes
+
+- [`8a71ce992f8c8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a71ce992f8c8) -
+  Modal dialog now registers with the open layer observer using the `useNotifyLayerObserver` hook.
+  This is behind the `platform-dst-open-layer-observer-layer-type` feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.5.3
 
 ### Patch Changes

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

@@ -18,7 +18,9 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _layering = require("@atlaskit/layering");
+var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
 var _useModalStack = _interopRequireDefault(require("../hooks/use-modal-stack"));
@@ -87,7 +89,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.5.2"
+    packageVersion: "0.0.0-development"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -100,6 +102,15 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     return allowlistElements(element, focusLockAllowlist);
   }, [focusLockAllowlist]);
   (0, _usePreventProgrammaticScroll.default)();
+  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    type: 'modal',
+    // Modal dialog is conditionally rendered when visible, so when this runs it is always open.
+    isOpen: (0, _platformFeatureFlags.fg)('platform-dst-open-layer-observer-layer-type'),
+    // Passing a no-op for now, as there isn't a real use case for closing the modal dialog programmatically
+    // by the OpenLayerObserver. The only current use case is closing layers when resizing the nav layout,
+    // which cannot happen while a modal dialog is open.
+    onClose: _noop.default
+  });
   var modalDialogWithBlanket = /*#__PURE__*/React.createElement(_blanket.default, {
     isTinted: !isBlanketHidden,
     onBlanketClicked: onBlanketClicked,

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

@@ -10,7 +10,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
 import { Layering } from '@atlaskit/layering';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import useModalStack from '../hooks/use-modal-stack';
@@ -74,7 +76,7 @@ const InternalModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.5.2"
+    packageVersion: "0.0.0-development"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -85,6 +87,15 @@ const InternalModalWrapper = props => {
   // This ensures to prevent additional re-renders while nothing is passed to focusLockAllowlist explicitly.
   const allowListCallback = useCallback(element => allowlistElements(element, focusLockAllowlist), [focusLockAllowlist]);
   usePreventProgrammaticScroll();
+  useNotifyOpenLayerObserver({
+    type: 'modal',
+    // Modal dialog is conditionally rendered when visible, so when this runs it is always open.
+    isOpen: fg('platform-dst-open-layer-observer-layer-type'),
+    // Passing a no-op for now, as there isn't a real use case for closing the modal dialog programmatically
+    // by the OpenLayerObserver. The only current use case is closing layers when resizing the nav layout,
+    // which cannot happen while a modal dialog is open.
+    onClose: noop
+  });
   const modalDialogWithBlanket = /*#__PURE__*/React.createElement(Blanket, {
     isTinted: !isBlanketHidden,
     onBlanketClicked: onBlanketClicked,

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

@@ -10,7 +10,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
 import { Layering } from '@atlaskit/layering';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import useModalStack from '../hooks/use-modal-stack';
@@ -78,7 +80,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "14.5.2"
+    packageVersion: "0.0.0-development"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -91,6 +93,15 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
     return allowlistElements(element, focusLockAllowlist);
   }, [focusLockAllowlist]);
   usePreventProgrammaticScroll();
+  useNotifyOpenLayerObserver({
+    type: 'modal',
+    // Modal dialog is conditionally rendered when visible, so when this runs it is always open.
+    isOpen: fg('platform-dst-open-layer-observer-layer-type'),
+    // Passing a no-op for now, as there isn't a real use case for closing the modal dialog programmatically
+    // by the OpenLayerObserver. The only current use case is closing layers when resizing the nav layout,
+    // which cannot happen while a modal dialog is open.
+    onClose: noop
+  });
   var modalDialogWithBlanket = /*#__PURE__*/React.createElement(Blanket, {
     isTinted: !isBlanketHidden,
     onBlanketClicked: onBlanketClicked,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "14.5.3",
+	"version": "14.6.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/icon": "^28.5.0",
-		"@atlaskit/layering": "^3.1.0",
+		"@atlaskit/layering": "^3.2.0",
 		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/portal": "^5.1.0",
@@ -56,7 +56,7 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/avatar": "^25.4.0",
+		"@atlaskit/avatar": "^25.5.0",
 		"@atlaskit/avatar-group": "^12.3.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
@@ -75,8 +75,8 @@
 		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^8.0.0",
-		"@atlaskit/tooltip": "^20.5.0",
-		"@atlassian/feature-flags-test-utils": "^0.3.0",
+		"@atlaskit/tooltip": "^20.6.0",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/react": "^13.4.0",
@@ -127,6 +127,9 @@
 		},
 		"platform_ads_explicit_font_styles": {
 			"type": "boolean"
+		},
+		"platform-dst-open-layer-observer-layer-type": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/modal-dialog/"