@elastic/eui 59.0.1 → 59.1.0-rc1

package/es/components/provider/system/system.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 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.
+ */
+import React, { forwardRef } from 'react';
+import { useEuiTheme } from '../../../services';
+import { EuiCacheProvider, useEuiCacheContext } from '../cache';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+// If a component usese `forwardRef` you'll need to pass its props directly via `T` (`withEuiTheme<EuiComponentProps>(EuiComponent)`)
+// TypeScript cannot infer correctly with the extra `forwardRef` types.
+export var withEuiSystem = function withEuiSystem(Component) {
+  var componentName = Component.displayName || Component.name || 'Component';
+
+  var Render = function Render(props, ref) {
+    var euiTheme = useEuiTheme();
+    var cache = useEuiCacheContext();
+    return ___EmotionJSX(EuiCacheProvider, {
+      cache: cache
+    }, ___EmotionJSX(Component, _extends({
+      euiTheme: euiTheme,
+      ref: ref
+    }, props)));
+  };
+
+  var WithEuiSystem = /*#__PURE__*/forwardRef(Render);
+  WithEuiSystem.displayName = componentName.replace(/^_{1}/, '');
+  return WithEuiSystem;
+};

package/es/components/spacer/spacer.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "size"];
+var _excluded = ["className", "euiTheme", "size"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -18,17 +18,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { withEuiSystem } from '../provider/system';
 import { euiSpacerStyles } from './spacer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['xs', 's', 'm', 'l', 'xl', 'xxl'];
-export var EuiSpacer = function EuiSpacer(_ref) {
+export var _EuiSpacer = function _EuiSpacer(_ref) {
   var className = _ref.className,
+      euiTheme = _ref.euiTheme,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'l' : _ref$size,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = useEuiTheme();
   var styles = euiSpacerStyles(euiTheme);
   var classes = classNames('euiSpacer', _defineProperty({}, "euiSpacer--".concat(size), size), className);
   var cssStyles = [styles.euiSpacer, styles[size]];
@@ -37,9 +37,10 @@ export var EuiSpacer = function EuiSpacer(_ref) {
     css: cssStyles
   }, rest));
 };
-EuiSpacer.propTypes = {
+_EuiSpacer.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   size: PropTypes.any
-};
+};
+export var EuiSpacer = withEuiSystem(_EuiSpacer);

package/es/components/text/text.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "color", "grow", "textAlign", "children", "className"];
+var _excluded = ["size", "color", "grow", "textAlign", "children", "className", "euiTheme"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -16,13 +16,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { withEuiSystem } from '../provider/system';
 import { euiTextStyles } from './text.styles';
 import { EuiTextColor } from './text_color';
 import { EuiTextAlign } from './text_align';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TEXT_SIZES = ['xs', 's', 'm', 'relative'];
-export var EuiText = function EuiText(_ref) {
+export var _EuiText = function _EuiText(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
       color = _ref.color,
@@ -31,9 +31,9 @@ export var EuiText = function EuiText(_ref) {
       textAlign = _ref.textAlign,
       children = _ref.children,
       className = _ref.className,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = useEuiTheme();
   var styles = euiTextStyles(euiTheme);
   var cssStyles = [styles.euiText, !grow ? styles.constrainedWidth : undefined, styles[size]];
   var classes = classNames('euiText', className);
@@ -59,7 +59,7 @@ export var EuiText = function EuiText(_ref) {
 
   return text;
 };
-EuiText.propTypes = {
+_EuiText.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -75,4 +75,5 @@ EuiText.propTypes = {
        */
   color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
   grow: PropTypes.bool
-};
+};
+export var EuiText = withEuiSystem(_EuiText);

package/es/components/text/text_color.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "color", "component", "cloneElement", "style"];
+var _excluded = ["children", "color", "component", "cloneElement", "style", "euiTheme"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -20,11 +20,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { isValidElement } from 'react';
 import PropTypes from "prop-types";
 import { cloneElementWithCss } from '../../services/theme/clone_element';
-import { useEuiTheme } from '../../services';
+import { withEuiSystem } from '../provider/system';
 import { euiTextColorStyles } from './text_color.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
-export var EuiTextColor = function EuiTextColor(_ref) {
+export var _EuiTextColor = function _EuiTextColor(_ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'default' : _ref$color,
@@ -33,10 +33,10 @@ export var EuiTextColor = function EuiTextColor(_ref) {
       _ref$cloneElement = _ref.cloneElement,
       cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
       style = _ref.style,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var isNamedColor = COLORS.includes(color);
-  var euiTheme = useEuiTheme();
   var styles = euiTextColorStyles(euiTheme);
   var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor]; // We're checking if is a custom color.
   // If it is a custom color we set the `color` of the `.euiTextColor` div to that custom color.
@@ -62,7 +62,7 @@ export var EuiTextColor = function EuiTextColor(_ref) {
     return ___EmotionJSX(Component, props, children);
   }
 };
-EuiTextColor.propTypes = {
+_EuiTextColor.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -82,4 +82,5 @@ EuiTextColor.propTypes = {
        * Can only be used when wrapping a *single* child element/tag, and not raw text.
        */
   cloneElement: PropTypes.bool
-};
+};
+export var EuiTextColor = withEuiSystem(_EuiTextColor);

package/es/components/timeline/timeline_item.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel", "className", "component"];
+var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel", "className", "component", "euiTheme"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -15,13 +15,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 import React from 'react';
 import PropTypes from "prop-types";
-import { useEuiTheme } from '../../services';
+import { withEuiSystem } from '../provider/system';
 import { EuiTimelineItemEvent } from './timeline_item_event';
 import { EuiTimelineItemIcon } from './timeline_item_icon';
 import { euiTimelineItemStyles } from './timeline_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var VERTICAL_ALIGN = ['top', 'center'];
-export var EuiTimelineItem = function EuiTimelineItem(_ref) {
+export var _EuiTimelineItem = function _EuiTimelineItem(_ref) {
   var children = _ref.children,
       _ref$verticalAlign = _ref.verticalAlign,
       verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
@@ -30,9 +30,9 @@ export var EuiTimelineItem = function EuiTimelineItem(_ref) {
       className = _ref.className,
       _ref$component = _ref.component,
       component = _ref$component === void 0 ? 'li' : _ref$component,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = useEuiTheme();
   var styles = euiTimelineItemStyles(euiTheme);
   var cssStyles = [styles.euiTimelineItem];
   var Element = component;
@@ -46,7 +46,7 @@ export var EuiTimelineItem = function EuiTimelineItem(_ref) {
     verticalAlign: verticalAlign
   }, children));
 };
-EuiTimelineItem.propTypes = {
+_EuiTimelineItem.propTypes = {
   /**
      * Vertical alignment of the event with the icon
      */
@@ -61,4 +61,5 @@ EuiTimelineItem.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string
-};
+};
+export var EuiTimelineItem = withEuiSystem(_EuiTimelineItem);

package/es/components/timeline/timeline_item_icon.js

@@ -8,15 +8,15 @@
 import React from 'react';
 import PropTypes from "prop-types";
 import { EuiAvatar } from '../avatar';
-import { useEuiTheme } from '../../services';
+import { withEuiSystem } from '../provider/system';
 import { euiTimelineItemIconStyles } from './timeline_item_icon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiTimelineItemIcon = function EuiTimelineItemIcon(_ref) {
+export var _EuiTimelineItemIcon = function _EuiTimelineItemIcon(_ref) {
   var icon = _ref.icon,
       _ref$verticalAlign = _ref.verticalAlign,
       verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
-      iconAriaLabel = _ref.iconAriaLabel;
-  var euiTheme = useEuiTheme();
+      iconAriaLabel = _ref.iconAriaLabel,
+      euiTheme = _ref.euiTheme;
   var styles = euiTimelineItemIconStyles(euiTheme);
   var cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]];
   var cssContentStyles = styles.euiTimelineItemIcon__content;
@@ -32,7 +32,7 @@ export var EuiTimelineItemIcon = function EuiTimelineItemIcon(_ref) {
     css: cssContentStyles
   }, iconRender));
 };
-EuiTimelineItemIcon.propTypes = {
+_EuiTimelineItemIcon.propTypes = {
   /**
      * Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`.
      */
@@ -44,4 +44,5 @@ EuiTimelineItemIcon.propTypes = {
      * If no `aria-label` is passed we assume the icon is purely decorative.
      */
   iconAriaLabel: PropTypes.string
-};
+};
+export var EuiTimelineItemIcon = withEuiSystem(_EuiTimelineItemIcon);

package/es/components/title/title.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "children", "className", "textTransform"];
+var _excluded = ["size", "children", "className", "textTransform", "euiTheme"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -19,20 +19,20 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 import classNames from 'classnames';
 import PropTypes from "prop-types";
-import { useEuiTheme } from '../../services';
 import { cloneElementWithCss } from '../../services/theme/clone_element';
 import { euiTitleStyles } from './title.styles';
+import { withEuiSystem } from '../provider/system';
 export var TITLE_SIZES = ['xxxs', 'xxs', 'xs', 's', 'm', 'l'];
 export var TEXT_TRANSFORM = ['uppercase'];
-export var EuiTitle = function EuiTitle(_ref) {
+export var _EuiTitle = function _EuiTitle(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
       children = _ref.children,
       className = _ref.className,
       textTransform = _ref.textTransform,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = useEuiTheme();
   var styles = euiTitleStyles(euiTheme);
   var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
   var classes = classNames('euiTitle', className, children.props.className);
@@ -44,7 +44,7 @@ export var EuiTitle = function EuiTitle(_ref) {
 
   return cloneElementWithCss(children, props);
 };
-EuiTitle.propTypes = {
+_EuiTitle.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -56,4 +56,5 @@ EuiTitle.propTypes = {
   size: PropTypes.any,
   textTransform: PropTypes.any,
   id: PropTypes.string
-};
+};
+export var EuiTitle = withEuiSystem(_EuiTitle);

package/es/global_styling/utility/utility.js

@@ -0,0 +1,27 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 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.
+ */
+import React from 'react';
+import { Global, css } from '@emotion/react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "bd8dxy-EuiUtilityClasses",
+  styles: ".euiYolo{color:coral;};label:EuiUtilityClasses;"
+} : {
+  name: "bd8dxy-EuiUtilityClasses",
+  styles: ".euiYolo{color:coral;};label:EuiUtilityClasses;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var EuiUtilityClasses = function EuiUtilityClasses() {
+  return ___EmotionJSX(Global, {
+    styles: _ref
+  });
+};

package/es/services/theme/hooks.js

@@ -21,7 +21,7 @@ export var useEuiTheme = function useEuiTheme() {
   };
 };
 export var withEuiTheme = function withEuiTheme(Component) {
-  var componentName = Component.displayName || Component.name || 'Component';
+  var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
     var _useEuiTheme = useEuiTheme(),
@@ -40,6 +40,6 @@ export var withEuiTheme = function withEuiTheme(Component) {
   };
 
   var WithEuiTheme = /*#__PURE__*/forwardRef(Render);
-  WithEuiTheme.displayName = "WithEuiTheme(".concat(componentName, ")");
+  WithEuiTheme.displayName = componentName;
   return WithEuiTheme;
 };

package/es/services/theme/provider.js

@@ -18,7 +18,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { CacheProvider } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
@@ -27,7 +26,6 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
       _colorMode = _ref.colorMode,
       _modifications = _ref.modify,
-      cache = _ref.cache,
       children = _ref.children;
   var parentSystem = useContext(EuiSystemContext);
   var parentModifications = useContext(EuiModificationsContext);
@@ -101,7 +99,5 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: modifications
   }, ___EmotionJSX(EuiThemeContext.Provider, {
     value: theme
-  }, cache ? ___EmotionJSX(CacheProvider, {
-    value: cache
-  }, children) : children))));
+  }, children))));
 };