@elastic/eui 87.0.0 → 87.1.0

package/lib/components/tool_tip/tool_tip.js

@@ -7,7 +7,6 @@ exports.POSITIONS = exports.EuiToolTip = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../common");
 var _services = require("../../services");
 var _react2 = require("../../services/react");
 var _resize_observer = require("../observer/resize_observer");
@@ -44,22 +43,13 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
                                                                                                                                                                                                                                                                                                                                                                                                * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                                                                                * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                                                                                */
-var positionsToClassNameMap = {
-  top: 'euiToolTip--top',
-  right: 'euiToolTip--right',
-  bottom: 'euiToolTip--bottom',
-  left: 'euiToolTip--left'
-};
-var POSITIONS = (0, _common.keysOf)(positionsToClassNameMap);
+var POSITIONS = ['top', 'right', 'bottom', 'left'];
 exports.POSITIONS = POSITIONS;
+var DISPLAYS = ['inlineBlock', 'block'];
 var delayToMsMap = {
   regular: 250,
   long: 250 * 5
 };
-var displayToClassNameMap = {
-  inlineBlock: undefined,
-  block: 'euiToolTipAnchor--displayBlock'
-};
 var DEFAULT_TOOLTIP_STYLES = {
   // position the tooltip content near the top-left
   // corner of the window so it can't create scrollbars
@@ -270,7 +260,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
         onFocus: this.onFocus,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
-        id: this.state.id,
+        id: id,
         className: anchorClasses,
         display: display,
         isVisible: visible
@@ -333,7 +323,7 @@ EuiToolTip.propTypes = {
   /**
      * Common display alternatives for the anchor wrapper
      */
-  display: _propTypes.default.oneOf(["inlineBlock", "block"]),
+  display: _propTypes.default.any,
   /**
      * Delay before showing tooltip. Good for repeatable items.
      */

package/lib/components/tool_tip/tool_tip_anchor.js

@@ -22,11 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 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 _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; }
 var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -52,7 +47,7 @@ var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       className: classes,
       onMouseOver: onMouseOver,
       onMouseOut: onMouseOut
-    }), /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread({
+    }), /*#__PURE__*/(0, _react.cloneElement)(children, {
       onFocus: function onFocus(e) {
         _onFocus();
         children.props.onFocus && children.props.onFocus(e);
@@ -60,18 +55,15 @@ var EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
       onBlur: function onBlur(e) {
         _onBlur();
         children.props.onBlur && children.props.onBlur(e);
-      }
-    }, isVisible && {
-      'aria-describedby': id
-    })))
+      },
+      'aria-describedby': isVisible ? (0, _classnames.default)(id, children.props['aria-describedby']) : children.props['aria-describedby']
+    }))
   );
 });
 exports.EuiToolTipAnchor = EuiToolTipAnchor;
 EuiToolTipAnchor.propTypes = {
   onBlur: _propTypes.default.func.isRequired,
   onFocus: _propTypes.default.func.isRequired,
-  children: _propTypes.default.element.isRequired,
-  isVisible: _propTypes.default.bool.isRequired,
-  display: _propTypes.default.oneOf(["block", "inlineBlock"]).isRequired
+  isVisible: _propTypes.default.bool.isRequired
 };
 EuiToolTipAnchor.displayName = 'EuiToolTipAnchor';

package/optimize/es/components/accordion/accordion.js

@@ -20,6 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import { tabbable } from 'tabbable';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiText } from '../text';
@@ -42,33 +43,68 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "childContent", null);
     _defineProperty(_assertThisInitialized(_this), "childWrapper", null);
+    _defineProperty(_assertThisInitialized(_this), "tabbableChildren", null);
     _defineProperty(_assertThisInitialized(_this), "state", {
       isOpen: _this.props.forceState ? _this.props.forceState === 'open' : _this.props.initialIsOpen
     });
     _defineProperty(_assertThisInitialized(_this), "setChildContentHeight", function () {
-      var forceState = _this.props.forceState;
       requestAnimationFrame(function () {
-        var height = _this.childContent && (forceState ? forceState === 'open' : _this.state.isOpen) ? _this.childContent.clientHeight : 0;
+        var height = _this.childContent && _this.isOpen ? _this.childContent.clientHeight : 0;
         _this.childWrapper && _this.childWrapper.setAttribute('style', logicalCSS('height', "".concat(height, "px")));
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onToggle", function () {
       var forceState = _this.props.forceState;
       if (forceState) {
-        _this.props.onToggle && _this.props.onToggle(forceState === 'open' ? false : true);
+        var _this$props$onToggle, _this$props;
+        (_this$props$onToggle = (_this$props = _this.props).onToggle) === null || _this$props$onToggle === void 0 ? void 0 : _this$props$onToggle.call(_this$props, forceState === 'open' ? false : true);
       } else {
         _this.setState(function (prevState) {
           return {
             isOpen: !prevState.isOpen
           };
         }, function () {
+          var _this$props$onToggle2, _this$props2;
           if (_this.state.isOpen && _this.childWrapper) {
             _this.childWrapper.focus();
           }
-          _this.props.onToggle && _this.props.onToggle(_this.state.isOpen);
+          (_this$props$onToggle2 = (_this$props2 = _this.props).onToggle) === null || _this$props$onToggle2 === void 0 ? void 0 : _this$props$onToggle2.call(_this$props2, _this.state.isOpen);
         });
       }
     });
+    // When accordions are closed, tabbable children should not be present in the tab order
+    _defineProperty(_assertThisInitialized(_this), "preventTabbing", function () {
+      if (_this.childContent) {
+        // Re-check for children on every close - content can change dynamically
+        _this.tabbableChildren = tabbable(_this.childContent);
+        _this.tabbableChildren.forEach(function (element) {
+          // If the element has an existing `tabIndex` set, make sure we can restore it
+          var originalTabIndex = element.getAttribute('tabIndex');
+          if (originalTabIndex) {
+            element.setAttribute('data-original-tabindex', originalTabIndex);
+          }
+          element.setAttribute('tabIndex', '-1');
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "enableTabbing", function () {
+      // If no tabbable children were set, we don't need to re-enable anything
+      if (_this.tabbableChildren) {
+        _this.tabbableChildren.forEach(function (element) {
+          var originalTabIndex = element.getAttribute('data-original-tabindex');
+          if (originalTabIndex) {
+            // If the element originally had an existing `tabIndex` set, restore it
+            element.setAttribute('tabIndex', originalTabIndex);
+            element.removeAttribute('data-original-tabindex');
+          } else {
+            // If not, remove the tabIndex property
+            element.removeAttribute('tabIndex');
+          }
+        });
+        // Cleanup - unset the list of children
+        _this.tabbableChildren = null;
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "setChildContentRef", function (node) {
       _this.childContent = node;
     });
@@ -83,44 +119,55 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(EuiAccordionClass, [{
+    key: "isOpen",
+    get: function get() {
+      return this.props.forceState ? this.props.forceState === 'open' : this.state.isOpen;
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setChildContentHeight();
+      if (!this.isOpen) this.preventTabbing();
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(prevProps, prevState) {
       this.setChildContentHeight();
+      if (prevProps.forceState === 'open' && this.props.forceState === 'closed' || prevState.isOpen === true && this.state.isOpen === false) {
+        this.preventTabbing();
+      }
+      if (prevProps.forceState === 'closed' && this.props.forceState === 'open' || prevState.isOpen === false && this.state.isOpen === true) {
+        this.enableTabbing();
+      }
     }
   }, {
     key: "render",
     value: function render() {
       var _buttonProps$id,
         _this2 = this;
-      var _this$props = this.props,
-        children = _this$props.children,
-        buttonContent = _this$props.buttonContent,
-        className = _this$props.className,
-        id = _this$props.id,
-        _this$props$element = _this$props.element,
-        Element = _this$props$element === void 0 ? 'div' : _this$props$element,
-        buttonClassName = _this$props.buttonClassName,
-        buttonContentClassName = _this$props.buttonContentClassName,
-        extraAction = _this$props.extraAction,
-        paddingSize = _this$props.paddingSize,
-        initialIsOpen = _this$props.initialIsOpen,
-        arrowDisplay = _this$props.arrowDisplay,
-        forceState = _this$props.forceState,
-        isLoading = _this$props.isLoading,
-        isLoadingMessage = _this$props.isLoadingMessage,
-        isDisabled = _this$props.isDisabled,
-        buttonProps = _this$props.buttonProps,
-        _this$props$buttonEle = _this$props.buttonElement,
-        _ButtonElement = _this$props$buttonEle === void 0 ? 'button' : _this$props$buttonEle,
-        arrowProps = _this$props.arrowProps,
-        theme = _this$props.theme,
-        rest = _objectWithoutProperties(_this$props, _excluded);
-      var isOpen = forceState ? forceState === 'open' : this.state.isOpen;
+      var _this$props3 = this.props,
+        children = _this$props3.children,
+        buttonContent = _this$props3.buttonContent,
+        className = _this$props3.className,
+        id = _this$props3.id,
+        _this$props3$element = _this$props3.element,
+        Element = _this$props3$element === void 0 ? 'div' : _this$props3$element,
+        buttonClassName = _this$props3.buttonClassName,
+        buttonContentClassName = _this$props3.buttonContentClassName,
+        extraAction = _this$props3.extraAction,
+        paddingSize = _this$props3.paddingSize,
+        initialIsOpen = _this$props3.initialIsOpen,
+        arrowDisplay = _this$props3.arrowDisplay,
+        forceState = _this$props3.forceState,
+        isLoading = _this$props3.isLoading,
+        isLoadingMessage = _this$props3.isLoadingMessage,
+        isDisabled = _this$props3.isDisabled,
+        buttonProps = _this$props3.buttonProps,
+        _this$props3$buttonEl = _this$props3.buttonElement,
+        _ButtonElement = _this$props3$buttonEl === void 0 ? 'button' : _this$props3$buttonEl,
+        arrowProps = _this$props3.arrowProps,
+        theme = _this$props3.theme,
+        rest = _objectWithoutProperties(_this$props3, _excluded);
 
       // Force button element to be a legend if the element is a fieldset
       var ButtonElement = Element === 'fieldset' ? 'legend' : _ButtonElement;
@@ -129,7 +176,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       // Force visibility of arrow button if button element is not focusable
       var _arrowDisplay = arrowDisplay === 'none' && !buttonElementIsFocusable ? 'left' : arrowDisplay;
       var classes = classNames('euiAccordion', {
-        'euiAccordion-isOpen': isOpen
+        'euiAccordion-isOpen': this.isOpen
       }, className);
       var childrenClasses = classNames('euiAccordion__children', {
         'euiAccordion__children-isLoading': isLoading
@@ -137,7 +184,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var buttonClasses = classNames('euiAccordion__button', buttonClassName, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.className);
       var buttonContentClasses = classNames('euiAccordion__buttonContent', buttonContentClassName);
       var iconButtonClasses = classNames('euiAccordion__iconButton', {
-        'euiAccordion__iconButton-isOpen': isOpen,
+        'euiAccordion__iconButton-isOpen': this.isOpen,
         'euiAccordion__iconButton--right': _arrowDisplay === 'right'
       }, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className);
 
@@ -147,9 +194,9 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var childrenStyles = euiAccordionChildrenStyles(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize && paddingSize !== 'none' && childrenStyles[paddingSize]];
       var childWrapperStyles = euiAccordionChildWrapperStyles(theme);
-      var cssChildWrapperStyles = [childWrapperStyles.euiAccordion__childWrapper, isOpen && childWrapperStyles.isOpen];
+      var cssChildWrapperStyles = [childWrapperStyles.euiAccordion__childWrapper, this.isOpen && childWrapperStyles.isOpen];
       var iconButtonStyles = euiAccordionIconButtonStyles(theme);
-      var cssIconButtonStyles = [iconButtonStyles.euiAccordion__iconButton, isOpen && iconButtonStyles.isOpen, _arrowDisplay === 'right' && iconButtonStyles.arrowRight, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.css];
+      var cssIconButtonStyles = [iconButtonStyles.euiAccordion__iconButton, this.isOpen && iconButtonStyles.isOpen, _arrowDisplay === 'right' && iconButtonStyles.arrowRight, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.css];
       var optionalActionStyles = euiAccordionOptionalActionStyles();
       var cssOptionalActionStyles = [optionalActionStyles.euiAccordion__optionalAction];
       var spinnerStyles = euiAccordionSpinnerStyles(theme);
@@ -167,7 +214,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
-          "aria-expanded": isOpen,
+          "aria-expanded": this.isOpen,
           "aria-labelledby": buttonId,
           tabIndex: buttonElementIsFocusable ? -1 : 0,
           isDisabled: isDisabled
@@ -201,7 +248,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         "aria-controls": id
         // `aria-expanded` is only a valid attribute on interactive controls - axe-core throws a violation otherwise
         ,
-        "aria-expanded": ButtonElement === 'button' ? isOpen : undefined,
+        "aria-expanded": ButtonElement === 'button' ? this.isOpen : undefined,
         onClick: isDisabled ? undefined : this.onToggle,
         type: ButtonElement === 'button' ? 'button' : undefined,
         disabled: ButtonElement === 'button' ? isDisabled : undefined

package/optimize/es/components/auto_sizer/index.js

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { EuiAutoSizer } from './auto_sizer';
+export * from './auto_sizer';

package/optimize/es/components/code/code_block_virtualized.js

@@ -44,26 +44,34 @@ export var EuiCodeBlockVirtualized = function EuiCodeBlockVirtualized(_ref) {
       }, codeProps));
     });
   }, [codeProps]);
-  return ___EmotionJSX(EuiAutoSizer, {
-    disableHeight: typeof overflowHeight === 'number'
+  var virtualizationProps = {
+    itemData: data,
+    itemSize: rowHeight,
+    itemCount: data.length,
+    outerElementType: VirtualizedOuterElement,
+    innerElementType: VirtualizedInnerElement
+  };
+  return typeof overflowHeight === 'number' ? ___EmotionJSX(EuiAutoSizer, {
+    disableHeight: true
   }, function (_ref4) {
-    var height = _ref4.height,
-      width = _ref4.width;
-    return ___EmotionJSX(FixedSizeList, {
-      height: height !== null && height !== void 0 ? height : overflowHeight,
-      width: width,
-      itemData: data,
-      itemSize: rowHeight,
-      itemCount: data.length,
-      outerElementType: VirtualizedOuterElement,
-      innerElementType: VirtualizedInnerElement
-    }, ListRow);
+    var width = _ref4.width;
+    return ___EmotionJSX(FixedSizeList, _extends({
+      height: overflowHeight,
+      width: width
+    }, virtualizationProps), ListRow);
+  }) : ___EmotionJSX(EuiAutoSizer, null, function (_ref5) {
+    var height = _ref5.height,
+      width = _ref5.width;
+    return ___EmotionJSX(FixedSizeList, _extends({
+      height: height,
+      width: width
+    }, virtualizationProps), ListRow);
   });
 };
-var ListRow = function ListRow(_ref5) {
-  var data = _ref5.data,
-    index = _ref5.index,
-    style = _ref5.style;
+var ListRow = function ListRow(_ref6) {
+  var data = _ref6.data,
+    index = _ref6.index,
+    style = _ref6.style;
   var row = data[index];
   row.properties.style = logicalStyles(style);
   return nodeToHtml(row, index, data, 0);

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -19,6 +19,7 @@ import classNames from 'classnames';
 import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
 import { mathWithUnits, logicalStyle } from '../../global_styling';
 import { EuiFlyout } from '../flyout';
+import { useEuiI18n } from '../i18n';
 import { euiHeaderVariables } from '../header/header.styles';
 import { EuiCollapsibleNavContext } from './context';
 import { EuiCollapsibleNavButton } from './collapsible_nav_button';
@@ -122,6 +123,7 @@ export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
     conditionalId: id,
     suffix: 'euiCollapsibleNav'
   });
+  var defaultAriaLabel = useEuiI18n('euiCollapsibleNavBeta.ariaLabel', 'Site menu');
   var buttonRef = useRef(null);
   var focusTrapProps = useMemo(function () {
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
@@ -133,7 +135,9 @@ export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
   var cssStyles = [styles.euiCollapsibleNavBeta, styles[side], isPush && styles.isPush, isPush && isCollapsed && styles.isPushCollapsed, isOverlayFullWidth && styles.isOverlayFullWidth];
 
   // Wait for any fixed headers to be queried before rendering (prevents position jumping)
-  var flyout = fixedHeadersCount !== false && ___EmotionJSX(EuiFlyout, _extends({}, rest, {
+  var flyout = fixedHeadersCount !== false && ___EmotionJSX(EuiFlyout, _extends({
+    "aria-label": defaultAriaLabel
+  }, rest, {
     // EuiCollapsibleNav is significantly less permissive than EuiFlyout
     id: flyoutID,
     css: cssStyles,

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js

@@ -49,7 +49,8 @@ export var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
     size: "s",
     color: "text",
     href: href,
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": title
   }, linkProps, {
     // Exclusive union shenanigans
     className: buttonClassName,

package/optimize/es/components/date_picker/date_picker_range.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,6 +26,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
     _fullWidth = _ref.fullWidth,
+    _compressed = _ref.compressed,
     isCustom = _ref.isCustom,
     readOnly = _ref.readOnly,
     isLoading = _ref.isLoading,
@@ -36,8 +37,9 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     append = _ref.append,
     prepend = _ref.prepend,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // `fullWidth` should not affect inline datepickers (matches non-range behavior)
+  // `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
   var fullWidth = _fullWidth && !inline;
+  var compressed = _compressed && !inline;
   var classes = classNames('euiDatePickerRange', className);
   var euiTheme = useEuiTheme();
   var styles = euiDatePickerRangeStyles(euiTheme);
@@ -109,6 +111,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     startControl: startControl,
     endControl: endControl,
     fullWidth: fullWidth,
+    compressed: compressed,
     readOnly: readOnly,
     isDisabled: disabled,
     isInvalid: isInvalid,

package/optimize/es/components/flyout/flyout.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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; }
 /*
@@ -70,6 +70,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);
@@ -203,6 +204,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, {
@@ -247,15 +249,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/optimize/es/components/flyout/flyout_body.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "banner"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,6 +18,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();
@@ -29,7 +31,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", {

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

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -259,9 +259,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;
@@ -378,6 +380,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);
@@ -618,8 +621,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,
@@ -638,7 +641,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         disableFocusTrap: true,
         onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover || theRange;
     }
   }]);

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

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -114,6 +114,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,
@@ -226,8 +227,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,
@@ -235,7 +236,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         closePopover: this.closePopover,
         disableFocusTrap: true,
         popoverScreenReaderText: sliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }
   }]);

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

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { logicalStyle, useEuiPaddingCSS } from '../../../global_styling';
 import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
 import { euiPageSidebarStyles } from './page_sidebar.styles';
@@ -42,7 +42,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;