@atlaskit/portal 5.0.2 → 5.1.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 CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/portal
2
2
 
3
+ ## 5.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#124073](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124073)
8
+ [`97804593b5afb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/97804593b5afb) -
9
+ Adds a React.Suspense boundary around Portal children to avoid bugs in React 18 concurrency (after
10
+ validating through internal feature gates)
11
+
3
12
  ## 5.0.2
4
13
 
5
14
  ### Patch Changes
@@ -9,7 +9,6 @@ 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
14
  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); }
@@ -38,13 +37,12 @@ function InternalPortalNew(props) {
38
37
  }, [zIndex]);
39
38
 
40
39
  /**
41
- * Conditionally wrap ALL portal children with Suspense behind a feature gate for safe rollout.
42
- *
43
- * This is here because in React 18 concurrent, if you suspend from _within_ a portal to a
44
- * suspense boundary _outside_ a portal, our portal gets in an infinite loop of re-rendering.
40
+ * We wrap portal children with a Suspense boundary because in React 18 concurrent,
41
+ * if you suspend from _within_ a portal to a Suspense boundary _outside_ the portal,
42
+ * our portal gets in an infinite loop of rendering.
45
43
  */
46
- var conditionallySuspendedChildren = (0, _platformFeatureFlags.fg)('platform_design_system_suspend_portal_children') ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
44
+ var suspendedChildren = /*#__PURE__*/_react.default.createElement(_react.Suspense, {
47
45
  fallback: null
48
- }, children) : children;
49
- return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(conditionallySuspendedChildren, atlaskitPortal) : null;
46
+ }, children);
47
+ return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(suspendedChildren, atlaskitPortal) : null;
50
48
  }
@@ -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
- * Conditionally wrap ALL portal children with Suspense behind a feature gate for safe rollout.
30
- *
31
- * This is here because in React 18 concurrent, if you suspend from _within_ a portal to a
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 conditionallySuspendedChildren = fg('platform_design_system_suspend_portal_children') ? /*#__PURE__*/React.createElement(Suspense, {
32
+ const suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
35
33
  fallback: null
36
- }, children) : children;
37
- return atlaskitPortal ? /*#__PURE__*/createPortal(conditionallySuspendedChildren, atlaskitPortal) : null;
34
+ }, children);
35
+ return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;
38
36
  }
@@ -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
- * Conditionally wrap ALL portal children with Suspense behind a feature gate for safe rollout.
32
- *
33
- * This is here because in React 18 concurrent, if you suspend from _within_ a portal to a
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 conditionallySuspendedChildren = fg('platform_design_system_suspend_portal_children') ? /*#__PURE__*/React.createElement(Suspense, {
34
+ var suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
37
35
  fallback: null
38
- }, children) : children;
39
- return atlaskitPortal ? /*#__PURE__*/createPortal(conditionallySuspendedChildren, atlaskitPortal) : null;
36
+ }, children);
37
+ return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;
40
38
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/portal",
3
- "version": "5.0.2",
3
+ "version": "5.1.0",
4
4
  "description": "A wrapper for rendering components in React portals.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -46,24 +46,24 @@
46
46
  "react-dom": "^18.2.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@af/accessibility-testing": "*",
50
- "@af/integration-testing": "*",
49
+ "@af/accessibility-testing": "^2.0.0",
50
+ "@af/integration-testing": "^0.5.0",
51
51
  "@atlaskit/button": "^21.1.0",
52
52
  "@atlaskit/code": "^16.0.0",
53
- "@atlaskit/docs": "*",
53
+ "@atlaskit/docs": "^10.0.0",
54
54
  "@atlaskit/ds-lib": "^4.0.0",
55
- "@atlaskit/flag": "^16.1.0",
55
+ "@atlaskit/flag": "^16.2.0",
56
56
  "@atlaskit/icon": "^24.1.0",
57
57
  "@atlaskit/inline-dialog": "^17.0.0",
58
58
  "@atlaskit/link": "^3.0.0",
59
59
  "@atlaskit/modal-dialog": "^13.0.0",
60
- "@atlaskit/onboarding": "^13.0.1",
60
+ "@atlaskit/onboarding": "^13.0.0",
61
61
  "@atlaskit/primitives": "^14.1.0",
62
- "@atlaskit/section-message": "^8.0.0",
63
- "@atlaskit/ssr": "*",
62
+ "@atlaskit/section-message": "^8.1.0",
63
+ "@atlaskit/ssr": "^0.4.0",
64
64
  "@atlaskit/tokens": "^4.3.0",
65
65
  "@atlaskit/tooltip": "^20.0.0",
66
- "@atlaskit/visual-regression": "*",
66
+ "@atlaskit/visual-regression": "^0.10.0",
67
67
  "@atlassian/feature-flags-test-utils": "^0.3.0",
68
68
  "@emotion/react": "^11.7.1",
69
69
  "@testing-library/react": "^13.4.0",
@@ -101,9 +101,6 @@
101
101
  "platform-feature-flags": {
102
102
  "platform_design_system_team_portal_logic_r18_fix": {
103
103
  "type": "boolean"
104
- },
105
- "platform_design_system_suspend_portal_children": {
106
- "type": "boolean"
107
104
  }
108
105
  }
109
106
  }