@elastic/eui 67.0.0 → 67.1.0

package/es/components/badge/badge.js

@@ -31,39 +31,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import chroma from 'chroma-js';
-import { keysOf } from '../common';
-import { euiPaletteColorBlindBehindText, getSecureRelForTarget, isColorDark } from '../../services';
+import { useEuiTheme, euiPaletteColorBlindBehindText, getSecureRelForTarget, isColorDark, wcagContrastMin } from '../../services';
 import { EuiInnerText } from '../inner_text';
 import { EuiIcon } from '../icon';
 import { chromaValid, parseColor } from '../color_picker/utils';
 import { validateHref } from '../../services/security/href_validator';
+import { euiBadgeStyles } from './badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-// TODO - replace with variables once https://github.com/elastic/eui/issues/2731 is closed
-var colorInk = '#000';
-var colorGhost = '#fff'; // The color blind palette has some stricter accessibility needs with regards to
+export var ICON_SIDES = ['left', 'right'];
+export var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
+// The color blind palette has some stricter accessibility needs with regards to
 // charts and contrast. We use the euiPaletteColorBlindBehindText variant here since our
 // accessibility concerns pertain to foreground (text) and background contrast
-
 var visColors = euiPaletteColorBlindBehindText();
-var colorToHexMap = {
-  // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-  default: '#d3dae6',
-  primary: visColors[1],
-  success: visColors[0],
-  accent: visColors[2],
-  warning: visColors[5],
-  danger: visColors[9]
-};
-export var COLORS = keysOf(colorToHexMap);
-var iconSideToClassNameMap = {
-  left: 'euiBadge--iconLeft',
-  right: 'euiBadge--iconRight'
-};
-export var ICON_SIDES = keysOf(iconSideToClassNameMap);
 export var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
@@ -84,53 +68,63 @@ export var EuiBadge = function EuiBadge(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = useEuiTheme();
   var isHrefValid = !href || validateHref(href);
   var isDisabled = _isDisabled || !isHrefValid;
-  var optionalCustomStyles = style;
-  var textColor = null; // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-
-  var wcagContrastBase = 4.5; // WCAG AA contrast level
-
-  var wcagContrast = null;
-  var colorHex = null; // Check if a valid color name was provided
-
-  try {
-    if (COLORS.indexOf(color) > -1) {
-      // Get the hex equivalent for the provided color name
-      colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
-
-      textColor = setTextColor(colorHex);
-      optionalCustomStyles = _objectSpread({
-        backgroundColor: colorHex,
-        color: textColor
-      }, optionalCustomStyles);
-    } else if (color !== 'hollow') {
-      // This is a custom color that is neither from the base palette nor hollow
-      // Let's do our best to ensure that it provides sufficient contrast
-      // Set dark or light text color based upon best contrast
-      textColor = setTextColor(color); // Check the contrast
-
-      wcagContrast = getColorContrast(textColor, color);
-
-      if (wcagContrast < wcagContrastBase) {
-        // It's low contrast, so lets show a warning in the console
-        console.warn('Warning: ', color, ' badge has low contrast of ', wcagContrast.toFixed(2), '. Should be above ', wcagContrastBase, '.');
+  var optionalCustomStyles = useMemo(function () {
+    var colorToHexMap = {
+      default: euiTheme.euiTheme.colors.lightShade,
+      hollow: '',
+      primary: visColors[1],
+      success: visColors[0],
+      accent: visColors[2],
+      warning: visColors[5],
+      danger: visColors[9]
+    };
+    var textColor = null;
+    var contrastRatio = null;
+    var colorHex = null;
+
+    try {
+      // Check if a valid color name was provided
+      if (COLORS.includes(color)) {
+        if (color === 'hollow') return style; // hollow uses its own CSS class
+        // Get the hex equivalent for the provided color name
+
+        colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
+
+        textColor = setTextColor(euiTheme, colorHex);
+        return _objectSpread({
+          backgroundColor: colorHex,
+          color: textColor
+        }, style);
+      } else {
+        // This is a custom color- let's do our best to ensure that it provides sufficient contrast
+        // Set dark or light text color based upon best contrast
+        textColor = setTextColor(euiTheme, color); // Check the contrast
+
+        contrastRatio = getColorContrast(textColor, color);
+
+        if (contrastRatio < wcagContrastMin) {
+          // It's low contrast, so lets show a warning in the console
+          console.warn('Warning: ', color, ' badge has low contrast of ', contrastRatio.toFixed(2), '. Should be above ', wcagContrastMin, '.');
+        }
+
+        return _objectSpread({
+          backgroundColor: color,
+          color: textColor
+        }, style);
       }
-
-      optionalCustomStyles = _objectSpread({
-        backgroundColor: color,
-        color: textColor
-      }, optionalCustomStyles);
+    } catch (err) {
+      handleInvalidColor(color);
     }
-  } catch (err) {
-    handleInvalidColor(color);
-  }
-
-  var classes = classNames('euiBadge', {
-    'euiBadge-isClickable': (onClick || href) && !iconOnClick,
-    'euiBadge-isDisabled': isDisabled,
-    'euiBadge--hollow': color === 'hollow'
-  }, iconSideToClassNameMap[iconSide], className);
+  }, [color, style, euiTheme]);
+  var styles = euiBadgeStyles(euiTheme);
+  var cssStyles = [styles.euiBadge, (onClick || href) && !iconOnClick && styles.clickable, isDisabled && styles.disabled, color === 'hollow' && styles.hollow];
+  var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
+  var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
+  var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
+  var classes = classNames('euiBadge', className);
   var closeClassNames = classNames('euiBadge__icon', closeButtonProps && closeButtonProps.className);
   var Element = href && !isDisabled ? 'a' : 'button';
   var relObj = {};
@@ -160,6 +154,7 @@ export var EuiBadge = function EuiBadge(_ref) {
       optionalIcon = ___EmotionJSX("button", {
         type: "button",
         className: "euiBadge__iconButton",
+        css: iconButtonCssStyles,
         "aria-label": iconOnClickAriaLabel,
         disabled: isDisabled,
         title: iconOnClickAriaLabel,
@@ -168,7 +163,8 @@ export var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: "s",
         color: "inherit" // forces the icon to inherit its parent color
-
+        ,
+        css: iconCssStyles
       }, closeButtonProps, {
         className: closeClassNames
       })));
@@ -177,6 +173,7 @@ export var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: children ? 's' : 'm',
         className: "euiBadge__icon",
+        css: iconCssStyles,
         color: "inherit" // forces the icon to inherit its parent color
 
       });
@@ -188,28 +185,34 @@ export var EuiBadge = function EuiBadge(_ref) {
   }
 
   var content = ___EmotionJSX("span", {
-    className: "euiBadge__content"
-  }, children && ___EmotionJSX("span", {
-    className: "euiBadge__text"
-  }, children), optionalIcon);
+    className: "euiBadge__content",
+    css: styles.euiBadge__content
+  }, iconSide === 'left' && optionalIcon, children && ___EmotionJSX("span", {
+    className: "euiBadge__text",
+    css: textCssStyles
+  }, children), iconSide === 'right' && optionalIcon);
 
   if (iconOnClick) {
     return onClick || href ? ___EmotionJSX("span", {
       className: classes,
+      css: cssStyles,
       style: optionalCustomStyles
     }, ___EmotionJSX("span", {
-      className: "euiBadge__content"
-    }, ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
+      className: "euiBadge__content",
+      css: styles.euiBadge__content
+    }, iconSide === 'left' && optionalIcon, ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX(Element, _extends({
         className: "euiBadge__childButton",
+        css: styles.euiBadge__childButton,
         disabled: isDisabled,
         "aria-label": onClickAriaLabel,
         ref: ref,
         title: innerText
       }, relObj, rest), children);
-    }), optionalIcon)) : ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
+    }), iconSide === 'right' && optionalIcon)) : ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", _extends({
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -221,6 +224,7 @@ export var EuiBadge = function EuiBadge(_ref) {
         disabled: isDisabled,
         "aria-label": onClickAriaLabel,
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -230,6 +234,7 @@ export var EuiBadge = function EuiBadge(_ref) {
     return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", _extends({
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -246,12 +251,12 @@ EuiBadge.propTypes = {
   /**
      * The side of the badge the icon should sit
      */
-  iconSide: PropTypes.oneOf(["left", "right"]),
+  iconSide: PropTypes.any,
 
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  color: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.any.isRequired]),
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
 
   /**
      * Will override any color passed through the `color` prop.
@@ -296,13 +301,14 @@ function getColorContrast(textColor, color) {
   return contrastValue;
 }
 
-function setTextColor(bgColor) {
-  var textColor = isColorDark.apply(void 0, _toConsumableArray(chroma(bgColor).rgb())) ? colorGhost : colorInk;
+function setTextColor(_ref2, bgColor) {
+  var euiTheme = _ref2.euiTheme;
+  var textColor = isColorDark.apply(void 0, _toConsumableArray(chroma(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return textColor;
 }
 
 function handleInvalidColor(color) {
-  var isNamedColor = color && COLORS.includes(color) || color === 'hollow';
+  var isNamedColor = COLORS.includes(color);
   var isValidColorString = color && chromaValid(parseColor(color) || '');
 
   if (!isNamedColor && !isValidColorString) {

package/es/components/badge/badge.styles.js

@@ -0,0 +1,56 @@
+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 { css } from '@emotion/react';
+import { euiFontSize, euiFocusRing, euiTextTruncate, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
+import { tint, transparentize } from '../../services';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;"
+} : {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  return {
+    euiBadge: /*#__PURE__*/css("display:inline-block;vertical-align:middle;padding:0 ", euiTheme.size.s, ";", logicalCSS('max-width', '100%'), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", parseFloat(String(euiTheme.border.radius.medium)) / 2, "px;", logicalTextAlignCSS('left'), " &:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    clickable: /*#__PURE__*/css("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", euiFocusRing(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
+    disabled: /*#__PURE__*/css("color:", euiButtonColor(euiThemeContext, 'disabled').color, "!important;background-color:", euiButtonColor(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
+    // Hollow has a border and is mostly used for autocompleters.
+    hollow: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? tint(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
+    // Content wrapper
+    euiBadge__content: /*#__PURE__*/css(logicalCSS( // Ensure proper height in case of just displaying an icon
+    'min-height', "".concat(euiTheme.base + parseFloat(String(euiTheme.border.width.thin)) * 2, "px")), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
+    // Text
+    text: {
+      euiBadge__text: /*#__PURE__*/css(euiTextTruncate(), " cursor:inherit;;label:euiBadge__text;"),
+      clickable: _ref
+    },
+    // Icon
+    icon: {
+      euiBadge__icon: /*#__PURE__*/css(";label:euiBadge__icon;"),
+      right: /*#__PURE__*/css("&:not(:only-child){", logicalCSS('margin-left', euiTheme.size.xs), ";};label:right;"),
+      left: /*#__PURE__*/css("&:not(:only-child){", logicalCSS('margin-right', euiTheme.size.xs), ";};label:left;")
+    },
+    // Clickable icons (iconOnClick)
+    iconButton: {
+      euiBadge__iconButton: /*#__PURE__*/css("font-size:0;&:focus{background-color:", transparentize(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", parseFloat(String(euiTheme.border.radius.small)) / 2, "px;}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
+      right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:right;"),
+      left: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), ";;label:left;")
+    },
+    // Used in badges with both onClick & iconOnClick
+    euiBadge__childButton: /*#__PURE__*/css(euiTextTruncate(), " text-align:inherit;font-weight:inherit;line-height:inherit;color:inherit;&:disabled{cursor:not-allowed;}&:not(:disabled){&:hover,&:focus{text-decoration:underline;}};label:euiBadge__childButton;")
+  };
+};

package/es/components/basic_table/in_memory_table.js

@@ -541,6 +541,10 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
 
       if (sortName !== prevState.prevProps.sortName || sortDirection !== prevState.prevProps.sortDirection) {
         updatedPrevState = _objectSpread(_objectSpread({}, updatedPrevState), {}, {
+          prevProps: _objectSpread(_objectSpread({}, updatedPrevState.prevProps), {}, {
+            sortName: sortName,
+            sortDirection: sortDirection
+          }),
           sortName: sortName,
           sortDirection: sortDirection
         });
@@ -1110,6 +1114,10 @@ EuiInMemoryTable.propTypes = {
         operator: PropTypes.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
       }).isRequired).isRequired,
       available: PropTypes.func
+    }).isRequired, PropTypes.shape({
+      type: PropTypes.oneOf(["custom_component"]).isRequired,
+      component: PropTypes.elementType.isRequired,
+      available: PropTypes.func
     }).isRequired]).isRequired),
 
     /**

package/es/components/button/button.js

@@ -134,7 +134,6 @@ EuiButton.propTypes = {
 EuiButton.displayName = 'EuiButton'; // Use defaultProps for simple pass-through props
 
 EuiButton.defaultProps = {
-  minWidth: 112,
   size: 'm',
   color: 'primary'
 };

package/es/components/button/button_display/_button_display.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "iconType", "iconSide", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type"];
+var _excluded = ["children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type", "style"];
 
 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); }
 
@@ -46,6 +46,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
       iconType = _ref2.iconType,
       iconSide = _ref2.iconSide,
+      iconSize = _ref2.iconSize,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 'm' : _ref2$size,
       isDisabled = _ref2.isDisabled,
@@ -61,6 +62,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       rel = _ref2.rel,
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'button' : _ref2$type,
+      style = _ref2.style,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
   var buttonIsDisabled = isButtonDisabled({
@@ -68,9 +70,8 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
-  var minWidthPx = typeof minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
   var theme = useEuiTheme();
-  var styles = euiButtonDisplayStyles(theme, minWidthPx);
+  var styles = euiButtonDisplayStyles(theme);
   var buttonRadiusStyle = useEuiButtonRadiusCSS()[size];
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
 
@@ -79,6 +80,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isDisabled: buttonIsDisabled,
     iconType: iconType,
     iconSide: iconSide,
+    iconSize: iconSize,
     textProps: _objectSpread({}, textProps)
   }, contentProps), children);
 
@@ -108,6 +110,9 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 
   return createElement(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
+      minWidth: minWidth
+    }) : style,
     ref: ref
   }, elementProps), relObj), rest), innerNode);
 });
@@ -178,7 +183,7 @@ EuiButtonDisplay.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: PropTypes.oneOf(["left", "right", undefined]),
+  iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
 
   /**
      * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
@@ -191,7 +196,7 @@ EuiButtonDisplay.propTypes = {
     ref: PropTypes.any,
     "data-text": PropTypes.string
   }),
-  iconSize: PropTypes.oneOf(["s", "m"]),
+  iconSize: PropTypes.any,
   isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,

package/es/components/button/button_display/_button_display.styles.js

@@ -28,11 +28,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext, minWidth) {
+export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";", minWidth && logicalCSS('min-width', minWidth), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), ";;label:fullWidth;"),

package/es/components/button/button_display/_button_display_content.js

@@ -21,6 +21,8 @@ import { EuiIcon } from '../../icon';
 import { euiButtonDisplayContentStyles } from './_button_display_content.styles';
 import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+export var ICON_SIZES = ['s', 'm'];
+export var ICON_SIDES = ['left', 'right'];
 export var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var children = _ref.children,
       textProps = _ref.textProps,
@@ -38,7 +40,7 @@ export var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var styles = euiButtonDisplayContentStyles(theme);
   var cssStyles = [styles.euiButtonDisplayContent, iconSide && styles[iconSide]];
   var cssSpinnerStyles = [styles.euiButtonDisplayContent__spinner];
-  var cssIconStyles = [styles.euiButtonDisplayContent__icon]; // Add an icon to the button if one exists.
+  var cssIconStyles = [styles.euiButtonDisplayContent__icon, iconSize && styles[iconSize]]; // Add an icon to the button if one exists.
 
   var icon; // When the button is disabled the text gets gray
   // and in some buttons the background gets a light gray
@@ -82,7 +84,7 @@ EuiButtonDisplayContent.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: PropTypes.oneOf(["left", "right", undefined]),
+  iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
   isLoading: PropTypes.bool,
 
   /**
@@ -96,7 +98,7 @@ EuiButtonDisplayContent.propTypes = {
     ref: PropTypes.any,
     "data-text": PropTypes.string
   }),
-  iconSize: PropTypes.oneOf(["s", "m"]),
+  iconSize: PropTypes.any,
   isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,

package/es/components/button/button_display/_button_display_content.styles.js

@@ -46,6 +46,9 @@ export var euiButtonDisplayContentStyles = function euiButtonDisplayContentStyle
     left: /*#__PURE__*/css(";label:left;"),
     right: _ref3,
     euiButtonDisplayContent__spinner: _ref2,
-    euiButtonDisplayContent__icon: _ref
+    euiButtonDisplayContent__icon: _ref,
+    // Icon size
+    s: /*#__PURE__*/css(";label:s;"),
+    m: /*#__PURE__*/css(";label:m;")
   };
 };

package/es/components/card/card.js

@@ -82,7 +82,7 @@ export var EuiCard = function EuiCard(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isClickable = !isDisabled && (onClick || href || selectable && !selectable.isDisabled);
   var euiThemeContext = useEuiTheme();
-  var styles = euiCardStyles(euiThemeContext, paddingSize, display);
+  var styles = euiCardStyles(euiThemeContext, paddingSize);
   var cardStyles = [styles.card.euiCard, // Text alignment should always be left when horizontal
   styles.card.aligned[layout === 'horizontal' ? 'left' : textAlign], styles.card.layout[layout], isDisabled && styles.card.disabled];
   var contentStyles = [styles.content.euiCard__content, styles.content.layout[layout]];
@@ -128,7 +128,7 @@ export var EuiCard = function EuiCard(_ref) {
 
   if (image && layout === 'vertical') {
     if ( /*#__PURE__*/isValidElement(image) || typeof image === 'string') {
-      var imageStyles = [styles.euiCard__image];
+      var imageStyles = [styles.image.euiCard__image, display === 'transparent' && styles.image.transparent];
       imageNode = ___EmotionJSX("div", {
         className: "euiCard__image",
         css: imageStyles

package/es/components/card/card.styles.js

@@ -54,7 +54,7 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color) {
+export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
   var paddingAmount = euiPaddingSize(euiThemeContext, paddingSize);
   var spacing = euiPaddingSize(euiThemeContext, paddingKey);
@@ -91,7 +91,10 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize,
       },
       disabled: _ref2
     },
-    euiCard__image: /*#__PURE__*/css("position:relative;overflow:hidden;", logicalCSS('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", logicalCSS('left', "-".concat(paddingAmount)), ";", logicalCSS('top', "-".concat(paddingAmount)), ";", logicalCSS('margin-bottom', "-".concat(paddingAmount)), ";", logicalCSS('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", logicalCSS('width', '100%'), ";};label:euiCard__image;"),
+    image: {
+      euiCard__image: /*#__PURE__*/css("position:relative;overflow:hidden;", logicalCSS('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", logicalCSS('left', "-".concat(paddingAmount)), ";", logicalCSS('top', "-".concat(paddingAmount)), ";", logicalCSS('margin-bottom', "-".concat(paddingAmount)), ";", logicalCSS('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", logicalCSS('width', '100%'), ";};label:euiCard__image;"),
+      transparent: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
+    },
     icon: {
       euiCard__icon: /*#__PURE__*/css(";label:euiCard__icon;"),
       withImage: /*#__PURE__*/css("position:absolute;", logicalCSS('top', '50%'), ";", logicalCSS('left', '50%'), ";transform:translate(-50%, calc(-50% + -", paddingAmount, "))!important;;label:withImage;"),

package/es/components/notification/notification_event.js

@@ -123,7 +123,7 @@ EuiNotificationEvent.propTypes = {
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  badgeColor: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.any.isRequired]),
+  badgeColor: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
 
   /**
      * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`.

package/es/components/notification/notification_event_meta.js

@@ -144,7 +144,7 @@ EuiNotificationEventMeta.propTypes = {
   /**
      * Accepts either our palette colors (primary, success ..etc) or a hex value `#FFFFFF`, `#000`.
      */
-  badgeColor: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.any.isRequired]),
+  badgeColor: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.string.isRequired]),
 
   /**
      * The icon used to visually represent this data type. Accepts any `EuiIcon IconType`.

package/es/components/popover/popover_title.js

@@ -31,9 +31,9 @@ export var EuiPopoverTitle = function EuiPopoverTitle(_ref) {
       panelPadding = _useContext.paddingSize;
 
   var euiTheme = useEuiTheme();
-  var styles = euiPopoverTitleStyles(euiTheme, panelPadding);
+  var styles = euiPopoverTitleStyles(euiTheme);
   var paddingStyles = useEuiPaddingCSS();
-  var cssStyles = [styles.euiPopoverTitle, // If a paddingSize is not directly provided, inherit from the EuiPopoverPanel
+  var cssStyles = [styles.euiPopoverTitle, styles.panelPaddingSizes[panelPadding], // If a paddingSize is not directly provided, inherit from the EuiPopoverPanel
   paddingStyles[paddingSize || panelPadding]];
   var classes = classNames('euiPopoverTitle', className);
   return ___EmotionJSX("div", _extends({

package/es/components/popover/popover_title.styles.js

@@ -8,13 +8,25 @@
 import { css } from '@emotion/react';
 import { euiPaddingSize, logicalCSS } from '../../global_styling';
 import { euiTitle } from '../title/title.styles';
-export var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContext, panelPadding) {
-  var euiTheme = euiThemeContext.euiTheme; // If the popover's containing panel has padding applied,
-  // ensure the title expands to cover that padding and
-
-  var panelPaddingSize = euiPaddingSize(euiThemeContext, panelPadding);
+export var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPopoverTitle: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxs'), ";", logicalCSS('border-bottom', euiTheme.border.thin), ";margin:-", panelPaddingSize, " -", panelPaddingSize, " ", panelPaddingSize, ";;label:euiPopoverTitle;")
+    euiPopoverTitle: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxs'), ";", logicalCSS('border-bottom', euiTheme.border.thin), ";;label:euiPopoverTitle;"),
+    // If the popover's containing panel has padding applied,
+    // ensure the title expands to cover that padding via negative margins
+    panelPaddingSizes: {
+      none: /*#__PURE__*/css(";label:none;"),
+      xs: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 'xs'), ";;label:xs;"),
+      s: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 's'), ";;label:s;"),
+      m: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 'm'), ";;label:m;"),
+      l: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 'l'), ";;label:l;"),
+      xl: /*#__PURE__*/css(getPaddingOffset(euiThemeContext, 'xl'), ";;label:xl;")
+    }
   };
+};
+
+var getPaddingOffset = function getPaddingOffset(euiThemeContext, size) {
+  var panelPaddingSize = euiPaddingSize(euiThemeContext, size);
+  return "margin: -".concat(panelPaddingSize, " -").concat(panelPaddingSize, " ").concat(panelPaddingSize, ";");
 };

package/es/components/search_bar/filters/custom_component_filter.js

@@ -0,0 +1,16 @@
+/*
+ * 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 { jsx as ___EmotionJSX } from "@emotion/react";
+export var CustomComponentFilter = function CustomComponentFilter(props) {
+  var CustomComponent = props.config.component;
+  return ___EmotionJSX(CustomComponent, {
+    query: props.query,
+    onChange: props.onChange
+  });
+};

package/es/components/search_bar/filters/filters.js

@@ -12,6 +12,7 @@ import { IsFilter } from './is_filter';
 import { FieldValueSelectionFilter } from './field_value_selection_filter';
 import { FieldValueToggleFilter } from './field_value_toggle_filter';
 import { FieldValueToggleGroupFilter } from './field_value_toggle_group_filter';
+import { CustomComponentFilter } from './custom_component_filter';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var createFilter = function createFilter(index, config, query, onChange) {
   var props = {
@@ -45,6 +46,11 @@ export var createFilter = function createFilter(index, config, query, onChange)
         config: config
       }));
 
+    case 'custom_component':
+      return ___EmotionJSX(CustomComponentFilter, _extends({}, props, {
+        config: config
+      }));
+
     default:
       // @ts-ignore TS knows that we've checked `config.type` exhaustively
       throw new Error("Unknown search filter type [".concat(config.type, "]"));