@elastic/eui 88.0.0 → 88.2.0

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

@@ -10,14 +10,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _css = require("@emotion/css");
+var _css2 = require("@emotion/css");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _emotion = require("../emotion");
 var _context = require("./context");
-var _emotion = require("./emotion");
+var _emotion2 = require("./emotion");
 var _utils = require("./utils");
-var _react2 = require("@emotion/react");
 var _excluded = ["cloneElement", "className"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,35 +36,37 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     _modifications = _ref.modify,
     children = _ref.children,
     wrapperProps = _ref.wrapperProps;
-  var _useContext = (0, _react.useContext)(_context.EuiNestedThemeContext),
+  var _useContext = (0, _react2.useContext)(_context.EuiNestedThemeContext),
     isGlobalTheme = _useContext.isGlobalTheme,
-    bodyColor = _useContext.bodyColor;
-  var parentSystem = (0, _react.useContext)(_context.EuiSystemContext);
-  var parentModifications = (0, _react.useContext)(_context.EuiModificationsContext);
-  var parentColorMode = (0, _react.useContext)(_context.EuiColorModeContext);
-  var parentTheme = (0, _react.useContext)(_context.EuiThemeContext);
-  var _useState = (0, _react.useState)(_system || parentSystem),
+    bodyColor = _useContext.bodyColor,
+    globalCSSVariables = _useContext.globalCSSVariables,
+    setGlobalCSSVariables = _useContext.setGlobalCSSVariables;
+  var parentSystem = (0, _react2.useContext)(_context.EuiSystemContext);
+  var parentModifications = (0, _react2.useContext)(_context.EuiModificationsContext);
+  var parentColorMode = (0, _react2.useContext)(_context.EuiColorModeContext);
+  var parentTheme = (0, _react2.useContext)(_context.EuiThemeContext);
+  var _useState = (0, _react2.useState)(_system || parentSystem),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     system = _useState2[0],
     setSystem = _useState2[1];
-  var prevSystemKey = (0, _react.useRef)(system.key);
-  var _useState3 = (0, _react.useState)((0, _utils.mergeDeep)(parentModifications, _modifications)),
+  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, _react.useRef)(modifications);
-  var _useState5 = (0, _react.useState)((0, _utils.getColorMode)(_colorMode, parentColorMode)),
+  var prevModifications = (0, _react2.useRef)(modifications);
+  var _useState5 = (0, _react2.useState)((0, _utils.getColorMode)(_colorMode, parentColorMode)),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     colorMode = _useState6[0],
     setColorMode = _useState6[1];
-  var prevColorMode = (0, _react.useRef)(colorMode);
-  var isParentTheme = (0, _react.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && (0, _isEqual.default)(parentModifications, modifications));
-  var _useState7 = (0, _react.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
+  var prevColorMode = (0, _react2.useRef)(colorMode);
+  var isParentTheme = (0, _react2.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && (0, _isEqual.default)(parentModifications, modifications));
+  var _useState7 = (0, _react2.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
     : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     theme = _useState8[0],
     setTheme = _useState8[1];
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     var newSystem = _system || parentSystem;
     if (prevSystemKey.current !== newSystem.key) {
       setSystem(newSystem);
@@ -71,7 +74,7 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
       isParentTheme.current = false;
     }
   }, [_system, parentSystem]);
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     var newModifications = (0, _utils.mergeDeep)(parentModifications, _modifications);
     if (!(0, _isEqual.default)(prevModifications.current, newModifications)) {
       setModifications(newModifications);
@@ -79,7 +82,7 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
       isParentTheme.current = false;
     }
   }, [_modifications, parentModifications]);
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     var newColorMode = (0, _utils.getColorMode)(_colorMode, parentColorMode);
     if (!(0, _isEqual.default)(newColorMode, prevColorMode.current)) {
       setColorMode(newColorMode);
@@ -87,21 +90,34 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
       isParentTheme.current = false;
     }
   }, [_colorMode, parentColorMode]);
-  (0, _react.useEffect)(function () {
+  (0, _react2.useEffect)(function () {
     if (!isParentTheme.current) {
       setTheme((0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode));
     }
   }, [colorMode, system, modifications]);
-  var nestedThemeContext = (0, _react.useMemo)(function () {
+  var _useState9 = (0, _react2.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    themeCSSVariables = _useState10[0],
+    _setThemeCSSVariables = _useState10[1];
+  var setThemeCSSVariables = (0, _react2.useCallback)(function (variables) {
+    return _setThemeCSSVariables(function (previous) {
+      return _objectSpread(_objectSpread({}, previous), variables);
+    });
+  }, []);
+  var nestedThemeContext = (0, _react2.useMemo)(function () {
     return {
       isGlobalTheme: false,
       // The theme that determines the global body styles
       bodyColor: isGlobalTheme ? theme.colors.text : bodyColor,
       hasDifferentColorFromGlobalTheme: isGlobalTheme ? false : bodyColor !== theme.colors.text,
-      colorClassName: /*#__PURE__*/(0, _css.css)("label:euiColorMode-", _colorMode, ";color:", theme.colors.text, ";;label:colorClassName;")
+      colorClassName: /*#__PURE__*/(0, _css2.css)("label:euiColorMode-", _colorMode, ";color:", theme.colors.text, ";;label:colorClassName;"),
+      setGlobalCSSVariables: isGlobalTheme ? setThemeCSSVariables : setGlobalCSSVariables,
+      globalCSSVariables: isGlobalTheme ? themeCSSVariables : globalCSSVariables,
+      setNearestThemeCSSVariables: setThemeCSSVariables,
+      themeCSSVariables: themeCSSVariables
     };
-  }, [theme, isGlobalTheme, bodyColor, _colorMode]);
-  var renderedChildren = (0, _react.useMemo)(function () {
+  }, [theme, isGlobalTheme, bodyColor, _colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
+  var renderedChildren = (0, _react2.useMemo)(function () {
     if (isGlobalTheme) {
       return children; // No wrapper
     }
@@ -113,26 +129,37 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     var props = _objectSpread(_objectSpread({}, rest), {}, {
       className: (0, _classnames.default)(className, nestedThemeContext.colorClassName)
     });
+    // Condition avoids rendering an empty Emotion selector if no
+    // theme-specific CSS variables have been set by child components
+    if (themeCSSVariables) {
+      props.css = _objectSpread({
+        label: 'euiCSSVariables'
+      }, themeCSSVariables);
+    }
     if (cloneElement) {
-      return /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, props), {}, {
+      return (0, _emotion.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, props), {}, {
         className: (0, _classnames.default)(children.props.className, props.className)
       }));
     } else {
-      return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
+      return (0, _react.jsx)("span", (0, _extends2.default)({}, props, {
         className: (0, _classnames.default)('euiThemeProvider', props.className)
       }), children);
     }
-  }, [isGlobalTheme, nestedThemeContext, wrapperProps, children]);
-  return (0, _react2.jsx)(_context.EuiColorModeContext.Provider, {
+  }, [isGlobalTheme, themeCSSVariables, nestedThemeContext, wrapperProps, children]);
+  return (0, _react.jsx)(_react2.default.Fragment, null, isGlobalTheme && themeCSSVariables && (0, _react.jsx)(_react.Global, {
+    styles: /*#__PURE__*/(0, _react.css)({
+      ':root': themeCSSVariables
+    }, ";label:EuiThemeProvider;")
+  }), (0, _react.jsx)(_context.EuiColorModeContext.Provider, {
     value: colorMode
-  }, (0, _react2.jsx)(_context.EuiSystemContext.Provider, {
+  }, (0, _react.jsx)(_context.EuiSystemContext.Provider, {
     value: system
-  }, (0, _react2.jsx)(_context.EuiModificationsContext.Provider, {
+  }, (0, _react.jsx)(_context.EuiModificationsContext.Provider, {
     value: modifications
-  }, (0, _react2.jsx)(_context.EuiThemeContext.Provider, {
+  }, (0, _react.jsx)(_context.EuiThemeContext.Provider, {
     value: theme
-  }, (0, _react2.jsx)(_context.EuiNestedThemeContext.Provider, {
+  }, (0, _react.jsx)(_context.EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, (0, _react2.jsx)(_emotion.EuiEmotionThemeProvider, null, renderedChildren))))));
+  }, (0, _react.jsx)(_emotion2.EuiEmotionThemeProvider, null, renderedChildren)))))));
 };
 exports.EuiThemeProvider = EuiThemeProvider;

package/test-env/themes/amsterdam/global_styling/variables/_typography.js

@@ -36,6 +36,7 @@ var fontBase = {
   familySerif: 'Georgia, Times, Times New Roman, serif',
   // Careful using ligatures. Code editors like ACE will often error because of width calculations
   featureSettings: "'calt' 1, 'kern' 1, 'liga' 1",
+  defaultUnits: 'rem',
   baseline: (0, _utils.computed)(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
       base = _ref2[0];

package/src/components/accordion/_accordion_form.scss

@@ -1,40 +0,0 @@
-.euiAccordionForm__extraAction {
-  opacity: 0;
-  transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
-
-  &:focus {
-    opacity: 1;
-  }
-}
-
-.euiAccordionForm__title {
-  display: inline-block;
-}
-
-.euiAccordionForm__button {
-  padding: $euiSize $euiSize $euiSize 0;
-
-  &:hover {
-    text-decoration: none;
-
-    .euiAccordionForm__title {
-      text-decoration: underline;
-    }
-  }
-}
-
-.euiAccordionForm {
-  border-top: $euiBorderThin;
-  border-bottom: $euiBorderThin;
-
-  & + .euiAccordionForm {
-    border-top: none;
-  }
-
-  &:hover {
-    .euiAccordionForm__extraAction {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}

package/src/components/accordion/_index.scss

@@ -1 +0,0 @@
-@import 'accordion_form';