@atlaskit/portal 4.7.0 → 4.9.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/portal
 
+## 4.9.0
+
+### Minor Changes
+
+- [#129038](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129038)
+  [`7524331eed2c5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7524331eed2c5) -
+  New Portal logic for React 18 concurrent renderer behind a feature flag
+
+## 4.8.0
+
+### Minor Changes
+
+- [#127511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127511)
+  [`db30e29344013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db30e29344013) -
+  Widening range of `react` and `react-dom` peer dependencies from `^16.8.0 || ^17.0.0 || ~18.2.0`
+  to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
+
+  This change has been done to enable usage of `react@18.3` as well as to have a consistent peer
+  dependency range for `react` and `react-dom` for `/platform` packages.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.7.0
 
 ### Minor Changes

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InternalPortalNew;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _reactDom = require("react-dom");
+var _useIsomorphicLayoutEffect = require("../hooks/use-isomorphic-layout-effect");
+var _portalDomUtils = require("../utils/portal-dom-utils");
+function InternalPortalNew(props) {
+  var zIndex = props.zIndex,
+    children = props.children;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    atlaskitPortal = _useState2[0],
+    setAtlaskitPortal = _useState2[1];
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
+    var tempPortalContainer = (0, _portalDomUtils.createAtlaskitPortal)(zIndex);
+    setAtlaskitPortal(tempPortalContainer);
+    var portalParent = (0, _portalDomUtils.createPortalParent)();
+    if (!tempPortalContainer || !portalParent) {
+      return;
+    }
+    portalParent.appendChild(tempPortalContainer);
+    return function () {
+      if (tempPortalContainer) {
+        portalParent.removeChild(tempPortalContainer);
+      }
+      setAtlaskitPortal(null);
+    };
+  }, [zIndex]);
+  return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(children, atlaskitPortal) : null;
+}

package/dist/cjs/internal/utils/portal-dom-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removePortalContainer = exports.createContainer = exports.appendPortalContainerIfNotAppended = void 0;
+exports.removePortalContainer = exports.isDocumentDefined = exports.createPortalParent = exports.createContainer = exports.createAtlaskitPortal = exports.appendPortalContainerIfNotAppended = void 0;
 var _constants = require("../constants");
 /**
  * Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
@@ -61,4 +61,31 @@ var appendPortalContainerIfNotAppended = exports.appendPortalContainerIfNotAppen
   if (!container.parentElement) {
     getPortalParent().appendChild(container);
   }
+};
+var isDocumentDefined = exports.isDocumentDefined = function isDocumentDefined() {
+  return document !== undefined;
+};
+var createAtlaskitPortal = exports.createAtlaskitPortal = function createAtlaskitPortal(zIndex) {
+  //atlaskit-portal div
+  if (isDocumentDefined()) {
+    var atlaskitportal = document.createElement('div');
+    atlaskitportal.className = _constants.portalClassName;
+    atlaskitportal.style.zIndex = "".concat(zIndex);
+    return atlaskitportal;
+  }
+};
+var createPortalParent = exports.createPortalParent = function createPortalParent() {
+  //atlaskit-portal-container div
+  if (isDocumentDefined()) {
+    var parentElement = document.querySelector(_constants.portalParentSelector);
+    if (!parentElement) {
+      var _getBody2;
+      var parent = document.createElement('div');
+      parent.className = _constants.portalParentClassName;
+      parent.style.display = 'flex';
+      (_getBody2 = getBody()) === null || _getBody2 === void 0 || _getBody2.appendChild(parent);
+      return parent;
+    }
+    return parentElement;
+  }
 };

package/dist/cjs/portal.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Portal;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _internalPortal = _interopRequireDefault(require("./internal/components/internal-portal"));
+var _internalPortalNew = _interopRequireDefault(require("./internal/components/internal-portal-new"));
 var _useIsSubsequentRender = _interopRequireDefault(require("./internal/hooks/use-is-subsequent-render"));
 var _usePortalEvent = _interopRequireDefault(require("./internal/hooks/use-portal-event"));
 function Portal(_ref) {
@@ -17,7 +19,11 @@ function Portal(_ref) {
     mountStrategy = _ref$mountStrategy === void 0 ? 'effect' : _ref$mountStrategy;
   var isSubsequentRender = (0, _useIsSubsequentRender.default)(mountStrategy);
   (0, _usePortalEvent.default)(zIndex);
-  return isSubsequentRender ? /*#__PURE__*/_react.default.createElement(_internalPortal.default, {
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  return !(0, _platformFeatureFlags.fg)('dsp-19516-design-system-portal-logic-update') ? isSubsequentRender ? /*#__PURE__*/_react.default.createElement(_internalPortal.default, {
+    zIndex: zIndex
+  }, children) : null : /*#__PURE__*/_react.default.createElement(_internalPortalNew.default, {
     zIndex: zIndex
-  }, children) : null;
+  }, children);
 }

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

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
+import { createAtlaskitPortal, createPortalParent } from '../utils/portal-dom-utils';
+export default function InternalPortalNew(props) {
+  const {
+    zIndex,
+    children
+  } = props;
+  const [atlaskitPortal, setAtlaskitPortal] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    const tempPortalContainer = createAtlaskitPortal(zIndex);
+    setAtlaskitPortal(tempPortalContainer);
+    const portalParent = createPortalParent();
+    if (!tempPortalContainer || !portalParent) {
+      return;
+    }
+    portalParent.appendChild(tempPortalContainer);
+    return () => {
+      if (tempPortalContainer) {
+        portalParent.removeChild(tempPortalContainer);
+      }
+      setAtlaskitPortal(null);
+    };
+  }, [zIndex]);
+  return atlaskitPortal ? /*#__PURE__*/createPortal(children, atlaskitPortal) : null;
+}

package/dist/es2019/internal/utils/portal-dom-utils.js

@@ -56,4 +56,31 @@ export const appendPortalContainerIfNotAppended = container => {
   if (!container.parentElement) {
     getPortalParent().appendChild(container);
   }
+};
+export const isDocumentDefined = () => {
+  return document !== undefined;
+};
+export const createAtlaskitPortal = zIndex => {
+  //atlaskit-portal div
+  if (isDocumentDefined()) {
+    const atlaskitportal = document.createElement('div');
+    atlaskitportal.className = portalClassName;
+    atlaskitportal.style.zIndex = `${zIndex}`;
+    return atlaskitportal;
+  }
+};
+export const createPortalParent = () => {
+  //atlaskit-portal-container div
+  if (isDocumentDefined()) {
+    const parentElement = document.querySelector(portalParentSelector);
+    if (!parentElement) {
+      var _getBody2;
+      const parent = document.createElement('div');
+      parent.className = portalParentClassName;
+      parent.style.display = 'flex';
+      (_getBody2 = getBody()) === null || _getBody2 === void 0 ? void 0 : _getBody2.appendChild(parent);
+      return parent;
+    }
+    return parentElement;
+  }
 };

package/dist/es2019/portal.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import InternalPortal from './internal/components/internal-portal';
+import InternalPortalNew from './internal/components/internal-portal-new';
 import useIsSubsequentRender from './internal/hooks/use-is-subsequent-render';
 import useFirePortalEvent from './internal/hooks/use-portal-event';
 export default function Portal({
@@ -9,7 +11,11 @@ export default function Portal({
 }) {
   const isSubsequentRender = useIsSubsequentRender(mountStrategy);
   useFirePortalEvent(zIndex);
-  return isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  return !fg('dsp-19516-design-system-portal-logic-update') ? isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {
     zIndex: zIndex
-  }, children) : null;
+  }, children) : null : /*#__PURE__*/React.createElement(InternalPortalNew, {
+    zIndex: zIndex
+  }, children);
 }

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

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
+import { createAtlaskitPortal, createPortalParent } from '../utils/portal-dom-utils';
+export default function InternalPortalNew(props) {
+  var zIndex = props.zIndex,
+    children = props.children;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    atlaskitPortal = _useState2[0],
+    setAtlaskitPortal = _useState2[1];
+  useIsomorphicLayoutEffect(function () {
+    var tempPortalContainer = createAtlaskitPortal(zIndex);
+    setAtlaskitPortal(tempPortalContainer);
+    var portalParent = createPortalParent();
+    if (!tempPortalContainer || !portalParent) {
+      return;
+    }
+    portalParent.appendChild(tempPortalContainer);
+    return function () {
+      if (tempPortalContainer) {
+        portalParent.removeChild(tempPortalContainer);
+      }
+      setAtlaskitPortal(null);
+    };
+  }, [zIndex]);
+  return atlaskitPortal ? /*#__PURE__*/createPortal(children, atlaskitPortal) : null;
+}

package/dist/esm/internal/utils/portal-dom-utils.js

@@ -56,4 +56,31 @@ export var appendPortalContainerIfNotAppended = function appendPortalContainerIf
   if (!container.parentElement) {
     getPortalParent().appendChild(container);
   }
+};
+export var isDocumentDefined = function isDocumentDefined() {
+  return document !== undefined;
+};
+export var createAtlaskitPortal = function createAtlaskitPortal(zIndex) {
+  //atlaskit-portal div
+  if (isDocumentDefined()) {
+    var atlaskitportal = document.createElement('div');
+    atlaskitportal.className = portalClassName;
+    atlaskitportal.style.zIndex = "".concat(zIndex);
+    return atlaskitportal;
+  }
+};
+export var createPortalParent = function createPortalParent() {
+  //atlaskit-portal-container div
+  if (isDocumentDefined()) {
+    var parentElement = document.querySelector(portalParentSelector);
+    if (!parentElement) {
+      var _getBody2;
+      var parent = document.createElement('div');
+      parent.className = portalParentClassName;
+      parent.style.display = 'flex';
+      (_getBody2 = getBody()) === null || _getBody2 === void 0 || _getBody2.appendChild(parent);
+      return parent;
+    }
+    return parentElement;
+  }
 };

package/dist/esm/portal.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import InternalPortal from './internal/components/internal-portal';
+import InternalPortalNew from './internal/components/internal-portal-new';
 import useIsSubsequentRender from './internal/hooks/use-is-subsequent-render';
 import useFirePortalEvent from './internal/hooks/use-portal-event';
 export default function Portal(_ref) {
@@ -10,7 +12,11 @@ export default function Portal(_ref) {
     mountStrategy = _ref$mountStrategy === void 0 ? 'effect' : _ref$mountStrategy;
   var isSubsequentRender = useIsSubsequentRender(mountStrategy);
   useFirePortalEvent(zIndex);
-  return isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  return !fg('dsp-19516-design-system-portal-logic-update') ? isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {
     zIndex: zIndex
-  }, children) : null;
+  }, children) : null : /*#__PURE__*/React.createElement(InternalPortalNew, {
+    zIndex: zIndex
+  }, children);
 }

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

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

package/dist/types/internal/utils/portal-dom-utils.d.ts

@@ -15,3 +15,6 @@ export declare const removePortalContainer: (container: HTMLDivElement) => void;
  *  @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
  */
 export declare const appendPortalContainerIfNotAppended: (container: HTMLDivElement) => void;
+export declare const isDocumentDefined: () => boolean;
+export declare const createAtlaskitPortal: (zIndex: number | string) => HTMLDivElement | undefined;
+export declare const createPortalParent: () => Element | undefined;

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

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

package/dist/types-ts4.5/internal/utils/portal-dom-utils.d.ts

@@ -15,3 +15,6 @@ export declare const removePortalContainer: (container: HTMLDivElement) => void;
  *  @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
  */
 export declare const appendPortalContainerIfNotAppended: (container: HTMLDivElement) => void;
+export declare const isDocumentDefined: () => boolean;
+export declare const createAtlaskitPortal: (zIndex: number | string) => HTMLDivElement | undefined;
+export declare const createPortalParent: () => Element | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/portal",
-	"version": "4.7.0",
+	"version": "4.9.0",
 	"description": "A wrapper for rendering components in React portals.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,22 +39,24 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/theme": "^12.11.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/theme": "^12.12.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
-		"react-dom": "^16.8.0 || ^17.0.0 || ~18.2.0"
+		"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+		"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
-		"@atlaskit/ds-lib": "^2.3.0",
-		"@atlaskit/modal-dialog": "^12.14.0",
+		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/tokens": "^1.57.0",
-		"@atlaskit/tooltip": "^18.6.0",
+		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tooltip": "^18.7.0",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "^0.2.0",
 		"@emotion/react": "^11.7.1",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/react-hooks": "^8.0.1",
@@ -88,5 +90,10 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/portal/"
+	"homepage": "https://atlassian.design/components/portal/",
+	"platform-feature-flags": {
+		"dsp-19516-design-system-portal-logic-update": {
+			"type": "boolean"
+		}
+	}
 }