@atlaskit/tooltip 20.11.1 → 20.13.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/tooltip
 
+## 20.13.0
+
+### Minor Changes
+
+- [`05a04a1bfd2f9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05a04a1bfd2f9) -
+  Adds the experimental `UNSAFE_shouldAlwaysFadeIn` prop behind the
+  `platform_dst_nav4_side_nav_resize_tooltip_feedback` feature gate. When used, the tooltip will
+  always use the fade in animation, and never use the show immediate behaviour, even when another
+  tooltip is already visible.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 20.12.0
+
+### Minor Changes
+
+- [`2e7328e8eff65`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2e7328e8eff65) -
+  Adds `mouse-x` and `mouse-y` positions for tooltips behind the
+  `platform_dst_nav4_side_nav_resize_tooltip_feedback` gate. These positions only use the mouse
+  coordinates on one axis, but are otherwise relative to the target.
+
 ## 20.11.1
 
 ### Patch Changes

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.show = show;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _sharedSchedule = require("./shared-schedule");
 // This file is a singleton for managing tooltips
 
@@ -99,7 +100,8 @@ function show(entry) {
     return null;
   }
   function start() {
-    var showImmediately = Boolean(active && active.isVisible());
+    var shouldAlwaysFadeIn = (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? entry.shouldAlwaysFadeIn : false;
+    var showImmediately = Boolean(active && active.isVisible()) && !shouldAlwaysFadeIn;
 
     // If there was an active tooltip; we tell it to remove itself at once!
     if (active) {
@@ -137,7 +139,13 @@ function show(entry) {
     isActive: isActive,
     requestHide: requestHide,
     finishHideAnimation: finishHideAnimation,
-    mousePosition: getInitialMouse()
+    // Removing old `mousePosition` behind gate because it stored a function.
+    // With the gate we just store the coords which are easier to work with.
+    mousePosition: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? undefined : getInitialMouse(),
+    mousePos: entry.source.type === 'mouse' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? {
+      clientX: entry.source.clientX,
+      clientY: entry.source.clientY
+    } : null
   };
   return result;
 }

package/dist/cjs/tooltip.js

@@ -17,6 +17,7 @@ var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/us
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _motion = require("@atlaskit/motion");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
@@ -89,8 +90,12 @@ function Tooltip(_ref) {
     ignoreTooltipPointerEvents = _ref$ignoreTooltipPoi === void 0 ? false : _ref$ignoreTooltipPoi,
     _ref$isScreenReaderAn = _ref.isScreenReaderAnnouncementDisabled,
     isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn,
-    shortcut = _ref.shortcut;
-  var tooltipPosition = position === 'mouse' ? mousePosition : position;
+    shortcut = _ref.shortcut,
+    _ref$UNSAFE_shouldAlw = _ref.UNSAFE_shouldAlwaysFadeIn,
+    shouldAlwaysFadeIn = _ref$UNSAFE_shouldAlw === void 0 ? false : _ref$UNSAFE_shouldAlw;
+  // Not using a gate for this check. When the gate is disabled `mouse-y` and `mouse-x` are treated as `mouse`.
+  var isMousePosition = position === 'mouse' || position === 'mouse-y' || position === 'mouse-x';
+  var tooltipPosition = isMousePosition ? mousePosition : position;
   var onShowHandler = (0, _analyticsNext.usePlatformLeafSyntheticEventHandler)(_objectSpread({
     fn: onShow,
     action: 'displayed',
@@ -131,6 +136,7 @@ function Tooltip(_ref) {
   var delayStable = (0, _useStableRef.default)(delay);
   var canAppearStable = (0, _useStableRef.default)(canAppear);
   var hasCalledShowHandler = (0, _react.useRef)(false);
+  var shouldAlwaysFadeInStable = (0, _useStableRef.default)(shouldAlwaysFadeIn);
   var start = (0, _react.useCallback)(function (api) {
     // @ts-ignore
     apiRef.current = api;
@@ -243,7 +249,7 @@ function Tooltip(_ref) {
           hasCalledShowHandler.current = true;
           onShowHandlerStable.current();
         }
-        setState(isImmediate ? 'show-immediate' : 'fade-in');
+        setState(!isImmediate ? 'fade-in' : 'show-immediate');
       },
       hide: function hide(_ref4) {
         var isImmediate = _ref4.isImmediate;
@@ -253,11 +259,12 @@ function Tooltip(_ref) {
           setState('before-fade-out');
         }
       },
-      done: done
+      done: done,
+      shouldAlwaysFadeIn: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? shouldAlwaysFadeInStable.current : false
     };
     var api = (0, _tooltipManager.show)(entry);
     start(api);
-  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable]);
+  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable, shouldAlwaysFadeInStable]);
   var hideTooltipOnEsc = (0, _react.useCallback)(function () {
     var _apiRef$current2;
     (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.requestHide({
@@ -323,18 +330,22 @@ function Tooltip(_ref) {
       return;
     }
     event.preventDefault();
-    var source = position === 'mouse' ? {
+    var source = isMousePosition ? {
       type: 'mouse',
       // TODO: ideally not recalculating this object each time
-      mouse: (0, _utilities.getMousePosition)({
+      // Removing old `mouse` behind gate because it stored a function.
+      // With the gate we just store the coords which are easier to work with.
+      mouse: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? undefined : (0, _utilities.getMousePosition)({
         left: event.clientX,
         top: event.clientY
-      })
+      }),
+      clientX: event.clientX,
+      clientY: event.clientY
     } : {
       type: 'keyboard'
     };
     tryShowTooltip(source);
-  }, [position, tryShowTooltip]);
+  }, [isMousePosition, tryShowTooltip]);
 
   // Ideally we would be using onMouseEnter here, but
   // because we are binding the event to the target parent
@@ -358,13 +369,19 @@ function Tooltip(_ref) {
       });
     }
   }, []);
-  var onMouseMove = position === 'mouse' ? function (event) {
+  var onMouseMove = isMousePosition ? function (event) {
     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
-      });
+      if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+        apiRef.current.mousePosition = (0, _utilities.getMousePosition)({
+          left: event.clientX,
+          top: event.clientY
+        });
+      }
+      apiRef.current.mousePos = {
+        clientX: event.clientX,
+        clientY: event.clientY
+      };
     }
   } : undefined;
   var onMouseOverTooltip = (0, _react.useCallback)(function () {
@@ -381,7 +398,7 @@ function Tooltip(_ref) {
       if (!e.target.matches(':focus-visible')) {
         return;
       }
-    } catch (_) {
+    } catch (_unused) {
       // Ignore errors from environments that don't support :focus-visible
     }
 
@@ -431,10 +448,16 @@ function Tooltip(_ref) {
     onClose: handleOpenLayerObserverCloseSignal
   });
   var getReferenceElement = function getReferenceElement() {
-    var _apiRef$current5;
-    if (position === 'mouse' && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePosition) {
-      var _apiRef$current6;
-      return (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.mousePosition;
+    var _apiRef$current5, _apiRef$current6;
+    if (isMousePosition && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePos && targetRef.current && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      return (0, _utilities.getVirtualElementFromMousePos)(apiRef.current.mousePos, {
+        targetElement: targetRef.current,
+        tooltipPosition: position
+      });
+    }
+    if (isMousePosition && (_apiRef$current6 = apiRef.current) !== null && _apiRef$current6 !== void 0 && _apiRef$current6.mousePosition && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      var _apiRef$current7;
+      return (_apiRef$current7 = apiRef.current) === null || _apiRef$current7 === void 0 ? void 0 : _apiRef$current7.mousePosition;
     }
     return targetRef.current || undefined;
   };
@@ -514,7 +537,7 @@ function Tooltip(_ref) {
     // 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)];
+    var direction = isMousePosition ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
     return /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
       appear: true
     }, shouldRenderTooltipChildren && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, {

package/dist/cjs/utilities.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getMousePosition = getMousePosition;
+exports.getVirtualElementFromMousePos = getVirtualElementFromMousePos;
 function getMousePosition(mouseCoordinates) {
   var safeMouse = mouseCoordinates || {
     top: 0,
@@ -24,4 +25,46 @@ function getMousePosition(mouseCoordinates) {
     clientWidth: 0,
     clientHeight: 0
   };
+}
+function getVirtualElementFromMousePos(mousePos, _ref) {
+  var targetElement = _ref.targetElement,
+    tooltipPosition = _ref.tooltipPosition;
+  if (tooltipPosition === 'mouse') {
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return DOMRect.fromRect({
+          x: mousePos.clientX,
+          y: mousePos.clientY,
+          width: 0,
+          height: 0
+        });
+      }
+    };
+  }
+  var targetRect = targetElement.getBoundingClientRect();
+  if (tooltipPosition === 'mouse-x') {
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return DOMRect.fromRect({
+          x: mousePos.clientX,
+          y: targetRect.top,
+          width: 0,
+          height: targetRect.height
+        });
+      }
+    };
+  }
+  if (tooltipPosition === 'mouse-y') {
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return DOMRect.fromRect({
+          x: targetRect.left,
+          y: mousePos.clientY,
+          width: targetRect.width,
+          height: 0
+        });
+      }
+    };
+  }
+  throw new Error("Invalid tooltip position for virtual element: ".concat(tooltipPosition));
 }

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

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { clearScheduled, scheduleTimeout } from './shared-schedule';
 
 // This file is a singleton for managing tooltips
@@ -95,7 +96,8 @@ export function show(entry) {
     return null;
   }
   function start() {
-    const showImmediately = Boolean(active && active.isVisible());
+    const shouldAlwaysFadeIn = fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? entry.shouldAlwaysFadeIn : false;
+    const showImmediately = Boolean(active && active.isVisible()) && !shouldAlwaysFadeIn;
 
     // If there was an active tooltip; we tell it to remove itself at once!
     if (active) {
@@ -133,7 +135,13 @@ export function show(entry) {
     isActive,
     requestHide,
     finishHideAnimation,
-    mousePosition: getInitialMouse()
+    // Removing old `mousePosition` behind gate because it stored a function.
+    // With the gate we just store the coords which are easier to work with.
+    mousePosition: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? undefined : getInitialMouse(),
+    mousePos: entry.source.type === 'mouse' && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? {
+      clientX: entry.source.clientX,
+      clientY: entry.source.clientY
+    } : null
   };
   return result;
 }

package/dist/es2019/tooltip.js

@@ -7,6 +7,7 @@ import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -14,7 +15,7 @@ import { register } from './internal/drag-manager';
 import { show } from './internal/tooltip-manager';
 import useUniqueId from './internal/use-unique-id';
 import TooltipContainer from './tooltip-container';
-import { getMousePosition } from './utilities';
+import { getMousePosition, getVirtualElementFromMousePos } from './utilities';
 const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
@@ -62,9 +63,12 @@ function Tooltip({
   strategy = 'fixed',
   ignoreTooltipPointerEvents = false,
   isScreenReaderAnnouncementDisabled = false,
-  shortcut
+  shortcut,
+  UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn = false
 }) {
-  const tooltipPosition = position === 'mouse' ? mousePosition : position;
+  // Not using a gate for this check. When the gate is disabled `mouse-y` and `mouse-x` are treated as `mouse`.
+  const isMousePosition = position === 'mouse' || position === 'mouse-y' || position === 'mouse-x';
+  const tooltipPosition = isMousePosition ? mousePosition : position;
   const onShowHandler = usePlatformLeafSyntheticEventHandler({
     fn: onShow,
     action: 'displayed',
@@ -104,6 +108,7 @@ function Tooltip({
   const delayStable = useStableRef(delay);
   const canAppearStable = useStableRef(canAppear);
   const hasCalledShowHandler = useRef(false);
+  const shouldAlwaysFadeInStable = useStableRef(shouldAlwaysFadeIn);
   const start = useCallback(api => {
     // @ts-ignore
     apiRef.current = api;
@@ -218,7 +223,7 @@ function Tooltip({
           hasCalledShowHandler.current = true;
           onShowHandlerStable.current();
         }
-        setState(isImmediate ? 'show-immediate' : 'fade-in');
+        setState(!isImmediate ? 'fade-in' : 'show-immediate');
       },
       hide: ({
         isImmediate
@@ -229,11 +234,12 @@ function Tooltip({
           setState('before-fade-out');
         }
       },
-      done
+      done,
+      shouldAlwaysFadeIn: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? shouldAlwaysFadeInStable.current : false
     };
     const api = show(entry);
     start(api);
-  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable]);
+  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable, shouldAlwaysFadeInStable]);
   const hideTooltipOnEsc = useCallback(() => {
     var _apiRef$current2;
     (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.requestHide({
@@ -299,18 +305,22 @@ function Tooltip({
       return;
     }
     event.preventDefault();
-    const source = position === 'mouse' ? {
+    const source = isMousePosition ? {
       type: 'mouse',
       // TODO: ideally not recalculating this object each time
-      mouse: getMousePosition({
+      // Removing old `mouse` behind gate because it stored a function.
+      // With the gate we just store the coords which are easier to work with.
+      mouse: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? undefined : getMousePosition({
         left: event.clientX,
         top: event.clientY
-      })
+      }),
+      clientX: event.clientX,
+      clientY: event.clientY
     } : {
       type: 'keyboard'
     };
     tryShowTooltip(source);
-  }, [position, tryShowTooltip]);
+  }, [isMousePosition, tryShowTooltip]);
 
   // Ideally we would be using onMouseEnter here, but
   // because we are binding the event to the target parent
@@ -334,13 +344,19 @@ function Tooltip({
       });
     }
   }, []);
-  const onMouseMove = position === 'mouse' ? event => {
+  const onMouseMove = isMousePosition ? event => {
     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
-      });
+      if (!fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+        apiRef.current.mousePosition = getMousePosition({
+          left: event.clientX,
+          top: event.clientY
+        });
+      }
+      apiRef.current.mousePos = {
+        clientX: event.clientX,
+        clientY: event.clientY
+      };
     }
   } : undefined;
   const onMouseOverTooltip = useCallback(() => {
@@ -357,7 +373,7 @@ function Tooltip({
       if (!e.target.matches(':focus-visible')) {
         return;
       }
-    } catch (_) {
+    } catch {
       // Ignore errors from environments that don't support :focus-visible
     }
 
@@ -407,10 +423,16 @@ function Tooltip({
     onClose: handleOpenLayerObserverCloseSignal
   });
   const getReferenceElement = () => {
-    var _apiRef$current5;
-    if (position === 'mouse' && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePosition) {
-      var _apiRef$current6;
-      return (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.mousePosition;
+    var _apiRef$current5, _apiRef$current6;
+    if (isMousePosition && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePos && targetRef.current && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      return getVirtualElementFromMousePos(apiRef.current.mousePos, {
+        targetElement: targetRef.current,
+        tooltipPosition: position
+      });
+    }
+    if (isMousePosition && (_apiRef$current6 = apiRef.current) !== null && _apiRef$current6 !== void 0 && _apiRef$current6.mousePosition && !fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      var _apiRef$current7;
+      return (_apiRef$current7 = apiRef.current) === null || _apiRef$current7 === void 0 ? void 0 : _apiRef$current7.mousePosition;
     }
     return targetRef.current || undefined;
   };
@@ -490,7 +512,7 @@ function Tooltip({
     // 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)];
+    const direction = isMousePosition ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
     return /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
     }, shouldRenderTooltipChildren && /*#__PURE__*/React.createElement(FadeIn, {

package/dist/es2019/utilities.js

@@ -16,4 +16,41 @@ export function getMousePosition(mouseCoordinates) {
     clientWidth: 0,
     clientHeight: 0
   };
+}
+export function getVirtualElementFromMousePos(mousePos, {
+  targetElement,
+  tooltipPosition
+}) {
+  if (tooltipPosition === 'mouse') {
+    return {
+      getBoundingClientRect: () => DOMRect.fromRect({
+        x: mousePos.clientX,
+        y: mousePos.clientY,
+        width: 0,
+        height: 0
+      })
+    };
+  }
+  const targetRect = targetElement.getBoundingClientRect();
+  if (tooltipPosition === 'mouse-x') {
+    return {
+      getBoundingClientRect: () => DOMRect.fromRect({
+        x: mousePos.clientX,
+        y: targetRect.top,
+        width: 0,
+        height: targetRect.height
+      })
+    };
+  }
+  if (tooltipPosition === 'mouse-y') {
+    return {
+      getBoundingClientRect: () => DOMRect.fromRect({
+        x: targetRect.left,
+        y: mousePos.clientY,
+        width: targetRect.width,
+        height: 0
+      })
+    };
+  }
+  throw new Error(`Invalid tooltip position for virtual element: ${tooltipPosition}`);
 }

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

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { clearScheduled, scheduleTimeout } from './shared-schedule';
 
 // This file is a singleton for managing tooltips
@@ -94,7 +95,8 @@ export function show(entry) {
     return null;
   }
   function start() {
-    var showImmediately = Boolean(active && active.isVisible());
+    var shouldAlwaysFadeIn = fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? entry.shouldAlwaysFadeIn : false;
+    var showImmediately = Boolean(active && active.isVisible()) && !shouldAlwaysFadeIn;
 
     // If there was an active tooltip; we tell it to remove itself at once!
     if (active) {
@@ -132,7 +134,13 @@ export function show(entry) {
     isActive: isActive,
     requestHide: requestHide,
     finishHideAnimation: finishHideAnimation,
-    mousePosition: getInitialMouse()
+    // Removing old `mousePosition` behind gate because it stored a function.
+    // With the gate we just store the coords which are easier to work with.
+    mousePosition: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? undefined : getInitialMouse(),
+    mousePos: entry.source.type === 'mouse' && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? {
+      clientX: entry.source.clientX,
+      clientY: entry.source.clientY
+    } : null
   };
   return result;
 }

package/dist/esm/tooltip.js

@@ -11,6 +11,7 @@ import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -18,7 +19,7 @@ import { register } from './internal/drag-manager';
 import { show } from './internal/tooltip-manager';
 import useUniqueId from './internal/use-unique-id';
 import TooltipContainer from './tooltip-container';
-import { getMousePosition } from './utilities';
+import { getMousePosition, getVirtualElementFromMousePos } from './utilities';
 var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
@@ -80,8 +81,12 @@ function Tooltip(_ref) {
     ignoreTooltipPointerEvents = _ref$ignoreTooltipPoi === void 0 ? false : _ref$ignoreTooltipPoi,
     _ref$isScreenReaderAn = _ref.isScreenReaderAnnouncementDisabled,
     isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn,
-    shortcut = _ref.shortcut;
-  var tooltipPosition = position === 'mouse' ? mousePosition : position;
+    shortcut = _ref.shortcut,
+    _ref$UNSAFE_shouldAlw = _ref.UNSAFE_shouldAlwaysFadeIn,
+    shouldAlwaysFadeIn = _ref$UNSAFE_shouldAlw === void 0 ? false : _ref$UNSAFE_shouldAlw;
+  // Not using a gate for this check. When the gate is disabled `mouse-y` and `mouse-x` are treated as `mouse`.
+  var isMousePosition = position === 'mouse' || position === 'mouse-y' || position === 'mouse-x';
+  var tooltipPosition = isMousePosition ? mousePosition : position;
   var onShowHandler = usePlatformLeafSyntheticEventHandler(_objectSpread({
     fn: onShow,
     action: 'displayed',
@@ -122,6 +127,7 @@ function Tooltip(_ref) {
   var delayStable = useStableRef(delay);
   var canAppearStable = useStableRef(canAppear);
   var hasCalledShowHandler = useRef(false);
+  var shouldAlwaysFadeInStable = useStableRef(shouldAlwaysFadeIn);
   var start = useCallback(function (api) {
     // @ts-ignore
     apiRef.current = api;
@@ -234,7 +240,7 @@ function Tooltip(_ref) {
           hasCalledShowHandler.current = true;
           onShowHandlerStable.current();
         }
-        setState(isImmediate ? 'show-immediate' : 'fade-in');
+        setState(!isImmediate ? 'fade-in' : 'show-immediate');
       },
       hide: function hide(_ref4) {
         var isImmediate = _ref4.isImmediate;
@@ -244,11 +250,12 @@ function Tooltip(_ref) {
           setState('before-fade-out');
         }
       },
-      done: done
+      done: done,
+      shouldAlwaysFadeIn: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? shouldAlwaysFadeInStable.current : false
     };
     var api = show(entry);
     start(api);
-  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable]);
+  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable, shouldAlwaysFadeInStable]);
   var hideTooltipOnEsc = useCallback(function () {
     var _apiRef$current2;
     (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.requestHide({
@@ -314,18 +321,22 @@ function Tooltip(_ref) {
       return;
     }
     event.preventDefault();
-    var source = position === 'mouse' ? {
+    var source = isMousePosition ? {
       type: 'mouse',
       // TODO: ideally not recalculating this object each time
-      mouse: getMousePosition({
+      // Removing old `mouse` behind gate because it stored a function.
+      // With the gate we just store the coords which are easier to work with.
+      mouse: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? undefined : getMousePosition({
         left: event.clientX,
         top: event.clientY
-      })
+      }),
+      clientX: event.clientX,
+      clientY: event.clientY
     } : {
       type: 'keyboard'
     };
     tryShowTooltip(source);
-  }, [position, tryShowTooltip]);
+  }, [isMousePosition, tryShowTooltip]);
 
   // Ideally we would be using onMouseEnter here, but
   // because we are binding the event to the target parent
@@ -349,13 +360,19 @@ function Tooltip(_ref) {
       });
     }
   }, []);
-  var onMouseMove = position === 'mouse' ? function (event) {
+  var onMouseMove = isMousePosition ? function (event) {
     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
-      });
+      if (!fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+        apiRef.current.mousePosition = getMousePosition({
+          left: event.clientX,
+          top: event.clientY
+        });
+      }
+      apiRef.current.mousePos = {
+        clientX: event.clientX,
+        clientY: event.clientY
+      };
     }
   } : undefined;
   var onMouseOverTooltip = useCallback(function () {
@@ -372,7 +389,7 @@ function Tooltip(_ref) {
       if (!e.target.matches(':focus-visible')) {
         return;
       }
-    } catch (_) {
+    } catch (_unused) {
       // Ignore errors from environments that don't support :focus-visible
     }
 
@@ -422,10 +439,16 @@ function Tooltip(_ref) {
     onClose: handleOpenLayerObserverCloseSignal
   });
   var getReferenceElement = function getReferenceElement() {
-    var _apiRef$current5;
-    if (position === 'mouse' && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePosition) {
-      var _apiRef$current6;
-      return (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.mousePosition;
+    var _apiRef$current5, _apiRef$current6;
+    if (isMousePosition && (_apiRef$current5 = apiRef.current) !== null && _apiRef$current5 !== void 0 && _apiRef$current5.mousePos && targetRef.current && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      return getVirtualElementFromMousePos(apiRef.current.mousePos, {
+        targetElement: targetRef.current,
+        tooltipPosition: position
+      });
+    }
+    if (isMousePosition && (_apiRef$current6 = apiRef.current) !== null && _apiRef$current6 !== void 0 && _apiRef$current6.mousePosition && !fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')) {
+      var _apiRef$current7;
+      return (_apiRef$current7 = apiRef.current) === null || _apiRef$current7 === void 0 ? void 0 : _apiRef$current7.mousePosition;
     }
     return targetRef.current || undefined;
   };
@@ -505,7 +528,7 @@ function Tooltip(_ref) {
     // 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)];
+    var direction = isMousePosition ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
     return /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
     }, shouldRenderTooltipChildren && /*#__PURE__*/React.createElement(FadeIn, {

package/dist/esm/utilities.js

@@ -18,4 +18,46 @@ export function getMousePosition(mouseCoordinates) {
     clientWidth: 0,
     clientHeight: 0
   };
+}
+export function getVirtualElementFromMousePos(mousePos, _ref) {
+  var targetElement = _ref.targetElement,
+    tooltipPosition = _ref.tooltipPosition;
+  if (tooltipPosition === 'mouse') {
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return DOMRect.fromRect({
+          x: mousePos.clientX,
+          y: mousePos.clientY,
+          width: 0,
+          height: 0
+        });
+      }
+    };
+  }
+  var targetRect = targetElement.getBoundingClientRect();
+  if (tooltipPosition === 'mouse-x') {
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return DOMRect.fromRect({
+          x: mousePos.clientX,
+          y: targetRect.top,
+          width: 0,
+          height: targetRect.height
+        });
+      }
+    };
+  }
+  if (tooltipPosition === 'mouse-y') {
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return DOMRect.fromRect({
+          x: targetRect.left,
+          y: mousePos.clientY,
+          width: targetRect.width,
+          height: 0
+        });
+      }
+    };
+  }
+  throw new Error("Invalid tooltip position for virtual element: ".concat(tooltipPosition));
 }

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

@@ -1,7 +1,10 @@
-import { type FakeMouseElement } from '../utilities';
+import type { VirtualElement } from '@popperjs/core';
+import type { FakeMouseElement } from '../utilities';
 export type Source = {
     type: 'mouse';
-    mouse: FakeMouseElement;
+    mouse?: VirtualElement | FakeMouseElement;
+    clientX: number;
+    clientY: number;
 } | {
     type: 'keyboard';
 };
@@ -15,10 +18,12 @@ export type Entry = {
     }) => void;
     delay: number;
     done: () => void;
+    shouldAlwaysFadeIn: boolean;
 };
 export type API = {
     isActive: () => boolean;
-    mousePosition: FakeMouseElement | null;
+    mousePosition: VirtualElement | FakeMouseElement | null | undefined;
+    mousePos: Pick<React.MouseEvent<HTMLElement>, 'clientX' | 'clientY'> | null;
     requestHide: (value: {
         isImmediate: boolean;
     }) => void;

package/dist/types/tooltip.d.ts

@@ -5,5 +5,5 @@ import { type TooltipProps } from './types';
  *
  * A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
  */
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, canAppear, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, isScreenReaderAnnouncementDisabled, shortcut, }: TooltipProps): React.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, canAppear, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, isScreenReaderAnnouncementDisabled, shortcut, UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn, }: TooltipProps): React.JSX.Element;
 export default Tooltip;

package/dist/types/types.d.ts

@@ -3,7 +3,7 @@ import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type Placement } from '@atlaskit/popper';
 import { type TooltipPrimitiveProps } from './tooltip-primitive';
 export type PositionTypeBase = Placement;
-export type PositionType = PositionTypeBase | 'mouse';
+export type PositionType = PositionTypeBase | 'mouse' | 'mouse-y' | 'mouse-x';
 export interface TriggerProps {
     onMouseOver: (event: React.MouseEvent<HTMLElement>) => void;
     onMouseOut: (event: React.MouseEvent<HTMLElement>) => void;
@@ -56,7 +56,7 @@ export interface TooltipProps {
     hideTooltipOnMouseDown?: boolean;
     /**
      * Where the tooltip should appear relative to the mouse pointer.
-     * Only use this when the `position` prop is set to `"mouse"`.
+     * Only use this when the `position` prop is set to `"mouse"`, `"mouse-y"`, or `"mouse-x"`.
      * When interacting with the target element using a keyboard, it will use this position against the target element instead.
      */
     mousePosition?: PositionTypeBase;
@@ -92,6 +92,8 @@ export interface TooltipProps {
     /**
      * Where the tooltip should appear relative to its target.
      * If set to `"mouse"`, the tooltip will display next to the mouse pointer instead.
+     * If set to `"mouse-y"`, the tooltip will use the mouse Y coordinate but the target X coordinate.
+     * If set to `"mouse-x"`, the tooltip will use the mouse X coordinate but the target Y coordinate.
      * Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
      */
     position?: PositionType;
@@ -138,4 +140,10 @@ export interface TooltipProps {
      * Keys will be displayed as individual keyboard key segments after the tooltip content.
      */
     shortcut?: string[];
+    /**
+     * When set to true, the tooltip will always use the fade-in animation
+     * and never use the show-immediate behavior, even when another tooltip
+     * is already visible.
+     */
+    UNSAFE_shouldAlwaysFadeIn?: boolean;
 }

package/dist/types/utilities.d.ts

@@ -1,3 +1,4 @@
+import type { VirtualElement } from '@popperjs/core';
 export interface FakeMouseElement {
     getBoundingClientRect: () => {
         top: number;
@@ -14,3 +15,10 @@ export declare function getMousePosition(mouseCoordinates: {
     top: number;
     left: number;
 }): FakeMouseElement;
+export declare function getVirtualElementFromMousePos(mousePos: {
+    clientX: number;
+    clientY: number;
+}, { targetElement, tooltipPosition, }: {
+    targetElement: HTMLElement;
+    tooltipPosition: 'mouse' | 'mouse-x' | 'mouse-y';
+}): VirtualElement;

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

@@ -1,7 +1,10 @@
-import { type FakeMouseElement } from '../utilities';
+import type { VirtualElement } from '@popperjs/core';
+import type { FakeMouseElement } from '../utilities';
 export type Source = {
     type: 'mouse';
-    mouse: FakeMouseElement;
+    mouse?: VirtualElement | FakeMouseElement;
+    clientX: number;
+    clientY: number;
 } | {
     type: 'keyboard';
 };
@@ -15,10 +18,12 @@ export type Entry = {
     }) => void;
     delay: number;
     done: () => void;
+    shouldAlwaysFadeIn: boolean;
 };
 export type API = {
     isActive: () => boolean;
-    mousePosition: FakeMouseElement | null;
+    mousePosition: VirtualElement | FakeMouseElement | null | undefined;
+    mousePos: Pick<React.MouseEvent<HTMLElement>, 'clientX' | 'clientY'> | null;
     requestHide: (value: {
         isImmediate: boolean;
     }) => void;

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

@@ -5,5 +5,5 @@ import { type TooltipProps } from './types';
  *
  * A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
  */
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, canAppear, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, isScreenReaderAnnouncementDisabled, shortcut, }: TooltipProps): React.JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, canAppear, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, isScreenReaderAnnouncementDisabled, shortcut, UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn, }: TooltipProps): React.JSX.Element;
 export default Tooltip;

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

@@ -3,7 +3,7 @@ import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type Placement } from '@atlaskit/popper';
 import { type TooltipPrimitiveProps } from './tooltip-primitive';
 export type PositionTypeBase = Placement;
-export type PositionType = PositionTypeBase | 'mouse';
+export type PositionType = PositionTypeBase | 'mouse' | 'mouse-y' | 'mouse-x';
 export interface TriggerProps {
     onMouseOver: (event: React.MouseEvent<HTMLElement>) => void;
     onMouseOut: (event: React.MouseEvent<HTMLElement>) => void;
@@ -56,7 +56,7 @@ export interface TooltipProps {
     hideTooltipOnMouseDown?: boolean;
     /**
      * Where the tooltip should appear relative to the mouse pointer.
-     * Only use this when the `position` prop is set to `"mouse"`.
+     * Only use this when the `position` prop is set to `"mouse"`, `"mouse-y"`, or `"mouse-x"`.
      * When interacting with the target element using a keyboard, it will use this position against the target element instead.
      */
     mousePosition?: PositionTypeBase;
@@ -92,6 +92,8 @@ export interface TooltipProps {
     /**
      * Where the tooltip should appear relative to its target.
      * If set to `"mouse"`, the tooltip will display next to the mouse pointer instead.
+     * If set to `"mouse-y"`, the tooltip will use the mouse Y coordinate but the target X coordinate.
+     * If set to `"mouse-x"`, the tooltip will use the mouse X coordinate but the target Y coordinate.
      * Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
      */
     position?: PositionType;
@@ -138,4 +140,10 @@ export interface TooltipProps {
      * Keys will be displayed as individual keyboard key segments after the tooltip content.
      */
     shortcut?: string[];
+    /**
+     * When set to true, the tooltip will always use the fade-in animation
+     * and never use the show-immediate behavior, even when another tooltip
+     * is already visible.
+     */
+    UNSAFE_shouldAlwaysFadeIn?: boolean;
 }

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

@@ -1,3 +1,4 @@
+import type { VirtualElement } from '@popperjs/core';
 export interface FakeMouseElement {
     getBoundingClientRect: () => {
         top: number;
@@ -14,3 +15,10 @@ export declare function getMousePosition(mouseCoordinates: {
     top: number;
     left: number;
 }): FakeMouseElement;
+export declare function getVirtualElementFromMousePos(mousePos: {
+    clientX: number;
+    clientY: number;
+}, { targetElement, tooltipPosition, }: {
+    targetElement: HTMLElement;
+    tooltipPosition: 'mouse' | 'mouse-x' | 'mouse-y';
+}): VirtualElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "20.11.1",
+	"version": "20.13.0",
 	"description": "A tooltip describes an interactive element on mouse hover or keyboard focus.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,13 +34,13 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/layering": "^3.4.0",
+		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/portal": "^5.1.0",
+		"@atlaskit/portal": "^5.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^9.0.0",
+		"@atlaskit/tokens": "^9.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0"
@@ -52,17 +52,19 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
+		"@af/suppress-react-warnings": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/docs": "^11.2.0",
-		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/icon": "^29.4.0",
+		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/section-message": "^8.11.0",
+		"@atlaskit/section-message": "^8.12.0",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/testing-library": "^0.4.0",
-		"@testing-library/react": "^13.4.0",
+		"@testing-library/react": "^16.3.0",
 		"react-dom": "^18.2.0",
 		"tiny-invariant": "^1.2.0"
 	},
@@ -92,6 +94,9 @@
 	},
 	"homepage": "https://atlassian.design/components/tooltip/",
 	"platform-feature-flags": {
+		"platform_dst_nav4_side_nav_resize_tooltip_feedback": {
+			"type": "boolean"
+		},
 		"platform-component-visual-refresh": {
 			"type": "boolean",
 			"referenceOnly": true