@atlaskit/inline-dialog 13.1.6 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @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
+
+- [`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

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.6";
+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/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.6",
+	"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.6";
+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/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.6",
+	"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.6";
+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/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.6",
+	"version": "13.2.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-dialog",
-  "version": "13.1.6",
+  "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/"
@@ -28,7 +28,7 @@
     "@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",
@@ -40,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": "*",
@@ -70,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"
     }