@elastic/eui 92.2.0 → 93.0.0

package/es/components/empty_prompt/empty_prompt.js

@@ -1,10 +1,5 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["icon", "iconType", "iconColor", "title", "titleSize", "paddingSize", "body", "actions", "className", "layout", "hasBorder", "color", "footer"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /*
@@ -15,10 +10,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { keysOf } from '../common';
+import { useEuiTheme } from '../../services';
 import { EuiTitle } from '../title';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSpacer } from '../spacer';
@@ -26,14 +21,9 @@ import { EuiIcon } from '../icon';
 import { isNamedColor } from '../icon/named_colors';
 import { EuiText } from '../text';
 import { EuiPanel } from '../panel/panel';
+import { euiEmptyPromptStyles } from './empty_prompt.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var paddingSizeToClassNameMap = {
-  none: null,
-  s: 'euiEmptyPrompt--paddingSmall',
-  m: 'euiEmptyPrompt--paddingMedium',
-  l: 'euiEmptyPrompt--paddingLarge'
-};
-export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
+export var PADDING_SIZES = ['none', 's', 'm', 'l'];
 export var EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
   var icon = _ref.icon,
     iconType = _ref.iconType,
@@ -53,41 +43,41 @@ export var EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
     color = _ref$color === void 0 ? 'transparent' : _ref$color,
     footer = _ref.footer,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isVerticalLayout = layout === 'vertical';
+  var classes = classNames('euiEmptyPrompt', className);
+  var euiTheme = useEuiTheme();
+  var styles = useMemo(function () {
+    return euiEmptyPromptStyles(euiTheme);
+  }, [euiTheme]);
+  var cssStyles = [styles.euiEmptyPrompt, styles[layout]];
+  var mainStyles = [styles.main.euiEmptyPrompt__main, styles.main[layout], styles.main[paddingSize], layout === 'horizontal' && styles.main.horizontalPadding[paddingSize]];
+  var contentStyles = [styles.content.euiEmptyPrompt__content, styles.content[layout]];
+
   // Default the iconColor to `subdued`,
   // otherwise try to match the iconColor with the panel color unless iconColor is specified
   var iconColor = _iconColor !== null && _iconColor !== void 0 ? _iconColor : isNamedColor(color) ? color : 'subdued';
-  var iconNode = iconType ? ___EmotionJSX(EuiIcon, {
-    type: iconType,
-    size: "xxl",
-    color: iconColor
-  }) : icon;
-  var titleNode;
-  var bodyNode;
-  if (body || title) {
-    if (title) {
-      titleNode = ___EmotionJSX(EuiTitle, {
-        size: titleSize
-      }, title);
-    }
-    if (body) {
-      bodyNode = ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(EuiSpacer, {
-        size: "m"
-      }), ___EmotionJSX(EuiText, {
-        color: "subdued"
-      }, body));
-    }
-  }
-  var actionsNode;
-  if (actions) {
-    var actionsRow;
+  var iconNode = useMemo(function () {
+    if (!iconType && !icon) return null;
+    var iconStyles = [styles.icon.euiEmptyPrompt__icon, styles.icon[layout]];
+    return ___EmotionJSX("div", {
+      className: "euiEmptyPrompt__icon",
+      css: iconStyles
+    }, iconType ? ___EmotionJSX(EuiIcon, {
+      type: iconType,
+      size: "xxl",
+      color: iconColor
+    }) : icon);
+  }, [icon, iconType, iconColor, layout, styles.icon]);
+  var actionsNode = useMemo(function () {
+    if (!actions) return null;
     if (Array.isArray(actions)) {
-      actionsRow = ___EmotionJSX(EuiFlexGroup, {
+      var actionStyles = [styles.actions.euiEmptyPrompt__actions, styles.actions[layout]];
+      return ___EmotionJSX(EuiFlexGroup, {
         className: "euiEmptyPrompt__actions",
+        css: actionStyles,
         gutterSize: "m",
         alignItems: "center",
         justifyContent: "center",
-        direction: isVerticalLayout ? 'column' : 'row'
+        direction: layout === 'vertical' ? 'column' : 'row'
       }, actions.map(function (action, index) {
         return ___EmotionJSX(EuiFlexItem, {
           key: index,
@@ -95,32 +85,39 @@ export var EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
         }, action);
       }));
     } else {
-      actionsRow = actions;
+      return actions;
     }
-    actionsNode = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, {
-      size: "l"
-    }), actionsRow);
-  }
-  var contentNodes = ___EmotionJSX(React.Fragment, null, titleNode, bodyNode, actionsNode);
-  var classes = classNames('euiEmptyPrompt', ["euiEmptyPrompt--".concat(layout)], paddingSizeToClassNameMap[paddingSize], className);
-  var panelProps = _objectSpread({
+  }, [actions, layout, styles.actions]);
+  var footerNode = useMemo(function () {
+    if (!footer) return null;
+    var footerStyles = [styles.footer.euiEmptyPrompt__footer, styles.footer[paddingSize], styles.footer[color], color === 'transparent' && !hasBorder && styles.footer.roundedBorders];
+    return ___EmotionJSX("div", {
+      className: "euiEmptyPrompt__footer",
+      css: footerStyles
+    }, footer);
+  }, [footer, paddingSize, color, hasBorder, styles.footer]);
+  return ___EmotionJSX(EuiPanel, _extends({
+    css: cssStyles,
     className: classes,
     color: color,
-    paddingSize: 'none',
-    hasBorder: hasBorder,
-    grow: false
-  }, rest);
-  return ___EmotionJSX(EuiPanel, panelProps, ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__main"
-  }, iconNode && ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__icon"
-  }, iconNode), ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__content"
-  }, ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__contentInner"
-  }, contentNodes))), footer && ___EmotionJSX("div", {
-    className: "euiEmptyPrompt__footer"
-  }, footer));
+    paddingSize: "none",
+    grow: false,
+    hasBorder: hasBorder
+  }, rest), ___EmotionJSX("div", {
+    className: "euiEmptyPrompt__main",
+    css: mainStyles
+  }, iconNode, ___EmotionJSX("div", {
+    className: "euiEmptyPrompt__content",
+    css: contentStyles
+  }, title && ___EmotionJSX(EuiTitle, {
+    size: titleSize
+  }, title), title && body && ___EmotionJSX(EuiSpacer, {
+    size: "m"
+  }), body && ___EmotionJSX(EuiText, {
+    color: "subdued"
+  }, body), actionsNode && (body || title) && ___EmotionJSX(EuiSpacer, {
+    size: "l"
+  }), actionsNode)), footerNode);
 };
 EuiEmptyPrompt.propTypes = {
   className: PropTypes.string,

package/es/components/empty_prompt/empty_prompt.styles.js

@@ -0,0 +1,115 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 { euiBreakpoint, euiPaddingSize, euiBorderColor, logicalCSS, mathWithUnits } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "x4698b-roundedBorders",
+  styles: "border-radius:inherit;label:roundedBorders;"
+} : {
+  name: "x4698b-roundedBorders",
+  styles: "border-radius:inherit;label:roundedBorders;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "zv101j-euiEmptyPrompt__footer",
+  styles: "border-end-end-radius:inherit;border-end-start-radius:inherit;label:euiEmptyPrompt__footer;"
+} : {
+  name: "zv101j-euiEmptyPrompt__footer",
+  styles: "border-end-end-radius:inherit;border-end-start-radius:inherit;label:euiEmptyPrompt__footer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1rdinfv-vertical",
+  styles: "margin:auto;label:vertical;"
+} : {
+  name: "1rdinfv-vertical",
+  styles: "margin:auto;label:vertical;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "1w25ahh-vertical",
+  styles: "justify-content:center;label:vertical;"
+} : {
+  name: "1w25ahh-vertical",
+  styles: "justify-content:center;label:vertical;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref5 = process.env.NODE_ENV === "production" ? {
+  name: "1o9qvqj-euiEmptyPrompt__main",
+  styles: "display:flex;flex-direction:column;label:euiEmptyPrompt__main;"
+} : {
+  name: "1o9qvqj-euiEmptyPrompt__main",
+  styles: "display:flex;flex-direction:column;label:euiEmptyPrompt__main;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiEmptyPromptStyles = function euiEmptyPromptStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var iconMaxWidth = mathWithUnits(euiTheme.size.l, function (x) {
+    return x * 15;
+  });
+  var generatePaddingStyles = function generatePaddingStyles() {
+    var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'padding';
+    return {
+      none: null,
+      s: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 's'), ";;label:s;"),
+      m: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 'm'), ";;label:m;"),
+      l: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 'l'), ";;label:l;")
+    };
+  };
+  var generateFooterBorder = function generateFooterBorder(color) {
+    return "".concat(euiTheme.border.width.thin, " solid ").concat(euiBorderColor(euiThemeContext, color));
+  };
+  return {
+    euiEmptyPrompt: /*#__PURE__*/css("text-align:center;margin:auto;", euiBreakpoint(euiThemeContext, ['l', 'xl']), "{", logicalCSS('max-width', 'max-content'), ";};label:euiEmptyPrompt;"),
+    vertical: /*#__PURE__*/css(";label:vertical;"),
+    horizontal: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['l', 'xl']), "{justify-content:flex-start;text-align:start;};label:horizontal;"),
+    main: _objectSpread(_objectSpread({
+      euiEmptyPrompt__main: _ref5,
+      vertical: _ref4,
+      horizontal: /*#__PURE__*/css("align-items:center;", euiBreakpoint(euiThemeContext, ['l', 'xl']), "{flex-direction:row-reverse;};label:horizontal;")
+    }, generatePaddingStyles()), {}, {
+      horizontalPadding: generatePaddingStyles('gap')
+    }),
+    content: {
+      euiEmptyPrompt__content: /*#__PURE__*/css(logicalCSS('max-width', '36em'), ";;label:euiEmptyPrompt__content;"),
+      vertical: _ref3,
+      horizontal: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['l', 'xl']), "{padding-block:", euiTheme.size.l, ";padding-inline:0;};label:horizontal;")
+    },
+    icon: {
+      euiEmptyPrompt__icon: /*#__PURE__*/css(logicalCSS('max-width', iconMaxWidth), " margin:auto;&>*{flex-shrink:1;", logicalCSS('max-width', '100%'), ";};label:euiEmptyPrompt__icon;"),
+      vertical: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.base), ";;label:vertical;"),
+      horizontal: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['l', 'xl']), "{", logicalCSS('min-width', '40%'), " ", logicalCSS('max-width', '50%'), "&&>*{", logicalCSS('max-width', iconMaxWidth), ";}};label:horizontal;")
+    },
+    actions: {
+      euiEmptyPrompt__actions: /*#__PURE__*/css(";label:euiEmptyPrompt__actions;"),
+      vertical: /*#__PURE__*/css(";label:vertical;"),
+      horizontal: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['l', 'xl']), "{justify-content:flex-start;};label:horizontal;")
+    },
+    footer: _objectSpread({
+      euiEmptyPrompt__footer: _ref2,
+      roundedBorders: _ref,
+      // Colors
+      transparent: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:transparent;"),
+      plain: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:plain;"),
+      subdued: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('subdued')), ";;label:subdued;"),
+      primary: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('primary')), ";;label:primary;"),
+      accent: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('accent')), ";;label:accent;"),
+      danger: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('danger')), ";;label:danger;"),
+      warning: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('warning')), ";;label:warning;"),
+      success: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('success')), ";;label:success;")
+    }, generatePaddingStyles())
+  };
+};

package/es/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -99,12 +99,6 @@ EuiHeaderBreadcrumbs.propTypes = {
          * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
          */
     popoverProps: PropTypes.shape({
-      /**
-         * Class name passed to the direct parent of the button
-         *
-         * @deprecated Use `className` instead
-         */
-      anchorClassName: PropTypes.string,
       /**
          * Alignment of the popover and arrow relative to the button
          */
@@ -114,10 +108,6 @@ EuiHeaderBreadcrumbs.propTypes = {
          * Intended for use with inputs as anchors, e.g. EuiInputPopover
          */
       attachToAnchor: PropTypes.bool,
-      /**
-         * @deprecated Use `popoverRef` instead
-         */
-      buttonRef: PropTypes.any,
       /**
          * Restrict the popover's position within this element
          */

package/es/components/header/header_links/header_links.js

@@ -130,12 +130,6 @@ EuiHeaderLinks.propTypes = {
        * Extend the functionality of the EuiPopover
        */
   popoverProps: PropTypes.shape({
-    /**
-       * Class name passed to the direct parent of the button
-       *
-       * @deprecated Use `className` instead
-       */
-    anchorClassName: PropTypes.string,
     /**
        * Alignment of the popover and arrow relative to the button
        */
@@ -145,10 +139,6 @@ EuiHeaderLinks.propTypes = {
        * Intended for use with inputs as anchors, e.g. EuiInputPopover
        */
     attachToAnchor: PropTypes.bool,
-    /**
-       * @deprecated Use `popoverRef` instead
-       */
-    buttonRef: PropTypes.any,
     /**
        * Restrict the popover's position within this element
        */

package/es/components/page/page_header/page_header_content.js

@@ -311,12 +311,6 @@ EuiPageHeaderContent.propTypes = {
          * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
          */
     popoverProps: PropTypes.shape({
-      /**
-         * Class name passed to the direct parent of the button
-         *
-         * @deprecated Use `className` instead
-         */
-      anchorClassName: PropTypes.string,
       /**
          * Alignment of the popover and arrow relative to the button
          */
@@ -326,10 +320,6 @@ EuiPageHeaderContent.propTypes = {
          * Intended for use with inputs as anchors, e.g. EuiInputPopover
          */
       attachToAnchor: PropTypes.bool,
-      /**
-         * @deprecated Use `popoverRef` instead
-         */
-      buttonRef: PropTypes.any,
       /**
          * Restrict the popover's position within this element
          */

package/es/components/popover/popover.js

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "repositionToCrossAxis", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorPosition", "button", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "repositionToCrossAxis", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -277,7 +277,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "popoverRef", function (node) {
       _this.button = node;
-      setMultipleRefs([_this.props.popoverRef, _this.props.buttonRef], node);
+      setMultipleRefs([_this.props.popoverRef], node);
     });
     _this.state = {
       prevProps: {
@@ -358,10 +358,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       var _panelProps$tabIndex,
         _this4 = this;
       var _this$props = this.props,
-        anchorClassName = _this$props.anchorClassName,
         anchorPosition = _this$props.anchorPosition,
         button = _this$props.button,
-        buttonRef = _this$props.buttonRef,
         insert = _this$props.insert,
         isOpen = _this$props.isOpen,
         ownFocus = _this$props.ownFocus,
@@ -401,7 +399,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       }];
       var classes = classNames('euiPopover', {
         'euiPopover-isOpen': this.state.isOpening
-      }, className, anchorClassName);
+      }, className);
       var showArrow = hasArrow && !attachToAnchor;
       var panel;
       if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {
@@ -538,12 +536,6 @@ _defineProperty(EuiPopover, "defaultProps", {
   display: 'inline-block'
 });
 EuiPopover.propTypes = {
-  /**
-     * Class name passed to the direct parent of the button
-     *
-     * @deprecated Use `className` instead
-     */
-  anchorClassName: PropTypes.string,
   /**
      * Alignment of the popover and arrow relative to the button
      */
@@ -557,10 +549,6 @@ EuiPopover.propTypes = {
      * Triggering element for which to align the popover to
      */
   button: PropTypes.any.isRequired,
-  /**
-     * @deprecated Use `popoverRef` instead
-     */
-  buttonRef: PropTypes.any,
   /**
      * Callback to handle hiding of the popover
      */

package/es/components/search_bar/search_bar.js

@@ -28,12 +28,13 @@ import PropTypes from "prop-types";
  */
 
 import React, { Component } from 'react';
-import { htmlIdGenerator } from '../../services/accessibility';
+import { RenderWithEuiTheme, htmlIdGenerator } from '../../services';
 import { isString } from '../../services/predicate';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSearchBox } from './search_box';
 import { EuiSearchBarFilters } from './search_filters';
 import { Query } from './query';
+import { euiSearchBar__searchHolder, euiSearchBar__filtersHolder } from './search_bar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export { Query, AST as Ast } from './query';
 var parseQuery = function parseQuery(query, props) {
@@ -184,39 +185,42 @@ export var EuiSearchBar = /*#__PURE__*/function (_Component) {
         toolsRight = _this$props.toolsRight,
         hint = _this$props.hint;
       var toolsLeftEl = this.renderTools(toolsLeft);
-      var filtersBar = !filters ? undefined : ___EmotionJSX(EuiFlexItem, {
-        className: "euiSearchBar__filtersHolder",
-        grow: false
-      }, ___EmotionJSX(EuiSearchBarFilters, {
-        filters: filters,
-        query: query,
-        onChange: this.onFiltersChange
-      }));
       var toolsRightEl = this.renderTools(toolsRight);
       var isHintVisible = (_hint$popoverProps$is = hint === null || hint === void 0 ? void 0 : (_hint$popoverProps = hint.popoverProps) === null || _hint$popoverProps === void 0 ? void 0 : _hint$popoverProps.isOpen) !== null && _hint$popoverProps$is !== void 0 ? _hint$popoverProps$is : isHintVisibleState;
-      return ___EmotionJSX(EuiFlexGroup, {
-        gutterSize: "m",
-        alignItems: "center",
-        wrap: true
-      }, toolsLeftEl, ___EmotionJSX(EuiFlexItem, {
-        className: "euiSearchBar__searchHolder",
-        grow: true
-      }, ___EmotionJSX(EuiSearchBox, _extends({}, box, {
-        query: queryText,
-        onSearch: this.onSearch,
-        isInvalid: error != null,
-        title: error ? error.message : undefined,
-        "aria-describedby": isHintVisible ? "".concat(this.hintId) : undefined,
-        hint: hint ? _objectSpread({
-          isVisible: isHintVisible,
-          setIsVisible: function setIsVisible(isVisible) {
-            _this2.setState({
-              isHintVisible: isVisible
-            });
-          },
-          id: this.hintId
-        }, hint) : undefined
-      }))), filtersBar, toolsRightEl);
+      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiTheme) {
+        return ___EmotionJSX(EuiFlexGroup, {
+          gutterSize: "m",
+          alignItems: "center",
+          wrap: true
+        }, toolsLeftEl, ___EmotionJSX(EuiFlexItem, {
+          className: "euiSearchBar__searchHolder",
+          css: euiSearchBar__searchHolder(euiTheme),
+          grow: true
+        }, ___EmotionJSX(EuiSearchBox, _extends({}, box, {
+          query: queryText,
+          onSearch: _this2.onSearch,
+          isInvalid: error != null,
+          title: error ? error.message : undefined,
+          "aria-describedby": isHintVisible ? "".concat(_this2.hintId) : undefined,
+          hint: hint ? _objectSpread({
+            isVisible: isHintVisible,
+            setIsVisible: function setIsVisible(isVisible) {
+              _this2.setState({
+                isHintVisible: isVisible
+              });
+            },
+            id: _this2.hintId
+          }, hint) : undefined
+        }))), filters && ___EmotionJSX(EuiFlexItem, {
+          className: "euiSearchBar__filtersHolder",
+          css: euiSearchBar__filtersHolder(euiTheme),
+          grow: false
+        }, ___EmotionJSX(EuiSearchBarFilters, {
+          filters: filters,
+          query: query,
+          onChange: _this2.onFiltersChange
+        })), toolsRightEl);
+      });
     }
   }], [{
     key: "getDerivedStateFromProps",

package/es/components/search_bar/search_bar.styles.js

@@ -0,0 +1,22 @@
+/*
+ * 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 { euiBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiFormVariables } from '../form/form.styles';
+export var euiSearchBar__searchHolder = function euiSearchBar__searchHolder(euiThemeContext) {
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    maxWidth = _euiFormVariables.maxWidth;
+  return /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(maxWidth, function (x) {
+    return x / 2;
+  })), ";;label:euiSearchBar__searchHolder;");
+};
+export var euiSearchBar__filtersHolder = function euiSearchBar__filtersHolder(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['m', 'l', 'xl']), "{", logicalCSS('max-width', "calc(100% - ".concat(euiTheme.size.base, ")")), ";};label:euiSearchBar__filtersHolder;");
+};

package/es/components/text_truncate/text_truncate.js

@@ -135,9 +135,12 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     setReady = _useState4[1];
   useEffect(function () {
     if (calculationDelayMs) {
-      setTimeout(function () {
+      var timerId = setTimeout(function () {
         return setReady(true);
       }, calculationDelayMs);
+      return function () {
+        return clearTimeout(timerId);
+      };
     }
   }, [calculationDelayMs]);