@atlaskit/tooltip 20.12.0 → 20.14.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/tooltip
 
+## 20.14.0
+
+### Minor Changes
+
+- [`9cb76d1d2b1a0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9cb76d1d2b1a0) -
+  Adds `UNSAFE_shouldRenderToParent` prop behind the
+  `platform_dst_nav4_side_nav_resize_tooltip_feedback` feature gate. When enabled the tooltip will
+  be rendered as a sibling instead of in a portal.
+
+## 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

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

@@ -100,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) {

package/dist/cjs/tooltip.js

@@ -33,7 +33,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "0.0.0-development"
+  packageVersion: "20.13.0"
 };
 
 // Inverts motion direction
@@ -90,7 +90,11 @@ 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;
+    shortcut = _ref.shortcut,
+    _ref$UNSAFE_shouldAlw = _ref.UNSAFE_shouldAlwaysFadeIn,
+    shouldAlwaysFadeIn = _ref$UNSAFE_shouldAlw === void 0 ? false : _ref$UNSAFE_shouldAlw,
+    _ref$UNSAFE_shouldRen = _ref.UNSAFE_shouldRenderToParent,
+    UNSAFE_shouldRenderToParent = _ref$UNSAFE_shouldRen === void 0 ? false : _ref$UNSAFE_shouldRen;
   // 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;
@@ -134,6 +138,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;
@@ -246,7 +251,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;
@@ -256,11 +261,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({
@@ -499,6 +505,7 @@ function Tooltip(_ref) {
     hidden: true,
     id: tooltipIdForHiddenContent
   }, typeof content === 'function' ? content({}) : content) : null;
+  var PopperWrapper = UNSAFE_shouldRenderToParent && (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? _react.Fragment : TooltipPortal;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof children === 'function' ?
   /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
@@ -519,9 +526,7 @@ function Tooltip(_ref) {
      * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
      */,
     role: "presentation"
-  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/_react.default.createElement(_portal.default, {
-    zIndex: tooltipZIndex
-  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/_react.default.createElement(PopperWrapper, null, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -568,4 +573,10 @@ function Tooltip(_ref) {
     }));
   })) : null);
 }
-var _default = exports.default = Tooltip;
+var _default = exports.default = Tooltip;
+var TooltipPortal = function TooltipPortal(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/_react.default.createElement(_portal.default, {
+    zIndex: tooltipZIndex
+  }, children);
+};

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

@@ -96,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) {

package/dist/es2019/tooltip.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "0.0.0-development"
+  packageVersion: "20.13.0"
 };
 
 // Inverts motion direction
@@ -63,7 +63,9 @@ function Tooltip({
   strategy = 'fixed',
   ignoreTooltipPointerEvents = false,
   isScreenReaderAnnouncementDisabled = false,
-  shortcut
+  shortcut,
+  UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn = false,
+  UNSAFE_shouldRenderToParent = false
 }) {
   // 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';
@@ -107,6 +109,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;
@@ -221,7 +224,7 @@ function Tooltip({
           hasCalledShowHandler.current = true;
           onShowHandlerStable.current();
         }
-        setState(isImmediate ? 'show-immediate' : 'fade-in');
+        setState(!isImmediate ? 'fade-in' : 'show-immediate');
       },
       hide: ({
         isImmediate
@@ -232,11 +235,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({
@@ -473,6 +477,7 @@ function Tooltip({
     hidden: true,
     id: tooltipIdForHiddenContent
   }, typeof content === 'function' ? content({}) : content) : null;
+  const PopperWrapper = UNSAFE_shouldRenderToParent && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? Fragment : TooltipPortal;
   return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
   /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
@@ -494,9 +499,7 @@ function Tooltip({
      * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
      */,
     role: "presentation"
-  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(Portal, {
-    zIndex: tooltipZIndex
-  }, /*#__PURE__*/React.createElement(Popper, {
+  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(PopperWrapper, null, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -548,4 +551,11 @@ function Tooltip({
     }) : content)));
   })) : null);
 }
-export default Tooltip;
+export default Tooltip;
+const TooltipPortal = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: tooltipZIndex
+  }, children);
+};

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

@@ -95,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) {

package/dist/esm/tooltip.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "0.0.0-development"
+  packageVersion: "20.13.0"
 };
 
 // Inverts motion direction
@@ -81,7 +81,11 @@ 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;
+    shortcut = _ref.shortcut,
+    _ref$UNSAFE_shouldAlw = _ref.UNSAFE_shouldAlwaysFadeIn,
+    shouldAlwaysFadeIn = _ref$UNSAFE_shouldAlw === void 0 ? false : _ref$UNSAFE_shouldAlw,
+    _ref$UNSAFE_shouldRen = _ref.UNSAFE_shouldRenderToParent,
+    UNSAFE_shouldRenderToParent = _ref$UNSAFE_shouldRen === void 0 ? false : _ref$UNSAFE_shouldRen;
   // 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;
@@ -125,6 +129,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;
@@ -237,7 +242,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;
@@ -247,11 +252,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({
@@ -490,6 +496,7 @@ function Tooltip(_ref) {
     hidden: true,
     id: tooltipIdForHiddenContent
   }, typeof content === 'function' ? content({}) : content) : null;
+  var PopperWrapper = UNSAFE_shouldRenderToParent && fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? Fragment : TooltipPortal;
   return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ?
   /*#__PURE__*/
   // once we deprecate the wrapped approach, we can put the aria
@@ -510,9 +517,7 @@ function Tooltip(_ref) {
      * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
      */,
     role: "presentation"
-  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(Portal, {
-    zIndex: tooltipZIndex
-  }, /*#__PURE__*/React.createElement(Popper, {
+  }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(PopperWrapper, null, /*#__PURE__*/React.createElement(Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -559,4 +564,10 @@ function Tooltip(_ref) {
     }));
   })) : null);
 }
-export default Tooltip;
+export default Tooltip;
+var TooltipPortal = function TooltipPortal(_ref7) {
+  var children = _ref7.children;
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: tooltipZIndex
+  }, children);
+};

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

@@ -18,6 +18,7 @@ export type Entry = {
     }) => void;
     delay: number;
     done: () => void;
+    shouldAlwaysFadeIn: boolean;
 };
 export type API = {
     isActive: () => boolean;

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, UNSAFE_shouldRenderToParent, }: TooltipProps): React.JSX.Element;
 export default Tooltip;

package/dist/types/types.d.ts

@@ -140,4 +140,16 @@ 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;
+    /**
+     * When enabled, the tooltip will be rendered as a sibling to the trigger element instead of being portaled to the document body.
+     *
+     * This is an experimental prop and may be removed at any time. It is not yet intended for public use.
+     */
+    UNSAFE_shouldRenderToParent?: boolean;
 }

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

@@ -18,6 +18,7 @@ export type Entry = {
     }) => void;
     delay: number;
     done: () => void;
+    shouldAlwaysFadeIn: boolean;
 };
 export type API = {
     isActive: () => boolean;

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, UNSAFE_shouldRenderToParent, }: TooltipProps): React.JSX.Element;
 export default Tooltip;

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

@@ -140,4 +140,16 @@ 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;
+    /**
+     * When enabled, the tooltip will be rendered as a sibling to the trigger element instead of being portaled to the document body.
+     *
+     * This is an experimental prop and may be removed at any time. It is not yet intended for public use.
+     */
+    UNSAFE_shouldRenderToParent?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "20.12.0",
+	"version": "20.14.0",
 	"description": "A tooltip describes an interactive element on mouse hover or keyboard focus.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 		"@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.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -57,13 +57,14 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/docs": "^11.2.0",
-		"@atlaskit/icon": "^29.3.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"
 	},