@atlaskit/inline-dialog - npm Package Compare versions

Comparing version 15.1.2 to 15.2.0

CHANGELOG.md

 # @atlaskit/inline-dialog
 
+## 15.2.0
+
+### Minor Changes
+
+- [#157176](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157176)
+  [`3d03c4f1002ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d03c4f1002ab) -
+  Integrate layering and use CloseManager instead
+
 ## 15.1.2
@@ -4,0 +12,0 @@

dist/cjs/InlineDialog/index.js

@@ -35,8 +35,26 @@ "use strict";
 
-// escape close manager for layering
-var EscapeCloseManager = function EscapeCloseManager(_ref) {
-  var handleClose = _ref.handleClose;
+// Close manager for layering
+var CloseManager = function CloseManager(_ref) {
+  var handleEscapeClose = _ref.handleEscapeClose,
+    handleClick = _ref.handleClick;
   (0, _layering.useCloseOnEscapePress)({
-    onClose: handleClose
+    onClose: handleEscapeClose
   });
+  var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
+    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
+  (0, _react.useEffect)(function () {
+    return (0, _bindEventListener.bind)(window, {
+      type: 'click',
+      listener: function listener(e) {
+        if (isLayerDisabled()) {
+          return;
+        }
+        handleClick(e);
+      },
+      options: {
+        capture: true
+      }
+    });
+  }, [handleClick, isLayerDisabled]);
+
   // only create a dummy component for using ths hook in class component
@@ -72,3 +90,3 @@ return (0, _react2.jsx)("span", null);
     packageName: "@atlaskit/inline-dialog",
-    packageVersion: "15.1.2"
+    packageVersion: "15.2.0"
   });
@@ -78,3 +96,2 @@
   var onCloseRef = (0, _react.useRef)(onClose);
-  var isLayeringEnabled = (0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
   (0, _react.useEffect)(function () {
@@ -96,3 +113,3 @@ onCloseRef.current = onClose;
     }
-    if (isLayeringEnabled) {
+    if (isOpen) {
       var _onCloseRef$current;
@@ -119,3 +136,3 @@ (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
     }
-  }, [isLayeringEnabled]);
+  }, [isOpen]);
   var handleClick = (0, _react.useCallback)(function (event) {
@@ -127,40 +144,7 @@ var _containerRef$current;
     }
-
-    // if feature flag is enabled we won't file the close event when clicking inside dialog
-    if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+    if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
       return;
     }
     handleCloseRequest(event);
-  }, [handleCloseRequest, isLayeringEnabled]);
-  (0, _react.useEffect)(function () {
-    if (!isOpen) {
-      return;
-    }
-    return (0, _bindEventListener.bind)(window, {
-      type: 'click',
-      listener: handleClick,
-      options: {
-        capture: true
-      }
-    });
-  }, [isOpen, handleClick]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === 'Escape') {
-      handleCloseRequest(event);
-    }
-  }, [handleCloseRequest]);
-  (0, _react.useEffect)(function () {
-    // if layering is enabled, we will use useCloseOnEscapePress hook instead
-    if (!isOpen || isLayeringEnabled) {
-      return;
-    }
-    var unbind = (0, _bindEventListener.bind)(window, {
-      type: 'keydown',
-      listener: handleKeyDown,
-      options: {
-        capture: true
-      }
-    });
-    return unbind;
-  }, [isOpen, handleKeyDown, isLayeringEnabled]);
+  }, [handleCloseRequest, containerRef, triggerRef]);
   var popper = isOpen ? (0, _react2.jsx)(_popper.Popper, {
@@ -206,6 +190,7 @@ placement: placement,
     }, (0, _react2.jsx)(_react.default.Fragment, null, children));
-  }), isLayeringEnabled ? (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
+  }), isOpen ? (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
     isDisabled: false
-  }, popper, (0, _react2.jsx)(EscapeCloseManager, {
-    handleClose: handleCloseRequest
+  }, popper, (0, _react2.jsx)(CloseManager, {
+    handleEscapeClose: handleCloseRequest,
+    handleClick: handleClick
   })) : popper);
@@ -212,0 +197,0 @@ });

dist/es2019/InlineDialog/index.js

@@ -12,3 +12,3 @@ /**
 import noop from '@atlaskit/ds-lib/noop';
-import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
+import { UNSAFE_LAYERING, UNSAFE_useLayering, useCloseOnEscapePress } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -25,9 +25,28 @@ import { Manager, Popper, Reference } from '@atlaskit/popper';
 
-// escape close manager for layering
-const EscapeCloseManager = ({
-  handleClose
+// Close manager for layering
+const CloseManager = ({
+  handleEscapeClose,
+  handleClick
 }) => {
   useCloseOnEscapePress({
-    onClose: handleClose
+    onClose: handleEscapeClose
   });
+  const {
+    isLayerDisabled
+  } = UNSAFE_useLayering();
+  useEffect(() => {
+    return bind(window, {
+      type: 'click',
+      listener: e => {
+        if (isLayerDisabled()) {
+          return;
+        }
+        handleClick(e);
+      },
+      options: {
+        capture: true
+      }
+    });
+  }, [handleClick, isLayerDisabled]);
+
   // only create a dummy component for using ths hook in class component
@@ -55,3 +74,3 @@ return jsx("span", null);
     packageName: "@atlaskit/inline-dialog",
-    packageVersion: "15.1.2"
+    packageVersion: "15.2.0"
   });
@@ -61,3 +80,2 @@
   const onCloseRef = useRef(onClose);
-  const isLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
   useEffect(() => {
@@ -81,3 +99,3 @@ onCloseRef.current = onClose;
     }
-    if (isLayeringEnabled) {
+    if (isOpen) {
       var _onCloseRef$current;
@@ -104,3 +122,3 @@ (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
     }
-  }, [isLayeringEnabled]);
+  }, [isOpen]);
   const handleClick = useCallback(event => {
@@ -112,40 +130,7 @@ var _containerRef$current;
     }
-
-    // if feature flag is enabled we won't file the close event when clicking inside dialog
-    if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+    if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
       return;
     }
     handleCloseRequest(event);
-  }, [handleCloseRequest, isLayeringEnabled]);
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    return bind(window, {
-      type: 'click',
-      listener: handleClick,
-      options: {
-        capture: true
-      }
-    });
-  }, [isOpen, handleClick]);
-  const handleKeyDown = useCallback(event => {
-    if (event.key === 'Escape') {
-      handleCloseRequest(event);
-    }
-  }, [handleCloseRequest]);
-  useEffect(() => {
-    // if layering is enabled, we will use useCloseOnEscapePress hook instead
-    if (!isOpen || isLayeringEnabled) {
-      return;
-    }
-    const unbind = bind(window, {
-      type: 'keydown',
-      listener: handleKeyDown,
-      options: {
-        capture: true
-      }
-    });
-    return unbind;
-  }, [isOpen, handleKeyDown, isLayeringEnabled]);
+  }, [handleCloseRequest, containerRef, triggerRef]);
   const popper = isOpen ? jsx(Popper, {
@@ -189,6 +174,7 @@ placement: placement,
     hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
-  }, jsx(React.Fragment, null, children))), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
+  }, jsx(React.Fragment, null, children))), isOpen ? jsx(UNSAFE_LAYERING, {
     isDisabled: false
-  }, popper, jsx(EscapeCloseManager, {
-    handleClose: handleCloseRequest
+  }, popper, jsx(CloseManager, {
+    handleEscapeClose: handleCloseRequest,
+    handleClick: handleClick
   })) : popper);
@@ -195,0 +181,0 @@ });

dist/esm/InlineDialog/index.js

@@ -12,3 +12,3 @@ /**
 import noop from '@atlaskit/ds-lib/noop';
-import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
+import { UNSAFE_LAYERING, UNSAFE_useLayering, useCloseOnEscapePress } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -25,8 +25,26 @@ import { Manager, Popper, Reference } from '@atlaskit/popper';
 
-// escape close manager for layering
-var EscapeCloseManager = function EscapeCloseManager(_ref) {
-  var handleClose = _ref.handleClose;
+// Close manager for layering
+var CloseManager = function CloseManager(_ref) {
+  var handleEscapeClose = _ref.handleEscapeClose,
+    handleClick = _ref.handleClick;
   useCloseOnEscapePress({
-    onClose: handleClose
+    onClose: handleEscapeClose
   });
+  var _UNSAFE_useLayering = UNSAFE_useLayering(),
+    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
+  useEffect(function () {
+    return bind(window, {
+      type: 'click',
+      listener: function listener(e) {
+        if (isLayerDisabled()) {
+          return;
+        }
+        handleClick(e);
+      },
+      options: {
+        capture: true
+      }
+    });
+  }, [handleClick, isLayerDisabled]);
+
   // only create a dummy component for using ths hook in class component
@@ -62,3 +80,3 @@ return jsx("span", null);
     packageName: "@atlaskit/inline-dialog",
-    packageVersion: "15.1.2"
+    packageVersion: "15.2.0"
   });
@@ -68,3 +86,2 @@
   var onCloseRef = useRef(onClose);
-  var isLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
   useEffect(function () {
@@ -86,3 +103,3 @@ onCloseRef.current = onClose;
     }
-    if (isLayeringEnabled) {
+    if (isOpen) {
       var _onCloseRef$current;
@@ -109,3 +126,3 @@ (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
     }
-  }, [isLayeringEnabled]);
+  }, [isOpen]);
   var handleClick = useCallback(function (event) {
@@ -117,40 +134,7 @@ var _containerRef$current;
     }
-
-    // if feature flag is enabled we won't file the close event when clicking inside dialog
-    if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+    if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
       return;
     }
     handleCloseRequest(event);
-  }, [handleCloseRequest, isLayeringEnabled]);
-  useEffect(function () {
-    if (!isOpen) {
-      return;
-    }
-    return bind(window, {
-      type: 'click',
-      listener: handleClick,
-      options: {
-        capture: true
-      }
-    });
-  }, [isOpen, handleClick]);
-  var handleKeyDown = useCallback(function (event) {
-    if (event.key === 'Escape') {
-      handleCloseRequest(event);
-    }
-  }, [handleCloseRequest]);
-  useEffect(function () {
-    // if layering is enabled, we will use useCloseOnEscapePress hook instead
-    if (!isOpen || isLayeringEnabled) {
-      return;
-    }
-    var unbind = bind(window, {
-      type: 'keydown',
-      listener: handleKeyDown,
-      options: {
-        capture: true
-      }
-    });
-    return unbind;
-  }, [isOpen, handleKeyDown, isLayeringEnabled]);
+  }, [handleCloseRequest, containerRef, triggerRef]);
   var popper = isOpen ? jsx(Popper, {
@@ -196,6 +180,7 @@ placement: placement,
     }, jsx(React.Fragment, null, children));
-  }), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
+  }), isOpen ? jsx(UNSAFE_LAYERING, {
     isDisabled: false
-  }, popper, jsx(EscapeCloseManager, {
-    handleClose: handleCloseRequest
+  }, popper, jsx(CloseManager, {
+    handleEscapeClose: handleCloseRequest,
+    handleClick: handleClick
   })) : popper);
@@ -202,0 +187,0 @@ });

package.json

 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "15.1.2",
+	"version": "15.2.0",
 	"description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
@@ -59,9 +59,9 @@ "publishConfig": {
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/datetime-picker": "^15.4.0",
+		"@atlaskit/button": "^20.3.0",
+		"@atlaskit/datetime-picker": "^15.5.0",
 		"@atlaskit/docs": "*",
-		"@atlaskit/dropdown-menu": "^12.20.0",
+		"@atlaskit/dropdown-menu": "^12.21.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/section-message": "^6.6.0",
-		"@atlaskit/select": "^18.1.0",
+		"@atlaskit/select": "^18.4.0",
 		"@atlaskit/ssr": "*",
@@ -112,5 +112,2 @@ "@atlaskit/visual-regression": "*",
 	"platform-feature-flags": {
-		"platform.design-system-team.inline-message-layering_wfp1p": {
-			"type": "boolean"
-		},
 		"platform_design_system_team_portal_logic_r18_fix": {
@@ -117,0 +114,0 @@ "type": "boolean"

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

101772

decreased by-1.4%

Lines of code

1047

decreased by-4.03%

No dependency changes