@atlaskit/inline-dialog - npm Package Compare versions

Comparing version 14.2.2 to 14.2.3

CHANGELOG.md

 # @atlaskit/inline-dialog
 
+## 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
@@ -4,0 +12,0 @@

dist/cjs/InlineDialog/index.js

@@ -29,3 +29,3 @@ "use strict";
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "14.2.2";
+var packageVersion = "14.2.3";
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
@@ -37,26 +37,11 @@ if (!node) {
 };
-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);
 };
@@ -85,10 +70,8 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
   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
@@ -105,26 +88,25 @@ if (!(target instanceof HTMLElement)) {
     }
-    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) {
@@ -138,7 +120,7 @@ var _containerRef$current;
     // 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 () {
@@ -148,3 +130,3 @@ if (!isOpen) {
     }
-    var unbind = (0, _bindEventListener.bind)(window, {
+    return (0, _bindEventListener.bind)(window, {
       type: 'click',
@@ -156,3 +138,2 @@ listener: handleClick,
     });
-    return unbind;
   }, [isOpen, handleClick]);
@@ -165,3 +146,4 @@ var handleKeyDown = (0, _react.useCallback)(function (event) {
   (0, _react.useEffect)(function () {
-    if (!isOpen) {
+    // if layering is enabled, we will use useCloseOnEscapePress hook instead
+    if (!isOpen || isLayeringEnabled) {
       return;
@@ -177,3 +159,3 @@ }
     return unbind;
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen, handleKeyDown, isLayeringEnabled]);
   var popper = isOpen ? (0, _react2.jsx)(_popper.Popper, {
@@ -217,3 +199,7 @@ placement: placement,
     }, (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);
 });
@@ -236,2 +222,2 @@ InlineDialog.displayName = 'InlineDialog';
   })
-})(InlineDialogWithLayering));
+})(InlineDialog));

dist/es2019/InlineDialog/index.js

@@ -13,8 +13,8 @@ /**
 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.3";
 const checkIsChildOfPortal = node => {
@@ -26,27 +26,12 @@ if (!node) {
 };
-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);
 };
@@ -69,8 +54,6 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   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 => {
@@ -80,3 +63,2 @@ const {
     } = event;
-
     // checks for when target is not HTMLElement
@@ -93,26 +75,25 @@ if (!(target instanceof HTMLElement)) {
     }
-    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;
     }
-  }, [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 ? void 0 : _onCloseRef$current2.call(onCloseRef, {
+        isOpen: false,
+        event
+      });
+    }
+  }, [isLayeringEnabled]);
   const handleClick = useCallback(event => {
@@ -126,7 +107,7 @@ var _containerRef$current;
     // 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(() => {
@@ -136,3 +117,3 @@ if (!isOpen) {
     }
-    const unbind = bind(window, {
+    return bind(window, {
       type: 'click',
@@ -144,3 +125,2 @@ listener: handleClick,
     });
-    return unbind;
   }, [isOpen, handleClick]);
@@ -153,3 +133,4 @@ const handleKeyDown = useCallback(event => {
   useEffect(() => {
-    if (!isOpen) {
+    // if layering is enabled, we will use useCloseOnEscapePress hook instead
+    if (!isOpen || isLayeringEnabled) {
       return;
@@ -165,3 +146,3 @@ }
     return unbind;
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen, handleKeyDown, isLayeringEnabled]);
   const popper = isOpen ? jsx(Popper, {
@@ -203,3 +184,7 @@ placement: placement,
     }
-  }, jsx(React.Fragment, null, children))), popper);
+  }, jsx(React.Fragment, null, children))), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, popper, jsx(EscapeCloseManager, {
+    handleClose: handleCloseRequest
+  })) : popper);
 });
@@ -223,2 +208,2 @@ InlineDialog.displayName = 'InlineDialog';
   })
-})(InlineDialogWithLayering));
+})(InlineDialog));

dist/esm/InlineDialog/index.js

@@ -13,8 +13,8 @@ /**
 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.3";
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
@@ -26,26 +26,11 @@ if (!node) {
 };
-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);
 };
@@ -74,10 +59,8 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
   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
@@ -94,26 +77,25 @@ if (!(target instanceof HTMLElement)) {
     }
-    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) {
@@ -127,7 +109,7 @@ var _containerRef$current;
     // 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 () {
@@ -137,3 +119,3 @@ if (!isOpen) {
     }
-    var unbind = bind(window, {
+    return bind(window, {
       type: 'click',
@@ -145,3 +127,2 @@ listener: handleClick,
     });
-    return unbind;
   }, [isOpen, handleClick]);
@@ -154,3 +135,4 @@ var handleKeyDown = useCallback(function (event) {
   useEffect(function () {
-    if (!isOpen) {
+    // if layering is enabled, we will use useCloseOnEscapePress hook instead
+    if (!isOpen || isLayeringEnabled) {
       return;
@@ -166,3 +148,3 @@ }
     return unbind;
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen, handleKeyDown, isLayeringEnabled]);
   var popper = isOpen ? jsx(Popper, {
@@ -206,3 +188,7 @@ placement: placement,
     }, jsx(React.Fragment, null, children));
-  }), popper);
+  }), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, popper, jsx(EscapeCloseManager, {
+    handleClose: handleCloseRequest
+  })) : popper);
 });
@@ -226,2 +212,2 @@ InlineDialog.displayName = 'InlineDialog';
   })
-})(InlineDialogWithLayering));
+})(InlineDialog));

package.json

 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "14.2.2",
+	"version": "14.2.3",
 	"description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
@@ -63,4 +63,4 @@ "publishConfig": {
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^18.0.0",
-		"@atlaskit/datetime-picker": "^13.6.0",
+		"@atlaskit/button": "^18.1.0",
+		"@atlaskit/datetime-picker": "^13.7.0",
 		"@atlaskit/docs": "*",
@@ -67,0 +67,0 @@ "@atlaskit/modal-dialog": "^12.14.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

96333

decreased by-0.94%

Lines of code

994

decreased by-4.42%

No dependency changes