@atlaskit/tooltip 20.11.1 → 20.12.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/tooltip
 
+## 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
 
@@ -137,7 +138,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");
@@ -90,7 +91,9 @@ function Tooltip(_ref) {
     _ref$isScreenReaderAn = _ref.isScreenReaderAnnouncementDisabled,
     isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn,
     shortcut = _ref.shortcut;
-  var 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`.
+  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',
@@ -323,18 +326,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 +365,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 +394,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 +444,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 +533,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
@@ -133,7 +134,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',
@@ -64,7 +65,9 @@ function Tooltip({
   isScreenReaderAnnouncementDisabled = false,
   shortcut
 }) {
-  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',
@@ -299,18 +302,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 +341,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 +370,7 @@ function Tooltip({
       if (!e.target.matches(':focus-visible')) {
         return;
       }
-    } catch (_) {
+    } catch {
       // Ignore errors from environments that don't support :focus-visible
     }
 
@@ -407,10 +420,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 +509,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
@@ -132,7 +133,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',
@@ -81,7 +82,9 @@ function Tooltip(_ref) {
     _ref$isScreenReaderAn = _ref.isScreenReaderAnnouncementDisabled,
     isScreenReaderAnnouncementDisabled = _ref$isScreenReaderAn === void 0 ? false : _ref$isScreenReaderAn,
     shortcut = _ref.shortcut;
-  var 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`.
+  var isMousePosition = position === 'mouse' || position === 'mouse-y' || position === 'mouse-x';
+  var tooltipPosition = isMousePosition ? mousePosition : position;
   var onShowHandler = usePlatformLeafSyntheticEventHandler(_objectSpread({
     fn: onShow,
     action: 'displayed',
@@ -314,18 +317,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 +356,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 +385,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 +435,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 +524,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';
 };
@@ -18,7 +21,8 @@ export type Entry = {
 };
 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/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;

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';
 };
@@ -18,7 +21,8 @@ export type Entry = {
 };
 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/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;

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.12.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/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,12 +52,13 @@
 	"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/link": "^3.3.0",
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/section-message": "^8.11.0",
 		"@atlassian/ssr-tests": "workspace:^",
@@ -92,6 +93,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