@atlaskit/tooltip 17.8.8 → 17.8.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/tooltip
 
+## 17.8.10
+
+### Patch Changes
+
+- [#42577](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42577) [`d51b45b02fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d51b45b02fb) - Add component to push model consumption in JFE
+
+## 17.8.9
+
+### Patch Changes
+
+- [#42475](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42475) [`c93c86d4089`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c93c86d4089) - Tooltip no longer throws in an effect when the first child of tooltip isn't an element.
+- [#42475](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42475) [`61779a58ad8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61779a58ad8) - Tooltip nolonger memoizes the ref callback function for the implicit passing-children-jsx API. The children-as-function API remains memoized. For more control and better performance characteristics we recommend leaning on the explicit children-as-function API over the implicit passing-children-jsx API.
+
 ## 17.8.8
 
 ### Patch Changes

package/dist/cjs/Tooltip.js

@@ -32,7 +32,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.8"
+  packageVersion: "17.8.10"
 };
 
 // Inverts motion direction
@@ -97,18 +97,18 @@ function Tooltip(_ref) {
     setState = _useState2[1];
   var targetRef = (0, _react.useRef)(null);
   var containerRef = (0, _react.useRef)(null);
-  var hasFunctionalChildren = typeof children === 'function'; // Stored to keep our `setRef` callback cleaner.
-  var setRef = (0, _react.useCallback)(function (node) {
-    if (!node) {
-      return;
-    }
-    if (hasFunctionalChildren) {
-      targetRef.current = node;
-    } else {
-      containerRef.current = node;
-      targetRef.current = node.firstChild;
-    }
-  }, [hasFunctionalChildren]);
+
+  // This function is deliberately _not_ memoized as it needs to re-run every render
+  // to pick up any child ref changes. If you use render props you don't have this issue.
+  var setImplicitRefFromChildren = function setImplicitRefFromChildren(node) {
+    containerRef.current = node;
+    targetRef.current = node ? node.firstElementChild : null;
+  };
+
+  // This is memoized and passed into the render props callback.
+  var setDirectRef = (0, _react.useCallback)(function (node) {
+    targetRef.current = node;
+  }, []);
 
   // Putting a few things into refs so that we don't have to break memoization
   var lastState = (0, _react.useRef)(state);
@@ -355,8 +355,7 @@ function Tooltip(_ref) {
     onMouseDown: onMouseDown,
     onClick: onClick,
     onFocus: onFocus,
-    onBlur: onBlur,
-    ref: setRef
+    onBlur: onBlur
   };
 
   // Don't set `data-testid` unless it's defined, as it's not in the interface.
@@ -375,8 +374,6 @@ function Tooltip(_ref) {
     if (!containerRef.current || !targetRef.current || !tooltipId) {
       return;
     }
-
-    // Necessary for TS to know that it has the attribute methods
     var target = targetRef.current;
     if (shouldRenderTooltipContainer) {
       target.setAttribute('aria-describedby', tooltipId);
@@ -389,8 +386,10 @@ function Tooltip(_ref) {
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
   children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
-    'aria-describedby': tooltipId
+    'aria-describedby': tooltipId,
+    ref: setDirectRef
   })) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
+    ref: setImplicitRefFromChildren,
     role: "presentation"
   }), children), shouldRenderTooltipContainer ? (0, _react2.jsx)(_portal.default, {
     zIndex: tooltipZIndex
@@ -427,7 +426,7 @@ function Tooltip(_ref) {
         style: style,
         truncate: truncate,
         placement: tooltipPosition,
-        testId: testId,
+        testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
         onMouseOver: onMouseOverTooltip,
         id: tooltipId

package/dist/es2019/Tooltip.js

@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.8"
+  packageVersion: "17.8.10"
 };
 
 // Inverts motion direction
@@ -72,18 +72,18 @@ function Tooltip({
   const [state, setState] = useState('hide');
   const targetRef = useRef(null);
   const containerRef = useRef(null);
-  const hasFunctionalChildren = typeof children === 'function'; // Stored to keep our `setRef` callback cleaner.
-  const setRef = useCallback(node => {
-    if (!node) {
-      return;
-    }
-    if (hasFunctionalChildren) {
-      targetRef.current = node;
-    } else {
-      containerRef.current = node;
-      targetRef.current = node.firstChild;
-    }
-  }, [hasFunctionalChildren]);
+
+  // This function is deliberately _not_ memoized as it needs to re-run every render
+  // to pick up any child ref changes. If you use render props you don't have this issue.
+  const setImplicitRefFromChildren = node => {
+    containerRef.current = node;
+    targetRef.current = node ? node.firstElementChild : null;
+  };
+
+  // This is memoized and passed into the render props callback.
+  const setDirectRef = useCallback(node => {
+    targetRef.current = node;
+  }, []);
 
   // Putting a few things into refs so that we don't have to break memoization
   const lastState = useRef(state);
@@ -332,8 +332,7 @@ function Tooltip({
     onMouseDown,
     onClick,
     onFocus,
-    onBlur,
-    ref: setRef
+    onBlur
   };
 
   // Don't set `data-testid` unless it's defined, as it's not in the interface.
@@ -352,8 +351,6 @@ function Tooltip({
     if (!containerRef.current || !targetRef.current || !tooltipId) {
       return;
     }
-
-    // Necessary for TS to know that it has the attribute methods
     const target = targetRef.current;
     if (shouldRenderTooltipContainer) {
       target.setAttribute('aria-describedby', tooltipId);
@@ -367,8 +364,10 @@ function Tooltip({
   // instead of optional in `types`
   children({
     ...tooltipTriggerProps,
-    'aria-describedby': tooltipId
+    'aria-describedby': tooltipId,
+    ref: setDirectRef
   }) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+    ref: setImplicitRefFromChildren,
     role: "presentation"
   }), children), shouldRenderTooltipContainer ? jsx(Portal, {
     zIndex: tooltipZIndex
@@ -406,7 +405,7 @@ function Tooltip({
       style: style,
       truncate: truncate,
       placement: tooltipPosition,
-      testId: testId,
+      testId: getReferenceElement() ? testId : testId && `${testId}--unresolved`,
       onMouseOut: onMouseOut,
       onMouseOver: onMouseOverTooltip,
       id: tooltipId

package/dist/esm/Tooltip.js

@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.8"
+  packageVersion: "17.8.10"
 };
 
 // Inverts motion direction
@@ -89,18 +89,18 @@ function Tooltip(_ref) {
     setState = _useState2[1];
   var targetRef = useRef(null);
   var containerRef = useRef(null);
-  var hasFunctionalChildren = typeof children === 'function'; // Stored to keep our `setRef` callback cleaner.
-  var setRef = useCallback(function (node) {
-    if (!node) {
-      return;
-    }
-    if (hasFunctionalChildren) {
-      targetRef.current = node;
-    } else {
-      containerRef.current = node;
-      targetRef.current = node.firstChild;
-    }
-  }, [hasFunctionalChildren]);
+
+  // This function is deliberately _not_ memoized as it needs to re-run every render
+  // to pick up any child ref changes. If you use render props you don't have this issue.
+  var setImplicitRefFromChildren = function setImplicitRefFromChildren(node) {
+    containerRef.current = node;
+    targetRef.current = node ? node.firstElementChild : null;
+  };
+
+  // This is memoized and passed into the render props callback.
+  var setDirectRef = useCallback(function (node) {
+    targetRef.current = node;
+  }, []);
 
   // Putting a few things into refs so that we don't have to break memoization
   var lastState = useRef(state);
@@ -347,8 +347,7 @@ function Tooltip(_ref) {
     onMouseDown: onMouseDown,
     onClick: onClick,
     onFocus: onFocus,
-    onBlur: onBlur,
-    ref: setRef
+    onBlur: onBlur
   };
 
   // Don't set `data-testid` unless it's defined, as it's not in the interface.
@@ -367,8 +366,6 @@ function Tooltip(_ref) {
     if (!containerRef.current || !targetRef.current || !tooltipId) {
       return;
     }
-
-    // Necessary for TS to know that it has the attribute methods
     var target = targetRef.current;
     if (shouldRenderTooltipContainer) {
       target.setAttribute('aria-describedby', tooltipId);
@@ -381,8 +378,10 @@ function Tooltip(_ref) {
   // attribute back into the tooltipTriggerProps and make it required
   // instead of optional in `types`
   children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
-    'aria-describedby': tooltipId
+    'aria-describedby': tooltipId,
+    ref: setDirectRef
   })) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+    ref: setImplicitRefFromChildren,
     role: "presentation"
   }), children), shouldRenderTooltipContainer ? jsx(Portal, {
     zIndex: tooltipZIndex
@@ -419,7 +418,7 @@ function Tooltip(_ref) {
         style: style,
         truncate: truncate,
         placement: tooltipPosition,
-        testId: testId,
+        testId: getReferenceElement() ? testId : testId && "".concat(testId, "--unresolved"),
         onMouseOut: onMouseOut,
         onMouseOver: onMouseOverTooltip,
         id: tooltipId

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.8.8",
+  "version": "17.8.10",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,6 +24,9 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
+    "productPushConsumption": [
+      "jira"
+    ],
     "releaseModel": "continuous",
     "website": {
       "name": "Tooltip",
@@ -43,9 +46,9 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/portal": "^4.3.0",
+    "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.26.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -57,13 +60,14 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^16.10.0",
+    "@atlaskit/button": "^16.13.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
+    "@types/react-redux": "^5.0.0",
     "jest-in-case": "^1.0.2",
     "react-dom": "^16.8.0",
     "react-redux": "^5.1.2",