@atlaskit/inline-dialog 14.2.2 → 14.2.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/inline-dialog
 
+## 14.2.4
+
+### Patch Changes
+
+- [#120049](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120049)
+  [`77504ff274f72`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77504ff274f72) -
+  DSP-19576: Assign names to anonymous default exports
+
+## 14.2.3
+
+### Patch Changes
+
+- [#116568](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116568)
+  [`f8fef52dc49ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f8fef52dc49ff) -
+  Correct the usage of handling escape onClose request
+
 ## 14.2.2
 
 ### Patch Changes

package/dist/cjs/InlineDialog/index.js

@@ -26,39 +26,24 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "14.2.2";
+var packageVersion = "14.2.4";
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
     return false;
   }
   return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
 };
-var InlineDialogWithLayering = function InlineDialogWithLayering(_ref) {
-  var isOpen = _ref.isOpen,
-    onContentBlur = _ref.onContentBlur,
-    onContentClick = _ref.onContentClick,
-    onContentFocus = _ref.onContentFocus,
-    onClose = _ref.onClose,
-    placement = _ref.placement,
-    strategy = _ref.strategy,
-    testId = _ref.testId,
-    content = _ref.content,
-    children = _ref.children;
-  return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
-    isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
-  }, (0, _react2.jsx)(InlineDialog, {
-    isOpen: isOpen,
-    onContentBlur: onContentBlur,
-    onContentClick: onContentClick,
-    onContentFocus: onContentFocus,
-    onClose: onClose,
-    placement: placement,
-    strategy: strategy,
-    testId: testId,
-    content: content
-  }, children));
+
+// escape close manager for layering
+var EscapeCloseManager = function EscapeCloseManager(_ref) {
+  var handleClose = _ref.handleClose;
+  (0, _layering.useCloseOnEscapePress)({
+    onClose: handleClose
+  });
+  // only create a dummy component for using ths hook in class component
+  return (0, _react2.jsx)("span", null);
 };
-var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
+var InlineDialogComponent = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
   var _ref2$isOpen = _ref2.isOpen,
     isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen,
     _ref2$onContentBlur = _ref2.onContentBlur,
@@ -80,14 +65,12 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
   var triggerRef = (0, _react.useRef)(null);
   // we put this into a ref to avoid handleCloseRequest having this as a dependency
   var onCloseRef = (0, _react.useRef)(onClose);
+  var isLayeringEnabled = (0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
   (0, _react.useEffect)(function () {
     onCloseRef.current = onClose;
   });
-  var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
-    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
   var handleCloseRequest = (0, _react.useCallback)(function (event) {
     var target = event.target;
-
     // checks for when target is not HTMLElement
     if (!(target instanceof HTMLElement)) {
       return;
@@ -99,30 +82,29 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
     if (!document.body.contains(target)) {
       return;
     }
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p')) {
-      if (!isLayerDisabled()) {
-        var _onCloseRef$current;
-        (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
-          isOpen: false,
-          event: event
-        });
-      }
-    } else {
-      // handles the case where inline dialog opens portalled elements such as modal
-      if (checkIsChildOfPortal(target)) {
-        return;
-      }
+    if (isLayeringEnabled) {
+      var _onCloseRef$current;
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
+        isOpen: false,
+        event: event
+      });
+      return;
+    }
 
-      // call onClose if the click originated from outside the dialog
-      if (containerRef.current && !containerRef.current.contains(target)) {
-        var _onCloseRef$current2;
-        (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
-          isOpen: false,
-          event: event
-        });
-      }
+    // handles the case where inline dialog opens portalled elements such as modal
+    if (checkIsChildOfPortal(target)) {
+      return;
     }
-  }, [isLayerDisabled]);
+
+    // call onClose if the click originated from outside the dialog
+    if (containerRef.current && !containerRef.current.contains(target)) {
+      var _onCloseRef$current2;
+      (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
+        isOpen: false,
+        event: event
+      });
+    }
+  }, [isLayeringEnabled]);
   var handleClick = (0, _react.useCallback)(function (event) {
     var _containerRef$current;
     // exit if we click outside but on the trigger — it can handle the clicks itself
@@ -131,23 +113,22 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
     }
 
     // if feature flag is enabled we won't file the close event when clicking inside dialog
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+    if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
       return;
     }
     handleCloseRequest(event);
-  }, [handleCloseRequest]);
+  }, [handleCloseRequest, isLayeringEnabled]);
   (0, _react.useEffect)(function () {
     if (!isOpen) {
       return;
     }
-    var unbind = (0, _bindEventListener.bind)(window, {
+    return (0, _bindEventListener.bind)(window, {
       type: 'click',
       listener: handleClick,
       options: {
         capture: true
       }
     });
-    return unbind;
   }, [isOpen, handleClick]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Escape') {
@@ -155,7 +136,8 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
     }
   }, [handleCloseRequest]);
   (0, _react.useEffect)(function () {
-    if (!isOpen) {
+    // if layering is enabled, we will use useCloseOnEscapePress hook instead
+    if (!isOpen || isLayeringEnabled) {
       return;
     }
     var unbind = (0, _bindEventListener.bind)(window, {
@@ -166,7 +148,7 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
       }
     });
     return unbind;
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen, handleKeyDown, isLayeringEnabled]);
   var popper = isOpen ? (0, _react2.jsx)(_popper.Popper, {
     placement: placement,
     strategy: strategy
@@ -205,11 +187,27 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
         }
       }
     }, (0, _react2.jsx)(_react.default.Fragment, null, children));
-  }), popper);
+  }), isLayeringEnabled ? (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
+    isDisabled: false
+  }, popper, (0, _react2.jsx)(EscapeCloseManager, {
+    handleClose: handleCloseRequest
+  })) : popper);
 });
-InlineDialog.displayName = 'InlineDialog';
+InlineDialogComponent.displayName = 'InlineDialog';
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
-var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
+
+/**
+ * __Inline dialog__
+ *
+ * _We are planning on deprecating Inline dialog. We recommend using the Popup component instead._
+ *
+ * An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
+ *
+ * - [Examples](https://atlassian.design/components/inline-dialog/examples)
+ * - [Code](https://atlassian.design/components/inline-dialog/code)
+ * - [Usage](https://atlassian.design/components/inline-dialog/usage)
+ */
+var InlineDialog = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'inlineDialog',
   packageName: packageName,
   packageVersion: packageVersion
@@ -223,4 +221,5 @@ var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
       packageVersion: packageVersion
     }
   })
-})(InlineDialogWithLayering));
+})(InlineDialogComponent));
+var _default = exports.default = InlineDialog;

package/dist/es2019/InlineDialog/index.js

@@ -10,45 +10,30 @@ import { bind } from 'bind-event-listener';
 import NodeResolver from 'react-node-resolver';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
-import { UNSAFE_LAYERING, UNSAFE_useLayering } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 const packageName = "@atlaskit/inline-dialog";
-const packageVersion = "14.2.2";
+const packageVersion = "14.2.4";
 const checkIsChildOfPortal = node => {
   if (!node) {
     return false;
   }
   return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
 };
-const InlineDialogWithLayering = ({
-  isOpen,
-  onContentBlur,
-  onContentClick,
-  onContentFocus,
-  onClose,
-  placement,
-  strategy,
-  testId,
-  content,
-  children
+
+// escape close manager for layering
+const EscapeCloseManager = ({
+  handleClose
 }) => {
-  return jsx(UNSAFE_LAYERING, {
-    isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
-  }, jsx(InlineDialog, {
-    isOpen: isOpen,
-    onContentBlur: onContentBlur,
-    onContentClick: onContentClick,
-    onContentFocus: onContentFocus,
-    onClose: onClose,
-    placement: placement,
-    strategy: strategy,
-    testId: testId,
-    content: content
-  }, children));
+  useCloseOnEscapePress({
+    onClose: handleClose
+  });
+  // only create a dummy component for using ths hook in class component
+  return jsx("span", null);
 };
-const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
+const InlineDialogComponent = /*#__PURE__*/memo(function InlineDialog({
   isOpen = false,
   onContentBlur = noop,
   onContentClick = noop,
@@ -64,17 +49,14 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   const triggerRef = useRef(null);
   // we put this into a ref to avoid handleCloseRequest having this as a dependency
   const onCloseRef = useRef(onClose);
+  const isLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
   useEffect(() => {
     onCloseRef.current = onClose;
   });
-  const {
-    isLayerDisabled
-  } = UNSAFE_useLayering();
   const handleCloseRequest = useCallback(event => {
     const {
       target
     } = event;
-
     // checks for when target is not HTMLElement
     if (!(target instanceof HTMLElement)) {
       return;
@@ -86,30 +68,29 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
     if (!document.body.contains(target)) {
       return;
     }
-    if (getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p')) {
-      if (!isLayerDisabled()) {
-        var _onCloseRef$current;
-        (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
-          isOpen: false,
-          event
-        });
-      }
-    } else {
-      // handles the case where inline dialog opens portalled elements such as modal
-      if (checkIsChildOfPortal(target)) {
-        return;
-      }
+    if (isLayeringEnabled) {
+      var _onCloseRef$current;
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
+        isOpen: false,
+        event
+      });
+      return;
+    }
 
-      // call onClose if the click originated from outside the dialog
-      if (containerRef.current && !containerRef.current.contains(target)) {
-        var _onCloseRef$current2;
-        (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 ? void 0 : _onCloseRef$current2.call(onCloseRef, {
-          isOpen: false,
-          event
-        });
-      }
+    // handles the case where inline dialog opens portalled elements such as modal
+    if (checkIsChildOfPortal(target)) {
+      return;
+    }
+
+    // call onClose if the click originated from outside the dialog
+    if (containerRef.current && !containerRef.current.contains(target)) {
+      var _onCloseRef$current2;
+      (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 ? void 0 : _onCloseRef$current2.call(onCloseRef, {
+        isOpen: false,
+        event
+      });
     }
-  }, [isLayerDisabled]);
+  }, [isLayeringEnabled]);
   const handleClick = useCallback(event => {
     var _containerRef$current;
     // exit if we click outside but on the trigger — it can handle the clicks itself
@@ -118,23 +99,22 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
     }
 
     // if feature flag is enabled we won't file the close event when clicking inside dialog
-    if (getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+    if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
       return;
     }
     handleCloseRequest(event);
-  }, [handleCloseRequest]);
+  }, [handleCloseRequest, isLayeringEnabled]);
   useEffect(() => {
     if (!isOpen) {
       return;
     }
-    const unbind = bind(window, {
+    return bind(window, {
       type: 'click',
       listener: handleClick,
       options: {
         capture: true
       }
     });
-    return unbind;
   }, [isOpen, handleClick]);
   const handleKeyDown = useCallback(event => {
     if (event.key === 'Escape') {
@@ -142,7 +122,8 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
     }
   }, [handleCloseRequest]);
   useEffect(() => {
-    if (!isOpen) {
+    // if layering is enabled, we will use useCloseOnEscapePress hook instead
+    if (!isOpen || isLayeringEnabled) {
       return;
     }
     const unbind = bind(window, {
@@ -153,7 +134,7 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
       }
     });
     return unbind;
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen, handleKeyDown, isLayeringEnabled]);
   const popper = isOpen ? jsx(Popper, {
     placement: placement,
     strategy: strategy
@@ -190,12 +171,28 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
         ref.current = node;
       }
     }
-  }, jsx(React.Fragment, null, children))), popper);
+  }, jsx(React.Fragment, null, children))), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, popper, jsx(EscapeCloseManager, {
+    handleClose: handleCloseRequest
+  })) : popper);
 });
-InlineDialog.displayName = 'InlineDialog';
-export { InlineDialog as InlineDialogWithoutAnalytics };
+InlineDialogComponent.displayName = 'InlineDialog';
+export { InlineDialogComponent as InlineDialogWithoutAnalytics };
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-export default withAnalyticsContext({
+
+/**
+ * __Inline dialog__
+ *
+ * _We are planning on deprecating Inline dialog. We recommend using the Popup component instead._
+ *
+ * An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
+ *
+ * - [Examples](https://atlassian.design/components/inline-dialog/examples)
+ * - [Code](https://atlassian.design/components/inline-dialog/code)
+ * - [Usage](https://atlassian.design/components/inline-dialog/usage)
+ */
+const InlineDialog = withAnalyticsContext({
   componentName: 'inlineDialog',
   packageName,
   packageVersion
@@ -209,4 +206,5 @@ export default withAnalyticsContext({
       packageVersion
     }
   })
-})(InlineDialogWithLayering));
+})(InlineDialogComponent));
+export default InlineDialog;

package/dist/esm/InlineDialog/index.js

@@ -10,44 +10,29 @@ import { bind } from 'bind-event-listener';
 import NodeResolver from 'react-node-resolver';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
-import { UNSAFE_LAYERING, UNSAFE_useLayering } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "14.2.2";
+var packageVersion = "14.2.4";
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
     return false;
   }
   return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
 };
-var InlineDialogWithLayering = function InlineDialogWithLayering(_ref) {
-  var isOpen = _ref.isOpen,
-    onContentBlur = _ref.onContentBlur,
-    onContentClick = _ref.onContentClick,
-    onContentFocus = _ref.onContentFocus,
-    onClose = _ref.onClose,
-    placement = _ref.placement,
-    strategy = _ref.strategy,
-    testId = _ref.testId,
-    content = _ref.content,
-    children = _ref.children;
-  return jsx(UNSAFE_LAYERING, {
-    isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
-  }, jsx(InlineDialog, {
-    isOpen: isOpen,
-    onContentBlur: onContentBlur,
-    onContentClick: onContentClick,
-    onContentFocus: onContentFocus,
-    onClose: onClose,
-    placement: placement,
-    strategy: strategy,
-    testId: testId,
-    content: content
-  }, children));
+
+// escape close manager for layering
+var EscapeCloseManager = function EscapeCloseManager(_ref) {
+  var handleClose = _ref.handleClose;
+  useCloseOnEscapePress({
+    onClose: handleClose
+  });
+  // only create a dummy component for using ths hook in class component
+  return jsx("span", null);
 };
-var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
+var InlineDialogComponent = /*#__PURE__*/memo(function InlineDialog(_ref2) {
   var _ref2$isOpen = _ref2.isOpen,
     isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen,
     _ref2$onContentBlur = _ref2.onContentBlur,
@@ -69,14 +54,12 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
   var triggerRef = useRef(null);
   // we put this into a ref to avoid handleCloseRequest having this as a dependency
   var onCloseRef = useRef(onClose);
+  var isLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
   useEffect(function () {
     onCloseRef.current = onClose;
   });
-  var _UNSAFE_useLayering = UNSAFE_useLayering(),
-    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
   var handleCloseRequest = useCallback(function (event) {
     var target = event.target;
-
     // checks for when target is not HTMLElement
     if (!(target instanceof HTMLElement)) {
       return;
@@ -88,30 +71,29 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
     if (!document.body.contains(target)) {
       return;
     }
-    if (getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p')) {
-      if (!isLayerDisabled()) {
-        var _onCloseRef$current;
-        (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
-          isOpen: false,
-          event: event
-        });
-      }
-    } else {
-      // handles the case where inline dialog opens portalled elements such as modal
-      if (checkIsChildOfPortal(target)) {
-        return;
-      }
+    if (isLayeringEnabled) {
+      var _onCloseRef$current;
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
+        isOpen: false,
+        event: event
+      });
+      return;
+    }
 
-      // call onClose if the click originated from outside the dialog
-      if (containerRef.current && !containerRef.current.contains(target)) {
-        var _onCloseRef$current2;
-        (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
-          isOpen: false,
-          event: event
-        });
-      }
+    // handles the case where inline dialog opens portalled elements such as modal
+    if (checkIsChildOfPortal(target)) {
+      return;
     }
-  }, [isLayerDisabled]);
+
+    // call onClose if the click originated from outside the dialog
+    if (containerRef.current && !containerRef.current.contains(target)) {
+      var _onCloseRef$current2;
+      (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
+        isOpen: false,
+        event: event
+      });
+    }
+  }, [isLayeringEnabled]);
   var handleClick = useCallback(function (event) {
     var _containerRef$current;
     // exit if we click outside but on the trigger — it can handle the clicks itself
@@ -120,23 +102,22 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
     }
 
     // if feature flag is enabled we won't file the close event when clicking inside dialog
-    if (getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+    if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
       return;
     }
     handleCloseRequest(event);
-  }, [handleCloseRequest]);
+  }, [handleCloseRequest, isLayeringEnabled]);
   useEffect(function () {
     if (!isOpen) {
       return;
     }
-    var unbind = bind(window, {
+    return bind(window, {
       type: 'click',
       listener: handleClick,
       options: {
         capture: true
       }
     });
-    return unbind;
   }, [isOpen, handleClick]);
   var handleKeyDown = useCallback(function (event) {
     if (event.key === 'Escape') {
@@ -144,7 +125,8 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
     }
   }, [handleCloseRequest]);
   useEffect(function () {
-    if (!isOpen) {
+    // if layering is enabled, we will use useCloseOnEscapePress hook instead
+    if (!isOpen || isLayeringEnabled) {
       return;
     }
     var unbind = bind(window, {
@@ -155,7 +137,7 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
       }
     });
     return unbind;
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen, handleKeyDown, isLayeringEnabled]);
   var popper = isOpen ? jsx(Popper, {
     placement: placement,
     strategy: strategy
@@ -194,12 +176,28 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
         }
       }
     }, jsx(React.Fragment, null, children));
-  }), popper);
+  }), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, popper, jsx(EscapeCloseManager, {
+    handleClose: handleCloseRequest
+  })) : popper);
 });
-InlineDialog.displayName = 'InlineDialog';
-export { InlineDialog as InlineDialogWithoutAnalytics };
+InlineDialogComponent.displayName = 'InlineDialog';
+export { InlineDialogComponent as InlineDialogWithoutAnalytics };
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-export default withAnalyticsContext({
+
+/**
+ * __Inline dialog__
+ *
+ * _We are planning on deprecating Inline dialog. We recommend using the Popup component instead._
+ *
+ * An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
+ *
+ * - [Examples](https://atlassian.design/components/inline-dialog/examples)
+ * - [Code](https://atlassian.design/components/inline-dialog/code)
+ * - [Usage](https://atlassian.design/components/inline-dialog/usage)
+ */
+var InlineDialog = withAnalyticsContext({
   componentName: 'inlineDialog',
   packageName: packageName,
   packageVersion: packageVersion
@@ -213,4 +211,5 @@ export default withAnalyticsContext({
       packageVersion: packageVersion
     }
   })
-})(InlineDialogWithLayering));
+})(InlineDialogComponent));
+export default InlineDialog;

package/dist/types/InlineDialog/index.d.ts

@@ -4,7 +4,18 @@
 /** @jsx jsx */
 import React, { type FC } from 'react';
 import type { InlineDialogProps } from '../types';
-declare const InlineDialog: FC<InlineDialogProps>;
-export { InlineDialog as InlineDialogWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<InlineDialogProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "content" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "strategy" | "testId" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
-export default _default;
+declare const InlineDialogComponent: FC<InlineDialogProps>;
+export { InlineDialogComponent as InlineDialogWithoutAnalytics };
+/**
+ * __Inline dialog__
+ *
+ * _We are planning on deprecating Inline dialog. We recommend using the Popup component instead._
+ *
+ * An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
+ *
+ * - [Examples](https://atlassian.design/components/inline-dialog/examples)
+ * - [Code](https://atlassian.design/components/inline-dialog/code)
+ * - [Usage](https://atlassian.design/components/inline-dialog/usage)
+ */
+declare const InlineDialog: React.ForwardRefExoticComponent<Pick<Omit<InlineDialogProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "content" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "strategy" | "testId" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
+export default InlineDialog;

package/dist/types-ts4.5/InlineDialog/index.d.ts

@@ -4,7 +4,18 @@
 /** @jsx jsx */
 import React, { type FC } from 'react';
 import type { InlineDialogProps } from '../types';
-declare const InlineDialog: FC<InlineDialogProps>;
-export { InlineDialog as InlineDialogWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<InlineDialogProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "content" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "strategy" | "testId" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
-export default _default;
+declare const InlineDialogComponent: FC<InlineDialogProps>;
+export { InlineDialogComponent as InlineDialogWithoutAnalytics };
+/**
+ * __Inline dialog__
+ *
+ * _We are planning on deprecating Inline dialog. We recommend using the Popup component instead._
+ *
+ * An inline dialog is a pop-up container for small amounts of information. It can also contain controls.
+ *
+ * - [Examples](https://atlassian.design/components/inline-dialog/examples)
+ * - [Code](https://atlassian.design/components/inline-dialog/code)
+ * - [Usage](https://atlassian.design/components/inline-dialog/usage)
+ */
+declare const InlineDialog: React.ForwardRefExoticComponent<Pick<Omit<InlineDialogProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "content" | "isOpen" | "onContentBlur" | "onContentClick" | "onContentFocus" | "onClose" | "placement" | "strategy" | "testId" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
+export default InlineDialog;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "14.2.2",
+	"version": "14.2.4",
 	"description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.54.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -60,8 +60,8 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^18.0.0",
-		"@atlaskit/datetime-picker": "^13.6.0",
+		"@atlaskit/button": "^18.4.0",
+		"@atlaskit/datetime-picker": "^13.7.0",
 		"@atlaskit/docs": "*",
 		"@atlaskit/modal-dialog": "^12.14.0",
 		"@atlaskit/section-message": "^6.5.0",