@atlaskit/tooltip - npm Package Compare versions

Comparing version 15.1.3 to 15.2.0

CHANGELOG.md

 # @atlaskit/tooltip
 
+## 15.2.0
+
+### Minor Changes
+
+- [minor][24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+
+  Tooltip will now be shown when the target element receives focus and hidden when the target element loses focus.
+
+### Patch Changes
+
+- [patch][24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+
+  Updates react-popper dependency to a safe version.- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+
+- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+  - @atlaskit/analytics-next@6.3.3
+  - @atlaskit/popper@3.1.8
+
 ## 15.1.3
@@ -4,0 +23,0 @@

dist/cjs/components/Animation.d.ts

 import React from 'react';
-import { PositionTypeBase } from '../types';
-declare type GetAnimationStyles = (position: PositionTypeBase) => Object;
+declare type GetAnimationStyles = () => Object;
 interface AnimationProps {
@@ -5,0 +4,0 @@ children: (getAnimationFn: GetAnimationStyles) => React.ReactNode;

dist/cjs/components/Animation.js

@@ -9,15 +9,2 @@ "use strict";
 var easing = 'cubic-bezier(0.23, 1, 0.32, 1)'; // easeOutQuint
-var distance = 8;
-var horizontalOffset = {
-    left: distance,
-    right: -distance,
-    top: 0,
-    bottom: 0,
-};
-var verticalOffset = {
-    bottom: -distance,
-    top: distance,
-    left: 0,
-    right: 0,
-};
 var defaultStyle = function (timeout) { return ({
@@ -27,7 +14,5 @@ transition: "transform " + timeout.enter + "ms " + easing + ", opacity " + timeout.enter + "ms linear",
 }); };
-var transitionStyle = function (timeout, state, position) {
+var transitionStyle = function (state) {
     var transitions = {
-        entering: {
-            transform: "translate3d(" + horizontalOffset[position] + "px, " + verticalOffset[position] + "px, 0)",
-        },
+        entering: {},
         entered: {
@@ -38,5 +23,2 @@ opacity: 1,
             opacity: 0,
-            transition: timeout.exit + "ms linear",
-            transform: "translate3d(" + horizontalOffset[position] /
-                2 + "px, " + verticalOffset[position] / 2 + "px, 0)",
         },
@@ -46,8 +28,8 @@ };
 };
-var getStyle = function (timeout, state) { return function (position) { return (tslib_1.__assign(tslib_1.__assign({}, defaultStyle(timeout)), transitionStyle(timeout, state, position))); }; };
+var getStyle = function (timeout, state) { return function () { return (tslib_1.__assign(tslib_1.__assign({}, defaultStyle(timeout)), transitionStyle(state))); }; };
 var Animation = function (_a) {
     var children = _a.children, immediatelyHide = _a.immediatelyHide, immediatelyShow = _a.immediatelyShow, onExited = _a.onExited, inProp = _a.in;
     var timeout = {
-        enter: immediatelyShow ? 1 : ENTER_DURATION,
-        exit: immediatelyHide ? 1 : EXIT_DURATION,
+        enter: immediatelyShow ? 0 : ENTER_DURATION,
+        exit: immediatelyHide ? 0 : EXIT_DURATION,
     };
@@ -54,0 +36,0 @@ return (react_1.default.createElement(react_transition_group_1.Transition, { timeout: timeout, in: inProp, onExited: onExited, unmountOnExit: true, appear: true }, function (state) { return children(getStyle(timeout, state)); }));

dist/cjs/components/Tooltip.d.ts

 import React from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { PositionType, PositionTypeBase, FakeMouseElement } from '../types';
-import { StyledComponentClass } from 'styled-components';
-export interface TooltipProps extends WithAnalyticsEventsProps {
-    /** The content of the tooltip */
-    content: React.ReactNode;
-    /** Extend `TooltipPrimitive` to create your own tooltip and pass it as component */
-    component?: StyledComponentClass<{
-        truncate?: boolean;
-        style?: any;
-        className?: any;
-    }, any>;
-    /** 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. Only used when the
-      `position` prop is set to 'mouse'
-    */
-    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',
-      tooltip will display next to the mouse instead.
-    */
-    position?: PositionType;
-    /**
-      Replace the wrapping element. This accepts the name of a html tag which will
-      be used to wrap the element.
-    */
-    tag?: React.ElementType;
-    /** Show only one line of text, and truncate when too long */
-    truncate?: boolean;
-    /** Elements to be wrapped by the tooltip */
-    children: React.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;
-}
-interface State {
-    immediatelyHide: boolean;
-    immediatelyShow: boolean;
-    isVisible: boolean;
-    renderTooltip: boolean;
-}
-declare class Tooltip extends React.Component<TooltipProps, State> {
+import { TooltipProps, TooltipState, FakeMouseElement } from './types';
+declare class Tooltip extends React.Component<TooltipProps, TooltipState> {
     static defaultProps: Pick<TooltipProps, 'component' | 'delay' | 'mousePosition' | 'position' | 'tag'>;
-    wrapperRef?: HTMLElement;
-    targetRef?: HTMLElement;
+    wrapperRef: HTMLElement | null;
+    targetRef: HTMLElement | null;
     fakeMouseElement?: FakeMouseElement;
     cancelPendingSetState: () => void;
+    userInteraction: 'mouse' | 'keyboard';
     state: {
@@ -82,3 +17,3 @@ immediatelyHide: boolean;
     componentWillUnmount(): void;
-    componentDidUpdate(_prevProps: TooltipProps, prevState: State): void;
+    componentDidUpdate(_prevProps: TooltipProps, prevState: TooltipState): void;
     removeScrollListener(): void;
@@ -89,4 +24,7 @@ handleWindowScroll: () => void;
     handleMouseOver: (e: React.MouseEvent<Element, MouseEvent>) => void;
-    handleMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    handleFocus: () => void;
+    handleShowTooltip: () => void;
+    handleHideTooltip: (e: React.MouseEvent<Element, MouseEvent> | FocusEvent) => void;
     handleMouseMove: (event: MouseEvent) => void;
+    shouldPositionTooltipNearMouse(): boolean;
     render(): JSX.Element;
@@ -96,3 +34,3 @@ }
 export declare type TooltipType = Tooltip;
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TooltipProps, "children" | "truncate" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId">, "children" | "truncate" | "content" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "onShow" | "onHide" | "testId"> & Partial<Pick<Pick<TooltipProps, "children" | "truncate" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId">, "component" | "delay" | "mousePosition" | "position" | "tag">> & Partial<Pick<Pick<TooltipProps, "component" | "delay" | "mousePosition" | "position" | "tag">, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next/dist/cjs/withAnalyticsContext").WithContextProps, "children" | "key" | "truncate" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId" | "analyticsContext"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TooltipProps, "truncate" | "children" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId">, "truncate" | "children" | "content" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "onShow" | "onHide" | "testId"> & Partial<Pick<Pick<TooltipProps, "truncate" | "children" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId">, "component" | "delay" | "mousePosition" | "position" | "tag">> & Partial<Pick<Pick<TooltipProps, "component" | "delay" | "mousePosition" | "position" | "tag">, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next/dist/cjs/withAnalyticsContext").WithContextProps, "truncate" | "key" | "children" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId" | "analyticsContext"> & React.RefAttributes<any>>;
 export default _default;

dist/cjs/components/Tooltip.js

@@ -52,4 +52,6 @@ "use strict";
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.wrapperRef = null;
+        _this.targetRef = null;
         _this.cancelPendingSetState = function () { };
-        // set in mouseover/mouseout handlers
+        _this.userInteraction = 'mouse';
         _this.state = {
@@ -80,7 +82,9 @@ immediatelyHide: false,
         _this.handleMouseOver = function (e) {
-            if (e.target === _this.wrapperRef)
+            if (e.target === _this.wrapperRef) {
                 return;
+            }
+            _this.userInteraction = 'mouse';
             // In the case where a tooltip is newly rendered but immediately becomes hovered,
             // we need to set the coordinates in the mouseOver event.
-            if (!_this.fakeMouseElement)
+            if (!_this.fakeMouseElement) {
                 _this.fakeMouseElement = getMousePosition({
@@ -90,2 +94,18 @@ left: e.clientX,
                 });
+            }
+            _this.handleShowTooltip();
+        };
+        _this.handleFocus = function () {
+            _this.userInteraction = 'keyboard';
+            // We need to fake the mouse dimensions even on focus because the code path currently assumes
+            // fake mouse element needs to exist before showing the tooltip.
+            if (!_this.fakeMouseElement) {
+                _this.fakeMouseElement = getMousePosition({
+                    left: 0,
+                    top: 0,
+                });
+            }
+            _this.handleShowTooltip();
+        };
+        _this.handleShowTooltip = function () {
             _this.cancelPendingSetState();
@@ -102,5 +122,6 @@ if (Boolean(_this.props.content) && !_this.state.isVisible) {
         };
-        _this.handleMouseLeave = function (e) {
-            if (e.target === _this.wrapperRef)
+        _this.handleHideTooltip = function (e) {
+            if (e.target === _this.wrapperRef) {
                 return;
+            }
             _this.cancelPendingSetState();
@@ -147,27 +168,33 @@ if (_this.state.isVisible) {
     };
+    Tooltip.prototype.shouldPositionTooltipNearMouse = function () {
+        var position = this.props.position;
+        return position === 'mouse' && this.userInteraction === 'mouse';
+    };
     Tooltip.prototype.render = function () {
         var _this = this;
-        var _a = this.props, children = _a.children, content = _a.content, position = _a.position, mousePosition = _a.mousePosition, truncate = _a.truncate, TooltipContainer = _a.component, TargetContainer = _a.tag, testId = _a.testId;
+        var _a = this.props, children = _a.children, position = _a.position, mousePosition = _a.mousePosition, content = _a.content, truncate = _a.truncate, TooltipContainer = _a.component, TargetContainer = _a.tag, testId = _a.testId;
         var _b = this.state, isVisible = _b.isVisible, renderTooltip = _b.renderTooltip, immediatelyShow = _b.immediatelyShow, immediatelyHide = _b.immediatelyHide;
+        var tooltipPosition = position === 'mouse' ? mousePosition : position;
         return (
         /* eslint-disable jsx-a11y/mouse-events-have-key-events */
         react_1.default.createElement(react_1.default.Fragment, null,
-            TargetContainer && (react_1.default.createElement(TargetContainer, { onClick: this.handleMouseClick, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, ref: function (wrapperRef) {
+            TargetContainer && (react_1.default.createElement(TargetContainer, { onClick: this.handleMouseClick, onMouseOver: this.handleMouseOver, onMouseOut: this.handleHideTooltip, onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, onFocus: this.handleFocus, onBlur: this.handleHideTooltip, ref: function (wrapperRef) {
                     _this.wrapperRef = wrapperRef;
                 } },
-                react_1.default.createElement(react_node_resolver_1.default, { innerRef: function (targetRef) {
-                        _this.targetRef = targetRef;
+                react_1.default.createElement(react_node_resolver_1.default, { innerRef: function (ref) {
+                        _this.targetRef = ref;
                     } }, react_1.default.Children.only(children)))),
             renderTooltip && this.targetRef && this.fakeMouseElement ? (react_1.default.createElement(portal_1.default, { zIndex: constants_1.layers.tooltip() },
-                react_1.default.createElement(popper_1.Popper
-                // @ts-ignore
-                , { 
-                    // @ts-ignore
-                    referenceElement: 
+                react_1.default.createElement(popper_1.Popper, { placement: tooltipPosition, referenceElement: 
                     // https://github.com/FezVrasta/react-popper#usage-without-a-reference-htmlelement
                     // We are using a popper technique to pass in a faked element when we use mouse.
-                    // This is fine.
-                    position === 'mouse' ? this.fakeMouseElement : this.targetRef, placement: position === 'mouse' ? mousePosition : position }, function (_a) {
-                    var ref = _a.ref, style = _a.style, placement = _a.placement;
-                    return TooltipContainer && (react_1.default.createElement(Animation_1.default, { immediatelyShow: immediatelyShow, immediatelyHide: immediatelyHide, onExited: function () { return _this.setState({ renderTooltip: false }); }, in: isVisible }, function (getAnimationStyles) { return (react_1.default.createElement(TooltipContainer, { innerRef: ref, className: "Tooltip", style: tslib_1.__assign(tslib_1.__assign({}, getAnimationStyles(placement)), style), truncate: truncate || false, "data-testid": testId }, content)); }));
+                    (this.shouldPositionTooltipNearMouse()
+                        ? this.fakeMouseElement
+                        : this.targetRef) }, function (_a) {
+                    var ref = _a.ref, style = _a.style;
+                    return TooltipContainer && (react_1.default.createElement(Animation_1.default, { immediatelyShow: immediatelyShow, immediatelyHide: immediatelyHide, onExited: function () { return _this.setState({ renderTooltip: false }); }, in: isVisible }, function (getAnimationStyles) { return (react_1.default.createElement(TooltipContainer
+                    // innerRef can't be null so shortcircuit to undefined if it is.
+                    , { 
+                        // innerRef can't be null so shortcircuit to undefined if it is.
+                        innerRef: ref || undefined, className: "Tooltip", style: tslib_1.__assign(tslib_1.__assign({}, getAnimationStyles()), style), truncate: truncate || false, "data-placement": tooltipPosition, "data-testid": testId }, content)); }));
                 }))) : null)
@@ -174,0 +201,0 @@ /* eslint-enable */

dist/cjs/index.d.ts

@@ -1,3 +0,4 @@
-export { default, TooltipProps } from './components/Tooltip';
+export { default } from './components/Tooltip';
 export { TooltipPrimitive } from './styled';
 export { PositionType } from './types';
+export { TooltipProps } from './components/types';

dist/cjs/styled.d.ts

@@ -6,10 +6,10 @@ /// <reference types="react" />
 export declare const TooltipPrimitive: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & TooltipProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & TooltipProps>;
-export declare const Tooltip: import("styled-components").StyledComponentClass<(TooltipProps & import("@atlaskit/theme/dist/cjs/types").AtlaskitThemeProps) | (TooltipProps & import("@atlaskit/theme/dist/cjs/types").CustomThemeProps) | (TooltipProps & import("@atlaskit/theme/dist/cjs/types").NoThemeProps), any, (Pick<TooltipProps, "truncate"> & {
+export declare const Tooltip: import("styled-components").StyledComponentClass<(TooltipProps & import("@atlaskit/theme").AtlaskitThemeProps) | (TooltipProps & import("@atlaskit/theme").CustomThemeProps) | (TooltipProps & import("@atlaskit/theme").NoThemeProps), any, (Pick<TooltipProps, "truncate"> & {
     theme?: any;
-} & import("@atlaskit/theme/dist/cjs/types").AtlaskitThemeProps) | (Pick<TooltipProps, "truncate"> & {
+} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<TooltipProps, "truncate"> & {
     theme?: any;
-} & import("@atlaskit/theme/dist/cjs/types").CustomThemeProps) | (Pick<TooltipProps, "truncate"> & {
+} & import("@atlaskit/theme").CustomThemeProps) | (Pick<TooltipProps, "truncate"> & {
     theme?: any;
-} & import("@atlaskit/theme/dist/cjs/types").NoThemeProps)>;
+} & import("@atlaskit/theme").NoThemeProps)>;
 export declare const Target: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export {};

dist/cjs/version.json

 {
 	"name": "@atlaskit/tooltip",
-	"version": "15.1.3",
+	"version": "15.2.0",
 	"sideEffects": false
 }

dist/esm/components/Animation.d.ts

 import React from 'react';
-import { PositionTypeBase } from '../types';
-declare type GetAnimationStyles = (position: PositionTypeBase) => Object;
+declare type GetAnimationStyles = () => Object;
 interface AnimationProps {
@@ -5,0 +4,0 @@ children: (getAnimationFn: GetAnimationStyles) => React.ReactNode;

dist/esm/components/Animation.js

@@ -7,15 +7,2 @@ import { __assign } from "tslib";
 var easing = 'cubic-bezier(0.23, 1, 0.32, 1)'; // easeOutQuint
-var distance = 8;
-var horizontalOffset = {
-    left: distance,
-    right: -distance,
-    top: 0,
-    bottom: 0,
-};
-var verticalOffset = {
-    bottom: -distance,
-    top: distance,
-    left: 0,
-    right: 0,
-};
 var defaultStyle = function (timeout) { return ({
@@ -25,7 +12,5 @@ transition: "transform " + timeout.enter + "ms " + easing + ", opacity " + timeout.enter + "ms linear",
 }); };
-var transitionStyle = function (timeout, state, position) {
+var transitionStyle = function (state) {
     var transitions = {
-        entering: {
-            transform: "translate3d(" + horizontalOffset[position] + "px, " + verticalOffset[position] + "px, 0)",
-        },
+        entering: {},
         entered: {
@@ -36,5 +21,2 @@ opacity: 1,
             opacity: 0,
-            transition: timeout.exit + "ms linear",
-            transform: "translate3d(" + horizontalOffset[position] /
-                2 + "px, " + verticalOffset[position] / 2 + "px, 0)",
         },
@@ -44,8 +26,8 @@ };
 };
-var getStyle = function (timeout, state) { return function (position) { return (__assign(__assign({}, defaultStyle(timeout)), transitionStyle(timeout, state, position))); }; };
+var getStyle = function (timeout, state) { return function () { return (__assign(__assign({}, defaultStyle(timeout)), transitionStyle(state))); }; };
 var Animation = function (_a) {
     var children = _a.children, immediatelyHide = _a.immediatelyHide, immediatelyShow = _a.immediatelyShow, onExited = _a.onExited, inProp = _a.in;
     var timeout = {
-        enter: immediatelyShow ? 1 : ENTER_DURATION,
-        exit: immediatelyHide ? 1 : EXIT_DURATION,
+        enter: immediatelyShow ? 0 : ENTER_DURATION,
+        exit: immediatelyHide ? 0 : EXIT_DURATION,
     };
@@ -52,0 +34,0 @@ return (React.createElement(Transition, { timeout: timeout, in: inProp, onExited: onExited, unmountOnExit: true, appear: true }, function (state) { return children(getStyle(timeout, state)); }));

dist/esm/components/Tooltip.d.ts

 import React from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { PositionType, PositionTypeBase, FakeMouseElement } from '../types';
-import { StyledComponentClass } from 'styled-components';
-export interface TooltipProps extends WithAnalyticsEventsProps {
-    /** The content of the tooltip */
-    content: React.ReactNode;
-    /** Extend `TooltipPrimitive` to create your own tooltip and pass it as component */
-    component?: StyledComponentClass<{
-        truncate?: boolean;
-        style?: any;
-        className?: any;
-    }, any>;
-    /** 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. Only used when the
-      `position` prop is set to 'mouse'
-    */
-    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',
-      tooltip will display next to the mouse instead.
-    */
-    position?: PositionType;
-    /**
-      Replace the wrapping element. This accepts the name of a html tag which will
-      be used to wrap the element.
-    */
-    tag?: React.ElementType;
-    /** Show only one line of text, and truncate when too long */
-    truncate?: boolean;
-    /** Elements to be wrapped by the tooltip */
-    children: React.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;
-}
-interface State {
-    immediatelyHide: boolean;
-    immediatelyShow: boolean;
-    isVisible: boolean;
-    renderTooltip: boolean;
-}
-declare class Tooltip extends React.Component<TooltipProps, State> {
+import { TooltipProps, TooltipState, FakeMouseElement } from './types';
+declare class Tooltip extends React.Component<TooltipProps, TooltipState> {
     static defaultProps: Pick<TooltipProps, 'component' | 'delay' | 'mousePosition' | 'position' | 'tag'>;
-    wrapperRef?: HTMLElement;
-    targetRef?: HTMLElement;
+    wrapperRef: HTMLElement | null;
+    targetRef: HTMLElement | null;
     fakeMouseElement?: FakeMouseElement;
     cancelPendingSetState: () => void;
+    userInteraction: 'mouse' | 'keyboard';
     state: {
@@ -82,3 +17,3 @@ immediatelyHide: boolean;
     componentWillUnmount(): void;
-    componentDidUpdate(_prevProps: TooltipProps, prevState: State): void;
+    componentDidUpdate(_prevProps: TooltipProps, prevState: TooltipState): void;
     removeScrollListener(): void;
@@ -89,4 +24,7 @@ handleWindowScroll: () => void;
     handleMouseOver: (e: React.MouseEvent<Element, MouseEvent>) => void;
-    handleMouseLeave: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    handleFocus: () => void;
+    handleShowTooltip: () => void;
+    handleHideTooltip: (e: React.MouseEvent<Element, MouseEvent> | FocusEvent) => void;
     handleMouseMove: (event: MouseEvent) => void;
+    shouldPositionTooltipNearMouse(): boolean;
     render(): JSX.Element;
@@ -96,3 +34,3 @@ }
 export declare type TooltipType = Tooltip;
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TooltipProps, "children" | "truncate" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId">, "children" | "truncate" | "content" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "onShow" | "onHide" | "testId"> & Partial<Pick<Pick<TooltipProps, "children" | "truncate" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId">, "component" | "delay" | "mousePosition" | "position" | "tag">> & Partial<Pick<Pick<TooltipProps, "component" | "delay" | "mousePosition" | "position" | "tag">, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next/dist/cjs/withAnalyticsContext").WithContextProps, "children" | "key" | "truncate" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId" | "analyticsContext"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<TooltipProps, "truncate" | "children" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId">, "truncate" | "children" | "content" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "onShow" | "onHide" | "testId"> & Partial<Pick<Pick<TooltipProps, "truncate" | "children" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId">, "component" | "delay" | "mousePosition" | "position" | "tag">> & Partial<Pick<Pick<TooltipProps, "component" | "delay" | "mousePosition" | "position" | "tag">, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next/dist/cjs/withAnalyticsContext").WithContextProps, "truncate" | "key" | "children" | "content" | "component" | "delay" | "hideTooltipOnClick" | "hideTooltipOnMouseDown" | "mousePosition" | "onShow" | "onHide" | "position" | "tag" | "testId" | "analyticsContext"> & React.RefAttributes<any>>;
 export default _default;

dist/esm/components/Tooltip.js

@@ -50,4 +50,6 @@ /* eslint-disable react/require-default-props */
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.wrapperRef = null;
+        _this.targetRef = null;
         _this.cancelPendingSetState = function () { };
-        // set in mouseover/mouseout handlers
+        _this.userInteraction = 'mouse';
         _this.state = {
@@ -78,7 +80,9 @@ immediatelyHide: false,
         _this.handleMouseOver = function (e) {
-            if (e.target === _this.wrapperRef)
+            if (e.target === _this.wrapperRef) {
                 return;
+            }
+            _this.userInteraction = 'mouse';
             // In the case where a tooltip is newly rendered but immediately becomes hovered,
             // we need to set the coordinates in the mouseOver event.
-            if (!_this.fakeMouseElement)
+            if (!_this.fakeMouseElement) {
                 _this.fakeMouseElement = getMousePosition({
@@ -88,2 +92,18 @@ left: e.clientX,
                 });
+            }
+            _this.handleShowTooltip();
+        };
+        _this.handleFocus = function () {
+            _this.userInteraction = 'keyboard';
+            // We need to fake the mouse dimensions even on focus because the code path currently assumes
+            // fake mouse element needs to exist before showing the tooltip.
+            if (!_this.fakeMouseElement) {
+                _this.fakeMouseElement = getMousePosition({
+                    left: 0,
+                    top: 0,
+                });
+            }
+            _this.handleShowTooltip();
+        };
+        _this.handleShowTooltip = function () {
             _this.cancelPendingSetState();
@@ -100,5 +120,6 @@ if (Boolean(_this.props.content) && !_this.state.isVisible) {
         };
-        _this.handleMouseLeave = function (e) {
-            if (e.target === _this.wrapperRef)
+        _this.handleHideTooltip = function (e) {
+            if (e.target === _this.wrapperRef) {
                 return;
+            }
             _this.cancelPendingSetState();
@@ -145,27 +166,33 @@ if (_this.state.isVisible) {
     };
+    Tooltip.prototype.shouldPositionTooltipNearMouse = function () {
+        var position = this.props.position;
+        return position === 'mouse' && this.userInteraction === 'mouse';
+    };
     Tooltip.prototype.render = function () {
         var _this = this;
-        var _a = this.props, children = _a.children, content = _a.content, position = _a.position, mousePosition = _a.mousePosition, truncate = _a.truncate, TooltipContainer = _a.component, TargetContainer = _a.tag, testId = _a.testId;
+        var _a = this.props, children = _a.children, position = _a.position, mousePosition = _a.mousePosition, content = _a.content, truncate = _a.truncate, TooltipContainer = _a.component, TargetContainer = _a.tag, testId = _a.testId;
         var _b = this.state, isVisible = _b.isVisible, renderTooltip = _b.renderTooltip, immediatelyShow = _b.immediatelyShow, immediatelyHide = _b.immediatelyHide;
+        var tooltipPosition = position === 'mouse' ? mousePosition : position;
         return (
         /* eslint-disable jsx-a11y/mouse-events-have-key-events */
         React.createElement(React.Fragment, null,
-            TargetContainer && (React.createElement(TargetContainer, { onClick: this.handleMouseClick, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, ref: function (wrapperRef) {
+            TargetContainer && (React.createElement(TargetContainer, { onClick: this.handleMouseClick, onMouseOver: this.handleMouseOver, onMouseOut: this.handleHideTooltip, onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, onFocus: this.handleFocus, onBlur: this.handleHideTooltip, ref: function (wrapperRef) {
                     _this.wrapperRef = wrapperRef;
                 } },
-                React.createElement(NodeResolver, { innerRef: function (targetRef) {
-                        _this.targetRef = targetRef;
+                React.createElement(NodeResolver, { innerRef: function (ref) {
+                        _this.targetRef = ref;
                     } }, React.Children.only(children)))),
             renderTooltip && this.targetRef && this.fakeMouseElement ? (React.createElement(Portal, { zIndex: layers.tooltip() },
-                React.createElement(Popper
-                // @ts-ignore
-                , { 
-                    // @ts-ignore
-                    referenceElement: 
+                React.createElement(Popper, { placement: tooltipPosition, referenceElement: 
                     // https://github.com/FezVrasta/react-popper#usage-without-a-reference-htmlelement
                     // We are using a popper technique to pass in a faked element when we use mouse.
-                    // This is fine.
-                    position === 'mouse' ? this.fakeMouseElement : this.targetRef, placement: position === 'mouse' ? mousePosition : position }, function (_a) {
-                    var ref = _a.ref, style = _a.style, placement = _a.placement;
-                    return TooltipContainer && (React.createElement(Animation, { immediatelyShow: immediatelyShow, immediatelyHide: immediatelyHide, onExited: function () { return _this.setState({ renderTooltip: false }); }, in: isVisible }, function (getAnimationStyles) { return (React.createElement(TooltipContainer, { innerRef: ref, className: "Tooltip", style: __assign(__assign({}, getAnimationStyles(placement)), style), truncate: truncate || false, "data-testid": testId }, content)); }));
+                    (this.shouldPositionTooltipNearMouse()
+                        ? this.fakeMouseElement
+                        : this.targetRef) }, function (_a) {
+                    var ref = _a.ref, style = _a.style;
+                    return TooltipContainer && (React.createElement(Animation, { immediatelyShow: immediatelyShow, immediatelyHide: immediatelyHide, onExited: function () { return _this.setState({ renderTooltip: false }); }, in: isVisible }, function (getAnimationStyles) { return (React.createElement(TooltipContainer
+                    // innerRef can't be null so shortcircuit to undefined if it is.
+                    , { 
+                        // innerRef can't be null so shortcircuit to undefined if it is.
+                        innerRef: ref || undefined, className: "Tooltip", style: __assign(__assign({}, getAnimationStyles()), style), truncate: truncate || false, "data-placement": tooltipPosition, "data-testid": testId }, content)); }));
                 }))) : null)
@@ -172,0 +199,0 @@ /* eslint-enable */

dist/esm/index.d.ts

@@ -1,3 +0,4 @@
-export { default, TooltipProps } from './components/Tooltip';
+export { default } from './components/Tooltip';
 export { TooltipPrimitive } from './styled';
 export { PositionType } from './types';
+export { TooltipProps } from './components/types';

dist/esm/styled.d.ts

@@ -6,10 +6,10 @@ /// <reference types="react" />
 export declare const TooltipPrimitive: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & TooltipProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & TooltipProps>;
-export declare const Tooltip: import("styled-components").StyledComponentClass<(TooltipProps & import("@atlaskit/theme/dist/cjs/types").AtlaskitThemeProps) | (TooltipProps & import("@atlaskit/theme/dist/cjs/types").CustomThemeProps) | (TooltipProps & import("@atlaskit/theme/dist/cjs/types").NoThemeProps), any, (Pick<TooltipProps, "truncate"> & {
+export declare const Tooltip: import("styled-components").StyledComponentClass<(TooltipProps & import("@atlaskit/theme").AtlaskitThemeProps) | (TooltipProps & import("@atlaskit/theme").CustomThemeProps) | (TooltipProps & import("@atlaskit/theme").NoThemeProps), any, (Pick<TooltipProps, "truncate"> & {
     theme?: any;
-} & import("@atlaskit/theme/dist/cjs/types").AtlaskitThemeProps) | (Pick<TooltipProps, "truncate"> & {
+} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<TooltipProps, "truncate"> & {
     theme?: any;
-} & import("@atlaskit/theme/dist/cjs/types").CustomThemeProps) | (Pick<TooltipProps, "truncate"> & {
+} & import("@atlaskit/theme").CustomThemeProps) | (Pick<TooltipProps, "truncate"> & {
     theme?: any;
-} & import("@atlaskit/theme/dist/cjs/types").NoThemeProps)>;
+} & import("@atlaskit/theme").NoThemeProps)>;
 export declare const Target: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
 export {};

dist/esm/version.json

 {
 	"name": "@atlaskit/tooltip",
-	"version": "15.1.3",
+	"version": "15.2.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/tooltip",
-  "version": "15.1.3",
+  "version": "15.2.0",
   "description": "A React Component for displaying Tooltips",
@@ -25,4 +25,4 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@atlaskit/analytics-next": "^6.3.1",
-    "@atlaskit/popper": "^3.1.6",
+    "@atlaskit/analytics-next": "^6.3.3",
+    "@atlaskit/popper": "^3.1.8",
     "@atlaskit/portal": "^3.1.2",
@@ -50,5 +50,5 @@ "@atlaskit/theme": "^9.2.6",
     "@testing-library/react": "^8.0.1",
+    "@types/flushable": "^1.0.1",
+    "enzyme": "^3.10.0",
     "jest-in-case": "^1.0.2",
-    "@types/flushable": "^1.0.1",
-    "enzyme": "^3.7.0",
     "react-dom": "^16.8.0",
@@ -62,2 +62,2 @@ "wait-for-expect": "^1.2.0"
   ]
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108839

increased by4.5%

Number of package files

54

increased by12.5%

Lines of code

1141

increased by8.77%

Dependency changes

• Updated@atlaskit/analytics-next@^6.3.3

• Updated@atlaskit/popper@^3.1.8