@atlaskit/tooltip 18.7.2 → 18.8.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/CHANGELOG.md +15 -0
- package/Tooltip/package.json +5 -5
- package/TooltipContainer/package.json +5 -5
- package/TooltipPrimitive/package.json +5 -5
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/{TooltipContainer.js → tooltip-container.js} +12 -7
- package/dist/cjs/{TooltipPrimitive.js → tooltip-primitive.js} +4 -0
- package/dist/cjs/{Tooltip.js → tooltip.js} +13 -4
- package/dist/es2019/index.js +2 -2
- package/dist/es2019/{TooltipContainer.js → tooltip-container.js} +11 -6
- package/dist/es2019/{TooltipPrimitive.js → tooltip-primitive.js} +4 -0
- package/dist/es2019/{Tooltip.js → tooltip.js} +11 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/{TooltipContainer.js → tooltip-container.js} +11 -6
- package/dist/esm/{TooltipPrimitive.js → tooltip-primitive.js} +4 -0
- package/dist/esm/{Tooltip.js → tooltip.js} +11 -2
- package/dist/types/index.d.ts +3 -3
- package/dist/{types-ts4.5/TooltipContainer.d.ts → types/tooltip-container.d.ts} +5 -1
- package/dist/{types-ts4.5/TooltipPrimitive.d.ts → types/tooltip-primitive.d.ts} +3 -0
- package/dist/types/{Tooltip.d.ts → tooltip.d.ts} +5 -0
- package/dist/types/types.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +3 -3
- package/dist/{types/TooltipContainer.d.ts → types-ts4.5/tooltip-container.d.ts} +5 -1
- package/dist/{types/TooltipPrimitive.d.ts → types-ts4.5/tooltip-primitive.d.ts} +3 -0
- package/dist/types-ts4.5/{Tooltip.d.ts → tooltip.d.ts} +5 -0
- package/dist/types-ts4.5/types.d.ts +1 -1
- package/package.json +9 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/tooltip
|
|
2
2
|
|
|
3
|
+
## 18.8.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#148344](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148344)
|
|
8
|
+
[`025feb57ca48b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/025feb57ca48b) -
|
|
9
|
+
Adds usage of the useNotifyLayerObserver hook from the layering package. The hook is behind a
|
|
10
|
+
feature flag.
|
|
11
|
+
|
|
12
|
+
## 18.7.3
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 18.7.2
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/Tooltip/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tooltip/Tooltip",
|
|
3
|
-
"main": "../dist/cjs/
|
|
4
|
-
"module": "../dist/esm/
|
|
5
|
-
"module:es2019": "../dist/es2019/
|
|
3
|
+
"main": "../dist/cjs/tooltip.js",
|
|
4
|
+
"module": "../dist/esm/tooltip.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/tooltip.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
|
-
"types": "../dist/types/
|
|
7
|
+
"types": "../dist/types/tooltip.d.ts",
|
|
8
8
|
"typesVersions": {
|
|
9
9
|
">=4.5 <5.4": {
|
|
10
10
|
"*": [
|
|
11
|
-
"../dist/types-ts4.5/
|
|
11
|
+
"../dist/types-ts4.5/tooltip.d.ts"
|
|
12
12
|
]
|
|
13
13
|
}
|
|
14
14
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tooltip/TooltipContainer",
|
|
3
|
-
"main": "../dist/cjs/
|
|
4
|
-
"module": "../dist/esm/
|
|
5
|
-
"module:es2019": "../dist/es2019/
|
|
3
|
+
"main": "../dist/cjs/tooltip-container.js",
|
|
4
|
+
"module": "../dist/esm/tooltip-container.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/tooltip-container.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
|
-
"types": "../dist/types/
|
|
7
|
+
"types": "../dist/types/tooltip-container.d.ts",
|
|
8
8
|
"typesVersions": {
|
|
9
9
|
">=4.5 <5.4": {
|
|
10
10
|
"*": [
|
|
11
|
-
"../dist/types-ts4.5/
|
|
11
|
+
"../dist/types-ts4.5/tooltip-container.d.ts"
|
|
12
12
|
]
|
|
13
13
|
}
|
|
14
14
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tooltip/TooltipPrimitive",
|
|
3
|
-
"main": "../dist/cjs/
|
|
4
|
-
"module": "../dist/esm/
|
|
5
|
-
"module:es2019": "../dist/es2019/
|
|
3
|
+
"main": "../dist/cjs/tooltip-primitive.js",
|
|
4
|
+
"module": "../dist/esm/tooltip-primitive.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/tooltip-primitive.js",
|
|
6
6
|
"sideEffects": false,
|
|
7
|
-
"types": "../dist/types/
|
|
7
|
+
"types": "../dist/types/tooltip-primitive.d.ts",
|
|
8
8
|
"typesVersions": {
|
|
9
9
|
">=4.5 <5.4": {
|
|
10
10
|
"*": [
|
|
11
|
-
"../dist/types-ts4.5/
|
|
11
|
+
"../dist/types-ts4.5/tooltip-primitive.d.ts"
|
|
12
12
|
]
|
|
13
13
|
}
|
|
14
14
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
Object.defineProperty(exports, "TooltipPrimitive", {
|
|
8
8
|
enumerable: true,
|
|
9
9
|
get: function get() {
|
|
10
|
-
return
|
|
10
|
+
return _tooltipPrimitive.default;
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
13
|
Object.defineProperty(exports, "default", {
|
|
14
14
|
enumerable: true,
|
|
15
15
|
get: function get() {
|
|
16
|
-
return
|
|
16
|
+
return _tooltip.default;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
var
|
|
20
|
-
var
|
|
19
|
+
var _tooltip = _interopRequireDefault(require("./tooltip"));
|
|
20
|
+
var _tooltipPrimitive = _interopRequireDefault(require("./tooltip-primitive"));
|
|
@@ -8,7 +8,7 @@ exports.default = void 0;
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _react2 = require("@emotion/react");
|
|
10
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
-
var
|
|
11
|
+
var _tooltipPrimitive = _interopRequireDefault(require("./tooltip-primitive"));
|
|
12
12
|
/**
|
|
13
13
|
* @jsxRuntime classic
|
|
14
14
|
* @jsx jsx
|
|
@@ -20,14 +20,14 @@ var baseStyles = (0, _react2.css)({
|
|
|
20
20
|
boxSizing: 'border-box',
|
|
21
21
|
maxWidth: '240px',
|
|
22
22
|
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
|
|
23
|
-
|
|
24
|
-
insetInlineStart: "var(--ds-space-0, 0px)",
|
|
23
|
+
backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
|
|
25
24
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
25
|
+
color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
|
|
26
26
|
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
27
|
+
insetBlockStart: "var(--ds-space-0, 0px)",
|
|
28
|
+
insetInlineStart: "var(--ds-space-0, 0px)",
|
|
27
29
|
overflowWrap: 'break-word',
|
|
28
|
-
wordWrap: 'break-word'
|
|
29
|
-
backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
|
|
30
|
-
color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
|
|
30
|
+
wordWrap: 'break-word'
|
|
31
31
|
});
|
|
32
32
|
var truncateStyles = (0, _react2.css)({
|
|
33
33
|
maxWidth: '420px',
|
|
@@ -35,6 +35,11 @@ var truncateStyles = (0, _react2.css)({
|
|
|
35
35
|
textOverflow: 'ellipsis',
|
|
36
36
|
whiteSpace: 'nowrap'
|
|
37
37
|
});
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Used as the default tooltip container component for the exported `Tooltip` component.
|
|
41
|
+
* Adds some styles to the tooltip primitive.
|
|
42
|
+
*/
|
|
38
43
|
var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipContainer(_ref, ref) {
|
|
39
44
|
var style = _ref.style,
|
|
40
45
|
className = _ref.className,
|
|
@@ -45,7 +50,7 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
|
|
|
45
50
|
onMouseOut = _ref.onMouseOut,
|
|
46
51
|
onMouseOver = _ref.onMouseOver,
|
|
47
52
|
id = _ref.id;
|
|
48
|
-
return (0, _react2.jsx)(
|
|
53
|
+
return (0, _react2.jsx)(_tooltipPrimitive.default, {
|
|
49
54
|
ref: ref
|
|
50
55
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
51
56
|
,
|
|
@@ -19,6 +19,10 @@ var primitiveStyles = (0, _react2.css)({
|
|
|
19
19
|
zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
|
|
20
20
|
cursor: "default"
|
|
21
21
|
});
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* The lower level component for rendering a tooltip.
|
|
25
|
+
*/
|
|
22
26
|
var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimitive(_ref, ref) {
|
|
23
27
|
var style = _ref.style,
|
|
24
28
|
className = _ref.className,
|
|
@@ -14,6 +14,7 @@ var _bindEventListener = require("bind-event-listener");
|
|
|
14
14
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
15
15
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
16
16
|
var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/use-close-on-escape-press"));
|
|
17
|
+
var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
|
|
17
18
|
var _motion = require("@atlaskit/motion");
|
|
18
19
|
var _durations = require("@atlaskit/motion/durations");
|
|
19
20
|
var _popper = require("@atlaskit/popper");
|
|
@@ -22,17 +23,17 @@ var _constants = require("@atlaskit/theme/constants");
|
|
|
22
23
|
var _dragManager = require("./internal/drag-manager");
|
|
23
24
|
var _tooltipManager = require("./internal/tooltip-manager");
|
|
24
25
|
var _useUniqueId = _interopRequireDefault(require("./internal/use-unique-id"));
|
|
25
|
-
var
|
|
26
|
+
var _tooltipContainer = _interopRequireDefault(require("./tooltip-container"));
|
|
26
27
|
var _utilities = require("./utilities");
|
|
27
28
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
28
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
29
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
29
30
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
30
31
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
31
32
|
var tooltipZIndex = _constants.layers.tooltip();
|
|
32
33
|
var analyticsAttributes = {
|
|
33
34
|
componentName: 'tooltip',
|
|
34
35
|
packageName: "@atlaskit/tooltip",
|
|
35
|
-
packageVersion: "18.
|
|
36
|
+
packageVersion: "18.8.0"
|
|
36
37
|
};
|
|
37
38
|
|
|
38
39
|
// Inverts motion direction
|
|
@@ -52,6 +53,11 @@ var invertedDirection = {
|
|
|
52
53
|
var getDirectionFromPlacement = function getDirectionFromPlacement(placement) {
|
|
53
54
|
return placement.split('-')[0];
|
|
54
55
|
};
|
|
56
|
+
/**
|
|
57
|
+
* __Tooltip__
|
|
58
|
+
*
|
|
59
|
+
* A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
|
|
60
|
+
*/
|
|
55
61
|
function Tooltip(_ref) {
|
|
56
62
|
var children = _ref.children,
|
|
57
63
|
_ref$position = _ref.position,
|
|
@@ -62,7 +68,7 @@ function Tooltip(_ref) {
|
|
|
62
68
|
_ref$truncate = _ref.truncate,
|
|
63
69
|
truncate = _ref$truncate === void 0 ? false : _ref$truncate,
|
|
64
70
|
_ref$component = _ref.component,
|
|
65
|
-
Container = _ref$component === void 0 ?
|
|
71
|
+
Container = _ref$component === void 0 ? _tooltipContainer.default : _ref$component,
|
|
66
72
|
_ref$tag = _ref.tag,
|
|
67
73
|
TargetContainer = _ref$tag === void 0 ? 'div' : _ref$tag,
|
|
68
74
|
testId = _ref.testId,
|
|
@@ -372,6 +378,9 @@ function Tooltip(_ref) {
|
|
|
372
378
|
var CastTargetContainer = TargetContainer;
|
|
373
379
|
var shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
|
|
374
380
|
var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
|
|
381
|
+
(0, _openLayerObserver.useNotifyOpenLayerObserver)({
|
|
382
|
+
isOpen: shouldRenderTooltipContainer
|
|
383
|
+
});
|
|
375
384
|
var getReferenceElement = function getReferenceElement() {
|
|
376
385
|
var _apiRef$current4;
|
|
377
386
|
if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
|
package/dist/es2019/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './
|
|
2
|
-
export { default as TooltipPrimitive } from './
|
|
1
|
+
export { default } from './tooltip';
|
|
2
|
+
export { default as TooltipPrimitive } from './tooltip-primitive';
|
|
@@ -7,19 +7,19 @@ import { forwardRef } from 'react';
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import { N0, N800 } from '@atlaskit/theme/colors';
|
|
10
|
-
import TooltipPrimitive from './
|
|
10
|
+
import TooltipPrimitive from './tooltip-primitive';
|
|
11
11
|
const baseStyles = css({
|
|
12
12
|
boxSizing: 'border-box',
|
|
13
13
|
maxWidth: '240px',
|
|
14
14
|
padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`,
|
|
15
|
-
|
|
16
|
-
insetInlineStart: "var(--ds-space-0, 0px)",
|
|
15
|
+
backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
|
|
17
16
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
17
|
+
color: `var(--ds-text-inverse, ${N0})`,
|
|
18
18
|
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
19
|
+
insetBlockStart: "var(--ds-space-0, 0px)",
|
|
20
|
+
insetInlineStart: "var(--ds-space-0, 0px)",
|
|
19
21
|
overflowWrap: 'break-word',
|
|
20
|
-
wordWrap: 'break-word'
|
|
21
|
-
backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
|
|
22
|
-
color: `var(--ds-text-inverse, ${N0})`
|
|
22
|
+
wordWrap: 'break-word'
|
|
23
23
|
});
|
|
24
24
|
const truncateStyles = css({
|
|
25
25
|
maxWidth: '420px',
|
|
@@ -27,6 +27,11 @@ const truncateStyles = css({
|
|
|
27
27
|
textOverflow: 'ellipsis',
|
|
28
28
|
whiteSpace: 'nowrap'
|
|
29
29
|
});
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Used as the default tooltip container component for the exported `Tooltip` component.
|
|
33
|
+
* Adds some styles to the tooltip primitive.
|
|
34
|
+
*/
|
|
30
35
|
const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
|
|
31
36
|
style,
|
|
32
37
|
className,
|
|
@@ -12,6 +12,10 @@ const primitiveStyles = css({
|
|
|
12
12
|
zindex: `var(${VAR_PRIMITIVE_ZINDEX})`,
|
|
13
13
|
cursor: `default`
|
|
14
14
|
});
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* The lower level component for rendering a tooltip.
|
|
18
|
+
*/
|
|
15
19
|
const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
|
|
16
20
|
style,
|
|
17
21
|
className,
|
|
@@ -4,6 +4,7 @@ import { bind } from 'bind-event-listener';
|
|
|
4
4
|
import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
|
|
5
5
|
import noop from '@atlaskit/ds-lib/noop';
|
|
6
6
|
import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
|
|
7
|
+
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
7
8
|
import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
|
|
8
9
|
import { mediumDurationMs } from '@atlaskit/motion/durations';
|
|
9
10
|
import { Popper } from '@atlaskit/popper';
|
|
@@ -12,13 +13,13 @@ import { layers } from '@atlaskit/theme/constants';
|
|
|
12
13
|
import { register } from './internal/drag-manager';
|
|
13
14
|
import { show } from './internal/tooltip-manager';
|
|
14
15
|
import useUniqueId from './internal/use-unique-id';
|
|
15
|
-
import TooltipContainer from './
|
|
16
|
+
import TooltipContainer from './tooltip-container';
|
|
16
17
|
import { getMousePosition } from './utilities';
|
|
17
18
|
const tooltipZIndex = layers.tooltip();
|
|
18
19
|
const analyticsAttributes = {
|
|
19
20
|
componentName: 'tooltip',
|
|
20
21
|
packageName: "@atlaskit/tooltip",
|
|
21
|
-
packageVersion: "18.
|
|
22
|
+
packageVersion: "18.8.0"
|
|
22
23
|
};
|
|
23
24
|
|
|
24
25
|
// Inverts motion direction
|
|
@@ -36,6 +37,11 @@ const invertedDirection = {
|
|
|
36
37
|
* @returns Popper Direction, e.g. 'top'
|
|
37
38
|
*/
|
|
38
39
|
const getDirectionFromPlacement = placement => placement.split('-')[0];
|
|
40
|
+
/**
|
|
41
|
+
* __Tooltip__
|
|
42
|
+
*
|
|
43
|
+
* A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
|
|
44
|
+
*/
|
|
39
45
|
function Tooltip({
|
|
40
46
|
children,
|
|
41
47
|
position = 'bottom',
|
|
@@ -348,6 +354,9 @@ function Tooltip({
|
|
|
348
354
|
const CastTargetContainer = TargetContainer;
|
|
349
355
|
const shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
|
|
350
356
|
const shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
|
|
357
|
+
useNotifyOpenLayerObserver({
|
|
358
|
+
isOpen: shouldRenderTooltipContainer
|
|
359
|
+
});
|
|
351
360
|
const getReferenceElement = () => {
|
|
352
361
|
var _apiRef$current4;
|
|
353
362
|
if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from './
|
|
2
|
-
export { default as TooltipPrimitive } from './
|
|
1
|
+
export { default } from './tooltip';
|
|
2
|
+
export { default as TooltipPrimitive } from './tooltip-primitive';
|
|
@@ -7,19 +7,19 @@ import { forwardRef } from 'react';
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import { N0, N800 } from '@atlaskit/theme/colors';
|
|
10
|
-
import TooltipPrimitive from './
|
|
10
|
+
import TooltipPrimitive from './tooltip-primitive';
|
|
11
11
|
var baseStyles = css({
|
|
12
12
|
boxSizing: 'border-box',
|
|
13
13
|
maxWidth: '240px',
|
|
14
14
|
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
|
|
15
|
-
|
|
16
|
-
insetInlineStart: "var(--ds-space-0, 0px)",
|
|
15
|
+
backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
|
|
17
16
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
17
|
+
color: "var(--ds-text-inverse, ".concat(N0, ")"),
|
|
18
18
|
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
19
|
+
insetBlockStart: "var(--ds-space-0, 0px)",
|
|
20
|
+
insetInlineStart: "var(--ds-space-0, 0px)",
|
|
19
21
|
overflowWrap: 'break-word',
|
|
20
|
-
wordWrap: 'break-word'
|
|
21
|
-
backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
|
|
22
|
-
color: "var(--ds-text-inverse, ".concat(N0, ")")
|
|
22
|
+
wordWrap: 'break-word'
|
|
23
23
|
});
|
|
24
24
|
var truncateStyles = css({
|
|
25
25
|
maxWidth: '420px',
|
|
@@ -27,6 +27,11 @@ var truncateStyles = css({
|
|
|
27
27
|
textOverflow: 'ellipsis',
|
|
28
28
|
whiteSpace: 'nowrap'
|
|
29
29
|
});
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Used as the default tooltip container component for the exported `Tooltip` component.
|
|
33
|
+
* Adds some styles to the tooltip primitive.
|
|
34
|
+
*/
|
|
30
35
|
var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, ref) {
|
|
31
36
|
var style = _ref.style,
|
|
32
37
|
className = _ref.className,
|
|
@@ -15,6 +15,10 @@ var primitiveStyles = css({
|
|
|
15
15
|
zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
|
|
16
16
|
cursor: "default"
|
|
17
17
|
});
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* The lower level component for rendering a tooltip.
|
|
21
|
+
*/
|
|
18
22
|
var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, ref) {
|
|
19
23
|
var style = _ref.style,
|
|
20
24
|
className = _ref.className,
|
|
@@ -8,6 +8,7 @@ import { bind } from 'bind-event-listener';
|
|
|
8
8
|
import { usePlatformLeafSyntheticEventHandler } from '@atlaskit/analytics-next';
|
|
9
9
|
import noop from '@atlaskit/ds-lib/noop';
|
|
10
10
|
import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
|
|
11
|
+
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
|
|
11
12
|
import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
|
|
12
13
|
import { mediumDurationMs } from '@atlaskit/motion/durations';
|
|
13
14
|
import { Popper } from '@atlaskit/popper';
|
|
@@ -16,13 +17,13 @@ import { layers } from '@atlaskit/theme/constants';
|
|
|
16
17
|
import { register } from './internal/drag-manager';
|
|
17
18
|
import { show } from './internal/tooltip-manager';
|
|
18
19
|
import useUniqueId from './internal/use-unique-id';
|
|
19
|
-
import TooltipContainer from './
|
|
20
|
+
import TooltipContainer from './tooltip-container';
|
|
20
21
|
import { getMousePosition } from './utilities';
|
|
21
22
|
var tooltipZIndex = layers.tooltip();
|
|
22
23
|
var analyticsAttributes = {
|
|
23
24
|
componentName: 'tooltip',
|
|
24
25
|
packageName: "@atlaskit/tooltip",
|
|
25
|
-
packageVersion: "18.
|
|
26
|
+
packageVersion: "18.8.0"
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
// Inverts motion direction
|
|
@@ -42,6 +43,11 @@ var invertedDirection = {
|
|
|
42
43
|
var getDirectionFromPlacement = function getDirectionFromPlacement(placement) {
|
|
43
44
|
return placement.split('-')[0];
|
|
44
45
|
};
|
|
46
|
+
/**
|
|
47
|
+
* __Tooltip__
|
|
48
|
+
*
|
|
49
|
+
* A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
|
|
50
|
+
*/
|
|
45
51
|
function Tooltip(_ref) {
|
|
46
52
|
var children = _ref.children,
|
|
47
53
|
_ref$position = _ref.position,
|
|
@@ -362,6 +368,9 @@ function Tooltip(_ref) {
|
|
|
362
368
|
var CastTargetContainer = TargetContainer;
|
|
363
369
|
var shouldRenderTooltipContainer = state !== 'hide' && Boolean(content);
|
|
364
370
|
var shouldRenderTooltipChildren = state !== 'hide' && state !== 'fade-out';
|
|
371
|
+
useNotifyOpenLayerObserver({
|
|
372
|
+
isOpen: shouldRenderTooltipContainer
|
|
373
|
+
});
|
|
365
374
|
var getReferenceElement = function getReferenceElement() {
|
|
366
375
|
var _apiRef$current4;
|
|
367
376
|
if (position === 'mouse' && (_apiRef$current4 = apiRef.current) !== null && _apiRef$current4 !== void 0 && _apiRef$current4.mousePosition) {
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default } from './
|
|
2
|
-
export { default as TooltipPrimitive } from './
|
|
3
|
-
export type { TooltipPrimitiveProps } from './
|
|
1
|
+
export { default } from './tooltip';
|
|
2
|
+
export { default as TooltipPrimitive } from './tooltip-primitive';
|
|
3
|
+
export type { TooltipPrimitiveProps } from './tooltip-primitive';
|
|
4
4
|
export type { PositionType, TooltipProps, TriggerProps } from './types';
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { type TooltipPrimitiveProps } from './
|
|
2
|
+
import { type TooltipPrimitiveProps } from './tooltip-primitive';
|
|
3
3
|
export interface TooltipContainerProps extends TooltipPrimitiveProps {
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* Used as the default tooltip container component for the exported `Tooltip` component.
|
|
7
|
+
* Adds some styles to the tooltip primitive.
|
|
8
|
+
*/
|
|
5
9
|
declare const TooltipContainer: import("react").ForwardRefExoticComponent<Pick<TooltipContainerProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
10
|
export default TooltipContainer;
|
|
@@ -16,5 +16,8 @@ export interface TooltipPrimitiveProps {
|
|
|
16
16
|
onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
17
17
|
id?: string;
|
|
18
18
|
}
|
|
19
|
+
/**
|
|
20
|
+
* The lower level component for rendering a tooltip.
|
|
21
|
+
*/
|
|
19
22
|
declare const TooltipPrimitive: import("react").ForwardRefExoticComponent<Pick<TooltipPrimitiveProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
23
|
export default TooltipPrimitive;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { type TooltipProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* __Tooltip__
|
|
5
|
+
*
|
|
6
|
+
* A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
|
|
7
|
+
*/
|
|
3
8
|
declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, }: TooltipProps): JSX.Element;
|
|
4
9
|
declare namespace Tooltip {
|
|
5
10
|
var displayName: string;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ComponentType, type ReactNode } from 'react';
|
|
2
2
|
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
3
|
import { type Placement } from '@atlaskit/popper';
|
|
4
|
-
import { type TooltipPrimitiveProps } from './
|
|
4
|
+
import { type TooltipPrimitiveProps } from './tooltip-primitive';
|
|
5
5
|
export type PositionTypeBase = Placement;
|
|
6
6
|
export type PositionType = PositionTypeBase | 'mouse';
|
|
7
7
|
export interface TriggerProps {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default } from './
|
|
2
|
-
export { default as TooltipPrimitive } from './
|
|
3
|
-
export type { TooltipPrimitiveProps } from './
|
|
1
|
+
export { default } from './tooltip';
|
|
2
|
+
export { default as TooltipPrimitive } from './tooltip-primitive';
|
|
3
|
+
export type { TooltipPrimitiveProps } from './tooltip-primitive';
|
|
4
4
|
export type { PositionType, TooltipProps, TriggerProps } from './types';
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { type TooltipPrimitiveProps } from './
|
|
2
|
+
import { type TooltipPrimitiveProps } from './tooltip-primitive';
|
|
3
3
|
export interface TooltipContainerProps extends TooltipPrimitiveProps {
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* Used as the default tooltip container component for the exported `Tooltip` component.
|
|
7
|
+
* Adds some styles to the tooltip primitive.
|
|
8
|
+
*/
|
|
5
9
|
declare const TooltipContainer: import("react").ForwardRefExoticComponent<Pick<TooltipContainerProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
10
|
export default TooltipContainer;
|
|
@@ -16,5 +16,8 @@ export interface TooltipPrimitiveProps {
|
|
|
16
16
|
onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
17
17
|
id?: string;
|
|
18
18
|
}
|
|
19
|
+
/**
|
|
20
|
+
* The lower level component for rendering a tooltip.
|
|
21
|
+
*/
|
|
19
22
|
declare const TooltipPrimitive: import("react").ForwardRefExoticComponent<Pick<TooltipPrimitiveProps, "style" | "className" | "children" | "placement" | "testId" | "onMouseOut" | "onMouseOver" | "id" | "truncate"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
23
|
export default TooltipPrimitive;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { type TooltipProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* __Tooltip__
|
|
5
|
+
*
|
|
6
|
+
* A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
|
|
7
|
+
*/
|
|
3
8
|
declare function Tooltip({ children, position, mousePosition, content, truncate, component: Container, tag: TargetContainer, testId, delay, onShow, onHide, hideTooltipOnClick, hideTooltipOnMouseDown, analyticsContext, strategy, ignoreTooltipPointerEvents, }: TooltipProps): JSX.Element;
|
|
4
9
|
declare namespace Tooltip {
|
|
5
10
|
var displayName: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ComponentType, type ReactNode } from 'react';
|
|
2
2
|
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
3
|
import { type Placement } from '@atlaskit/popper';
|
|
4
|
-
import { type TooltipPrimitiveProps } from './
|
|
4
|
+
import { type TooltipPrimitiveProps } from './tooltip-primitive';
|
|
5
5
|
export type PositionTypeBase = Placement;
|
|
6
6
|
export type PositionType = PositionTypeBase | 'mouse';
|
|
7
7
|
export interface TriggerProps {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tooltip",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.8.0",
|
|
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/"
|
|
@@ -24,10 +24,6 @@
|
|
|
24
24
|
"atlaskit:src": "src/index.ts",
|
|
25
25
|
"atlassian": {
|
|
26
26
|
"team": "Design System Team",
|
|
27
|
-
"productPushConsumption": [
|
|
28
|
-
"jira"
|
|
29
|
-
],
|
|
30
|
-
"releaseModel": "continuous",
|
|
31
27
|
"runReact18": true,
|
|
32
28
|
"website": {
|
|
33
29
|
"name": "Tooltip",
|
|
@@ -36,20 +32,21 @@
|
|
|
36
32
|
},
|
|
37
33
|
"af:exports": {
|
|
38
34
|
".": "./src/index.ts",
|
|
39
|
-
"./Tooltip": "./src/
|
|
40
|
-
"./TooltipContainer": "./src/
|
|
41
|
-
"./TooltipPrimitive": "./src/
|
|
35
|
+
"./Tooltip": "./src/tooltip.tsx",
|
|
36
|
+
"./TooltipContainer": "./src/tooltip-container.tsx",
|
|
37
|
+
"./TooltipPrimitive": "./src/tooltip-primitive.tsx",
|
|
42
38
|
"./types": "./src/types.tsx",
|
|
43
39
|
"./utilities": "./src/utilities.ts"
|
|
44
40
|
},
|
|
45
41
|
"dependencies": {
|
|
46
42
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
47
|
-
"@atlaskit/ds-lib": "^2.
|
|
43
|
+
"@atlaskit/ds-lib": "^2.6.0",
|
|
44
|
+
"@atlaskit/layering": "^0.5.0",
|
|
48
45
|
"@atlaskit/motion": "^1.9.0",
|
|
49
|
-
"@atlaskit/popper": "^6.
|
|
46
|
+
"@atlaskit/popper": "^6.3.0",
|
|
50
47
|
"@atlaskit/portal": "^4.9.0",
|
|
51
48
|
"@atlaskit/theme": "^13.0.0",
|
|
52
|
-
"@atlaskit/tokens": "^
|
|
49
|
+
"@atlaskit/tokens": "^2.0.0",
|
|
53
50
|
"@babel/runtime": "^7.0.0",
|
|
54
51
|
"@emotion/react": "^11.7.1",
|
|
55
52
|
"bind-event-listener": "^3.0.0"
|
|
@@ -60,7 +57,7 @@
|
|
|
60
57
|
},
|
|
61
58
|
"devDependencies": {
|
|
62
59
|
"@af/accessibility-testing": "*",
|
|
63
|
-
"@atlaskit/button": "^20.
|
|
60
|
+
"@atlaskit/button": "^20.2.0",
|
|
64
61
|
"@atlaskit/ssr": "*",
|
|
65
62
|
"@atlaskit/visual-regression": "*",
|
|
66
63
|
"@emotion/styled": "^11.0.0",
|