@elastic/eui 87.0.0 → 87.2.0

package/es/components/empty_prompt/empty_prompt.js

@@ -127,7 +127,6 @@ EuiEmptyPrompt.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  element: PropTypes.oneOf(["div"]),
   /**
      * Adds a medium shadow to the panel;
      * Only works when `color="plain"`

package/es/components/flyout/flyout.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 = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap", "aria-describedby"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -82,6 +82,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
     _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
     includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
+    _ariaDescribedBy = _ref['aria-describedby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var Element = as || defaultElement;
   var maskRef = useRef(null);
@@ -215,6 +216,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
    */
   var hasOverlayMask = ownFocus && !isPushed;
   var descriptionId = useGeneratedHtmlId();
+  var ariaDescribedBy = classnames(descriptionId, _ariaDescribedBy);
   var screenReaderDescription = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
     id: descriptionId
   }, hasOverlayMask ? ___EmotionJSX(EuiI18n, {
@@ -259,15 +261,15 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), ___EmotionJSX(Element, _extends({
-    css: cssStyles
-  }, rest, {
-    role: "dialog",
     className: classes,
-    tabIndex: 0,
-    "data-autofocus": true,
-    "aria-describedby": !isPushed ? descriptionId : undefined,
+    css: cssStyles,
     style: newStyle,
     ref: setRef
+  }, rest, {
+    role: !isPushed ? 'dialog' : rest.role,
+    tabIndex: !isPushed ? 0 : rest.tabIndex,
+    "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
+    "data-autofocus": !isPushed || undefined
   }), !isPushed && screenReaderDescription, closeButton, children));
 
   // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.

package/es/components/flyout/flyout_body.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "banner"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
 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; }
@@ -20,6 +20,8 @@ export var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   var children = _ref.children,
     className = _ref.className,
     banner = _ref.banner,
+    _ref$scrollableTabInd = _ref.scrollableTabIndex,
+    scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFlyoutBody', className);
   var euiTheme = useEuiTheme();
@@ -31,7 +33,7 @@ export var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
     className: classes,
     css: cssStyles
   }, rest), ___EmotionJSX("div", {
-    tabIndex: 0,
+    tabIndex: scrollableTabIndex,
     className: "euiFlyoutBody__overflow",
     css: overflowCssStyles
   }, banner && ___EmotionJSX("div", {
@@ -49,5 +51,15 @@ EuiFlyoutBody.propTypes = {
   /**
          * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.
          */
-  banner: PropTypes.node
+  banner: PropTypes.node,
+  /**
+         * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
+         * to allow keyboard users to scroll the region via arrow keys.
+         *
+         * By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`.
+         * If you know your flyout body content already contains focusable children
+         * that satisfy keyboard accessibility requirements, you can use this prop
+         * to override this default.
+         */
+  scrollableTabIndex: PropTypes.number
 };

package/es/components/form/range/dual_range.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "inputPopoverProps", "isDraggable", "theme"];
 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; }
@@ -266,9 +266,11 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onResize", function (width) {
+      var _this$props$inputPopo, _this$props$inputPopo2;
       _this.setState({
         rangeWidth: width
       });
+      (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
     });
     _defineProperty(_assertThisInitialized(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -385,6 +387,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         prepend = _this$props.prepend,
         minInputProps = _this$props.minInputProps,
         maxInputProps = _this$props.maxInputProps,
+        inputPopoverProps = _this$props.inputPopoverProps,
         isDraggable = _this$props.isDraggable,
         theme = _this$props.theme,
         rest = _objectWithoutProperties(_this$props, _excluded);
@@ -625,8 +628,8 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       }), maxInput));
-      var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, _extends({}, inputPopoverProps, {
+        className: classNames('euiDualRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: ___EmotionJSX(EuiFormControlLayoutDelimited, {
           startControl: minInput,
           endControl: maxInput,
@@ -645,7 +648,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         disableFocusTrap: true,
         onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover || theRange;
     }
   }]);
@@ -765,13 +768,37 @@ EuiDualRangeClass.propTypes = {
      * @default false
      */
   fullWidth: PropTypes.bool,
+  /**
+     * Only impacts inputs rendered by the `showInput` prop
+     */
+  isInvalid: PropTypes.bool,
   /**
      * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
   isLoading: PropTypes.bool,
   /**
-     * Only impacts inputs rendered by the `showInput` prop
+     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+     *
+     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+     * except for props controlled by the range component
      */
-  isInvalid: PropTypes.bool
+  inputPopoverProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
+    /**
+       * Alignment of the popover relative to the input
+       */
+    anchorPosition: PropTypes.oneOf(["downLeft", "downRight", "downCenter"]),
+    inputRef: PropTypes.any,
+    onPanelResize: PropTypes.func,
+    /**
+       * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+       * However, if the input width is too small, you can pass a minimum panel width
+       * (that should be based on the popover content).
+       */
+    panelMinWidth: PropTypes.number
+  })
 };
 export var EuiDualRange = withEuiTheme(EuiDualRangeClass);

package/es/components/form/range/range.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "inputPopoverProps", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 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 _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; }
@@ -121,6 +121,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         step = _this$props.step,
         showLabels = _this$props.showLabels,
         showInput = _this$props.showInput,
+        inputPopoverProps = _this$props.inputPopoverProps,
         showTicks = _this$props.showTicks,
         tickInterval = _this$props.tickInterval,
         ticks = _this$props.ticks,
@@ -233,8 +234,8 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
-      var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, _extends({}, inputPopoverProps, {
+        className: classNames('euiRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: theInput // `showInputOnly` confirms existence
         ,
         fullWidth: fullWidth,
@@ -242,7 +243,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         closePopover: this.closePopover,
         disableFocusTrap: true,
         popoverScreenReaderText: sliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }
   }]);
@@ -361,13 +362,37 @@ EuiRangeClass.propTypes = {
      * @default false
      */
   fullWidth: PropTypes.bool,
+  /**
+     * Only impacts inputs rendered by the `showInput` prop
+     */
+  isInvalid: PropTypes.bool,
   /**
      * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
   isLoading: PropTypes.bool,
   /**
-     * Only impacts inputs rendered by the `showInput` prop
+     * Only impacts input popovers rendered when the `showInput` prop is set to `"inputWithPopover"`
+     *
+     * Allows customizing the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element),
+     * except for props controlled by the range component
      */
-  isInvalid: PropTypes.bool
+  inputPopoverProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
+    /**
+       * Alignment of the popover relative to the input
+       */
+    anchorPosition: PropTypes.oneOf(["downLeft", "downRight", "downCenter"]),
+    inputRef: PropTypes.any,
+    onPanelResize: PropTypes.func,
+    /**
+       * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+       * However, if the input width is too small, you can pass a minimum panel width
+       * (that should be based on the popover content).
+       */
+    panelMinWidth: PropTypes.number
+  })
 };
 export var EuiRange = withEuiTheme(EuiRangeClass);

package/es/components/form/super_select/super_select.js

@@ -352,7 +352,7 @@ EuiSuperSelect.propTypes = {
        */
   isOpen: PropTypes.bool,
   /**
-       * Optional props to pass to the underlying [EuiPopover](/#/layout/popover).
+       * Optional props to pass to the underlying [EuiInputPopover](/#/layout/popover#popover-attached-to-input-element).
        * Allows fine-grained control of the popover dropdown menu, including
        * `repositionOnScroll` for EuiSuperSelects used within scrollable containers,
        * and customizing popover panel styling.

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

@@ -108,9 +108,8 @@ EuiHeaderBreadcrumbs.propTypes = {
          */
       anchorPosition: PropTypes.any,
       /**
-         * Style and position alteration for arrow-less, left-aligned
-         * attachment. Intended for use with inputs as anchors, e.g.
-         * EuiInputPopover
+         * Style and position alteration for arrow-less attachment.
+         * Intended for use with inputs as anchors, e.g. EuiInputPopover
          */
       attachToAnchor: PropTypes.bool,
       buttonRef: PropTypes.any,

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

@@ -139,9 +139,8 @@ EuiHeaderLinks.propTypes = {
        */
     anchorPosition: PropTypes.any,
     /**
-       * Style and position alteration for arrow-less, left-aligned
-       * attachment. Intended for use with inputs as anchors, e.g.
-       * EuiInputPopover
+       * Style and position alteration for arrow-less attachment.
+       * Intended for use with inputs as anchors, e.g. EuiInputPopover
        */
     attachToAnchor: PropTypes.bool,
     buttonRef: PropTypes.any,

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

@@ -320,9 +320,8 @@ EuiPageHeaderContent.propTypes = {
          */
       anchorPosition: PropTypes.any,
       /**
-         * Style and position alteration for arrow-less, left-aligned
-         * attachment. Intended for use with inputs as anchors, e.g.
-         * EuiInputPopover
+         * Style and position alteration for arrow-less attachment.
+         * Intended for use with inputs as anchors, e.g. EuiInputPopover
          */
       attachToAnchor: PropTypes.bool,
       buttonRef: PropTypes.any,

package/es/components/page/page_sidebar/page_sidebar.js

@@ -22,7 +22,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import PropTypes from "prop-types";
 import { logicalStyle, useEuiPaddingCSS } from '../../../global_styling';
 import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
@@ -51,7 +51,7 @@ export var EuiPageSidebar = function EuiPageSidebar(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     inlineStyles = _useState2[0],
     setInlineStyles = _useState2[1];
-  useEffect(function () {
+  useLayoutEffect(function () {
     var updatedStyles = _objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth));
     if (sticky) {
       var _document$body$datase;

package/es/components/page_template/page_template.js

@@ -39,6 +39,14 @@ export var TemplateContext = /*#__PURE__*/createContext({
   emptyPrompt: {},
   bottomBar: {}
 });
+var calculateOffset = function calculateOffset(base) {
+  var _document$body$datase;
+  if (typeof document === 'undefined') return 0; // SSR catch
+
+  var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
+  return base * 3 * euiHeaderFixedCounter;
+};
+
 /**
  * Consumed via `EuiPageTemplate`,
  * it controls and propogates most of the shared props per direct child
@@ -65,7 +73,9 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useEuiTheme = useEuiTheme(),
     euiTheme = _useEuiTheme.euiTheme;
-  var _useState = useState(_offset),
+  var _useState = useState(function () {
+      return _offset !== null && _offset !== void 0 ? _offset : calculateOffset(euiTheme.base);
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     offset = _useState2[0],
     setOffset = _useState2[1];
@@ -78,9 +88,7 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   useEffect(function () {
     if (_offset === undefined) {
-      var _document$body$datase;
-      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
-      setOffset(euiTheme.base * 3 * euiHeaderFixedCounter);
+      setOffset(calculateOffset(euiTheme.base));
     }
   }, [_offset, euiTheme.base]);
 
@@ -118,7 +126,8 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     return {
       restrictWidth: restrictWidth,
       paddingSize: paddingSize,
-      parent: "#".concat(pageInnerId)
+      // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped
+      parent: "#".concat(CSS.escape(pageInnerId))
     };
   };
   var innerPanelled = function innerPanelled() {

package/es/components/popover/input_popover.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,7 +16,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
 import { tabbable } from 'tabbable';
@@ -37,6 +37,8 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     input = _ref.input,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$panelMinWidth = _ref.panelMinWidth,
+    panelMinWidth = _ref$panelMinWidth === void 0 ? 0 : _ref$panelMinWidth,
     onPanelResize = _ref.onPanelResize,
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
@@ -54,22 +56,24 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     panelEl = _useState6[0],
     setPanelEl = _useState6[1];
+  var popoverClassRef = useRef(null);
   var inputRef = useCombinedRefs([setInputEl, _inputRef]);
   var panelRef = useCombinedRefs([setPanelEl, _panelRef]);
   var setPanelWidth = useCallback(function (width) {
     if (panelEl && (!!inputElWidth || !!width)) {
       var newWidth = !!width ? width : inputElWidth;
-      panelEl.style.width = "".concat(newWidth, "px");
-      if (onPanelResize) {
-        onPanelResize(newWidth);
-      }
+      var widthToSet = newWidth && newWidth > panelMinWidth ? newWidth : panelMinWidth;
+      panelEl.style.width = "".concat(widthToSet, "px");
+      onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(widthToSet);
     }
-  }, [panelEl, inputElWidth, onPanelResize]);
+  }, [panelEl, inputElWidth, onPanelResize, panelMinWidth]);
   var onResize = useCallback(function () {
     if (inputEl) {
+      var _popoverClassRef$curr;
       var _width = inputEl.getBoundingClientRect().width;
       setInputElWidth(_width);
       setPanelWidth(_width);
+      (_popoverClassRef$curr = popoverClassRef.current) === null || _popoverClassRef$curr === void 0 ? void 0 : _popoverClassRef$curr.positionPopoverFluid();
     }
   }, [inputEl, setPanelWidth]);
   useEffect(function () {
@@ -104,7 +108,8 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     }),
     buttonRef: inputRef,
     panelRef: panelRef,
-    className: classes
+    className: classes,
+    ref: popoverClassRef
   }, props), ___EmotionJSX(EuiFocusTrap, _extends({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
@@ -117,11 +122,21 @@ EuiInputPopover.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * Alignment of the popover relative to the input
+     */
+  anchorPosition: PropTypes.oneOf(["downLeft", "downRight", "downCenter"]),
   disableFocusTrap: PropTypes.bool,
   fullWidth: PropTypes.bool,
   input: PropTypes.any.isRequired,
   inputRef: PropTypes.any,
-  onPanelResize: PropTypes.func
+  onPanelResize: PropTypes.func,
+  /**
+     * By default, **EuiInputPopovers** inherit the same width as the passed input element.
+     * However, if the input width is too small, you can pass a minimum panel width
+     * (that should be based on the popover content).
+     */
+  panelMinWidth: PropTypes.number
 };
 EuiInputPopover.defaultProps = {
   anchorPosition: 'downLeft',

package/es/components/popover/popover.js

@@ -221,8 +221,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         top = _findPopoverPosition.top,
         left = _findPopoverPosition.left,
         foundPosition = _findPopoverPosition.position,
-        arrow = _findPopoverPosition.arrow,
-        anchorBoundingBox = _findPopoverPosition.anchorBoundingBox;
+        arrow = _findPopoverPosition.arrow;
 
       // the popover's z-index must inherit from the button
       // this keeps a button's popover under a flyout that would cover the button
@@ -231,7 +230,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       var zIndex = zIndexProp == null ? getElementZIndex(_this.button, _this.panel) + 2000 : zIndexProp;
       var popoverStyles = _objectSpread(_objectSpread({}, _this.props.panelStyle), {}, {
         top: top,
-        left: _this.props.attachToAnchor && anchorBoundingBox ? anchorBoundingBox.left : left,
+        left: left,
         zIndex: zIndex
       });
       var willRenderArrow = !_this.props.attachToAnchor && _this.props.hasArrow;
@@ -552,9 +551,8 @@ EuiPopover.propTypes = {
      */
   anchorPosition: PropTypes.any,
   /**
-     * Style and position alteration for arrow-less, left-aligned
-     * attachment. Intended for use with inputs as anchors, e.g.
-     * EuiInputPopover
+     * Style and position alteration for arrow-less attachment.
+     * Intended for use with inputs as anchors, e.g. EuiInputPopover
      */
   attachToAnchor: PropTypes.bool,
   /**

package/es/components/resizable_container/index.js

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiResizableContainer } from './resizable_container';
+export { EuiResizableContainer } from './resizable_container';
+export { EuiResizableButton } from './resizable_button';