@atlaskit/portal 5.5.0 → 5.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/internal/components/internal-portal-new.js +3 -1
  3. package/dist/cjs/internal/components/internal-portal.js +3 -1
  4. package/dist/es2019/internal/components/internal-portal-new.js +3 -1
  5. package/dist/es2019/internal/components/internal-portal.js +3 -1
  6. package/dist/esm/internal/components/internal-portal-new.js +3 -1
  7. package/dist/esm/internal/components/internal-portal.js +3 -1
  8. package/package.json +9 -6
  9. package/offerings.json +0 -33
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/portal
2
2
 
3
+ ## 5.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`5df00e0f09845`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5df00e0f09845) -
8
+ Fix portal wrapping portalled content with ThemeProvider when outside a ThemeProvider. Previously,
9
+ components like modal-dialog would always inject theme CSS variables into the DOM via a
10
+ portal-owned ThemeProvider, even when no ThemeProvider was present in the tree.
11
+ - Updated dependencies
12
+
13
+ ## 5.5.1
14
+
15
+ ### Patch Changes
16
+
17
+ - [`8e2f0f5b6e5b9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e2f0f5b6e5b9) -
18
+ Fix portal wrapping portalled content with ThemeProvider when outside a ThemeProvider. Previously,
19
+ components like modal-dialog would always inject theme CSS variables into the DOM via a
20
+ portal-owned ThemeProvider, even when no ThemeProvider was present in the tree.
21
+ - Updated dependencies
22
+
3
23
  ## 5.5.0
4
24
 
5
25
  ### Minor Changes
package/dist/cjs/internal/components/internal-portal-new.js CHANGED
@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _reactDom = require("react-dom");
12
12
  var _appProvider = require("@atlaskit/app-provider");
13
+ var _useIsInsideThemeProvider = require("@atlaskit/app-provider/use-is-inside-theme-provider");
13
14
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  var _useIsomorphicLayoutEffect = require("../hooks/use-isomorphic-layout-effect");
15
16
  var _createAtlaskitPortal = require("../utils/create-atlaskit-portal");
@@ -25,6 +26,7 @@ function InternalPortalNew(props) {
25
26
  atlaskitPortal = _useState2[0],
26
27
  setAtlaskitPortal = _useState2[1];
27
28
  var colorMode = (0, _appProvider.useColorMode)();
29
+ var isInsideThemeProvider = (0, _useIsInsideThemeProvider.useIsInsideThemeProvider)();
28
30
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
29
31
  if ((0, _platformFeatureFlags.fg)('import_into_jsm_in_template_gallery_killswitch')) {
30
32
  if (!isClosed) {
@@ -67,7 +69,7 @@ function InternalPortalNew(props) {
67
69
  */
68
70
  var suspendedChildren = /*#__PURE__*/_react.default.createElement(_react.Suspense, {
69
71
  fallback: null
70
- }, colorMode ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
72
+ }, ((0, _platformFeatureFlags.fg)('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
71
73
  defaultColorMode: colorMode
72
74
  }, children) : children);
73
75
  return atlaskitPortal ? /*#__PURE__*/(0, _reactDom.createPortal)(suspendedChildren, atlaskitPortal) : null;
package/dist/cjs/internal/components/internal-portal.js CHANGED
@@ -8,6 +8,7 @@ exports.default = InternalPortal;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _reactDom = require("react-dom");
10
10
  var _appProvider = require("@atlaskit/app-provider");
11
+ var _useIsInsideThemeProvider = require("@atlaskit/app-provider/use-is-inside-theme-provider");
11
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _appendPortalContainerIfNotAppended = require("../utils/append-portal-container-if-not-appended");
13
14
  var _createContainer = require("../utils/create-container");
@@ -22,6 +23,7 @@ function InternalPortal(props) {
22
23
  return (0, _createContainer.createContainer)(zIndex);
23
24
  }, [zIndex]);
24
25
  var colorMode = (0, _appProvider.useColorMode)();
26
+ var isInsideThemeProvider = (0, _useIsInsideThemeProvider.useIsInsideThemeProvider)();
25
27
 
26
28
  // This is in the render method instead of useEffect so that
27
29
  // the portal will be added to the DOM before the children render.
@@ -40,7 +42,7 @@ function InternalPortal(props) {
40
42
  (0, _removePortalContainer.removePortalContainer)(container);
41
43
  };
42
44
  }, [container]);
43
- return /*#__PURE__*/(0, _reactDom.createPortal)(colorMode ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
45
+ return /*#__PURE__*/(0, _reactDom.createPortal)(((0, _platformFeatureFlags.fg)('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
44
46
  defaultColorMode: colorMode
45
47
  }, children) : children, container);
46
48
  }
package/dist/es2019/internal/components/internal-portal-new.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { Suspense, useState } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
3
  import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
4
+ import { useIsInsideThemeProvider } from '@atlaskit/app-provider/use-is-inside-theme-provider';
4
5
  import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
6
7
  import { createAtlaskitPortal } from '../utils/create-atlaskit-portal';
@@ -14,6 +15,7 @@ export default function InternalPortalNew(props) {
14
15
  } = props;
15
16
  const [atlaskitPortal, setAtlaskitPortal] = useState(null);
16
17
  const colorMode = useColorMode();
18
+ const isInsideThemeProvider = useIsInsideThemeProvider();
17
19
  useIsomorphicLayoutEffect(() => {
18
20
  if (fg('import_into_jsm_in_template_gallery_killswitch')) {
19
21
  if (!isClosed) {
@@ -56,7 +58,7 @@ export default function InternalPortalNew(props) {
56
58
  */
57
59
  const suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
58
60
  fallback: null
59
- }, colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
61
+ }, (fg('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/React.createElement(ThemeProvider, {
60
62
  defaultColorMode: colorMode
61
63
  }, children) : children);
62
64
  return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;
package/dist/es2019/internal/components/internal-portal.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useEffect, useMemo } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
3
  import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
4
+ import { useIsInsideThemeProvider } from '@atlaskit/app-provider/use-is-inside-theme-provider';
4
5
  import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { appendPortalContainerIfNotAppended } from '../utils/append-portal-container-if-not-appended';
6
7
  import { createContainer } from '../utils/create-container';
@@ -13,6 +14,7 @@ export default function InternalPortal(props) {
13
14
  } = props;
14
15
  const container = useMemo(() => createContainer(zIndex), [zIndex]);
15
16
  const colorMode = useColorMode();
17
+ const isInsideThemeProvider = useIsInsideThemeProvider();
16
18
 
17
19
  // This is in the render method instead of useEffect so that
18
20
  // the portal will be added to the DOM before the children render.
@@ -31,7 +33,7 @@ export default function InternalPortal(props) {
31
33
  removePortalContainer(container);
32
34
  };
33
35
  }, [container]);
34
- return /*#__PURE__*/createPortal(colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
36
+ return /*#__PURE__*/createPortal((fg('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/React.createElement(ThemeProvider, {
35
37
  defaultColorMode: colorMode
36
38
  }, children) : children, container);
37
39
  }
package/dist/esm/internal/components/internal-portal-new.js CHANGED
@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import React, { Suspense, useState } from 'react';
3
3
  import { createPortal } from 'react-dom';
4
4
  import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
5
+ import { useIsInsideThemeProvider } from '@atlaskit/app-provider/use-is-inside-theme-provider';
5
6
  import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
7
8
  import { createAtlaskitPortal } from '../utils/create-atlaskit-portal';
@@ -16,6 +17,7 @@ export default function InternalPortalNew(props) {
16
17
  atlaskitPortal = _useState2[0],
17
18
  setAtlaskitPortal = _useState2[1];
18
19
  var colorMode = useColorMode();
20
+ var isInsideThemeProvider = useIsInsideThemeProvider();
19
21
  useIsomorphicLayoutEffect(function () {
20
22
  if (fg('import_into_jsm_in_template_gallery_killswitch')) {
21
23
  if (!isClosed) {
@@ -58,7 +60,7 @@ export default function InternalPortalNew(props) {
58
60
  */
59
61
  var suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
60
62
  fallback: null
61
- }, colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
63
+ }, (fg('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/React.createElement(ThemeProvider, {
62
64
  defaultColorMode: colorMode
63
65
  }, children) : children);
64
66
  return atlaskitPortal ? /*#__PURE__*/createPortal(suspendedChildren, atlaskitPortal) : null;
package/dist/esm/internal/components/internal-portal.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useEffect, useMemo } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
3
  import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
4
+ import { useIsInsideThemeProvider } from '@atlaskit/app-provider/use-is-inside-theme-provider';
4
5
  import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { appendPortalContainerIfNotAppended } from '../utils/append-portal-container-if-not-appended';
6
7
  import { createContainer } from '../utils/create-container';
@@ -14,6 +15,7 @@ export default function InternalPortal(props) {
14
15
  return createContainer(zIndex);
15
16
  }, [zIndex]);
16
17
  var colorMode = useColorMode();
18
+ var isInsideThemeProvider = useIsInsideThemeProvider();
17
19
 
18
20
  // This is in the render method instead of useEffect so that
19
21
  // the portal will be added to the DOM before the children render.
@@ -32,7 +34,7 @@ export default function InternalPortal(props) {
32
34
  removePortalContainer(container);
33
35
  };
34
36
  }, [container]);
35
- return /*#__PURE__*/createPortal(colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
37
+ return /*#__PURE__*/createPortal((fg('platform-dst-portal-conditial-theme-provider') ? isInsideThemeProvider : colorMode) ? /*#__PURE__*/React.createElement(ThemeProvider, {
36
38
  defaultColorMode: colorMode
37
39
  }, children) : children, container);
38
40
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/portal",
3
- "version": "5.5.0",
3
+ "version": "5.5.2",
4
4
  "description": "A wrapper for rendering components in React portals.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -53,20 +53,20 @@
53
53
  "@af/integration-testing": "workspace:^",
54
54
  "@af/visual-regression": "workspace:^",
55
55
  "@atlaskit/button": "^23.11.0",
56
- "@atlaskit/code": "^17.4.0",
56
+ "@atlaskit/code": "^17.5.0",
57
57
  "@atlaskit/css": "^0.19.0",
58
58
  "@atlaskit/docs": "^11.8.0",
59
59
  "@atlaskit/flag": "^17.11.0",
60
- "@atlaskit/icon": "^34.3.0",
60
+ "@atlaskit/icon": "^34.5.0",
61
61
  "@atlaskit/inline-dialog": "^18.1.0",
62
62
  "@atlaskit/link": "^3.4.0",
63
- "@atlaskit/modal-dialog": "^14.18.0",
63
+ "@atlaskit/modal-dialog": "^15.0.0",
64
64
  "@atlaskit/onboarding": "^14.6.0",
65
65
  "@atlaskit/primitives": "^19.0.0",
66
66
  "@atlaskit/section-message": "^8.12.0",
67
67
  "@atlaskit/tokens": "^13.0.0",
68
- "@atlaskit/tooltip": "^21.2.0",
69
- "@atlassian/feature-flags-test-utils": "^1.0.0",
68
+ "@atlaskit/tooltip": "^22.1.0",
69
+ "@atlassian/feature-flags-test-utils": "^1.1.0",
70
70
  "@atlassian/react-compiler-gating": "workspace:^",
71
71
  "@atlassian/ssr-tests": "workspace:^",
72
72
  "@atlassian/structured-docs-types": "workspace:^",
@@ -107,6 +107,9 @@
107
107
  },
108
108
  "import_into_jsm_in_template_gallery_killswitch": {
109
109
  "type": "boolean"
110
+ },
111
+ "platform-dst-portal-conditial-theme-provider": {
112
+ "type": "boolean"
110
113
  }
111
114
  }
112
115
  }
package/offerings.json DELETED
@@ -1,33 +0,0 @@
1
- [
2
- {
3
- "name": "Portal",
4
- "package": "@atlaskit/portal",
5
- "import": {
6
- "name": "Portal",
7
- "package": "@atlaskit/portal",
8
- "type": "default"
9
- },
10
- "keywords": ["portal", "render", "dom", "mount", "teleport"],
11
- "categories": ["utility"],
12
- "shortDescription": "A component for rendering content outside the normal DOM hierarchy.",
13
- "status": "general-availability",
14
- "accessibilityGuidelines": [
15
- "Ensure proper focus management",
16
- "Consider screen reader accessibility",
17
- "Use appropriate ARIA attributes",
18
- "Handle keyboard navigation"
19
- ],
20
- "usageGuidelines": [
21
- "Use for rendering content outside normal DOM",
22
- "Consider z-index and positioning",
23
- "Handle focus management appropriately",
24
- "Use for modals and overlays"
25
- ],
26
- "contentGuidelines": [
27
- "Ensure portaled content is accessible",
28
- "Consider content context and purpose",
29
- "Use appropriate portal placement"
30
- ],
31
- "examples": ["./examples/ai/portal.tsx"]
32
- }
33
- ]