@atlaskit/portal 5.0.2 → 5.1.1
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 +17 -0
- package/dist/cjs/internal/components/internal-portal-new.js +7 -10
- package/dist/cjs/portal.js +0 -2
- package/dist/es2019/internal/components/internal-portal-new.js +6 -8
- package/dist/es2019/portal.js +0 -2
- package/dist/esm/internal/components/internal-portal-new.js +6 -8
- package/dist/esm/portal.js +0 -2
- package/package.json +22 -23
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/portal
|
|
2
2
|
|
|
3
|
+
## 5.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#175845](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175845)
|
|
8
|
+
[`e553e0b7cb828`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e553e0b7cb828) -
|
|
9
|
+
Updated dev dependencies
|
|
10
|
+
|
|
11
|
+
## 5.1.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#124073](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124073)
|
|
16
|
+
[`97804593b5afb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/97804593b5afb) -
|
|
17
|
+
Adds a React.Suspense boundary around Portal children to avoid bugs in React 18 concurrency (after
|
|
18
|
+
validating through internal feature gates)
|
|
19
|
+
|
|
3
20
|
## 5.0.2
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -9,11 +9,9 @@ exports.default = InternalPortalNew;
|
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _reactDom = require("react-dom");
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
12
|
var _useIsomorphicLayoutEffect = require("../hooks/use-isomorphic-layout-effect");
|
|
14
13
|
var _portalDomUtils = require("../utils/portal-dom-utils");
|
|
15
|
-
function
|
|
16
|
-
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; }
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
17
15
|
function InternalPortalNew(props) {
|
|
18
16
|
var zIndex = props.zIndex,
|
|
19
17
|
children = props.children;
|
|
@@ -38,13 +36,12 @@ function InternalPortalNew(props) {
|
|
|
38
36
|
}, [zIndex]);
|
|
39
37
|
|
|
40
38
|
/**
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
* suspense boundary _outside_ a portal, our portal gets in an infinite loop of re-rendering.
|
|
39
|
+
* We wrap portal children with a Suspense boundary because in React 18 concurrent,
|
|
40
|
+
* if you suspend from _within_ a portal to a Suspense boundary _outside_ the portal,
|
|
41
|
+
* our portal gets in an infinite loop of rendering.
|
|
45
42
|
*/
|
|
46
|
-
var
|
|
43
|
+
var suspendedChildren = /*#__PURE__*/_react.default.createElement(_react.Suspense, {
|
|
47
44
|
fallback: null
|
|
48
|
-
}, children)
|
|
49
|
-
return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(
|
|
45
|
+
}, children);
|
|
46
|
+
return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(suspendedChildren, atlaskitPortal) : null;
|
|
50
47
|
}
|
package/dist/cjs/portal.js
CHANGED
|
@@ -19,8 +19,6 @@ function Portal(_ref) {
|
|
|
19
19
|
mountStrategy = _ref$mountStrategy === void 0 ? 'effect' : _ref$mountStrategy;
|
|
20
20
|
var isSubsequentRender = (0, _useIsSubsequentRender.default)(mountStrategy);
|
|
21
21
|
(0, _usePortalEvent.default)(zIndex);
|
|
22
|
-
|
|
23
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
24
22
|
return !(0, _platformFeatureFlags.fg)('platform_design_system_team_portal_logic_r18_fix') ? isSubsequentRender ? /*#__PURE__*/_react.default.createElement(_internalPortal.default, {
|
|
25
23
|
zIndex: zIndex
|
|
26
24
|
}, children) : null : /*#__PURE__*/_react.default.createElement(_internalPortalNew.default, {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { Suspense, useState } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
3
|
import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
|
|
5
4
|
import { createAtlaskitPortal, createPortalParent } from '../utils/portal-dom-utils';
|
|
6
5
|
export default function InternalPortalNew(props) {
|
|
@@ -26,13 +25,12 @@ export default function InternalPortalNew(props) {
|
|
|
26
25
|
}, [zIndex]);
|
|
27
26
|
|
|
28
27
|
/**
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* suspense boundary _outside_ a portal, our portal gets in an infinite loop of re-rendering.
|
|
28
|
+
* We wrap portal children with a Suspense boundary because in React 18 concurrent,
|
|
29
|
+
* if you suspend from _within_ a portal to a Suspense boundary _outside_ the portal,
|
|
30
|
+
* our portal gets in an infinite loop of rendering.
|
|
33
31
|
*/
|
|
34
|
-
const
|
|
32
|
+
const suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
|
|
35
33
|
fallback: null
|
|
36
|
-
}, children)
|
|
37
|
-
return atlaskitPortal ? /*#__PURE__*/createPortal(
|
|
34
|
+
}, children);
|
|
35
|
+
return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;
|
|
38
36
|
}
|
package/dist/es2019/portal.js
CHANGED
|
@@ -11,8 +11,6 @@ export default function Portal({
|
|
|
11
11
|
}) {
|
|
12
12
|
const isSubsequentRender = useIsSubsequentRender(mountStrategy);
|
|
13
13
|
useFirePortalEvent(zIndex);
|
|
14
|
-
|
|
15
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
16
14
|
return !fg('platform_design_system_team_portal_logic_r18_fix') ? isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {
|
|
17
15
|
zIndex: zIndex
|
|
18
16
|
}, children) : null : /*#__PURE__*/React.createElement(InternalPortalNew, {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { Suspense, useState } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
|
|
6
5
|
import { createAtlaskitPortal, createPortalParent } from '../utils/portal-dom-utils';
|
|
7
6
|
export default function InternalPortalNew(props) {
|
|
@@ -28,13 +27,12 @@ export default function InternalPortalNew(props) {
|
|
|
28
27
|
}, [zIndex]);
|
|
29
28
|
|
|
30
29
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* suspense boundary _outside_ a portal, our portal gets in an infinite loop of re-rendering.
|
|
30
|
+
* We wrap portal children with a Suspense boundary because in React 18 concurrent,
|
|
31
|
+
* if you suspend from _within_ a portal to a Suspense boundary _outside_ the portal,
|
|
32
|
+
* our portal gets in an infinite loop of rendering.
|
|
35
33
|
*/
|
|
36
|
-
var
|
|
34
|
+
var suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
|
|
37
35
|
fallback: null
|
|
38
|
-
}, children)
|
|
39
|
-
return atlaskitPortal ? /*#__PURE__*/createPortal(
|
|
36
|
+
}, children);
|
|
37
|
+
return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;
|
|
40
38
|
}
|
package/dist/esm/portal.js
CHANGED
|
@@ -12,8 +12,6 @@ export default function Portal(_ref) {
|
|
|
12
12
|
mountStrategy = _ref$mountStrategy === void 0 ? 'effect' : _ref$mountStrategy;
|
|
13
13
|
var isSubsequentRender = useIsSubsequentRender(mountStrategy);
|
|
14
14
|
useFirePortalEvent(zIndex);
|
|
15
|
-
|
|
16
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
17
15
|
return !fg('platform_design_system_team_portal_logic_r18_fix') ? isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {
|
|
18
16
|
zIndex: zIndex
|
|
19
17
|
}, children) : null : /*#__PURE__*/React.createElement(InternalPortalNew, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/portal",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"description": "A wrapper for rendering components in React portals.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -46,26 +46,28 @@
|
|
|
46
46
|
"react-dom": "^18.2.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@af/accessibility-testing": "
|
|
50
|
-
"@af/integration-testing": "
|
|
51
|
-
"@atlaskit/button": "^
|
|
52
|
-
"@atlaskit/code": "^
|
|
53
|
-
"@atlaskit/
|
|
49
|
+
"@af/accessibility-testing": "workspace:^",
|
|
50
|
+
"@af/integration-testing": "workspace:^",
|
|
51
|
+
"@atlaskit/button": "^23.2.0",
|
|
52
|
+
"@atlaskit/code": "^17.2.0",
|
|
53
|
+
"@atlaskit/css": "^0.11.0",
|
|
54
|
+
"@atlaskit/docs": "^11.0.0",
|
|
54
55
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
55
|
-
"@atlaskit/flag": "^
|
|
56
|
-
"@atlaskit/icon": "^
|
|
57
|
-
"@atlaskit/inline-dialog": "^17.
|
|
58
|
-
"@atlaskit/link": "^3.
|
|
59
|
-
"@atlaskit/modal-dialog": "^
|
|
60
|
-
"@atlaskit/onboarding": "^
|
|
61
|
-
"@atlaskit/primitives": "^14.
|
|
62
|
-
"@atlaskit/section-message": "^8.
|
|
63
|
-
"@atlaskit/ssr": "
|
|
64
|
-
"@atlaskit/tokens": "^4.
|
|
65
|
-
"@atlaskit/tooltip": "^20.
|
|
66
|
-
"@atlaskit/visual-regression": "
|
|
56
|
+
"@atlaskit/flag": "^17.1.0",
|
|
57
|
+
"@atlaskit/icon": "^27.2.0",
|
|
58
|
+
"@atlaskit/inline-dialog": "^17.2.0",
|
|
59
|
+
"@atlaskit/link": "^3.2.0",
|
|
60
|
+
"@atlaskit/modal-dialog": "^14.2.0",
|
|
61
|
+
"@atlaskit/onboarding": "^14.2.0",
|
|
62
|
+
"@atlaskit/primitives": "^14.9.0",
|
|
63
|
+
"@atlaskit/section-message": "^8.2.0",
|
|
64
|
+
"@atlaskit/ssr": "workspace:^",
|
|
65
|
+
"@atlaskit/tokens": "^5.4.0",
|
|
66
|
+
"@atlaskit/tooltip": "^20.3.0",
|
|
67
|
+
"@atlaskit/visual-regression": "workspace:^",
|
|
67
68
|
"@atlassian/feature-flags-test-utils": "^0.3.0",
|
|
68
|
-
"@
|
|
69
|
+
"@atlassian/ssr-tests": "^0.2.0",
|
|
70
|
+
"@compiled/react": "^0.18.3",
|
|
69
71
|
"@testing-library/react": "^13.4.0",
|
|
70
72
|
"@testing-library/react-hooks": "^8.0.1",
|
|
71
73
|
"bind-event-listener": "^3.0.0",
|
|
@@ -93,7 +95,7 @@
|
|
|
93
95
|
"deprecation": "no-deprecated-imports",
|
|
94
96
|
"styling": [
|
|
95
97
|
"static",
|
|
96
|
-
"
|
|
98
|
+
"compiled"
|
|
97
99
|
]
|
|
98
100
|
}
|
|
99
101
|
},
|
|
@@ -101,9 +103,6 @@
|
|
|
101
103
|
"platform-feature-flags": {
|
|
102
104
|
"platform_design_system_team_portal_logic_r18_fix": {
|
|
103
105
|
"type": "boolean"
|
|
104
|
-
},
|
|
105
|
-
"platform_design_system_suspend_portal_children": {
|
|
106
|
-
"type": "boolean"
|
|
107
106
|
}
|
|
108
107
|
}
|
|
109
108
|
}
|