@atlaskit/inline-dialog 13.1.4 → 13.1.8

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/inline-dialog
 
+## 13.1.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.1.7
+
+### Patch Changes
+
+- [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
+
+## 13.1.6
+
+### Patch Changes
+
+- [`cb79dfea5d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb79dfea5d9) - This fixes a bug in version 13.1.2 where inline dialog's `useEffect` was running synchronously and while the click event was still happening. This meant that if the open state was outside of inline dialog, there were instances where it failed to open.
+
+## 13.1.5
+
+### Patch Changes
+
+- [`b94375ecf08`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b94375ecf08) - Fixes issue where enzyme is unable to access component name in snapshot tests. There should be no UI or UX change.
+
 ## 13.1.4
 
 ### Patch Changes
@@ -16,7 +40,7 @@
 
 ### Patch Changes
 
-- [`398904f14d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/398904f14d9) - [ux] Fixes a bug in version 13.1.0 where InlineDialog cannot be closed after it opens a Modal. There should be no other UI or UX changes.
+- [`398904f14d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/398904f14d9) - [ux] Fixes a bug in version 13.1.0 where InlineDialog cannot be closed after it opens a Modal. There should be no other UI or UX changes. Note that the click event listener's `capture: false` has been changed to `capture: true`. This may cause some issues with the opening or closing of the inline dialog in some situations e.g. if the open state of the inline dialog is in an outer component. You can solve this by trying to add a `preventDefault` to the click handler in the outer component or changing the inline dialog's event handler to `{ capture: true }`.
 
 ## 13.1.1
 

package/dist/cjs/InlineDialog/index.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
+var _bindEventListener = require("bind-event-listener");
+
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -29,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.1.4";
+var packageVersion = "13.1.8";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -39,7 +41,7 @@ var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
 };
 
-var InlineDialog = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref) {
   var _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
       _ref$onContentBlur = _ref.onContentBlur,
@@ -94,16 +96,35 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     }
   }, [onClose]);
   (0, _react.useEffect)(function () {
-    if (isOpen) {
-      window.addEventListener('click', handleClickOutside, {
-        capture: false
-      });
-      return function () {
-        window.removeEventListener('click', handleClickOutside, {
-          capture: false
-        });
-      };
+    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
+        }
+      });
+    });
+    return function () {
+      var _unbind;
+
+      window.clearTimeout(timeoutId);
+      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
+    };
   }, [handleClickOutside, isOpen]);
   var popper = isOpen ? (0, _core.jsx)(_popper.Popper, {
     placement: placement
@@ -143,8 +164,10 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       }
     }, children);
   }), popper);
-});
+}); // enzyme relies on components having a display name
+
 exports.InlineDialogWithoutAnalytics = InlineDialog;
+InlineDialog.displayName = 'InlineDialog';
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 
 var _default = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/version.json

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

package/dist/es2019/InlineDialog/index.js

@@ -1,13 +1,14 @@
 /** @jsx jsx */
 import React, { memo, useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
+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 { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 const packageName = "@atlaskit/inline-dialog";
-const packageVersion = "13.1.4";
+const packageVersion = "13.1.8";
 
 const checkIsChildOfPortal = node => {
   if (!node) {
@@ -17,7 +18,7 @@ const checkIsChildOfPortal = node => {
   return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
 };
 
-const InlineDialog = /*#__PURE__*/memo(({
+const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   isOpen = false,
   onContentBlur = noop,
   onContentClick = noop,
@@ -27,7 +28,7 @@ const InlineDialog = /*#__PURE__*/memo(({
   testId,
   content,
   children
-}) => {
+}) {
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const handleClickOutside = useCallback(event => {
@@ -69,16 +70,33 @@ const InlineDialog = /*#__PURE__*/memo(({
     }
   }, [onClose]);
   useEffect(() => {
-    if (isOpen) {
-      window.addEventListener('click', handleClickOutside, {
-        capture: false
-      });
-      return () => {
-        window.removeEventListener('click', handleClickOutside, {
-          capture: false
-        });
-      };
+    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
+        }
+      });
+    });
+    return () => {
+      var _unbind;
+
+      window.clearTimeout(timeoutId);
+      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
+    };
   }, [handleClickOutside, isOpen]);
   const popper = isOpen ? jsx(Popper, {
     placement: placement
@@ -116,7 +134,9 @@ const InlineDialog = /*#__PURE__*/memo(({
       }
     }
   }, children)), popper);
-});
+}); // enzyme relies on components having a display name
+
+InlineDialog.displayName = 'InlineDialog';
 export { InlineDialog as InlineDialogWithoutAnalytics };
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/version.json

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

package/dist/esm/InlineDialog/index.js

@@ -1,13 +1,14 @@
 /** @jsx jsx */
 import React, { memo, useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
+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 { Manager, Popper, Reference } from '@atlaskit/popper';
 import { Container } from './styled/container';
 var packageName = "@atlaskit/inline-dialog";
-var packageVersion = "13.1.4";
+var packageVersion = "13.1.8";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -17,7 +18,7 @@ var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
 };
 
-var InlineDialog = /*#__PURE__*/memo(function (_ref) {
+var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref) {
   var _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
       _ref$onContentBlur = _ref.onContentBlur,
@@ -72,16 +73,35 @@ var InlineDialog = /*#__PURE__*/memo(function (_ref) {
     }
   }, [onClose]);
   useEffect(function () {
-    if (isOpen) {
-      window.addEventListener('click', handleClickOutside, {
-        capture: false
-      });
-      return function () {
-        window.removeEventListener('click', handleClickOutside, {
-          capture: false
-        });
-      };
+    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
+        }
+      });
+    });
+    return function () {
+      var _unbind;
+
+      window.clearTimeout(timeoutId);
+      (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
+    };
   }, [handleClickOutside, isOpen]);
   var popper = isOpen ? jsx(Popper, {
     placement: placement
@@ -121,7 +141,9 @@ var InlineDialog = /*#__PURE__*/memo(function (_ref) {
       }
     }, children);
   }), popper);
-});
+}); // enzyme relies on components having a display name
+
+InlineDialog.displayName = 'InlineDialog';
 export { InlineDialog as InlineDialogWithoutAnalytics };
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.1.4",
+  "version": "13.1.8",
   "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/"
@@ -28,9 +28,10 @@
     "@atlaskit/ds-lib": "^1.3.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
+    "bind-event-listener": "^1.0.2",
     "react-node-resolver": "^1.0.1"
   },
   "peerDependencies": {
@@ -39,13 +40,12 @@
   "devDependencies": {
     "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
-    "@atlaskit/datetime-picker": "^11.0.0",
+    "@atlaskit/datetime-picker": "^11.1.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/modal-dialog": "^12.0.1",
+    "@atlaskit/modal-dialog": "^12.1.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
-    "@atlaskit/single-select": "^10.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -69,7 +69,7 @@
     "@repo/internal": {
       "analytics": "analytics-next",
       "theming": [
-        "new-theming-api",
+        "react-context",
         "tokens"
       ],
       "styling": "emotion",