@atlaskit/portal 5.4.2 → 5.5.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/portal
 
+## 5.5.1
+
+### Patch Changes
+
+- [`8e2f0f5b6e5b9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e2f0f5b6e5b9) -
+  Fix portal wrapping portalled content with ThemeProvider when outside a ThemeProvider. Previously,
+  components like modal-dialog would always inject theme CSS variables into the DOM via a
+  portal-owned ThemeProvider, even when no ThemeProvider was present in the tree.
+- Updated dependencies
+
+## 5.5.0
+
+### Minor Changes
+
+- [`31b1ede297136`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/31b1ede297136) -
+  Autofix: add explicit package exports (barrel removal)
+
 ## 5.4.2
 
 ### Patch Changes

package/constants/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/portal/constants",
+  "main": "../dist/cjs/entry-points/constants.js",
+  "module": "../dist/esm/entry-points/constants.js",
+  "module:es2019": "../dist/es2019/entry-points/constants.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/constants.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/constants.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/entry-points/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PORTAL_MOUNT_EVENT", {
+  enumerable: true,
+  get: function get() {
+    return _constants.PORTAL_MOUNT_EVENT;
+  }
+});
+Object.defineProperty(exports, "PORTAL_UNMOUNT_EVENT", {
+  enumerable: true,
+  get: function get() {
+    return _constants.PORTAL_UNMOUNT_EVENT;
+  }
+});
+var _constants = require("../constants");

package/dist/cjs/entry-points/portal.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _portal.default;
+  }
+});
+var _portal = _interopRequireDefault(require("../portal"));

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

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _appProvider = require("@atlaskit/app-provider");
+var _useIsInsideThemeProvider = require("@atlaskit/app-provider/use-is-inside-theme-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useIsomorphicLayoutEffect = require("../hooks/use-isomorphic-layout-effect");
 var _createAtlaskitPortal = require("../utils/create-atlaskit-portal");
@@ -25,6 +26,7 @@ function InternalPortalNew(props) {
     atlaskitPortal = _useState2[0],
     setAtlaskitPortal = _useState2[1];
   var colorMode = (0, _appProvider.useColorMode)();
+  var isInsideThemeProvider = (0, _useIsInsideThemeProvider.useIsInsideThemeProvider)();
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     if ((0, _platformFeatureFlags.fg)('import_into_jsm_in_template_gallery_killswitch')) {
       if (!isClosed) {
@@ -67,7 +69,7 @@ function InternalPortalNew(props) {
    */
   var suspendedChildren = /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
-  }, colorMode ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
+  }, ((0, _platformFeatureFlags.fg)('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__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

@@ -8,6 +8,7 @@ exports.default = InternalPortal;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _appProvider = require("@atlaskit/app-provider");
+var _useIsInsideThemeProvider = require("@atlaskit/app-provider/use-is-inside-theme-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _appendPortalContainerIfNotAppended = require("../utils/append-portal-container-if-not-appended");
 var _createContainer = require("../utils/create-container");
@@ -22,6 +23,7 @@ function InternalPortal(props) {
     return (0, _createContainer.createContainer)(zIndex);
   }, [zIndex]);
   var colorMode = (0, _appProvider.useColorMode)();
+  var isInsideThemeProvider = (0, _useIsInsideThemeProvider.useIsInsideThemeProvider)();
 
   // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
@@ -40,7 +42,7 @@ function InternalPortal(props) {
       (0, _removePortalContainer.removePortalContainer)(container);
     };
   }, [container]);
-  return /*#__PURE__*/(0, _reactDom.createPortal)(colorMode ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
+  return /*#__PURE__*/(0, _reactDom.createPortal)(((0, _platformFeatureFlags.fg)('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
     defaultColorMode: colorMode
   }, children) : children, container);
 }

package/dist/es2019/entry-points/constants.js

@@ -0,0 +1 @@
+export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../constants';

package/dist/es2019/entry-points/portal.js

@@ -0,0 +1 @@
+export { default } from '../portal';

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

@@ -1,6 +1,7 @@
 import React, { Suspense, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
+import { useIsInsideThemeProvider } from '@atlaskit/app-provider/use-is-inside-theme-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
 import { createAtlaskitPortal } from '../utils/create-atlaskit-portal';
@@ -14,6 +15,7 @@ export default function InternalPortalNew(props) {
   } = props;
   const [atlaskitPortal, setAtlaskitPortal] = useState(null);
   const colorMode = useColorMode();
+  const isInsideThemeProvider = useIsInsideThemeProvider();
   useIsomorphicLayoutEffect(() => {
     if (fg('import_into_jsm_in_template_gallery_killswitch')) {
       if (!isClosed) {
@@ -56,7 +58,7 @@ export default function InternalPortalNew(props) {
    */
   const suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
+  }, (fg('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: colorMode
   }, children) : children);
   return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
+import { useIsInsideThemeProvider } from '@atlaskit/app-provider/use-is-inside-theme-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { appendPortalContainerIfNotAppended } from '../utils/append-portal-container-if-not-appended';
 import { createContainer } from '../utils/create-container';
@@ -13,6 +14,7 @@ export default function InternalPortal(props) {
   } = props;
   const container = useMemo(() => createContainer(zIndex), [zIndex]);
   const colorMode = useColorMode();
+  const isInsideThemeProvider = useIsInsideThemeProvider();
 
   // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
@@ -31,7 +33,7 @@ export default function InternalPortal(props) {
       removePortalContainer(container);
     };
   }, [container]);
-  return /*#__PURE__*/createPortal(colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
+  return /*#__PURE__*/createPortal((fg('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: colorMode
   }, children) : children, container);
 }

package/dist/esm/entry-points/constants.js

@@ -0,0 +1 @@
+export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../constants';

package/dist/esm/entry-points/portal.js

@@ -0,0 +1 @@
+export { default } from '../portal';

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

@@ -2,6 +2,7 @@ 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 { useIsInsideThemeProvider } from '@atlaskit/app-provider/use-is-inside-theme-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
 import { createAtlaskitPortal } from '../utils/create-atlaskit-portal';
@@ -16,6 +17,7 @@ export default function InternalPortalNew(props) {
     atlaskitPortal = _useState2[0],
     setAtlaskitPortal = _useState2[1];
   var colorMode = useColorMode();
+  var isInsideThemeProvider = useIsInsideThemeProvider();
   useIsomorphicLayoutEffect(function () {
     if (fg('import_into_jsm_in_template_gallery_killswitch')) {
       if (!isClosed) {
@@ -58,7 +60,7 @@ export default function InternalPortalNew(props) {
    */
   var suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
+  }, (fg('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: colorMode
   }, children) : children);
   return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
+import { useIsInsideThemeProvider } from '@atlaskit/app-provider/use-is-inside-theme-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { appendPortalContainerIfNotAppended } from '../utils/append-portal-container-if-not-appended';
 import { createContainer } from '../utils/create-container';
@@ -14,6 +15,7 @@ export default function InternalPortal(props) {
     return createContainer(zIndex);
   }, [zIndex]);
   var colorMode = useColorMode();
+  var isInsideThemeProvider = useIsInsideThemeProvider();
 
   // This is in the render method instead of useEffect so that
   // the portal will be added to the DOM before the children render.
@@ -32,7 +34,7 @@ export default function InternalPortal(props) {
       removePortalContainer(container);
     };
   }, [container]);
-  return /*#__PURE__*/createPortal(colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
+  return /*#__PURE__*/createPortal((fg('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: colorMode
   }, children) : children, container);
 }

package/dist/types/entry-points/constants.d.ts

@@ -0,0 +1 @@
+export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../constants';

package/dist/types/entry-points/portal.d.ts

@@ -0,0 +1 @@
+export { default } from '../portal';

package/dist/types-ts4.5/entry-points/constants.d.ts

@@ -0,0 +1 @@
+export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../constants';

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

@@ -0,0 +1 @@
+export { default } from '../portal';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/portal",
-	"version": "5.4.2",
+	"version": "5.5.1",
 	"description": "A wrapper for rendering components in React portals.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,9 +39,9 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^4.2.0",
+		"@atlaskit/app-provider": "^4.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/theme": "^23.0.0",
+		"@atlaskit/theme": "^23.2.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -53,20 +53,20 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/code": "^17.4.0",
+		"@atlaskit/code": "^17.5.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/docs": "^11.7.0",
-		"@atlaskit/flag": "^17.9.0",
-		"@atlaskit/icon": "^34.0.0",
-		"@atlaskit/inline-dialog": "^18.0.0",
+		"@atlaskit/docs": "^11.8.0",
+		"@atlaskit/flag": "^17.11.0",
+		"@atlaskit/icon": "^34.4.0",
+		"@atlaskit/inline-dialog": "^18.1.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/modal-dialog": "^14.14.0",
-		"@atlaskit/onboarding": "^14.5.0",
-		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/modal-dialog": "^15.0.0",
+		"@atlaskit/onboarding": "^14.6.0",
+		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/tokens": "^11.4.0",
-		"@atlaskit/tooltip": "^21.1.0",
-		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/tooltip": "^22.0.0",
+		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
@@ -107,6 +107,9 @@
 		},
 		"import_into_jsm_in_template_gallery_killswitch": {
 			"type": "boolean"
+		},
+		"platform-dst-portal-conditial-theme-provider": {
+			"type": "boolean"
 		}
 	}
 }

package/portal/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/portal/portal",
+  "main": "../dist/cjs/entry-points/portal.js",
+  "module": "../dist/esm/entry-points/portal.js",
+  "module:es2019": "../dist/es2019/entry-points/portal.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/portal.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/portal.d.ts"
+      ]
+    }
+  }
+}

package/offerings.json

@@ -1,33 +0,0 @@
-[
-	{
-		"name": "Portal",
-		"package": "@atlaskit/portal",
-		"import": {
-			"name": "Portal",
-			"package": "@atlaskit/portal",
-			"type": "default"
-		},
-		"keywords": ["portal", "render", "dom", "mount", "teleport"],
-		"categories": ["utility"],
-		"shortDescription": "A component for rendering content outside the normal DOM hierarchy.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Ensure proper focus management",
-			"Consider screen reader accessibility",
-			"Use appropriate ARIA attributes",
-			"Handle keyboard navigation"
-		],
-		"usageGuidelines": [
-			"Use for rendering content outside normal DOM",
-			"Consider z-index and positioning",
-			"Handle focus management appropriately",
-			"Use for modals and overlays"
-		],
-		"contentGuidelines": [
-			"Ensure portaled content is accessible",
-			"Consider content context and purpose",
-			"Use appropriate portal placement"
-		],
-		"examples": ["./examples/ai/portal.tsx"]
-	}
-]