@atlaskit/tooltip 18.0.0 → 18.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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: "18.0.0"
+  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/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: "18.0.0"
+  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/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: "18.0.0"
+  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/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": "18.0.0",
+  "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.16.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)
-
-```