@atlaskit/app-provider 3.2.10 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/app-provider
 
+## 3.3.1
+
+### Patch Changes
+
+- [`d9d9cbc1507f6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9d9cbc1507f6) -
+  Internal change how default theme settings are shared between `@atlaskit/tokens` and
+  `@atlaskit/app-provider`.
+- Updated dependencies
+
+## 3.3.0
+
+### Minor Changes
+
+- [`a45bf2e086e1d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a45bf2e086e1d) -
+  We are testing AppProvider subtree theming capabilities behind a feature flag. This is still in
+  development but working under minimal conditions. If this change is successful it will be
+  available in a later release.
+
 ## 3.2.10
 
 ### Patch Changes

package/dist/cjs/app-provider.js

@@ -1,16 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+var _context = require("./context");
 var _routerLinkProvider = _interopRequireDefault(require("./router-link-provider"));
 var _themeProvider = _interopRequireDefault(require("./theme-provider"));
-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); }
-var InsideAppProviderContext = /*#__PURE__*/(0, _react.createContext)(false);
 /**
  * __App provider__
  *
@@ -25,14 +23,14 @@ function AppProvider(_ref) {
     defaultTheme = _ref.defaultTheme,
     routerLinkComponent = _ref.routerLinkComponent,
     UNSAFE_isThemingDisabled = _ref.UNSAFE_isThemingDisabled;
-  var isInsideAppProvider = (0, _react.useContext)(InsideAppProviderContext);
+  var isInsideAppProvider = (0, _context.useIsInsideAppProvider)();
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');
   }
   var routerLinkProvider = /*#__PURE__*/_react.default.createElement(_routerLinkProvider.default, {
     routerLinkComponent: routerLinkComponent
   }, children);
-  return /*#__PURE__*/_react.default.createElement(InsideAppProviderContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_context.InsideAppProviderContext.Provider, {
     value: true
   }, UNSAFE_isThemingDisabled ? routerLinkProvider : /*#__PURE__*/_react.default.createElement(_themeProvider.default, {
     defaultColorMode: defaultColorMode,

package/dist/cjs/context.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsInsideAppProvider = exports.InsideAppProviderContext = void 0;
+var _react = require("react");
+/**
+ * __Inside app provider context__
+ *
+ * A context that indicates if the current component is inside an AppProvider.
+ */
+var InsideAppProviderContext = exports.InsideAppProviderContext = /*#__PURE__*/(0, _react.createContext)(false);
+var useIsInsideAppProvider = exports.useIsInsideAppProvider = function useIsInsideAppProvider() {
+  return (0, _react.useContext)(InsideAppProviderContext);
+};

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,7 +13,7 @@ Object.defineProperty(exports, "ThemeProvider", {
 Object.defineProperty(exports, "UNSAFE_useColorModeForMigration", {
   enumerable: true,
   get: function get() {
-    return _themeProvider.UNSAFE_useColorModeForMigration;
+    return _useColorModeForMigration.UNSAFE_useColorModeForMigration;
   }
 });
 Object.defineProperty(exports, "default", {
@@ -26,7 +25,7 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "useColorMode", {
   enumerable: true,
   get: function get() {
-    return _themeProvider.useColorMode;
+    return _useColorMode.useColorMode;
   }
 });
 Object.defineProperty(exports, "useRouterLink", {
@@ -38,22 +37,26 @@ Object.defineProperty(exports, "useRouterLink", {
 Object.defineProperty(exports, "useSetColorMode", {
   enumerable: true,
   get: function get() {
-    return _themeProvider.useSetColorMode;
+    return _useSetColorMode.useSetColorMode;
   }
 });
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function get() {
-    return _themeProvider.useSetTheme;
+    return _useSetTheme.useSetTheme;
   }
 });
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function get() {
-    return _themeProvider.useTheme;
+    return _useTheme.useTheme;
   }
 });
 var _appProvider = _interopRequireDefault(require("./app-provider"));
-var _themeProvider = _interopRequireWildcard(require("./theme-provider"));
-var _useRouterLink = _interopRequireDefault(require("./router-link-provider/hooks/use-router-link"));
-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); }
+var _useColorModeForMigration = require("./theme-provider/hooks/use-color-mode-for-migration");
+var _useColorMode = require("./theme-provider/hooks/use-color-mode");
+var _useSetColorMode = require("./theme-provider/hooks/use-set-color-mode");
+var _useSetTheme = require("./theme-provider/hooks/use-set-theme");
+var _useTheme = require("./theme-provider/hooks/use-theme");
+var _themeProvider = _interopRequireDefault(require("./theme-provider"));
+var _useRouterLink = _interopRequireDefault(require("./router-link-provider/hooks/use-router-link"));

package/dist/cjs/theme-provider/context/color-mode.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SetColorModeContext = exports.ColorModeContext = void 0;
+var _react = require("react");
+/**
+ * __Color mode context__
+ */
+var ColorModeContext = exports.ColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+/**
+ * __Set color mode context__
+ */
+var SetColorModeContext = exports.SetColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);

package/dist/cjs/theme-provider/context/inside-theme-provider.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InsideThemeProviderContext = void 0;
+var _react = require("react");
+/**
+ * __Inside theme provider context__
+ */
+var InsideThemeProviderContext = exports.InsideThemeProviderContext = /*#__PURE__*/(0, _react.createContext)(false);

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeContext = exports.SetThemeContext = void 0;
+var _react = require("react");
+/**
+ * __Theme context__
+ */
+var ThemeContext = exports.ThemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+/**
+ * __Set theme context__
+ */
+var SetThemeContext = exports.SetThemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);

package/dist/cjs/theme-provider/hooks/use-color-mode-for-migration.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNSAFE_useColorModeForMigration = UNSAFE_useColorModeForMigration;
+var _react = require("react");
+var _colorMode = require("../context/color-mode");
+/**
+ * __UNSAFE_useColorModeForMigration()__
+ *
+ * Returns the current color mode when inside the app provider.
+ * Unlike useColorMode, this utility returns undefined, instead of throwing an error, when the app provider is missing.
+ * This allows it to be used by components that need to operate with and without an app provider.
+ */
+function UNSAFE_useColorModeForMigration() {
+  var value = (0, _react.useContext)(_colorMode.ColorModeContext);
+  return value;
+}

package/dist/cjs/theme-provider/hooks/use-color-mode.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorMode = useColorMode;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _tokens = require("@atlaskit/tokens");
+var _colorMode = require("../context/color-mode");
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+function useColorMode() {
+  var value = (0, _react.useContext)(_colorMode.ColorModeContext);
+
+  // TODO: This will only return 'light' or 'dark' but never 'auto', which in some cases
+  // may be desirable. We should consider returning both the reconciled color mode (e.g. 'light' or 'dark') and the selected color mode ("auto").
+  var theme = (0, _tokens.getGlobalTheme)();
+  var _useState = (0, _react.useState)((theme === null || theme === void 0 ? void 0 : theme.colorMode) || 'light'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    resolvedColorMode = _useState2[0],
+    setResolvedColorMode = _useState2[1];
+  (0, _react.useEffect)(function () {
+    // We are using theme from context so no need to reference the DOM
+    if (value) {
+      return;
+    }
+    var observer = new _tokens.ThemeMutationObserver(function (theme) {
+      setResolvedColorMode((theme === null || theme === void 0 ? void 0 : theme.colorMode) || 'light');
+    });
+    observer.observe();
+    return function () {
+      return observer.disconnect();
+    };
+  }, [value]);
+  return value ? value : resolvedColorMode;
+}

package/dist/cjs/theme-provider/hooks/use-is-inside-theme-provider.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsInsideThemeProvider = void 0;
+var _react = require("react");
+var _insideThemeProvider = require("../context/inside-theme-provider");
+/**
+ * __useIsInsideThemeProvider()__
+ *
+ * Returns true if the current component is inside a ThemeProvider.
+ */
+var useIsInsideThemeProvider = exports.useIsInsideThemeProvider = function useIsInsideThemeProvider() {
+  var _useContext;
+  return (_useContext = (0, _react.useContext)(_insideThemeProvider.InsideThemeProviderContext)) !== null && _useContext !== void 0 ? _useContext : false;
+};

package/dist/cjs/theme-provider/hooks/use-set-color-mode.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSetColorMode = useSetColorMode;
+var _react = require("react");
+var _colorMode = require("../context/color-mode");
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+function useSetColorMode() {
+  var value = (0, _react.useContext)(_colorMode.SetColorModeContext);
+  if (!value) {
+    throw new Error('useSetColorMode must be used within ThemeProvider.');
+  }
+  return value;
+}

package/dist/cjs/theme-provider/hooks/use-set-theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSetTheme = useSetTheme;
+var _react = require("react");
+var _theme = require("../context/theme");
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+function useSetTheme() {
+  var value = (0, _react.useContext)(_theme.SetThemeContext);
+  if (!value) {
+    throw new Error('useSetTheme must be used within ThemeProvider.');
+  }
+  return value;
+}

package/dist/cjs/theme-provider/hooks/use-theme.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = useTheme;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _tokens = require("@atlaskit/tokens");
+var _theme = require("../context/theme");
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+function useTheme() {
+  var theme = (0, _react.useContext)(_theme.ThemeContext);
+  var _useState = (0, _react.useState)(theme || (0, _tokens.getGlobalTheme)()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    resolvedTheme = _useState2[0],
+    setResolvedTheme = _useState2[1];
+  (0, _react.useEffect)(function () {
+    // We are using theme from context so no need to reference the DOM
+    if (theme) {
+      return;
+    }
+    var observer = new _tokens.ThemeMutationObserver(setResolvedTheme);
+    observer.observe();
+    return function () {
+      return observer.disconnect();
+    };
+  }, [theme]);
+  return theme ? theme : resolvedTheme;
+}

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

@@ -0,0 +1,215 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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");
+var _insideThemeProvider = require("./context/inside-theme-provider");
+var _theme = require("./context/theme");
+var _useIsInsideThemeProvider = require("./hooks/use-is-inside-theme-provider");
+var _loadAndMountThemes = require("./utils/load-and-mount-themes");
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { (0, _defineProperty2.default)(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; }
+var defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing',
+  typography: 'typography'
+};
+var isMatchMediaAvailable = typeof window !== 'undefined' && 'matchMedia' in window;
+var prefersDarkModeMql = isMatchMediaAvailable ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
+
+// TODO: currently 'auto' color mode will always return 'light' in SSR.
+// Additional work required: https://product-fabric.atlassian.net/browse/DSP-9781
+function getReconciledColorMode(colorMode) {
+  if (colorMode === 'auto') {
+    return prefersDarkModeMql !== null && prefersDarkModeMql !== void 0 && prefersDarkModeMql.matches ? 'dark' : 'light';
+  }
+  return colorMode;
+}
+var contentStyles = {
+  body: "_1e0c1bgi"
+};
+/**
+ * __Theme provider__
+ *
+ * Provides global theming configuration.
+ */
+function ThemeProvider(_ref) {
+  var children = _ref.children,
+    _ref$defaultColorMode = _ref.defaultColorMode,
+    defaultColorMode = _ref$defaultColorMode === void 0 ? 'auto' : _ref$defaultColorMode,
+    defaultTheme = _ref.defaultTheme;
+  var _useState = (0, _react.useState)(defaultColorMode),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    chosenColorMode = _useState2[0],
+    setChosenColorMode = _useState2[1];
+  var _useState3 = (0, _react.useState)(getReconciledColorMode(defaultColorMode)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    reconciledColorMode = _useState4[0],
+    setReconciledColorMode = _useState4[1];
+  var _useState5 = (0, _react.useState)(function () {
+      return _objectSpread(_objectSpread({}, defaultThemeSettings), defaultTheme);
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    theme = _useState6[0],
+    setTheme = _useState6[1];
+  var setColorMode = (0, _react.useCallback)(function (colorMode) {
+    setChosenColorMode(colorMode);
+    setReconciledColorMode(getReconciledColorMode(colorMode));
+  }, []);
+  var setPartialTheme = (0, _react.useCallback)(function (nextTheme) {
+    setTheme(function (theme) {
+      return _objectSpread(_objectSpread({}, theme), nextTheme);
+    });
+  }, []);
+  var lastSetGlobalThemePromiseRef = (0, _react.useRef)(null);
+  var isInsideAppProvider = (0, _context3.useIsInsideAppProvider)();
+  var isInsideThemeProvider = (0, _useIsInsideThemeProvider.useIsInsideThemeProvider)();
+  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
+  (0, _react.useEffect)(function () {
+    if (
+    /**
+     * A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
+     *
+     * This will not use sub-tree theming but instead set the global theme state using the
+     * `@atlaskit/tokens` APIs, as it's required for styling root `html` and `body` elements
+     * for compatibility with `@atlaskit/css-reset`.
+     *
+     * In the future we could consider moving away from DOM mutations and require AppProvider to wrap
+     * `html` in order to apply global theme state, which would allow a more consistent approach to
+     * theme loading.
+     */
+    isRootThemeProvider || (
+    /**
+     * Or 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.
+     *
+     * After we roll out the feature flag, this will be removed as we will
+     * only support sub-tree theming when used outside of AppProvider.
+     */
+    !isInsideAppProvider && !isInsideThemeProvider && !(0, _platformFeatureFlags.fg)('platform_dst_subtree_theming'))) {
+      /**
+       * 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
+       * `data-color-mode` attribute on the root element).
+       *
+       * Since we can't safely abort the `setGlobalTheme` execution, we need to wait for it to properly finish before
+       * applying the new theme.
+       *
+       * Without this, we can end up in the following scenario:
+       * 1. app loads with the default 'light' theme, kicking off `setGlobalTheme`
+       * 2. app switches to 'dark' theme after retrieving value persisted in local storage, calling `setGlobalTheme` again
+       * 3. `setGlobalTheme` function execution for `dark` finishes before the initial `light` execution
+       * 4. `setGlobalTheme` function execution for `light` then finishes, resulting in the 'light' theme being applied.
+       */
+      var cleanupLastFnCall = /*#__PURE__*/function () {
+        var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          var unbindFn;
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!lastSetGlobalThemePromiseRef.current) {
+                  _context.next = 6;
+                  break;
+                }
+                _context.next = 3;
+                return lastSetGlobalThemePromiseRef.current;
+              case 3:
+                unbindFn = _context.sent;
+                unbindFn();
+                lastSetGlobalThemePromiseRef.current = null;
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function cleanupLastFnCall() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      var safelySetGlobalTheme = /*#__PURE__*/function () {
+        var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          var promise;
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return cleanupLastFnCall();
+              case 2:
+                promise = (0, _tokens.setGlobalTheme)(_objectSpread(_objectSpread({}, theme), {}, {
+                  colorMode: reconciledColorMode
+                }));
+                lastSetGlobalThemePromiseRef.current = promise;
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function safelySetGlobalTheme() {
+          return _ref3.apply(this, arguments);
+        };
+      }();
+      safelySetGlobalTheme();
+      return function cleanup() {
+        cleanupLastFnCall();
+      };
+    } else {
+      // For other theme providers (whether outside AppProvider or nested inside a ThemeProvider),
+      // we treat them as sub-tree themes that do not load global theme state.
+      (0, _loadAndMountThemes.loadAndMountThemes)(theme);
+    }
+  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
+  (0, _react.useEffect)(function () {
+    if (!prefersDarkModeMql) {
+      return;
+    }
+    var unbindListener = (0, _bindEventListener.bind)(prefersDarkModeMql, {
+      type: 'change',
+      listener: function listener(event) {
+        if (chosenColorMode === 'auto') {
+          setReconciledColorMode(event.matches ? 'dark' : 'light');
+        }
+      }
+    });
+    return unbindListener;
+  }, [chosenColorMode]);
+  var attrs = _objectSpread(_objectSpread({}, (0, _tokens.getThemeHtmlAttrs)(_objectSpread(_objectSpread({}, theme), {}, {
+    colorMode: reconciledColorMode
+  }))), {}, (0, _defineProperty2.default)({}, _tokens.SUBTREE_THEME_ATTRIBUTE, true));
+  return /*#__PURE__*/_react.default.createElement(_insideThemeProvider.InsideThemeProviderContext.Provider, {
+    value: true
+  }, /*#__PURE__*/_react.default.createElement(_colorMode.ColorModeContext.Provider, {
+    value: reconciledColorMode
+  }, /*#__PURE__*/_react.default.createElement(_colorMode.SetColorModeContext.Provider, {
+    value: setColorMode
+  }, /*#__PURE__*/_react.default.createElement(_theme.ThemeContext.Provider, {
+    value: theme
+  }, /*#__PURE__*/_react.default.createElement(_theme.SetThemeContext.Provider, {
+    value: setPartialTheme
+  }, (0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, attrs, {
+    className: (0, _runtime.ax)([contentStyles.body])
+  }), children) : children)))));
+}
+var _default = exports.default = ThemeProvider;

package/dist/cjs/theme-provider/utils/is-theme-mounted.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isThemeMounted = isThemeMounted;
+var _browserApis = require("@atlaskit/browser-apis");
+var _tokens = require("@atlaskit/tokens");
+/**
+ * Checks if a theme is mounted in the document head.
+ *
+ * Eventually this won't be necessary as we'll utilise AppProvider context
+ * to track theme loading.
+ */
+function isThemeMounted(themeId) {
+  var doc = (0, _browserApis.getDocument)();
+  if (!doc) {
+    return false;
+  }
+  return doc.head.querySelector("style[".concat(_tokens.THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]"));
+}