@atlaskit/portal 5.1.7 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/portal
 
+## 5.2.0
+
+### Minor Changes
+
+- [`a45bf2e086e1d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a45bf2e086e1d) -
+  We are testing AppProvider subtree theming capabilities behind a feature flag. This is still in
+  development but working under minimal conditions. If this change is successful it will be
+  available in a later release.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.8
+
+### Patch Changes
+
+- [`042005250a589`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/042005250a589) -
+  Typescript fixes
+
 ## 5.1.7
 
 ### Patch Changes
@@ -557,7 +577,6 @@
 
   Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies
   [6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
-
   - @atlaskit/docs@8.3.2
   - @atlaskit/visual-regression@0.1.9
   - @atlaskit/button@13.3.7
@@ -701,7 +720,6 @@ It is broken for ie11 if you are not polyfilling the `new Event` constructor
 - [patch][18dfac7332](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/18dfac7332):
 
   In this PR, we are:
-
   - Re-introducing dist build folders
   - Adding back cjs
   - Replacing es5 by cjs and es2015 by esm
@@ -770,14 +788,12 @@ It is broken for ie11 if you are not polyfilling the `new Event` constructor
 ## 3.0.1
 
 - [patch][b0ef06c685](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b0ef06c685):
-
   - This is just a safety release in case anything strange happened in in the previous one. See Pull
     Request #5942 for details
 
 ## 3.0.0
 
 - [major][dacfb81ca1](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/dacfb81ca1):
-
   - @atlaskit/portal has been converted to Typescript. Typescript consumers will now get static type
     safety. Flow types are no longer provided. No API or behavioural changes.
 
@@ -796,14 +812,12 @@ It is broken for ie11 if you are not polyfilling the `new Event` constructor
 ## 2.0.0
 
 - [major][7c17b35107](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/7c17b35107):
-
   - Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use
     this package, please ensure you use at least this version of react and react-dom.
 
 ## 1.0.0
 
 - [major][5b6b4d6a0f](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/5b6b4d6a0f):
-
   - This major release indicates that this package is no longer under dev preview but is ready for
     use
 
@@ -823,14 +837,12 @@ It is broken for ie11 if you are not polyfilling the `new Event` constructor
 ## 0.3.0
 
 - [minor][ce4e1b4780](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/ce4e1b4780):
-
   - zIndex prop now accepts string and number values. Portal consumers can now use css values like
     "unset" if needed.
 
 ## 0.2.2
 
 - [patch][98e11001ff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/98e11001ff):
-
   - Removes duplicate babel-runtime dependency
 
 ## 0.2.1
@@ -849,7 +861,6 @@ It is broken for ie11 if you are not polyfilling the `new Event` constructor
 ## 0.2.0
 
 - [minor][76299208e6](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/76299208e6):
-
   - Drop ES5 from all the flow modules
 
   ### Dropping CJS support in all @atlaskit packages
@@ -894,7 +905,6 @@ It is broken for ie11 if you are not polyfilling the `new Event` constructor
 ## 0.1.0
 
 - [minor][27cacd44ab](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/27cacd44ab):
-
   - Components inside Portal render after portal container element is attached to the DOM
 
 ## 0.0.18
@@ -949,13 +959,11 @@ It is broken for ie11 if you are not polyfilling the `new Event` constructor
 ## 0.0.14
 
 - [patch][1fb2c2a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1fb2c2a):
-
   - Fixed issue where tooltips and modals would initially render in the wrong location
 
 ## 0.0.13
 
 - [patch][3f5a4dd](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/3f5a4dd):
-
   - Replaces our own check for dom in ssr with exenv package
 
 ## 0.0.12

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

@@ -9,6 +9,8 @@ exports.default = InternalPortalNew;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
+var _appProvider = require("@atlaskit/app-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useIsomorphicLayoutEffect = require("../hooks/use-isomorphic-layout-effect");
 var _portalDomUtils = require("../utils/portal-dom-utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -19,6 +21,7 @@ function InternalPortalNew(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     atlaskitPortal = _useState2[0],
     setAtlaskitPortal = _useState2[1];
+  var colorMode = (0, _appProvider.useColorMode)();
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     var tempPortalContainer = (0, _portalDomUtils.createAtlaskitPortal)(zIndex);
     setAtlaskitPortal(tempPortalContainer);
@@ -42,6 +45,8 @@ function InternalPortalNew(props) {
    */
   var suspendedChildren = /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
-  }, children);
+  }, colorMode && (0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
+    defaultColorMode: colorMode
+  }, children) : children);
   return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(suspendedChildren, atlaskitPortal) : null;
 }

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

@@ -1,18 +1,23 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = InternalPortal;
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
+var _appProvider = require("@atlaskit/app-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portalDomUtils = require("../utils/portal-dom-utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function InternalPortal(props) {
   var zIndex = props.zIndex,
     children = props.children;
   var container = (0, _react.useMemo)(function () {
     return (0, _portalDomUtils.createContainer)(zIndex);
   }, [zIndex]);
+  var colorMode = (0, _appProvider.useColorMode)();
 
   // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
@@ -24,5 +29,7 @@ function InternalPortal(props) {
       (0, _portalDomUtils.removePortalContainer)(container);
     };
   }, [container]);
-  return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
+  return /*#__PURE__*/(0, _reactDom.createPortal)(colorMode && (0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
+    defaultColorMode: colorMode
+  }, children) : children, container);
 }

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

@@ -73,6 +73,7 @@ var createAtlaskitPortal = exports.createAtlaskitPortal = function createAtlaski
     atlaskitportal.style.zIndex = "".concat(zIndex);
     return atlaskitportal;
   }
+  return;
 };
 var createPortalParent = exports.createPortalParent = function createPortalParent() {
   //atlaskit-portal-container div
@@ -88,4 +89,5 @@ var createPortalParent = exports.createPortalParent = function createPortalParen
     }
     return parentElement;
   }
+  return;
 };

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

@@ -1,5 +1,7 @@
 import React, { Suspense, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
+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) {
@@ -8,6 +10,7 @@ export default function InternalPortalNew(props) {
     children
   } = props;
   const [atlaskitPortal, setAtlaskitPortal] = useState(null);
+  const colorMode = useColorMode();
   useIsomorphicLayoutEffect(() => {
     const tempPortalContainer = createAtlaskitPortal(zIndex);
     setAtlaskitPortal(tempPortalContainer);
@@ -31,6 +34,8 @@ export default function InternalPortalNew(props) {
    */
   const suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, children);
+  }, colorMode && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement(ThemeProvider, {
+    defaultColorMode: colorMode
+  }, children) : children);
   return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;
 }

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

@@ -1,5 +1,7 @@
-import { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { appendPortalContainerIfNotAppended, createContainer, removePortalContainer } from '../utils/portal-dom-utils';
 export default function InternalPortal(props) {
   const {
@@ -7,6 +9,7 @@ export default function InternalPortal(props) {
     children
   } = props;
   const container = useMemo(() => createContainer(zIndex), [zIndex]);
+  const colorMode = useColorMode();
 
   // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
@@ -18,5 +21,7 @@ export default function InternalPortal(props) {
       removePortalContainer(container);
     };
   }, [container]);
-  return /*#__PURE__*/createPortal(children, container);
+  return /*#__PURE__*/createPortal(colorMode && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement(ThemeProvider, {
+    defaultColorMode: colorMode
+  }, children) : children, container);
 }

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

@@ -68,6 +68,7 @@ export const createAtlaskitPortal = zIndex => {
     atlaskitportal.style.zIndex = `${zIndex}`;
     return atlaskitportal;
   }
+  return;
 };
 export const createPortalParent = () => {
   //atlaskit-portal-container div
@@ -83,4 +84,5 @@ export const createPortalParent = () => {
     }
     return parentElement;
   }
+  return;
 };

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

@@ -1,6 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { Suspense, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
+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) {
@@ -10,6 +12,7 @@ export default function InternalPortalNew(props) {
     _useState2 = _slicedToArray(_useState, 2),
     atlaskitPortal = _useState2[0],
     setAtlaskitPortal = _useState2[1];
+  var colorMode = useColorMode();
   useIsomorphicLayoutEffect(function () {
     var tempPortalContainer = createAtlaskitPortal(zIndex);
     setAtlaskitPortal(tempPortalContainer);
@@ -33,6 +36,8 @@ export default function InternalPortalNew(props) {
    */
   var suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, children);
+  }, colorMode && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement(ThemeProvider, {
+    defaultColorMode: colorMode
+  }, children) : children);
   return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;
 }

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

@@ -1,5 +1,7 @@
-import { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { appendPortalContainerIfNotAppended, createContainer, removePortalContainer } from '../utils/portal-dom-utils';
 export default function InternalPortal(props) {
   var zIndex = props.zIndex,
@@ -7,6 +9,7 @@ export default function InternalPortal(props) {
   var container = useMemo(function () {
     return createContainer(zIndex);
   }, [zIndex]);
+  var colorMode = useColorMode();
 
   // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
@@ -18,5 +21,7 @@ export default function InternalPortal(props) {
       removePortalContainer(container);
     };
   }, [container]);
-  return /*#__PURE__*/createPortal(children, container);
+  return /*#__PURE__*/createPortal(colorMode && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement(ThemeProvider, {
+    defaultColorMode: colorMode
+  }, children) : children, container);
 }

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

@@ -68,6 +68,7 @@ export var createAtlaskitPortal = function createAtlaskitPortal(zIndex) {
     atlaskitportal.style.zIndex = "".concat(zIndex);
     return atlaskitportal;
   }
+  return;
 };
 export var createPortalParent = function createPortalParent() {
   //atlaskit-portal-container div
@@ -83,4 +84,5 @@ export var createPortalParent = function createPortalParent() {
     }
     return parentElement;
   }
+  return;
 };

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

@@ -1,4 +1,4 @@
-import { type ReactPortal } from 'react';
+import React, { type ReactPortal } from 'react';
 interface InternalPortalProps {
     children: React.ReactNode;
     zIndex: number | string;

package/dist/types/portal.d.ts

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

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

@@ -1,4 +1,4 @@
-import { type ReactPortal } from 'react';
+import React, { type ReactPortal } from 'react';
 interface InternalPortalProps {
     children: React.ReactNode;
     zIndex: number | string;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/portal",
-	"version": "5.1.7",
+	"version": "5.2.0",
 	"description": "A wrapper for rendering components in React portals.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,6 +32,7 @@
 		}
 	},
 	"dependencies": {
+		"@atlaskit/app-provider": "^3.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^21.0.0",
 		"@babel/runtime": "^7.0.0"
@@ -44,27 +45,24 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.4.0",
-		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/css": "^0.14.0",
-		"@atlaskit/docs": "^11.1.0",
-		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/flag": "^17.4.0",
-		"@atlaskit/icon": "^28.2.0",
+		"@atlaskit/button": "^23.9.0",
+		"@atlaskit/code": "^17.4.0",
+		"@atlaskit/css": "^0.19.0",
+		"@atlaskit/docs": "^11.2.0",
+		"@atlaskit/flag": "^17.8.0",
+		"@atlaskit/icon": "^29.4.0",
 		"@atlaskit/inline-dialog": "^18.0.0",
-		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/modal-dialog": "^14.3.0",
-		"@atlaskit/onboarding": "^14.4.0",
-		"@atlaskit/primitives": "^14.14.0",
-		"@atlaskit/section-message": "^8.7.0",
-		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/tokens": "^6.3.0",
-		"@atlaskit/tooltip": "^20.4.0",
-		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@atlassian/ssr-tests": "^0.3.0",
-		"@compiled/react": "^0.18.3",
-		"@testing-library/react": "^13.4.0",
-		"@testing-library/react-hooks": "^8.0.1",
+		"@atlaskit/link": "^3.3.0",
+		"@atlaskit/modal-dialog": "^14.9.0",
+		"@atlaskit/onboarding": "^14.5.0",
+		"@atlaskit/primitives": "^17.0.0",
+		"@atlaskit/section-message": "^8.12.0",
+		"@atlaskit/tokens": "^9.1.0",
+		"@atlaskit/tooltip": "^20.13.0",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/ssr-tests": "workspace:^",
+		"@compiled/react": "^0.18.6",
+		"@testing-library/react": "^16.3.0",
 		"bind-event-listener": "^3.0.0",
 		"raf-stub": "^2.0.1"
 	},
@@ -97,6 +95,9 @@
 	"platform-feature-flags": {
 		"platform_design_system_team_portal_logic_r18_fix": {
 			"type": "boolean"
+		},
+		"platform_dst_subtree_theming": {
+			"type": "boolean"
 		}
 	}
 }