@atlaskit/app-provider 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/app-provider
 
+## 4.2.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`
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/cjs/theme-provider/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -16,7 +16,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tokens = require("@atlaskit/tokens");
 var _context3 = require("../context");
 var _colorMode = require("./context/color-mode");
@@ -84,18 +83,6 @@ function ThemeProvider(_ref) {
   var isInsideAppProvider = (0, _context3.useIsInsideAppProvider)();
   var isAppProviderThemingEnabled = (0, _context3.useIsAppProviderThemingEnabled)();
   var isInsideThemeProvider = (0, _useIsInsideThemeProvider.useIsInsideThemeProvider)();
-  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
-  var shouldUseGlobalTheming =
-  /**
-   * When not behind feature flag, partially revert to legacy behavior.
-   * This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
-   * as we still need to set global theme state to prevent breaking existing apps,
-   * but also prevent multiple theme providers from loading conflicting theme states.
-   *
-   * At some point this should be removed as we will
-   * only support sub-tree theming when used inside of AppProvider.
-   */
-  !(0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') && !isInsideAppProvider && !isInsideThemeProvider ||
   /**
    * A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
    *
@@ -107,9 +94,9 @@ function ThemeProvider(_ref) {
    * `html` in order to apply global theme state, which would allow a more consistent approach to
    * theme loading.
    */
-  isRootThemeProvider;
+  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
   (0, _react.useEffect)(function () {
-    if (shouldUseGlobalTheming) {
+    if (isRootThemeProvider) {
       /**
        * We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
        * This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
@@ -182,7 +169,7 @@ function ThemeProvider(_ref) {
       // we treat them as sub-tree themes that do not load global theme state.
       (0, _loadAndMountThemes.loadAndMountThemes)(theme);
     }
-  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, shouldUseGlobalTheming, theme]);
+  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
   (0, _react.useEffect)(function () {
     if (!prefersDarkModeMql) {
       return;
@@ -210,7 +197,7 @@ function ThemeProvider(_ref) {
     value: theme
   }, /*#__PURE__*/_react.default.createElement(_theme.SetThemeContext.Provider, {
     value: setPartialTheme
-  }, !shouldUseGlobalTheming && (0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, attrs, {
+  }, !isRootThemeProvider ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, attrs, {
     className: (0, _runtime.ax)([contentStyles.body])
   }), children) : children)))));
 }

package/dist/es2019/theme-provider/index.js

@@ -1,10 +1,9 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getThemeHtmlAttrs, setGlobalTheme, SUBTREE_THEME_ATTRIBUTE } from '@atlaskit/tokens';
 import { useIsAppProviderThemingEnabled, useIsInsideAppProvider } from '../context';
 import { ColorModeContext, SetColorModeContext } from './context/color-mode';
@@ -62,18 +61,6 @@ function ThemeProvider({
   const isInsideAppProvider = useIsInsideAppProvider();
   const isAppProviderThemingEnabled = useIsAppProviderThemingEnabled();
   const isInsideThemeProvider = useIsInsideThemeProvider();
-  const isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
-  const shouldUseGlobalTheming =
-  /**
-   * When not behind feature flag, partially revert to legacy behavior.
-   * This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
-   * as we still need to set global theme state to prevent breaking existing apps,
-   * but also prevent multiple theme providers from loading conflicting theme states.
-   *
-   * At some point this should be removed as we will
-   * only support sub-tree theming when used inside of AppProvider.
-   */
-  !fg('platform_dst_subtree_theming') && !isInsideAppProvider && !isInsideThemeProvider ||
   /**
    * A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
    *
@@ -85,9 +72,9 @@ function ThemeProvider({
    * `html` in order to apply global theme state, which would allow a more consistent approach to
    * theme loading.
    */
-  isRootThemeProvider;
+  const isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
   useEffect(() => {
-    if (shouldUseGlobalTheming) {
+    if (isRootThemeProvider) {
       /**
        * We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
        * This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
@@ -126,7 +113,7 @@ function ThemeProvider({
       // we treat them as sub-tree themes that do not load global theme state.
       loadAndMountThemes(theme);
     }
-  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, shouldUseGlobalTheming, theme]);
+  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
   useEffect(() => {
     if (!prefersDarkModeMql) {
       return;
@@ -158,7 +145,7 @@ function ThemeProvider({
     value: theme
   }, /*#__PURE__*/React.createElement(SetThemeContext.Provider, {
     value: setPartialTheme
-  }, !shouldUseGlobalTheming && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
+  }, !isRootThemeProvider ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
     className: ax([contentStyles.body])
   }), children) : children)))));
 }

package/dist/esm/theme-provider/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -10,7 +10,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getThemeHtmlAttrs, setGlobalTheme, SUBTREE_THEME_ATTRIBUTE } from '@atlaskit/tokens';
 import { useIsAppProviderThemingEnabled, useIsInsideAppProvider } from '../context';
 import { ColorModeContext, SetColorModeContext } from './context/color-mode';
@@ -75,18 +74,6 @@ function ThemeProvider(_ref) {
   var isInsideAppProvider = useIsInsideAppProvider();
   var isAppProviderThemingEnabled = useIsAppProviderThemingEnabled();
   var isInsideThemeProvider = useIsInsideThemeProvider();
-  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
-  var shouldUseGlobalTheming =
-  /**
-   * When not behind feature flag, partially revert to legacy behavior.
-   * This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
-   * as we still need to set global theme state to prevent breaking existing apps,
-   * but also prevent multiple theme providers from loading conflicting theme states.
-   *
-   * At some point this should be removed as we will
-   * only support sub-tree theming when used inside of AppProvider.
-   */
-  !fg('platform_dst_subtree_theming') && !isInsideAppProvider && !isInsideThemeProvider ||
   /**
    * A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
    *
@@ -98,9 +85,9 @@ function ThemeProvider(_ref) {
    * `html` in order to apply global theme state, which would allow a more consistent approach to
    * theme loading.
    */
-  isRootThemeProvider;
+  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
   useEffect(function () {
-    if (shouldUseGlobalTheming) {
+    if (isRootThemeProvider) {
       /**
        * We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
        * This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
@@ -173,7 +160,7 @@ function ThemeProvider(_ref) {
       // we treat them as sub-tree themes that do not load global theme state.
       loadAndMountThemes(theme);
     }
-  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, shouldUseGlobalTheming, theme]);
+  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
   useEffect(function () {
     if (!prefersDarkModeMql) {
       return;
@@ -201,7 +188,7 @@ function ThemeProvider(_ref) {
     value: theme
   }, /*#__PURE__*/React.createElement(SetThemeContext.Provider, {
     value: setPartialTheme
-  }, !shouldUseGlobalTheming && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
+  }, !isRootThemeProvider ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
     className: ax([contentStyles.body])
   }), children) : children)))));
 }

package/dist/types/context.d.ts

@@ -3,12 +3,12 @@
  *
  * A context that indicates if the current component is inside an AppProvider.
  */
-export declare const InsideAppProviderContext: import("react").Context<boolean>;
+export declare const InsideAppProviderContext: import('react').Context<boolean>;
 export declare const useIsInsideAppProvider: () => boolean;
 /**
  * __App provider theming enabled context__
  *
  * A context that indicates if the AppProvider is enabled for theming.
  */
-export declare const AppProviderThemingEnabledContext: import("react").Context<boolean>;
+export declare const AppProviderThemingEnabledContext: import('react').Context<boolean>;
 export declare const useIsAppProviderThemingEnabled: () => boolean;

package/dist/types/theme-provider/context/color-mode.d.ts

@@ -3,8 +3,8 @@ export type ReconciledColorMode = Exclude<ThemeColorModes, 'auto'>;
 /**
  * __Color mode context__
  */
-export declare const ColorModeContext: import("react").Context<ReconciledColorMode | undefined>;
+export declare const ColorModeContext: import('react').Context<ReconciledColorMode | undefined>;
 /**
  * __Set color mode context__
  */
-export declare const SetColorModeContext: import("react").Context<((value: ThemeColorModes) => void) | undefined>;
+export declare const SetColorModeContext: import('react').Context<((value: ThemeColorModes) => void) | undefined>;

package/dist/types/theme-provider/context/inside-theme-provider.d.ts

@@ -1,4 +1,4 @@
 /**
  * __Inside theme provider context__
  */
-export declare const InsideThemeProviderContext: import("react").Context<boolean>;
+export declare const InsideThemeProviderContext: import('react').Context<boolean>;

package/dist/types/theme-provider/context/theme.d.ts

@@ -3,8 +3,8 @@ export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 /**
  * __Theme context__
  */
-export declare const ThemeContext: import("react").Context<Theme | undefined>;
+export declare const ThemeContext: import('react').Context<Theme | undefined>;
 /**
  * __Set theme context__
  */
-export declare const SetThemeContext: import("react").Context<((value: Partial<Theme>) => void) | undefined>;
+export declare const SetThemeContext: import('react').Context<((value: Partial<Theme>) => void) | undefined>;

package/dist/types/theme-provider/index.d.ts

@@ -15,5 +15,5 @@ export interface ThemeProviderProps {
  *
  * Provides global theming configuration.
  */
-declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ children, defaultColorMode, defaultTheme, }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

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

@@ -3,12 +3,12 @@
  *
  * A context that indicates if the current component is inside an AppProvider.
  */
-export declare const InsideAppProviderContext: import("react").Context<boolean>;
+export declare const InsideAppProviderContext: import('react').Context<boolean>;
 export declare const useIsInsideAppProvider: () => boolean;
 /**
  * __App provider theming enabled context__
  *
  * A context that indicates if the AppProvider is enabled for theming.
  */
-export declare const AppProviderThemingEnabledContext: import("react").Context<boolean>;
+export declare const AppProviderThemingEnabledContext: import('react').Context<boolean>;
 export declare const useIsAppProviderThemingEnabled: () => boolean;

package/dist/types-ts4.5/theme-provider/context/color-mode.d.ts

@@ -3,8 +3,8 @@ export type ReconciledColorMode = Exclude<ThemeColorModes, 'auto'>;
 /**
  * __Color mode context__
  */
-export declare const ColorModeContext: import("react").Context<ReconciledColorMode | undefined>;
+export declare const ColorModeContext: import('react').Context<ReconciledColorMode | undefined>;
 /**
  * __Set color mode context__
  */
-export declare const SetColorModeContext: import("react").Context<((value: ThemeColorModes) => void) | undefined>;
+export declare const SetColorModeContext: import('react').Context<((value: ThemeColorModes) => void) | undefined>;

package/dist/types-ts4.5/theme-provider/context/inside-theme-provider.d.ts

@@ -1,4 +1,4 @@
 /**
  * __Inside theme provider context__
  */
-export declare const InsideThemeProviderContext: import("react").Context<boolean>;
+export declare const InsideThemeProviderContext: import('react').Context<boolean>;

package/dist/types-ts4.5/theme-provider/context/theme.d.ts

@@ -3,8 +3,8 @@ export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 /**
  * __Theme context__
  */
-export declare const ThemeContext: import("react").Context<Theme | undefined>;
+export declare const ThemeContext: import('react').Context<Theme | undefined>;
 /**
  * __Set theme context__
  */
-export declare const SetThemeContext: import("react").Context<((value: Partial<Theme>) => void) | undefined>;
+export declare const SetThemeContext: import('react').Context<((value: Partial<Theme>) => void) | undefined>;

package/dist/types-ts4.5/theme-provider/index.d.ts

@@ -15,5 +15,5 @@ export interface ThemeProviderProps {
  *
  * Provides global theming configuration.
  */
-declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ children, defaultColorMode, defaultTheme, }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/app-provider",
-	"version": "4.1.0",
+	"version": "4.2.0",
 	"description": "A top level provider for the Design System.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -8,6 +8,13 @@
 		"registry": "https://registry.npmjs.org/"
 	},
 	"atlassian": {
+		"react-compiler": {
+			"enabled": true,
+			"gating": {
+				"source": "@atlassian/react-compiler-gating",
+				"importSpecifierName": "isReactCompilerActivePlatform"
+			}
+		},
 		"team": "Design System Team",
 		"website": {
 			"name": "App provider",
@@ -38,7 +45,7 @@
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -47,18 +54,16 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/dropdown-menu": "^16.4.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/dropdown-menu": "^16.8.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/testing-library": "^0.4.0",
 		"react-dom": "^18.2.0",
 		"react-resource-router": "^0.20.0"
 	},
 	"platform-feature-flags": {
-		"platform_dst_subtree_theming": {
-			"type": "boolean"
-		},
 		"platform_increased-contrast-themes": {
 			"type": "boolean"
 		}