@elastic/eui 88.5.4 → 89.0.0

package/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -65,12 +65,6 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         inputWidth: inputWidth
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
-      // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
-      requestAnimationFrame(function () {
-        _this.props.updatePosition();
-      });
-    });
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {
       _this.props.onFocus(event);
       _this.setState({
@@ -111,10 +105,6 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate(prevProps) {
       if (prevProps.searchValue !== this.props.searchValue) {
         this.updateInputSize(this.props.searchValue);
-
-        // We need to update the position of everything if the user enters enough input to change
-        // the size of the input.
-        this.updatePosition();
       }
     }
   }, {
@@ -140,7 +130,6 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         searchValue = _this$props3.searchValue,
         selectedOptions = _this$props3.selectedOptions,
         singleSelectionProp = _this$props3.singleSelection,
-        toggleButtonRef = _this$props3.toggleButtonRef,
         value = _this$props3.value,
         prepend = _this$props3.prepend,
         append = _this$props3.append,
@@ -207,7 +196,6 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
           'data-test-subj': 'comboBoxToggleListButton',
           disabled: isDisabled,
           onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
-          ref: toggleButtonRef,
           side: 'right',
           tabIndex: -1,
           type: 'arrowDown'
@@ -322,7 +310,6 @@ EuiComboBoxInput.propTypes = {
     asPlainText: PropTypes.bool
   }).isRequired]),
   toggleButtonRef: PropTypes.any,
-  updatePosition: PropTypes.func.isRequired,
   value: PropTypes.string,
   prepend: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
   append: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),

package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -1,9 +1,10 @@
-var _excluded = ["key", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps"],
-  _excluded2 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isCaseSensitive", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "optionRef", "options", "position", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "updatePosition", "width", "delimiter", "zIndex", "style", "truncationProps", "listboxAriaLabel"];
+var _excluded = ["children"],
+  _excluded2 = ["key", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps"],
+  _excluded3 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isCaseSensitive", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "options", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "delimiter", "truncationProps", "listboxAriaLabel"];
 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 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 _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; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -40,8 +41,8 @@ import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
 import { EuiBadge } from '../../badge';
-import { EuiPopoverPanel } from '../../popover/popover_panel';
 import { EuiTextTruncate } from '../../text_truncate';
+import { EuiInputPopoverWidthContext } from '../../popover/input_popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var hitEnterBadge = ___EmotionJSX(EuiBadge, {
   className: "euiComboBoxOption__enterBadge",
@@ -59,43 +60,25 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "listRefInstance", null);
     _defineProperty(_assertThisInitialized(_this), "listRef", null);
-    _defineProperty(_assertThisInitialized(_this), "listBoxRef", null);
-    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
-      // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
-      requestAnimationFrame(function () {
-        _this.props.updatePosition(_this.listRefInstance);
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "closeListOnScroll", function (event) {
-      // Close the list when a scroll event happens, but not if the scroll happened in the options list.
-      // This mirrors Firefox's approach of auto-closing `select` elements onscroll.
-      if (_this.listRefInstance && event.target && _this.listRefInstance.contains(event.target) === false) {
-        _this.props.onCloseList(event);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "listRefCallback", function (ref) {
-      _this.props.listRef(ref);
-      _this.listRefInstance = ref;
-    });
     _defineProperty(_assertThisInitialized(_this), "setListRef", function (ref) {
       _this.listRef = ref;
     });
-    _defineProperty(_assertThisInitialized(_this), "setListBoxRef", function (ref) {
-      _this.listBoxRef = ref;
-      if (ref) {
-        ref.setAttribute('aria-label', _this.props.listboxAriaLabel);
-        ref.setAttribute('id', _this.props.rootId('listbox'));
-        ref.setAttribute('role', 'listbox');
-        ref.setAttribute('tabIndex', '0');
-      }
+    _defineProperty(_assertThisInitialized(_this), "ListInnerElement", function (_ref) {
+      var children = _ref.children,
+        rest = _objectWithoutProperties(_ref, _excluded);
+      return ___EmotionJSX("div", _extends({}, rest, {
+        "aria-label": _this.props.listboxAriaLabel,
+        id: _this.props.rootId('listbox'),
+        role: "listbox",
+        tabIndex: "0"
+      }), children);
     });
-    _defineProperty(_assertThisInitialized(_this), "ListRow", function (_ref) {
+    _defineProperty(_assertThisInitialized(_this), "ListRow", function (_ref2) {
       var _option$key;
-      var data = _ref.data,
-        index = _ref.index,
-        style = _ref.style;
+      var data = _ref2.data,
+        index = _ref2.index,
+        style = _ref2.style;
       var option = data[index];
       var key = option.key,
         isGroupLabelOption = option.isGroupLabelOption,
@@ -104,12 +87,11 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         prepend = option.prepend,
         append = option.append,
         _truncationProps = option.truncationProps,
-        rest = _objectWithoutProperties(option, _excluded);
+        rest = _objectWithoutProperties(option, _excluded2);
       var _this$props = _this.props,
         singleSelection = _this$props.singleSelection,
         selectedOptions = _this$props.selectedOptions,
         onOptionClick = _this$props.onOptionClick,
-        optionRef = _this$props.optionRef,
         activeOptionIndex = _this$props.activeOptionIndex,
         renderOption = _this$props.renderOption,
         searchValue = _this$props.searchValue,
@@ -137,7 +119,6 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
             onOptionClick(option);
           }
         },
-        ref: optionRef.bind(_assertThisInitialized(_this), index),
         isFocused: optionIsFocused,
         checked: checked,
         showIcons: singleSelection ? true : false,
@@ -196,51 +177,12 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(EuiComboBoxOptionsList, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      // Wait a frame, otherwise moving focus from one combo box to another will result in the class
-      // being removed from the body.
-      requestAnimationFrame(function () {
-        document.body.classList.add('euiBody-hasPortalContent');
-      });
-      this.updatePosition();
-      window.addEventListener('resize', this.updatePosition);
-
-      // Firefox will trigger a scroll event in many common situations when the options list div is appended
-      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
-      setTimeout(function () {
-        window.addEventListener('scroll', _this2.closeListOnScroll, {
-          passive: true,
-          // for better performance as we won't call preventDefault
-          capture: true // scroll events don't bubble, they must be captured instead
-        });
-      }, 500);
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var options = prevProps.options,
-        selectedOptions = prevProps.selectedOptions,
-        searchValue = prevProps.searchValue;
-
-      // We don't compare matchingOptions because that will result in a loop.
-      if (searchValue !== this.props.searchValue || options !== this.props.options || selectedOptions !== this.props.selectedOptions) {
-        this.updatePosition();
-      }
       if (this.listRef && typeof this.props.activeOptionIndex !== 'undefined' && this.props.activeOptionIndex !== prevProps.activeOptionIndex) {
         this.listRef.scrollToItem(this.props.activeOptionIndex, 'auto');
       }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.body.classList.remove('euiBody-hasPortalContent');
-      window.removeEventListener('resize', this.updatePosition);
-      window.removeEventListener('scroll', this.closeListOnScroll, {
-        capture: true
-      });
-    }
   }, {
     key: "render",
     value: function render() {
@@ -260,10 +202,7 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         onOptionClick = _this$props2.onOptionClick,
         onOptionEnterKey = _this$props2.onOptionEnterKey,
         onScroll = _this$props2.onScroll,
-        optionRef = _this$props2.optionRef,
         options = _this$props2.options,
-        _this$props2$position = _this$props2.position,
-        position = _this$props2$position === void 0 ? 'bottom' : _this$props2$position,
         renderOption = _this$props2.renderOption,
         rootId = _this$props2.rootId,
         rowHeight = _this$props2.rowHeight,
@@ -271,14 +210,10 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         searchValue = _this$props2.searchValue,
         selectedOptions = _this$props2.selectedOptions,
         singleSelection = _this$props2.singleSelection,
-        updatePosition = _this$props2.updatePosition,
-        width = _this$props2.width,
         delimiter = _this$props2.delimiter,
-        zIndex = _this$props2.zIndex,
-        style = _this$props2.style,
         truncationProps = _this$props2.truncationProps,
         listboxAriaLabel = _this$props2.listboxAriaLabel,
-        rest = _objectWithoutProperties(_this$props2, _excluded2);
+        rest = _objectWithoutProperties(_this$props2, _excluded3);
       var emptyStateContent;
       if (isLoading) {
         emptyStateContent = ___EmotionJSX(EuiFlexGroup, {
@@ -375,43 +310,29 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
       var numVisibleOptions = matchingOptions.length < 7 ? matchingOptions.length : 7;
       var height = numVisibleOptions * (rowHeight + 1); // Add one for the border
 
-      // bounded by max-height of euiComboBoxOptionsList__rowWrap
+      // bounded by max-height of .euiComboBoxOptionsList
       var boundedHeight = height > 200 ? 200 : height;
       var optionsList = ___EmotionJSX(FixedSizeList, {
+        className: "euiComboBoxOptionsList__virtualization",
         height: boundedHeight,
         onScroll: onScroll,
         itemCount: matchingOptions.length,
         itemSize: rowHeight,
         itemData: matchingOptions,
         ref: this.setListRef,
-        innerRef: this.setListBoxRef,
-        width: width
+        innerElementType: this.ListInnerElement,
+        width: this.context
       }, this.ListRow);
-
-      /**
-       * Reusing the EuiPopover__panel classes to help with consistency/maintenance.
-       * But this should really be converted to user the popover component.
-       */
-      var classes = classNames('euiComboBoxOptionsList');
-      return ___EmotionJSX(EuiPopoverPanel, _extends({
-        paddingSize: "none",
-        hasShadow: false,
-        className: classes,
-        panelRef: this.listRefCallback,
+      return ___EmotionJSX("div", _extends({
+        className: "euiComboBoxOptionsList",
         "data-test-subj": classNames('comboBoxOptionsList', dataTestSubj),
-        style: _objectSpread(_objectSpread({}, style), {}, {
-          zIndex: zIndex
-        }),
-        isOpen: true,
-        isAttached: true,
-        position: position
-      }, rest), ___EmotionJSX("div", {
-        className: "euiComboBoxOptionsList__rowWrap"
-      }, emptyState || optionsList));
+        ref: listRef
+      }, rest), emptyState || optionsList);
     }
   }]);
   return EuiComboBoxOptionsList;
 }(Component);
+_defineProperty(EuiComboBoxOptionsList, "contextType", EuiInputPopoverWidthContext);
 _defineProperty(EuiComboBoxOptionsList, "defaultProps", {
   'data-test-subj': '',
   rowHeight: 29,
@@ -427,9 +348,9 @@ EuiComboBoxOptionsList.propTypes = {
   areAllOptionsSelected: PropTypes.bool,
   listboxAriaLabel: PropTypes.string.isRequired,
   /**
-       * Creates a custom text option. You can use `{searchValue}` inside your string to better customize your text.
-       * It won't show if there's no onCreateOption.
-       */
+     * Creates a custom text option. You can use `{searchValue}` inside your string to better customize your text.
+     * It won't show if there's no onCreateOption.
+     */
   customOptionText: PropTypes.string,
   fullWidth: PropTypes.bool,
   getSelectedOptionForSearchValue: PropTypes.func,
@@ -468,10 +389,9 @@ EuiComboBoxOptionsList.propTypes = {
   onOptionClick: PropTypes.func,
   onOptionEnterKey: PropTypes.func,
   onScroll: PropTypes.any,
-  optionRef: PropTypes.func.isRequired,
   /**
-       * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
-       */
+     * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
+     */
   options: PropTypes.arrayOf(PropTypes.shape({
     isGroupLabelOption: PropTypes.bool,
     label: PropTypes.string.isRequired,
@@ -499,7 +419,6 @@ EuiComboBoxOptionsList.propTypes = {
     "data-test-subj": PropTypes.string,
     css: PropTypes.any
   }).isRequired).isRequired,
-  position: PropTypes.oneOf(["top", "bottom"]),
   renderOption: PropTypes.func,
   rootId: PropTypes.any.isRequired,
   rowHeight: PropTypes.number.isRequired,
@@ -532,12 +451,9 @@ EuiComboBoxOptionsList.propTypes = {
     "data-test-subj": PropTypes.string,
     css: PropTypes.any
   }).isRequired).isRequired,
-  updatePosition: PropTypes.func.isRequired,
-  width: PropTypes.number.isRequired,
   singleSelection: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
     asPlainText: PropTypes.bool
   }).isRequired]),
   delimiter: PropTypes.string,
-  zIndex: PropTypes.number,
   truncationProps: PropTypes.any
 };

package/es/components/context_menu/context_menu_panel.js

@@ -31,7 +31,7 @@ import { tabbable } from 'tabbable';
 import { keysOf } from '../common';
 import { EuiIcon } from '../icon';
 import { EuiResizeObserver } from '../observer/resize_observer';
-import { cascadingMenuKeys } from '../../services';
+import { keys } from '../../services';
 import { EuiContextMenuItem } from './context_menu_item';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var titleSizeToClassNameMap = {
@@ -106,7 +106,7 @@ export var EuiContextMenuPanel = /*#__PURE__*/function (_Component) {
         onClose = _this$props.onClose,
         showPreviousPanel = _this$props.showPreviousPanel;
       if (onClose && (items !== null && items !== void 0 && items.length || document.activeElement === _this.backButton || document.activeElement === _this.panel)) {
-        if (event.key === cascadingMenuKeys.ARROW_LEFT) {
+        if (event.key === keys.ARROW_LEFT) {
           if (showPreviousPanel) {
             event.preventDefault();
             event.stopPropagation();
@@ -119,7 +119,7 @@ export var EuiContextMenuPanel = /*#__PURE__*/function (_Component) {
       }
       if (items !== null && items !== void 0 && items.length) {
         switch (event.key) {
-          case cascadingMenuKeys.TAB:
+          case keys.TAB:
             requestAnimationFrame(function () {
               // NOTE: document.activeElement is stale if not wrapped in requestAnimationFrame
               var focusedItemIndex = _this.state.menuItems.indexOf(document.activeElement);
@@ -130,21 +130,21 @@ export var EuiContextMenuPanel = /*#__PURE__*/function (_Component) {
               });
             });
             break;
-          case cascadingMenuKeys.ARROW_UP:
+          case keys.ARROW_UP:
             event.preventDefault();
             _this.focusMenuItem('up');
             if (_this.props.onUseKeyboardToNavigate) {
               _this.props.onUseKeyboardToNavigate();
             }
             break;
-          case cascadingMenuKeys.ARROW_DOWN:
+          case keys.ARROW_DOWN:
             event.preventDefault();
             _this.focusMenuItem('down');
             if (_this.props.onUseKeyboardToNavigate) {
               _this.props.onUseKeyboardToNavigate();
             }
             break;
-          case cascadingMenuKeys.ARROW_RIGHT:
+          case keys.ARROW_RIGHT:
             if (_this.props.showNextPanel) {
               event.preventDefault();
               _this.props.showNextPanel(onClose && _this.state.focusedItemIndex ? _this.state.focusedItemIndex - 1 // Account for panel title back button

package/es/components/flex/flex_grid.styles.js

@@ -111,7 +111,7 @@ export var euiFlexGridStyles = function euiFlexGridStyles(euiThemeContext) {
     gutterSizes: {
       none: /*#__PURE__*/css(";label:none;"),
       s: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:s;"),
-      m: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:m;"),
+      m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),
       l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;"),
       xl: /*#__PURE__*/css("gap:", euiTheme.size.xl, ";;label:xl;")
     },

package/es/components/flex/flex_group.styles.js

@@ -155,7 +155,7 @@ export var euiFlexGroupStyles = function euiFlexGroupStyles(euiThemeContext) {
       none: /*#__PURE__*/css(";label:none;"),
       xs: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:xs;"),
       s: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:s;"),
-      m: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:m;"),
+      m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),
       l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;"),
       xl: /*#__PURE__*/css("gap:", euiTheme.size.xxl, ";;label:xl;")
     },

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", "aria-describedby"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "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); }
@@ -26,7 +26,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useRef, useState, forwardRef } from 'react';
+import React, { useEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
 import classnames from 'classnames';
 import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiTheme, useGeneratedHtmlId } from '../../services';
 import { logicalStyle } from '../../global_styling';
@@ -78,8 +78,9 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     outsideClickCloses = _ref.outsideClickCloses,
     _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
     pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? 'l' : _ref$pushMinBreakpoin,
-    _ref$focusTrapProps = _ref.focusTrapProps,
-    _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
+    _ref$pushAnimation = _ref.pushAnimation,
+    pushAnimation = _ref$pushAnimation === void 0 ? false : _ref$pushAnimation,
+    _focusTrapProps = _ref.focusTrapProps,
     _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
     includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
     _ariaDescribedBy = _ref['aria-describedby'],
@@ -107,18 +108,16 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     /**
      * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
      */
-    if (type === 'push') {
-      if (isPushed) {
-        if (side === 'right') {
-          document.body.style.paddingRight = "".concat(dimensions.width, "px");
-        } else if (side === 'left') {
-          document.body.style.paddingLeft = "".concat(dimensions.width, "px");
-        }
+    if (isPushed) {
+      if (side === 'right') {
+        document.body.style.paddingRight = "".concat(dimensions.width, "px");
+      } else if (side === 'left') {
+        document.body.style.paddingLeft = "".concat(dimensions.width, "px");
       }
     }
     return function () {
       document.body.classList.remove('euiBody--hasFlyout');
-      if (type === 'push') {
+      if (isPushed) {
         if (side === 'right') {
           document.body.style.paddingRight = '';
         } else if (side === 'left') {
@@ -126,38 +125,36 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }
       }
     };
-  }, [type, side, dimensions, isPushed]);
+  }, [side, dimensions, isPushed]);
 
   /**
    * ESC key closes flyout (always?)
    */
-  var onKeyDown = function onKeyDown(event) {
+  var onKeyDown = useCallback(function (event) {
     if (!isPushed && event.key === keys.ESCAPE) {
       event.preventDefault();
       onClose(event);
     }
-  };
+  }, [onClose, isPushed]);
 
   /**
    * Set inline styles
    */
-  var newStyle = style;
-  if (typeof maxWidth !== 'boolean') {
-    newStyle = _objectSpread(_objectSpread({}, newStyle), logicalStyle('max-width', maxWidth));
-  }
-  if (!isEuiFlyoutSizeNamed(size)) {
-    newStyle = _objectSpread(_objectSpread({}, newStyle), logicalStyle('width', size));
-  }
+  var inlineStyles = useMemo(function () {
+    var widthStyle = !isEuiFlyoutSizeNamed(size) && logicalStyle('width', size);
+    var maxWidthStyle = typeof maxWidth !== 'boolean' && logicalStyle('max-width', maxWidth);
+    return _objectSpread(_objectSpread(_objectSpread({}, style), widthStyle), maxWidthStyle);
+  }, [style, maxWidth, size]);
   var euiTheme = useEuiTheme();
   var styles = euiFlyoutStyles(euiTheme);
-  var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], isEuiFlyoutSizeNamed(size) && styles[size], maxWidth === false && styles.noMaxWidth, styles[type], type === 'push' && styles.pushSide[side], styles[side]];
+  var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], isEuiFlyoutSizeNamed(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay, isPushed && styles.push[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
   var classes = classnames('euiFlyout', className);
-  var closeButton;
-  if (onClose && !hideCloseButton) {
+  var closeButton = useMemo(function () {
+    if (hideCloseButton || !onClose) return null;
     var closeButtonClasses = classnames('euiFlyout__closeButton', closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.className);
     var closeButtonStyles = euiFlyoutCloseButtonStyles(euiTheme);
     var closeButtonCssStyles = [closeButtonStyles.euiFlyout__closeButton, closeButtonStyles[closeButtonPosition], closeButtonPosition === 'outside' && closeButtonStyles.outsideSide[side], closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.css];
-    closeButton = ___EmotionJSX(EuiI18n, {
+    return ___EmotionJSX(EuiI18n, {
       token: "euiFlyout.closeAriaLabel",
       default: "Close this dialog"
     }, function (closeAriaLabel) {
@@ -177,7 +174,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }
       }));
     });
-  }
+  }, [onClose, hideCloseButton, closeButtonPosition, closeButtonProps, side, euiTheme]);
 
   /*
    * If not disabled, automatically add fixed EuiHeaders as shards
@@ -207,9 +204,11 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       });
     }
   }, [includeFixedHeadersInFocusTrap, resizeRef]);
-  var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
-    shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray(_focusTrapProps.shards || []))
-  });
+  var focusTrapProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+      shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+    });
+  }, [fixedHeaders, _focusTrapProps]);
 
   /*
    * Provide meaningful screen reader instructions/details
@@ -242,7 +241,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
    * or if `outsideClickCloses={true}` to close on clicks that target
    * (both mousedown and mouseup) the overlay mask.
    */
-  var onClickOutside = function onClickOutside(event) {
+  var onClickOutside = useCallback(function (event) {
     // Do not close the flyout for any external click
     if (outsideClickCloses === false) return undefined;
     if (hasOverlayMask) {
@@ -254,7 +253,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
     // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
     return undefined;
-  };
+  }, [onClose, hasOverlayMask, outsideClickCloses]);
   var flyout = ___EmotionJSX(EuiFocusTrap, _extends({
     disabled: isPushed,
     scrollLock: hasOverlayMask,
@@ -263,7 +262,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, focusTrapProps), ___EmotionJSX(Element, _extends({
     className: classes,
     css: cssStyles,
-    style: newStyle,
+    style: inlineStyles,
     ref: setRef
   }, rest, {
     role: !isPushed ? 'dialog' : rest.role,

package/es/components/flyout/flyout.styles.js

@@ -1,5 +1,6 @@
 var _templateObject, _templateObject2;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,6 +30,14 @@ export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiT
     }
   };
 };
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "yokctr-noAnimation",
+  styles: "animation-duration:0s!important;label:noAnimation;"
+} : {
+  name: "yokctr-noAnimation",
+  styles: "animation-duration:0s!important;label:noAnimation;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -44,10 +53,11 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), ";;label:overlay;"),
-    push: /*#__PURE__*/css("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
-    pushSide: {
+    push: {
+      push: /*#__PURE__*/css("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
       right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thick), ";;label:right;"),
-      left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thick), ";;label:left;")
+      left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thick), ";;label:left;"),
+      noAnimation: _ref
     },
     // Padding
     paddingSizes: {

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

@@ -791,6 +791,10 @@ EuiDualRangeClass.propTypes = {
        * Alignment of the popover relative to the input
        */
     anchorPosition: PropTypes.oneOf(["downLeft", "downRight", "downCenter"]),
+    /**
+       * Allows automatically closing the input popover on page scroll
+       */
+    closeOnScroll: PropTypes.bool,
     inputRef: PropTypes.any,
     onPanelResize: PropTypes.func,
     /**

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

@@ -385,6 +385,10 @@ EuiRangeClass.propTypes = {
        * Alignment of the popover relative to the input
        */
     anchorPosition: PropTypes.oneOf(["downLeft", "downRight", "downCenter"]),
+    /**
+       * Allows automatically closing the input popover on page scroll
+       */
+    closeOnScroll: PropTypes.bool,
     inputRef: PropTypes.any,
     onPanelResize: PropTypes.func,
     /**

package/es/components/index.js

@@ -80,7 +80,6 @@ export * from './skeleton';
 export * from './spacer';
 export * from './stat';
 export * from './steps';
-export * from './suggest';
 export * from './table';
 export * from './token';
 export * from './tour';