@atlaskit/tooltip 20.12.0 → 20.13.0

package/CHANGELOG.md

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

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

@@ -90,7 +90,9 @@ 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;
   // 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 +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;
@@ -246,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;
@@ -256,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({

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

@@ -63,7 +63,8 @@ function Tooltip({
   strategy = 'fixed',
   ignoreTooltipPointerEvents = false,
   isScreenReaderAnnouncementDisabled = false,
-  shortcut
+  shortcut,
+  UNSAFE_shouldAlwaysFadeIn: shouldAlwaysFadeIn = 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 +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;
@@ -221,7 +223,7 @@ function Tooltip({
           hasCalledShowHandler.current = true;
           onShowHandlerStable.current();
         }
-        setState(isImmediate ? 'show-immediate' : 'fade-in');
+        setState(!isImmediate ? 'fade-in' : 'show-immediate');
       },
       hide: ({
         isImmediate
@@ -232,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({

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

@@ -81,7 +81,9 @@ 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;
   // 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 +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;
@@ -237,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;
@@ -247,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({

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

package/dist/types/types.d.ts

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

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

@@ -140,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "20.12.0",
+	"version": "20.13.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"
 	},