@atlaskit/app-provider 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/app-provider
 
+## 2.2.0
+
+### Minor Changes
+
+- [#157071](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157071)
+  [`a149a0b1559ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a149a0b1559ec) -
+  We are testing the migration to the ADS Link component behind a feature flag. If this fix is
+  successful it will be available in a later release.
+
+## 2.1.0
+
+### Minor Changes
+
+- [#130763](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130763)
+  [`42fdfd64b606b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42fdfd64b606b) -
+  useTheme now falls back to reading theme state from the DOM for cases where the
+  AppProvider/ThemeProvider is not in use. This allows us to replace all usage of `useThemeObserver`
+  with `useTheme` in other Design System packages without issue.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.0.0
 
 ### Major Changes

package/constellation/index/examples.mdx

@@ -8,7 +8,7 @@ import routerLinkComponentExample from '../../examples/constellation/2-router-li
 
 ## Theming
 
-AppProvider sets up theming for an app, enabling [design tokens](/tokens/design-tokens) to be used.
+App provider sets up theming for an app, enabling [design tokens](/tokens/design-tokens) to be used.
 
 <Example
 	Component={defaultExample.example}
@@ -51,4 +51,5 @@ routing library can be used.
 	source={routerLinkComponentExample.code}
 	appearance="source-only"
 	packageName="@atlaskit/app-provider"
+	isCodeSandboxDisabled
 />

package/dist/cjs/theme-provider.js

@@ -80,11 +80,23 @@ function useSetColorMode() {
  * Returns the current theme settings when inside the app provider.
  */
 function useTheme() {
-  var value = (0, _react.useContext)(ThemeContext);
-  if (!value) {
-    throw new Error('useTheme must be used within AppProvider.');
-  }
-  return value;
+  var theme = (0, _react.useContext)(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 resolvedTheme;
 }
 
 /**
@@ -121,20 +133,20 @@ function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _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)),
+  var _useState3 = (0, _react.useState)(defaultColorMode),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    reconciledColorMode = _useState4[0],
-    setReconciledColorMode = _useState4[1];
-  var _useState5 = (0, _react.useState)(function () {
+    chosenColorMode = _useState4[0],
+    setChosenColorMode = _useState4[1];
+  var _useState5 = (0, _react.useState)(getReconciledColorMode(defaultColorMode)),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    reconciledColorMode = _useState6[0],
+    setReconciledColorMode = _useState6[1];
+  var _useState7 = (0, _react.useState)(function () {
       return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
     }),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    theme = _useState6[0],
-    setTheme = _useState6[1];
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    theme = _useState8[0],
+    setTheme = _useState8[1];
   var setColorMode = (0, _react.useCallback)(function (colorMode) {
     setChosenColorMode(colorMode);
     setReconciledColorMode(getReconciledColorMode(colorMode));

package/dist/es2019/theme-provider.js

@@ -1,7 +1,7 @@
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { setGlobalTheme } from '@atlaskit/tokens';
+import { getGlobalTheme, setGlobalTheme, ThemeMutationObserver } from '@atlaskit/tokens';
 const defaultThemeSettings = () => ({
   dark: 'dark',
   light: 'light',
@@ -57,11 +57,18 @@ export function useSetColorMode() {
  * Returns the current theme settings when inside the app provider.
  */
 export function useTheme() {
-  const value = useContext(ThemeContext);
-  if (!value) {
-    throw new Error('useTheme must be used within AppProvider.');
-  }
-  return value;
+  const theme = useContext(ThemeContext);
+  const [resolvedTheme, setResolvedTheme] = useState(theme || getGlobalTheme());
+  useEffect(() => {
+    // We are using theme from context so no need to reference the DOM
+    if (theme) {
+      return;
+    }
+    const observer = new ThemeMutationObserver(setResolvedTheme);
+    observer.observe();
+    return () => observer.disconnect();
+  }, [theme]);
+  return resolvedTheme;
 }
 
 /**

package/dist/esm/theme-provider.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { setGlobalTheme } from '@atlaskit/tokens';
+import { getGlobalTheme, setGlobalTheme, ThemeMutationObserver } from '@atlaskit/tokens';
 var defaultThemeSettings = function defaultThemeSettings() {
   return {
     dark: 'dark',
@@ -65,11 +65,23 @@ export function useSetColorMode() {
  * Returns the current theme settings when inside the app provider.
  */
 export function useTheme() {
-  var value = useContext(ThemeContext);
-  if (!value) {
-    throw new Error('useTheme must be used within AppProvider.');
-  }
-  return value;
+  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 resolvedTheme;
 }
 
 /**
@@ -106,20 +118,20 @@ function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
     defaultTheme = _ref.defaultTheme;
-  var _useState = useState(defaultColorMode),
-    _useState2 = _slicedToArray(_useState, 2),
-    chosenColorMode = _useState2[0],
-    setChosenColorMode = _useState2[1];
-  var _useState3 = useState(getReconciledColorMode(defaultColorMode)),
+  var _useState3 = useState(defaultColorMode),
     _useState4 = _slicedToArray(_useState3, 2),
-    reconciledColorMode = _useState4[0],
-    setReconciledColorMode = _useState4[1];
-  var _useState5 = useState(function () {
+    chosenColorMode = _useState4[0],
+    setChosenColorMode = _useState4[1];
+  var _useState5 = useState(getReconciledColorMode(defaultColorMode)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    reconciledColorMode = _useState6[0],
+    setReconciledColorMode = _useState6[1];
+  var _useState7 = useState(function () {
       return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    theme = _useState6[0],
-    setTheme = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    theme = _useState8[0],
+    setTheme = _useState8[1];
   var setColorMode = useCallback(function (colorMode) {
     setChosenColorMode(colorMode);
     setReconciledColorMode(getReconciledColorMode(colorMode));

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

@@ -28,7 +28,7 @@ export declare function useSetColorMode(): (value: ColorMode) => void;
  *
  * Returns the current theme settings when inside the app provider.
  */
-export declare function useTheme(): Theme;
+export declare function useTheme(): Partial<Theme>;
 /**
  * __useSetTheme()__
  *

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

@@ -28,7 +28,7 @@ export declare function useSetColorMode(): (value: ColorMode) => void;
  *
  * Returns the current theme settings when inside the app provider.
  */
-export declare function useTheme(): Theme;
+export declare function useTheme(): Partial<Theme>;
 /**
  * __useSetTheme()__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/app-provider",
-	"version": "2.0.0",
+	"version": "2.2.0",
 	"description": "A top level provider for the Design System.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -48,12 +48,12 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/visual-regression": "*",
-		"@atlaskit/dropdown-menu": "^13.0.0",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/dropdown-menu": "^15.2.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/primitives": "^14.0.0",
-		"@atlaskit/ssr": "*",
-		"@atlaskit/visual-regression": "*",
+		"@atlaskit/primitives": "^14.8.0",
+		"@atlaskit/visual-regression": "workspace:^",
+		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^18.2.0",