@atlaskit/app-provider 1.4.3 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/app-provider
 
+## 1.6.0
+
+### Minor Changes
+
+- [#98648](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98648)
+  [`940af9dafa883`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/940af9dafa883) -
+  [ux] Default typography theme changed to modernized behind feature flag
+  `platform-default-typography-modernized`. If testing is successful the change will be available in
+  a later release.
+
+## 1.5.0
+
+### Minor Changes
+
+- [#101755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101755)
+  [`07ee1368bd69d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/07ee1368bd69d) -
+  Fixes a race condition with setting the theme. This change is behind a feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.4.3
 
 ### Patch Changes

package/dist/cjs/theme-provider.js

@@ -12,19 +12,25 @@ exports.useColorMode = useColorMode;
 exports.useSetColorMode = useSetColorMode;
 exports.useSetTheme = useSetTheme;
 exports.useTheme = useTheme;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+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");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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'
+var defaultThemeSettings = function defaultThemeSettings() {
+  return {
+    dark: 'dark',
+    light: 'light',
+    spacing: 'spacing',
+    typography: (0, _platformFeatureFlags.fg)('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+  };
 };
 var ColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var SetColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -115,16 +121,7 @@ function getReconciledColorMode(colorMode) {
 function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    _ref$defaultTheme2 = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme,
-    _ref$defaultTheme2$da = _ref$defaultTheme2.dark,
-    dark = _ref$defaultTheme2$da === void 0 ? 'dark' : _ref$defaultTheme2$da,
-    _ref$defaultTheme2$li = _ref$defaultTheme2.light,
-    light = _ref$defaultTheme2$li === void 0 ? 'light' : _ref$defaultTheme2$li,
-    _ref$defaultTheme2$sp = _ref$defaultTheme2.spacing,
-    spacing = _ref$defaultTheme2$sp === void 0 ? 'spacing' : _ref$defaultTheme2$sp,
-    typography = _ref$defaultTheme2.typography,
-    shape = _ref$defaultTheme2.shape;
+    defaultTheme = _ref.defaultTheme;
   var _useState = (0, _react.useState)(defaultColorMode),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -133,12 +130,8 @@ function ThemeProvider(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = (0, _react.useState)({
-      dark: dark,
-      light: light,
-      spacing: spacing,
-      typography: typography,
-      shape: shape
+  var _useState5 = (0, _react.useState)(function () {
+      return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
     }),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     theme = _useState6[0],
@@ -153,10 +146,87 @@ function ThemeProvider(_ref) {
     });
   }, []);
   (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_dst_fix_set_theme_race')) {
+      return;
+    }
     (0, _tokens.setGlobalTheme)(_objectSpread(_objectSpread({}, theme), {}, {
       colorMode: reconciledColorMode
     }));
   }, [theme, reconciledColorMode]);
+  var lastSetGlobalThemePromiseRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_dst_fix_set_theme_race')) {
+      return;
+    }
+
+    /**
+     * 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();
+    };
+  }, [theme, reconciledColorMode]);
   (0, _react.useEffect)(function () {
     if (!prefersDarkModeMql) {
       return;

package/dist/es2019/theme-provider.js

@@ -1,11 +1,13 @@
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+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';
-const defaultThemeSettings = {
+const defaultThemeSettings = () => ({
   dark: 'dark',
   light: 'light',
-  spacing: 'spacing'
-};
+  spacing: 'spacing',
+  typography: fg('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+});
 const ColorModeContext = /*#__PURE__*/createContext(undefined);
 const SetColorModeContext = /*#__PURE__*/createContext(undefined);
 const ThemeContext = /*#__PURE__*/createContext(undefined);
@@ -95,23 +97,14 @@ function getReconciledColorMode(colorMode) {
 export function ThemeProvider({
   children,
   defaultColorMode,
-  defaultTheme: {
-    dark = 'dark',
-    light = 'light',
-    spacing = 'spacing',
-    typography,
-    shape
-  } = defaultThemeSettings
+  defaultTheme
 }) {
   const [chosenColorMode, setChosenColorMode] = useState(defaultColorMode);
   const [reconciledColorMode, setReconciledColorMode] = useState(getReconciledColorMode(defaultColorMode));
-  const [theme, setTheme] = useState({
-    dark,
-    light,
-    spacing,
-    typography,
-    shape
-  });
+  const [theme, setTheme] = useState(() => ({
+    ...defaultThemeSettings(),
+    ...defaultTheme
+  }));
   const setColorMode = useCallback(colorMode => {
     setChosenColorMode(colorMode);
     setReconciledColorMode(getReconciledColorMode(colorMode));
@@ -123,11 +116,54 @@ export function ThemeProvider({
     }));
   }, []);
   useEffect(() => {
+    if (fg('platform_dst_fix_set_theme_race')) {
+      return;
+    }
     setGlobalTheme({
       ...theme,
       colorMode: reconciledColorMode
     });
   }, [theme, reconciledColorMode]);
+  const lastSetGlobalThemePromiseRef = useRef(null);
+  useEffect(() => {
+    if (!fg('platform_dst_fix_set_theme_race')) {
+      return;
+    }
+
+    /**
+     * 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.
+     */
+    const cleanupLastFnCall = async () => {
+      if (lastSetGlobalThemePromiseRef.current) {
+        const unbindFn = await lastSetGlobalThemePromiseRef.current;
+        unbindFn();
+        lastSetGlobalThemePromiseRef.current = null;
+      }
+    };
+    const safelySetGlobalTheme = async () => {
+      await cleanupLastFnCall();
+      const promise = setGlobalTheme({
+        ...theme,
+        colorMode: reconciledColorMode
+      });
+      lastSetGlobalThemePromiseRef.current = promise;
+    };
+    safelySetGlobalTheme();
+    return function cleanup() {
+      cleanupLastFnCall();
+    };
+  }, [theme, reconciledColorMode]);
   useEffect(() => {
     if (!prefersDarkModeMql) {
       return;

package/dist/esm/theme-provider.js

@@ -1,14 +1,20 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+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';
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
+var defaultThemeSettings = function defaultThemeSettings() {
+  return {
+    dark: 'dark',
+    light: 'light',
+    spacing: 'spacing',
+    typography: fg('platform-default-typography-modernized') ? 'typography-modernized' : undefined
+  };
 };
 var ColorModeContext = /*#__PURE__*/createContext(undefined);
 var SetColorModeContext = /*#__PURE__*/createContext(undefined);
@@ -99,16 +105,7 @@ function getReconciledColorMode(colorMode) {
 export function ThemeProvider(_ref) {
   var children = _ref.children,
     defaultColorMode = _ref.defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    _ref$defaultTheme2 = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme,
-    _ref$defaultTheme2$da = _ref$defaultTheme2.dark,
-    dark = _ref$defaultTheme2$da === void 0 ? 'dark' : _ref$defaultTheme2$da,
-    _ref$defaultTheme2$li = _ref$defaultTheme2.light,
-    light = _ref$defaultTheme2$li === void 0 ? 'light' : _ref$defaultTheme2$li,
-    _ref$defaultTheme2$sp = _ref$defaultTheme2.spacing,
-    spacing = _ref$defaultTheme2$sp === void 0 ? 'spacing' : _ref$defaultTheme2$sp,
-    typography = _ref$defaultTheme2.typography,
-    shape = _ref$defaultTheme2.shape;
+    defaultTheme = _ref.defaultTheme;
   var _useState = useState(defaultColorMode),
     _useState2 = _slicedToArray(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -117,12 +114,8 @@ export function ThemeProvider(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = useState({
-      dark: dark,
-      light: light,
-      spacing: spacing,
-      typography: typography,
-      shape: shape
+  var _useState5 = useState(function () {
+      return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
     }),
     _useState6 = _slicedToArray(_useState5, 2),
     theme = _useState6[0],
@@ -137,10 +130,87 @@ export function ThemeProvider(_ref) {
     });
   }, []);
   useEffect(function () {
+    if (fg('platform_dst_fix_set_theme_race')) {
+      return;
+    }
     setGlobalTheme(_objectSpread(_objectSpread({}, theme), {}, {
       colorMode: reconciledColorMode
     }));
   }, [theme, reconciledColorMode]);
+  var lastSetGlobalThemePromiseRef = useRef(null);
+  useEffect(function () {
+    if (!fg('platform_dst_fix_set_theme_race')) {
+      return;
+    }
+
+    /**
+     * 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();
+    };
+  }, [theme, reconciledColorMode]);
   useEffect(function () {
     if (!prefersDarkModeMql) {
       return;

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

@@ -47,5 +47,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

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

@@ -47,5 +47,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/app-provider",
-	"version": "1.4.3",
+	"version": "1.6.0",
 	"description": "A top level provider for the Design System.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,8 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^2.4.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -90,5 +91,13 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/app-provider"
+	"homepage": "https://atlassian.design/components/app-provider",
+	"platform-feature-flags": {
+		"platform_dst_fix_set_theme_race": {
+			"type": "boolean"
+		},
+		"platform-default-typography-modernized": {
+			"type": "boolean"
+		}
+	}
 }