@atlaskit/tooltip 17.3.1 → 17.5.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/tooltip
 
+## 17.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.5.0
+
+### Minor Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Added the render props support to the Tooltip component. Linked the tooltip text to the trigger using aria-describedby for users with assistive technologies.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.4.0
+
+### Minor Changes
+
+- [`45e06ed2420`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45e06ed2420) - Instrumented Tooltip with the new theming package, `@atlaskit/tokens`.
+  Tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.3.1
 
 ### Patch Changes

package/dist/cjs/Tooltip.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -33,6 +35,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _tooltipManager = require("./internal/tooltip-manager");
 
+var _useUniqueId = _interopRequireDefault(require("./internal/use-unique-id"));
+
 var _TooltipContainer = _interopRequireDefault(require("./TooltipContainer"));
 
 var _utilities = require("./utilities");
@@ -50,7 +54,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.3.1"
+  packageVersion: "17.5.1"
 };
 
 function noop() {}
@@ -103,15 +107,20 @@ function Tooltip(_ref) {
   var targetRef = (0, _react.useRef)(null);
   var containerRef = (0, _react.useRef)(null);
   var setRef = (0, _react.useCallback)(function (node) {
-    if (!node || node.firstChild === null) {
+    if (!node) {
       return;
-    } // @ts-ignore - React Ref typing is too strict for this use case
-
+    }
 
-    containerRef.current = node; // @ts-ignore - React Ref typing is too strict for this use case
+    if (typeof children === 'function') {
+      // @ts-ignore - React Ref typing is too strict for this use case
+      targetRef.current = node;
+    } else {
+      // @ts-ignore - React Ref typing is too strict for this use case
+      containerRef.current = node; // @ts-ignore - React Ref typing is too strict for this use case
 
-    targetRef.current = node.firstChild;
-  }, []); // Putting a few things into refs so that we don't have to break memoization
+      targetRef.current = node.firstChild;
+    }
+  }, [children]); // Putting a few things into refs so that we don't have to break memoization
 
   var lastState = (0, _react.useRef)(state);
   var lastDelay = (0, _react.useRef)(delay);
@@ -265,7 +274,7 @@ function Tooltip(_ref) {
 
   var onMouseOver = (0, _react.useCallback)(function (event) {
     // Ignoring events from the container ref
-    if (event.target === containerRef.current) {
+    if (containerRef.current && event.target === containerRef.current) {
       return;
     } // Using prevent default as a signal that parent tooltips
 
@@ -294,7 +303,7 @@ function Tooltip(_ref) {
 
   var onMouseOut = (0, _react.useCallback)(function (event) {
     // Ignoring events from the container ref
-    if (event.target === containerRef.current) {
+    if (containerRef.current && event.target === containerRef.current) {
       return;
     } // Using prevent default as a signal that parent tooltips
 
@@ -353,7 +362,8 @@ function Tooltip(_ref) {
     return targetRef.current || undefined;
   };
 
-  return (0, _core.jsx)(_react.default.Fragment, null, (0, _core.jsx)(CastTargetContainer, {
+  var tooltipId = (0, _useUniqueId.default)('tooltip', shouldRenderTooltipContainer);
+  var tooltipTriggerProps = {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onClick: onClick,
@@ -361,9 +371,12 @@ function Tooltip(_ref) {
     onFocus: onFocus,
     onBlur: onBlur,
     ref: setRef,
-    "data-testid": testId ? "".concat(testId, "--container") : undefined,
+    'aria-describedby': tooltipId,
+    'data-testid': testId ? "".concat(testId, "--container") : undefined
+  };
+  return (0, _core.jsx)(_react.default.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : (0, _core.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
     role: "presentation"
-  }, children), shouldRenderTooltipContainer ? (0, _core.jsx)(_portal.default, {
+  }), children), shouldRenderTooltipContainer ? (0, _core.jsx)(_portal.default, {
     zIndex: tooltipZIndex
   }, (0, _core.jsx)(_popper.Popper, {
     placement: tooltipPosition,
@@ -389,7 +402,8 @@ function Tooltip(_ref) {
           placement: tooltipPosition,
           testId: testId,
           onMouseOut: onMouseOut,
-          onMouseOver: onMouseOverTooltip
+          onMouseOver: onMouseOverTooltip,
+          id: tooltipId
         }, typeof content === 'function' ? content({
           update: update
         }) : content)

package/dist/cjs/TooltipContainer.js

@@ -19,6 +19,8 @@ var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -33,7 +35,8 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
       placement = _ref.placement,
       testId = _ref.testId,
       onMouseOut = _ref.onMouseOut,
-      onMouseOver = _ref.onMouseOver;
+      onMouseOver = _ref.onMouseOver,
+      id = _ref.id;
   return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;
     return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
@@ -43,9 +46,10 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
         className: className,
         placement: placement,
         testId: testId,
+        id: id,
         onMouseOut: onMouseOut,
         onMouseOver: onMouseOver,
-        css: [baseCss, truncate ? truncateCss : null, (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n                background-color: ", ";\n                color: ", ";\n              "])), mode === 'light' ? _colors.N800 : _colors.DN0, mode === 'light' ? _colors.N0 : _colors.DN600)]
+        css: [baseCss, truncate ? truncateCss : null, (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n                background-color: ", ";\n                color: ", ";\n              "])), mode === 'light' ? (0, _tokens.token)('color.background.boldNeutral.resting', _colors.N800) : (0, _tokens.token)('color.background.boldNeutral.resting', _colors.DN0), mode === 'light' ? (0, _tokens.token)('color.text.onBold', _colors.N0) : (0, _tokens.token)('color.text.onBold', _colors.DN600))]
       }, children)
     );
   });

package/dist/cjs/TooltipPrimitive.js

@@ -25,7 +25,8 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
       placement = _ref.placement,
       testId = _ref.testId,
       onMouseOut = _ref.onMouseOut,
-      onMouseOver = _ref.onMouseOver;
+      onMouseOver = _ref.onMouseOver,
+      id = _ref.id;
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     (0, _core.jsx)("div", {
       role: "tooltip",
@@ -36,7 +37,8 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
       onMouseOver: onMouseOver,
       css: primitiveCss,
       "data-placement": placement,
-      "data-testid": testId
+      "data-testid": testId,
+      id: id
     }, children)
   );
 });

package/dist/cjs/internal/use-unique-id.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useUniqueId;
+
+var _reactUid = require("react-uid");
+
+function useUniqueId(prefix, shouldRenderId) {
+  var seed = (0, _reactUid.useUIDSeed)();
+  return shouldRenderId ? "".concat(seed(prefix)) : undefined;
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.3.1",
+	"version": "17.5.1",
 	"sideEffects": false
 }

package/dist/es2019/Tooltip.js

@@ -1,3 +1,5 @@
+import _extends from "@babel/runtime/helpers/extends";
+
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/core';
@@ -9,13 +11,14 @@ import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import { show } from './internal/tooltip-manager';
+import useUniqueId from './internal/use-unique-id';
 import TooltipContainer from './TooltipContainer';
 import { getMousePosition } from './utilities';
 const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.3.1"
+  packageVersion: "17.5.1"
 };
 
 function noop() {}
@@ -55,15 +58,20 @@ function Tooltip({
   const targetRef = useRef(null);
   const containerRef = useRef(null);
   const setRef = useCallback(node => {
-    if (!node || node.firstChild === null) {
+    if (!node) {
       return;
-    } // @ts-ignore - React Ref typing is too strict for this use case
-
+    }
 
-    containerRef.current = node; // @ts-ignore - React Ref typing is too strict for this use case
+    if (typeof children === 'function') {
+      // @ts-ignore - React Ref typing is too strict for this use case
+      targetRef.current = node;
+    } else {
+      // @ts-ignore - React Ref typing is too strict for this use case
+      containerRef.current = node; // @ts-ignore - React Ref typing is too strict for this use case
 
-    targetRef.current = node.firstChild;
-  }, []); // Putting a few things into refs so that we don't have to break memoization
+      targetRef.current = node.firstChild;
+    }
+  }, [children]); // Putting a few things into refs so that we don't have to break memoization
 
   const lastState = useRef(state);
   const lastDelay = useRef(delay);
@@ -218,7 +226,7 @@ function Tooltip({
 
   const onMouseOver = useCallback(event => {
     // Ignoring events from the container ref
-    if (event.target === containerRef.current) {
+    if (containerRef.current && event.target === containerRef.current) {
       return;
     } // Using prevent default as a signal that parent tooltips
 
@@ -247,7 +255,7 @@ function Tooltip({
 
   const onMouseOut = useCallback(event => {
     // Ignoring events from the container ref
-    if (event.target === containerRef.current) {
+    if (containerRef.current && event.target === containerRef.current) {
       return;
     } // Using prevent default as a signal that parent tooltips
 
@@ -306,17 +314,21 @@ function Tooltip({
     return targetRef.current || undefined;
   };
 
-  return jsx(React.Fragment, null, jsx(CastTargetContainer, {
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onClick: onClick,
-    onMouseDown: onMouseDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
+  const tooltipId = useUniqueId('tooltip', shouldRenderTooltipContainer);
+  const tooltipTriggerProps = {
+    onMouseOver,
+    onMouseOut,
+    onClick,
+    onMouseDown,
+    onFocus,
+    onBlur,
     ref: setRef,
-    "data-testid": testId ? `${testId}--container` : undefined,
+    'aria-describedby': tooltipId,
+    'data-testid': testId ? `${testId}--container` : undefined
+  };
+  return jsx(React.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     role: "presentation"
-  }, children), shouldRenderTooltipContainer ? jsx(Portal, {
+  }), children), shouldRenderTooltipContainer ? jsx(Portal, {
     zIndex: tooltipZIndex
   }, jsx(Popper, {
     placement: tooltipPosition,
@@ -342,7 +354,8 @@ function Tooltip({
     placement: tooltipPosition,
     testId: testId,
     onMouseOut: onMouseOut,
-    onMouseOver: onMouseOverTooltip
+    onMouseOver: onMouseOverTooltip,
+    id: tooltipId
   }, typeof content === 'function' ? content({
     update
   }) : content))))) : null);

package/dist/es2019/TooltipContainer.js

@@ -4,6 +4,7 @@ import { css, jsx } from '@emotion/core';
 import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import TooltipPrimitive from './TooltipPrimitive';
 const baseCss = css`
   border-radius: ${borderRadius()}px;
@@ -31,7 +32,8 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
   placement,
   testId,
   onMouseOut,
-  onMouseOver
+  onMouseOver,
+  id
 }, ref) {
   return jsx(GlobalTheme.Consumer, null, ({
     mode
@@ -42,11 +44,12 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
     className: className,
     placement: placement,
     testId: testId,
+    id: id,
     onMouseOut: onMouseOut,
     onMouseOver: onMouseOver,
     css: [baseCss, truncate ? truncateCss : null, css`
-                background-color: ${mode === 'light' ? N800 : DN0};
-                color: ${mode === 'light' ? N0 : DN600};
+                background-color: ${mode === 'light' ? token('color.background.boldNeutral.resting', N800) : token('color.background.boldNeutral.resting', DN0)};
+                color: ${mode === 'light' ? token('color.text.onBold', N0) : token('color.text.onBold', DN600)};
               `]
   }, children));
 });

package/dist/es2019/TooltipPrimitive.js

@@ -13,7 +13,8 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
   placement,
   testId,
   onMouseOut,
-  onMouseOver
+  onMouseOver,
+  id
 }, ref) {
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     jsx("div", {
@@ -25,7 +26,8 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
       onMouseOver: onMouseOver,
       css: primitiveCss,
       "data-placement": placement,
-      "data-testid": testId
+      "data-testid": testId,
+      id: id
     }, children)
   );
 });

package/dist/es2019/internal/use-unique-id.js

@@ -0,0 +1,5 @@
+import { useUIDSeed } from 'react-uid';
+export default function useUniqueId(prefix, shouldRenderId) {
+  const seed = useUIDSeed();
+  return shouldRenderId ? `${seed(prefix)}` : undefined;
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.3.1",
+	"version": "17.5.1",
 	"sideEffects": false
 }

package/dist/esm/Tooltip.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
@@ -16,13 +17,14 @@ import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import { show } from './internal/tooltip-manager';
+import useUniqueId from './internal/use-unique-id';
 import TooltipContainer from './TooltipContainer';
 import { getMousePosition } from './utilities';
 var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.3.1"
+  packageVersion: "17.5.1"
 };
 
 function noop() {}
@@ -75,15 +77,20 @@ function Tooltip(_ref) {
   var targetRef = useRef(null);
   var containerRef = useRef(null);
   var setRef = useCallback(function (node) {
-    if (!node || node.firstChild === null) {
+    if (!node) {
       return;
-    } // @ts-ignore - React Ref typing is too strict for this use case
-
+    }
 
-    containerRef.current = node; // @ts-ignore - React Ref typing is too strict for this use case
+    if (typeof children === 'function') {
+      // @ts-ignore - React Ref typing is too strict for this use case
+      targetRef.current = node;
+    } else {
+      // @ts-ignore - React Ref typing is too strict for this use case
+      containerRef.current = node; // @ts-ignore - React Ref typing is too strict for this use case
 
-    targetRef.current = node.firstChild;
-  }, []); // Putting a few things into refs so that we don't have to break memoization
+      targetRef.current = node.firstChild;
+    }
+  }, [children]); // Putting a few things into refs so that we don't have to break memoization
 
   var lastState = useRef(state);
   var lastDelay = useRef(delay);
@@ -237,7 +244,7 @@ function Tooltip(_ref) {
 
   var onMouseOver = useCallback(function (event) {
     // Ignoring events from the container ref
-    if (event.target === containerRef.current) {
+    if (containerRef.current && event.target === containerRef.current) {
       return;
     } // Using prevent default as a signal that parent tooltips
 
@@ -266,7 +273,7 @@ function Tooltip(_ref) {
 
   var onMouseOut = useCallback(function (event) {
     // Ignoring events from the container ref
-    if (event.target === containerRef.current) {
+    if (containerRef.current && event.target === containerRef.current) {
       return;
     } // Using prevent default as a signal that parent tooltips
 
@@ -325,7 +332,8 @@ function Tooltip(_ref) {
     return targetRef.current || undefined;
   };
 
-  return jsx(React.Fragment, null, jsx(CastTargetContainer, {
+  var tooltipId = useUniqueId('tooltip', shouldRenderTooltipContainer);
+  var tooltipTriggerProps = {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onClick: onClick,
@@ -333,9 +341,12 @@ function Tooltip(_ref) {
     onFocus: onFocus,
     onBlur: onBlur,
     ref: setRef,
-    "data-testid": testId ? "".concat(testId, "--container") : undefined,
+    'aria-describedby': tooltipId,
+    'data-testid': testId ? "".concat(testId, "--container") : undefined
+  };
+  return jsx(React.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     role: "presentation"
-  }, children), shouldRenderTooltipContainer ? jsx(Portal, {
+  }), children), shouldRenderTooltipContainer ? jsx(Portal, {
     zIndex: tooltipZIndex
   }, jsx(Popper, {
     placement: tooltipPosition,
@@ -361,7 +372,8 @@ function Tooltip(_ref) {
           placement: tooltipPosition,
           testId: testId,
           onMouseOut: onMouseOut,
-          onMouseOver: onMouseOverTooltip
+          onMouseOver: onMouseOverTooltip,
+          id: tooltipId
         }, typeof content === 'function' ? content({
           update: update
         }) : content)

package/dist/esm/TooltipContainer.js

@@ -8,6 +8,7 @@ import { css, jsx } from '@emotion/core';
 import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import TooltipPrimitive from './TooltipPrimitive';
 var baseCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  box-sizing: border-box;\n  font-size: 12px;\n  left: 0;\n  line-height: 1.3;\n  max-width: 240px;\n  padding: 2px 6px;\n  top: 0;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n"])), borderRadius());
 var truncateCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  max-width: 420px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
@@ -19,7 +20,8 @@ var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, r
       placement = _ref.placement,
       testId = _ref.testId,
       onMouseOut = _ref.onMouseOut,
-      onMouseOver = _ref.onMouseOver;
+      onMouseOver = _ref.onMouseOver,
+      id = _ref.id;
   return jsx(GlobalTheme.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;
     return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
@@ -29,9 +31,10 @@ var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, r
         className: className,
         placement: placement,
         testId: testId,
+        id: id,
         onMouseOut: onMouseOut,
         onMouseOver: onMouseOver,
-        css: [baseCss, truncate ? truncateCss : null, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                background-color: ", ";\n                color: ", ";\n              "])), mode === 'light' ? N800 : DN0, mode === 'light' ? N0 : DN600)]
+        css: [baseCss, truncate ? truncateCss : null, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                background-color: ", ";\n                color: ", ";\n              "])), mode === 'light' ? token('color.background.boldNeutral.resting', N800) : token('color.background.boldNeutral.resting', DN0), mode === 'light' ? token('color.text.onBold', N0) : token('color.text.onBold', DN600))]
       }, children)
     );
   });

package/dist/esm/TooltipPrimitive.js

@@ -14,7 +14,8 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
       placement = _ref.placement,
       testId = _ref.testId,
       onMouseOut = _ref.onMouseOut,
-      onMouseOver = _ref.onMouseOver;
+      onMouseOver = _ref.onMouseOver,
+      id = _ref.id;
   return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     jsx("div", {
       role: "tooltip",
@@ -25,7 +26,8 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
       onMouseOver: onMouseOver,
       css: primitiveCss,
       "data-placement": placement,
-      "data-testid": testId
+      "data-testid": testId,
+      id: id
     }, children)
   );
 });

package/dist/esm/internal/use-unique-id.js

@@ -0,0 +1,5 @@
+import { useUIDSeed } from 'react-uid';
+export default function useUniqueId(prefix, shouldRenderId) {
+  var seed = useUIDSeed();
+  return shouldRenderId ? "".concat(seed(prefix)) : undefined;
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.3.1",
+	"version": "17.5.1",
 	"sideEffects": false
 }

package/dist/types/TooltipContainer.d.ts

@@ -2,5 +2,5 @@
 import { TooltipPrimitiveProps } from './TooltipPrimitive';
 export interface TooltipContainerProps extends TooltipPrimitiveProps {
 }
-declare const TooltipContainer: import("react").ForwardRefExoticComponent<Pick<TooltipContainerProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TooltipContainer: import("react").ForwardRefExoticComponent<Pick<TooltipContainerProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
 export default TooltipContainer;

package/dist/types/TooltipPrimitive.d.ts

@@ -11,6 +11,7 @@ export interface TooltipPrimitiveProps {
     ref: React.Ref<any>;
     onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
     onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
+    id?: string;
 }
-declare const TooltipPrimitive: import("react").ForwardRefExoticComponent<Pick<TooltipPrimitiveProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TooltipPrimitive: import("react").ForwardRefExoticComponent<Pick<TooltipPrimitiveProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
 export default TooltipPrimitive;

package/dist/types/internal/use-unique-id.d.ts

@@ -0,0 +1 @@
+export default function useUniqueId(prefix: string, shouldRenderId: boolean): string | undefined;

package/dist/types/types.d.ts

@@ -4,12 +4,21 @@ import { Placement } from '@atlaskit/popper';
 import { TooltipPrimitiveProps } from './TooltipPrimitive';
 export declare type PositionTypeBase = Placement;
 export declare type PositionType = PositionTypeBase | 'mouse';
+export interface TriggerProps {
+    onMouseOver: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseOut: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onFocus: (event: React.FocusEvent<HTMLElement>) => void;
+    onBlur: (event: React.FocusEvent<HTMLElement>) => void;
+    ref: (node: HTMLElement | null) => void;
+}
 export interface TooltipProps {
     /**
      * The content of the tooltip. It can be either a:
      * 1. `ReactNode`
      * 2. Function which returns a `ReactNode`
-     
+  
      * The benefit of the second approach is that it allows you to consume the `update` render prop.
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
@@ -71,9 +80,12 @@ export interface TooltipProps {
      */
     truncate?: boolean;
     /**
-     * Elements to be wrapped by the tooltip
+     * Elements to be wrapped by the tooltip.
+     * It can be either a:
+     * 1. `ReactNode`
+     * 2. Function which returns a `ReactNode`
      */
-    children: ReactNode;
+    children: ReactNode | ((props: TriggerProps) => ReactNode);
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.3.1",
+  "version": "17.5.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/"
@@ -25,14 +25,16 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/ds-lib": "^1.2.0",
+    "@atlaskit/ds-lib": "^1.3.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.1.0",
-    "@atlaskit/theme": "^11.3.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
-    "bind-event-listener": "^1.0.2"
+    "bind-event-listener": "^1.0.2",
+    "react-uid": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -40,9 +42,10 @@
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -67,18 +70,10 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
     }
   },
   "homepage": "https://atlassian.design/components/tooltip/",