@atlaskit/portal - npm Package Compare versions

Comparing version 4.9.4 to 4.10.0

CHANGELOG.md

 # @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
@@ -4,0 +12,0 @@

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

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +10,9 @@ value: true
 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) {
@@ -36,3 +40,13 @@ var zIndex = props.zIndex,
   }, [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;
 }

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

@@ -1,3 +0,4 @@
-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';
@@ -26,3 +27,13 @@ import { createAtlaskitPortal, createPortalParent } from '../utils/portal-dom-utils';
   }, [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;
 }

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

 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';
@@ -28,3 +29,13 @@ import { createAtlaskitPortal, createPortalParent } from '../utils/portal-dom-utils';
   }, [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;
 }

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

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

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

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

package.json

 {
 	"name": "@atlaskit/portal",
-	"version": "4.9.4",
+	"version": "4.10.0",
 	"description": "A wrapper for rendering components in React portals.",
@@ -51,7 +51,7 @@ "publishConfig": {
 		"@af/integration-testing": "*",
-		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/modal-dialog": "^12.17.0",
+		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/modal-dialog": "^12.18.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/tokens": "^2.2.0",
-		"@atlaskit/tooltip": "^18.9.0",
+		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/tooltip": "^19.0.0",
 		"@atlaskit/visual-regression": "*",
@@ -96,4 +96,7 @@ "@atlassian/feature-flags-test-utils": "^0.2.0",
 			"type": "boolean"
+		},
+		"platform_design_system_suspend_portal_children": {
+			"type": "boolean"
 		}
 	}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unstable ownership

Supply chain risk

A new collaborator has begun publishing package versions. Package stability and security risk may be elevated.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81655

increased by3.83%

Lines of code

1039

increased by3.38%

Worsened metrics

Number of high supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes