@atlaskit/tooltip 17.6.0 → 17.6.2
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/CHANGELOG.md +12 -0
- package/__perf__/examples.tsx +2 -3
- package/dist/cjs/Tooltip.js +1 -1
- package/dist/cjs/TooltipContainer.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/Tooltip.js +1 -1
- package/dist/es2019/TooltipContainer.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/Tooltip.js +1 -1
- package/dist/esm/TooltipContainer.js +1 -1
- package/dist/esm/version.json +1 -1
- package/package.json +6 -11
- package/report.api.md +59 -93
- package/dist/types-ts4.0/Tooltip.d.ts +0 -8
- package/dist/types-ts4.0/TooltipContainer.d.ts +0 -6
- package/dist/types-ts4.0/TooltipPrimitive.d.ts +0 -17
- package/dist/types-ts4.0/index.d.ts +0 -4
- package/dist/types-ts4.0/internal/props-for-extract-react-types.d.ts +0 -84
- package/dist/types-ts4.0/internal/shared-schedule.d.ts +0 -2
- package/dist/types-ts4.0/internal/tooltip-manager.d.ts +0 -29
- package/dist/types-ts4.0/internal/use-unique-id.d.ts +0 -1
- package/dist/types-ts4.0/types.d.ts +0 -100
- package/dist/types-ts4.0/utilities.d.ts +0 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/tooltip
|
|
2
2
|
|
|
3
|
+
## 17.6.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 17.6.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
|
|
14
|
+
|
|
3
15
|
## 17.6.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/__perf__/examples.tsx
CHANGED
|
@@ -31,9 +31,8 @@ const interactionTasks: PublicInteractionTask[] = [
|
|
|
31
31
|
container,
|
|
32
32
|
controls,
|
|
33
33
|
}: InteractionTaskArgs): Promise<void> => {
|
|
34
|
-
const element: HTMLElement | null =
|
|
35
|
-
'#tooltip-reference'
|
|
36
|
-
);
|
|
34
|
+
const element: HTMLElement | null =
|
|
35
|
+
container.querySelector('#tooltip-reference');
|
|
37
36
|
if (!element) {
|
|
38
37
|
throw new Error('no div found');
|
|
39
38
|
}
|
package/dist/cjs/Tooltip.js
CHANGED
|
@@ -58,7 +58,7 @@ var tooltipZIndex = _constants.layers.tooltip();
|
|
|
58
58
|
var analyticsAttributes = {
|
|
59
59
|
componentName: 'tooltip',
|
|
60
60
|
packageName: "@atlaskit/tooltip",
|
|
61
|
-
packageVersion: "17.6.
|
|
61
|
+
packageVersion: "17.6.2"
|
|
62
62
|
}; // Inverts motion direction
|
|
63
63
|
|
|
64
64
|
var invertedDirection = {
|
|
@@ -23,7 +23,7 @@ var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
|
|
|
23
23
|
var baseStyles = (0, _react2.css)({
|
|
24
24
|
boxSizing: 'border-box',
|
|
25
25
|
maxWidth: '240px',
|
|
26
|
-
padding:
|
|
26
|
+
padding: "var(--ds-scale-025, 2px)".concat(" ", "var(--ds-scale-075, 6px)"),
|
|
27
27
|
top: 0,
|
|
28
28
|
left: 0,
|
|
29
29
|
borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/Tooltip.js
CHANGED
|
@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
|
|
|
20
20
|
const analyticsAttributes = {
|
|
21
21
|
componentName: 'tooltip',
|
|
22
22
|
packageName: "@atlaskit/tooltip",
|
|
23
|
-
packageVersion: "17.6.
|
|
23
|
+
packageVersion: "17.6.2"
|
|
24
24
|
}; // Inverts motion direction
|
|
25
25
|
|
|
26
26
|
const invertedDirection = {
|
|
@@ -8,7 +8,7 @@ import TooltipPrimitive from './TooltipPrimitive';
|
|
|
8
8
|
const baseStyles = css({
|
|
9
9
|
boxSizing: 'border-box',
|
|
10
10
|
maxWidth: '240px',
|
|
11
|
-
padding:
|
|
11
|
+
padding: `${"var(--ds-scale-025, 2px)"} ${"var(--ds-scale-075, 6px)"}`,
|
|
12
12
|
top: 0,
|
|
13
13
|
left: 0,
|
|
14
14
|
borderRadius: `${borderRadius()}px`,
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/Tooltip.js
CHANGED
|
@@ -8,7 +8,7 @@ import TooltipPrimitive from './TooltipPrimitive';
|
|
|
8
8
|
var baseStyles = css({
|
|
9
9
|
boxSizing: 'border-box',
|
|
10
10
|
maxWidth: '240px',
|
|
11
|
-
padding:
|
|
11
|
+
padding: "var(--ds-scale-025, 2px)".concat(" ", "var(--ds-scale-075, 6px)"),
|
|
12
12
|
top: 0,
|
|
13
13
|
left: 0,
|
|
14
14
|
borderRadius: "".concat(borderRadius(), "px"),
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tooltip",
|
|
3
|
-
"version": "17.6.
|
|
3
|
+
"version": "17.6.2",
|
|
4
4
|
"description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,16 +12,10 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
15
|
-
"typesVersions": {
|
|
16
|
-
">=4.0 <4.5": {
|
|
17
|
-
"*": [
|
|
18
|
-
"dist/types-ts4.0/*"
|
|
19
|
-
]
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
15
|
"sideEffects": false,
|
|
23
16
|
"atlaskit:src": "src/index.ts",
|
|
24
17
|
"atlassian": {
|
|
18
|
+
"disableProductCI": true,
|
|
25
19
|
"team": "Design System Team",
|
|
26
20
|
"releaseModel": "scheduled",
|
|
27
21
|
"website": {
|
|
@@ -40,11 +34,11 @@
|
|
|
40
34
|
"dependencies": {
|
|
41
35
|
"@atlaskit/analytics-next": "^8.2.0",
|
|
42
36
|
"@atlaskit/ds-lib": "^2.1.0",
|
|
43
|
-
"@atlaskit/motion": "^1.
|
|
37
|
+
"@atlaskit/motion": "^1.3.0",
|
|
44
38
|
"@atlaskit/popper": "^5.0.0",
|
|
45
39
|
"@atlaskit/portal": "^4.1.0",
|
|
46
40
|
"@atlaskit/theme": "^12.2.0",
|
|
47
|
-
"@atlaskit/tokens": "^0.
|
|
41
|
+
"@atlaskit/tokens": "^0.11.0",
|
|
48
42
|
"@babel/runtime": "^7.0.0",
|
|
49
43
|
"@emotion/react": "^11.7.1",
|
|
50
44
|
"bind-event-listener": "^2.1.1",
|
|
@@ -55,7 +49,7 @@
|
|
|
55
49
|
"react-dom": "^16.8.0"
|
|
56
50
|
},
|
|
57
51
|
"devDependencies": {
|
|
58
|
-
"@atlaskit/button": "^16.
|
|
52
|
+
"@atlaskit/button": "^16.4.0",
|
|
59
53
|
"@atlaskit/docs": "*",
|
|
60
54
|
"@atlaskit/icon": "^21.11.0",
|
|
61
55
|
"@atlaskit/section-message": "^6.3.0",
|
|
@@ -86,6 +80,7 @@
|
|
|
86
80
|
"dom-events": "use-bind-event-listener",
|
|
87
81
|
"ui-components": "lite-mode",
|
|
88
82
|
"analytics": "analytics-next",
|
|
83
|
+
"design-tokens": "spacing",
|
|
89
84
|
"theming": "tokens",
|
|
90
85
|
"deprecation": "no-deprecated-imports",
|
|
91
86
|
"styling": [
|
package/report.api.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
## API Report File for "@atlaskit/tooltip"
|
|
1
|
+
## API Report File for "@atlaskit/tooltip"
|
|
2
2
|
|
|
3
|
-
> Do not edit this file.
|
|
3
|
+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
+
|
|
5
|
+
<!--
|
|
6
|
+
Generated API Report version: 2.0
|
|
7
|
+
-->
|
|
4
8
|
|
|
5
9
|
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
6
10
|
|
|
@@ -14,11 +18,14 @@ import { ReactNode } from 'react';
|
|
|
14
18
|
import { RefAttributes } from 'react';
|
|
15
19
|
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
16
20
|
|
|
17
|
-
|
|
21
|
+
// @public (undocumented)
|
|
22
|
+
export type PositionType = PositionTypeBase | 'mouse';
|
|
18
23
|
|
|
19
|
-
|
|
24
|
+
// @public (undocumented)
|
|
25
|
+
type PositionTypeBase = Placement;
|
|
20
26
|
|
|
21
|
-
|
|
27
|
+
// @public (undocumented)
|
|
28
|
+
function Tooltip({
|
|
22
29
|
children,
|
|
23
30
|
position,
|
|
24
31
|
mousePosition,
|
|
@@ -36,12 +43,15 @@ declare function Tooltip({
|
|
|
36
43
|
strategy,
|
|
37
44
|
}: TooltipProps): jsx.JSX.Element;
|
|
38
45
|
|
|
39
|
-
|
|
40
|
-
|
|
46
|
+
// @public (undocumented)
|
|
47
|
+
namespace Tooltip {
|
|
48
|
+
var // (undocumented)
|
|
49
|
+
displayName: string;
|
|
41
50
|
}
|
|
42
51
|
export default Tooltip;
|
|
43
52
|
|
|
44
|
-
|
|
53
|
+
// @public (undocumented)
|
|
54
|
+
export const TooltipPrimitive: ForwardRefExoticComponent<
|
|
45
55
|
Pick<
|
|
46
56
|
TooltipPrimitiveProps,
|
|
47
57
|
| 'style'
|
|
@@ -57,76 +67,44 @@ export declare const TooltipPrimitive: ForwardRefExoticComponent<
|
|
|
57
67
|
RefAttributes<HTMLDivElement>
|
|
58
68
|
>;
|
|
59
69
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
className?: string;
|
|
70
|
+
// @public (undocumented)
|
|
71
|
+
export interface TooltipPrimitiveProps {
|
|
72
|
+
// (undocumented)
|
|
64
73
|
children: ReactNode;
|
|
65
|
-
|
|
74
|
+
// (undocumented)
|
|
75
|
+
className?: string;
|
|
76
|
+
// (undocumented)
|
|
77
|
+
id?: string;
|
|
78
|
+
// (undocumented)
|
|
79
|
+
onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
80
|
+
// (undocumented)
|
|
81
|
+
onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
82
|
+
// (undocumented)
|
|
66
83
|
placement: PositionType;
|
|
84
|
+
// (undocumented)
|
|
67
85
|
ref: React.Ref<any>;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
86
|
+
// (undocumented)
|
|
87
|
+
style?: CSSProperties;
|
|
88
|
+
// (undocumented)
|
|
89
|
+
testId?: string;
|
|
90
|
+
// (undocumented)
|
|
91
|
+
truncate?: boolean;
|
|
71
92
|
}
|
|
72
93
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
* 2. Function which returns a `ReactNode`
|
|
78
|
-
|
|
79
|
-
* The benefit of the second approach is that it allows you to consume the `update` render prop.
|
|
80
|
-
* This `update` function can be called to manually recalculate the position of the tooltip.
|
|
81
|
-
*/
|
|
82
|
-
content: ReactNode | (({ update }: { update: () => void }) => ReactNode);
|
|
83
|
-
/**
|
|
84
|
-
* Extend `TooltipPrimitive` to create your own tooltip and pass it as component
|
|
85
|
-
*/
|
|
94
|
+
// @public (undocumented)
|
|
95
|
+
export interface TooltipProps {
|
|
96
|
+
analyticsContext?: Record<string, any>;
|
|
97
|
+
children: ReactNode | ((props: TriggerProps) => ReactNode);
|
|
86
98
|
component?: ComponentType<TooltipPrimitiveProps>;
|
|
87
|
-
|
|
88
|
-
* Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.
|
|
89
|
-
*/
|
|
99
|
+
content: ReactNode | (({ update }: { update: () => void }) => ReactNode);
|
|
90
100
|
delay?: number;
|
|
91
|
-
/**
|
|
92
|
-
* Hide the tooltip when the click event is triggered. This should be
|
|
93
|
-
* used when tooltip should be hidden if `onClick` react synthetic event
|
|
94
|
-
* is triggered, which happens after `onMouseDown` event
|
|
95
|
-
*/
|
|
96
101
|
hideTooltipOnClick?: boolean;
|
|
97
|
-
/**
|
|
98
|
-
* Hide the tooltip when the mousedown event is triggered. This should be
|
|
99
|
-
* used when tooltip should be hidden if `onMouseDown` react synthetic event
|
|
100
|
-
* is triggered, which happens before `onClick` event
|
|
101
|
-
*/
|
|
102
102
|
hideTooltipOnMouseDown?: boolean;
|
|
103
|
-
/**
|
|
104
|
-
* Where the tooltip should appear relative to the mouse pointer.
|
|
105
|
-
* Only used when the `position` prop is set to `"mouse"`.
|
|
106
|
-
* When interacting with the target element using the keyboard will use this position against the target element instead.
|
|
107
|
-
*/
|
|
108
103
|
mousePosition?: PositionTypeBase;
|
|
109
|
-
/**
|
|
110
|
-
* Function to be called when the tooltip will be shown. It is called when the
|
|
111
|
-
* tooltip begins to animate in.
|
|
112
|
-
*/
|
|
113
|
-
onShow?: (analyticsEvent: UIAnalyticsEvent) => void;
|
|
114
|
-
/**
|
|
115
|
-
* Function to be called when the tooltip will be hidden. It is called after the
|
|
116
|
-
* delay, when the tooltip begins to animate out.
|
|
117
|
-
*/
|
|
118
104
|
onHide?: (analyticsEvent: UIAnalyticsEvent) => void;
|
|
119
|
-
|
|
120
|
-
* Where the tooltip should appear relative to its target.
|
|
121
|
-
* If set to `"mouse"` the tooltip will display next to the mouse pointer instead.
|
|
122
|
-
* Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
|
|
123
|
-
*/
|
|
105
|
+
onShow?: (analyticsEvent: UIAnalyticsEvent) => void;
|
|
124
106
|
position?: PositionType;
|
|
125
|
-
|
|
126
|
-
* Replace the wrapping element. This accepts the name of a html tag which will
|
|
127
|
-
* be used to wrap the element.
|
|
128
|
-
* If you provide a component it needs to support a ref prop which is used by popper for positioning
|
|
129
|
-
*/
|
|
107
|
+
strategy?: 'absolute' | 'fixed' | undefined;
|
|
130
108
|
tag?:
|
|
131
109
|
| keyof JSX.IntrinsicElements
|
|
132
110
|
| React.ComponentType<
|
|
@@ -134,39 +112,27 @@ export declare interface TooltipProps {
|
|
|
134
112
|
ref: React.Ref<HTMLElement>;
|
|
135
113
|
}
|
|
136
114
|
>;
|
|
137
|
-
/**
|
|
138
|
-
* Show only one line of text, and truncate when too long
|
|
139
|
-
*/
|
|
140
|
-
truncate?: boolean;
|
|
141
|
-
/**
|
|
142
|
-
* Elements to be wrapped by the tooltip.
|
|
143
|
-
* It can be either a:
|
|
144
|
-
* 1. `ReactNode`
|
|
145
|
-
* 2. Function which returns a `ReactNode`
|
|
146
|
-
*/
|
|
147
|
-
children: ReactNode | ((props: TriggerProps) => ReactNode);
|
|
148
|
-
/**
|
|
149
|
-
* A `testId` prop is provided for specified elements, which is a unique
|
|
150
|
-
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
151
|
-
* serving as a hook for automated tests */
|
|
152
115
|
testId?: string;
|
|
153
|
-
|
|
154
|
-
analyticsContext?: Record<string, any>;
|
|
155
|
-
/**
|
|
156
|
-
* Used to define the strategy of popper.
|
|
157
|
-
*/
|
|
158
|
-
strategy?: 'absolute' | 'fixed' | undefined;
|
|
116
|
+
truncate?: boolean;
|
|
159
117
|
}
|
|
160
118
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
119
|
+
// @public (undocumented)
|
|
120
|
+
interface TriggerProps {
|
|
121
|
+
// (undocumented)
|
|
122
|
+
onBlur: (event: React.FocusEvent<HTMLElement>) => void;
|
|
123
|
+
// (undocumented)
|
|
165
124
|
onClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
125
|
+
// (undocumented)
|
|
166
126
|
onFocus: (event: React.FocusEvent<HTMLElement>) => void;
|
|
167
|
-
|
|
127
|
+
// (undocumented)
|
|
128
|
+
onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
|
|
129
|
+
// (undocumented)
|
|
130
|
+
onMouseOut: (event: React.MouseEvent<HTMLElement>) => void;
|
|
131
|
+
// (undocumented)
|
|
132
|
+
onMouseOver: (event: React.MouseEvent<HTMLElement>) => void;
|
|
133
|
+
// (undocumented)
|
|
168
134
|
ref: (node: HTMLElement | null) => void;
|
|
169
135
|
}
|
|
170
136
|
|
|
171
|
-
|
|
137
|
+
// (No @packageDocumentation comment for this package)
|
|
172
138
|
```
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { jsx } from '@emotion/react';
|
|
3
|
-
import { TooltipProps } from './types';
|
|
4
|
-
declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, }: TooltipProps): jsx.JSX.Element;
|
|
5
|
-
declare namespace Tooltip {
|
|
6
|
-
var displayName: string;
|
|
7
|
-
}
|
|
8
|
-
export default Tooltip;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { TooltipPrimitiveProps } from './TooltipPrimitive';
|
|
3
|
-
export interface TooltipContainerProps extends TooltipPrimitiveProps {
|
|
4
|
-
}
|
|
5
|
-
declare const TooltipContainer: import("react").ForwardRefExoticComponent<Pick<TooltipContainerProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
-
export default TooltipContainer;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { CSSProperties, ReactNode } from 'react';
|
|
3
|
-
import { PositionType } from './types';
|
|
4
|
-
export interface TooltipPrimitiveProps {
|
|
5
|
-
truncate?: boolean;
|
|
6
|
-
style?: CSSProperties;
|
|
7
|
-
className?: string;
|
|
8
|
-
children: ReactNode;
|
|
9
|
-
testId?: string;
|
|
10
|
-
placement: PositionType;
|
|
11
|
-
ref: React.Ref<any>;
|
|
12
|
-
onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
13
|
-
onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
14
|
-
id?: string;
|
|
15
|
-
}
|
|
16
|
-
declare const TooltipPrimitive: import("react").ForwardRefExoticComponent<Pick<TooltipPrimitiveProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
17
|
-
export default TooltipPrimitive;
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { ComponentType, ElementType, ReactNode } from 'react';
|
|
2
|
-
import { TooltipPrimitiveProps } from '../TooltipPrimitive';
|
|
3
|
-
import { PositionType, PositionTypeBase } from '../types';
|
|
4
|
-
declare type Props = {
|
|
5
|
-
/**
|
|
6
|
-
* The content of the tooltip. It can be either a:
|
|
7
|
-
* 1. `ReactNode`
|
|
8
|
-
* 2. Function which returns a `ReactNode`
|
|
9
|
-
|
|
10
|
-
* The benefit of the second approach is that it allows you to consume the `update` render prop.
|
|
11
|
-
* This `update` function can be called to manually recalculate the position of the tooltip.
|
|
12
|
-
*/
|
|
13
|
-
content: ReactNode | (({ update }: {
|
|
14
|
-
update: () => void;
|
|
15
|
-
}) => ReactNode);
|
|
16
|
-
/**
|
|
17
|
-
* Extend `TooltipPrimitive` to create your own tooltip and pass it as component
|
|
18
|
-
*/
|
|
19
|
-
component?: ComponentType<TooltipPrimitiveProps>;
|
|
20
|
-
/**
|
|
21
|
-
* Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.
|
|
22
|
-
*/
|
|
23
|
-
delay?: number;
|
|
24
|
-
/**
|
|
25
|
-
* Hide the tooltip when the click event is triggered. This should be
|
|
26
|
-
* used when tooltip should be hidden if `onClick` react synthetic event
|
|
27
|
-
* is triggered, which happens after `onMouseDown` event
|
|
28
|
-
*/
|
|
29
|
-
hideTooltipOnClick?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* Hide the tooltip when the mousedown event is triggered. This should be
|
|
32
|
-
* used when tooltip should be hidden if `onMouseDown` react synthetic event
|
|
33
|
-
* is triggered, which happens before `onClick` event
|
|
34
|
-
*/
|
|
35
|
-
hideTooltipOnMouseDown?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Where the tooltip should appear relative to the mouse pointer.
|
|
38
|
-
* Only used when the `position` prop is set to `"mouse"`.
|
|
39
|
-
* When interacting with the target element using the keyboard will use this position against the target element instead.
|
|
40
|
-
*/
|
|
41
|
-
mousePosition?: PositionTypeBase;
|
|
42
|
-
/**
|
|
43
|
-
* Function to be called when the tooltip will be shown. It is called when the
|
|
44
|
-
* tooltip begins to animate in.
|
|
45
|
-
*/
|
|
46
|
-
onShow?: () => void;
|
|
47
|
-
/**
|
|
48
|
-
* Function to be called when the tooltip will be hidden. It is called after the
|
|
49
|
-
* delay, when the tooltip begins to animate out.
|
|
50
|
-
*/
|
|
51
|
-
onHide?: () => void;
|
|
52
|
-
/**
|
|
53
|
-
* Where the tooltip should appear relative to its target.
|
|
54
|
-
* If set to `"mouse"` the tooltip will display next to the mouse pointer instead.
|
|
55
|
-
* Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
|
|
56
|
-
*/
|
|
57
|
-
position?: PositionType;
|
|
58
|
-
/**
|
|
59
|
-
* Replace the wrapping element. This accepts the name of a html tag which will
|
|
60
|
-
* be used to wrap the element.
|
|
61
|
-
* If you provide a component it needs to support a ref prop which is used by popper for positioning
|
|
62
|
-
* Note: actual type is not ElementType, it is either a JSX.IntrinsticElement (eg "div")
|
|
63
|
-
* or a component that supports React.AllHTMLAttributes<HTMLElement> has a ref prop (React.Ref<HTMLElement>).
|
|
64
|
-
* Using ElementType here for documentation because it is close and works with our prop extraction tool
|
|
65
|
-
*/
|
|
66
|
-
tag?: ElementType;
|
|
67
|
-
/**
|
|
68
|
-
* Show only one line of text, and truncate when too long
|
|
69
|
-
*/
|
|
70
|
-
truncate?: boolean;
|
|
71
|
-
/**
|
|
72
|
-
* Elements to be wrapped by the tooltip
|
|
73
|
-
*/
|
|
74
|
-
children: ReactNode;
|
|
75
|
-
/**
|
|
76
|
-
* A `testId` prop is provided for specified elements, which is a unique
|
|
77
|
-
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
78
|
-
* serving as a hook for automated tests */
|
|
79
|
-
testId?: string;
|
|
80
|
-
/** Analytics context metadata */
|
|
81
|
-
analyticsContext?: Record<string, any>;
|
|
82
|
-
};
|
|
83
|
-
export default function PropsHack(props: Props): null;
|
|
84
|
-
export {};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { FakeMouseElement } from '../utilities';
|
|
2
|
-
export declare type Source = {
|
|
3
|
-
type: 'mouse';
|
|
4
|
-
mouse: FakeMouseElement;
|
|
5
|
-
} | {
|
|
6
|
-
type: 'keyboard';
|
|
7
|
-
};
|
|
8
|
-
export declare type Entry = {
|
|
9
|
-
source: Source;
|
|
10
|
-
show: (value: {
|
|
11
|
-
isImmediate: boolean;
|
|
12
|
-
}) => void;
|
|
13
|
-
hide: (value: {
|
|
14
|
-
isImmediate: boolean;
|
|
15
|
-
}) => void;
|
|
16
|
-
delay: number;
|
|
17
|
-
done: () => void;
|
|
18
|
-
};
|
|
19
|
-
export declare type API = {
|
|
20
|
-
isActive: () => boolean;
|
|
21
|
-
mousePosition: FakeMouseElement | null;
|
|
22
|
-
requestHide: (value: {
|
|
23
|
-
isImmediate: boolean;
|
|
24
|
-
}) => void;
|
|
25
|
-
finishHideAnimation: () => void;
|
|
26
|
-
keep: () => void;
|
|
27
|
-
abort: () => void;
|
|
28
|
-
};
|
|
29
|
-
export declare function show(entry: Entry): API;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export default function useUniqueId(prefix: string, shouldRenderId: boolean): string | undefined;
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { ComponentType, ReactNode } from 'react';
|
|
2
|
-
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
|
-
import { Placement } from '@atlaskit/popper';
|
|
4
|
-
import { TooltipPrimitiveProps } from './TooltipPrimitive';
|
|
5
|
-
export declare type PositionTypeBase = Placement;
|
|
6
|
-
export declare type PositionType = PositionTypeBase | 'mouse';
|
|
7
|
-
export interface TriggerProps {
|
|
8
|
-
onMouseOver: (event: React.MouseEvent<HTMLElement>) => void;
|
|
9
|
-
onMouseOut: (event: React.MouseEvent<HTMLElement>) => void;
|
|
10
|
-
onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
|
|
11
|
-
onClick: (event: React.MouseEvent<HTMLElement>) => void;
|
|
12
|
-
onFocus: (event: React.FocusEvent<HTMLElement>) => void;
|
|
13
|
-
onBlur: (event: React.FocusEvent<HTMLElement>) => void;
|
|
14
|
-
ref: (node: HTMLElement | null) => void;
|
|
15
|
-
}
|
|
16
|
-
export interface TooltipProps {
|
|
17
|
-
/**
|
|
18
|
-
* The content of the tooltip. It can be either a:
|
|
19
|
-
* 1. `ReactNode`
|
|
20
|
-
* 2. Function which returns a `ReactNode`
|
|
21
|
-
|
|
22
|
-
* The benefit of the second approach is that it allows you to consume the `update` render prop.
|
|
23
|
-
* This `update` function can be called to manually recalculate the position of the tooltip.
|
|
24
|
-
*/
|
|
25
|
-
content: ReactNode | (({ update }: {
|
|
26
|
-
update: () => void;
|
|
27
|
-
}) => ReactNode);
|
|
28
|
-
/**
|
|
29
|
-
* Extend `TooltipPrimitive` to create your own tooltip and pass it as component
|
|
30
|
-
*/
|
|
31
|
-
component?: ComponentType<TooltipPrimitiveProps>;
|
|
32
|
-
/**
|
|
33
|
-
* Time in milliseconds to wait before showing and hiding the tooltip. Defaults to 300.
|
|
34
|
-
*/
|
|
35
|
-
delay?: number;
|
|
36
|
-
/**
|
|
37
|
-
* Hide the tooltip when the click event is triggered. This should be
|
|
38
|
-
* used when tooltip should be hidden if `onClick` react synthetic event
|
|
39
|
-
* is triggered, which happens after `onMouseDown` event
|
|
40
|
-
*/
|
|
41
|
-
hideTooltipOnClick?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Hide the tooltip when the mousedown event is triggered. This should be
|
|
44
|
-
* used when tooltip should be hidden if `onMouseDown` react synthetic event
|
|
45
|
-
* is triggered, which happens before `onClick` event
|
|
46
|
-
*/
|
|
47
|
-
hideTooltipOnMouseDown?: boolean;
|
|
48
|
-
/**
|
|
49
|
-
* Where the tooltip should appear relative to the mouse pointer.
|
|
50
|
-
* Only used when the `position` prop is set to `"mouse"`.
|
|
51
|
-
* When interacting with the target element using the keyboard will use this position against the target element instead.
|
|
52
|
-
*/
|
|
53
|
-
mousePosition?: PositionTypeBase;
|
|
54
|
-
/**
|
|
55
|
-
* Function to be called when the tooltip will be shown. It is called when the
|
|
56
|
-
* tooltip begins to animate in.
|
|
57
|
-
*/
|
|
58
|
-
onShow?: (analyticsEvent: UIAnalyticsEvent) => void;
|
|
59
|
-
/**
|
|
60
|
-
* Function to be called when the tooltip will be hidden. It is called after the
|
|
61
|
-
* delay, when the tooltip begins to animate out.
|
|
62
|
-
*/
|
|
63
|
-
onHide?: (analyticsEvent: UIAnalyticsEvent) => void;
|
|
64
|
-
/**
|
|
65
|
-
* Where the tooltip should appear relative to its target.
|
|
66
|
-
* If set to `"mouse"` the tooltip will display next to the mouse pointer instead.
|
|
67
|
-
* Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
|
|
68
|
-
*/
|
|
69
|
-
position?: PositionType;
|
|
70
|
-
/**
|
|
71
|
-
* Replace the wrapping element. This accepts the name of a html tag which will
|
|
72
|
-
* be used to wrap the element.
|
|
73
|
-
* If you provide a component it needs to support a ref prop which is used by popper for positioning
|
|
74
|
-
*/
|
|
75
|
-
tag?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & {
|
|
76
|
-
ref: React.Ref<HTMLElement>;
|
|
77
|
-
}>;
|
|
78
|
-
/**
|
|
79
|
-
* Show only one line of text, and truncate when too long
|
|
80
|
-
*/
|
|
81
|
-
truncate?: boolean;
|
|
82
|
-
/**
|
|
83
|
-
* Elements to be wrapped by the tooltip.
|
|
84
|
-
* It can be either a:
|
|
85
|
-
* 1. `ReactNode`
|
|
86
|
-
* 2. Function which returns a `ReactNode`
|
|
87
|
-
*/
|
|
88
|
-
children: ReactNode | ((props: TriggerProps) => ReactNode);
|
|
89
|
-
/**
|
|
90
|
-
* A `testId` prop is provided for specified elements, which is a unique
|
|
91
|
-
* string that appears as a data attribute `data-testid` in the rendered code,
|
|
92
|
-
* serving as a hook for automated tests */
|
|
93
|
-
testId?: string;
|
|
94
|
-
/** Analytics context metadata */
|
|
95
|
-
analyticsContext?: Record<string, any>;
|
|
96
|
-
/**
|
|
97
|
-
* Used to define the strategy of popper.
|
|
98
|
-
*/
|
|
99
|
-
strategy?: 'absolute' | 'fixed' | undefined;
|
|
100
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export interface FakeMouseElement {
|
|
2
|
-
getBoundingClientRect: () => {
|
|
3
|
-
top: number;
|
|
4
|
-
left: number;
|
|
5
|
-
bottom: number;
|
|
6
|
-
right: number;
|
|
7
|
-
width: number;
|
|
8
|
-
height: number;
|
|
9
|
-
};
|
|
10
|
-
clientWidth: number;
|
|
11
|
-
clientHeight: number;
|
|
12
|
-
}
|
|
13
|
-
export declare function getMousePosition(mouseCoordinates: {
|
|
14
|
-
top: number;
|
|
15
|
-
left: number;
|
|
16
|
-
}): FakeMouseElement;
|