@atlaskit/inline-dialog 13.1.5 → 13.1.9

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/inline-dialog
 
+## 13.1.9
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 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
@@ -22,7 +47,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.5";
+var packageVersion = "13.1.9";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -94,16 +96,35 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_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

package/dist/cjs/InlineDialog/styled/container.js

@@ -21,8 +21,6 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -32,16 +30,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var themedBackground = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.overlay', _colors.N0),
-  dark: (0, _tokens.token)('color.background.overlay', _colors.DN50)
+  light: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-background-overlay, ".concat(_colors.DN50, ")")
 });
 var themedColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
-  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
+  light: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
+  dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
 });
 var themedBoxShadow = (0, _components.themed)({
-  light: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
-  dark: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A))
+  light: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  dark: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")")
 });
 var borderRadius = (0, _constants.borderRadius)();
 var gridSize = (0, _constants.gridSize)();

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.1.5",
+	"version": "13.1.9",
 	"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.5";
+const packageVersion = "13.1.9";
 
 const checkIsChildOfPortal = node => {
   if (!node) {
@@ -69,16 +70,33 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
     }
   }, [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

package/dist/es2019/InlineDialog/styled/container.js

@@ -8,18 +8,17 @@ import { css, jsx } from '@emotion/core';
 import { DN50, DN50A, DN600, DN60A, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const themedBackground = themed({
-  light: token('color.background.overlay', N0),
-  dark: token('color.background.overlay', DN50)
+  light: `var(--ds-background-overlay, ${N0})`,
+  dark: `var(--ds-background-overlay, ${DN50})`
 });
 const themedColor = themed({
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: `var(--ds-text-highEmphasis, ${N900})`,
+  dark: `var(--ds-text-highEmphasis, ${DN600})`
 });
 const themedBoxShadow = themed({
-  light: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
-  dark: token('shadow.overlay', `0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`)
+  light: `var(--ds-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+  dark: `var(--ds-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
 });
 const borderRadius = getBorderRadius();
 const gridSize = getGridSize();

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "13.1.5",
+	"version": "13.1.9",
 	"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.5";
+var packageVersion = "13.1.9";
 
 var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -72,16 +73,35 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_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

package/dist/esm/InlineDialog/styled/container.js

@@ -14,18 +14,17 @@ import { css, jsx } from '@emotion/core';
 import { DN50, DN50A, DN600, DN60A, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius as getBorderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var themedBackground = themed({
-  light: token('color.background.overlay', N0),
-  dark: token('color.background.overlay', DN50)
+  light: "var(--ds-background-overlay, ".concat(N0, ")"),
+  dark: "var(--ds-background-overlay, ".concat(DN50, ")")
 });
 var themedColor = themed({
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
+  dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
 });
 var themedBoxShadow = themed({
-  light: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
-  dark: token('shadow.overlay', "0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A))
+  light: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+  dark: "var(--ds-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
 });
 var borderRadius = getBorderRadius();
 var gridSize = getGridSize();

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.1.5",
+  "version": "13.1.9",
   "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.4.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.2.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,10 +69,13 @@
     "@repo/internal": {
       "analytics": "analytics-next",
       "theming": [
-        "new-theming-api",
+        "react-context",
         "tokens"
       ],
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "design-system": "v1",
       "deprecation": "no-deprecated-imports"
     }