@atlaskit/app-provider 1.8.1 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/app-provider
 
+## 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
+
+- [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
+  [`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
+  This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
+  status of only supporting React 18 going forward. No explicit breaking change to React support has
+  been made in this release, but this is to signify going forward, breaking changes for React 16 or
+  React 17 may come via non-major semver releases.
+
+  Please refer this community post for more details:
+  https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.8.1
 
 ### Patch Changes

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/app-provider.d.ts

@@ -35,5 +35,5 @@ interface AppProviderProps {
  *
  * Place it at the root of your application.
  */
-declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, UNSAFE_isThemingDisabled, }: AppProviderProps): JSX.Element;
+declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, UNSAFE_isThemingDisabled, }: AppProviderProps): React.JSX.Element;
 export default AppProvider;

package/dist/types/router-link-provider/index.d.ts

@@ -45,5 +45,5 @@ type RouterLinkProviderProps = {
  */
 declare const RouterLinkProvider: ({ routerLinkComponent, children, }: RouterLinkProviderProps & {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default RouterLinkProvider;

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()__
  *
@@ -47,5 +47,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): React.JSX.Element;
 export default ThemeProvider;

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

@@ -35,5 +35,5 @@ interface AppProviderProps {
  *
  * Place it at the root of your application.
  */
-declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, UNSAFE_isThemingDisabled, }: AppProviderProps): JSX.Element;
+declare function AppProvider({ children, defaultColorMode, defaultTheme, routerLinkComponent, UNSAFE_isThemingDisabled, }: AppProviderProps): React.JSX.Element;
 export default AppProvider;

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

@@ -45,5 +45,5 @@ type RouterLinkProviderProps = {
  */
 declare const RouterLinkProvider: ({ routerLinkComponent, children, }: RouterLinkProviderProps & {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default RouterLinkProvider;

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()__
  *
@@ -47,5 +47,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): React.JSX.Element;
 export default ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/app-provider",
-	"version": "1.8.1",
+	"version": "2.1.0",
 	"description": "A top level provider for the Design System.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,21 +39,21 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/platform-feature-flags": "^1.0.0",
-		"@atlaskit/tokens": "^3.3.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/visual-regression": "*",
-		"@atlaskit/dropdown-menu": "^12.26.0",
-		"@atlaskit/ds-lib": "^3.5.0",
-		"@atlaskit/primitives": "^13.4.0",
-		"@atlaskit/ssr": "*",
-		"@atlaskit/visual-regression": "*",
+		"@af/visual-regression": "^1.3.0",
+		"@atlaskit/dropdown-menu": "^14.0.0",
+		"@atlaskit/ds-lib": "^4.0.0",
+		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^18.2.0",