@atlaskit/tooltip 18.9.0 → 18.9.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/tooltip
 
+## 18.9.1
+
+### Patch Changes
+
+- [#164322](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164322)
+  [`e9317ed13ba40`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e9317ed13ba40) -
+  Internal refactors to state to reduce the number of JavaScript event listeners.
+
 ## 18.9.0
 
 ### Minor Changes

package/dist/cjs/tooltip.js

@@ -34,7 +34,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.9.0"
+  packageVersion: "18.9.1"
 };
 
 // Inverts motion direction
@@ -124,12 +124,13 @@ function Tooltip(_ref) {
 
   // Putting a few things into refs so that we don't have to break memoization
   var stableState = (0, _useStableRef.default)(state);
-  var stableProps = (0, _useStableRef.default)({
-    onShowHandler: onShowHandler,
-    onHideHandler: onHideHandler,
-    delay: delay,
-    canAppear: canAppear
-  });
+  // These props are placed in separate refs instead of a single object to reduce memory usage.
+  // Placing them in the same object previously caused an increase in the number of JavaScript event listeners
+  // before garbage collection.
+  var onShowHandlerStable = (0, _useStableRef.default)(onShowHandler);
+  var onHideHandlerStable = (0, _useStableRef.default)(onHideHandler);
+  var delayStable = (0, _useStableRef.default)(delay);
+  var canAppearStable = (0, _useStableRef.default)(canAppear);
   var hasCalledShowHandler = (0, _react.useRef)(false);
   var start = (0, _react.useCallback)(function (api) {
     // @ts-ignore
@@ -142,7 +143,7 @@ function Tooltip(_ref) {
     }
     // Only call onHideHandler if we have called onShowHandler
     if (hasCalledShowHandler.current) {
-      stableProps.current.onHideHandler();
+      onHideHandlerStable.current();
     }
     // @ts-ignore
     apiRef.current = null;
@@ -150,7 +151,7 @@ function Tooltip(_ref) {
     hasCalledShowHandler.current = false;
     // just in case
     setState('hide');
-  }, [stableProps]);
+  }, [onHideHandlerStable]);
   var abort = (0, _react.useCallback)(function () {
     if (!apiRef.current) {
       return;
@@ -158,11 +159,11 @@ function Tooltip(_ref) {
     apiRef.current.abort();
     // Only call onHideHandler if we have called onShowHandler
     if (hasCalledShowHandler.current) {
-      stableProps.current.onHideHandler();
+      onHideHandlerStable.current();
     }
     // @ts-ignore
     apiRef.current = null;
-  }, [stableProps]);
+  }, [onHideHandlerStable]);
   (0, _react.useEffect)(function mount() {
     return function unmount() {
       if (apiRef.current) {
@@ -194,7 +195,7 @@ function Tooltip(_ref) {
     });
   }, []);
   var tryShowTooltip = (0, _react.useCallback)(function (source) {
-    var _stableProps$current$, _stableProps$current;
+    var _canAppearStable$curr;
     /**
      * Prevent tooltips from being shown during a drag. This can occur with
      * the native drag and drop API, where some pointer events can fire
@@ -230,18 +231,18 @@ function Tooltip(_ref) {
      *   where moving the mouse could result in a different outcome to if
      *   the mouse was not moved.
      */
-    if (stableProps.current.canAppear && !((_stableProps$current$ = (_stableProps$current = stableProps.current).canAppear) !== null && _stableProps$current$ !== void 0 && _stableProps$current$.call(_stableProps$current))) {
+    if (canAppearStable.current && !((_canAppearStable$curr = canAppearStable.current) !== null && _canAppearStable$curr !== void 0 && _canAppearStable$curr.call(canAppearStable))) {
       return;
     }
     var entry = {
       source: source,
-      delay: stableProps.current.delay,
+      delay: delayStable.current,
       show: function show(_ref3) {
         var isImmediate = _ref3.isImmediate;
         // Call the onShow handler if it hasn't been called yet
         if (!hasCalledShowHandler.current) {
           hasCalledShowHandler.current = true;
-          stableProps.current.onShowHandler();
+          onShowHandlerStable.current();
         }
         setState(isImmediate ? 'show-immediate' : 'fade-in');
       },
@@ -257,7 +258,7 @@ function Tooltip(_ref) {
     };
     var api = (0, _tooltipManager.show)(entry);
     start(api);
-  }, [stableProps, abort, done, start]);
+  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable]);
   var hideTooltipOnEsc = (0, _react.useCallback)(function () {
     var _apiRef$current2;
     (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.requestHide({
@@ -462,7 +463,13 @@ function Tooltip(_ref) {
     'aria-describedby': tooltipIdForHiddenContent,
     ref: setDirectRef
   })), hiddenContent) : /*#__PURE__*/_react.default.createElement(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
-    ref: setImplicitRefFromChildren,
+    ref: setImplicitRefFromChildren
+    /**
+     * TODO: Why is role="presentation" added?
+     * - Is it only to "remove" the `Container` from screen readers?
+     * - Why is it added only to the `Container` but not to `tooltipTriggerProps`?
+     * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
+     */,
     role: "presentation"
   }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/_react.default.createElement(_portal.default, {
     zIndex: tooltipZIndex

package/dist/es2019/tooltip.js

@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.9.0"
+  packageVersion: "18.9.1"
 };
 
 // Inverts motion direction
@@ -96,12 +96,13 @@ function Tooltip({
 
   // Putting a few things into refs so that we don't have to break memoization
   const stableState = useStableRef(state);
-  const stableProps = useStableRef({
-    onShowHandler,
-    onHideHandler,
-    delay,
-    canAppear
-  });
+  // These props are placed in separate refs instead of a single object to reduce memory usage.
+  // Placing them in the same object previously caused an increase in the number of JavaScript event listeners
+  // before garbage collection.
+  const onShowHandlerStable = useStableRef(onShowHandler);
+  const onHideHandlerStable = useStableRef(onHideHandler);
+  const delayStable = useStableRef(delay);
+  const canAppearStable = useStableRef(canAppear);
   const hasCalledShowHandler = useRef(false);
   const start = useCallback(api => {
     // @ts-ignore
@@ -114,7 +115,7 @@ function Tooltip({
     }
     // Only call onHideHandler if we have called onShowHandler
     if (hasCalledShowHandler.current) {
-      stableProps.current.onHideHandler();
+      onHideHandlerStable.current();
     }
     // @ts-ignore
     apiRef.current = null;
@@ -122,7 +123,7 @@ function Tooltip({
     hasCalledShowHandler.current = false;
     // just in case
     setState('hide');
-  }, [stableProps]);
+  }, [onHideHandlerStable]);
   const abort = useCallback(() => {
     if (!apiRef.current) {
       return;
@@ -130,11 +131,11 @@ function Tooltip({
     apiRef.current.abort();
     // Only call onHideHandler if we have called onShowHandler
     if (hasCalledShowHandler.current) {
-      stableProps.current.onHideHandler();
+      onHideHandlerStable.current();
     }
     // @ts-ignore
     apiRef.current = null;
-  }, [stableProps]);
+  }, [onHideHandlerStable]);
   useEffect(function mount() {
     return function unmount() {
       if (apiRef.current) {
@@ -167,7 +168,7 @@ function Tooltip({
     });
   }, []);
   const tryShowTooltip = useCallback(source => {
-    var _stableProps$current$, _stableProps$current;
+    var _canAppearStable$curr;
     /**
      * Prevent tooltips from being shown during a drag. This can occur with
      * the native drag and drop API, where some pointer events can fire
@@ -203,19 +204,19 @@ function Tooltip({
      *   where moving the mouse could result in a different outcome to if
      *   the mouse was not moved.
      */
-    if (stableProps.current.canAppear && !((_stableProps$current$ = (_stableProps$current = stableProps.current).canAppear) !== null && _stableProps$current$ !== void 0 && _stableProps$current$.call(_stableProps$current))) {
+    if (canAppearStable.current && !((_canAppearStable$curr = canAppearStable.current) !== null && _canAppearStable$curr !== void 0 && _canAppearStable$curr.call(canAppearStable))) {
       return;
     }
     const entry = {
       source,
-      delay: stableProps.current.delay,
+      delay: delayStable.current,
       show: ({
         isImmediate
       }) => {
         // Call the onShow handler if it hasn't been called yet
         if (!hasCalledShowHandler.current) {
           hasCalledShowHandler.current = true;
-          stableProps.current.onShowHandler();
+          onShowHandlerStable.current();
         }
         setState(isImmediate ? 'show-immediate' : 'fade-in');
       },
@@ -232,7 +233,7 @@ function Tooltip({
     };
     const api = show(entry);
     start(api);
-  }, [stableProps, abort, done, start]);
+  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable]);
   const hideTooltipOnEsc = useCallback(() => {
     var _apiRef$current2;
     (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.requestHide({
@@ -436,7 +437,13 @@ function Tooltip({
     'aria-describedby': tooltipIdForHiddenContent,
     ref: setDirectRef
   }), hiddenContent) : /*#__PURE__*/React.createElement(CastTargetContainer, _extends({}, tooltipTriggerProps, {
-    ref: setImplicitRefFromChildren,
+    ref: setImplicitRefFromChildren
+    /**
+     * TODO: Why is role="presentation" added?
+     * - Is it only to "remove" the `Container` from screen readers?
+     * - Why is it added only to the `Container` but not to `tooltipTriggerProps`?
+     * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
+     */,
     role: "presentation"
   }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(Portal, {
     zIndex: tooltipZIndex

package/dist/esm/tooltip.js

@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.9.0"
+  packageVersion: "18.9.1"
 };
 
 // Inverts motion direction
@@ -114,12 +114,13 @@ function Tooltip(_ref) {
 
   // Putting a few things into refs so that we don't have to break memoization
   var stableState = useStableRef(state);
-  var stableProps = useStableRef({
-    onShowHandler: onShowHandler,
-    onHideHandler: onHideHandler,
-    delay: delay,
-    canAppear: canAppear
-  });
+  // These props are placed in separate refs instead of a single object to reduce memory usage.
+  // Placing them in the same object previously caused an increase in the number of JavaScript event listeners
+  // before garbage collection.
+  var onShowHandlerStable = useStableRef(onShowHandler);
+  var onHideHandlerStable = useStableRef(onHideHandler);
+  var delayStable = useStableRef(delay);
+  var canAppearStable = useStableRef(canAppear);
   var hasCalledShowHandler = useRef(false);
   var start = useCallback(function (api) {
     // @ts-ignore
@@ -132,7 +133,7 @@ function Tooltip(_ref) {
     }
     // Only call onHideHandler if we have called onShowHandler
     if (hasCalledShowHandler.current) {
-      stableProps.current.onHideHandler();
+      onHideHandlerStable.current();
     }
     // @ts-ignore
     apiRef.current = null;
@@ -140,7 +141,7 @@ function Tooltip(_ref) {
     hasCalledShowHandler.current = false;
     // just in case
     setState('hide');
-  }, [stableProps]);
+  }, [onHideHandlerStable]);
   var abort = useCallback(function () {
     if (!apiRef.current) {
       return;
@@ -148,11 +149,11 @@ function Tooltip(_ref) {
     apiRef.current.abort();
     // Only call onHideHandler if we have called onShowHandler
     if (hasCalledShowHandler.current) {
-      stableProps.current.onHideHandler();
+      onHideHandlerStable.current();
     }
     // @ts-ignore
     apiRef.current = null;
-  }, [stableProps]);
+  }, [onHideHandlerStable]);
   useEffect(function mount() {
     return function unmount() {
       if (apiRef.current) {
@@ -184,7 +185,7 @@ function Tooltip(_ref) {
     });
   }, []);
   var tryShowTooltip = useCallback(function (source) {
-    var _stableProps$current$, _stableProps$current;
+    var _canAppearStable$curr;
     /**
      * Prevent tooltips from being shown during a drag. This can occur with
      * the native drag and drop API, where some pointer events can fire
@@ -220,18 +221,18 @@ function Tooltip(_ref) {
      *   where moving the mouse could result in a different outcome to if
      *   the mouse was not moved.
      */
-    if (stableProps.current.canAppear && !((_stableProps$current$ = (_stableProps$current = stableProps.current).canAppear) !== null && _stableProps$current$ !== void 0 && _stableProps$current$.call(_stableProps$current))) {
+    if (canAppearStable.current && !((_canAppearStable$curr = canAppearStable.current) !== null && _canAppearStable$curr !== void 0 && _canAppearStable$curr.call(canAppearStable))) {
       return;
     }
     var entry = {
       source: source,
-      delay: stableProps.current.delay,
+      delay: delayStable.current,
       show: function show(_ref3) {
         var isImmediate = _ref3.isImmediate;
         // Call the onShow handler if it hasn't been called yet
         if (!hasCalledShowHandler.current) {
           hasCalledShowHandler.current = true;
-          stableProps.current.onShowHandler();
+          onShowHandlerStable.current();
         }
         setState(isImmediate ? 'show-immediate' : 'fade-in');
       },
@@ -247,7 +248,7 @@ function Tooltip(_ref) {
     };
     var api = show(entry);
     start(api);
-  }, [stableProps, abort, done, start]);
+  }, [canAppearStable, delayStable, done, start, abort, onShowHandlerStable]);
   var hideTooltipOnEsc = useCallback(function () {
     var _apiRef$current2;
     (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.requestHide({
@@ -452,7 +453,13 @@ function Tooltip(_ref) {
     'aria-describedby': tooltipIdForHiddenContent,
     ref: setDirectRef
   })), hiddenContent) : /*#__PURE__*/React.createElement(CastTargetContainer, _extends({}, tooltipTriggerProps, {
-    ref: setImplicitRefFromChildren,
+    ref: setImplicitRefFromChildren
+    /**
+     * TODO: Why is role="presentation" added?
+     * - Is it only to "remove" the `Container` from screen readers?
+     * - Why is it added only to the `Container` but not to `tooltipTriggerProps`?
+     * - Should `role="presentation"` only be used if `shouldRenderHiddenContent == false`?
+     */,
     role: "presentation"
   }), children, hiddenContent), shouldRenderTooltipPopup ? /*#__PURE__*/React.createElement(Portal, {
     zIndex: tooltipZIndex

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "18.9.0",
+	"version": "18.9.1",
 	"description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/layering": "^0.7.0",
+		"@atlaskit/layering": "^0.7.3",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/portal": "^4.9.0",
@@ -68,7 +68,7 @@
 		"jest-in-case": "^1.0.2",
 		"react-dom": "^16.8.0",
 		"react-redux": "^5.1.2",
-		"storybook-addon-performance": "^0.16.0",
+		"storybook-addon-performance": "^0.17.3",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},