@atlaskit/portal 4.2.12 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/portal
 
+## 4.3.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.13
+
+### Patch Changes
+
+- [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
+
 ## 4.2.12
 
 ### Patch Changes

package/README.md

@@ -1,11 +1,13 @@
 # Portal
 
-An Atlaskit wrapper for rendering components in React Portals.
+A wrapper for rendering components in React portals.
 
 ## Installation
 
+```sh
 yarn add @atlaskit/portal
+```
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/portal).
+[View documentation](https://atlassian.design/components/portal/).

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +22,5 @@ Object.defineProperty(exports, "default", {
     return _portal.default;
   }
 });
-
 var _portal = _interopRequireDefault(require("./portal"));
-
 var _constants = require("./constants");

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

@@ -4,23 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = InternalPortal;
-
 var _react = require("react");
-
 var _reactDom = require("react-dom");
-
 var _portalDomUtils = require("../utils/portal-dom-utils");
-
 function InternalPortal(props) {
   var zIndex = props.zIndex,
-      children = props.children;
+    children = props.children;
   var container = (0, _react.useMemo)(function () {
     return (0, _portalDomUtils.createContainer)(zIndex);
-  }, [zIndex]); // This is in the render method instead of useEffect so that
+  }, [zIndex]);
+
+  // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
   // For any further changes, ensure that the container does not have a
   // parent besides the portal parent.
-
   (0, _portalDomUtils.appendPortalContainerIfNotAppended)(container);
   (0, _react.useEffect)(function () {
     return function () {

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

@@ -1,27 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var useIsSubsequentRender = function useIsSubsequentRender() {
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isSubsequentRender = _useState2[0],
-      setIsSubsequentRender = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isSubsequentRender = _useState2[0],
+    setIsSubsequentRender = _useState2[1];
   (0, _react.useEffect)(function () {
     setIsSubsequentRender(true);
   }, []);
   return isSubsequentRender;
 };
-
 var _default = useIsSubsequentRender;
 exports.default = _default;

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _constants = require("../../constants");
-
 var _portalCustomEvent = _interopRequireDefault(require("../utils/portal-custom-event"));
-
 var useFirePortalEvent = function useFirePortalEvent(zIndex) {
   var zIndexNumber = Number(zIndex);
   (0, _react.useEffect)(function () {
@@ -22,6 +17,5 @@ var useFirePortalEvent = function useFirePortalEvent(zIndex) {
     };
   }, [zIndexNumber]);
 };
-
 var _default = useFirePortalEvent;
 exports.default = _default;

package/dist/cjs/internal/utils/portal-custom-event.js

@@ -15,23 +15,22 @@ var zIndexToName = {
   700: 'spotlight',
   800: 'tooltip'
 };
+
 /**
  * return layer name in Atlassian design system corresponding to given z-index
  * @param {number} zIndex - z-index value for which layer name is needed
  * @returns {LayerName | null} - The layer name for given z-index. If layer name is not found then null is returned
  */
-
 var getLayerName = function getLayerName(zIndex) {
   return zIndexToName.hasOwnProperty(zIndex) ? zIndexToName[zIndex] : null;
 };
+
 /**
  * Creates a PortalEvent object with given eventName, given zIndex and corresponding layer
  * @param {string} eventName - either of Mount or Unmount event name
  * @param {number} zIndex - z-index value which will be included in the event to be dispatched
  * @returns {PortalEvent} - The newly created PortalEvent object
  */
-
-
 var getEvent = function getEvent(eventName, zIndex) {
   var detail = {
     layer: getLayerName(Number(zIndex)),
@@ -41,13 +40,12 @@ var getEvent = function getEvent(eventName, zIndex) {
     detail: detail
   });
 };
+
 /**
  * Dispatches a custom event on window with given eventName, given zIndex and corresponding layer
  * @param {string} eventName - either of Mount or Unmount event name
  * @param {number} zIndex - z-index value which will be included in the event to be dispatched
  */
-
-
 function firePortalEvent(eventName, zIndex) {
   var event = getEvent(eventName, zIndex);
   window.dispatchEvent(event);

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

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.removePortalContainer = exports.createContainer = exports.appendPortalContainerIfNotAppended = void 0;
-
 var _constants = require("../constants");
-
 /**
  * Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
  * it is not be attached to any DOM node at this stage.
@@ -19,59 +17,50 @@ var createContainer = function createContainer(zIndex) {
   container.style.zIndex = "".concat(zIndex);
   return container;
 };
+
 /**
  * Returns document body element
  * @return {number} - The document body element
  */
-
-
 exports.createContainer = createContainer;
-
 var getBody = function getBody() {
   return document.body;
 };
+
 /**
  * Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'
  * @return {Element} - The portal parent container div element
  */
-
-
 var getPortalParent = function getPortalParent() {
   var parentElement = document.querySelector(_constants.portalParentSelector);
-
   if (!parentElement) {
     var parent = document.createElement('div');
-    parent.className = _constants.portalParentClassName; // we are setting display to flex because we want each portal to create a new stacking context
+    parent.className = _constants.portalParentClassName;
+    // we are setting display to flex because we want each portal to create a new stacking context
     // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
     parent.style.display = 'flex';
     getBody().appendChild(parent);
     return parent;
   }
-
   return parentElement;
 };
+
 /**
  * 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) {
   getPortalParent().removeChild(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) {
   if (!container.parentElement) {
     getPortalParent().appendChild(container);
   }
 };
-
 exports.appendPortalContainerIfNotAppended = appendPortalContainerIfNotAppended;

package/dist/cjs/portal.js

@@ -1,24 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Portal;
-
 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;
+    zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
+    children = props.children;
   var isSubsequentRender = (0, _useIsSubsequentRender.default)();
   (0, _usePortalEvent.default)(zIndex);
   return isSubsequentRender ? /*#__PURE__*/_react.default.createElement(_internalPortal.default, {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/portal",
-	"version": "4.2.12",
+	"version": "4.3.0",
 	"sideEffects": false
 }

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

@@ -6,11 +6,12 @@ export default function InternalPortal(props) {
     zIndex,
     children
   } = props;
-  const container = useMemo(() => createContainer(zIndex), [zIndex]); // This is in the render method instead of useEffect so that
+  const container = useMemo(() => createContainer(zIndex), [zIndex]);
+
+  // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
   // For any further changes, ensure that the container does not have a
   // parent besides the portal parent.
-
   appendPortalContainerIfNotAppended(container);
   useEffect(() => {
     return () => {

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

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-
 const useIsSubsequentRender = () => {
   const [isSubsequentRender, setIsSubsequentRender] = useState(false);
   useEffect(() => {
@@ -7,5 +6,4 @@ const useIsSubsequentRender = () => {
   }, []);
   return isSubsequentRender;
 };
-
 export default useIsSubsequentRender;

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

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../../constants';
 import firePortalEvent from '../utils/portal-custom-event';
-
 const useFirePortalEvent = zIndex => {
   const zIndexNumber = Number(zIndex);
   useEffect(() => {
@@ -11,5 +10,4 @@ const useFirePortalEvent = zIndex => {
     };
   }, [zIndexNumber]);
 };
-
 export default useFirePortalEvent;

package/dist/es2019/internal/utils/portal-custom-event.js

@@ -9,23 +9,22 @@ const zIndexToName = {
   700: 'spotlight',
   800: 'tooltip'
 };
+
 /**
  * return layer name in Atlassian design system corresponding to given z-index
  * @param {number} zIndex - z-index value for which layer name is needed
  * @returns {LayerName | null} - The layer name for given z-index. If layer name is not found then null is returned
  */
-
 const getLayerName = zIndex => {
   return zIndexToName.hasOwnProperty(zIndex) ? zIndexToName[zIndex] : null;
 };
+
 /**
  * Creates a PortalEvent object with given eventName, given zIndex and corresponding layer
  * @param {string} eventName - either of Mount or Unmount event name
  * @param {number} zIndex - z-index value which will be included in the event to be dispatched
  * @returns {PortalEvent} - The newly created PortalEvent object
  */
-
-
 const getEvent = (eventName, zIndex) => {
   const detail = {
     layer: getLayerName(Number(zIndex)),
@@ -35,13 +34,12 @@ const getEvent = (eventName, zIndex) => {
     detail
   });
 };
+
 /**
  * Dispatches a custom event on window with given eventName, given zIndex and corresponding layer
  * @param {string} eventName - either of Mount or Unmount event name
  * @param {number} zIndex - z-index value which will be included in the event to be dispatched
  */
-
-
 export default function firePortalEvent(eventName, zIndex) {
   const event = getEvent(eventName, zIndex);
   window.dispatchEvent(event);

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

@@ -1,60 +1,56 @@
 import { portalClassName, portalParentClassName, portalParentSelector } from '../constants';
+
 /**
  * Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
  * it is not be attached to any DOM node at this stage.
  * @param {number | string} zIndex - the z-index value of the newly created portal container element
  * @return {number} - The newly created container element
  */
-
 export const createContainer = zIndex => {
   const container = document.createElement('div');
   container.className = portalClassName;
   container.style.zIndex = `${zIndex}`;
   return container;
 };
+
 /**
  * Returns document body element
  * @return {number} - The document body element
  */
-
 const getBody = () => {
   return document.body;
 };
+
 /**
  * Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'
  * @return {Element} - The portal parent container div element
  */
-
-
 const getPortalParent = () => {
   const parentElement = document.querySelector(portalParentSelector);
-
   if (!parentElement) {
     const parent = document.createElement('div');
-    parent.className = portalParentClassName; // we are setting display to flex because we want each portal to create a new stacking context
+    parent.className = portalParentClassName;
+    // we are setting display to flex because we want each portal to create a new stacking context
     // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
     parent.style.display = 'flex';
     getBody().appendChild(parent);
     return parent;
   }
-
   return parentElement;
 };
+
 /**
  * Removes portal container from portal parent container
  *  @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
  */
-
-
 export const removePortalContainer = container => {
   getPortalParent().removeChild(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
  */
-
 export const appendPortalContainerIfNotAppended = container => {
   if (!container.parentElement) {
     getPortalParent().appendChild(container);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/portal",
-	"version": "4.2.12",
+	"version": "4.3.0",
 	"sideEffects": false
 }

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

@@ -3,14 +3,15 @@ import { createPortal } from 'react-dom';
 import { appendPortalContainerIfNotAppended, createContainer, removePortalContainer } from '../utils/portal-dom-utils';
 export default function InternalPortal(props) {
   var zIndex = props.zIndex,
-      children = props.children;
+    children = props.children;
   var container = useMemo(function () {
     return createContainer(zIndex);
-  }, [zIndex]); // This is in the render method instead of useEffect so that
+  }, [zIndex]);
+
+  // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
   // For any further changes, ensure that the container does not have a
   // parent besides the portal parent.
-
   appendPortalContainerIfNotAppended(container);
   useEffect(function () {
     return function () {

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

@@ -1,16 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useState } from 'react';
-
 var useIsSubsequentRender = function useIsSubsequentRender() {
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSubsequentRender = _useState2[0],
-      setIsSubsequentRender = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isSubsequentRender = _useState2[0],
+    setIsSubsequentRender = _useState2[1];
   useEffect(function () {
     setIsSubsequentRender(true);
   }, []);
   return isSubsequentRender;
 };
-
 export default useIsSubsequentRender;

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

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../../constants';
 import firePortalEvent from '../utils/portal-custom-event';
-
 var useFirePortalEvent = function useFirePortalEvent(zIndex) {
   var zIndexNumber = Number(zIndex);
   useEffect(function () {
@@ -11,5 +10,4 @@ var useFirePortalEvent = function useFirePortalEvent(zIndex) {
     };
   }, [zIndexNumber]);
 };
-
 export default useFirePortalEvent;

package/dist/esm/internal/utils/portal-custom-event.js

@@ -9,23 +9,22 @@ var zIndexToName = {
   700: 'spotlight',
   800: 'tooltip'
 };
+
 /**
  * return layer name in Atlassian design system corresponding to given z-index
  * @param {number} zIndex - z-index value for which layer name is needed
  * @returns {LayerName | null} - The layer name for given z-index. If layer name is not found then null is returned
  */
-
 var getLayerName = function getLayerName(zIndex) {
   return zIndexToName.hasOwnProperty(zIndex) ? zIndexToName[zIndex] : null;
 };
+
 /**
  * Creates a PortalEvent object with given eventName, given zIndex and corresponding layer
  * @param {string} eventName - either of Mount or Unmount event name
  * @param {number} zIndex - z-index value which will be included in the event to be dispatched
  * @returns {PortalEvent} - The newly created PortalEvent object
  */
-
-
 var getEvent = function getEvent(eventName, zIndex) {
   var detail = {
     layer: getLayerName(Number(zIndex)),
@@ -35,13 +34,12 @@ var getEvent = function getEvent(eventName, zIndex) {
     detail: detail
   });
 };
+
 /**
  * Dispatches a custom event on window with given eventName, given zIndex and corresponding layer
  * @param {string} eventName - either of Mount or Unmount event name
  * @param {number} zIndex - z-index value which will be included in the event to be dispatched
  */
-
-
 export default function firePortalEvent(eventName, zIndex) {
   var event = getEvent(eventName, zIndex);
   window.dispatchEvent(event);

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

@@ -1,60 +1,56 @@
 import { portalClassName, portalParentClassName, portalParentSelector } from '../constants';
+
 /**
  * Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
  * it is not be attached to any DOM node at this stage.
  * @param {number | string} zIndex - the z-index value of the newly created portal container element
  * @return {number} - The newly created container element
  */
-
 export var createContainer = function createContainer(zIndex) {
   var container = document.createElement('div');
   container.className = portalClassName;
   container.style.zIndex = "".concat(zIndex);
   return container;
 };
+
 /**
  * Returns document body element
  * @return {number} - The document body element
  */
-
 var getBody = function getBody() {
   return document.body;
 };
+
 /**
  * Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'
  * @return {Element} - The portal parent container div element
  */
-
-
 var getPortalParent = function getPortalParent() {
   var parentElement = document.querySelector(portalParentSelector);
-
   if (!parentElement) {
     var parent = document.createElement('div');
-    parent.className = portalParentClassName; // we are setting display to flex because we want each portal to create a new stacking context
+    parent.className = portalParentClassName;
+    // we are setting display to flex because we want each portal to create a new stacking context
     // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
     parent.style.display = 'flex';
     getBody().appendChild(parent);
     return parent;
   }
-
   return parentElement;
 };
+
 /**
  * Removes portal container from portal parent container
  *  @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
  */
-
-
 export var removePortalContainer = function removePortalContainer(container) {
   getPortalParent().removeChild(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
  */
-
 export var appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {
   if (!container.parentElement) {
     getPortalParent().appendChild(container);

package/dist/esm/portal.js

@@ -4,8 +4,8 @@ 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;
+    zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
+    children = props.children;
   var isSubsequentRender = useIsSubsequentRender();
   useFirePortalEvent(zIndex);
   return isSubsequentRender ? /*#__PURE__*/React.createElement(InternalPortal, {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/portal",
-	"version": "4.2.12",
+	"version": "4.3.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/portal",
-  "version": "4.2.12",
-  "description": "Atlaskit wrapper for rendering components in React portals",
+  "version": "4.3.0",
+  "description": "A wrapper for rendering components in React portals.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -12,23 +12,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
       "name": "Portal",
-      "category": "Components"
+      "category": "Libraries"
     }
   },
   "af:exports": {
@@ -36,7 +27,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.5.0",
     "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {
@@ -44,18 +35,24 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/banner": "^12.1.0",
+    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/code": "^14.6.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/flag": "^14.7.0",
-    "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/inline-dialog": "^13.4.0",
-    "@atlaskit/modal-dialog": "^12.4.0",
-    "@atlaskit/onboarding": "^10.6.0",
+    "@atlaskit/flag": "^15.2.0",
+    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/image": "^1.1.0",
+    "@atlaskit/inline-dialog": "^13.6.0",
+    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/onboarding": "^10.8.0",
+    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tooltip": "^17.8.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",
     "bind-event-listener": "^2.1.1",
     "enzyme": "^3.10.0",
@@ -77,8 +74,10 @@
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
-      "theming": "tokens",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "deprecation": "no-deprecated-imports",
       "styling": [
         "static",
@@ -86,6 +85,6 @@
       ]
     }
   },
-  "homepage": "https://atlaskit.atlassian.com/packages/design-system/portal",
+  "homepage": "https://atlassian.design/components/portal/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -1,8 +1,17 @@
-## API Report File for "@atlaskit/portal".
+<!-- API Report Version: 2.3 -->
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+## API Report File for "@atlaskit/portal"
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 /// <reference types="react" />
@@ -10,38 +19,39 @@
 import type { Layers } from '@atlaskit/theme/types';
 import { default as React_2 } from 'react';
 
-/**
- * Named layers of all z-index used in the Atlassian Design System.
- */
-declare type LayerName = keyof Layers;
+// @public
+type LayerName = keyof Layers;
 
-declare function Portal(props: PortalProps): JSX.Element | null;
+// @public (undocumented)
+function Portal(props: PortalProps): JSX.Element | null;
 export default Portal;
 
-export declare const PORTAL_MOUNT_EVENT = 'akPortalMount';
+// @public (undocumented)
+export const PORTAL_MOUNT_EVENT = 'akPortalMount';
 
-export declare const PORTAL_UNMOUNT_EVENT = 'akPortalUnmount';
+// @public (undocumented)
+export const PORTAL_UNMOUNT_EVENT = 'akPortalUnmount';
 
-/**
- * Custom event object that will be fired when Atlassian Portal component is mounted and unmounted
- */
-export declare type PortalEvent = CustomEvent<PortalEventDetail>;
+// @public
+export type PortalEvent = CustomEvent<PortalEventDetail>;
 
-/**
- * Interface for event to be fired on Atlassian Portal component mount and unmount
- */
-declare interface PortalEventDetail {
+// @public
+interface PortalEventDetail {
+  // (undocumented)
   layer: LayerName | null;
+  // (undocumented)
   zIndex: number;
 }
 
-/**
- * Interface for props to be passed in Atlassian Portal component
- */
-export declare interface PortalProps {
+// @public
+export interface PortalProps {
+  // (undocumented)
   children: React_2.ReactNode;
+  // (undocumented)
   zIndex?: number | string;
 }
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/dist/types-ts4.0/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const PORTAL_MOUNT_EVENT = "akPortalMount";
-export declare const PORTAL_UNMOUNT_EVENT = "akPortalUnmount";

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { PortalEvent, PortalProps } from '../types';

package/dist/types-ts4.0/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './portal';
-export type { PortalEvent, PortalProps } from './types';
-export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from './constants';

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

@@ -1,7 +0,0 @@
-import { ReactPortal } from 'react';
-interface InternalPortalProps {
-    children: React.ReactNode;
-    zIndex: number | string;
-}
-export default function InternalPortal(props: InternalPortalProps): ReactPortal;
-export {};

package/dist/types-ts4.0/internal/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const portalParentClassName = "atlaskit-portal-container";
-export declare const portalParentSelector = "body > .atlaskit-portal-container";
-export declare const portalClassName = "atlaskit-portal";

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

@@ -1,2 +0,0 @@
-declare const useIsSubsequentRender: () => boolean;
-export default useIsSubsequentRender;

package/dist/types-ts4.0/internal/hooks/use-portal-event.d.ts

@@ -1,2 +0,0 @@
-declare const useFirePortalEvent: (zIndex: number | string) => void;
-export default useFirePortalEvent;

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

@@ -1,24 +0,0 @@
-import type { Layers } from '@atlaskit/theme/types';
-/**
- * Named layers of all z-index used in the Atlassian Design System.
- */
-export declare type LayerName = keyof Layers;
-/**
- * Creates a new type by reversing the key and values of the passed type
- * @param {T} T - the generic type to be reversed. Each members of it should be a Record in key-value form
- * @returns - The reversed type
- */
-declare type ReverseMap<T extends Record<keyof T, T[keyof T]>> = {
-    [P in T[keyof T]]: {
-        [K in keyof T]: T[K] extends P ? K : never;
-    }[keyof T];
-};
-export declare type ReversedLayers = ReverseMap<Layers>;
-/**
- * Interface for event to be fired on Atlassian Portal component mount and unmount
- */
-export interface PortalEventDetail {
-    layer: LayerName | null;
-    zIndex: number;
-}
-export {};

package/dist/types-ts4.0/internal/utils/portal-custom-event.d.ts

@@ -1,6 +0,0 @@
-/**
- * Dispatches a custom event on window with given eventName, given zIndex and corresponding layer
- * @param {string} eventName - either of Mount or Unmount event name
- * @param {number} zIndex - z-index value which will be included in the event to be dispatched
- */
-export default function firePortalEvent(eventName: string, zIndex: number): void;

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

@@ -1,17 +0,0 @@
-/**
- * Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
- * it is not be attached to any DOM node at this stage.
- * @param {number | string} zIndex - the z-index value of the newly created portal container element
- * @return {number} - The newly created container element
- */
-export declare const createContainer: (zIndex: number | string) => HTMLDivElement;
-/**
- * Removes portal container from portal parent container
- *  @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
- */
-export declare const removePortalContainer: (container: HTMLDivElement) => void;
-/**
- * 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
- */
-export declare const appendPortalContainerIfNotAppended: (container: HTMLDivElement) => void;

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

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

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { PortalEventDetail } from './internal/types';
-/**
- * Interface for props to be passed in Atlassian Portal component
- */
-export interface PortalProps {
-    children: React.ReactNode;
-    zIndex?: number | string;
-}
-/**
- * Custom event object that will be fired when Atlassian Portal component is mounted and unmounted
- */
-export declare type PortalEvent = CustomEvent<PortalEventDetail>;