@atlaskit/tooltip 17.5.12 → 17.5.15

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/tooltip
 
+## 17.5.15
+
+### Patch Changes
+
+- [`338ba1a1500`](https://bitbucket.org/atlassian/atlassian-frontend/commits/338ba1a1500) - [ux] Improves accuracy of Tooltip placement relative to the mouse when using `position="mouse"`
+
+## 17.5.14
+
+### Patch Changes
+
+- [`13a202fde6b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/13a202fde6b) - Fixes a bug where undefined test IDs were being added to Tooltip wrappers when no test ID was set
+- Updated dependencies
+
+## 17.5.13
+
+### Patch Changes
+
+- [`45ebe7af434`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ebe7af434) - Moved to using declarative entrypoints internally. Public API is unchanged.
+- [`4efc76f8a72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4efc76f8a72) - [ux] Fixes a bug where tooltip entrance and exit direction animations were not working since version 12.1.7, after upgrading `react-popper`.
+
+  This involved adding a wrapper `<div>` around the tooltip to separate the positioning and animation styles. The wrapper can be identified in tests using `testId` with the pattern `{testId}--wrapper`.
+
+- Updated dependencies
+
 ## 17.5.12
 
 ### Patch Changes

package/dist/cjs/Tooltip.js

@@ -23,10 +23,14 @@ var _bindEventListener = require("bind-event-listener");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/use-close-on-escape-press"));
 
 var _motion = require("@atlaskit/motion");
 
+var _durations = require("@atlaskit/motion/durations");
+
 var _popper = require("@atlaskit/popper");
 
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
@@ -54,10 +58,25 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.12"
+  packageVersion: "17.5.15"
+}; // Inverts motion direction
+
+var invertedDirection = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+/**
+ * Converts a Popper placement to it's general direction.
+ *
+ * @param position - Popper Placement value, e.g. 'top-start'
+ * @returns Popper Direction, e.g. 'top'
+ */
+
+var getDirectionFromPlacement = function getDirectionFromPlacement(placement) {
+  return placement.split('-')[0];
 };
-
-function noop() {}
 
 function Tooltip(_ref) {
   var children = _ref.children,
@@ -76,9 +95,9 @@ function Tooltip(_ref) {
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? 300 : _ref$delay,
       _ref$onShow = _ref.onShow,
-      onShow = _ref$onShow === void 0 ? noop : _ref$onShow,
+      onShow = _ref$onShow === void 0 ? _noop.default : _ref$onShow,
       _ref$onHide = _ref.onHide,
-      onHide = _ref$onHide === void 0 ? noop : _ref$onHide,
+      onHide = _ref$onHide === void 0 ? _noop.default : _ref$onHide,
       _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
       hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? false : _ref$hideTooltipOnCli,
       _ref$hideTooltipOnMou = _ref.hideTooltipOnMouseDown,
@@ -203,17 +222,16 @@ function Tooltip(_ref) {
           lastHandlers.current.onShowHandler();
         }
 
-        setState(isImmediate ? 'show-immediate' : 'show-fade-in');
+        setState(isImmediate ? 'show-immediate' : 'fade-in');
       },
       hide: function hide(_ref3) {
         var isImmediate = _ref3.isImmediate;
-        setState(function (current) {
-          if (current !== 'hide') {
-            return isImmediate ? 'hide' : 'fade-out';
-          }
 
-          return current;
-        });
+        if (isImmediate) {
+          setState('hide');
+        } else {
+          setState('before-fade-out');
+        }
       },
       done: done
     };
@@ -233,7 +251,11 @@ function Tooltip(_ref) {
   });
   (0, _react.useEffect)(function () {
     if (state === 'hide') {
-      return noop;
+      return _noop.default;
+    }
+
+    if (state === 'before-fade-out') {
+      setState('fade-out');
     }
 
     var unbind = (0, _bindEventListener.bind)(window, {
@@ -320,6 +342,16 @@ 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()) {
+      apiRef.current.mousePosition = (0, _utilities.getMousePosition)({
+        left: event.clientX,
+        top: event.clientY
+      });
+    }
+  } : undefined;
   var onMouseOverTooltip = (0, _react.useCallback)(function () {
     if (apiRef.current && apiRef.current.isActive()) {
       apiRef.current.keep();
@@ -348,15 +380,15 @@ function Tooltip(_ref) {
 
   var CastTargetContainer = TargetContainer;
   var shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
-  var shouldRenderTooltipChildren = state === 'show-immediate' || state === 'show-fade-in';
+  var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
+
+  var getReferenceElement = function getReferenceElement() {
+    var _apiRef$current3;
 
-  var getReferentElement = function getReferentElement() {
-    // Use the initial mouse position if appropriate, or the target element
-    var api = apiRef.current;
-    var initialMouse = api ? api.getInitialMouse() : null;
+    if (position === 'mouse' && (_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.mousePosition) {
+      var _apiRef$current4;
 
-    if (position === 'mouse' && initialMouse) {
-      return initialMouse;
+      return (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.mousePosition;
     }
 
     return targetRef.current || undefined;
@@ -366,6 +398,7 @@ function Tooltip(_ref) {
   var tooltipTriggerProps = {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
+    onMouseMove: onMouseMove,
     onClick: onClick,
     onMouseDown: onMouseDown,
     onFocus: onFocus,
@@ -380,17 +413,25 @@ function Tooltip(_ref) {
     zIndex: tooltipZIndex
   }, (0, _core.jsx)(_popper.Popper, {
     placement: tooltipPosition,
-    referenceElement: getReferentElement(),
+    referenceElement: getReferenceElement(),
     strategy: strategy
   }, function (_ref4) {
     var ref = _ref4.ref,
         style = _ref4.style,
-        update = _ref4.update;
+        update = _ref4.update,
+        placement = _ref4.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, _core.jsx)(_motion.ExitingPersistence, {
       appear: true
     }, shouldRenderTooltipChildren && (0, _core.jsx)(_motion.FadeIn, {
+      distance: "constant",
+      entranceDirection: direction,
+      exitDirection: direction,
       onFinish: onAnimationFinished,
-      duration: state === 'show-immediate' ? 0 : undefined
+      duration: state === 'show-immediate' ? 0 : _durations.mediumDurationMs
     }, function (_ref5) {
       var className = _ref5.className;
       return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events

package/dist/cjs/TooltipPrimitive.js

@@ -36,20 +36,20 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
 
   var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, (0, _defineProperty2.default)({}, VAR_PRIMITIVE_ZINDEX, _constants.layers.tooltip()));
 
-  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    (0, _core.jsx)("div", {
-      role: "tooltip",
-      ref: ref,
-      style: styleWithZIndex,
-      className: className,
-      onMouseOut: onMouseOut,
-      onMouseOver: onMouseOver,
-      css: primitiveStyles,
-      "data-placement": placement,
-      "data-testid": testId,
-      id: id
-    }, children)
-  );
+  return (0, _core.jsx)("div", {
+    ref: ref,
+    style: styleWithZIndex,
+    "data-testid": testId ? "".concat(testId, "--wrapper") : undefined
+  }, (0, _core.jsx)("div", {
+    role: "tooltip",
+    className: className,
+    onMouseOut: onMouseOut,
+    onMouseOver: onMouseOver,
+    css: primitiveStyles,
+    "data-placement": placement,
+    "data-testid": testId,
+    id: id
+  }, children));
 });
 TooltipPrimitive.displayName = 'TooltipPrimitive';
 var _default = TooltipPrimitive;

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

@@ -157,7 +157,7 @@ function show(entry) {
     isActive: isActive,
     requestHide: requestHide,
     finishHideAnimation: finishHideAnimation,
-    getInitialMouse: getInitialMouse
+    mousePosition: getInitialMouse()
   };
   return result;
 }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.5.12",
+	"version": "17.5.15",
 	"sideEffects": false
 }

package/dist/es2019/Tooltip.js

@@ -5,8 +5,10 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/core';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
+import noop from '@atlaskit/ds-lib/noop';
 import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { mediumDurationMs } from '@atlaskit/motion/durations';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -18,10 +20,23 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.12"
+  packageVersion: "17.5.15"
+}; // Inverts motion direction
+
+const invertedDirection = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
 };
+/**
+ * Converts a Popper placement to it's general direction.
+ *
+ * @param position - Popper Placement value, e.g. 'top-start'
+ * @returns Popper Direction, e.g. 'top'
+ */
 
-function noop() {}
+const getDirectionFromPlacement = placement => placement.split('-')[0];
 
 function Tooltip({
   children,
@@ -154,18 +169,16 @@ function Tooltip({
           lastHandlers.current.onShowHandler();
         }
 
-        setState(isImmediate ? 'show-immediate' : 'show-fade-in');
+        setState(isImmediate ? 'show-immediate' : 'fade-in');
       },
       hide: ({
         isImmediate
       }) => {
-        setState(current => {
-          if (current !== 'hide') {
-            return isImmediate ? 'hide' : 'fade-out';
-          }
-
-          return current;
-        });
+        if (isImmediate) {
+          setState('hide');
+        } else {
+          setState('before-fade-out');
+        }
       },
       done: done
     };
@@ -188,6 +201,10 @@ function Tooltip({
       return noop;
     }
 
+    if (state === 'before-fade-out') {
+      setState('fade-out');
+    }
+
     const unbind = bind(window, {
       type: 'scroll',
       listener: () => {
@@ -272,6 +289,16 @@ function Tooltip({
       });
     }
   }, []);
+  const onMouseMove = position === 'mouse' ? event => {
+    var _apiRef$current2;
+
+    if ((_apiRef$current2 = apiRef.current) !== null && _apiRef$current2 !== void 0 && _apiRef$current2.isActive()) {
+      apiRef.current.mousePosition = getMousePosition({
+        left: event.clientX,
+        top: event.clientY
+      });
+    }
+  } : undefined;
   const onMouseOverTooltip = useCallback(() => {
     if (apiRef.current && apiRef.current.isActive()) {
       apiRef.current.keep();
@@ -300,15 +327,15 @@ function Tooltip({
 
   const CastTargetContainer = TargetContainer;
   const shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
-  const shouldRenderTooltipChildren = state === 'show-immediate' || state === 'show-fade-in';
+  const shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
 
-  const getReferentElement = () => {
-    // Use the initial mouse position if appropriate, or the target element
-    const api = apiRef.current;
-    const initialMouse = api ? api.getInitialMouse() : null;
+  const getReferenceElement = () => {
+    var _apiRef$current3;
 
-    if (position === 'mouse' && initialMouse) {
-      return initialMouse;
+    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;
     }
 
     return targetRef.current || undefined;
@@ -318,6 +345,7 @@ function Tooltip({
   const tooltipTriggerProps = {
     onMouseOver,
     onMouseOut,
+    onMouseMove,
     onClick,
     onMouseDown,
     onFocus,
@@ -332,33 +360,43 @@ function Tooltip({
     zIndex: tooltipZIndex
   }, jsx(Popper, {
     placement: tooltipPosition,
-    referenceElement: getReferentElement(),
+    referenceElement: getReferenceElement(),
     strategy: strategy
   }, ({
     ref,
     style,
-    update
-  }) => jsx(ExitingPersistence, {
-    appear: true
-  }, shouldRenderTooltipChildren && jsx(FadeIn, {
-    onFinish: onAnimationFinished,
-    duration: state === 'show-immediate' ? 0 : undefined
-  }, ({
-    className
-  }) => // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-  jsx(Container, {
-    ref: ref,
-    className: `Tooltip ${className}`,
-    style: style,
-    truncate: truncate,
-    placement: tooltipPosition,
-    testId: testId,
-    onMouseOut: onMouseOut,
-    onMouseOver: onMouseOverTooltip,
-    id: tooltipId
-  }, typeof content === 'function' ? content({
-    update
-  }) : content))))) : null);
+    update,
+    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
+    const direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
+    return jsx(ExitingPersistence, {
+      appear: true
+    }, shouldRenderTooltipChildren && jsx(FadeIn, {
+      distance: "constant",
+      entranceDirection: direction,
+      exitDirection: direction,
+      onFinish: onAnimationFinished,
+      duration: state === 'show-immediate' ? 0 : mediumDurationMs
+    }, ({
+      className
+    }) => // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    jsx(Container, {
+      ref: ref,
+      className: `Tooltip ${className}`,
+      style: style,
+      truncate: truncate,
+      placement: tooltipPosition,
+      testId: testId,
+      onMouseOut: onMouseOut,
+      onMouseOver: onMouseOverTooltip,
+      id: tooltipId
+    }, typeof content === 'function' ? content({
+      update
+    }) : content)));
+  })) : null);
 }
 
 Tooltip.displayName = 'Tooltip';

package/dist/es2019/TooltipPrimitive.js

@@ -20,20 +20,20 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
   const styleWithZIndex = { ...style,
     [VAR_PRIMITIVE_ZINDEX]: layers.tooltip()
   };
-  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    jsx("div", {
-      role: "tooltip",
-      ref: ref,
-      style: styleWithZIndex,
-      className: className,
-      onMouseOut: onMouseOut,
-      onMouseOver: onMouseOver,
-      css: primitiveStyles,
-      "data-placement": placement,
-      "data-testid": testId,
-      id: id
-    }, children)
-  );
+  return jsx("div", {
+    ref: ref,
+    style: styleWithZIndex,
+    "data-testid": testId ? `${testId}--wrapper` : undefined
+  }, jsx("div", {
+    role: "tooltip",
+    className: className,
+    onMouseOut: onMouseOut,
+    onMouseOver: onMouseOver,
+    css: primitiveStyles,
+    "data-placement": placement,
+    "data-testid": testId,
+    id: id
+  }, children));
 });
 TooltipPrimitive.displayName = 'TooltipPrimitive';
 export default TooltipPrimitive;

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

@@ -149,7 +149,7 @@ export function show(entry) {
     isActive,
     requestHide,
     finishHideAnimation,
-    getInitialMouse
+    mousePosition: getInitialMouse()
   };
   return result;
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.5.12",
+	"version": "17.5.15",
 	"sideEffects": false
 }

package/dist/esm/Tooltip.js

@@ -11,8 +11,10 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/core';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
+import noop from '@atlaskit/ds-lib/noop';
 import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { mediumDurationMs } from '@atlaskit/motion/durations';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -24,10 +26,25 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.12"
+  packageVersion: "17.5.15"
+}; // Inverts motion direction
+
+var invertedDirection = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+/**
+ * Converts a Popper placement to it's general direction.
+ *
+ * @param position - Popper Placement value, e.g. 'top-start'
+ * @returns Popper Direction, e.g. 'top'
+ */
+
+var getDirectionFromPlacement = function getDirectionFromPlacement(placement) {
+  return placement.split('-')[0];
 };
-
-function noop() {}
 
 function Tooltip(_ref) {
   var children = _ref.children,
@@ -173,17 +190,16 @@ function Tooltip(_ref) {
           lastHandlers.current.onShowHandler();
         }
 
-        setState(isImmediate ? 'show-immediate' : 'show-fade-in');
+        setState(isImmediate ? 'show-immediate' : 'fade-in');
       },
       hide: function hide(_ref3) {
         var isImmediate = _ref3.isImmediate;
-        setState(function (current) {
-          if (current !== 'hide') {
-            return isImmediate ? 'hide' : 'fade-out';
-          }
 
-          return current;
-        });
+        if (isImmediate) {
+          setState('hide');
+        } else {
+          setState('before-fade-out');
+        }
       },
       done: done
     };
@@ -206,6 +222,10 @@ function Tooltip(_ref) {
       return noop;
     }
 
+    if (state === 'before-fade-out') {
+      setState('fade-out');
+    }
+
     var unbind = bind(window, {
       type: 'scroll',
       listener: function listener() {
@@ -290,6 +310,16 @@ 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()) {
+      apiRef.current.mousePosition = getMousePosition({
+        left: event.clientX,
+        top: event.clientY
+      });
+    }
+  } : undefined;
   var onMouseOverTooltip = useCallback(function () {
     if (apiRef.current && apiRef.current.isActive()) {
       apiRef.current.keep();
@@ -318,15 +348,15 @@ function Tooltip(_ref) {
 
   var CastTargetContainer = TargetContainer;
   var shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
-  var shouldRenderTooltipChildren = state === 'show-immediate' || state === 'show-fade-in';
+  var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
+
+  var getReferenceElement = function getReferenceElement() {
+    var _apiRef$current3;
 
-  var getReferentElement = function getReferentElement() {
-    // Use the initial mouse position if appropriate, or the target element
-    var api = apiRef.current;
-    var initialMouse = api ? api.getInitialMouse() : null;
+    if (position === 'mouse' && (_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.mousePosition) {
+      var _apiRef$current4;
 
-    if (position === 'mouse' && initialMouse) {
-      return initialMouse;
+      return (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.mousePosition;
     }
 
     return targetRef.current || undefined;
@@ -336,6 +366,7 @@ function Tooltip(_ref) {
   var tooltipTriggerProps = {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
+    onMouseMove: onMouseMove,
     onClick: onClick,
     onMouseDown: onMouseDown,
     onFocus: onFocus,
@@ -350,17 +381,25 @@ function Tooltip(_ref) {
     zIndex: tooltipZIndex
   }, jsx(Popper, {
     placement: tooltipPosition,
-    referenceElement: getReferentElement(),
+    referenceElement: getReferenceElement(),
     strategy: strategy
   }, function (_ref4) {
     var ref = _ref4.ref,
         style = _ref4.style,
-        update = _ref4.update;
+        update = _ref4.update,
+        placement = _ref4.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, {
       appear: true
     }, shouldRenderTooltipChildren && jsx(FadeIn, {
+      distance: "constant",
+      entranceDirection: direction,
+      exitDirection: direction,
       onFinish: onAnimationFinished,
-      duration: state === 'show-immediate' ? 0 : undefined
+      duration: state === 'show-immediate' ? 0 : mediumDurationMs
     }, function (_ref5) {
       var className = _ref5.className;
       return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events

package/dist/esm/TooltipPrimitive.js

@@ -25,20 +25,20 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
 
   var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, VAR_PRIMITIVE_ZINDEX, layers.tooltip()));
 
-  return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    jsx("div", {
-      role: "tooltip",
-      ref: ref,
-      style: styleWithZIndex,
-      className: className,
-      onMouseOut: onMouseOut,
-      onMouseOver: onMouseOver,
-      css: primitiveStyles,
-      "data-placement": placement,
-      "data-testid": testId,
-      id: id
-    }, children)
-  );
+  return jsx("div", {
+    ref: ref,
+    style: styleWithZIndex,
+    "data-testid": testId ? "".concat(testId, "--wrapper") : undefined
+  }, jsx("div", {
+    role: "tooltip",
+    className: className,
+    onMouseOut: onMouseOut,
+    onMouseOver: onMouseOver,
+    css: primitiveStyles,
+    "data-placement": placement,
+    "data-testid": testId,
+    id: id
+  }, children));
 });
 TooltipPrimitive.displayName = 'TooltipPrimitive';
 export default TooltipPrimitive;

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

@@ -149,7 +149,7 @@ export function show(entry) {
     isActive: isActive,
     requestHide: requestHide,
     finishHideAnimation: finishHideAnimation,
-    getInitialMouse: getInitialMouse
+    mousePosition: getInitialMouse()
   };
   return result;
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.5.12",
+	"version": "17.5.15",
 	"sideEffects": false
 }

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

@@ -18,7 +18,7 @@ export declare type Entry = {
 };
 export declare type API = {
     isActive: () => boolean;
-    getInitialMouse: () => FakeMouseElement | null;
+    mousePosition: FakeMouseElement | null;
     requestHide: (value: {
         isImmediate: boolean;
     }) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.5.12",
+  "version": "17.5.15",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,17 +16,24 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Tooltip",
       "category": "Components"
     }
   },
+  "af:exports": {
+    ".": "./src/index.ts",
+    "./Tooltip": "./src/Tooltip.tsx",
+    "./TooltipContainer": "./src/TooltipContainer.tsx",
+    "./TooltipPrimitive": "./src/TooltipPrimitive.tsx",
+    "./types": "./src/types.tsx",
+    "./utilities": "./src/utilities.ts"
+  },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/ds-lib": "^2.0.0",
-    "@atlaskit/motion": "^1.1.0",
+    "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/motion": "^1.2.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.1.0",
     "@atlaskit/theme": "^12.1.0",

package/report.api.md

@@ -0,0 +1,171 @@
+## API Report File for "@atlaskit/tooltip"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { ComponentType } from 'react';
+import { CSSProperties } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { Placement } from '@atlaskit/popper';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+export declare type PositionType = PositionTypeBase | 'mouse';
+
+declare type PositionTypeBase = Placement;
+
+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;
+}
+export default Tooltip;
+
+export declare const TooltipPrimitive: ForwardRefExoticComponent<
+  Pick<
+    TooltipPrimitiveProps,
+    | 'style'
+    | 'className'
+    | 'children'
+    | 'placement'
+    | 'testId'
+    | 'onMouseOut'
+    | 'onMouseOver'
+    | 'id'
+    | 'truncate'
+  > &
+    RefAttributes<HTMLDivElement>
+>;
+
+export declare interface TooltipPrimitiveProps {
+  truncate?: boolean;
+  style?: CSSProperties;
+  className?: string;
+  children: ReactNode;
+  testId?: string;
+  placement: PositionType;
+  ref: React.Ref<any>;
+  onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
+  onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
+  id?: string;
+}
+
+export declare interface TooltipProps {
+  /**
+     * The content of the tooltip. It can be either a:
+     * 1. `ReactNode`
+     * 2. Function which returns a `ReactNode`
+
+     * The benefit of the second approach is that it allows you to consume the `update` render prop.
+     * This `update` function can be called to manually recalculate the position of the tooltip.
+     */
+  content: ReactNode | (({ update }: { update: () => void }) => ReactNode);
+  /**
+   * Extend `TooltipPrimitive` to create your own tooltip and pass it as component
+   */
+  component?: ComponentType<TooltipPrimitiveProps>;
+  /**
+   * Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.
+   */
+  delay?: number;
+  /**
+   * Hide the tooltip when the click event is triggered. This should be
+   * used when tooltip should be hidden if `onClick` react synthetic event
+   * is triggered, which happens after `onMouseDown` event
+   */
+  hideTooltipOnClick?: boolean;
+  /**
+   * Hide the tooltip when the mousedown event is triggered. This should be
+   * used when tooltip should be hidden if `onMouseDown` react synthetic event
+   * is triggered, which happens before `onClick` event
+   */
+  hideTooltipOnMouseDown?: boolean;
+  /**
+   * Where the tooltip should appear relative to the mouse pointer.
+   * Only used when the `position` prop is set to `"mouse"`.
+   * When interacting with the target element using the keyboard will use this position against the target element instead.
+   */
+  mousePosition?: PositionTypeBase;
+  /**
+   * Function to be called when the tooltip will be shown. It is called when the
+   * tooltip begins to animate in.
+   */
+  onShow?: (analyticsEvent: UIAnalyticsEvent) => void;
+  /**
+   * Function to be called when the tooltip will be hidden. It is called after the
+   * delay, when the tooltip begins to animate out.
+   */
+  onHide?: (analyticsEvent: UIAnalyticsEvent) => void;
+  /**
+   * Where the tooltip should appear relative to its target.
+   * If set to `"mouse"` the tooltip will display next to the mouse pointer instead.
+   * Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
+   */
+  position?: PositionType;
+  /**
+   * Replace the wrapping element. This accepts the name of a html tag which will
+   * be used to wrap the element.
+   * If you provide a component it needs to support a ref prop which is used by popper for positioning
+   */
+  tag?:
+    | keyof JSX.IntrinsicElements
+    | React.ComponentType<
+        React.AllHTMLAttributes<HTMLElement> & {
+          ref: React.Ref<HTMLElement>;
+        }
+      >;
+  /**
+   * Show only one line of text, and truncate when too long
+   */
+  truncate?: boolean;
+  /**
+   * Elements to be wrapped by the tooltip.
+   * It can be either a:
+   * 1. `ReactNode`
+   * 2. Function which returns a `ReactNode`
+   */
+  children: ReactNode | ((props: TriggerProps) => ReactNode);
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique
+   * string that appears as a data attribute `data-testid` in the rendered code,
+   * serving as a hook for automated tests */
+  testId?: string;
+  /** Analytics context metadata */
+  analyticsContext?: Record<string, any>;
+  /**
+   * Used to define the strategy of popper.
+   */
+  strategy?: 'absolute' | 'fixed' | undefined;
+}
+
+declare interface TriggerProps {
+  onMouseOver: (event: React.MouseEvent<HTMLElement>) => void;
+  onMouseOut: (event: React.MouseEvent<HTMLElement>) => void;
+  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
+  onClick: (event: React.MouseEvent<HTMLElement>) => void;
+  onFocus: (event: React.FocusEvent<HTMLElement>) => void;
+  onBlur: (event: React.FocusEvent<HTMLElement>) => void;
+  ref: (node: HTMLElement | null) => void;
+}
+
+export {};
+```