@atlaskit/portal 5.2.2 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/portal
 
+## 5.3.0
+
+### Minor Changes
+
+- [`1fab6967bb305`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1fab6967bb305) -
+  Tidied feature flag `platform_dst_subtree_theming` which enables sub-tree theming capabilities
+  within `@atlaskit/app-provider`
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.2.2
 
 ### Patch Changes

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

@@ -10,7 +10,6 @@ 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 _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); }
@@ -45,7 +44,7 @@ function InternalPortalNew(props) {
    */
   var suspendedChildren = /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
-  }, colorMode && (0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
+  }, 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,7 +8,6 @@ exports.default = InternalPortal;
 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) {
@@ -29,7 +28,7 @@ function InternalPortal(props) {
       (0, _portalDomUtils.removePortalContainer)(container);
     };
   }, [container]);
-  return /*#__PURE__*/(0, _reactDom.createPortal)(colorMode && (0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
+  return /*#__PURE__*/(0, _reactDom.createPortal)(colorMode ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
     defaultColorMode: colorMode
   }, children) : children, container);
 }

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

@@ -1,7 +1,6 @@
 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) {
@@ -34,7 +33,7 @@ export default function InternalPortalNew(props) {
    */
   const suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, colorMode && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement(ThemeProvider, {
+  }, 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,7 +1,6 @@
 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 {
@@ -21,7 +20,7 @@ export default function InternalPortal(props) {
       removePortalContainer(container);
     };
   }, [container]);
-  return /*#__PURE__*/createPortal(colorMode && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement(ThemeProvider, {
+  return /*#__PURE__*/createPortal(colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: colorMode
   }, children) : children, container);
 }

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

@@ -2,7 +2,6 @@ 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) {
@@ -36,7 +35,7 @@ export default function InternalPortalNew(props) {
    */
   var suspendedChildren = /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, colorMode && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement(ThemeProvider, {
+  }, 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,7 +1,6 @@
 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,
@@ -21,7 +20,7 @@ export default function InternalPortal(props) {
       removePortalContainer(container);
     };
   }, [container]);
-  return /*#__PURE__*/createPortal(colorMode && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement(ThemeProvider, {
+  return /*#__PURE__*/createPortal(colorMode ? /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: colorMode
   }, children) : children, container);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/portal",
-	"version": "5.2.2",
+	"version": "5.3.0",
 	"description": "A wrapper for rendering components in React portals.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^4.1.0",
+		"@atlaskit/app-provider": "^4.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^22.0.0",
 		"@babel/runtime": "^7.0.0"
@@ -48,20 +48,21 @@
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/code": "^17.4.0",
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/docs": "^11.5.0",
-		"@atlaskit/flag": "^17.8.0",
-		"@atlaskit/icon": "^32.0.0",
+		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/flag": "^17.9.0",
+		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/inline-dialog": "^18.0.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/modal-dialog": "^14.11.0",
+		"@atlaskit/modal-dialog": "^14.13.0",
 		"@atlaskit/onboarding": "^14.5.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/tokens": "^11.0.0",
-		"@atlaskit/tooltip": "^20.14.0",
+		"@atlaskit/tokens": "^11.4.0",
+		"@atlaskit/tooltip": "^21.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
-		"@compiled/react": "^0.18.6",
+		"@atlassian/structured-docs-types": "workspace:^",
+		"@compiled/react": "^0.20.0",
 		"@testing-library/react": "^16.3.0",
 		"bind-event-listener": "^3.0.0",
 		"raf-stub": "^2.0.1"
@@ -95,9 +96,6 @@
 	"platform-feature-flags": {
 		"platform_design_system_team_portal_logic_r18_fix": {
 			"type": "boolean"
-		},
-		"platform_dst_subtree_theming": {
-			"type": "boolean"
 		}
 	}
 }

package/portal.docs.tsx

@@ -0,0 +1,46 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'Portal',
+		description: 'A component for rendering content outside the normal DOM hierarchy.',
+		status: 'general-availability',
+		import: {
+			name: 'Portal',
+			package: '@atlaskit/portal',
+			type: 'default',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		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',
+		],
+		accessibilityGuidelines: [
+			'Ensure proper focus management',
+			'Consider screen reader accessibility',
+			'Use appropriate ARIA attributes',
+			'Handle keyboard navigation',
+		],
+		examples: [
+			{
+				name: 'Portal',
+				description: 'Portal example',
+				source: path.resolve(__dirname, './examples/ai/portal.tsx'),
+			},
+		],
+		keywords: ['portal', 'render', 'dom', 'mount', 'teleport'],
+		categories: ['utility'],
+	},
+];
+
+export default documentation;