@atlaskit/tooltip 17.6.6 → 17.6.7
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 +6 -0
- package/dist/cjs/Tooltip.js +70 -116
- package/dist/cjs/TooltipContainer.js +13 -19
- package/dist/cjs/TooltipPrimitive.js +7 -17
- package/dist/cjs/index.js +0 -3
- package/dist/cjs/internal/props-for-extract-react-types.js +1 -1
- package/dist/cjs/internal/shared-schedule.js +0 -2
- package/dist/cjs/internal/tooltip-manager.js +14 -36
- package/dist/cjs/internal/use-unique-id.js +0 -2
- package/dist/cjs/utilities.js +0 -3
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/Tooltip.js +40 -56
- package/dist/es2019/TooltipContainer.js +4 -3
- package/dist/es2019/TooltipPrimitive.js +2 -1
- package/dist/es2019/internal/props-for-extract-react-types.js +1 -0
- package/dist/es2019/internal/tooltip-manager.js +17 -33
- package/dist/es2019/utilities.js +0 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/Tooltip.js +71 -93
- package/dist/esm/TooltipContainer.js +12 -11
- package/dist/esm/TooltipPrimitive.js +7 -12
- package/dist/esm/internal/props-for-extract-react-types.js +1 -0
- package/dist/esm/internal/tooltip-manager.js +17 -34
- package/dist/esm/utilities.js +0 -2
- package/dist/esm/version.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/tooltip
|
|
2
2
|
|
|
3
|
+
## 17.6.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
|
|
8
|
+
|
|
3
9
|
## 17.6.6
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/cjs/Tooltip.js
CHANGED
|
@@ -1,110 +1,84 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.default = void 0;
|
|
11
|
-
|
|
12
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
|
-
|
|
18
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
13
|
var _react2 = require("@emotion/react");
|
|
21
|
-
|
|
22
14
|
var _bindEventListener = require("bind-event-listener");
|
|
23
|
-
|
|
24
15
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
25
|
-
|
|
26
16
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
27
|
-
|
|
28
17
|
var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/use-close-on-escape-press"));
|
|
29
|
-
|
|
30
18
|
var _motion = require("@atlaskit/motion");
|
|
31
|
-
|
|
32
19
|
var _durations = require("@atlaskit/motion/durations");
|
|
33
|
-
|
|
34
20
|
var _popper = require("@atlaskit/popper");
|
|
35
|
-
|
|
36
21
|
var _portal = _interopRequireDefault(require("@atlaskit/portal"));
|
|
37
|
-
|
|
38
22
|
var _constants = require("@atlaskit/theme/constants");
|
|
39
|
-
|
|
40
23
|
var _tooltipManager = require("./internal/tooltip-manager");
|
|
41
|
-
|
|
42
24
|
var _useUniqueId = _interopRequireDefault(require("./internal/use-unique-id"));
|
|
43
|
-
|
|
44
25
|
var _TooltipContainer = _interopRequireDefault(require("./TooltipContainer"));
|
|
45
|
-
|
|
46
26
|
var _utilities = require("./utilities");
|
|
47
|
-
|
|
48
27
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
49
|
-
|
|
50
28
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
51
|
-
|
|
52
29
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
53
|
-
|
|
54
30
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
55
|
-
|
|
56
31
|
var tooltipZIndex = _constants.layers.tooltip();
|
|
57
|
-
|
|
58
32
|
var analyticsAttributes = {
|
|
59
33
|
componentName: 'tooltip',
|
|
60
34
|
packageName: "@atlaskit/tooltip",
|
|
61
|
-
packageVersion: "17.6.
|
|
62
|
-
};
|
|
35
|
+
packageVersion: "17.6.7"
|
|
36
|
+
};
|
|
63
37
|
|
|
38
|
+
// Inverts motion direction
|
|
64
39
|
var invertedDirection = {
|
|
65
40
|
top: 'bottom',
|
|
66
41
|
bottom: 'top',
|
|
67
42
|
left: 'right',
|
|
68
43
|
right: 'left'
|
|
69
44
|
};
|
|
45
|
+
|
|
70
46
|
/**
|
|
71
47
|
* Converts a Popper placement to it's general direction.
|
|
72
48
|
*
|
|
73
49
|
* @param position - Popper Placement value, e.g. 'top-start'
|
|
74
50
|
* @returns Popper Direction, e.g. 'top'
|
|
75
51
|
*/
|
|
76
|
-
|
|
77
52
|
var getDirectionFromPlacement = function getDirectionFromPlacement(placement) {
|
|
78
53
|
return placement.split('-')[0];
|
|
79
54
|
};
|
|
80
|
-
|
|
81
55
|
function Tooltip(_ref) {
|
|
82
56
|
var children = _ref.children,
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
57
|
+
_ref$position = _ref.position,
|
|
58
|
+
position = _ref$position === void 0 ? 'bottom' : _ref$position,
|
|
59
|
+
_ref$mousePosition = _ref.mousePosition,
|
|
60
|
+
mousePosition = _ref$mousePosition === void 0 ? 'bottom' : _ref$mousePosition,
|
|
61
|
+
content = _ref.content,
|
|
62
|
+
_ref$truncate = _ref.truncate,
|
|
63
|
+
truncate = _ref$truncate === void 0 ? false : _ref$truncate,
|
|
64
|
+
_ref$component = _ref.component,
|
|
65
|
+
Container = _ref$component === void 0 ? _TooltipContainer.default : _ref$component,
|
|
66
|
+
_ref$tag = _ref.tag,
|
|
67
|
+
TargetContainer = _ref$tag === void 0 ? 'div' : _ref$tag,
|
|
68
|
+
testId = _ref.testId,
|
|
69
|
+
_ref$delay = _ref.delay,
|
|
70
|
+
delay = _ref$delay === void 0 ? 300 : _ref$delay,
|
|
71
|
+
_ref$onShow = _ref.onShow,
|
|
72
|
+
onShow = _ref$onShow === void 0 ? _noop.default : _ref$onShow,
|
|
73
|
+
_ref$onHide = _ref.onHide,
|
|
74
|
+
onHide = _ref$onHide === void 0 ? _noop.default : _ref$onHide,
|
|
75
|
+
_ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
|
|
76
|
+
hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? false : _ref$hideTooltipOnCli,
|
|
77
|
+
_ref$hideTooltipOnMou = _ref.hideTooltipOnMouseDown,
|
|
78
|
+
hideTooltipOnMouseDown = _ref$hideTooltipOnMou === void 0 ? false : _ref$hideTooltipOnMou,
|
|
79
|
+
analyticsContext = _ref.analyticsContext,
|
|
80
|
+
_ref$strategy = _ref.strategy,
|
|
81
|
+
strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy;
|
|
108
82
|
var tooltipPosition = position === 'mouse' ? mousePosition : position;
|
|
109
83
|
var onShowHandler = (0, _analyticsNext.usePlatformLeafSyntheticEventHandler)(_objectSpread({
|
|
110
84
|
fn: onShow,
|
|
@@ -117,30 +91,28 @@ function Tooltip(_ref) {
|
|
|
117
91
|
analyticsData: analyticsContext
|
|
118
92
|
}, analyticsAttributes));
|
|
119
93
|
var apiRef = (0, _react.useRef)(null);
|
|
120
|
-
|
|
121
94
|
var _useState = (0, _react.useState)('hide'),
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
95
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
96
|
+
state = _useState2[0],
|
|
97
|
+
setState = _useState2[1];
|
|
126
98
|
var targetRef = (0, _react.useRef)(null);
|
|
127
99
|
var containerRef = (0, _react.useRef)(null);
|
|
128
100
|
var setRef = (0, _react.useCallback)(function (node) {
|
|
129
101
|
if (!node) {
|
|
130
102
|
return;
|
|
131
103
|
}
|
|
132
|
-
|
|
133
104
|
if (typeof children === 'function') {
|
|
134
105
|
// @ts-ignore - React Ref typing is too strict for this use case
|
|
135
106
|
targetRef.current = node;
|
|
136
107
|
} else {
|
|
137
108
|
// @ts-ignore - React Ref typing is too strict for this use case
|
|
138
|
-
containerRef.current = node;
|
|
139
|
-
|
|
109
|
+
containerRef.current = node;
|
|
110
|
+
// @ts-ignore - React Ref typing is too strict for this use case
|
|
140
111
|
targetRef.current = node.firstChild;
|
|
141
112
|
}
|
|
142
|
-
}, [children]);
|
|
113
|
+
}, [children]);
|
|
143
114
|
|
|
115
|
+
// Putting a few things into refs so that we don't have to break memoization
|
|
144
116
|
var lastState = (0, _react.useRef)(state);
|
|
145
117
|
var lastDelay = (0, _react.useRef)(delay);
|
|
146
118
|
var lastHandlers = (0, _react.useRef)({
|
|
@@ -164,32 +136,28 @@ function Tooltip(_ref) {
|
|
|
164
136
|
var done = (0, _react.useCallback)(function () {
|
|
165
137
|
if (!apiRef.current) {
|
|
166
138
|
return;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
|
|
139
|
+
}
|
|
140
|
+
// Only call onHideHandler if we have called onShowHandler
|
|
170
141
|
if (hasCalledShowHandler.current) {
|
|
171
142
|
lastHandlers.current.onHideHandler();
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
143
|
+
}
|
|
144
|
+
// @ts-ignore
|
|
145
|
+
apiRef.current = null;
|
|
146
|
+
// @ts-ignore
|
|
147
|
+
hasCalledShowHandler.current = false;
|
|
148
|
+
// just in case
|
|
179
149
|
setState('hide');
|
|
180
150
|
}, []);
|
|
181
151
|
var abort = (0, _react.useCallback)(function () {
|
|
182
152
|
if (!apiRef.current) {
|
|
183
153
|
return;
|
|
184
154
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
155
|
+
apiRef.current.abort();
|
|
156
|
+
// Only call onHideHandler if we have called onShowHandler
|
|
188
157
|
if (hasCalledShowHandler.current) {
|
|
189
158
|
lastHandlers.current.onHideHandler();
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
|
|
159
|
+
}
|
|
160
|
+
// @ts-ignore
|
|
193
161
|
apiRef.current = null;
|
|
194
162
|
}, []);
|
|
195
163
|
(0, _react.useEffect)(function mount() {
|
|
@@ -202,31 +170,27 @@ function Tooltip(_ref) {
|
|
|
202
170
|
var showTooltip = (0, _react.useCallback)(function (source) {
|
|
203
171
|
if (apiRef.current && !apiRef.current.isActive()) {
|
|
204
172
|
abort();
|
|
205
|
-
}
|
|
206
|
-
|
|
173
|
+
}
|
|
207
174
|
|
|
175
|
+
// Tell the tooltip to keep showing
|
|
208
176
|
if (apiRef.current && apiRef.current.isActive()) {
|
|
209
177
|
apiRef.current.keep();
|
|
210
178
|
return;
|
|
211
179
|
}
|
|
212
|
-
|
|
213
180
|
var entry = {
|
|
214
181
|
source: source,
|
|
215
182
|
delay: lastDelay.current,
|
|
216
183
|
show: function show(_ref2) {
|
|
217
184
|
var isImmediate = _ref2.isImmediate;
|
|
218
|
-
|
|
219
185
|
// Call the onShow handler if it hasn't been called yet
|
|
220
186
|
if (!hasCalledShowHandler.current) {
|
|
221
187
|
hasCalledShowHandler.current = true;
|
|
222
188
|
lastHandlers.current.onShowHandler();
|
|
223
189
|
}
|
|
224
|
-
|
|
225
190
|
setState(isImmediate ? 'show-immediate' : 'fade-in');
|
|
226
191
|
},
|
|
227
192
|
hide: function hide(_ref3) {
|
|
228
193
|
var isImmediate = _ref3.isImmediate;
|
|
229
|
-
|
|
230
194
|
if (isImmediate) {
|
|
231
195
|
setState('hide');
|
|
232
196
|
} else {
|
|
@@ -240,7 +204,6 @@ function Tooltip(_ref) {
|
|
|
240
204
|
}, [abort, done, start]);
|
|
241
205
|
var hideTooltipOnEsc = (0, _react.useCallback)(function () {
|
|
242
206
|
var _apiRef$current;
|
|
243
|
-
|
|
244
207
|
(_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.requestHide({
|
|
245
208
|
isImmediate: true
|
|
246
209
|
});
|
|
@@ -253,11 +216,9 @@ function Tooltip(_ref) {
|
|
|
253
216
|
if (state === 'hide') {
|
|
254
217
|
return _noop.default;
|
|
255
218
|
}
|
|
256
|
-
|
|
257
219
|
if (state === 'before-fade-out') {
|
|
258
220
|
setState('fade-out');
|
|
259
221
|
}
|
|
260
|
-
|
|
261
222
|
var unbind = (0, _bindEventListener.bind)(window, {
|
|
262
223
|
type: 'scroll',
|
|
263
224
|
listener: function listener() {
|
|
@@ -288,23 +249,23 @@ function Tooltip(_ref) {
|
|
|
288
249
|
isImmediate: true
|
|
289
250
|
});
|
|
290
251
|
}
|
|
291
|
-
}, [hideTooltipOnClick]);
|
|
252
|
+
}, [hideTooltipOnClick]);
|
|
253
|
+
|
|
254
|
+
// Ideally we would be using onMouseEnter here, but
|
|
292
255
|
// because we are binding the event to the target parent
|
|
293
256
|
// we need to listen for the mouseover of all sub elements
|
|
294
257
|
// This means when moving along a tooltip we are quickly toggling
|
|
295
258
|
// between api.requestHide and api.keep. This it not ideal
|
|
296
|
-
|
|
297
259
|
var onMouseOver = (0, _react.useCallback)(function (event) {
|
|
298
260
|
// Ignoring events from the container ref
|
|
299
261
|
if (containerRef.current && event.target === containerRef.current) {
|
|
300
262
|
return;
|
|
301
|
-
}
|
|
302
|
-
|
|
263
|
+
}
|
|
303
264
|
|
|
265
|
+
// Using prevent default as a signal that parent tooltips
|
|
304
266
|
if (event.defaultPrevented) {
|
|
305
267
|
return;
|
|
306
268
|
}
|
|
307
|
-
|
|
308
269
|
event.preventDefault();
|
|
309
270
|
var source = position === 'mouse' ? {
|
|
310
271
|
type: 'mouse',
|
|
@@ -317,25 +278,24 @@ function Tooltip(_ref) {
|
|
|
317
278
|
type: 'keyboard'
|
|
318
279
|
};
|
|
319
280
|
showTooltip(source);
|
|
320
|
-
}, [position, showTooltip]);
|
|
281
|
+
}, [position, showTooltip]);
|
|
282
|
+
|
|
283
|
+
// Ideally we would be using onMouseEnter here, but
|
|
321
284
|
// because we are binding the event to the target parent
|
|
322
285
|
// we need to listen for the mouseout of all sub elements
|
|
323
286
|
// This means when moving along a tooltip we are quickly toggling
|
|
324
287
|
// between api.requestHide and api.keep. This it not ideal
|
|
325
|
-
|
|
326
288
|
var onMouseOut = (0, _react.useCallback)(function (event) {
|
|
327
289
|
// Ignoring events from the container ref
|
|
328
290
|
if (containerRef.current && event.target === containerRef.current) {
|
|
329
291
|
return;
|
|
330
|
-
}
|
|
331
|
-
|
|
292
|
+
}
|
|
332
293
|
|
|
294
|
+
// Using prevent default as a signal that parent tooltips
|
|
333
295
|
if (event.defaultPrevented) {
|
|
334
296
|
return;
|
|
335
297
|
}
|
|
336
|
-
|
|
337
298
|
event.preventDefault();
|
|
338
|
-
|
|
339
299
|
if (apiRef.current) {
|
|
340
300
|
apiRef.current.requestHide({
|
|
341
301
|
isImmediate: false
|
|
@@ -344,7 +304,6 @@ function Tooltip(_ref) {
|
|
|
344
304
|
}, []);
|
|
345
305
|
var onMouseMove = position === 'mouse' ? function (event) {
|
|
346
306
|
var _apiRef$current2;
|
|
347
|
-
|
|
348
307
|
if ((_apiRef$current2 = apiRef.current) !== null && _apiRef$current2 !== void 0 && _apiRef$current2.isActive()) {
|
|
349
308
|
apiRef.current.mousePosition = (0, _utilities.getMousePosition)({
|
|
350
309
|
left: event.clientX,
|
|
@@ -376,24 +335,20 @@ function Tooltip(_ref) {
|
|
|
376
335
|
// @ts-ignore: refs are writeable
|
|
377
336
|
apiRef.current.finishHideAnimation();
|
|
378
337
|
}
|
|
379
|
-
}, []);
|
|
338
|
+
}, []);
|
|
380
339
|
|
|
340
|
+
// Doing a cast because typescript is struggling to narrow the type
|
|
381
341
|
var CastTargetContainer = TargetContainer;
|
|
382
342
|
var shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
|
|
383
343
|
var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
|
|
384
|
-
|
|
385
344
|
var getReferenceElement = function getReferenceElement() {
|
|
386
345
|
var _apiRef$current3;
|
|
387
|
-
|
|
388
346
|
if (position === 'mouse' && (_apiRef$current3 = apiRef.current) !== null && _apiRef$current3 !== void 0 && _apiRef$current3.mousePosition) {
|
|
389
347
|
var _apiRef$current4;
|
|
390
|
-
|
|
391
348
|
return (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.mousePosition;
|
|
392
349
|
}
|
|
393
|
-
|
|
394
350
|
return targetRef.current || undefined;
|
|
395
351
|
};
|
|
396
|
-
|
|
397
352
|
var tooltipId = (0, _useUniqueId.default)('tooltip', shouldRenderTooltipContainer);
|
|
398
353
|
var tooltipTriggerProps = {
|
|
399
354
|
onMouseOver: onMouseOver,
|
|
@@ -405,13 +360,13 @@ function Tooltip(_ref) {
|
|
|
405
360
|
onBlur: onBlur,
|
|
406
361
|
ref: setRef,
|
|
407
362
|
'aria-describedby': tooltipId
|
|
408
|
-
};
|
|
363
|
+
};
|
|
409
364
|
|
|
365
|
+
// Don't set `data-testid` unless it's defined, as it's not in the interface.
|
|
410
366
|
if (testId) {
|
|
411
367
|
// @ts-expect-error - Adding `data-testid` to the TriggerProps interface breaks Buttons.
|
|
412
368
|
tooltipTriggerProps['data-testid'] = "".concat(testId, "--container");
|
|
413
369
|
}
|
|
414
|
-
|
|
415
370
|
return (0, _react2.jsx)(_react.default.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
|
|
416
371
|
role: "presentation"
|
|
417
372
|
}), children), shouldRenderTooltipContainer ? (0, _react2.jsx)(_portal.default, {
|
|
@@ -422,9 +377,9 @@ function Tooltip(_ref) {
|
|
|
422
377
|
strategy: strategy
|
|
423
378
|
}, function (_ref4) {
|
|
424
379
|
var ref = _ref4.ref,
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
380
|
+
style = _ref4.style,
|
|
381
|
+
update = _ref4.update,
|
|
382
|
+
placement = _ref4.placement;
|
|
428
383
|
// Invert the entrance and exit directions.
|
|
429
384
|
// E.g. a tooltip's position is on the 'right', it should enter from and exit to the 'left'
|
|
430
385
|
// This gives the effect the tooltip is appearing from the target
|
|
@@ -439,14 +394,14 @@ function Tooltip(_ref) {
|
|
|
439
394
|
duration: state === 'show-immediate' ? 0 : _durations.mediumDurationMs
|
|
440
395
|
}, function (_ref5) {
|
|
441
396
|
var className = _ref5.className;
|
|
442
|
-
return (
|
|
397
|
+
return (
|
|
398
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
443
399
|
(0, _react2.jsx)(Container, {
|
|
444
400
|
ref: ref
|
|
445
401
|
/**
|
|
446
402
|
* "Tooltip" classname is a hook used by tests to manipulate
|
|
447
403
|
* and hide tooltips, including in VR snapshots
|
|
448
|
-
|
|
449
|
-
,
|
|
404
|
+
**/,
|
|
450
405
|
className: "Tooltip ".concat(className),
|
|
451
406
|
style: style,
|
|
452
407
|
truncate: truncate,
|
|
@@ -462,7 +417,6 @@ function Tooltip(_ref) {
|
|
|
462
417
|
}));
|
|
463
418
|
})) : null);
|
|
464
419
|
}
|
|
465
|
-
|
|
466
420
|
Tooltip.displayName = 'Tooltip';
|
|
467
421
|
var _default = Tooltip;
|
|
468
422
|
exports.default = _default;
|
|
@@ -1,33 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _react = require("react");
|
|
11
|
-
|
|
12
9
|
var _react2 = require("@emotion/react");
|
|
13
|
-
|
|
14
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
15
|
-
|
|
16
11
|
var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
|
|
17
|
-
|
|
18
12
|
var _constants = require("@atlaskit/theme/constants");
|
|
19
|
-
|
|
20
13
|
var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
|
|
21
|
-
|
|
22
14
|
/** @jsx jsx */
|
|
15
|
+
|
|
23
16
|
var baseStyles = (0, _react2.css)({
|
|
24
17
|
boxSizing: 'border-box',
|
|
25
18
|
maxWidth: '240px',
|
|
26
|
-
padding: "var(--ds-
|
|
19
|
+
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
|
|
27
20
|
top: 0,
|
|
28
21
|
left: 0,
|
|
29
22
|
borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
|
|
30
|
-
fontSize:
|
|
23
|
+
fontSize: "var(--ds-font-size-075, 12px)",
|
|
31
24
|
lineHeight: 1.3,
|
|
32
25
|
overflowWrap: 'break-word',
|
|
33
26
|
wordWrap: 'break-word'
|
|
@@ -48,17 +41,18 @@ var darkStyles = (0, _react2.css)({
|
|
|
48
41
|
});
|
|
49
42
|
var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipContainer(_ref, ref) {
|
|
50
43
|
var style = _ref.style,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
44
|
+
className = _ref.className,
|
|
45
|
+
children = _ref.children,
|
|
46
|
+
truncate = _ref.truncate,
|
|
47
|
+
placement = _ref.placement,
|
|
48
|
+
testId = _ref.testId,
|
|
49
|
+
onMouseOut = _ref.onMouseOut,
|
|
50
|
+
onMouseOver = _ref.onMouseOver,
|
|
51
|
+
id = _ref.id;
|
|
59
52
|
return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
|
|
60
53
|
var mode = _ref2.mode;
|
|
61
|
-
return (
|
|
54
|
+
return (
|
|
55
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
62
56
|
(0, _react2.jsx)(_TooltipPrimitive.default, {
|
|
63
57
|
ref: ref,
|
|
64
58
|
style: style,
|
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _react2 = require("@emotion/react");
|
|
15
|
-
|
|
16
11
|
var _constants = require("@atlaskit/theme/constants");
|
|
17
|
-
|
|
18
12
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
-
|
|
20
13
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
-
|
|
22
14
|
var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
|
|
23
15
|
var primitiveStyles = (0, _react2.css)({
|
|
24
16
|
zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
|
|
@@ -26,16 +18,14 @@ var primitiveStyles = (0, _react2.css)({
|
|
|
26
18
|
});
|
|
27
19
|
var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimitive(_ref, ref) {
|
|
28
20
|
var style = _ref.style,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
21
|
+
className = _ref.className,
|
|
22
|
+
children = _ref.children,
|
|
23
|
+
placement = _ref.placement,
|
|
24
|
+
testId = _ref.testId,
|
|
25
|
+
onMouseOut = _ref.onMouseOut,
|
|
26
|
+
onMouseOver = _ref.onMouseOver,
|
|
27
|
+
id = _ref.id;
|
|
37
28
|
var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, (0, _defineProperty2.default)({}, VAR_PRIMITIVE_ZINDEX, _constants.layers.tooltip()));
|
|
38
|
-
|
|
39
29
|
return (0, _react2.jsx)("div", {
|
|
40
30
|
ref: ref,
|
|
41
31
|
style: styleWithZIndex,
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "default", {
|
|
|
17
16
|
return _Tooltip.default;
|
|
18
17
|
}
|
|
19
18
|
});
|
|
20
|
-
|
|
21
19
|
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
|
|
22
|
-
|
|
23
20
|
var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
|
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = PropsHack;
|
|
7
|
-
|
|
8
7
|
/* Note: this file is a workaround because extract-react-types cannot correctly process the "tag" prop
|
|
9
8
|
It is a copy paste of the `TooltipProps` from `types.ts` except for the `tag` prop which is different */
|
|
9
|
+
|
|
10
10
|
function PropsHack(props) {
|
|
11
11
|
return null;
|
|
12
12
|
}
|
|
@@ -6,14 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.clearScheduled = clearScheduled;
|
|
7
7
|
exports.scheduleTimeout = scheduleTimeout;
|
|
8
8
|
var delayId = null;
|
|
9
|
-
|
|
10
9
|
function clearScheduled() {
|
|
11
10
|
if (delayId != null) {
|
|
12
11
|
window.clearTimeout(delayId);
|
|
13
12
|
delayId = null;
|
|
14
13
|
}
|
|
15
14
|
}
|
|
16
|
-
|
|
17
15
|
function scheduleTimeout(fn, delay) {
|
|
18
16
|
clearScheduled();
|
|
19
17
|
delayId = window.setTimeout(function () {
|