@atlaskit/portal 4.9.3 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/portal
 
+## 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
+
+- [#165531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165531)
+  [`57f451bda8919`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f451bda8919) -
+  Adds side-effect config to support Compiled css extraction in third-party apps
+
 ## 4.9.3
 
 ### 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.3",
+	"version": "4.10.0",
 	"description": "A wrapper for rendering components in React portals.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,7 +20,9 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
@@ -46,11 +48,11 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
-		"@atlaskit/ds-lib": "^3.1.0",
-		"@atlaskit/modal-dialog": "^12.17.0",
+		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/modal-dialog": "^12.18.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/tokens": "^2.0.0",
-		"@atlaskit/tooltip": "^18.8.0",
+		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "^0.2.0",
 		"@emotion/react": "^11.7.1",
@@ -58,7 +60,7 @@
 		"@testing-library/react-hooks": "^8.0.1",
 		"bind-event-listener": "^3.0.0",
 		"raf-stub": "^2.0.1",
-		"storybook-addon-performance": "^0.16.0",
+		"storybook-addon-performance": "^0.17.3",
 		"typescript": "~5.4.2"
 	},
 	"keywords": [
@@ -90,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/types/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/types.js",
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/types.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {