@atlaskit/popup 6.3.2 → 6.3.4
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 +18 -0
- package/dist/cjs/compositional/popup-content-top-layer.js +1 -1
- package/dist/cjs/popper-wrapper.js +1 -1
- package/dist/cjs/popup-top-layer.js +1 -1
- package/dist/cjs/popup.js +1 -1
- package/dist/cjs/use-appearance.js +11 -3
- package/dist/es2019/compositional/popup-content-top-layer.js +1 -1
- package/dist/es2019/popper-wrapper.js +1 -1
- package/dist/es2019/popup-top-layer.js +1 -1
- package/dist/es2019/popup.js +1 -1
- package/dist/es2019/use-appearance.js +11 -3
- package/dist/esm/compositional/popup-content-top-layer.js +1 -1
- package/dist/esm/popper-wrapper.js +1 -1
- package/dist/esm/popup-top-layer.js +1 -1
- package/dist/esm/popup.js +1 -1
- package/dist/esm/use-appearance.js +11 -3
- package/package.json +6 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/popup
|
|
2
2
|
|
|
3
|
+
## 6.3.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`345efa8128cb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/345efa8128cb2) -
|
|
8
|
+
Behind platform_dst_popup_media_query_perf_fix Popups with the default appearance no longer cause
|
|
9
|
+
state changes across the below.sm viewport media query Popups with the UNSAFE_modal-below-sm
|
|
10
|
+
appearance (modal) still cause the state change This was done to fix popup heavy pages stuttering
|
|
11
|
+
on resizing, as the state change was causing unnecessary re-renders
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 6.3.3
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [`13fcd5b800ea9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13fcd5b800ea9) -
|
|
19
|
+
Cleaned up new shape theme styles, making new border and radius values the default.
|
|
20
|
+
|
|
3
21
|
## 6.3.2
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/dist/cjs/popup.js
CHANGED
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.usePopupAppearance = usePopupAppearance;
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
9
|
var _react = require("react");
|
|
10
|
+
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
10
11
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
11
12
|
/**
|
|
12
13
|
* **usePopupAppearance()**
|
|
@@ -19,14 +20,21 @@ var _compiled = require("@atlaskit/primitives/compiled");
|
|
|
19
20
|
function usePopupAppearance(_ref) {
|
|
20
21
|
var _appearance = _ref.appearance,
|
|
21
22
|
_shouldRenderToParent = _ref.shouldRenderToParent;
|
|
22
|
-
var
|
|
23
|
+
var canBecomeModal = _appearance === 'UNSAFE_modal-below-sm';
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* This gate removes unnecessary state changes across the below-sm boundary
|
|
27
|
+
* The state change is only needed if the popup can become a modal - and this is maintained
|
|
28
|
+
*/
|
|
29
|
+
var shouldUseMediaQuery = !(0, _fg.fg)('platform_dst_popup_media_query_perf_fix') || canBecomeModal;
|
|
30
|
+
var mq = (0, _compiled.UNSAFE_useMediaQuery)('below.sm', shouldUseMediaQuery ? function (e) {
|
|
23
31
|
setIsSmallViewport(!!e.matches);
|
|
24
|
-
});
|
|
32
|
+
} : undefined);
|
|
25
33
|
var _useState = (0, _react.useState)(!!(mq !== null && mq !== void 0 && mq.matches)),
|
|
26
34
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
27
35
|
isSmallViewport = _useState2[0],
|
|
28
36
|
setIsSmallViewport = _useState2[1];
|
|
29
|
-
var appearance =
|
|
37
|
+
var appearance = canBecomeModal && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
|
|
30
38
|
var shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
|
|
31
39
|
return {
|
|
32
40
|
appearance: appearance,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* popup-content-top-layer.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./popup-content-top-layer.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* popup-top-layer.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* popup-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./popup-top-layer.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
package/dist/es2019/popup.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
2
3
|
import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
|
|
3
4
|
|
|
4
5
|
/**
|
|
@@ -13,11 +14,18 @@ export function usePopupAppearance({
|
|
|
13
14
|
appearance: _appearance,
|
|
14
15
|
shouldRenderToParent: _shouldRenderToParent
|
|
15
16
|
}) {
|
|
16
|
-
const
|
|
17
|
+
const canBecomeModal = _appearance === 'UNSAFE_modal-below-sm';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* This gate removes unnecessary state changes across the below-sm boundary
|
|
21
|
+
* The state change is only needed if the popup can become a modal - and this is maintained
|
|
22
|
+
*/
|
|
23
|
+
const shouldUseMediaQuery = !fg('platform_dst_popup_media_query_perf_fix') || canBecomeModal;
|
|
24
|
+
const mq = useMediaQuery('below.sm', shouldUseMediaQuery ? e => {
|
|
17
25
|
setIsSmallViewport(!!e.matches);
|
|
18
|
-
});
|
|
26
|
+
} : undefined);
|
|
19
27
|
const [isSmallViewport, setIsSmallViewport] = useState(!!(mq !== null && mq !== void 0 && mq.matches));
|
|
20
|
-
const appearance =
|
|
28
|
+
const appearance = canBecomeModal && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
|
|
21
29
|
const shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
|
|
22
30
|
return {
|
|
23
31
|
appearance,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* popup-content-top-layer.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./popup-content-top-layer.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* popper-wrapper.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* popper-wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* popup-top-layer.tsx generated by @compiled/babel-plugin
|
|
1
|
+
/* popup-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./popup-top-layer.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
package/dist/esm/popup.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
3
4
|
import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
|
|
4
5
|
|
|
5
6
|
/**
|
|
@@ -13,14 +14,21 @@ import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/comp
|
|
|
13
14
|
export function usePopupAppearance(_ref) {
|
|
14
15
|
var _appearance = _ref.appearance,
|
|
15
16
|
_shouldRenderToParent = _ref.shouldRenderToParent;
|
|
16
|
-
var
|
|
17
|
+
var canBecomeModal = _appearance === 'UNSAFE_modal-below-sm';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* This gate removes unnecessary state changes across the below-sm boundary
|
|
21
|
+
* The state change is only needed if the popup can become a modal - and this is maintained
|
|
22
|
+
*/
|
|
23
|
+
var shouldUseMediaQuery = !fg('platform_dst_popup_media_query_perf_fix') || canBecomeModal;
|
|
24
|
+
var mq = useMediaQuery('below.sm', shouldUseMediaQuery ? function (e) {
|
|
17
25
|
setIsSmallViewport(!!e.matches);
|
|
18
|
-
});
|
|
26
|
+
} : undefined);
|
|
19
27
|
var _useState = useState(!!(mq !== null && mq !== void 0 && mq.matches)),
|
|
20
28
|
_useState2 = _slicedToArray(_useState, 2),
|
|
21
29
|
isSmallViewport = _useState2[0],
|
|
22
30
|
setIsSmallViewport = _useState2[1];
|
|
23
|
-
var appearance =
|
|
31
|
+
var appearance = canBecomeModal && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
|
|
24
32
|
var shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
|
|
25
33
|
return {
|
|
26
34
|
appearance: appearance,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popup",
|
|
3
|
-
"version": "6.3.
|
|
3
|
+
"version": "6.3.4",
|
|
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/portal": "^6.4.0",
|
|
41
41
|
"@atlaskit/primitives": "^22.5.0",
|
|
42
42
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
43
|
-
"@atlaskit/tokens": "^16.
|
|
43
|
+
"@atlaskit/tokens": "^16.12.0",
|
|
44
44
|
"@atlaskit/top-layer": "^4.4.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|
|
46
46
|
"@compiled/react": "^1.0.2",
|
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
"@atlassian/ssr-tests": "workspace:^",
|
|
79
79
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
80
80
|
"@atlassian/testing-library": "^0.11.0",
|
|
81
|
+
"@atlassian/workbench": "workspace:*",
|
|
81
82
|
"ast-types": "^0.13.3",
|
|
82
83
|
"jscodeshift": "^17.0.0",
|
|
83
84
|
"raf-stub": "^2.0.1",
|
|
@@ -116,6 +117,9 @@
|
|
|
116
117
|
},
|
|
117
118
|
"platform_dst-popup-trigger-initial-focus-ref": {
|
|
118
119
|
"type": "boolean"
|
|
120
|
+
},
|
|
121
|
+
"platform_dst_popup_media_query_perf_fix": {
|
|
122
|
+
"type": "boolean"
|
|
119
123
|
}
|
|
120
124
|
},
|
|
121
125
|
"homepage": "https://atlassian.design/components/popup/"
|