@atlaskit/tooltip 18.0.0 → 18.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tooltip
 
+## 18.1.1
+
+### Patch Changes
+
+- [#64251](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64251) [`92b280e734a7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/92b280e734a7) - Add a hidden tooltip content when tooltip is in a modal for screen reader announcement
+
+## 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

package/dist/cjs/Tooltip.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -20,6 +19,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"));
@@ -27,12 +27,12 @@ var _utilities = require("./utilities");
 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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.0.0"
+  packageVersion: "18.1.1"
 };
 
 // Inverts motion direction
@@ -165,7 +165,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 +209,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 +218,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 +232,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 +332,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 +371,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;
   };
@@ -381,42 +412,48 @@ function Tooltip(_ref) {
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return (0, _react2.jsx)(_react.default.Fragment, null, typeof children === 'function' ?
+  var hiddenContent = /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": testId ? "".concat(testId, "-hidden") : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
+  _react.default.createElement(_react.default.Fragment, null, children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  })) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
+  })), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/_react.default.createElement(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? (0, _react2.jsx)(_portal.default, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/_react.default.createElement(_portal.default, {
     zIndex: tooltipZIndex
-  }, (0, _react2.jsx)(_popper.Popper, {
+  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     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
     var direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return (0, _react2.jsx)(_motion.ExitingPersistence, {
+    return /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && (0, _react2.jsx)(_motion.FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
       onFinish: onAnimationFinished,
       duration: state === 'show-immediate' ? 0 : _durations.mediumDurationMs
-    }, function (_ref5) {
-      var className = _ref5.className;
-      return (0, _react2.jsx)(Container, {
+    }, function (_ref6) {
+      var className = _ref6.className;
+      return /*#__PURE__*/_react.default.createElement(Container, {
         ref: ref
         /**
          * "Tooltip" classname is a hook used by tests to manipulate
@@ -428,8 +465,7 @@ function Tooltip(_ref) {
         placement: tooltipPosition,
         testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOverTooltip,
-        id: tooltipId
+        onMouseOver: onMouseOverTooltip
       }, typeof content === 'function' ? content({
         update: update
       }) : content);

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

@@ -1,8 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -12,6 +9,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 +18,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.0.0"
+  packageVersion: "18.1.1"
 };
 
 // Inverts motion direction
@@ -140,7 +138,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 +208,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 +308,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 +347,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;
   };
@@ -358,20 +388,26 @@ function Tooltip({
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return jsx(React.Fragment, null, typeof children === 'function' ?
+  const hiddenContent = /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId ? `${testId}-hidden` : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children({
+  React.createElement(React.Fragment, null, children({
     ...tooltipTriggerProps,
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  }) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+  }), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/React.createElement(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? jsx(Portal, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/React.createElement(Portal, {
     zIndex: tooltipZIndex
-  }, jsx(Popper, {
+  }, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -385,9 +421,9 @@ function Tooltip({
     // 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
     const direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return jsx(ExitingPersistence, {
+    return /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && jsx(FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/React.createElement(FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -395,7 +431,7 @@ function Tooltip({
       duration: state === 'show-immediate' ? 0 : mediumDurationMs
     }, ({
       className
-    }) => jsx(Container, {
+    }) => /*#__PURE__*/React.createElement(Container, {
       ref: ref
       /**
        * "Tooltip" classname is a hook used by tests to manipulate
@@ -407,8 +443,7 @@ function Tooltip({
       placement: tooltipPosition,
       testId: getReferenceElement() ? testId : testId && `${testId}--unresolved`,
       onMouseOut: onMouseOut,
-      onMouseOver: onMouseOverTooltip,
-      id: tooltipId
+      onMouseOver: onMouseOverTooltip
     }, typeof content === 'function' ? content({
       update
     }) : content)));

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

@@ -3,10 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/** @jsx jsx */
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -16,6 +13,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 +22,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.0.0"
+  packageVersion: "18.1.1"
 };
 
 // Inverts motion direction
@@ -157,7 +155,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 +199,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 +208,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 +222,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 +322,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 +361,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;
   };
@@ -373,42 +402,48 @@ function Tooltip(_ref) {
       target.removeAttribute('aria-describedby');
     }
   }, [shouldRenderTooltipContainer, tooltipId]);
-  return jsx(React.Fragment, null, typeof children === 'function' ?
+  var hiddenContent = /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId ? "".concat(testId, "-hidden") : undefined,
+    hidden: true,
+    id: tooltipId
+  }, typeof content === 'function' ? content({}) : content);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
+  /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
-  children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
+  React.createElement(React.Fragment, null, children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
     'aria-describedby': tooltipId,
     ref: setDirectRef
-  })) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+  })), shouldRenderTooltipContainer && hiddenContent) : /*#__PURE__*/React.createElement(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     ref: setImplicitRefFromChildren,
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? jsx(Portal, {
+  }), children, shouldRenderTooltipContainer && hiddenContent), shouldRenderTooltipContainer ? /*#__PURE__*/React.createElement(Portal, {
     zIndex: tooltipZIndex
-  }, jsx(Popper, {
+  }, /*#__PURE__*/React.createElement(Popper, {
     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
     var direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return jsx(ExitingPersistence, {
+    return /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && jsx(FadeIn, {
+    }, shouldRenderTooltipChildren && /*#__PURE__*/React.createElement(FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
       onFinish: onAnimationFinished,
       duration: state === 'show-immediate' ? 0 : mediumDurationMs
-    }, function (_ref5) {
-      var className = _ref5.className;
-      return jsx(Container, {
+    }, function (_ref6) {
+      var className = _ref6.className;
+      return /*#__PURE__*/React.createElement(Container, {
         ref: ref
         /**
          * "Tooltip" classname is a hook used by tests to manipulate
@@ -420,8 +455,7 @@ function Tooltip(_ref) {
         placement: tooltipPosition,
         testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
-        onMouseOver: onMouseOverTooltip,
-        id: tooltipId
+        onMouseOver: onMouseOverTooltip
       }, typeof content === 'function' ? content({
         update: update
       }) : content);

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/Tooltip.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { TooltipProps } from './types';
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

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/types.d.ts

@@ -25,7 +25,7 @@ export interface TooltipProps {
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
     content: ReactNode | (({ update }: {
-        update: () => void;
+        update?: () => void;
     }) => ReactNode);
     /**
      * Extend `TooltipPrimitive` to create your own tooltip and pass it as component

package/dist/types-ts4.5/Tooltip.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { TooltipProps } from './types';
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

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/dist/types-ts4.5/types.d.ts

@@ -25,7 +25,7 @@ export interface TooltipProps {
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
     content: ReactNode | (({ update }: {
-        update: () => void;
+        update?: () => void;
     }) => ReactNode);
     /**
      * Extend `TooltipPrimitive` to create your own tooltip and pass it as component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "18.0.0",
+  "version": "18.1.1",
   "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.33.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.16.0",
+    "@atlaskit/button": "^17.2.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)
-
-```