@atlaskit/portal 4.3.6 → 4.4.0

package/CHANGELOG.md

@@ -1,47 +1,53 @@
 # @atlaskit/portal
 
+## 4.4.0
+
+### Minor Changes
+
+- [#41817](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41817) [`76888385b72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76888385b72) - Add MountStrategy prop to specify mount strategy
+
 ## 4.3.6
 
 ### Patch Changes
 
-- [`f78ae454863`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f78ae454863) - Update tooltip z-index to 9999
+- [#39442](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39442) [`f78ae454863`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f78ae454863) - Update tooltip z-index to 9999
 - Updated dependencies
 
 ## 4.3.5
 
 ### Patch Changes
 
-- [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
+- [#38731](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38731) [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
 
 ## 4.3.4
 
 ### Patch Changes
 
-- [`33f10b7eb36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/33f10b7eb36) - Removing unused dependencies and dev dependencies
+- [#34445](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34445) [`33f10b7eb36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/33f10b7eb36) - Removing unused dependencies and dev dependencies
 
 ## 4.3.3
 
 ### Patch Changes
 
-- [`77766ad157d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/77766ad157d) - Enrol packages to push-model consumption in Jira.
+- [#34124](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34124) [`77766ad157d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/77766ad157d) - Enrol packages to push-model consumption in Jira.
 
 ## 4.3.2
 
 ### Patch Changes
 
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 
 ## 4.3.1
 
 ### Patch Changes
 
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 
 ## 4.3.0
 
 ### Minor Changes
 
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 
 ### Patch Changes
 
@@ -51,106 +57,106 @@
 
 ### Patch Changes
 
-- [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
+- [#32211](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32211) [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
 
 ## 4.2.12
 
 ### Patch Changes
 
-- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+- [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
 
 ## 4.2.11
 
 ### Patch Changes
 
-- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
 
 ## 4.2.10
 
 ### Patch Changes
 
-- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
 
 ## 4.2.9
 
 ### Patch Changes
 
-- [`d5f0b466415`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d5f0b466415) - Internal code change turning on new linting rules.
+- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`d5f0b466415`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d5f0b466415) - Internal code change turning on new linting rules.
 
 ## 4.2.8
 
 ### Patch Changes
 
-- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
+- [#22614](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22614) [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
 
 ## 4.2.7
 
 ### Patch Changes
 
-- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
 
 ## 4.2.6
 
 ### Patch Changes
 
-- [`b3e5a62a9e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3e5a62a9e3) - Adds `static` techstack to package, enforcing stricter style linting. In this case the package already satisfied this requirement so there have been no changes to styles.
+- [#20033](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20033) [`b3e5a62a9e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3e5a62a9e3) - Adds `static` techstack to package, enforcing stricter style linting. In this case the package already satisfied this requirement so there have been no changes to styles.
 
 ## 4.2.5
 
 ### Patch Changes
 
-- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Retains the portal wrapper in the DOM after the last portal is unmounted. This drastically reduces the style recalculations and improves performance for portalled elements.
+- [#14319](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/14319) [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Retains the portal wrapper in the DOM after the last portal is unmounted. This drastically reduces the style recalculations and improves performance for portalled elements.
 - Updated dependencies
 
 ## 4.2.4
 
 ### Patch Changes
 
-- [`cd34d8ca8ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd34d8ca8ea) - Internal wiring up to the tokens techstack, no code changes.
+- [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302) [`cd34d8ca8ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd34d8ca8ea) - Internal wiring up to the tokens techstack, no code changes.
 
 ## 4.2.3
 
 ### Patch Changes
 
-- [`ea086afdc2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea086afdc2d) - Fix bug where Portal was attached to the body after the children were rendered. Now Portal is attached before it's children are rendered.
+- [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837) [`ea086afdc2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea086afdc2d) - Fix bug where Portal was attached to the body after the children were rendered. Now Portal is attached before it's children are rendered.
 - Updated dependencies
 
 ## 4.2.2
 
 ### Patch Changes
 
-- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+- [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
 
 ## 4.2.1
 
 ### Patch Changes
 
-- [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
+- [#12167](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12167) [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
 
 ## 4.2.0
 
 ### Minor Changes
 
-- [`f6b951a51f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f6b951a51f2) - Removes usage of styled-components in favour of standardising on emotion
+- [#12170](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12170) [`f6b951a51f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f6b951a51f2) - Removes usage of styled-components in favour of standardising on emotion
 
 ## 4.1.2
 
 ### Patch Changes
 
-- [`28f40bac160`](https://bitbucket.org/atlassian/atlassian-frontend/commits/28f40bac160) - Updates targets for modal dialog in VR tests.
+- [#10569](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/10569) [`28f40bac160`](https://bitbucket.org/atlassian/atlassian-frontend/commits/28f40bac160) - Updates targets for modal dialog in VR tests.
 
 ## 4.1.1
 
 ### Patch Changes
 
-- [`8b360a4ac06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b360a4ac06) - NO-ISSUE Update modal dialog selector for VR & integration tests
+- [#10230](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/10230) [`8b360a4ac06`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b360a4ac06) - NO-ISSUE Update modal dialog selector for VR & integration tests
 - Updated dependencies
 
 ## 4.1.0
 
 ### Minor Changes
 
-- [`d4f0c36ac36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4f0c36ac36) - Converted class based portal component to functional component and dropped unused ie11 specific code
+- [#9083](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/9083) [`d4f0c36ac36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4f0c36ac36) - Converted class based portal component to functional component and dropped unused ie11 specific code
 
 ### Patch Changes
 
@@ -161,13 +167,13 @@
 
 ### Patch Changes
 
-- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
 
 ## 4.0.4
 
 ### Patch Changes
 
-- [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
+- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
   This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
   Also add `typescript` to `devDependencies` to denote version that the package was built with.
 
@@ -181,7 +187,7 @@
 
 ### Patch Changes
 
-- [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
+- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
 
   Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
   to prevent duplicates of tslib being bundled.
@@ -190,14 +196,14 @@
 
 ### Patch Changes
 
-- [`3414523d6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3414523d6f) - Rearange buttons order to align with design guidelines
+- [#3428](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3428) [`3414523d6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3414523d6f) - Rearange buttons order to align with design guidelines
 - [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
 
 ## 4.0.0
 
 ### Major Changes
 
-- [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
+- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
   For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
 
 ### Patch Changes
@@ -208,13 +214,13 @@
 
 ### Patch Changes
 
-- [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
+- [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
 
 ## 3.1.8
 
 ### Patch Changes
 
-- [`4069606178`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4069606178) - Change imports to comply with Atlassian conventions- Updated dependencies
+- [#1868](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/1868) [`4069606178`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4069606178) - Change imports to comply with Atlassian conventions- Updated dependencies
 
 ## 3.1.7
 

package/dist/cjs/constants.js

@@ -4,7 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PORTAL_UNMOUNT_EVENT = exports.PORTAL_MOUNT_EVENT = void 0;
-var PORTAL_MOUNT_EVENT = 'akPortalMount';
-exports.PORTAL_MOUNT_EVENT = PORTAL_MOUNT_EVENT;
-var PORTAL_UNMOUNT_EVENT = 'akPortalUnmount';
-exports.PORTAL_UNMOUNT_EVENT = PORTAL_UNMOUNT_EVENT;
+var PORTAL_MOUNT_EVENT = exports.PORTAL_MOUNT_EVENT = 'akPortalMount';
+var PORTAL_UNMOUNT_EVENT = exports.PORTAL_UNMOUNT_EVENT = 'akPortalUnmount';

package/dist/cjs/internal/constants.js

@@ -4,9 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.portalParentSelector = exports.portalParentClassName = exports.portalClassName = void 0;
-var portalParentClassName = 'atlaskit-portal-container';
-exports.portalParentClassName = portalParentClassName;
-var portalParentSelector = 'body > .atlaskit-portal-container';
-exports.portalParentSelector = portalParentSelector;
-var portalClassName = 'atlaskit-portal';
-exports.portalClassName = portalClassName;
+var portalParentClassName = exports.portalParentClassName = 'atlaskit-portal-container';
+var portalParentSelector = exports.portalParentSelector = 'body > .atlaskit-portal-container';
+var portalClassName = exports.portalClassName = 'atlaskit-portal';

package/dist/cjs/internal/hooks/use-is-subsequent-render.js

@@ -7,15 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var useIsSubsequentRender = function useIsSubsequentRender() {
+var _useIsomorphicLayoutEffect = require("./use-isomorphic-layout-effect");
+var useIsSubsequentRender = function useIsSubsequentRender(mountStrategy) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSubsequentRender = _useState2[0],
     setIsSubsequentRender = _useState2[1];
-  (0, _react.useEffect)(function () {
+  var _useState3 = (0, _react.useState)(function () {
+      return mountStrategy === 'layoutEffect' ? _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect : _react.useEffect;
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    useMountEffect = _useState4[0];
+  useMountEffect(function () {
     setIsSubsequentRender(true);
   }, []);
   return isSubsequentRender;
 };
-var _default = useIsSubsequentRender;
-exports.default = _default;
+var _default = exports.default = useIsSubsequentRender;

package/dist/cjs/internal/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsomorphicLayoutEffect = void 0;
+var _react = require("react");
+/**
+ * Needed to supress the SSR warning when running use layout effect on the server.
+ */
+var useIsomorphicLayoutEffect = exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;

package/dist/cjs/internal/hooks/use-portal-event.js

@@ -17,5 +17,4 @@ var useFirePortalEvent = function useFirePortalEvent(zIndex) {
     };
   }, [zIndexNumber]);
 };
-var _default = useFirePortalEvent;
-exports.default = _default;
+var _default = exports.default = useFirePortalEvent;

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

@@ -11,7 +11,7 @@ var _constants = require("../constants");
  * @param {number | string} zIndex - the z-index value of the newly created portal container element
  * @return {number} - The newly created container element
  */
-var createContainer = function createContainer(zIndex) {
+var createContainer = exports.createContainer = function createContainer(zIndex) {
   var container = document.createElement('div');
   container.className = _constants.portalClassName;
   container.style.zIndex = "".concat(zIndex);
@@ -22,7 +22,6 @@ var createContainer = function createContainer(zIndex) {
  * Returns document body element
  * @return {number} - The document body element
  */
-exports.createContainer = createContainer;
 var getBody = function getBody() {
   return document.body;
 };
@@ -49,7 +48,7 @@ var getPortalParent = function getPortalParent() {
  * Removes portal container from portal parent container
  *  @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
  */
-var removePortalContainer = function removePortalContainer(container) {
+var removePortalContainer = exports.removePortalContainer = function removePortalContainer(container) {
   getPortalParent().removeChild(container);
 };
 
@@ -57,10 +56,8 @@ var removePortalContainer = function removePortalContainer(container) {
  * Appends portal container to portal parent container if it hasn't already been done
  *  @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
  */
-exports.removePortalContainer = removePortalContainer;
-var appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {
+var appendPortalContainerIfNotAppended = exports.appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {
   if (!container.parentElement) {
     getPortalParent().appendChild(container);
   }
-};
-exports.appendPortalContainerIfNotAppended = appendPortalContainerIfNotAppended;
+};

package/dist/cjs/portal.js

@@ -9,11 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 var _internalPortal = _interopRequireDefault(require("./internal/components/internal-portal"));
 var _useIsSubsequentRender = _interopRequireDefault(require("./internal/hooks/use-is-subsequent-render"));
 var _usePortalEvent = _interopRequireDefault(require("./internal/hooks/use-portal-event"));
-function Portal(props) {
-  var _props$zIndex = props.zIndex,
-    zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
-    children = props.children;
-  var isSubsequentRender = (0, _useIsSubsequentRender.default)();
+function Portal(_ref) {
+  var _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 0 : _ref$zIndex,
+    children = _ref.children,
+    _ref$mountStrategy = _ref.mountStrategy,
+    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, {
     zIndex: zIndex

package/dist/es2019/internal/hooks/use-is-subsequent-render.js

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
-const useIsSubsequentRender = () => {
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+const useIsSubsequentRender = mountStrategy => {
   const [isSubsequentRender, setIsSubsequentRender] = useState(false);
-  useEffect(() => {
+  const [useMountEffect] = useState(() => mountStrategy === 'layoutEffect' ? useIsomorphicLayoutEffect : useEffect);
+  useMountEffect(() => {
     setIsSubsequentRender(true);
   }, []);
   return isSubsequentRender;

package/dist/es2019/internal/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+/**
+ * Needed to supress the SSR warning when running use layout effect on the server.
+ */
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/es2019/portal.js

@@ -2,12 +2,12 @@ import React from 'react';
 import InternalPortal from './internal/components/internal-portal';
 import useIsSubsequentRender from './internal/hooks/use-is-subsequent-render';
 import useFirePortalEvent from './internal/hooks/use-portal-event';
-export default function Portal(props) {
-  const {
-    zIndex = 0,
-    children
-  } = props;
-  const isSubsequentRender = useIsSubsequentRender();
+export default function Portal({
+  zIndex = 0,
+  children,
+  mountStrategy = 'effect'
+}) {
+  const isSubsequentRender = useIsSubsequentRender(mountStrategy);
   useFirePortalEvent(zIndex);
   return isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {
     zIndex: zIndex

package/dist/esm/internal/hooks/use-is-subsequent-render.js

@@ -1,11 +1,17 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useState } from 'react';
-var useIsSubsequentRender = function useIsSubsequentRender() {
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+var useIsSubsequentRender = function useIsSubsequentRender(mountStrategy) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSubsequentRender = _useState2[0],
     setIsSubsequentRender = _useState2[1];
-  useEffect(function () {
+  var _useState3 = useState(function () {
+      return mountStrategy === 'layoutEffect' ? useIsomorphicLayoutEffect : useEffect;
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    useMountEffect = _useState4[0];
+  useMountEffect(function () {
     setIsSubsequentRender(true);
   }, []);
   return isSubsequentRender;

package/dist/esm/internal/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+/**
+ * Needed to supress the SSR warning when running use layout effect on the server.
+ */
+export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/esm/portal.js

@@ -2,11 +2,13 @@ import React from 'react';
 import InternalPortal from './internal/components/internal-portal';
 import useIsSubsequentRender from './internal/hooks/use-is-subsequent-render';
 import useFirePortalEvent from './internal/hooks/use-portal-event';
-export default function Portal(props) {
-  var _props$zIndex = props.zIndex,
-    zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
-    children = props.children;
-  var isSubsequentRender = useIsSubsequentRender();
+export default function Portal(_ref) {
+  var _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 0 : _ref$zIndex,
+    children = _ref.children,
+    _ref$mountStrategy = _ref.mountStrategy,
+    mountStrategy = _ref$mountStrategy === void 0 ? 'effect' : _ref$mountStrategy;
+  var isSubsequentRender = useIsSubsequentRender(mountStrategy);
   useFirePortalEvent(zIndex);
   return isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {
     zIndex: zIndex

package/dist/types/internal/hooks/use-is-subsequent-render.d.ts

@@ -1,2 +1,3 @@
-declare const useIsSubsequentRender: () => boolean;
+import { MountStrategy } from '../types';
+declare const useIsSubsequentRender: (mountStrategy?: MountStrategy) => boolean;
 export default useIsSubsequentRender;

package/dist/types/internal/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from 'react';
+/**
+ * Needed to supress the SSR warning when running use layout effect on the server.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/types/internal/types.d.ts

@@ -21,4 +21,5 @@ export interface PortalEventDetail {
     layer: LayerName | null;
     zIndex: number;
 }
+export type MountStrategy = 'effect' | 'layoutEffect';
 export {};

package/dist/types/portal.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { PortalProps } from './types';
-export default function Portal(props: PortalProps): JSX.Element | null;
+export default function Portal({ zIndex, children, mountStrategy, }: PortalProps): JSX.Element | null;

package/dist/types/types.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
-import { PortalEventDetail } from './internal/types';
+import { MountStrategy, PortalEventDetail } from './internal/types';
 /**
  * Interface for props to be passed in Atlassian Portal component
  */
 export interface PortalProps {
     children: React.ReactNode;
     zIndex?: number | string;
+    /**
+     * Specify the mount strategy: useEffect or useLayoutEffect.
+     * Note: UseLayoutEffect can lead to performance issues and is discouraged.
+     */
+    mountStrategy?: MountStrategy;
 }
 /**
  * Custom event object that will be fired when Atlassian Portal component is mounted and unmounted

package/dist/types-ts4.5/internal/hooks/use-is-subsequent-render.d.ts

@@ -1,2 +1,3 @@
-declare const useIsSubsequentRender: () => boolean;
+import { MountStrategy } from '../types';
+declare const useIsSubsequentRender: (mountStrategy?: MountStrategy) => boolean;
 export default useIsSubsequentRender;

package/dist/types-ts4.5/internal/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from 'react';
+/**
+ * Needed to supress the SSR warning when running use layout effect on the server.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/types-ts4.5/internal/types.d.ts

@@ -21,4 +21,5 @@ export interface PortalEventDetail {
     layer: LayerName | null;
     zIndex: number;
 }
+export type MountStrategy = 'effect' | 'layoutEffect';
 export {};

package/dist/types-ts4.5/portal.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { PortalProps } from './types';
-export default function Portal(props: PortalProps): JSX.Element | null;
+export default function Portal({ zIndex, children, mountStrategy, }: PortalProps): JSX.Element | null;

package/dist/types-ts4.5/types.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
-import { PortalEventDetail } from './internal/types';
+import { MountStrategy, PortalEventDetail } from './internal/types';
 /**
  * Interface for props to be passed in Atlassian Portal component
  */
 export interface PortalProps {
     children: React.ReactNode;
     zIndex?: number | string;
+    /**
+     * Specify the mount strategy: useEffect or useLayoutEffect.
+     * Note: UseLayoutEffect can lead to performance issues and is discouraged.
+     */
+    mountStrategy?: MountStrategy;
 }
 /**
  * Custom event object that will be fired when Atlassian Portal component is mounted and unmounted

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/portal",
-  "version": "4.3.6",
+  "version": "4.4.0",
   "description": "A wrapper for rendering components in React portals.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,12 +48,13 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tokens": "^1.18.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/react": "^11.7.1",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "bind-event-listener": "^2.1.1",
     "raf-stub": "^2.0.1",
     "storybook-addon-performance": "^0.16.0",

package/report.api.md

@@ -24,7 +24,14 @@ import { default as React_2 } from 'react';
 type LayerName = keyof Layers;
 
 // @public (undocumented)
-function Portal(props: PortalProps): JSX.Element | null;
+type MountStrategy = 'effect' | 'layoutEffect';
+
+// @public (undocumented)
+function Portal({
+  zIndex,
+  children,
+  mountStrategy,
+}: PortalProps): JSX.Element | null;
 export default Portal;
 
 // @public (undocumented)
@@ -48,6 +55,7 @@ interface PortalEventDetail {
 export interface PortalProps {
   // (undocumented)
   children: React_2.ReactNode;
+  mountStrategy?: MountStrategy;
   // (undocumented)
   zIndex?: number | string;
 }

package/tmp/api-report-tmp.d.ts

@@ -13,7 +13,10 @@ import { default as React_2 } from 'react';
 type LayerName = keyof Layers;
 
 // @public (undocumented)
-function Portal(props: PortalProps): JSX.Element | null;
+type MountStrategy = 'effect' | 'layoutEffect';
+
+// @public (undocumented)
+function Portal({ zIndex, children, mountStrategy, }: PortalProps): JSX.Element | null;
 export default Portal;
 
 // @public (undocumented)
@@ -37,6 +40,7 @@ interface PortalEventDetail {
 export interface PortalProps {
     // (undocumented)
     children: React_2.ReactNode;
+    mountStrategy?: MountStrategy;
     // (undocumented)
     zIndex?: number | string;
 }