@atlaskit/tooltip 17.5.15 → 17.5.17

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tooltip
 
+## 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
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
 ## 17.5.15
 
 ### 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

@@ -58,7 +58,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.15"
+  packageVersion: "17.5.17"
 }; // Inverts motion direction
 
 var invertedDirection = {

package/dist/cjs/version.json

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

package/dist/es2019/Tooltip.js

@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.15"
+  packageVersion: "17.5.17"
 }; // Inverts motion direction
 
 const invertedDirection = {

package/dist/es2019/version.json

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

package/dist/esm/Tooltip.js

@@ -26,7 +26,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.5.15"
+  packageVersion: "17.5.17"
 }; // Inverts motion direction
 
 var invertedDirection = {

package/dist/esm/version.json

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/** @jsx jsx */
+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 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.15",
+  "version": "17.5.17",
   "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,7 +43,7 @@
     "@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",
@@ -51,19 +58,19 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.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.2.4",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [

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"
+      ]
+    }
+  }
 }