@atlaskit/tooltip 17.8.10 → 18.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tooltip
 
+## 18.1.0
+
+### Minor Changes
+
+- [#61952](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61952) [`d00b9272c88c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d00b9272c88c) - [ux] Tooltips are now hidden during drags. This is to prevent janky UX.
+
+## 18.0.0
+
+### Major Changes
+
+- [#41881](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41881) [`1de74609c13`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1de74609c13) - Removed all remaining legacy theming logic from the Tag, Toggle and Tooltip components.
+
 ## 17.8.10
 
 ### Patch Changes

package/dist/cjs/Tooltip.js

@@ -20,6 +20,7 @@ var _durations = require("@atlaskit/motion/durations");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
+var _dragManager = require("./internal/drag-manager");
 var _tooltipManager = require("./internal/tooltip-manager");
 var _useUniqueId = _interopRequireDefault(require("./internal/use-unique-id"));
 var _TooltipContainer = _interopRequireDefault(require("./TooltipContainer"));
@@ -32,7 +33,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.10"
+  packageVersion: "18.1.0"
 };
 
 // Inverts motion direction
@@ -165,7 +166,38 @@ function Tooltip(_ref) {
       }
     };
   }, [abort]);
+  var isDraggingRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    return (0, _dragManager.register)({
+      onRegister: function onRegister(_ref2) {
+        var isDragging = _ref2.isDragging;
+        isDraggingRef.current = isDragging;
+      },
+      onDragStart: function onDragStart() {
+        var _apiRef$current;
+        /**
+         * Hiding any visible tooltips when a drag starts because otherwise it
+         * looks janky (disappears and reappears), and is not required.
+         */
+        (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.requestHide({
+          isImmediate: true
+        });
+        isDraggingRef.current = true;
+      },
+      onDragEnd: function onDragEnd() {
+        isDraggingRef.current = false;
+      }
+    });
+  }, []);
   var showTooltip = (0, _react.useCallback)(function (source) {
+    /**
+     * Prevent tooltips from being shown during a drag. This can occur with
+     * the native drag and drop API, where some pointer events can fire
+     * when they should not and lead to jank with tooltips.
+     */
+    if (isDraggingRef.current) {
+      return;
+    }
     if (apiRef.current && !apiRef.current.isActive()) {
       abort();
     }
@@ -178,8 +210,8 @@ function Tooltip(_ref) {
     var entry = {
       source: source,
       delay: lastDelay.current,
-      show: function show(_ref2) {
-        var isImmediate = _ref2.isImmediate;
+      show: function show(_ref3) {
+        var isImmediate = _ref3.isImmediate;
         // Call the onShow handler if it hasn't been called yet
         if (!hasCalledShowHandler.current) {
           hasCalledShowHandler.current = true;
@@ -187,8 +219,8 @@ function Tooltip(_ref) {
         }
         setState(isImmediate ? 'show-immediate' : 'fade-in');
       },
-      hide: function hide(_ref3) {
-        var isImmediate = _ref3.isImmediate;
+      hide: function hide(_ref4) {
+        var isImmediate = _ref4.isImmediate;
         if (isImmediate) {
           setState('hide');
         } else {
@@ -201,8 +233,8 @@ function Tooltip(_ref) {
     start(api);
   }, [abort, done, start]);
   var hideTooltipOnEsc = (0, _react.useCallback)(function () {
-    var _apiRef$current;
-    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.requestHide({
+    var _apiRef$current2;
+    (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.requestHide({
       isImmediate: true
     });
   }, [apiRef]);
@@ -301,8 +333,8 @@ function Tooltip(_ref) {
     }
   }, []);
   var onMouseMove = position === 'mouse' ? function (event) {
-    var _apiRef$current2;
-    if ((_apiRef$current2 = apiRef.current) !== null && _apiRef$current2 !== void 0 && _apiRef$current2.isActive()) {
+    var _apiRef$current3;
+    if ((_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.isActive()) {
       apiRef.current.mousePosition = (0, _utilities.getMousePosition)({
         left: event.clientX,
         top: event.clientY
@@ -340,10 +372,10 @@ function Tooltip(_ref) {
   var shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
   var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
   var getReferenceElement = function getReferenceElement() {
-    var _apiRef$current3;
-    if (position === 'mouse' && (_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.mousePosition) {
-      var _apiRef$current4;
-      return (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.mousePosition;
+    var _apiRef$current4;
+    if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
+      var _apiRef$current5;
+      return (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.mousePosition;
     }
     return targetRef.current || undefined;
   };
@@ -397,11 +429,11 @@ function Tooltip(_ref) {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
-  }, function (_ref4) {
-    var ref = _ref4.ref,
-      style = _ref4.style,
-      update = _ref4.update,
-      placement = _ref4.placement;
+  }, function (_ref5) {
+    var ref = _ref5.ref,
+      style = _ref5.style,
+      update = _ref5.update,
+      placement = _ref5.placement;
     // Invert the entrance and exit directions.
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
@@ -414,8 +446,8 @@ function Tooltip(_ref) {
       exitDirection: direction,
       onFinish: onAnimationFinished,
       duration: state === 'show-immediate' ? 0 : _durations.mediumDurationMs
-    }, function (_ref5) {
-      var className = _ref5.className;
+    }, function (_ref6) {
+      var className = _ref6.className;
       return (0, _react2.jsx)(Container, {
         ref: ref
         /**

package/dist/cjs/TooltipContainer.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
 /** @jsx jsx */
 
@@ -22,7 +21,9 @@ var baseStyles = (0, _react2.css)({
   fontSize: "var(--ds-font-size-075, 12px)",
   lineHeight: 1.3,
   overflowWrap: 'break-word',
-  wordWrap: 'break-word'
+  wordWrap: 'break-word',
+  backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
+  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
 });
 var truncateStyles = (0, _react2.css)({
   maxWidth: '420px',
@@ -30,14 +31,6 @@ var truncateStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var lightStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
-});
-var darkStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.DN0, ")"),
-  color: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
-});
 var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipContainer(_ref, ref) {
   var style = _ref.style,
     className = _ref.className,
@@ -48,20 +41,17 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
     id = _ref.id;
-  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return (0, _react2.jsx)(_TooltipPrimitive.default, {
-      ref: ref,
-      style: style,
-      className: className,
-      placement: placement,
-      testId: testId,
-      id: id,
-      onMouseOut: onMouseOut,
-      onMouseOver: onMouseOver,
-      css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
-    }, children);
-  });
+  return (0, _react2.jsx)(_TooltipPrimitive.default, {
+    ref: ref,
+    style: style,
+    className: className,
+    placement: placement,
+    testId: testId,
+    id: id,
+    onMouseOut: onMouseOut,
+    onMouseOver: onMouseOver,
+    css: [baseStyles, truncate ? truncateStyles : null]
+  }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';
 var _default = exports.default = TooltipContainer;

package/dist/cjs/TooltipPrimitive.js

@@ -32,9 +32,12 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
     "data-testid": testId ? "".concat(testId, "--wrapper") : undefined
   }, (0, _react2.jsx)("div", {
     role: "tooltip",
-    className: className,
+    className: className
+    // Because the tooltip should not be focusable, there is no reason to have key events.
+    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver,
+    onMouseOver: onMouseOver
+    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/dist/cjs/internal/drag-manager.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.register = register;
+var _bindEventListener = require("bind-event-listener");
+/**
+ * We are listening directly to drag events instead of using a monitor from
+ * `@atlaskit/pragmatic-drag-and-drop` to avoid the bundle size cost, as it
+ * would affect almost every view in every product.
+ *
+ * We can reconsider this choice in the future.
+ */
+
+var registrations = new Set();
+var cleanupEndEventListeners = null;
+function onDragStart() {
+  if (cleanupEndEventListeners) {
+    // If the cleanup function exists then we've already run this
+    return;
+  }
+  cleanupEndEventListeners = (0, _bindEventListener.bindAll)(window, [{
+    type: 'dragend',
+    listener: onDragEnd
+  }, {
+    type: 'pointerdown',
+    listener: onDragEnd
+  }, {
+    type: 'pointermove',
+    listener: function () {
+      var callCount = 0;
+      return function listener() {
+        // Using 20 as it is far bigger than the most observed (3)
+        if (callCount < 20) {
+          callCount++;
+          return;
+        }
+        onDragEnd();
+      };
+    }()
+  }]);
+  var clone = Array.from(registrations);
+  clone.forEach(function (subscriber) {
+    subscriber.onDragStart();
+  });
+}
+function onDragEnd() {
+  var _cleanupEndEventListe;
+  (_cleanupEndEventListe = cleanupEndEventListeners) === null || _cleanupEndEventListe === void 0 || _cleanupEndEventListe();
+  cleanupEndEventListeners = null;
+  var clone = Array.from(registrations);
+  clone.forEach(function (subscriber) {
+    subscriber.onDragEnd();
+  });
+}
+function bindStartEvents() {
+  return (0, _bindEventListener.bindAll)(window, [{
+    type: 'dragstart',
+    listener: onDragStart
+  }, {
+    type: 'dragenter',
+    listener: onDragStart
+  }]);
+}
+var cleanupStartEventListeners = null;
+function register(registration) {
+  // if first registration, bind event listeners
+  if (!cleanupStartEventListeners) {
+    // note: currently never unbinding these event listeners
+    cleanupStartEventListeners = bindStartEvents();
+  }
+  registrations.add(registration);
+
+  /**
+   * The reasoning for this behavior is so that if a tooltip mounts during
+   * a drag it can still be suppressed.
+   *
+   * We use a separate callback instead of onDragStart to avoid infinite loops.
+   */
+  registration.onRegister({
+    isDragging: cleanupEndEventListeners !== null
+  });
+  return function unregister() {
+    registrations.delete(registration);
+    if (registrations.size === 0) {
+      var _cleanupStartEventLis;
+      (_cleanupStartEventLis = cleanupStartEventListeners) === null || _cleanupStartEventLis === void 0 || _cleanupStartEventLis();
+      cleanupStartEventListeners = null;
+    }
+  };
+}

package/dist/es2019/Tooltip.js

@@ -12,6 +12,7 @@ import { mediumDurationMs } from '@atlaskit/motion/durations';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
+import { register } from './internal/drag-manager';
 import { show } from './internal/tooltip-manager';
 import useUniqueId from './internal/use-unique-id';
 import TooltipContainer from './TooltipContainer';
@@ -20,7 +21,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.10"
+  packageVersion: "18.1.0"
 };
 
 // Inverts motion direction
@@ -140,7 +141,39 @@ function Tooltip({
       }
     };
   }, [abort]);
+  const isDraggingRef = useRef(false);
+  useEffect(() => {
+    return register({
+      onRegister({
+        isDragging
+      }) {
+        isDraggingRef.current = isDragging;
+      },
+      onDragStart() {
+        var _apiRef$current;
+        /**
+         * Hiding any visible tooltips when a drag starts because otherwise it
+         * looks janky (disappears and reappears), and is not required.
+         */
+        (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.requestHide({
+          isImmediate: true
+        });
+        isDraggingRef.current = true;
+      },
+      onDragEnd() {
+        isDraggingRef.current = false;
+      }
+    });
+  }, []);
   const showTooltip = useCallback(source => {
+    /**
+     * Prevent tooltips from being shown during a drag. This can occur with
+     * the native drag and drop API, where some pointer events can fire
+     * when they should not and lead to jank with tooltips.
+     */
+    if (isDraggingRef.current) {
+      return;
+    }
     if (apiRef.current && !apiRef.current.isActive()) {
       abort();
     }
@@ -178,8 +211,8 @@ function Tooltip({
     start(api);
   }, [abort, done, start]);
   const hideTooltipOnEsc = useCallback(() => {
-    var _apiRef$current;
-    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.requestHide({
+    var _apiRef$current2;
+    (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.requestHide({
       isImmediate: true
     });
   }, [apiRef]);
@@ -278,8 +311,8 @@ function Tooltip({
     }
   }, []);
   const onMouseMove = position === 'mouse' ? event => {
-    var _apiRef$current2;
-    if ((_apiRef$current2 = apiRef.current) !== null && _apiRef$current2 !== void 0 && _apiRef$current2.isActive()) {
+    var _apiRef$current3;
+    if ((_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.isActive()) {
       apiRef.current.mousePosition = getMousePosition({
         left: event.clientX,
         top: event.clientY
@@ -317,10 +350,10 @@ function Tooltip({
   const shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
   const shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
   const getReferenceElement = () => {
-    var _apiRef$current3;
-    if (position === 'mouse' && (_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.mousePosition) {
-      var _apiRef$current4;
-      return (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.mousePosition;
+    var _apiRef$current4;
+    if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
+      var _apiRef$current5;
+      return (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.mousePosition;
     }
     return targetRef.current || undefined;
   };

package/dist/es2019/TooltipContainer.js

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
+import { N0, N800 } from '@atlaskit/theme/colors';
 import TooltipPrimitive from './TooltipPrimitive';
 const baseStyles = css({
   boxSizing: 'border-box',
@@ -14,7 +13,9 @@ const baseStyles = css({
   fontSize: "var(--ds-font-size-075, 12px)",
   lineHeight: 1.3,
   overflowWrap: 'break-word',
-  wordWrap: 'break-word'
+  wordWrap: 'break-word',
+  backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
+  color: `var(--ds-text-inverse, ${N0})`
 });
 const truncateStyles = css({
   maxWidth: '420px',
@@ -22,14 +23,6 @@ const truncateStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const lightStyles = css({
-  backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
-  color: `var(--ds-text-inverse, ${N0})`
-});
-const darkStyles = css({
-  backgroundColor: `var(--ds-background-neutral-bold, ${DN0})`,
-  color: `var(--ds-text-inverse, ${DN600})`
-});
 const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
   style,
   className,
@@ -41,9 +34,7 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
   onMouseOver,
   id
 }, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
-    mode
-  }) => jsx(TooltipPrimitive, {
+  return jsx(TooltipPrimitive, {
     ref: ref,
     style: style,
     className: className,
@@ -52,8 +43,8 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
     id: id,
     onMouseOut: onMouseOut,
     onMouseOver: onMouseOver,
-    css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
-  }, children));
+    css: [baseStyles, truncate ? truncateStyles : null]
+  }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';
 export default TooltipContainer;

package/dist/es2019/TooltipPrimitive.js

@@ -27,9 +27,12 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
     "data-testid": testId ? `${testId}--wrapper` : undefined
   }, jsx("div", {
     role: "tooltip",
-    className: className,
+    className: className
+    // Because the tooltip should not be focusable, there is no reason to have key events.
+    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver,
+    onMouseOver: onMouseOver
+    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/dist/es2019/internal/drag-manager.js

@@ -0,0 +1,85 @@
+/**
+ * We are listening directly to drag events instead of using a monitor from
+ * `@atlaskit/pragmatic-drag-and-drop` to avoid the bundle size cost, as it
+ * would affect almost every view in every product.
+ *
+ * We can reconsider this choice in the future.
+ */
+import { bindAll } from 'bind-event-listener';
+const registrations = new Set();
+let cleanupEndEventListeners = null;
+function onDragStart() {
+  if (cleanupEndEventListeners) {
+    // If the cleanup function exists then we've already run this
+    return;
+  }
+  cleanupEndEventListeners = bindAll(window, [{
+    type: 'dragend',
+    listener: onDragEnd
+  }, {
+    type: 'pointerdown',
+    listener: onDragEnd
+  }, {
+    type: 'pointermove',
+    listener: (() => {
+      let callCount = 0;
+      return function listener() {
+        // Using 20 as it is far bigger than the most observed (3)
+        if (callCount < 20) {
+          callCount++;
+          return;
+        }
+        onDragEnd();
+      };
+    })()
+  }]);
+  const clone = Array.from(registrations);
+  clone.forEach(subscriber => {
+    subscriber.onDragStart();
+  });
+}
+function onDragEnd() {
+  var _cleanupEndEventListe;
+  (_cleanupEndEventListe = cleanupEndEventListeners) === null || _cleanupEndEventListe === void 0 ? void 0 : _cleanupEndEventListe();
+  cleanupEndEventListeners = null;
+  const clone = Array.from(registrations);
+  clone.forEach(subscriber => {
+    subscriber.onDragEnd();
+  });
+}
+function bindStartEvents() {
+  return bindAll(window, [{
+    type: 'dragstart',
+    listener: onDragStart
+  }, {
+    type: 'dragenter',
+    listener: onDragStart
+  }]);
+}
+let cleanupStartEventListeners = null;
+export function register(registration) {
+  // if first registration, bind event listeners
+  if (!cleanupStartEventListeners) {
+    // note: currently never unbinding these event listeners
+    cleanupStartEventListeners = bindStartEvents();
+  }
+  registrations.add(registration);
+
+  /**
+   * The reasoning for this behavior is so that if a tooltip mounts during
+   * a drag it can still be suppressed.
+   *
+   * We use a separate callback instead of onDragStart to avoid infinite loops.
+   */
+  registration.onRegister({
+    isDragging: cleanupEndEventListeners !== null
+  });
+  return function unregister() {
+    registrations.delete(registration);
+    if (registrations.size === 0) {
+      var _cleanupStartEventLis;
+      (_cleanupStartEventLis = cleanupStartEventListeners) === null || _cleanupStartEventLis === void 0 ? void 0 : _cleanupStartEventLis();
+      cleanupStartEventListeners = null;
+    }
+  };
+}

package/dist/esm/Tooltip.js

@@ -16,6 +16,7 @@ import { mediumDurationMs } from '@atlaskit/motion/durations';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
+import { register } from './internal/drag-manager';
 import { show } from './internal/tooltip-manager';
 import useUniqueId from './internal/use-unique-id';
 import TooltipContainer from './TooltipContainer';
@@ -24,7 +25,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.10"
+  packageVersion: "18.1.0"
 };
 
 // Inverts motion direction
@@ -157,7 +158,38 @@ function Tooltip(_ref) {
       }
     };
   }, [abort]);
+  var isDraggingRef = useRef(false);
+  useEffect(function () {
+    return register({
+      onRegister: function onRegister(_ref2) {
+        var isDragging = _ref2.isDragging;
+        isDraggingRef.current = isDragging;
+      },
+      onDragStart: function onDragStart() {
+        var _apiRef$current;
+        /**
+         * Hiding any visible tooltips when a drag starts because otherwise it
+         * looks janky (disappears and reappears), and is not required.
+         */
+        (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.requestHide({
+          isImmediate: true
+        });
+        isDraggingRef.current = true;
+      },
+      onDragEnd: function onDragEnd() {
+        isDraggingRef.current = false;
+      }
+    });
+  }, []);
   var showTooltip = useCallback(function (source) {
+    /**
+     * Prevent tooltips from being shown during a drag. This can occur with
+     * the native drag and drop API, where some pointer events can fire
+     * when they should not and lead to jank with tooltips.
+     */
+    if (isDraggingRef.current) {
+      return;
+    }
     if (apiRef.current && !apiRef.current.isActive()) {
       abort();
     }
@@ -170,8 +202,8 @@ function Tooltip(_ref) {
     var entry = {
       source: source,
       delay: lastDelay.current,
-      show: function show(_ref2) {
-        var isImmediate = _ref2.isImmediate;
+      show: function show(_ref3) {
+        var isImmediate = _ref3.isImmediate;
         // Call the onShow handler if it hasn't been called yet
         if (!hasCalledShowHandler.current) {
           hasCalledShowHandler.current = true;
@@ -179,8 +211,8 @@ function Tooltip(_ref) {
         }
         setState(isImmediate ? 'show-immediate' : 'fade-in');
       },
-      hide: function hide(_ref3) {
-        var isImmediate = _ref3.isImmediate;
+      hide: function hide(_ref4) {
+        var isImmediate = _ref4.isImmediate;
         if (isImmediate) {
           setState('hide');
         } else {
@@ -193,8 +225,8 @@ function Tooltip(_ref) {
     start(api);
   }, [abort, done, start]);
   var hideTooltipOnEsc = useCallback(function () {
-    var _apiRef$current;
-    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.requestHide({
+    var _apiRef$current2;
+    (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.requestHide({
       isImmediate: true
     });
   }, [apiRef]);
@@ -293,8 +325,8 @@ function Tooltip(_ref) {
     }
   }, []);
   var onMouseMove = position === 'mouse' ? function (event) {
-    var _apiRef$current2;
-    if ((_apiRef$current2 = apiRef.current) !== null && _apiRef$current2 !== void 0 && _apiRef$current2.isActive()) {
+    var _apiRef$current3;
+    if ((_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.isActive()) {
       apiRef.current.mousePosition = getMousePosition({
         left: event.clientX,
         top: event.clientY
@@ -332,10 +364,10 @@ function Tooltip(_ref) {
   var shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
   var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
   var getReferenceElement = function getReferenceElement() {
-    var _apiRef$current3;
-    if (position === 'mouse' && (_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.mousePosition) {
-      var _apiRef$current4;
-      return (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.mousePosition;
+    var _apiRef$current4;
+    if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
+      var _apiRef$current5;
+      return (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.mousePosition;
     }
     return targetRef.current || undefined;
   };
@@ -389,11 +421,11 @@ function Tooltip(_ref) {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
-  }, function (_ref4) {
-    var ref = _ref4.ref,
-      style = _ref4.style,
-      update = _ref4.update,
-      placement = _ref4.placement;
+  }, function (_ref5) {
+    var ref = _ref5.ref,
+      style = _ref5.style,
+      update = _ref5.update,
+      placement = _ref5.placement;
     // Invert the entrance and exit directions.
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
@@ -406,8 +438,8 @@ function Tooltip(_ref) {
       exitDirection: direction,
       onFinish: onAnimationFinished,
       duration: state === 'show-immediate' ? 0 : mediumDurationMs
-    }, function (_ref5) {
-      var className = _ref5.className;
+    }, function (_ref6) {
+      var className = _ref6.className;
       return jsx(Container, {
         ref: ref
         /**

package/dist/esm/TooltipContainer.js

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
-import GlobalTheme from '@atlaskit/theme/components';
+import { N0, N800 } from '@atlaskit/theme/colors';
 import TooltipPrimitive from './TooltipPrimitive';
 var baseStyles = css({
   boxSizing: 'border-box',
@@ -14,7 +13,9 @@ var baseStyles = css({
   fontSize: "var(--ds-font-size-075, 12px)",
   lineHeight: 1.3,
   overflowWrap: 'break-word',
-  wordWrap: 'break-word'
+  wordWrap: 'break-word',
+  backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
+  color: "var(--ds-text-inverse, ".concat(N0, ")")
 });
 var truncateStyles = css({
   maxWidth: '420px',
@@ -22,14 +23,6 @@ var truncateStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var lightStyles = css({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
-  color: "var(--ds-text-inverse, ".concat(N0, ")")
-});
-var darkStyles = css({
-  backgroundColor: "var(--ds-background-neutral-bold, ".concat(DN0, ")"),
-  color: "var(--ds-text-inverse, ".concat(DN600, ")")
-});
 var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, ref) {
   var style = _ref.style,
     className = _ref.className,
@@ -40,20 +33,17 @@ var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, r
     onMouseOut = _ref.onMouseOut,
     onMouseOver = _ref.onMouseOver,
     id = _ref.id;
-  return jsx(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return jsx(TooltipPrimitive, {
-      ref: ref,
-      style: style,
-      className: className,
-      placement: placement,
-      testId: testId,
-      id: id,
-      onMouseOut: onMouseOut,
-      onMouseOver: onMouseOver,
-      css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
-    }, children);
-  });
+  return jsx(TooltipPrimitive, {
+    ref: ref,
+    style: style,
+    className: className,
+    placement: placement,
+    testId: testId,
+    id: id,
+    onMouseOut: onMouseOut,
+    onMouseOver: onMouseOver,
+    css: [baseStyles, truncate ? truncateStyles : null]
+  }, children);
 });
 TooltipContainer.displayName = 'TooltipContainer';
 export default TooltipContainer;

package/dist/esm/TooltipPrimitive.js

@@ -26,9 +26,12 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
     "data-testid": testId ? "".concat(testId, "--wrapper") : undefined
   }, jsx("div", {
     role: "tooltip",
-    className: className,
+    className: className
+    // Because the tooltip should not be focusable, there is no reason to have key events.
+    /* eslint-disable jsx-a11y/mouse-events-have-key-events */,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOver,
+    onMouseOver: onMouseOver
+    /* eslint-enable jsx-a11y/mouse-events-have-key-events */,
     css: primitiveStyles,
     "data-placement": placement,
     "data-testid": testId,

package/dist/esm/internal/drag-manager.js

@@ -0,0 +1,85 @@
+/**
+ * We are listening directly to drag events instead of using a monitor from
+ * `@atlaskit/pragmatic-drag-and-drop` to avoid the bundle size cost, as it
+ * would affect almost every view in every product.
+ *
+ * We can reconsider this choice in the future.
+ */
+import { bindAll } from 'bind-event-listener';
+var registrations = new Set();
+var cleanupEndEventListeners = null;
+function onDragStart() {
+  if (cleanupEndEventListeners) {
+    // If the cleanup function exists then we've already run this
+    return;
+  }
+  cleanupEndEventListeners = bindAll(window, [{
+    type: 'dragend',
+    listener: onDragEnd
+  }, {
+    type: 'pointerdown',
+    listener: onDragEnd
+  }, {
+    type: 'pointermove',
+    listener: function () {
+      var callCount = 0;
+      return function listener() {
+        // Using 20 as it is far bigger than the most observed (3)
+        if (callCount < 20) {
+          callCount++;
+          return;
+        }
+        onDragEnd();
+      };
+    }()
+  }]);
+  var clone = Array.from(registrations);
+  clone.forEach(function (subscriber) {
+    subscriber.onDragStart();
+  });
+}
+function onDragEnd() {
+  var _cleanupEndEventListe;
+  (_cleanupEndEventListe = cleanupEndEventListeners) === null || _cleanupEndEventListe === void 0 || _cleanupEndEventListe();
+  cleanupEndEventListeners = null;
+  var clone = Array.from(registrations);
+  clone.forEach(function (subscriber) {
+    subscriber.onDragEnd();
+  });
+}
+function bindStartEvents() {
+  return bindAll(window, [{
+    type: 'dragstart',
+    listener: onDragStart
+  }, {
+    type: 'dragenter',
+    listener: onDragStart
+  }]);
+}
+var cleanupStartEventListeners = null;
+export function register(registration) {
+  // if first registration, bind event listeners
+  if (!cleanupStartEventListeners) {
+    // note: currently never unbinding these event listeners
+    cleanupStartEventListeners = bindStartEvents();
+  }
+  registrations.add(registration);
+
+  /**
+   * The reasoning for this behavior is so that if a tooltip mounts during
+   * a drag it can still be suppressed.
+   *
+   * We use a separate callback instead of onDragStart to avoid infinite loops.
+   */
+  registration.onRegister({
+    isDragging: cleanupEndEventListeners !== null
+  });
+  return function unregister() {
+    registrations.delete(registration);
+    if (registrations.size === 0) {
+      var _cleanupStartEventLis;
+      (_cleanupStartEventLis = cleanupStartEventListeners) === null || _cleanupStartEventLis === void 0 || _cleanupStartEventLis();
+      cleanupStartEventListeners = null;
+    }
+  };
+}

package/dist/types/internal/drag-manager.d.ts

@@ -0,0 +1,10 @@
+type Registration = {
+    onRegister: (args: {
+        isDragging: boolean;
+    }) => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+};
+type CleanupFn = () => void;
+export declare function register(registration: Registration): CleanupFn;
+export {};

package/dist/types-ts4.5/internal/drag-manager.d.ts

@@ -0,0 +1,10 @@
+type Registration = {
+    onRegister: (args: {
+        isDragging: boolean;
+    }) => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+};
+type CleanupFn = () => void;
+export declare function register(registration: Registration): CleanupFn;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.8.10",
+  "version": "18.1.0",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^16.13.0",
+    "@atlaskit/button": "^17.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/tmp/api-report-tmp.d.ts

@@ -1,106 +0,0 @@
-## API Report File for "@atlaskit/tooltip"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ComponentType } from 'react';
-import { CSSProperties } from 'react';
-import { ForwardRefExoticComponent } from 'react';
-import { jsx } from '@emotion/react';
-import { Placement } from '@atlaskit/popper';
-import { ReactNode } from 'react';
-import { RefAttributes } from 'react';
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-export type PositionType = 'mouse' | PositionTypeBase;
-
-// @public (undocumented)
-type PositionTypeBase = Placement;
-
-// @public (undocumented)
-function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
-
-// @public (undocumented)
-namespace Tooltip {
-    var // (undocumented)
-    displayName: string;
-}
-export default Tooltip;
-
-// @public (undocumented)
-export const TooltipPrimitive: ForwardRefExoticComponent<Pick<TooltipPrimitiveProps, "children" | "className" | "id" | "onMouseOut" | "onMouseOver" | "placement" | "style" | "testId" | "truncate"> & RefAttributes<HTMLDivElement>>;
-
-// @public (undocumented)
-export interface TooltipPrimitiveProps {
-    // (undocumented)
-    children: ReactNode;
-    // (undocumented)
-    className?: string;
-    // (undocumented)
-    id?: string;
-    // (undocumented)
-    onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
-    // (undocumented)
-    onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
-    // (undocumented)
-    placement: PositionType;
-    // (undocumented)
-    ref: React.Ref<any>;
-    // (undocumented)
-    style?: CSSProperties;
-    // (undocumented)
-    testId?: string;
-    // (undocumented)
-    truncate?: boolean;
-}
-
-// @public (undocumented)
-export interface TooltipProps {
-    analyticsContext?: Record<string, any>;
-    children: ((props: TriggerProps) => ReactNode) | ReactNode;
-    component?: ComponentType<TooltipPrimitiveProps>;
-    content: (({ update }: {
-        update: () => void;
-    }) => ReactNode) | ReactNode;
-    delay?: number;
-    hideTooltipOnClick?: boolean;
-    hideTooltipOnMouseDown?: boolean;
-    mousePosition?: PositionTypeBase;
-    onHide?: (analyticsEvent: UIAnalyticsEvent) => void;
-    onShow?: (analyticsEvent: UIAnalyticsEvent) => void;
-    position?: PositionType;
-    strategy?: 'absolute' | 'fixed' | undefined;
-    tag?: React.ComponentType<React.AllHTMLAttributes<HTMLElement> & {
-        ref: React.Ref<HTMLElement>;
-    }> | keyof JSX.IntrinsicElements;
-    testId?: string;
-    truncate?: boolean;
-}
-
-// @public (undocumented)
-interface TriggerProps {
-    // (undocumented)
-    'aria-describedby'?: string | undefined;
-    // (undocumented)
-    onBlur: (event: React.FocusEvent<HTMLElement>) => void;
-    // (undocumented)
-    onClick: (event: React.MouseEvent<HTMLElement>) => void;
-    // (undocumented)
-    onFocus: (event: React.FocusEvent<HTMLElement>) => void;
-    // (undocumented)
-    onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
-    // (undocumented)
-    onMouseMove: ((event: React.MouseEvent<HTMLElement>) => void) | undefined;
-    // (undocumented)
-    onMouseOut: (event: React.MouseEvent<HTMLElement>) => void;
-    // (undocumented)
-    onMouseOver: (event: React.MouseEvent<HTMLElement>) => void;
-    // (undocumented)
-    ref: (node: HTMLElement | null) => void;
-}
-
-// (No @packageDocumentation comment for this package)
-
-```