@atlaskit/portal 4.9.4 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/portal
 
+## 4.11.0
+
+### Minor Changes
+
+- [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
+  [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
+  Update `React` from v16 to v18
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.10.0
+
+### Minor Changes
+
+- [`0e8e931171299`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e8e931171299) -
+  Testing behind a feature gate, adds a Suspense boundary to all created React 18 portals (also
+  behind a feature gate)
+
 ## 4.9.4
 
 ### Patch Changes

package/dist/cjs/internal/components/internal-portal-new.js

@@ -1,15 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = InternalPortalNew;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useIsomorphicLayoutEffect = require("../hooks/use-isomorphic-layout-effect");
 var _portalDomUtils = require("../utils/portal-dom-utils");
+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); }
+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; }
 function InternalPortalNew(props) {
   var zIndex = props.zIndex,
     children = props.children;
@@ -32,5 +36,15 @@ function InternalPortalNew(props) {
       setAtlaskitPortal(null);
     };
   }, [zIndex]);
-  return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(children, atlaskitPortal) : null;
+
+  /**
+   * Conditionally wrap ALL portal children with Suspense behind a feature gate for safe rollout.
+   *
+   * This is here because in React 18 concurrent, if you suspend from _within_ a portal to a
+   * suspense boundary _outside_ a portal, our portal gets in an infinite loop of re-rendering.
+   */
+  var conditionallySuspendedChildren = (0, _platformFeatureFlags.fg)('platform_design_system_suspend_portal_children') ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, children) : children;
+  return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(conditionallySuspendedChildren, atlaskitPortal) : null;
 }

package/dist/es2019/internal/components/internal-portal-new.js

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import React, { Suspense, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
 import { createAtlaskitPortal, createPortalParent } from '../utils/portal-dom-utils';
 export default function InternalPortalNew(props) {
@@ -23,5 +24,15 @@ export default function InternalPortalNew(props) {
       setAtlaskitPortal(null);
     };
   }, [zIndex]);
-  return atlaskitPortal ? /*#__PURE__*/createPortal(children, atlaskitPortal) : null;
+
+  /**
+   * Conditionally wrap ALL portal children with Suspense behind a feature gate for safe rollout.
+   *
+   * This is here because in React 18 concurrent, if you suspend from _within_ a portal to a
+   * suspense boundary _outside_ a portal, our portal gets in an infinite loop of re-rendering.
+   */
+  const conditionallySuspendedChildren = fg('platform_design_system_suspend_portal_children') ? /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, children) : children;
+  return atlaskitPortal ? /*#__PURE__*/createPortal(conditionallySuspendedChildren, atlaskitPortal) : null;
 }

package/dist/esm/internal/components/internal-portal-new.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { useState } from 'react';
+import React, { Suspense, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
 import { createAtlaskitPortal, createPortalParent } from '../utils/portal-dom-utils';
 export default function InternalPortalNew(props) {
@@ -25,5 +26,15 @@ export default function InternalPortalNew(props) {
       setAtlaskitPortal(null);
     };
   }, [zIndex]);
-  return atlaskitPortal ? /*#__PURE__*/createPortal(children, atlaskitPortal) : null;
+
+  /**
+   * Conditionally wrap ALL portal children with Suspense behind a feature gate for safe rollout.
+   *
+   * This is here because in React 18 concurrent, if you suspend from _within_ a portal to a
+   * suspense boundary _outside_ a portal, our portal gets in an infinite loop of re-rendering.
+   */
+  var conditionallySuspendedChildren = fg('platform_design_system_suspend_portal_children') ? /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, children) : children;
+  return atlaskitPortal ? /*#__PURE__*/createPortal(conditionallySuspendedChildren, atlaskitPortal) : null;
 }

package/dist/types/internal/components/internal-portal-new.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 interface InternalPortalProps {
     children: React.ReactNode;
     zIndex: number | string;
 }
-export default function InternalPortalNew(props: InternalPortalProps): import("react").ReactPortal | null;
+export default function InternalPortalNew(props: InternalPortalProps): React.ReactPortal | null;
 export {};

package/dist/types-ts4.5/internal/components/internal-portal-new.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 interface InternalPortalProps {
     children: React.ReactNode;
     zIndex: number | string;
 }
-export default function InternalPortalNew(props: InternalPortalProps): import("react").ReactPortal | null;
+export default function InternalPortalNew(props: InternalPortalProps): React.ReactPortal | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/portal",
-	"version": "4.9.4",
+	"version": "4.11.0",
 	"description": "A wrapper for rendering components in React portals.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/theme": "^14.0.0",
+		"@atlaskit/theme": "^14.1.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -48,15 +48,15 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
-		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/modal-dialog": "^12.17.0",
+		"@atlaskit/ds-lib": "^3.5.0",
+		"@atlaskit/modal-dialog": "^12.20.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/tokens": "^2.2.0",
-		"@atlaskit/tooltip": "^18.9.0",
+		"@atlaskit/tokens": "^3.3.0",
+		"@atlaskit/tooltip": "^19.1.0",
 		"@atlaskit/visual-regression": "*",
-		"@atlassian/feature-flags-test-utils": "^0.2.0",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@emotion/react": "^11.7.1",
-		"@testing-library/react": "^12.1.5",
+		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"bind-event-listener": "^3.0.0",
 		"raf-stub": "^2.0.1",
@@ -92,6 +92,9 @@
 	"platform-feature-flags": {
 		"platform_design_system_team_portal_logic_r18_fix": {
 			"type": "boolean"
+		},
+		"platform_design_system_suspend_portal_children": {
+			"type": "boolean"
 		}
 	}
 }

package/__perf__/default.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-import Portal from '../src';
-
-export default () => (
-	<Portal zIndex={100}>
-		<p>portal</p>
-	</Portal>
-);

package/__perf__/examples.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { token } from '@atlaskit/tokens';
-
-import Portal from '../src';
-
-const PortalPerformance = () => {
-	return (
-		<Portal zIndex={200}>
-			<div
-				style={{
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					position: 'absolute',
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					top: token('space.300', '24px'),
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					left: token('space.300', '24px'),
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					background: 'lightpink',
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					padding: token('space.300', '24px'),
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					borderRadius: '3px',
-					// this z-index is relative to the portal
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					zIndex: 1,
-				}}
-			>
-				<p>portal z-index: 200</p>
-				<p>element z-index: 1</p>
-			</div>
-		</Portal>
-	);
-};
-
-export default PortalPerformance;