@atlaskit/tooltip 17.5.16 → 17.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tooltip
 
+## 17.6.0
+
+### Minor Changes
+
+- [`15f0ad7aaa3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/15f0ad7aaa3) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+## 17.5.17
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 17.5.16
 
 ### Patch Changes

package/Tooltip/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/Tooltip.js",
   "module:es2019": "../dist/es2019/Tooltip.js",
   "sideEffects": false,
-  "types": "../dist/types/Tooltip.d.ts"
+  "types": "../dist/types/Tooltip.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/Tooltip.d.ts"
+      ]
+    }
+  }
 }

package/TooltipContainer/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/TooltipContainer.js",
   "module:es2019": "../dist/es2019/TooltipContainer.js",
   "sideEffects": false,
-  "types": "../dist/types/TooltipContainer.d.ts"
+  "types": "../dist/types/TooltipContainer.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/TooltipContainer.d.ts"
+      ]
+    }
+  }
 }

package/TooltipPrimitive/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/TooltipPrimitive.js",
   "module:es2019": "../dist/es2019/TooltipPrimitive.js",
   "sideEffects": false,
-  "types": "../dist/types/TooltipPrimitive.d.ts"
+  "types": "../dist/types/TooltipPrimitive.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/TooltipPrimitive.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/Tooltip.js

@@ -17,7 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _bindEventListener = require("bind-event-listener");
 
@@ -58,7 +58,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.16"
+  packageVersion: "17.6.0"
 }; // Inverts motion direction
 
 var invertedDirection = {
@@ -407,11 +407,11 @@ function Tooltip(_ref) {
     '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, {
+  return (0, _react2.jsx)(_react.default.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
     role: "presentation"
-  }), children), shouldRenderTooltipContainer ? (0, _core.jsx)(_portal.default, {
+  }), children), shouldRenderTooltipContainer ? (0, _react2.jsx)(_portal.default, {
     zIndex: tooltipZIndex
-  }, (0, _core.jsx)(_popper.Popper, {
+  }, (0, _react2.jsx)(_popper.Popper, {
     placement: tooltipPosition,
     referenceElement: getReferenceElement(),
     strategy: strategy
@@ -424,9 +424,9 @@ function Tooltip(_ref) {
     // E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
     // This gives the effect the tooltip is appearing from the target
     var direction = position === 'mouse' ? undefined : invertedDirection[getDirectionFromPlacement(placement)];
-    return (0, _core.jsx)(_motion.ExitingPersistence, {
+    return (0, _react2.jsx)(_motion.ExitingPersistence, {
       appear: true
-    }, shouldRenderTooltipChildren && (0, _core.jsx)(_motion.FadeIn, {
+    }, shouldRenderTooltipChildren && (0, _react2.jsx)(_motion.FadeIn, {
       distance: "constant",
       entranceDirection: direction,
       exitDirection: direction,
@@ -435,7 +435,7 @@ function Tooltip(_ref) {
     }, function (_ref5) {
       var className = _ref5.className;
       return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        (0, _core.jsx)(Container, {
+        (0, _react2.jsx)(Container, {
           ref: ref,
           className: "Tooltip ".concat(className),
           style: style,

package/dist/cjs/TooltipContainer.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -20,7 +20,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
 
 /** @jsx jsx */
-var baseStyles = (0, _core.css)({
+var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   maxWidth: '240px',
   padding: '2px 6px',
@@ -32,17 +32,17 @@ var baseStyles = (0, _core.css)({
   overflowWrap: 'break-word',
   wordWrap: 'break-word'
 });
-var truncateStyles = (0, _core.css)({
+var truncateStyles = (0, _react2.css)({
   maxWidth: '420px',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var lightStyles = (0, _core.css)({
+var lightStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
   color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
 });
-var darkStyles = (0, _core.css)({
+var darkStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.DN0, ")"),
   color: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
 });
@@ -56,10 +56,10 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
       onMouseOut = _ref.onMouseOut,
       onMouseOver = _ref.onMouseOver,
       id = _ref.id;
-  return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
+  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;
     return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      (0, _core.jsx)(_TooltipPrimitive.default, {
+      (0, _react2.jsx)(_TooltipPrimitive.default, {
         ref: ref,
         style: style,
         className: className,

package/dist/cjs/TooltipPrimitive.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -20,7 +20,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
-var primitiveStyles = (0, _core.css)({
+var primitiveStyles = (0, _react2.css)({
   zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
   cursor: "default"
 });
@@ -36,11 +36,11 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
 
   var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, (0, _defineProperty2.default)({}, VAR_PRIMITIVE_ZINDEX, _constants.layers.tooltip()));
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     ref: ref,
     style: styleWithZIndex,
     "data-testid": testId ? "".concat(testId, "--wrapper") : undefined
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     role: "tooltip",
     className: className,
     onMouseOut: onMouseOut,

package/dist/cjs/version.json

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

package/dist/es2019/Tooltip.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.16"
+  packageVersion: "17.6.0"
 }; // Inverts motion direction
 
 const invertedDirection = {

package/dist/es2019/TooltipContainer.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';

package/dist/es2019/TooltipPrimitive.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { layers } from '@atlaskit/theme/constants';
 const VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
 const primitiveStyles = css({

package/dist/es2019/version.json

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

package/dist/esm/Tooltip.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -26,7 +26,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.16"
+  packageVersion: "17.6.0"
 }; // Inverts motion direction
 
 var invertedDirection = {

package/dist/esm/TooltipContainer.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';

package/dist/esm/TooltipPrimitive.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { layers } from '@atlaskit/theme/constants';
 var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
 var primitiveStyles = css({

package/dist/esm/version.json

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

package/dist/types/Tooltip.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { TooltipProps } from './types';
-declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): JSX.Element;
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

package/dist/types-ts4.0/Tooltip.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { TooltipProps } from './types';
+declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+export default Tooltip;

package/dist/types-ts4.0/TooltipContainer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TooltipPrimitiveProps } from './TooltipPrimitive';
+export interface TooltipContainerProps extends TooltipPrimitiveProps {
+}
+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-ts4.0/TooltipPrimitive.d.ts

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { CSSProperties, ReactNode } from 'react';
+import { PositionType } from './types';
+export interface TooltipPrimitiveProps {
+    truncate?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+    testId?: string;
+    placement: PositionType;
+    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" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
+export default TooltipPrimitive;

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Tooltip';
+export { default as TooltipPrimitive } from './TooltipPrimitive';
+export type { TooltipPrimitiveProps } from './TooltipPrimitive';
+export type { PositionType, TooltipProps } from './types';

package/dist/types-ts4.0/internal/props-for-extract-react-types.d.ts

@@ -0,0 +1,84 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+import { TooltipPrimitiveProps } from '../TooltipPrimitive';
+import { PositionType, PositionTypeBase } from '../types';
+declare type Props = {
+    /**
+     * 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.
+     */
+    content: ReactNode | (({ update }: {
+        update: () => void;
+    }) => ReactNode);
+    /**
+     * Extend `TooltipPrimitive` to create your own tooltip and pass it as component
+     */
+    component?: ComponentType<TooltipPrimitiveProps>;
+    /**
+     * Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.
+     */
+    delay?: number;
+    /**
+     * Hide the tooltip when the click event is triggered. This should be
+     * used when tooltip should be hidden if `onClick` react synthetic event
+     * is triggered, which happens after `onMouseDown` event
+     */
+    hideTooltipOnClick?: boolean;
+    /**
+     * Hide the tooltip when the mousedown event is triggered. This should be
+     * used when tooltip should be hidden if `onMouseDown` react synthetic event
+     * is triggered, which happens before `onClick` event
+     */
+    hideTooltipOnMouseDown?: boolean;
+    /**
+     * Where the tooltip should appear relative to the mouse pointer.
+     * Only used when the `position` prop is set to `"mouse"`.
+     * When interacting with the target element using the keyboard will use this position against the target element instead.
+     */
+    mousePosition?: PositionTypeBase;
+    /**
+     * Function to be called when the tooltip will be shown. It is called when the
+     * tooltip begins to animate in.
+     */
+    onShow?: () => void;
+    /**
+     * Function to be called when the tooltip will be hidden. It is called after the
+     * delay, when the tooltip begins to animate out.
+     */
+    onHide?: () => void;
+    /**
+     * Where the tooltip should appear relative to its target.
+     * If set to `"mouse"` the tooltip will display next to the mouse pointer instead.
+     * Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
+     */
+    position?: PositionType;
+    /**
+     * Replace the wrapping element. This accepts the name of a html tag which will
+     * be used to wrap the element.
+     * If you provide a component it needs to support a ref prop which is used by popper for positioning
+     * Note: actual type is not ElementType, it is either a JSX.IntrinsticElement (eg "div")
+     * or a component that supports React.AllHTMLAttributes<HTMLElement> has a ref prop (React.Ref<HTMLElement>).
+     * Using ElementType here for documentation because it is close and works with our prop extraction tool
+     */
+    tag?: ElementType;
+    /**
+     * Show only one line of text, and truncate when too long
+     */
+    truncate?: boolean;
+    /**
+     * Elements to be wrapped by the tooltip
+     */
+    children: 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,
+     * serving as a hook for automated tests */
+    testId?: string;
+    /** Analytics context metadata */
+    analyticsContext?: Record<string, any>;
+};
+export default function PropsHack(props: Props): null;
+export {};

package/dist/types-ts4.0/internal/shared-schedule.d.ts

@@ -0,0 +1,2 @@
+export declare function clearScheduled(): void;
+export declare function scheduleTimeout(fn: () => void, delay: number): void;

package/dist/types-ts4.0/internal/tooltip-manager.d.ts

@@ -0,0 +1,29 @@
+import { FakeMouseElement } from '../utilities';
+export declare type Source = {
+    type: 'mouse';
+    mouse: FakeMouseElement;
+} | {
+    type: 'keyboard';
+};
+export declare type Entry = {
+    source: Source;
+    show: (value: {
+        isImmediate: boolean;
+    }) => void;
+    hide: (value: {
+        isImmediate: boolean;
+    }) => void;
+    delay: number;
+    done: () => void;
+};
+export declare type API = {
+    isActive: () => boolean;
+    mousePosition: FakeMouseElement | null;
+    requestHide: (value: {
+        isImmediate: boolean;
+    }) => void;
+    finishHideAnimation: () => void;
+    keep: () => void;
+    abort: () => void;
+};
+export declare function show(entry: Entry): API;

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

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

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

@@ -0,0 +1,100 @@
+import { ComponentType, ReactNode } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+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.
+     */
+    content: ReactNode | (({ update }: {
+        update: () => void;
+    }) => ReactNode);
+    /**
+     * Extend `TooltipPrimitive` to create your own tooltip and pass it as component
+     */
+    component?: ComponentType<TooltipPrimitiveProps>;
+    /**
+     * Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.
+     */
+    delay?: number;
+    /**
+     * Hide the tooltip when the click event is triggered. This should be
+     * used when tooltip should be hidden if `onClick` react synthetic event
+     * is triggered, which happens after `onMouseDown` event
+     */
+    hideTooltipOnClick?: boolean;
+    /**
+     * Hide the tooltip when the mousedown event is triggered. This should be
+     * used when tooltip should be hidden if `onMouseDown` react synthetic event
+     * is triggered, which happens before `onClick` event
+     */
+    hideTooltipOnMouseDown?: boolean;
+    /**
+     * Where the tooltip should appear relative to the mouse pointer.
+     * Only used when the `position` prop is set to `"mouse"`.
+     * When interacting with the target element using the keyboard will use this position against the target element instead.
+     */
+    mousePosition?: PositionTypeBase;
+    /**
+     * Function to be called when the tooltip will be shown. It is called when the
+     * tooltip begins to animate in.
+     */
+    onShow?: (analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Function to be called when the tooltip will be hidden. It is called after the
+     * delay, when the tooltip begins to animate out.
+     */
+    onHide?: (analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Where the tooltip should appear relative to its target.
+     * If set to `"mouse"` the tooltip will display next to the mouse pointer instead.
+     * Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
+     */
+    position?: PositionType;
+    /**
+     * Replace the wrapping element. This accepts the name of a html tag which will
+     * be used to wrap the element.
+     * If you provide a component it needs to support a ref prop which is used by popper for positioning
+     */
+    tag?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & {
+        ref: React.Ref<HTMLElement>;
+    }>;
+    /**
+     * Show only one line of text, and truncate when too long
+     */
+    truncate?: boolean;
+    /**
+     * Elements to be wrapped by the tooltip.
+     * It can be either a:
+     * 1. `ReactNode`
+     * 2. Function which returns a `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,
+     * serving as a hook for automated tests */
+    testId?: string;
+    /** Analytics context metadata */
+    analyticsContext?: Record<string, any>;
+    /**
+     * Used to define the strategy of popper.
+     */
+    strategy?: 'absolute' | 'fixed' | undefined;
+}

package/dist/types-ts4.0/utilities.d.ts

@@ -0,0 +1,16 @@
+export interface FakeMouseElement {
+    getBoundingClientRect: () => {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+    };
+    clientWidth: number;
+    clientHeight: number;
+}
+export declare function getMousePosition(mouseCoordinates: {
+    top: number;
+    left: number;
+}): FakeMouseElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.5.16",
+  "version": "17.6.0",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
@@ -36,10 +43,10 @@
     "@atlaskit/motion": "^1.2.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
     "react-uid": "^2.2.0"
   },
@@ -50,20 +57,20 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@emotion/styled": "^10.0.7",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/react": "^8.0.1",
+    "@emotion/styled": "^11.0.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^12.1.5",
     "jest-in-case": "^1.0.2",
     "react-dom": "^16.8.0",
     "react-redux": "^5.1.2",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [

package/report.api.md

@@ -1,13 +1,14 @@
-## API Report File for "@atlaskit/tooltip"
+## API Report File for "@atlaskit/tooltip".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
 
-```ts
-/// <reference types="react" />
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
+```ts
 import { ComponentType } from 'react';
 import { CSSProperties } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { Placement } from '@atlaskit/popper';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -33,7 +34,7 @@ declare function Tooltip({
   hideTooltipOnMouseDown,
   analyticsContext,
   strategy,
-}: TooltipProps): JSX.Element;
+}: TooltipProps): jsx.JSX.Element;
 
 declare namespace Tooltip {
   var displayName: string;

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }

package/utilities/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/utilities.js",
   "module:es2019": "../dist/es2019/utilities.js",
   "sideEffects": false,
-  "types": "../dist/types/utilities.d.ts"
+  "types": "../dist/types/utilities.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/utilities.d.ts"
+      ]
+    }
+  }
 }