@atlaskit/app-provider 3.2.9 → 3.3.0

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

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useContext, useEffect, useState } from 'react';
+import { getGlobalTheme, ThemeMutationObserver } from '@atlaskit/tokens';
+import { ColorModeContext } from '../context/color-mode';
+
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+export function useColorMode() {
+  var value = useContext(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 = getGlobalTheme();
+  var _useState = useState((theme === null || theme === void 0 ? void 0 : theme.colorMode) || 'light'),
+    _useState2 = _slicedToArray(_useState, 2),
+    resolvedColorMode = _useState2[0],
+    setResolvedColorMode = _useState2[1];
+  useEffect(function () {
+    // We are using theme from context so no need to reference the DOM
+    if (value) {
+      return;
+    }
+    var observer = new 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/esm/theme-provider/hooks/use-is-inside-theme-provider.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { InsideThemeProviderContext } from '../context/inside-theme-provider';
+
+/**
+ * __useIsInsideThemeProvider()__
+ *
+ * Returns true if the current component is inside a ThemeProvider.
+ */
+export var useIsInsideThemeProvider = function useIsInsideThemeProvider() {
+  var _useContext;
+  return (_useContext = useContext(InsideThemeProviderContext)) !== null && _useContext !== void 0 ? _useContext : false;
+};

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

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { SetColorModeContext } from '../context/color-mode';
+
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+export function useSetColorMode() {
+  var value = useContext(SetColorModeContext);
+  if (!value) {
+    throw new Error('useSetColorMode must be used within ThemeProvider.');
+  }
+  return value;
+}

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

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { SetThemeContext } from '../context/theme';
+
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+export function useSetTheme() {
+  var value = useContext(SetThemeContext);
+  if (!value) {
+    throw new Error('useSetTheme must be used within ThemeProvider.');
+  }
+  return value;
+}

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

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useContext, useEffect, useState } from 'react';
+import { getGlobalTheme, ThemeMutationObserver } from '@atlaskit/tokens';
+import { ThemeContext } from '../context/theme';
+
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+export function useTheme() {
+  var theme = useContext(ThemeContext);
+  var _useState = useState(theme || getGlobalTheme()),
+    _useState2 = _slicedToArray(_useState, 2),
+    resolvedTheme = _useState2[0],
+    setResolvedTheme = _useState2[1];
+  useEffect(function () {
+    // We are using theme from context so no need to reference the DOM
+    if (theme) {
+      return;
+    }
+    var observer = new ThemeMutationObserver(setResolvedTheme);
+    observer.observe();
+    return function () {
+      return observer.disconnect();
+    };
+  }, [theme]);
+  return theme ? theme : resolvedTheme;
+}

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

@@ -0,0 +1,212 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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) { _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, themeStateDefaults } from '@atlaskit/tokens';
+import { useIsInsideAppProvider } from '../context';
+import { ColorModeContext, SetColorModeContext } from './context/color-mode';
+import { InsideThemeProviderContext } from './context/inside-theme-provider';
+import { SetThemeContext, ThemeContext } from './context/theme';
+import { useIsInsideThemeProvider } from './hooks/use-is-inside-theme-provider';
+import { loadAndMountThemes } from './utils/load-and-mount-themes';
+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 = useState(defaultColorMode),
+    _useState2 = _slicedToArray(_useState, 2),
+    chosenColorMode = _useState2[0],
+    setChosenColorMode = _useState2[1];
+  var _useState3 = useState(getReconciledColorMode(defaultColorMode)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    reconciledColorMode = _useState4[0],
+    setReconciledColorMode = _useState4[1];
+  var _useState5 = useState(function () {
+      return _objectSpread(_objectSpread({}, defaultThemeSettings), defaultTheme);
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    theme = _useState6[0],
+    setTheme = _useState6[1];
+  var setColorMode = useCallback(function (colorMode) {
+    setChosenColorMode(colorMode);
+    setReconciledColorMode(getReconciledColorMode(colorMode));
+  }, []);
+  var setPartialTheme = useCallback(function (nextTheme) {
+    setTheme(function (theme) {
+      return _objectSpread(_objectSpread({}, theme), nextTheme);
+    });
+  }, []);
+  var lastSetGlobalThemePromiseRef = useRef(null);
+  var isInsideAppProvider = useIsInsideAppProvider();
+  var isInsideThemeProvider = useIsInsideThemeProvider();
+  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
+  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 && !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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          var unbindFn;
+          return _regeneratorRuntime.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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          var promise;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return cleanupLastFnCall();
+              case 2:
+                promise = 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.
+      var themeState = _objectSpread(_objectSpread({}, theme), {}, {
+        colorMode: reconciledColorMode,
+        contrastMode: themeStateDefaults.contrastMode,
+        shape: themeStateDefaults.shape(),
+        typography: themeStateDefaults.typography()
+      });
+      loadAndMountThemes(themeState);
+    }
+  }, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
+  useEffect(function () {
+    if (!prefersDarkModeMql) {
+      return;
+    }
+    var unbindListener = bind(prefersDarkModeMql, {
+      type: 'change',
+      listener: function listener(event) {
+        if (chosenColorMode === 'auto') {
+          setReconciledColorMode(event.matches ? 'dark' : 'light');
+        }
+      }
+    });
+    return unbindListener;
+  }, [chosenColorMode]);
+  var attrs = _objectSpread(_objectSpread({}, getThemeHtmlAttrs(_objectSpread(_objectSpread({}, theme), {}, {
+    colorMode: reconciledColorMode
+  }))), {}, _defineProperty({}, SUBTREE_THEME_ATTRIBUTE, true));
+  return /*#__PURE__*/React.createElement(InsideThemeProviderContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
+    value: reconciledColorMode
+  }, /*#__PURE__*/React.createElement(SetColorModeContext.Provider, {
+    value: setColorMode
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(SetThemeContext.Provider, {
+    value: setPartialTheme
+  }, fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
+    className: ax([contentStyles.body])
+  }), children) : children)))));
+}
+export default ThemeProvider;

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

@@ -0,0 +1,16 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { THEME_DATA_ATTRIBUTE } from '@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.
+ */
+export function isThemeMounted(themeId) {
+  var doc = getDocument();
+  if (!doc) {
+    return false;
+  }
+  return doc.head.querySelector("style[".concat(THEME_DATA_ATTRIBUTE, "=\"").concat(themeId, "\"]"));
+}

package/dist/esm/theme-provider/utils/load-and-mount-themes.js

@@ -0,0 +1,123 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getDocument } from '@atlaskit/browser-apis';
+import { themeImportMap } from '@atlaskit/tokens';
+import { isThemeMounted } from './is-theme-mounted';
+var loadThemeCss = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
+    var _yield$themeImportMap, themeCss;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!isThemeMounted(themeId)) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          if (themeId) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return");
+        case 4:
+          _context.next = 6;
+          return themeImportMap[themeId]();
+        case 6:
+          _yield$themeImportMap = _context.sent;
+          themeCss = _yield$themeImportMap.default;
+          return _context.abrupt("return", themeCss);
+        case 9:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function loadThemeCss(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var mountThemeCss = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(css, themeId) {
+    var doc, style;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          // SSR-safe: Only mount on client side
+          doc = getDocument();
+          if (doc) {
+            _context2.next = 3;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 3:
+          style = doc.createElement('style');
+          style.textContent = css;
+          style.dataset.theme = themeId;
+
+          // Prevent duplicate mounting of themes.
+          // It's possible the theme was already being loaded elsewhere.
+          if (!isThemeMounted(themeId)) {
+            _context2.next = 8;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 8:
+          doc.head.appendChild(style);
+        case 9:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function mountThemeCss(_x2, _x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var loadAndMountThemeCss = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(themeId) {
+    var themeCss;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return loadThemeCss(themeId);
+        case 2:
+          themeCss = _context3.sent;
+          if (themeCss) {
+            _context3.next = 5;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 5:
+          mountThemeCss(themeCss, themeId);
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function loadAndMountThemeCss(_x4) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+export var loadAndMountThemes = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(themeState) {
+    var themesToLoad;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          themesToLoad = [themeState.light, themeState.dark, themeState.spacing, themeState.shape, themeState.typography].filter(function (themeId) {
+            return !!themeId;
+          });
+          themesToLoad.forEach(loadAndMountThemeCss);
+        case 2:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return function loadAndMountThemes(_x5) {
+    return _ref4.apply(this, arguments);
+  };
+}();

package/dist/types/app-provider.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+import type { ThemeColorModes } from '@atlaskit/tokens';
 import { type RouterLinkComponent } from './router-link-provider';
-import { type ColorMode, type Theme } from './theme-provider';
+import { type Theme } from './theme-provider/context/theme';
 interface AppProviderProps {
     /**
      * Initial color mode.
      */
-    defaultColorMode?: ColorMode;
+    defaultColorMode?: ThemeColorModes;
     /**
      * Theme settings.
      */

package/dist/types/context.d.ts

@@ -0,0 +1,7 @@
+/**
+ * __Inside app provider context__
+ *
+ * A context that indicates if the current component is inside an AppProvider.
+ */
+export declare const InsideAppProviderContext: import("react").Context<boolean>;
+export declare const useIsInsideAppProvider: () => boolean;

package/dist/types/index.d.ts

@@ -1,6 +1,11 @@
 export { default } from './app-provider';
-export { default as ThemeProvider } from './theme-provider';
-export { UNSAFE_useColorModeForMigration, useColorMode, useSetColorMode, useSetTheme, useTheme, } from './theme-provider';
+export { UNSAFE_useColorModeForMigration } from './theme-provider/hooks/use-color-mode-for-migration';
+export { useColorMode } from './theme-provider/hooks/use-color-mode';
+export { useSetColorMode } from './theme-provider/hooks/use-set-color-mode';
+export { useSetTheme } from './theme-provider/hooks/use-set-theme';
+export { useTheme } from './theme-provider/hooks/use-theme';
+export type { Theme } from './theme-provider/context/theme';
+export { default as ThemeProvider, type ThemeProviderProps } from './theme-provider';
 export { type RouterLinkComponent, type RouterLinkComponentProps } from './router-link-provider';
 import useRouterLink from './router-link-provider/hooks/use-router-link';
 export { useRouterLink };

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

@@ -0,0 +1,10 @@
+import type { ThemeColorModes } from '@atlaskit/tokens';
+export type ReconciledColorMode = Exclude<ThemeColorModes, 'auto'>;
+/**
+ * __Color mode context__
+ */
+export declare const ColorModeContext: import("react").Context<ReconciledColorMode | undefined>;
+/**
+ * __Set color mode context__
+ */
+export declare const SetColorModeContext: import("react").Context<((value: ThemeColorModes) => void) | undefined>;

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

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

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

@@ -0,0 +1,10 @@
+import type { ThemeState } from '@atlaskit/tokens';
+export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
+/**
+ * __Theme context__
+ */
+export declare const ThemeContext: import("react").Context<Theme | undefined>;
+/**
+ * __Set theme context__
+ */
+export declare const SetThemeContext: import("react").Context<((value: Partial<Theme>) => void) | undefined>;

package/dist/types/theme-provider/hooks/use-color-mode-for-migration.d.ts

@@ -0,0 +1,9 @@
+import { type ReconciledColorMode } from '../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.
+ */
+export declare function UNSAFE_useColorModeForMigration(): ReconciledColorMode | undefined;

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

@@ -0,0 +1,7 @@
+import { type ReconciledColorMode } from '../context/color-mode';
+/**
+ * __useColorMode()__
+ *
+ * Returns the current color mode when inside the app provider.
+ */
+export declare function useColorMode(): ReconciledColorMode;

package/dist/types/theme-provider/hooks/use-is-inside-theme-provider.d.ts

@@ -0,0 +1,6 @@
+/**
+ * __useIsInsideThemeProvider()__
+ *
+ * Returns true if the current component is inside a ThemeProvider.
+ */
+export declare const useIsInsideThemeProvider: () => boolean;

package/dist/types/theme-provider/hooks/use-set-color-mode.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeColorModes } from '@atlaskit/tokens';
+/**
+ * __useSetColorMode()__
+ *
+ * Returns the color mode setter when inside the app provider.
+ */
+export declare function useSetColorMode(): (value: ThemeColorModes) => void;

package/dist/types/theme-provider/hooks/use-set-theme.d.ts

@@ -0,0 +1,7 @@
+import { type Theme } from '../context/theme';
+/**
+ * __useSetTheme()__
+ *
+ * Returns the theme setter when inside the app provider.
+ */
+export declare function useSetTheme(): (value: Partial<Theme>) => void;

package/dist/types/theme-provider/hooks/use-theme.d.ts

@@ -0,0 +1,7 @@
+import { type Theme } from '../context/theme';
+/**
+ * __useTheme()__
+ *
+ * Returns the current theme settings when inside the app provider.
+ */
+export declare function useTheme(): Partial<Theme>;

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

@@ -0,0 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { type ThemeColorModes } from '@atlaskit/tokens';
+import { type Theme } from './context/theme';
+export interface ThemeProviderProps {
+    defaultColorMode?: ThemeColorModes;
+    defaultTheme?: Partial<Theme>;
+    children: React.ReactNode;
+}
+/**
+ * __Theme provider__
+ *
+ * Provides global theming configuration.
+ */
+declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
+export default ThemeProvider;

package/dist/types/theme-provider/utils/is-theme-mounted.d.ts

@@ -0,0 +1,8 @@
+import { type ThemeIds } from '@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.
+ */
+export declare function isThemeMounted(themeId: ThemeIds): false | Element | null;

package/dist/types/theme-provider/utils/load-and-mount-themes.d.ts

@@ -0,0 +1,2 @@
+import { type ThemeState } from '@atlaskit/tokens';
+export declare const loadAndMountThemes: (themeState: Partial<ThemeState>) => Promise<void>;

package/dist/types-ts4.5/app-provider.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
+import type { ThemeColorModes } from '@atlaskit/tokens';
 import { type RouterLinkComponent } from './router-link-provider';
-import { type ColorMode, type Theme } from './theme-provider';
+import { type Theme } from './theme-provider/context/theme';
 interface AppProviderProps {
     /**
      * Initial color mode.
      */
-    defaultColorMode?: ColorMode;
+    defaultColorMode?: ThemeColorModes;
     /**
      * Theme settings.
      */

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

@@ -0,0 +1,7 @@
+/**
+ * __Inside app provider context__
+ *
+ * A context that indicates if the current component is inside an AppProvider.
+ */
+export declare const InsideAppProviderContext: import("react").Context<boolean>;
+export declare const useIsInsideAppProvider: () => boolean;

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

@@ -1,6 +1,11 @@
 export { default } from './app-provider';
-export { default as ThemeProvider } from './theme-provider';
-export { UNSAFE_useColorModeForMigration, useColorMode, useSetColorMode, useSetTheme, useTheme, } from './theme-provider';
+export { UNSAFE_useColorModeForMigration } from './theme-provider/hooks/use-color-mode-for-migration';
+export { useColorMode } from './theme-provider/hooks/use-color-mode';
+export { useSetColorMode } from './theme-provider/hooks/use-set-color-mode';
+export { useSetTheme } from './theme-provider/hooks/use-set-theme';
+export { useTheme } from './theme-provider/hooks/use-theme';
+export type { Theme } from './theme-provider/context/theme';
+export { default as ThemeProvider, type ThemeProviderProps } from './theme-provider';
 export { type RouterLinkComponent, type RouterLinkComponentProps } from './router-link-provider';
 import useRouterLink from './router-link-provider/hooks/use-router-link';
 export { useRouterLink };