@toptal/picasso-tooltip 2.0.3 → 2.0.4-alpha-1757603192867.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +10 -9
- package/dist-package/src/Tooltip/Tooltip.d.ts +0 -54
- package/dist-package/src/Tooltip/Tooltip.d.ts.map +0 -1
- package/dist-package/src/Tooltip/Tooltip.js +0 -91
- package/dist-package/src/Tooltip/Tooltip.js.map +0 -1
- package/dist-package/src/Tooltip/index.d.ts +0 -6
- package/dist-package/src/Tooltip/index.d.ts.map +0 -1
- package/dist-package/src/Tooltip/index.js +0 -2
- package/dist-package/src/Tooltip/index.js.map +0 -1
- package/dist-package/src/Tooltip/styles.d.ts +0 -4
- package/dist-package/src/Tooltip/styles.d.ts.map +0 -1
- package/dist-package/src/Tooltip/styles.js +0 -35
- package/dist-package/src/Tooltip/styles.js.map +0 -1
- package/dist-package/src/Tooltip/types.d.ts +0 -9
- package/dist-package/src/Tooltip/types.d.ts.map +0 -1
- package/dist-package/src/Tooltip/types.js +0 -2
- package/dist-package/src/Tooltip/types.js.map +0 -1
- package/dist-package/src/Tooltip/use-tooltip-follow-cursor.d.ts +0 -40
- package/dist-package/src/Tooltip/use-tooltip-follow-cursor.d.ts.map +0 -1
- package/dist-package/src/Tooltip/use-tooltip-follow-cursor.js +0 -72
- package/dist-package/src/Tooltip/use-tooltip-follow-cursor.js.map +0 -1
- package/dist-package/src/Tooltip/use-tooltip-handlers.d.ts +0 -20
- package/dist-package/src/Tooltip/use-tooltip-handlers.d.ts.map +0 -1
- package/dist-package/src/Tooltip/use-tooltip-handlers.js +0 -76
- package/dist-package/src/Tooltip/use-tooltip-handlers.js.map +0 -1
- package/dist-package/src/Tooltip/use-tooltip-state.d.ts +0 -16
- package/dist-package/src/Tooltip/use-tooltip-state.d.ts.map +0 -1
- package/dist-package/src/Tooltip/use-tooltip-state.js +0 -39
- package/dist-package/src/Tooltip/use-tooltip-state.js.map +0 -1
- package/dist-package/src/index.d.ts +0 -2
- package/dist-package/src/index.d.ts.map +0 -1
- package/dist-package/src/index.js +0 -2
- package/dist-package/src/index.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-tooltip",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.4-alpha-1757603192867.0",
|
|
4
4
|
"description": "Toptal UI components library - Tooltip",
|
|
5
5
|
"publishConfig": {
|
|
6
|
-
"access": "public"
|
|
6
|
+
"access": "public",
|
|
7
|
+
"provenance": true
|
|
7
8
|
},
|
|
8
9
|
"main": "./dist-package/src/index.js",
|
|
9
10
|
"module": "./dist-package/src/index.js",
|
|
10
11
|
"scripts": {
|
|
11
12
|
"build:package": "tsc -b tsconfig.json",
|
|
12
|
-
"prepublishOnly": "
|
|
13
|
+
"prepublishOnly": "echo 0"
|
|
13
14
|
},
|
|
14
15
|
"repository": {
|
|
15
16
|
"type": "git",
|
|
@@ -22,9 +23,9 @@
|
|
|
22
23
|
},
|
|
23
24
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
25
|
"dependencies": {
|
|
25
|
-
"@toptal/picasso-shared": "15.0.0",
|
|
26
|
-
"@toptal/picasso-typography": "4.0.
|
|
27
|
-
"@toptal/picasso-utils": "3.1.0",
|
|
26
|
+
"@toptal/picasso-shared": "15.0.1-alpha-1757603192867.0",
|
|
27
|
+
"@toptal/picasso-typography": "4.0.5-alpha-1757603192867.0",
|
|
28
|
+
"@toptal/picasso-utils": "3.1.1-alpha-1757603192867.0",
|
|
28
29
|
"classnames": "^2.5.1",
|
|
29
30
|
"debounce": "^1.2.1"
|
|
30
31
|
},
|
|
@@ -34,12 +35,12 @@
|
|
|
34
35
|
],
|
|
35
36
|
"peerDependencies": {
|
|
36
37
|
"@material-ui/core": "4.12.4",
|
|
37
|
-
"@toptal/picasso-provider": "
|
|
38
|
+
"@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
|
|
38
39
|
"react": ">=16.12.0 < 19.0.0"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
|
-
"@toptal/picasso-provider": "5.0.
|
|
42
|
-
"@toptal/picasso-test-utils": "1.1.
|
|
42
|
+
"@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
|
|
43
|
+
"@toptal/picasso-test-utils": "1.1.2-alpha-1757603192867.0",
|
|
43
44
|
"popper.js": "^1.16.1"
|
|
44
45
|
},
|
|
45
46
|
"exports": {
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import type { ReactNode, ChangeEvent, HTMLAttributes } from 'react';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { TooltipProps } from '@material-ui/core';
|
|
4
|
-
import type { BaseProps } from '@toptal/picasso-shared';
|
|
5
|
-
import type { PicassoSpacing } from '@toptal/picasso-provider';
|
|
6
|
-
import type { ContainerValue } from './types';
|
|
7
|
-
export declare type DelayType = 'short' | 'long';
|
|
8
|
-
export declare type MaxWidthType = 'none' | 'default';
|
|
9
|
-
export declare type PlacementType = TooltipProps['placement'];
|
|
10
|
-
export declare type OffsetType = {
|
|
11
|
-
left?: PicassoSpacing;
|
|
12
|
-
top?: PicassoSpacing;
|
|
13
|
-
};
|
|
14
|
-
export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
|
|
15
|
-
/** Trigger element for tooltip */
|
|
16
|
-
children: ReactNode;
|
|
17
|
-
/** Content to be rendered inside tooltip */
|
|
18
|
-
content?: ReactNode;
|
|
19
|
-
/** Where should the tooltip be positioned */
|
|
20
|
-
placement?: PlacementType;
|
|
21
|
-
/** Called when tooltip is opened */
|
|
22
|
-
onOpen?: (event: ChangeEvent<{}>) => void;
|
|
23
|
-
/** Called when tooltip is closed */
|
|
24
|
-
onClose?: (event: ChangeEvent<{}>) => void;
|
|
25
|
-
/** Whether user can interact with tooltip content */
|
|
26
|
-
interactive?: boolean;
|
|
27
|
-
/** Programatically control tooltip's visibility */
|
|
28
|
-
open?: boolean;
|
|
29
|
-
/** Disables all listener */
|
|
30
|
-
disableListeners?: boolean;
|
|
31
|
-
/** Allows tooltip to change its placement when it overflows */
|
|
32
|
-
preventOverflow?: boolean;
|
|
33
|
-
/** Disable the portal behavior. The children stay within it's parent */
|
|
34
|
-
disablePortal?: boolean;
|
|
35
|
-
/** A delay in showing the tooltip */
|
|
36
|
-
delay?: DelayType;
|
|
37
|
-
/** Show a compact tooltip */
|
|
38
|
-
compact?: boolean;
|
|
39
|
-
/** If `true`, the tooltip follow the cursor over the wrapped element. This prop exists in material-ui@5+ */
|
|
40
|
-
followCursor?: boolean;
|
|
41
|
-
/** Max width of a tooltip */
|
|
42
|
-
maxWidth?: MaxWidthType;
|
|
43
|
-
onTransitionExiting?: () => void;
|
|
44
|
-
onTransitionExited?: () => void;
|
|
45
|
-
/** Tooltip div ref */
|
|
46
|
-
tooltipRef?: React.Ref<HTMLDivElement>;
|
|
47
|
-
/** A node, or a function that returns node. The container will have the portal children appended to it. */
|
|
48
|
-
container?: ContainerValue;
|
|
49
|
-
/** Offset to allow shifting tooltip's position from left and top. */
|
|
50
|
-
offset?: OffsetType;
|
|
51
|
-
}
|
|
52
|
-
export declare const Tooltip: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
|
|
53
|
-
export default Tooltip;
|
|
54
|
-
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAET,WAAW,EACX,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAK9D,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,SAAS,CAAA;AAK5D,oBAAY,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,oBAAY,YAAY,GAAG,MAAM,GAAG,SAAS,CAAA;AAE7C,oBAAY,aAAa,GAAG,YAAY,CAAC,WAAW,CAAC,CAAA;AAErD,oBAAY,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,GAAG,CAAC,EAAE,cAAc,CAAA;CACrB,CAAA;AAyBD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAA;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,oCAAoC;IACpC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACzC,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1C,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4GAA4G;IAC5G,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,sBAAsB;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;IACtC,2GAA2G;IAC3G,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,qEAAqE;IACrE,MAAM,CAAC,EAAE,UAAU,CAAA;CACpB;AAID,eAAO,MAAM,OAAO,uEAuHlB,CAAA;AAUF,eAAe,OAAO,CAAA"}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React, { forwardRef } from 'react';
|
|
13
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
14
|
-
import { Tooltip as MUITooltip } from '@material-ui/core';
|
|
15
|
-
import cx from 'classnames';
|
|
16
|
-
import { pxFromRem, spacingToRem } from '@toptal/picasso-shared';
|
|
17
|
-
import { SPACING_0, usePicassoRoot } from '@toptal/picasso-provider';
|
|
18
|
-
import { Typography } from '@toptal/picasso-typography';
|
|
19
|
-
import styles from './styles';
|
|
20
|
-
import { useTooltipState } from './use-tooltip-state';
|
|
21
|
-
import { useTooltipHandlers } from './use-tooltip-handlers';
|
|
22
|
-
import { useTooltipFollowCursor } from './use-tooltip-follow-cursor';
|
|
23
|
-
const delayDurations = {
|
|
24
|
-
short: 200,
|
|
25
|
-
long: 500,
|
|
26
|
-
};
|
|
27
|
-
const getDelayDuration = (delay, isTouchDevice) => {
|
|
28
|
-
return isTouchDevice ? 0 : delayDurations[delay];
|
|
29
|
-
};
|
|
30
|
-
const getOffset = (placement = 'top', offset) => {
|
|
31
|
-
const { left = SPACING_0, top = SPACING_0 } = offset;
|
|
32
|
-
const result = [pxFromRem(spacingToRem(left)), pxFromRem(spacingToRem(top))];
|
|
33
|
-
const isVertical = placement.startsWith('top') || placement.startsWith('bottom');
|
|
34
|
-
return (isVertical ? result : result.reverse()).join(',');
|
|
35
|
-
};
|
|
36
|
-
const useStyles = makeStyles(styles, { name: 'PicassoTooltip' });
|
|
37
|
-
export const Tooltip = forwardRef((props, ref) => {
|
|
38
|
-
const { content, children: originalChildren, placement, interactive, className, offset = {
|
|
39
|
-
left: SPACING_0,
|
|
40
|
-
top: SPACING_0,
|
|
41
|
-
}, style, open, onOpen, onClose, onTransitionExiting, onTransitionExited, disableListeners, preventOverflow, disablePortal, delay = 'short', compact, maxWidth, followCursor = false, tooltipRef, container, 'data-private': dataPrivate } = props, rest = __rest(props, ["content", "children", "placement", "interactive", "className", "offset", "style", "open", "onOpen", "onClose", "onTransitionExiting", "onTransitionExited", "disableListeners", "preventOverflow", "disablePortal", "delay", "compact", "maxWidth", "followCursor", "tooltipRef", "container", 'data-private']);
|
|
42
|
-
const classes = useStyles();
|
|
43
|
-
const picassoRootContainer = usePicassoRoot();
|
|
44
|
-
const tooltipState = useTooltipState({ externalOpen: open, followCursor });
|
|
45
|
-
const delayDuration = getDelayDuration(delay, tooltipState.isTouchDevice);
|
|
46
|
-
const followCursorTooltipData = useTooltipFollowCursor({
|
|
47
|
-
followCursor,
|
|
48
|
-
tooltipState,
|
|
49
|
-
});
|
|
50
|
-
const { children, handleOpen, handleClose } = useTooltipHandlers({
|
|
51
|
-
children: originalChildren,
|
|
52
|
-
tooltipState,
|
|
53
|
-
disableListeners,
|
|
54
|
-
onOpen,
|
|
55
|
-
onClose,
|
|
56
|
-
onMouseOver: followCursorTooltipData === null || followCursorTooltipData === void 0 ? void 0 : followCursorTooltipData.handleMouseOver,
|
|
57
|
-
onMouseMove: followCursorTooltipData === null || followCursorTooltipData === void 0 ? void 0 : followCursorTooltipData.handleMouseMove,
|
|
58
|
-
onClick: followCursorTooltipData === null || followCursorTooltipData === void 0 ? void 0 : followCursorTooltipData.handleClick,
|
|
59
|
-
});
|
|
60
|
-
const title = (React.createElement(Typography, { "data-private": dataPrivate, as: 'div', size: 'small', color: 'inherit' }, content));
|
|
61
|
-
return (React.createElement(MUITooltip, Object.assign({}, rest, { ref: ref, arrow: !compact && !followCursor, PopperProps: Object.assign({ ref: tooltipRef, container: container || picassoRootContainer, disablePortal, popperOptions: {
|
|
62
|
-
modifiers: {
|
|
63
|
-
preventOverflow: {
|
|
64
|
-
enabled: preventOverflow,
|
|
65
|
-
boundariesElement: 'window',
|
|
66
|
-
},
|
|
67
|
-
hide: {
|
|
68
|
-
enabled: preventOverflow,
|
|
69
|
-
},
|
|
70
|
-
offset: {
|
|
71
|
-
offset: getOffset(placement, offset),
|
|
72
|
-
},
|
|
73
|
-
},
|
|
74
|
-
} }, (followCursor && (followCursorTooltipData === null || followCursorTooltipData === void 0 ? void 0 : followCursorTooltipData.followCursorPopperProps))), TransitionProps: Object.assign(Object.assign({}, (onTransitionExiting && { onExiting: onTransitionExiting })), (onTransitionExited && { onExiting: onTransitionExited })), classes: {
|
|
75
|
-
arrow: classes.arrow,
|
|
76
|
-
tooltip: cx(classes.tooltip, {
|
|
77
|
-
[classes.light]: !compact,
|
|
78
|
-
[classes.compact]: compact,
|
|
79
|
-
[classes.noMaxWidth]: maxWidth === 'none',
|
|
80
|
-
}),
|
|
81
|
-
}, className: className, style: style, interactive: interactive, onClose: handleClose, onOpen: handleOpen, open: tooltipState.isOpen, placement: placement, title: title, disableHoverListener: disableListeners, disableFocusListener: disableListeners, disableTouchListener: true, enterDelay: delayDuration, enterNextDelay: delayDuration }), children));
|
|
82
|
-
});
|
|
83
|
-
Tooltip.defaultProps = {
|
|
84
|
-
preventOverflow: true,
|
|
85
|
-
placement: 'top',
|
|
86
|
-
disablePortal: false,
|
|
87
|
-
maxWidth: 'default',
|
|
88
|
-
delay: 'short',
|
|
89
|
-
};
|
|
90
|
-
export default Tooltip;
|
|
91
|
-
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { OmitInternalProps } from '@toptal/picasso-shared';
|
|
2
|
-
import type { Props as InternalTooltipProps } from './Tooltip';
|
|
3
|
-
export { default as Tooltip } from './Tooltip';
|
|
4
|
-
export declare type TooltipProps = OmitInternalProps<InternalTooltipProps>;
|
|
5
|
-
export type { DelayType, MaxWidthType, PlacementType } from './Tooltip';
|
|
6
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,IAAI,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,oBAAY,YAAY,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,CAAA;AAClE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tooltip/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette, shadows, sizes: { borderRadius } }: Theme) => import("@material-ui/styles").StyleRules<{}, "tooltip" | "light" | "compact" | "arrow" | "noMaxWidth">;
|
|
3
|
-
export default _default;
|
|
4
|
-
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;wEAOU,KAAK;AAApE,wBA8BI"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
-
import { rem } from '@toptal/picasso-shared';
|
|
3
|
-
// copied and manually changed from packages/picasso-provider/src/Picasso/config/shadows.ts
|
|
4
|
-
const ARROW_SHADOW = '0 0 2px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%)';
|
|
5
|
-
export default ({ palette, shadows, sizes: { borderRadius } }) => createStyles({
|
|
6
|
-
tooltip: {
|
|
7
|
-
backgroundColor: palette.grey.darker,
|
|
8
|
-
color: palette.common.white,
|
|
9
|
-
boxShadow: shadows[4],
|
|
10
|
-
padding: '1rem',
|
|
11
|
-
borderRadius: borderRadius.small,
|
|
12
|
-
position: 'relative',
|
|
13
|
-
},
|
|
14
|
-
arrow: {
|
|
15
|
-
color: palette.common.white,
|
|
16
|
-
boxSizing: 'border-box',
|
|
17
|
-
fontSize: '1rem',
|
|
18
|
-
'&::before': {
|
|
19
|
-
boxShadow: ARROW_SHADOW,
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
light: {
|
|
23
|
-
color: palette.grey.darker,
|
|
24
|
-
backgroundColor: palette.common.white,
|
|
25
|
-
},
|
|
26
|
-
compact: {
|
|
27
|
-
lineHeight: '1em',
|
|
28
|
-
padding: `${rem('2px')} 0.5rem`,
|
|
29
|
-
margin: '0.25rem',
|
|
30
|
-
},
|
|
31
|
-
noMaxWidth: {
|
|
32
|
-
maxWidth: 'none',
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tooltip/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,2FAA2F;AAC3F,MAAM,YAAY,GAAG,wDAAwD,CAAA;AAE7E,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAS,EAAE,EAAE,CACtE,YAAY,CAAC;IACX,OAAO,EAAE;QACP,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;QACpC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QAC3B,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;QACrB,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,YAAY,CAAC,KAAK;QAChC,QAAQ,EAAE,UAAU;KACrB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QAC3B,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,MAAM;QAChB,WAAW,EAAE;YACX,SAAS,EAAE,YAAY;SACxB;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;QAC1B,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;KACtC;IACD,OAAO,EAAE;QACP,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,SAAS;QAC/B,MAAM,EAAE,SAAS;KAClB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC,CAAA"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { MouseEvent } from 'react';
|
|
2
|
-
export declare type ChildrenProps = {
|
|
3
|
-
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
4
|
-
onMouseOver?: (event: MouseEvent<HTMLElement>) => void;
|
|
5
|
-
onMouseMove?: (event: MouseEvent<HTMLElement>) => void;
|
|
6
|
-
onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
|
|
7
|
-
};
|
|
8
|
-
export declare type ContainerValue = HTMLElement | (() => HTMLElement);
|
|
9
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC,oBAAY,aAAa,GAAG;IAC1B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACtD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CACxD,CAAA;AAED,oBAAY,cAAc,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/Tooltip/types.ts"],"names":[],"mappings":""}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import type { MouseEvent } from 'react';
|
|
2
|
-
import type PopperJs from 'popper.js';
|
|
3
|
-
import type { TooltipState } from './use-tooltip-state';
|
|
4
|
-
interface UseTooltipFollowCursorOptions {
|
|
5
|
-
followCursor: boolean;
|
|
6
|
-
tooltipState: TooltipState;
|
|
7
|
-
}
|
|
8
|
-
export declare const mouseMoveDebounceTimeout = 250;
|
|
9
|
-
export declare const mouseMoveCloseTooltipDistance = 50;
|
|
10
|
-
export declare const useTooltipFollowCursor: ({ followCursor, tooltipState, }: UseTooltipFollowCursorOptions) => {
|
|
11
|
-
handleMouseMove: (event: MouseEvent<HTMLElement>) => void;
|
|
12
|
-
handleMouseOver: (event: MouseEvent<HTMLElement>) => void;
|
|
13
|
-
handleClick: (event: MouseEvent<HTMLElement>) => void;
|
|
14
|
-
followCursorPopperProps: {
|
|
15
|
-
popperRef: import("react").MutableRefObject<PopperJs | null>;
|
|
16
|
-
modifiers: {
|
|
17
|
-
offset: {
|
|
18
|
-
enabled: boolean;
|
|
19
|
-
offset: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
anchorEl: {
|
|
23
|
-
clientHeight: number;
|
|
24
|
-
clientWidth: number;
|
|
25
|
-
getBoundingClientRect: () => {
|
|
26
|
-
x: number;
|
|
27
|
-
y: number;
|
|
28
|
-
width: number;
|
|
29
|
-
height: number;
|
|
30
|
-
top: number;
|
|
31
|
-
left: number;
|
|
32
|
-
right: number;
|
|
33
|
-
bottom: number;
|
|
34
|
-
toJSON: () => void;
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
|
-
} | undefined;
|
|
39
|
-
export {};
|
|
40
|
-
//# sourceMappingURL=use-tooltip-follow-cursor.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-tooltip-follow-cursor.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/use-tooltip-follow-cursor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAA;AAGrC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAEvD,UAAU,6BAA6B;IACrC,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,YAAY,CAAA;CAC3B;AAOD,eAAO,MAAM,wBAAwB,MAAM,CAAA;AAC3C,eAAO,MAAM,6BAA6B,KAAK,CAAA;AAS/C,eAAO,MAAM,sBAAsB,oCAGhC,6BAA6B;6BAyBE,WAAW,WAAW,CAAC;6BATd,WAAW,WAAW,CAAC;yBAAvB,WAAW,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;aA4DjE,CAAA"}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { useCallback, useRef } from 'react';
|
|
2
|
-
import debounce from 'debounce';
|
|
3
|
-
export const mouseMoveDebounceTimeout = 250;
|
|
4
|
-
export const mouseMoveCloseTooltipDistance = 50;
|
|
5
|
-
const isMouseMovedTooFar = (positionA, positionB) => Math.abs(positionA.x - positionB.x) > mouseMoveCloseTooltipDistance ||
|
|
6
|
-
Math.abs(positionA.y - positionB.y) > mouseMoveCloseTooltipDistance;
|
|
7
|
-
export const useTooltipFollowCursor = ({ followCursor, tooltipState, }) => {
|
|
8
|
-
const { targetHoveredRef, openTooltip, closeTooltip } = tooltipState;
|
|
9
|
-
const positionRef = useRef({ x: 0, y: 0 });
|
|
10
|
-
const mouseMoveStartPositionRef = useRef(null);
|
|
11
|
-
const popperRef = useRef(null);
|
|
12
|
-
const handleMouseStop = useCallback(() => {
|
|
13
|
-
if (targetHoveredRef.current) {
|
|
14
|
-
mouseMoveStartPositionRef.current = null;
|
|
15
|
-
openTooltip();
|
|
16
|
-
}
|
|
17
|
-
}, [targetHoveredRef]);
|
|
18
|
-
const handleMouseStopDebounced = useCallback(debounce(handleMouseStop, mouseMoveDebounceTimeout), [debounce, handleMouseStop]);
|
|
19
|
-
const calculateTooltipPosition = (event) => {
|
|
20
|
-
var _a;
|
|
21
|
-
if (!mouseMoveStartPositionRef.current) {
|
|
22
|
-
mouseMoveStartPositionRef.current = { x: event.clientX, y: event.clientY };
|
|
23
|
-
}
|
|
24
|
-
positionRef.current = { x: event.clientX, y: event.clientY };
|
|
25
|
-
(_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.scheduleUpdate();
|
|
26
|
-
};
|
|
27
|
-
const handleMouseMove = (event) => {
|
|
28
|
-
var _a;
|
|
29
|
-
calculateTooltipPosition(event);
|
|
30
|
-
const shouldCloseTooltip = isMouseMovedTooFar(positionRef.current, (_a = mouseMoveStartPositionRef === null || mouseMoveStartPositionRef === void 0 ? void 0 : mouseMoveStartPositionRef.current) !== null && _a !== void 0 ? _a : positionRef.current);
|
|
31
|
-
// When the cursor is moved `mouseMoveCloseTooltipDistance` pixels and more in any direction, we close the tooltip
|
|
32
|
-
// We need it because when the cursor is moved to a long distance, the tooltip becomes annoying
|
|
33
|
-
if (shouldCloseTooltip) {
|
|
34
|
-
closeTooltip();
|
|
35
|
-
}
|
|
36
|
-
handleMouseStopDebounced();
|
|
37
|
-
};
|
|
38
|
-
if (!followCursor) {
|
|
39
|
-
return undefined;
|
|
40
|
-
}
|
|
41
|
-
return {
|
|
42
|
-
handleMouseMove,
|
|
43
|
-
handleMouseOver: calculateTooltipPosition,
|
|
44
|
-
handleClick: calculateTooltipPosition,
|
|
45
|
-
followCursorPopperProps: {
|
|
46
|
-
popperRef,
|
|
47
|
-
modifiers: {
|
|
48
|
-
offset: {
|
|
49
|
-
enabled: true,
|
|
50
|
-
offset: '0px,10px',
|
|
51
|
-
},
|
|
52
|
-
},
|
|
53
|
-
anchorEl: {
|
|
54
|
-
clientHeight: 0,
|
|
55
|
-
clientWidth: 0,
|
|
56
|
-
getBoundingClientRect: () => ({
|
|
57
|
-
x: 0,
|
|
58
|
-
y: 0,
|
|
59
|
-
width: 0,
|
|
60
|
-
height: 0,
|
|
61
|
-
top: positionRef.current.y,
|
|
62
|
-
left: positionRef.current.x,
|
|
63
|
-
right: positionRef.current.x,
|
|
64
|
-
bottom: positionRef.current.y,
|
|
65
|
-
// this field required according to types
|
|
66
|
-
toJSON: () => { },
|
|
67
|
-
}),
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
};
|
|
71
|
-
};
|
|
72
|
-
//# sourceMappingURL=use-tooltip-follow-cursor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-tooltip-follow-cursor.js","sourceRoot":"","sources":["../../../src/Tooltip/use-tooltip-follow-cursor.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { ChangeEvent, MouseEvent, ReactElement } from 'react';
|
|
2
|
-
import type { TooltipState } from './use-tooltip-state';
|
|
3
|
-
import type { ChildrenProps } from './types';
|
|
4
|
-
interface UseTooltipHandlersOptions {
|
|
5
|
-
onOpen?: (event: ChangeEvent<{}>) => void;
|
|
6
|
-
onClose?: (event: ChangeEvent<{}>) => void;
|
|
7
|
-
onMouseOver?: (event: MouseEvent<HTMLElement>) => void;
|
|
8
|
-
onMouseMove?: (event: MouseEvent<HTMLElement>) => void;
|
|
9
|
-
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
10
|
-
children: ReactElement<ChildrenProps>;
|
|
11
|
-
tooltipState: TooltipState;
|
|
12
|
-
disableListeners?: boolean;
|
|
13
|
-
}
|
|
14
|
-
export declare const useTooltipHandlers: ({ onClose, onOpen, onMouseOver, onMouseMove, onClick, tooltipState, disableListeners, children, }: UseTooltipHandlersOptions) => {
|
|
15
|
-
handleOpen: ((event: ChangeEvent<{}>) => void) | undefined;
|
|
16
|
-
handleClose: ((event: ChangeEvent<{}>) => void) | undefined;
|
|
17
|
-
children: ReactElement<ChildrenProps, string | import("react").JSXElementConstructor<any>>;
|
|
18
|
-
};
|
|
19
|
-
export {};
|
|
20
|
-
//# sourceMappingURL=use-tooltip-handlers.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-tooltip-handlers.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/use-tooltip-handlers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAGlE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,UAAU,yBAAyB;IACjC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAClD,QAAQ,EAAE,YAAY,CAAC,aAAa,CAAC,CAAA;IACrC,YAAY,EAAE,YAAY,CAAA;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,eAAO,MAAM,kBAAkB,sGAS5B,yBAAyB;yBAnBT,YAAY,EAAE,CAAC,KAAK,IAAI;0BACvB,YAAY,EAAE,CAAC,KAAK,IAAI;;CAyG3C,CAAA"}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { cloneElement, useState } from 'react';
|
|
2
|
-
export const useTooltipHandlers = ({ onClose, onOpen, onMouseOver, onMouseMove, onClick, tooltipState, disableListeners, children, }) => {
|
|
3
|
-
const { isOpen, isControlled, isTouchDevice, targetHoveredRef, openTooltip, closeTooltip, } = tooltipState;
|
|
4
|
-
// After closing with click the tooltip should not be opened againg until the mouse leave event
|
|
5
|
-
const [ignoreOpening, setIgnoreOpening] = useState(false);
|
|
6
|
-
if (isControlled) {
|
|
7
|
-
return {
|
|
8
|
-
handleOpen: onOpen,
|
|
9
|
-
handleClose: onClose,
|
|
10
|
-
children,
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
const handleClose = (event) => {
|
|
14
|
-
onClose === null || onClose === void 0 ? void 0 : onClose(event);
|
|
15
|
-
closeTooltip();
|
|
16
|
-
};
|
|
17
|
-
const handleOpen = (event) => {
|
|
18
|
-
if (ignoreOpening) {
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
|
|
22
|
-
openTooltip();
|
|
23
|
-
};
|
|
24
|
-
const handleClick = (event) => {
|
|
25
|
-
var _a, _b;
|
|
26
|
-
(_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
27
|
-
if (disableListeners) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
if (isOpen) {
|
|
31
|
-
setIgnoreOpening(true);
|
|
32
|
-
handleClose(event);
|
|
33
|
-
}
|
|
34
|
-
else if (isTouchDevice) {
|
|
35
|
-
handleOpen(event);
|
|
36
|
-
}
|
|
37
|
-
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
38
|
-
};
|
|
39
|
-
const handleMouseOver = (event) => {
|
|
40
|
-
var _a, _b;
|
|
41
|
-
(_b = (_a = children.props).onMouseOver) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
42
|
-
if (disableListeners) {
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
targetHoveredRef.current = true;
|
|
46
|
-
onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);
|
|
47
|
-
};
|
|
48
|
-
const handleMouseMove = (event) => {
|
|
49
|
-
var _a, _b;
|
|
50
|
-
(_b = (_a = children.props).onMouseMove) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
51
|
-
if (disableListeners) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event);
|
|
55
|
-
};
|
|
56
|
-
const handleMouseLeave = (event) => {
|
|
57
|
-
var _a, _b;
|
|
58
|
-
(_b = (_a = children.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
|
|
59
|
-
if (disableListeners) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
targetHoveredRef.current = false;
|
|
63
|
-
setIgnoreOpening(false);
|
|
64
|
-
};
|
|
65
|
-
return {
|
|
66
|
-
handleOpen,
|
|
67
|
-
handleClose,
|
|
68
|
-
children: cloneElement(children, {
|
|
69
|
-
onClick: handleClick,
|
|
70
|
-
onMouseOver: handleMouseOver,
|
|
71
|
-
onMouseMove: handleMouseMove,
|
|
72
|
-
onMouseLeave: handleMouseLeave,
|
|
73
|
-
}),
|
|
74
|
-
};
|
|
75
|
-
};
|
|
76
|
-
//# sourceMappingURL=use-tooltip-handlers.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-tooltip-handlers.js","sourceRoot":"","sources":["../../../src/Tooltip/use-tooltip-handlers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAgB9C,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,OAAO,EACP,MAAM,EACN,WAAW,EACX,WAAW,EACX,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,QAAQ,GACkB,EAAE,EAAE;IAC9B,MAAM,EACJ,MAAM,EACN,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,YAAY,GACb,GAAG,YAAY,CAAA;IAChB,+FAA+F;IAC/F,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzD,IAAI,YAAY,EAAE;QAChB,OAAO;YACL,UAAU,EAAE,MAAM;YAClB,WAAW,EAAE,OAAO;YACpB,QAAQ;SACT,CAAA;KACF;IACD,MAAM,WAAW,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC7C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAA;QAChB,YAAY,EAAE,CAAA;IAChB,CAAC,CAAA;IACD,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;QAC5C,IAAI,aAAa,EAAE;YACjB,OAAM;SACP;QAED,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,KAAK,CAAC,CAAA;QACf,WAAW,EAAE,CAAA;IACf,CAAC,CAAA;IACD,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAE,EAAE;;QACrD,MAAA,MAAA,QAAQ,CAAC,KAAK,EAAC,OAAO,mDAAG,KAAK,CAAC,CAAA;QAE/B,IAAI,gBAAgB,EAAE;YACpB,OAAM;SACP;QAED,IAAI,MAAM,EAAE;YACV,gBAAgB,CAAC,IAAI,CAAC,CAAA;YACtB,WAAW,CAAC,KAAK,CAAC,CAAA;SACnB;aAAM,IAAI,aAAa,EAAE;YACxB,UAAU,CAAC,KAAK,CAAC,CAAA;SAClB;QAED,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IACD,MAAM,eAAe,GAAG,CAAC,KAA8B,EAAE,EAAE;;QACzD,MAAA,MAAA,QAAQ,CAAC,KAAK,EAAC,WAAW,mDAAG,KAAK,CAAC,CAAA;QAEnC,IAAI,gBAAgB,EAAE;YACpB,OAAM;SACP;QAED,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAA;QAC/B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,KAAK,CAAC,CAAA;IACtB,CAAC,CAAA;IACD,MAAM,eAAe,GAAG,CAAC,KAA8B,EAAE,EAAE;;QACzD,MAAA,MAAA,QAAQ,CAAC,KAAK,EAAC,WAAW,mDAAG,KAAK,CAAC,CAAA;QAEnC,IAAI,gBAAgB,EAAE;YACpB,OAAM;SACP;QAED,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,KAAK,CAAC,CAAA;IACtB,CAAC,CAAA;IACD,MAAM,gBAAgB,GAAG,CAAC,KAA8B,EAAE,EAAE;;QAC1D,MAAA,MAAA,QAAQ,CAAC,KAAK,EAAC,YAAY,mDAAG,KAAK,CAAC,CAAA;QAEpC,IAAI,gBAAgB,EAAE;YACpB,OAAM;SACP;QAED,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAA;QAChC,gBAAgB,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC,CAAA;IAED,OAAO;QACL,UAAU;QACV,WAAW;QACX,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAAE;YAC/B,OAAO,EAAE,WAAW;YACpB,WAAW,EAAE,eAAe;YAC5B,WAAW,EAAE,eAAe;YAC5B,YAAY,EAAE,gBAAgB;SAC/B,CAAC;KACH,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { MutableRefObject } from 'react';
|
|
2
|
-
interface UseTooltipStateOptions {
|
|
3
|
-
externalOpen?: boolean;
|
|
4
|
-
followCursor: boolean;
|
|
5
|
-
}
|
|
6
|
-
export interface TooltipState {
|
|
7
|
-
isOpen: boolean;
|
|
8
|
-
isControlled: boolean;
|
|
9
|
-
isTouchDevice: boolean;
|
|
10
|
-
targetHoveredRef: MutableRefObject<boolean>;
|
|
11
|
-
openTooltip: () => void;
|
|
12
|
-
closeTooltip: () => void;
|
|
13
|
-
}
|
|
14
|
-
export declare const useTooltipState: ({ externalOpen, followCursor, }: UseTooltipStateOptions) => TooltipState;
|
|
15
|
-
export {};
|
|
16
|
-
//# sourceMappingURL=use-tooltip-state.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-tooltip-state.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/use-tooltip-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAI7C,UAAU,sBAAsB;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,OAAO,CAAA;IACtB,gBAAgB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAC3C,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB;AA2BD,eAAO,MAAM,eAAe,oCAGzB,sBAAsB,KAAG,YA6B3B,CAAA"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { useRef, useState } from 'react';
|
|
2
|
-
import { isPointerDevice } from '@toptal/picasso-utils';
|
|
3
|
-
const getTooltipOpenState = ({ isOpen, isOpenExternally, isControlled, isTouchDevice, followCursor, }) => {
|
|
4
|
-
// We don't support `followCursor` prop when this prop is enabled on the touch device. Same as in `@material-ui@5`
|
|
5
|
-
if (isTouchDevice && followCursor) {
|
|
6
|
-
return false;
|
|
7
|
-
}
|
|
8
|
-
if (isControlled) {
|
|
9
|
-
return isOpenExternally;
|
|
10
|
-
}
|
|
11
|
-
return isOpen;
|
|
12
|
-
};
|
|
13
|
-
export const useTooltipState = ({ externalOpen, followCursor, }) => {
|
|
14
|
-
const isTouchDevice = !isPointerDevice();
|
|
15
|
-
const isTooltipControlled = typeof externalOpen !== 'undefined';
|
|
16
|
-
const [isOpen, setIsOpen] = useState(isTooltipControlled ? externalOpen : false);
|
|
17
|
-
const targetHoveredRef = useRef(false);
|
|
18
|
-
const openTooltip = () => {
|
|
19
|
-
setIsOpen(true);
|
|
20
|
-
};
|
|
21
|
-
const closeTooltip = () => {
|
|
22
|
-
setIsOpen(false);
|
|
23
|
-
};
|
|
24
|
-
return {
|
|
25
|
-
isOpen: getTooltipOpenState({
|
|
26
|
-
isOpen,
|
|
27
|
-
isOpenExternally: !!externalOpen,
|
|
28
|
-
isControlled: isTooltipControlled,
|
|
29
|
-
isTouchDevice,
|
|
30
|
-
followCursor,
|
|
31
|
-
}),
|
|
32
|
-
isControlled: isTooltipControlled,
|
|
33
|
-
isTouchDevice,
|
|
34
|
-
targetHoveredRef,
|
|
35
|
-
openTooltip,
|
|
36
|
-
closeTooltip,
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=use-tooltip-state.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-tooltip-state.js","sourceRoot":"","sources":["../../../src/Tooltip/use-tooltip-state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAgBvD,MAAM,mBAAmB,GAAG,CAAC,EAC3B,MAAM,EACN,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,GAOb,EAAW,EAAE;IACZ,kHAAkH;IAClH,IAAI,aAAa,IAAI,YAAY,EAAE;QACjC,OAAO,KAAK,CAAA;KACb;IAED,IAAI,YAAY,EAAE;QAChB,OAAO,gBAAgB,CAAA;KACxB;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,YAAY,EACZ,YAAY,GACW,EAAgB,EAAE;IACzC,MAAM,aAAa,GAAG,CAAC,eAAe,EAAE,CAAA;IACxC,MAAM,mBAAmB,GAAG,OAAO,YAAY,KAAK,WAAW,CAAA;IAC/D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAClC,mBAAmB,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAC3C,CAAA;IACD,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEtC,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,CAAA;IACD,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,OAAO;QACL,MAAM,EAAE,mBAAmB,CAAC;YAC1B,MAAM;YACN,gBAAgB,EAAE,CAAC,CAAC,YAAY;YAChC,YAAY,EAAE,mBAAmB;YACjC,aAAa;YACb,YAAY;SACb,CAAC;QACF,YAAY,EAAE,mBAAmB;QACjC,aAAa;QACb,gBAAgB;QAChB,WAAW;QACX,YAAY;KACb,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}
|