@atlaskit/tooltip 17.8.7 → 17.8.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/tooltip
 
+## 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
+
+- [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650) [`07aa588c8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07aa588c8a4) - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.
+
 ## 17.8.7
 
 ### 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.7"
+  packageVersion: "17.8.9"
 };
 
 // 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);
@@ -202,7 +202,7 @@ function Tooltip(_ref) {
   }, [abort, done, start]);
   var hideTooltipOnEsc = (0, _react.useCallback)(function () {
     var _apiRef$current;
-    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.requestHide({
+    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.requestHide({
       isImmediate: true
     });
   }, [apiRef]);
@@ -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
@@ -438,5 +437,4 @@ function Tooltip(_ref) {
   })) : null);
 }
 Tooltip.displayName = 'Tooltip';
-var _default = Tooltip;
-exports.default = _default;
+var _default = exports.default = Tooltip;

package/dist/cjs/TooltipContainer.js

@@ -26,15 +26,9 @@ var baseStyles = (0, _react2.css)({
 });
 var truncateStyles = (0, _react2.css)({
   maxWidth: '420px',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 var lightStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
@@ -70,5 +64,4 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
   });
 });
 TooltipContainer.displayName = 'TooltipContainer';
-var _default = TooltipContainer;
-exports.default = _default;
+var _default = exports.default = TooltipContainer;

package/dist/cjs/TooltipPrimitive.js

@@ -42,5 +42,4 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
   }, children));
 });
 TooltipPrimitive.displayName = 'TooltipPrimitive';
-var _default = TooltipPrimitive;
-exports.default = _default;
+var _default = exports.default = TooltipPrimitive;

package/dist/es2019/Tooltip.js

@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.7"
+  packageVersion: "17.8.9"
 };
 
 // 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/es2019/TooltipContainer.js

@@ -18,15 +18,9 @@ const baseStyles = css({
 });
 const truncateStyles = css({
   maxWidth: '420px',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 const lightStyles = css({
   backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,

package/dist/esm/Tooltip.js

@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.8.7"
+  packageVersion: "17.8.9"
 };
 
 // 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);
@@ -194,7 +194,7 @@ function Tooltip(_ref) {
   }, [abort, done, start]);
   var hideTooltipOnEsc = useCallback(function () {
     var _apiRef$current;
-    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.requestHide({
+    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.requestHide({
       isImmediate: true
     });
   }, [apiRef]);
@@ -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/dist/esm/TooltipContainer.js

@@ -18,15 +18,9 @@ var baseStyles = css({
 });
 var truncateStyles = css({
   maxWidth: '420px',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 var lightStyles = css({
   backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.8.7",
+  "version": "17.8.9",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,9 +43,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.25.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -57,13 +57,14 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^16.10.0",
+    "@atlaskit/button": "^16.12.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",