@atlaskit/inline-dialog 13.1.9 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/inline-dialog
 
+## 13.2.0
+
+### Minor Changes
+
+- [`2fe0d03807f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2fe0d03807f) - This removes the preventDefault functionality (reverts it back to the previous version of inline dialog where event listeners were added in the capture phase). It also refactors handleClickOutside so that it is now triggered by a ref.
+
 ## 13.1.9
 
 ### Patch Changes

package/dist/cjs/InlineDialog/index.js

@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.1.9";
+var packageVersion = "13.2.0";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -58,12 +58,13 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
       content = _ref.content,
       children = _ref.children;
   var containerRef = (0, _react.useRef)(null);
-  var triggerRef = (0, _react.useRef)(null);
-  var handleClickOutside = (0, _react.useCallback)(function (event) {
-    if (event.defaultPrevented) {
-      return;
-    }
+  var triggerRef = (0, _react.useRef)(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  var onCloseRef = (0, _react.useRef)(onClose);
+  (0, _react.useEffect)(function () {
+    onCloseRef.current = onClose;
+  });
+  var handleClickOutside = (0, _react.useCallback)(function (event) {
     var target = event.target; // checks for when target is not HTMLElement
 
     if (!(target instanceof HTMLElement)) {
@@ -89,43 +90,31 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   (0, _react.useEffect)(function () {
     if (!isOpen) {
       return;
     }
 
-    var unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    var timeoutId = setTimeout(function () {
-      unbind = (0, _bindEventListener.bind)(window, {
-        type: 'click',
-        listener: function listener(event) {
-          return handleClickOutside(event);
-        },
-        options: {
-          capture: false
-        }
-      });
+    var unbind;
+    unbind = (0, _bindEventListener.bind)(window, {
+      type: 'click',
+      listener: function listener(e) {
+        return handleClickOutside(e);
+      },
+      options: {
+        capture: true
+      }
     });
-    return function () {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    return unbind;
+  }, [isOpen, handleClickOutside]);
   var popper = isOpen ? (0, _core.jsx)(_popper.Popper, {
     placement: placement
   }, function (_ref2) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.1.9",
+	"version": "13.2.0",
 	"sideEffects": false
 }

package/dist/es2019/InlineDialog/index.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 const packageName = "@atlaskit/inline-dialog";
-const packageVersion = "13.1.9";
+const packageVersion = "13.2.0";
 
 const checkIsChildOfPortal = node => {
   if (!node) {
@@ -30,12 +30,13 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   children
 }) {
   const containerRef = useRef(null);
-  const triggerRef = useRef(null);
-  const handleClickOutside = useCallback(event => {
-    if (event.defaultPrevented) {
-      return;
-    }
+  const triggerRef = useRef(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+  const handleClickOutside = useCallback(event => {
     const {
       target
     } = event; // checks for when target is not HTMLElement
@@ -63,41 +64,29 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   useEffect(() => {
     if (!isOpen) {
       return;
     }
 
-    let unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    const timeoutId = setTimeout(() => {
-      unbind = bind(window, {
-        type: 'click',
-        listener: event => handleClickOutside(event),
-        options: {
-          capture: false
-        }
-      });
+    let unbind;
+    unbind = bind(window, {
+      type: 'click',
+      listener: e => handleClickOutside(e),
+      options: {
+        capture: true
+      }
     });
-    return () => {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    return unbind;
+  }, [isOpen, handleClickOutside]);
   const popper = isOpen ? jsx(Popper, {
     placement: placement
   }, ({

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.1.9",
+	"version": "13.2.0",
 	"sideEffects": false
 }

package/dist/esm/InlineDialog/index.js

@@ -8,7 +8,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.1.9";
+var packageVersion = "13.2.0";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -35,12 +35,13 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
       content = _ref.content,
       children = _ref.children;
   var containerRef = useRef(null);
-  var triggerRef = useRef(null);
-  var handleClickOutside = useCallback(function (event) {
-    if (event.defaultPrevented) {
-      return;
-    }
+  var triggerRef = useRef(null); // we put this into a ref to avoid handleClickOutside having this as a dependency
 
+  var onCloseRef = useRef(onClose);
+  useEffect(function () {
+    onCloseRef.current = onClose;
+  });
+  var handleClickOutside = useCallback(function (event) {
     var target = event.target; // checks for when target is not HTMLElement
 
     if (!(target instanceof HTMLElement)) {
@@ -66,43 +67,31 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
 
 
     if (containerRef.current && !containerRef.current.contains(target)) {
-      onClose && onClose({
+      var _onCloseRef$current;
+
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
         isOpen: false,
         event: event
       });
     }
-  }, [onClose]);
+  }, []);
   useEffect(function () {
     if (!isOpen) {
       return;
     }
 
-    var unbind; // Under most circumstances, `useEffect` should run after an event has ended
-    // In this particular case, the popperjs library has a setState inside of a ref,
-    // which cases `useEffect` to run synchronously instead. To avoid this, we use a
-    // `setTimeout` so `useEffect` after the event. We only want to start listening
-    // for clicks after the original click event that triggered the dialog
-    // has finished. You can see more in the Codesandbox here:
-    // https://codesandbox.io/s/useeffect-and-event-timing-refs-in-state-5tys3?file=/src/App.tsx
-
-    var timeoutId = setTimeout(function () {
-      unbind = bind(window, {
-        type: 'click',
-        listener: function listener(event) {
-          return handleClickOutside(event);
-        },
-        options: {
-          capture: false
-        }
-      });
+    var unbind;
+    unbind = bind(window, {
+      type: 'click',
+      listener: function listener(e) {
+        return handleClickOutside(e);
+      },
+      options: {
+        capture: true
+      }
     });
-    return function () {
-      var _unbind;
-
-      window.clearTimeout(timeoutId);
-      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
-    };
-  }, [handleClickOutside, isOpen]);
+    return unbind;
+  }, [isOpen, handleClickOutside]);
   var popper = isOpen ? jsx(Popper, {
     placement: placement
   }, function (_ref2) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.1.9",
+	"version": "13.2.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.1.9",
+  "version": "13.2.0",
   "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/"