@atlaskit/app-provider 3.3.3 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @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
+
+- [`2abd451d54eb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2abd451d54eb2) -
+  Removes atlassian-legacy-light/dark color themes from the tokens package. These themes are unused
+  and non-functional in terms of color contrast. As a result some primitive components may recieve
+  modern fallback color values in some scenarios, however these are inline with the latest token
+  themes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.3.3
 
 ### Patch 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

@@ -82,8 +82,9 @@ 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 isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
   var shouldUseGlobalTheming =
   /**
    * When not behind feature flag, partially revert to legacy behavior.

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

@@ -6,7 +6,7 @@ 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,8 +60,9 @@ function ThemeProvider({
   }, []);
   const lastSetGlobalThemePromiseRef = useRef(null);
   const isInsideAppProvider = useIsInsideAppProvider();
+  const isAppProviderThemingEnabled = useIsAppProviderThemingEnabled();
   const isInsideThemeProvider = useIsInsideThemeProvider();
-  const isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
+  const isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
   const shouldUseGlobalTheming =
   /**
    * When not behind feature flag, partially revert to legacy behavior.

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

@@ -12,7 +12,7 @@ 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,8 +73,9 @@ function ThemeProvider(_ref) {
   }, []);
   var lastSetGlobalThemePromiseRef = useRef(null);
   var isInsideAppProvider = useIsInsideAppProvider();
+  var isAppProviderThemingEnabled = useIsAppProviderThemingEnabled();
   var isInsideThemeProvider = useIsInsideThemeProvider();
-  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
+  var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider && isAppProviderThemingEnabled;
   var shouldUseGlobalTheming =
   /**
    * When not behind feature flag, partially revert to legacy behavior.

package/dist/types/context.d.ts

@@ -5,3 +5,10 @@
  */
 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/context.d.ts

@@ -5,3 +5,10 @@
  */
 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/app-provider",
-	"version": "3.3.3",
+	"version": "4.1.0",
 	"description": "A top level provider for the Design System.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^10.1.0",
+		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -48,7 +48,7 @@
 	"devDependencies": {
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/dropdown-menu": "^16.4.0",
-		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/primitives": "^18.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/testing-library": "^0.4.0",