@elastic/eui 59.0.1 → 59.1.0-rc1

package/test-env/components/timeline/timeline_item_icon.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiTimelineItemIcon = void 0;
+exports._EuiTimelineItemIcon = exports.EuiTimelineItemIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _avatar = require("../avatar");
 
-var _services = require("../../services");
+var _system = require("../provider/system");
 
 var _timeline_item_icon = require("./timeline_item_icon.styles");
 
@@ -26,12 +26,12 @@ var _react2 = require("@emotion/react");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EuiTimelineItemIcon = function EuiTimelineItemIcon(_ref) {
+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 = (0, _services.useEuiTheme)();
+      iconAriaLabel = _ref.iconAriaLabel,
+      euiTheme = _ref.euiTheme;
   var styles = (0, _timeline_item_icon.euiTimelineItemIconStyles)(euiTheme);
   var cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]];
   var cssContentStyles = styles.euiTimelineItemIcon__content;
@@ -48,8 +48,8 @@ var EuiTimelineItemIcon = function EuiTimelineItemIcon(_ref) {
   }, iconRender));
 };
 
-exports.EuiTimelineItemIcon = EuiTimelineItemIcon;
-EuiTimelineItemIcon.propTypes = {
+exports._EuiTimelineItemIcon = _EuiTimelineItemIcon;
+_EuiTimelineItemIcon.propTypes = {
   /**
      * Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`.
      */
@@ -61,4 +61,6 @@ EuiTimelineItemIcon.propTypes = {
      * If no `aria-label` is passed we assume the icon is purely decorative.
      */
   iconAriaLabel: _propTypes.default.string
-};
+};
+var EuiTimelineItemIcon = (0, _system.withEuiSystem)(_EuiTimelineItemIcon);
+exports.EuiTimelineItemIcon = EuiTimelineItemIcon;

package/test-env/components/title/title.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TITLE_SIZES = exports.TEXT_TRANSFORM = exports.EuiTitle = void 0;
+exports._EuiTitle = exports.TITLE_SIZES = exports.TEXT_TRANSFORM = exports.EuiTitle = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,13 +15,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _services = require("../../services");
-
 var _clone_element = require("../../services/theme/clone_element");
 
 var _title = require("./title.styles");
 
-var _excluded = ["size", "children", "className", "textTransform"];
+var _system = require("../provider/system");
+
+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; }
 
@@ -32,14 +32,14 @@ exports.TITLE_SIZES = TITLE_SIZES;
 var TEXT_TRANSFORM = ['uppercase'];
 exports.TEXT_TRANSFORM = TEXT_TRANSFORM;
 
-var EuiTitle = function EuiTitle(_ref) {
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _title.euiTitleStyles)(euiTheme);
   var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
   var classes = (0, _classnames.default)('euiTitle', className, children.props.className);
@@ -52,8 +52,8 @@ var EuiTitle = function EuiTitle(_ref) {
   return (0, _clone_element.cloneElementWithCss)(children, props);
 };
 
-exports.EuiTitle = EuiTitle;
-EuiTitle.propTypes = {
+exports._EuiTitle = _EuiTitle;
+_EuiTitle.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
@@ -65,4 +65,6 @@ EuiTitle.propTypes = {
   size: _propTypes.default.any,
   textTransform: _propTypes.default.any,
   id: _propTypes.default.string
-};
+};
+var EuiTitle = (0, _system.withEuiSystem)(_EuiTitle);
+exports.EuiTitle = EuiTitle;

package/test-env/global_styling/utility/utility.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiUtilityClasses = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+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)."; }
+
+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__
+};
+
+var EuiUtilityClasses = function EuiUtilityClasses() {
+  return (0, _react2.jsx)(_react2.Global, {
+    styles: _ref
+  });
+};
+
+exports.EuiUtilityClasses = EuiUtilityClasses;

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

@@ -42,7 +42,7 @@ var useEuiTheme = function useEuiTheme() {
 exports.useEuiTheme = useEuiTheme;
 
 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(),
@@ -61,7 +61,7 @@ var withEuiTheme = function withEuiTheme(Component) {
   };
 
   var WithEuiTheme = /*#__PURE__*/(0, _react.forwardRef)(Render);
-  WithEuiTheme.displayName = "WithEuiTheme(".concat(componentName, ")");
+  WithEuiTheme.displayName = componentName;
   return WithEuiTheme;
 };
 

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

@@ -13,14 +13,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _react2 = require("@emotion/react");
-
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 
 var _context = require("./context");
 
 var _utils = require("./utils");
 
+var _react2 = require("@emotion/react");
+
 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; }
@@ -36,7 +36,6 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
       _colorMode = _ref.colorMode,
       _modifications = _ref.modify,
-      cache = _ref.cache,
       children = _ref.children;
   var parentSystem = (0, _react.useContext)(_context.EuiSystemContext);
   var parentModifications = (0, _react.useContext)(_context.EuiModificationsContext);
@@ -110,9 +109,7 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: modifications
   }, (0, _react2.jsx)(_context.EuiThemeContext.Provider, {
     value: theme
-  }, cache ? (0, _react2.jsx)(_react2.CacheProvider, {
-    value: cache
-  }, children) : children))));
+  }, children))));
 };
 
 exports.EuiThemeProvider = EuiThemeProvider;

package/src/components/facet/_facet_button.scss

@@ -1,69 +0,0 @@
-/**
- * 1. Make sure the quantity doesn't get an underline on hover
- */
-.euiFacetButton {
-  @include euiButtonBase;
-  @include euiFont;
-  @include euiFontSizeS;
-
-  height: $euiButtonHeightSmall;
-  text-align: left;
-  text-decoration: none;
-  transition: all $euiAnimSpeedFast ease-in;
-
-  &:hover,
-  &:focus {
-    &:not(:disabled) .euiFacetButton__text {
-      text-decoration: underline; /* 1 */
-    }
-  }
-
-  &:focus {
-    background-color: $euiFocusBackgroundColor;
-    // use box-shadow as a "faux outline" to apply left/right padding only
-    box-shadow: -$euiSizeXS 0 $euiFocusBackgroundColor, $euiSizeXS 0 $euiFocusBackgroundColor;
-  }
-
-  &:disabled {
-    color: $euiButtonColorDisabledText;
-    pointer-events: none;
-
-    .euiFacetButton__content {
-      pointer-events: auto;
-      cursor: not-allowed;
-    }
-
-    .euiFacetButton__icon,
-    .euiFacetButton__quantity {
-      opacity: .5;
-    }
-
-    &:focus {
-      background-color: transparent;
-    }
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-}
-
-.euiFacetButton__content {
-  @include euiButtonContent;
-}
-
-.euiFacetButton__text {
-  @include euiTextShift;
-  @include euiTextTruncate;
-  flex-grow: 1;
-  vertical-align: middle;
-
-  .euiFacetButton--isSelected & {
-    font-weight: $euiFontWeightBold;
-  }
-}
-
-.euiFacetButton__icon {
-  transition: all $euiAnimSpeedFast ease-in;
-}

package/src/components/facet/_facet_group.scss

@@ -1,24 +0,0 @@
-@each $gutterName, $gutterSize in $euiFacetGutterSizes {
-  .euiFacetGroup--#{$gutterName} {
-    .euiFacetButton {
-      // Split the margin between top and bottom
-      margin-top: $gutterSize / 2;
-      margin-bottom: $gutterSize / 2;
-    }
-
-    &.euiFacetGroup--horizontal {
-      // There needs to be an additional distance between horizontal buttons to ensure
-      // the number notification is closer in proximity to the text it belongs to rather than the button
-      $gutterAdjustment: $euiSizeM + $gutterSize;
-
-      // Collapse margin on the right side of the group to allow it to extend the full width
-      margin-left: -#{$gutterAdjustment};
-
-      .euiFacetButton {
-        margin-left: $gutterAdjustment;
-        // Adjust the max-width so it fits within the allotted margin
-        max-width: calc(100% - #{$gutterAdjustment});
-      }
-    }
-  }
-}

package/src/components/facet/_index.scss

@@ -1,4 +0,0 @@
-@import 'variables';
-
-@import 'facet_button';
-@import 'facet_group';

package/src/components/facet/_variables.scss

@@ -1,6 +0,0 @@
-$euiFacetGutterSizes: (
-  gutterNone: 0,
-  gutterSmall: $euiSizeXS,
-  gutterMedium: $euiSizeS,
-  gutterLarge: $euiSizeM,
-);

package/src/themes/amsterdam/overrides/_facet.scss

@@ -1,10 +0,0 @@
-.euiFacetButton {
-  &:focus {
-    background-color: transparent;
-    box-shadow: none;
-
-    &:not(:disabled) .euiFacetButton__text {
-      @include euiLinkFocus;
-    }
-  }
-}