@atlaskit/popup 1.9.2 → 1.9.3
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
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 1.9.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`84442a93613`](https://bitbucket.org/atlassian/atlassian-frontend/commits/84442a93613) - Adds support for surface detection when using design tokens. Enabling children to be styled with the surface color of the popup when using the `utility.elevation.surface.current` design token.
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
3
10
|
## 1.9.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -7,29 +7,30 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
11
|
var _react = require("react");
|
|
11
12
|
var _react2 = require("@emotion/react");
|
|
12
13
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
14
|
var _popper = require("@atlaskit/popper");
|
|
14
15
|
var _colors = require("@atlaskit/theme/colors");
|
|
15
16
|
var _constants = require("@atlaskit/theme/constants");
|
|
17
|
+
var _tokens = require("@atlaskit/tokens");
|
|
16
18
|
var _repositionOnUpdate = require("./reposition-on-update");
|
|
17
19
|
var _useCloseManager = require("./use-close-manager");
|
|
18
20
|
var _useFocusManager = require("./use-focus-manager");
|
|
21
|
+
var _css;
|
|
19
22
|
/** @jsx jsx */
|
|
20
|
-
|
|
21
|
-
var popupStyles = (0, _react2.css)({
|
|
23
|
+
var popupStyles = (0, _react2.css)((_css = {
|
|
22
24
|
display: 'block',
|
|
23
25
|
boxSizing: 'border-box',
|
|
24
26
|
zIndex: _constants.layers.layer(),
|
|
25
27
|
flex: '1 1 auto',
|
|
26
28
|
backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
|
|
27
29
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
28
|
-
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}, !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') && {
|
|
30
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
|
|
31
|
+
}, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, ':focus', {
|
|
32
|
+
outline: 'none'
|
|
33
|
+
}), _css), !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') && {
|
|
33
34
|
overflow: 'auto'
|
|
34
35
|
});
|
|
35
36
|
var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
@@ -6,6 +6,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
|
6
6
|
import { Popper } from '@atlaskit/popper';
|
|
7
7
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
8
8
|
import { layers } from '@atlaskit/theme/constants';
|
|
9
|
+
import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
|
|
9
10
|
import { RepositionOnUpdate } from './reposition-on-update';
|
|
10
11
|
import { useCloseManager } from './use-close-manager';
|
|
11
12
|
import { useFocusManager } from './use-focus-manager';
|
|
@@ -17,6 +18,7 @@ const popupStyles = css({
|
|
|
17
18
|
backgroundColor: `var(--ds-surface-overlay, ${N0})`,
|
|
18
19
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
19
20
|
boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
|
|
21
|
+
[CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
|
|
20
22
|
':focus': {
|
|
21
23
|
outline: 'none'
|
|
22
24
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
+
var _css;
|
|
3
5
|
/** @jsx jsx */
|
|
4
6
|
import { forwardRef, useMemo, useState } from 'react';
|
|
5
7
|
import { css, jsx } from '@emotion/react';
|
|
@@ -7,21 +9,21 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
|
7
9
|
import { Popper } from '@atlaskit/popper';
|
|
8
10
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
9
11
|
import { layers } from '@atlaskit/theme/constants';
|
|
12
|
+
import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
|
|
10
13
|
import { RepositionOnUpdate } from './reposition-on-update';
|
|
11
14
|
import { useCloseManager } from './use-close-manager';
|
|
12
15
|
import { useFocusManager } from './use-focus-manager';
|
|
13
|
-
var popupStyles = css({
|
|
16
|
+
var popupStyles = css((_css = {
|
|
14
17
|
display: 'block',
|
|
15
18
|
boxSizing: 'border-box',
|
|
16
19
|
zIndex: layers.layer(),
|
|
17
20
|
flex: '1 1 auto',
|
|
18
21
|
backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
|
|
19
22
|
borderRadius: "var(--ds-border-radius, 3px)",
|
|
20
|
-
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
|
|
23
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
|
|
24
|
+
}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, ':focus', {
|
|
25
|
+
outline: 'none'
|
|
26
|
+
}), _css), !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
|
|
25
27
|
overflow: 'auto'
|
|
26
28
|
});
|
|
27
29
|
var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.3",
|
|
4
4
|
"description": "A popup displays brief content in an overlay.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@atlaskit/popper": "^5.5.0",
|
|
41
41
|
"@atlaskit/portal": "^4.3.0",
|
|
42
42
|
"@atlaskit/theme": "^12.5.0",
|
|
43
|
-
"@atlaskit/tokens": "^1.
|
|
43
|
+
"@atlaskit/tokens": "^1.18.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@emotion/react": "^11.7.1",
|
|
46
46
|
"bind-event-listener": "^2.1.1",
|
|
@@ -52,7 +52,8 @@
|
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@af/accessibility-testing": "*",
|
|
55
|
-
"@
|
|
55
|
+
"@af/visual-regression": "*",
|
|
56
|
+
"@atlaskit/button": "^16.9.0",
|
|
56
57
|
"@atlaskit/icon": "^21.12.0",
|
|
57
58
|
"@atlaskit/ssr": "*",
|
|
58
59
|
"@atlaskit/visual-regression": "*",
|
package/dist/cjs/version.json
DELETED
package/dist/es2019/version.json
DELETED