@elastic/eui 86.0.0 → 87.1.0

package/es/components/filter_group/filter_group.a11y.js

@@ -238,10 +238,10 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 3);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich - Checked option. To exclude this option, press Enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
       cy.realPress('ArrowDown');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press Enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.');
       cy.checkAxe();
     });
     it('has zero violations when filtering by searchbox', function () {

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/focus_trap/focus_trap.js

@@ -30,13 +30,68 @@ import PropTypes from "prop-types";
 import { FocusOn } from 'react-focus-on';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { findElementBySelectorOrRef } from '../../services';
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
-  _inherits(EuiFocusTrap, _Component);
-  var _super = _createSuper(EuiFocusTrap);
-  function EuiFocusTrap() {
+export var EuiFocusTrap = function EuiFocusTrap(props) {
+  var propsWithDefaults = usePropsWithComponentDefaults('EuiFocusTrap', props);
+  return ___EmotionJSX(EuiFocusTrapClass, propsWithDefaults);
+};
+EuiFocusTrap.propTypes = {
+  // For some reason, Storybook doesn't register these props if they're Pick<>'d
+  className: PropTypes.string,
+  css: PropTypes.any,
+  style: PropTypes.any,
+  /**
+     * @default false
+     */
+  disabled: PropTypes.bool,
+  /**
+     * Whether `onClickOutside` should be called on mouseup instead of mousedown.
+     * This flag can be used to prevent conflicts with outside toggle buttons by delaying the closing click callback.
+     */
+  closeOnMouseup: PropTypes.bool,
+  /**
+     * Clicking outside the trap area will disable the trap
+     * @default false
+     */
+  clickOutsideDisables: PropTypes.bool,
+  /**
+     * Reference to element that will get focus when the trap is initiated
+     */
+  initialFocus: PropTypes.any,
+  /**
+     * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
+     * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
+     * `margin` instead of `padding`.
+     * @default padding
+     */
+  gapMode: PropTypes.oneOf(["padding", "margin"]),
+  /**
+     * Configures focus trapping between iframes.
+     * By default, EuiFocusTrap allows focus to leave iframes and move to elements outside of it.
+     * Set to `true` if you want focus to remain trapped within the iframe.
+     * @default false
+     */
+  crossFrame: PropTypes.any,
+  /**
+     * @default false
+     */
+  scrollLock: PropTypes.any,
+  /**
+     * @default true
+     */
+  noIsolation: PropTypes.any,
+  /**
+     * @default true
+     */
+  returnFocus: PropTypes.any
+};
+var EuiFocusTrapClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiFocusTrapClass, _Component);
+  var _super = _createSuper(EuiFocusTrapClass);
+  function EuiFocusTrapClass() {
     var _this;
-    _classCallCheck(this, EuiFocusTrap);
+    _classCallCheck(this, EuiFocusTrapClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -87,7 +142,7 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(EuiFocusTrap, [{
+  _createClass(EuiFocusTrapClass, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setInitialFocus(this.props.initialFocus);
@@ -137,9 +192,9 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-  return EuiFocusTrap;
+  return EuiFocusTrapClass;
 }(Component);
-_defineProperty(EuiFocusTrap, "defaultProps", {
+_defineProperty(EuiFocusTrapClass, "defaultProps", {
   clickOutsideDisables: false,
   disabled: false,
   returnFocus: true,
@@ -148,11 +203,15 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
   crossFrame: false,
   gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
 });
-EuiFocusTrap.propTypes = {
+EuiFocusTrapClass.propTypes = {
+  // For some reason, Storybook doesn't register these props if they're Pick<>'d
   className: PropTypes.string,
-  "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  style: PropTypes.any,
+  /**
+     * @default false
+     */
+  disabled: PropTypes.bool,
   /**
      * Whether `onClickOutside` should be called on mouseup instead of mousedown.
      * This flag can be used to prevent conflicts with outside toggle buttons by delaying the closing click callback.
@@ -160,18 +219,37 @@ EuiFocusTrap.propTypes = {
   closeOnMouseup: PropTypes.bool,
   /**
      * Clicking outside the trap area will disable the trap
+     * @default false
      */
   clickOutsideDisables: PropTypes.bool,
   /**
      * Reference to element that will get focus when the trap is initiated
      */
   initialFocus: PropTypes.any,
-  style: PropTypes.any,
   /**
      * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
      * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
      * `margin` instead of `padding`.
+     * @default padding
      */
   gapMode: PropTypes.oneOf(["padding", "margin"]),
-  disabled: PropTypes.bool
+  /**
+     * Configures focus trapping between iframes.
+     * By default, EuiFocusTrap allows focus to leave iframes and move to elements outside of it.
+     * Set to `true` if you want focus to remain trapped within the iframe.
+     * @default false
+     */
+  crossFrame: PropTypes.any,
+  /**
+     * @default false
+     */
+  scrollLock: PropTypes.any,
+  /**
+     * @default true
+     */
+  noIsolation: PropTypes.any,
+  /**
+     * @default true
+     */
+  returnFocus: PropTypes.any
 };

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.a11y.js

@@ -99,11 +99,7 @@ var Header = function Header() {
   });
   return ___EmotionJSX(EuiHeader, null, ___EmotionJSX(EuiHeaderSection, {
     grow: false
-  }, ___EmotionJSX(EuiHeaderSectionItem, {
-    border: "right"
-  }, renderLogo()), ___EmotionJSX(EuiHeaderSectionItem, {
-    border: "right"
-  }, ___EmotionJSX(HeaderSpacesMenu, null))), renderBreadcrumbs(), ___EmotionJSX(EuiHeaderSection, {
+  }, ___EmotionJSX(EuiHeaderSectionItem, null, renderLogo()), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderSpacesMenu, null))), renderBreadcrumbs(), ___EmotionJSX(EuiHeaderSection, {
     side: "right"
   }, ___EmotionJSX(EuiHeaderSectionItem, null, search), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderUserMenu, null)), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderAppMenu, null))));
 };

package/es/components/header/header.js

@@ -18,14 +18,13 @@ import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
 import { EuiHeaderSectionItem, EuiHeaderSection } from './header_section';
 import { euiHeaderStyles } from './header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-function createHeaderSection(sections, border) {
+var createHeaderSection = function createHeaderSection(sections) {
   return sections.map(function (section, index) {
     return ___EmotionJSX(EuiHeaderSectionItem, {
-      key: index,
-      border: border
+      key: index
     }, section);
   });
-}
+};
 // Start a counter to manage the total number of fixed headers that need the body class
 var euiHeaderFixedCounter = 0;
 export var EuiHeader = function EuiHeader(_ref) {
@@ -69,7 +68,7 @@ export var EuiHeader = function EuiHeader(_ref) {
         // Items get wrapped in EuiHeaderSection and each item in a EuiHeaderSectionItem
         content.push(___EmotionJSX(EuiHeaderSection, {
           key: "items-".concat(index)
-        }, createHeaderSection(section.items, section.borders)));
+        }, createHeaderSection(section.items)));
       }
       if (section.breadcrumbs) {
         content.push(
@@ -107,10 +106,6 @@ EuiHeader.propTypes = {
        * An arry of items that will be wrapped in a #EuiHeaderSectionItem
        */
     items: PropTypes.arrayOf(PropTypes.node.isRequired),
-    /**
-       * Apply the passed border side to each #EuiHeaderSectionItem
-       */
-    borders: PropTypes.oneOf(["left", "right", "none"]),
     /**
        * Breadcrumbs in the header cannot be wrapped in a #EuiHeaderSection in order for truncation to work.
        * Simply pass the array of EuiBreadcrumb objects

package/es/components/header/header.styles.js

@@ -14,20 +14,22 @@ export var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     height: euiTheme.size.xxxl,
-    childHeight: euiTheme.size.xxl
+    childHeight: euiTheme.size.xxl,
+    padding: euiTheme.size.s
   };
 };
 export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
-    height = _euiHeaderVariables.height;
+    height = _euiHeaderVariables.height,
+    padding = _euiHeaderVariables.padding;
 
   // Curated border color to fade into the shadow without looking too much like a border
   // It adds separation between the header and flyout
   var borderColor = colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 0.35) : shade(euiTheme.border.color, 0.03);
   return {
-    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " ", euiShadowSmall(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", euiShadowSmall(euiThemeContext), ";;label:euiHeader;"),
     // Position
     static: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/css("z-index:", euiTheme.levels.header, ";position:fixed;", logicalCSS('top', 0), " ", logicalCSS('horizontal', 0), " &+[data-fixed-header]{", logicalCSS('top', height), ";};label:fixed;"),
@@ -54,5 +56,5 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultB
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.28);
   var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat(logicalCSS('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderSectionItem {\n      &::after {\n        background-color: ").concat(colorMode === 'DARK' ? euiTheme.colors.lightestShade : euiTheme.colors.darkShade, ";\n      }\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group,\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n          ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append {\n          background-color: transparent;\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat(logicalCSS('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group,\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n          ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append {\n          background-color: transparent;\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/es/components/header/header_alert/header_alert.js

@@ -14,7 +14,8 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-import { useGeneratedHtmlId } from '../../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { euiHeaderAlertStyles } from './header_alert.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderAlert = function EuiHeaderAlert(_ref) {
   var action = _ref.action,
@@ -24,24 +25,31 @@ export var EuiHeaderAlert = function EuiHeaderAlert(_ref) {
     title = _ref.title,
     badge = _ref.badge,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderAlertStyles(euiTheme);
   var classes = classNames('euiHeaderAlert', className);
   var ariaId = useGeneratedHtmlId();
   return ___EmotionJSX("article", _extends({
     "aria-labelledby": "".concat(ariaId, "-title"),
-    className: classes
+    className: classes,
+    css: styles.euiHeaderAlert
   }, rest), ___EmotionJSX(EuiFlexGroup, {
     justifyContent: "spaceBetween"
   }, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX("div", {
-    className: "euiHeaderAlert__date"
+    className: "euiHeaderAlert__date",
+    css: styles.euiHeaderAlert__date
   }, date)), badge && ___EmotionJSX(EuiFlexItem, {
     grow: false
   }, badge)), ___EmotionJSX("h3", {
     id: "".concat(ariaId, "-title"),
-    className: "euiHeaderAlert__title"
+    className: "euiHeaderAlert__title",
+    css: styles.euiHeaderAlert__title
   }, title), ___EmotionJSX("div", {
-    className: "euiHeaderAlert__text"
+    className: "euiHeaderAlert__text",
+    css: styles.euiHeaderAlert__text
   }, text), action && ___EmotionJSX("div", {
-    className: "euiHeaderAlert__action euiLink"
+    className: "euiHeaderAlert__action",
+    css: styles.euiHeaderAlert__action
   }, action));
 };
 EuiHeaderAlert.propTypes = {

package/es/components/header/header_alert/header_alert.styles.js

@@ -0,0 +1,21 @@
+/*
+ * 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 { logicalCSS, euiFontSize } from '../../../global_styling';
+import { euiTitle } from '../../title/title.styles';
+export var euiHeaderAlertStyles = function euiHeaderAlertStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderAlert: /*#__PURE__*/css("position:relative;", logicalCSS('min-width', '300px'), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " &:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.l), " ", logicalCSS('padding-bottom', euiTheme.size.l), " ", logicalCSS('border-bottom', euiTheme.border.thin), ";};label:euiHeaderAlert;"),
+    euiHeaderAlert__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " ", logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiHeaderAlert__title;"),
+    euiHeaderAlert__text: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " ", logicalCSS('margin-bottom', euiTheme.size.base), ";;label:euiHeaderAlert__text;"),
+    euiHeaderAlert__action: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";;label:euiHeaderAlert__action;"),
+    euiHeaderAlert__date: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.darkShade, ";;label:euiHeaderAlert__date;")
+  };
+};