@elastic/eui 123.2.0 → 123.3.0

package/test-env/services/theme/provider.js

@@ -9,8 +9,8 @@ exports.EuiThemeProvider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -34,7 +34,23 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
+ */ /**
+ * Caches `value` during render, only swapping in a new one once `isSame`
+ * reports that it actually differs from the cached one.
+ *
+ * This keeps derived objects referentially stable (so that the - comparatively
+ * expensive - theme computation isn't rerun on every render) without deferring
+ * them to a `useEffect`/`setState` pair. Effect-synchronised state costs an
+ * extra commit, in which consumers would see e.g. an updated `colorMode`
+ * alongside a theme that is still computed from the previous one.
  */
+var useStableValue = function useStableValue(value, isSame) {
+  var ref = (0, _react2.useRef)(value);
+  if (ref.current !== value && !isSame(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+};
 var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
@@ -63,118 +79,85 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
   var EuiConditionalBreakpointProvider = (0, _react2.useMemo)(function () {
     return isGlobalTheme || _modifications !== null && _modifications !== void 0 && _modifications.breakpoint ? _current_breakpoint.CurrentEuiBreakpointProvider : _react2.Fragment;
   }, [isGlobalTheme, _modifications]);
-  var _useState = (0, _react2.useState)(_system || parentSystem),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    system = _useState2[0],
-    setSystem = _useState2[1];
-  var prevSystemKey = (0, _react2.useRef)(system.key);
-  var _useState3 = (0, _react2.useState)((0, _utils.mergeDeep)(parentModifications, _modifications)),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    modifications = _useState4[0],
-    setModifications = _useState4[1];
-  var prevModifications = (0, _react2.useRef)(modifications);
-  var _useState5 = (0, _react2.useState)((0, _utils.getColorMode)(_colorMode, parentColorMode, isForced)),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    colorMode = _useState6[0],
-    setColorMode = _useState6[1];
-  var prevColorMode = (0, _react2.useRef)(colorMode);
+
+  // Every value below is derived from props/parent context during render, so
+  // that all context values this provider exposes - most notably `colorMode`
+  // and the computed `theme` - always change within the same commit
+  var system = useStableValue(_system || parentSystem, function (previous, next) {
+    return previous.key === next.key;
+  });
+  var mergedModifications = (0, _react2.useMemo)(function () {
+    return (0, _utils.mergeDeep)(parentModifications, _modifications);
+  }, [parentModifications, _modifications]);
+  var modifications = useStableValue(mergedModifications, _isEqual.default);
+  var colorMode = (0, _react2.useMemo)(function () {
+    return (0, _utils.getColorMode)(_colorMode, parentColorMode, isForced);
+  }, [_colorMode, parentColorMode, isForced]);
   var highContrastMode = (0, _react2.useMemo)(function () {
     if (isForced) return 'forced'; // System forced high contrast mode will always supercede application settings
     if (_highContrastMode === true) return 'preferred'; // Convert the boolean prop to our internal enum
     if (_highContrastMode === false) return false; // Allow `false` prop to override user/system preference
     return parentHighContrastMode; // Fall back to the parent/system setting
   }, [_highContrastMode, parentHighContrastMode, isForced]);
-  var prevHighContrastMode = (0, _react2.useRef)(highContrastMode);
   var modificationsWithHighContrast = (0, _high_contrast_overrides.useHighContrastModifications)({
     highContrastMode: highContrastMode,
     colorMode: colorMode,
     system: system,
     modifications: modifications
   });
-  var isParentTheme = (0, _react2.useRef)(isGlobalTheme ? prevSystemKey.current === _context.DEFAULTS.system.key && colorMode === _context.DEFAULTS.colorMode && highContrastMode === _context.DEFAULTS.highContrastMode && !_modifications : prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && (0, _isEqual.default)(parentModifications, modifications));
-  var updateVisColorStore = (0, _react2.useCallback)(function (theme, isGlobalTheme) {
-    if (isGlobalTheme) {
-      _color.EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis);
+
+  // If this provider resolves to the exact same theme as its parent, the
+  // already computed parent theme can be reused instead of recomputing it
+  var isParentTheme = (0, _react2.useMemo)(function () {
+    return isGlobalTheme ? system.key === _context.DEFAULTS.system.key && colorMode === _context.DEFAULTS.colorMode && highContrastMode === _context.DEFAULTS.highContrastMode && !_modifications : system.key === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && (0, _isEqual.default)(parentModifications, modifications);
+  }, [isGlobalTheme, system, colorMode, highContrastMode, _modifications, parentSystem, parentColorMode, parentHighContrastMode, parentModifications, modifications]);
+
+  // Depending on `parentTheme` itself would recompute this provider's theme every
+  // time the parent's did, even where the parent's theme is not an input to it -
+  // `parentModifications` already reaches `getComputed` through `modifications`
+  var reusableParentTheme = isParentTheme && Object.keys(parentTheme).length ? parentTheme : null;
+  var theme = (0, _react2.useMemo)(function () {
+    if (reusableParentTheme) {
+      return _objectSpread({}, reusableParentTheme); // Intentionally create a new object to break referential equality
     }
-  }, []);
-  var getInitialTheme = function getInitialTheme() {
-    var theme = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode);
-    setTimeout(function () {
-      updateVisColorStore(theme, isGlobalTheme);
+
+    /* Enables recomputation of component colors when flags are overridden on the provider
+    by adding the respective key to modifications to trigger a recomputation. */
+    // NOTE: Keeping this as placeholder for potential future usage during Borealis changes
+    // TODO: remove once visual refresh is completed and flags are obsolete
+    var flagsToRecompute = [];
+    var keys = {};
+    var forceRecomputeComponents = flagsToRecompute.some(function (item) {
+      var _modifications$flags, _modifications$compon;
+      if (!item) return false;
+      if (Object.keys((_modifications$flags = modifications.flags) !== null && _modifications$flags !== void 0 ? _modifications$flags : {}).includes(item.flag) && !Object.keys((_modifications$compon = modifications.components) !== null && _modifications$compon !== void 0 ? _modifications$compon : {}).includes(item.componentKey)) {
+        keys[item.componentKey] = {
+          LIGHT: {},
+          DARK: {}
+        };
+        return true;
+      }
+      return false;
     });
-    return theme;
-  };
-  var _useState7 = (0, _react2.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
-    : getInitialTheme()),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    theme = _useState8[0],
-    setTheme = _useState8[1];
-  (0, _react2.useEffect)(function () {
-    var newSystem = _system || parentSystem;
-    if (prevSystemKey.current !== newSystem.key) {
-      setSystem(newSystem);
-      prevSystemKey.current = newSystem.key;
-      isParentTheme.current = false;
-    }
-  }, [_system, parentSystem, theme, updateVisColorStore]);
-  (0, _react2.useEffect)(function () {
-    updateVisColorStore(theme, isGlobalTheme);
-  }, [theme, colorMode, isGlobalTheme, updateVisColorStore]);
-  (0, _react2.useEffect)(function () {
-    var newModifications = (0, _utils.mergeDeep)(parentModifications, _modifications);
-    if (!(0, _isEqual.default)(prevModifications.current, newModifications)) {
-      setModifications(newModifications);
-      prevModifications.current = newModifications;
-      isParentTheme.current = false;
-    }
-  }, [_modifications, parentModifications]);
-  (0, _react2.useEffect)(function () {
-    var newColorMode = (0, _utils.getColorMode)(_colorMode, parentColorMode, isForced);
-    if (!(0, _isEqual.default)(newColorMode, prevColorMode.current)) {
-      setColorMode(newColorMode);
-      prevColorMode.current = newColorMode;
-      isParentTheme.current = false;
-    }
-  }, [_colorMode, parentColorMode, isForced]);
-  (0, _react2.useEffect)(function () {
-    if (prevHighContrastMode.current !== highContrastMode) {
-      isParentTheme.current = false;
-    }
-  }, [highContrastMode]);
-  (0, _react2.useEffect)(function () {
-    if (!isParentTheme.current) {
-      /* Enables recomputation of component colors when flags are overridden on the provider
-      by adding the respective key to modifications to trigger a recomputation. */
-      // NOTE: Keeping this as placeholder for potential future usage during Borealis changes
-      // TODO: remove once visual refresh is completed and flags are obsolete
-      var flagsToRecompute = [];
-      var keys = {};
-      var forceRecomputeComponents = flagsToRecompute.some(function (item) {
-        var _modifications$flags, _modifications$compon;
-        if (!item) return false;
-        if (Object.keys((_modifications$flags = modifications.flags) !== null && _modifications$flags !== void 0 ? _modifications$flags : {}).includes(item.flag) && !Object.keys((_modifications$compon = modifications.components) !== null && _modifications$compon !== void 0 ? _modifications$compon : {}).includes(item.componentKey)) {
-          keys[item.componentKey] = {
-            LIGHT: {},
-            DARK: {}
-          };
-          return true;
-        }
-        return false;
-      });
-      var componentModifications = forceRecomputeComponents ? {
-        components: keys
-      } : {};
+    var componentModifications = forceRecomputeComponents ? {
+      components: keys
+    } : {};
 
-      // force recomputing of color & component tokens based on flag changes
-      var enhancedModifications = _objectSpread(_objectSpread({}, modificationsWithHighContrast), componentModifications);
-      var rebuiltTheme = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(enhancedModifications, "_".concat(system.key)), colorMode, highContrastMode);
-      setTheme(rebuiltTheme);
+    // force recomputing of color & component tokens based on flag changes
+    var enhancedModifications = _objectSpread(_objectSpread({}, modificationsWithHighContrast), componentModifications);
+    return (0, _utils.getComputed)(system, (0, _utils.buildTheme)(enhancedModifications, "_".concat(system.key)), colorMode, highContrastMode);
+  }, [reusableParentTheme, system, colorMode, highContrastMode, modifications, modificationsWithHighContrast]);
+
+  // Genuine side effect - the vis color store is consumed outside of React
+  (0, _react2.useEffect)(function () {
+    if (isGlobalTheme) {
+      _color.EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis);
     }
-  }, [colorMode, highContrastMode, system, modificationsWithHighContrast, modifications]);
-  var _useState9 = (0, _react2.useState)(),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    themeCSSVariables = _useState10[0],
-    _setThemeCSSVariables = _useState10[1];
+  }, [theme, isGlobalTheme]);
+  var _useState = (0, _react2.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    themeCSSVariables = _useState2[0],
+    _setThemeCSSVariables = _useState2[1];
   var setThemeCSSVariables = (0, _react2.useCallback)(function (variables) {
     return _setThemeCSSVariables(function (previous) {
       var merged = _objectSpread(_objectSpread({}, previous), variables);