@atlaskit/app-provider 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @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
+
+- [`233c7dede572a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/233c7dede572a) -
+  Fixes a bug with `AppProvider` where under certain conditions, can cause an infinite loop
+  switching between light/dark modes.
+
+  This was happening because of this check:
+  `const isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;`
+
+  When an `AppProvider` has `UNSAFE_isThemingDisabled`, it avoids mounting it's root
+  `ThemeProvider`. However, any subsequently nested `ThemeProvider`s would become the root theme
+  provider of `AppProvider`, which uninintentionally enables global theming functionality.
+
+  The fix is to allow `ThemeProvider` to detect when a wrapping `AppProvider` has theming disabled,
+  which allows it to accurately determine if it is the root theme provider before enabling global
+  theming.
+
 ## 4.0.0
 
 ### Major Changes

package/dist/cjs/app-provider.js

@@ -32,9 +32,11 @@ function AppProvider(_ref) {
   }, children);
   return /*#__PURE__*/_react.default.createElement(_context.InsideAppProviderContext.Provider, {
     value: true
-  }, UNSAFE_isThemingDisabled ? routerLinkProvider : /*#__PURE__*/_react.default.createElement(_themeProvider.default, {
+  }, UNSAFE_isThemingDisabled ? routerLinkProvider : /*#__PURE__*/_react.default.createElement(_context.AppProviderThemingEnabledContext.Provider, {
+    value: true
+  }, /*#__PURE__*/_react.default.createElement(_themeProvider.default, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, routerLinkProvider));
+  }, routerLinkProvider)));
 }
 var _default = exports.default = AppProvider;

package/dist/cjs/context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useIsInsideAppProvider = exports.InsideAppProviderContext = void 0;
+exports.useIsInsideAppProvider = exports.useIsAppProviderThemingEnabled = exports.InsideAppProviderContext = exports.AppProviderThemingEnabledContext = void 0;
 var _react = require("react");
 /**
  * __Inside app provider context__
@@ -13,4 +13,14 @@ var _react = require("react");
 var InsideAppProviderContext = exports.InsideAppProviderContext = /*#__PURE__*/(0, _react.createContext)(false);
 var useIsInsideAppProvider = exports.useIsInsideAppProvider = function useIsInsideAppProvider() {
   return (0, _react.useContext)(InsideAppProviderContext);
+};
+
+/**
+ * __App provider theming enabled context__
+ *
+ * A context that indicates if the AppProvider is enabled for theming.
+ */
+var AppProviderThemingEnabledContext = exports.AppProviderThemingEnabledContext = /*#__PURE__*/(0, _react.createContext)(false);
+var useIsAppProviderThemingEnabled = exports.useIsAppProviderThemingEnabled = function useIsAppProviderThemingEnabled() {
+  return (0, _react.useContext)(AppProviderThemingEnabledContext);
 };

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");
@@ -82,19 +81,8 @@ function ThemeProvider(_ref) {
   }, []);
   var lastSetGlobalThemePromiseRef = (0, _react.useRef)(null);
   var isInsideAppProvider = (0, _context3.useIsInsideAppProvider)();
+  var isAppProviderThemingEnabled = (0, _context3.useIsAppProviderThemingEnabled)();
   var isInsideThemeProvider = (0, _useIsInsideThemeProvider.useIsInsideThemeProvider)();
-  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
-  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.
    *
@@ -106,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
@@ -181,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;
@@ -209,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/app-provider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InsideAppProviderContext, useIsInsideAppProvider } from './context';
+import { AppProviderThemingEnabledContext, InsideAppProviderContext, useIsInsideAppProvider } from './context';
 import RouterLinkProvider from './router-link-provider';
 import ThemeProvider from './theme-provider';
 /**
@@ -25,9 +25,11 @@ function AppProvider({
   }, children);
   return /*#__PURE__*/React.createElement(InsideAppProviderContext.Provider, {
     value: true
-  }, UNSAFE_isThemingDisabled ? routerLinkProvider : /*#__PURE__*/React.createElement(ThemeProvider, {
+  }, UNSAFE_isThemingDisabled ? routerLinkProvider : /*#__PURE__*/React.createElement(AppProviderThemingEnabledContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, routerLinkProvider));
+  }, routerLinkProvider)));
 }
 export default AppProvider;

package/dist/es2019/context.js

@@ -8,4 +8,14 @@ import { createContext, useContext } from 'react';
 export const InsideAppProviderContext = /*#__PURE__*/createContext(false);
 export const useIsInsideAppProvider = () => {
   return useContext(InsideAppProviderContext);
+};
+
+/**
+ * __App provider theming enabled context__
+ *
+ * A context that indicates if the AppProvider is enabled for theming.
+ */
+export const AppProviderThemingEnabledContext = /*#__PURE__*/createContext(false);
+export const useIsAppProviderThemingEnabled = () => {
+  return useContext(AppProviderThemingEnabledContext);
 };

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

@@ -1,12 +1,11 @@
-/* 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 { useIsInsideAppProvider } from '../context';
+import { useIsAppProviderThemingEnabled, useIsInsideAppProvider } from '../context';
 import { ColorModeContext, SetColorModeContext } from './context/color-mode';
 import { InsideThemeProviderContext } from './context/inside-theme-provider';
 import { SetThemeContext, ThemeContext } from './context/theme';
@@ -60,19 +59,8 @@ function ThemeProvider({
   }, []);
   const lastSetGlobalThemePromiseRef = useRef(null);
   const isInsideAppProvider = useIsInsideAppProvider();
+  const isAppProviderThemingEnabled = useIsAppProviderThemingEnabled();
   const isInsideThemeProvider = useIsInsideThemeProvider();
-  const isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
-  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.
    *
@@ -84,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
@@ -125,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;
@@ -157,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/app-provider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InsideAppProviderContext, useIsInsideAppProvider } from './context';
+import { AppProviderThemingEnabledContext, InsideAppProviderContext, useIsInsideAppProvider } from './context';
 import RouterLinkProvider from './router-link-provider';
 import ThemeProvider from './theme-provider';
 /**
@@ -25,9 +25,11 @@ function AppProvider(_ref) {
   }, children);
   return /*#__PURE__*/React.createElement(InsideAppProviderContext.Provider, {
     value: true
-  }, UNSAFE_isThemingDisabled ? routerLinkProvider : /*#__PURE__*/React.createElement(ThemeProvider, {
+  }, UNSAFE_isThemingDisabled ? routerLinkProvider : /*#__PURE__*/React.createElement(AppProviderThemingEnabledContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
     defaultColorMode: defaultColorMode,
     defaultTheme: defaultTheme
-  }, routerLinkProvider));
+  }, routerLinkProvider)));
 }
 export default AppProvider;

package/dist/esm/context.js

@@ -8,4 +8,14 @@ import { createContext, useContext } from 'react';
 export var InsideAppProviderContext = /*#__PURE__*/createContext(false);
 export var useIsInsideAppProvider = function useIsInsideAppProvider() {
   return useContext(InsideAppProviderContext);
+};
+
+/**
+ * __App provider theming enabled context__
+ *
+ * A context that indicates if the AppProvider is enabled for theming.
+ */
+export var AppProviderThemingEnabledContext = /*#__PURE__*/createContext(false);
+export var useIsAppProviderThemingEnabled = function useIsAppProviderThemingEnabled() {
+  return useContext(AppProviderThemingEnabledContext);
 };

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,9 +10,8 @@ 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 { useIsInsideAppProvider } from '../context';
+import { useIsAppProviderThemingEnabled, useIsInsideAppProvider } from '../context';
 import { ColorModeContext, SetColorModeContext } from './context/color-mode';
 import { InsideThemeProviderContext } from './context/inside-theme-provider';
 import { SetThemeContext, ThemeContext } from './context/theme';
@@ -73,19 +72,8 @@ function ThemeProvider(_ref) {
   }, []);
   var lastSetGlobalThemePromiseRef = useRef(null);
   var isInsideAppProvider = useIsInsideAppProvider();
+  var isAppProviderThemingEnabled = useIsAppProviderThemingEnabled();
   var isInsideThemeProvider = useIsInsideThemeProvider();
-  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
-  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.
    *
@@ -97,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
@@ -172,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;
@@ -200,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,5 +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 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,5 +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 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.0.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"
 		}