@atlaskit/tooltip 17.5.3 → 17.5.6
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 +21 -0
- package/dist/cjs/Tooltip.js +1 -1
- package/dist/cjs/TooltipContainer.js +28 -7
- package/dist/cjs/TooltipPrimitive.js +14 -5
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/Tooltip.js +1 -1
- package/dist/es2019/TooltipContainer.js +27 -22
- package/dist/es2019/TooltipPrimitive.js +10 -6
- package/dist/es2019/version.json +1 -1
- package/dist/esm/Tooltip.js +1 -1
- package/dist/esm/TooltipContainer.js +27 -7
- package/dist/esm/TooltipPrimitive.js +14 -5
- package/dist/esm/version.json +1 -1
- package/package.json +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/tooltip
|
|
2
2
|
|
|
3
|
+
## 17.5.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 17.5.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`d0eed99c3e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0eed99c3e3) - ED-14264 Moved styles to emotion css
|
|
14
|
+
- [`6007e4f9a97`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6007e4f9a97) - Internal styling has been refactored in preparation for @compiled/react
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
17
|
+
## 17.5.4
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 17.5.3
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/dist/cjs/Tooltip.js
CHANGED
|
@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
|
|
10
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
|
-
|
|
12
10
|
var _react = require("react");
|
|
13
11
|
|
|
14
12
|
var _core = require("@emotion/core");
|
|
@@ -21,10 +19,33 @@ var _constants = require("@atlaskit/theme/constants");
|
|
|
21
19
|
|
|
22
20
|
var _TooltipPrimitive = _interopRequireDefault(require("./TooltipPrimitive"));
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
/** @jsx jsx */
|
|
23
|
+
var baseStyles = (0, _core.css)({
|
|
24
|
+
boxSizing: 'border-box',
|
|
25
|
+
maxWidth: '240px',
|
|
26
|
+
padding: '2px 6px',
|
|
27
|
+
top: 0,
|
|
28
|
+
left: 0,
|
|
29
|
+
borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
|
|
30
|
+
fontSize: '12px',
|
|
31
|
+
lineHeight: 1.3,
|
|
32
|
+
overflowWrap: 'break-word',
|
|
33
|
+
wordWrap: 'break-word'
|
|
34
|
+
});
|
|
35
|
+
var truncateStyles = (0, _core.css)({
|
|
36
|
+
maxWidth: '420px',
|
|
37
|
+
overflow: 'hidden',
|
|
38
|
+
textOverflow: 'ellipsis',
|
|
39
|
+
whiteSpace: 'nowrap'
|
|
40
|
+
});
|
|
41
|
+
var lightStyles = (0, _core.css)({
|
|
42
|
+
backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
|
|
43
|
+
color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
|
|
44
|
+
});
|
|
45
|
+
var darkStyles = (0, _core.css)({
|
|
46
|
+
backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.DN0, ")"),
|
|
47
|
+
color: "var(--ds-text-inverse, ".concat(_colors.DN600, ")")
|
|
48
|
+
});
|
|
28
49
|
var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipContainer(_ref, ref) {
|
|
29
50
|
var style = _ref.style,
|
|
30
51
|
className = _ref.className,
|
|
@@ -47,7 +68,7 @@ var TooltipContainer = /*#__PURE__*/(0, _react.forwardRef)(function TooltipConta
|
|
|
47
68
|
id: id,
|
|
48
69
|
onMouseOut: onMouseOut,
|
|
49
70
|
onMouseOver: onMouseOver,
|
|
50
|
-
css: [
|
|
71
|
+
css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
|
|
51
72
|
}, children)
|
|
52
73
|
);
|
|
53
74
|
});
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
|
|
12
12
|
var _react = require("react");
|
|
13
13
|
|
|
@@ -15,9 +15,15 @@ var _core = require("@emotion/core");
|
|
|
15
15
|
|
|
16
16
|
var _constants = require("@atlaskit/theme/constants");
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
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
19
|
|
|
20
|
-
var
|
|
20
|
+
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
|
+
var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
|
|
23
|
+
var primitiveStyles = (0, _core.css)({
|
|
24
|
+
zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
|
|
25
|
+
cursor: "default"
|
|
26
|
+
});
|
|
21
27
|
var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimitive(_ref, ref) {
|
|
22
28
|
var style = _ref.style,
|
|
23
29
|
className = _ref.className,
|
|
@@ -27,15 +33,18 @@ var TooltipPrimitive = /*#__PURE__*/(0, _react.forwardRef)(function TooltipPrimi
|
|
|
27
33
|
onMouseOut = _ref.onMouseOut,
|
|
28
34
|
onMouseOver = _ref.onMouseOver,
|
|
29
35
|
id = _ref.id;
|
|
36
|
+
|
|
37
|
+
var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, (0, _defineProperty2.default)({}, VAR_PRIMITIVE_ZINDEX, _constants.layers.tooltip()));
|
|
38
|
+
|
|
30
39
|
return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
31
40
|
(0, _core.jsx)("div", {
|
|
32
41
|
role: "tooltip",
|
|
33
42
|
ref: ref,
|
|
34
|
-
style:
|
|
43
|
+
style: styleWithZIndex,
|
|
35
44
|
className: className,
|
|
36
45
|
onMouseOut: onMouseOut,
|
|
37
46
|
onMouseOver: onMouseOver,
|
|
38
|
-
css:
|
|
47
|
+
css: primitiveStyles,
|
|
39
48
|
"data-placement": placement,
|
|
40
49
|
"data-testid": testId,
|
|
41
50
|
id: id
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/Tooltip.js
CHANGED
|
@@ -5,24 +5,32 @@ import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
|
|
|
5
5
|
import GlobalTheme from '@atlaskit/theme/components';
|
|
6
6
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
7
7
|
import TooltipPrimitive from './TooltipPrimitive';
|
|
8
|
-
const
|
|
9
|
-
border-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
overflow: hidden
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
8
|
+
const baseStyles = css({
|
|
9
|
+
boxSizing: 'border-box',
|
|
10
|
+
maxWidth: '240px',
|
|
11
|
+
padding: '2px 6px',
|
|
12
|
+
top: 0,
|
|
13
|
+
left: 0,
|
|
14
|
+
borderRadius: `${borderRadius()}px`,
|
|
15
|
+
fontSize: '12px',
|
|
16
|
+
lineHeight: 1.3,
|
|
17
|
+
overflowWrap: 'break-word',
|
|
18
|
+
wordWrap: 'break-word'
|
|
19
|
+
});
|
|
20
|
+
const truncateStyles = css({
|
|
21
|
+
maxWidth: '420px',
|
|
22
|
+
overflow: 'hidden',
|
|
23
|
+
textOverflow: 'ellipsis',
|
|
24
|
+
whiteSpace: 'nowrap'
|
|
25
|
+
});
|
|
26
|
+
const lightStyles = css({
|
|
27
|
+
backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
|
|
28
|
+
color: `var(--ds-text-inverse, ${N0})`
|
|
29
|
+
});
|
|
30
|
+
const darkStyles = css({
|
|
31
|
+
backgroundColor: `var(--ds-background-neutral-bold, ${DN0})`,
|
|
32
|
+
color: `var(--ds-text-inverse, ${DN600})`
|
|
33
|
+
});
|
|
26
34
|
const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
|
|
27
35
|
style,
|
|
28
36
|
className,
|
|
@@ -46,10 +54,7 @@ const TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer({
|
|
|
46
54
|
id: id,
|
|
47
55
|
onMouseOut: onMouseOut,
|
|
48
56
|
onMouseOver: onMouseOver,
|
|
49
|
-
css: [
|
|
50
|
-
background-color: ${mode === 'light' ? `var(--ds-background-boldNeutral-resting, ${N800})` : `var(--ds-background-boldNeutral-resting, ${DN0})`};
|
|
51
|
-
color: ${mode === 'light' ? `var(--ds-text-onBold, ${N0})` : `var(--ds-text-onBold, ${DN600})`};
|
|
52
|
-
`]
|
|
57
|
+
css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
|
|
53
58
|
}, children));
|
|
54
59
|
});
|
|
55
60
|
TooltipContainer.displayName = 'TooltipContainer';
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { css, jsx } from '@emotion/core';
|
|
4
4
|
import { layers } from '@atlaskit/theme/constants';
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
const VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
|
|
6
|
+
const primitiveStyles = css({
|
|
7
|
+
zindex: `var(${VAR_PRIMITIVE_ZINDEX})`,
|
|
8
|
+
cursor: `default`
|
|
9
|
+
});
|
|
9
10
|
const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
|
|
10
11
|
style,
|
|
11
12
|
className,
|
|
@@ -16,15 +17,18 @@ const TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive({
|
|
|
16
17
|
onMouseOver,
|
|
17
18
|
id
|
|
18
19
|
}, ref) {
|
|
20
|
+
const styleWithZIndex = { ...style,
|
|
21
|
+
[VAR_PRIMITIVE_ZINDEX]: layers.tooltip()
|
|
22
|
+
};
|
|
19
23
|
return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
20
24
|
jsx("div", {
|
|
21
25
|
role: "tooltip",
|
|
22
26
|
ref: ref,
|
|
23
|
-
style:
|
|
27
|
+
style: styleWithZIndex,
|
|
24
28
|
className: className,
|
|
25
29
|
onMouseOut: onMouseOut,
|
|
26
30
|
onMouseOver: onMouseOver,
|
|
27
|
-
css:
|
|
31
|
+
css: primitiveStyles,
|
|
28
32
|
"data-placement": placement,
|
|
29
33
|
"data-testid": testId,
|
|
30
34
|
id: id
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/Tooltip.js
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
4
|
-
|
|
5
1
|
/** @jsx jsx */
|
|
6
2
|
import { forwardRef } from 'react';
|
|
7
3
|
import { css, jsx } from '@emotion/core';
|
|
@@ -9,8 +5,32 @@ import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
|
|
|
9
5
|
import GlobalTheme from '@atlaskit/theme/components';
|
|
10
6
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
11
7
|
import TooltipPrimitive from './TooltipPrimitive';
|
|
12
|
-
var
|
|
13
|
-
|
|
8
|
+
var baseStyles = css({
|
|
9
|
+
boxSizing: 'border-box',
|
|
10
|
+
maxWidth: '240px',
|
|
11
|
+
padding: '2px 6px',
|
|
12
|
+
top: 0,
|
|
13
|
+
left: 0,
|
|
14
|
+
borderRadius: "".concat(borderRadius(), "px"),
|
|
15
|
+
fontSize: '12px',
|
|
16
|
+
lineHeight: 1.3,
|
|
17
|
+
overflowWrap: 'break-word',
|
|
18
|
+
wordWrap: 'break-word'
|
|
19
|
+
});
|
|
20
|
+
var truncateStyles = css({
|
|
21
|
+
maxWidth: '420px',
|
|
22
|
+
overflow: 'hidden',
|
|
23
|
+
textOverflow: 'ellipsis',
|
|
24
|
+
whiteSpace: 'nowrap'
|
|
25
|
+
});
|
|
26
|
+
var lightStyles = css({
|
|
27
|
+
backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
|
|
28
|
+
color: "var(--ds-text-inverse, ".concat(N0, ")")
|
|
29
|
+
});
|
|
30
|
+
var darkStyles = css({
|
|
31
|
+
backgroundColor: "var(--ds-background-neutral-bold, ".concat(DN0, ")"),
|
|
32
|
+
color: "var(--ds-text-inverse, ".concat(DN600, ")")
|
|
33
|
+
});
|
|
14
34
|
var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, ref) {
|
|
15
35
|
var style = _ref.style,
|
|
16
36
|
className = _ref.className,
|
|
@@ -33,7 +53,7 @@ var TooltipContainer = /*#__PURE__*/forwardRef(function TooltipContainer(_ref, r
|
|
|
33
53
|
id: id,
|
|
34
54
|
onMouseOut: onMouseOut,
|
|
35
55
|
onMouseOver: onMouseOver,
|
|
36
|
-
css: [
|
|
56
|
+
css: [baseStyles, truncate ? truncateStyles : null, mode === 'light' ? lightStyles : darkStyles]
|
|
37
57
|
}, children)
|
|
38
58
|
);
|
|
39
59
|
});
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
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; }
|
|
4
|
+
|
|
5
|
+
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) { _defineProperty(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; }
|
|
4
6
|
|
|
5
7
|
/** @jsx jsx */
|
|
6
8
|
import { forwardRef } from 'react';
|
|
7
9
|
import { css, jsx } from '@emotion/core';
|
|
8
10
|
import { layers } from '@atlaskit/theme/constants';
|
|
9
|
-
var
|
|
11
|
+
var VAR_PRIMITIVE_ZINDEX = 'tooltipPrimitiveZindex';
|
|
12
|
+
var primitiveStyles = css({
|
|
13
|
+
zindex: "var(".concat(VAR_PRIMITIVE_ZINDEX, ")"),
|
|
14
|
+
cursor: "default"
|
|
15
|
+
});
|
|
10
16
|
var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, ref) {
|
|
11
17
|
var style = _ref.style,
|
|
12
18
|
className = _ref.className,
|
|
@@ -16,15 +22,18 @@ var TooltipPrimitive = /*#__PURE__*/forwardRef(function TooltipPrimitive(_ref, r
|
|
|
16
22
|
onMouseOut = _ref.onMouseOut,
|
|
17
23
|
onMouseOver = _ref.onMouseOver,
|
|
18
24
|
id = _ref.id;
|
|
25
|
+
|
|
26
|
+
var styleWithZIndex = _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, VAR_PRIMITIVE_ZINDEX, layers.tooltip()));
|
|
27
|
+
|
|
19
28
|
return (// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
20
29
|
jsx("div", {
|
|
21
30
|
role: "tooltip",
|
|
22
31
|
ref: ref,
|
|
23
|
-
style:
|
|
32
|
+
style: styleWithZIndex,
|
|
24
33
|
className: className,
|
|
25
34
|
onMouseOut: onMouseOut,
|
|
26
35
|
onMouseOver: onMouseOver,
|
|
27
|
-
css:
|
|
36
|
+
css: primitiveStyles,
|
|
28
37
|
"data-placement": placement,
|
|
29
38
|
"data-testid": testId,
|
|
30
39
|
id: id
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tooltip",
|
|
3
|
-
"version": "17.5.
|
|
3
|
+
"version": "17.5.6",
|
|
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,12 +24,12 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@atlaskit/analytics-next": "^8.2.0",
|
|
27
|
-
"@atlaskit/ds-lib": "^1.
|
|
27
|
+
"@atlaskit/ds-lib": "^1.4.0",
|
|
28
28
|
"@atlaskit/motion": "^1.0.0",
|
|
29
29
|
"@atlaskit/popper": "^5.0.0",
|
|
30
30
|
"@atlaskit/portal": "^4.1.0",
|
|
31
31
|
"@atlaskit/theme": "^12.1.0",
|
|
32
|
-
"@atlaskit/tokens": "^0.
|
|
32
|
+
"@atlaskit/tokens": "^0.8.0",
|
|
33
33
|
"@babel/runtime": "^7.0.0",
|
|
34
34
|
"@emotion/core": "^10.0.9",
|
|
35
35
|
"bind-event-listener": "^1.0.2",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"react-dom": "^16.8.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@atlaskit/button": "^16.
|
|
43
|
+
"@atlaskit/button": "^16.2.0",
|
|
44
44
|
"@atlaskit/docs": "*",
|
|
45
45
|
"@atlaskit/icon": "^21.10.0",
|
|
46
46
|
"@atlaskit/section-message": "^6.1.0",
|
|
@@ -73,7 +73,8 @@
|
|
|
73
73
|
"theming": "tokens",
|
|
74
74
|
"deprecation": "no-deprecated-imports",
|
|
75
75
|
"styling": [
|
|
76
|
-
"emotion"
|
|
76
|
+
"emotion",
|
|
77
|
+
"static"
|
|
77
78
|
]
|
|
78
79
|
}
|
|
79
80
|
},
|