@elastic/eui 88.5.4 → 89.0.0

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

@@ -59,12 +59,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({
@@ -105,10 +99,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();
       }
     }
   }, {
@@ -134,7 +124,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,
@@ -201,7 +190,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'

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

@@ -7,8 +7,9 @@ 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 = ["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 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); }; }
@@ -33,8 +34,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",
@@ -52,43 +53,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,
@@ -97,12 +80,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,
@@ -130,7 +112,6 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
             onOptionClick(option);
           }
         },
-        ref: optionRef.bind(_assertThisInitialized(_this), index),
         isFocused: optionIsFocused,
         checked: checked,
         showIcons: singleSelection ? true : false,
@@ -189,51 +170,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() {
@@ -253,10 +195,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,
@@ -264,14 +203,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, {
@@ -368,43 +303,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,

package/optimize/es/components/context_menu/context_menu_panel.js

@@ -24,7 +24,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 = {
@@ -99,7 +99,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();
@@ -112,7 +112,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);
@@ -123,21 +123,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/optimize/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/optimize/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/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", "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 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; }
 /*
@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * 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';
@@ -66,8 +66,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'],
@@ -95,18 +96,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') {
@@ -114,38 +113,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) {
@@ -165,7 +162,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }
       }));
     });
-  }
+  }, [onClose, hideCloseButton, closeButtonPosition, closeButtonProps, side, euiTheme]);
 
   /*
    * If not disabled, automatically add fixed EuiHeaders as shards
@@ -195,9 +192,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
@@ -230,7 +229,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) {
@@ -242,7 +241,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,
@@ -251,7 +250,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/optimize/es/components/flyout/flyout.styles.js

@@ -1,5 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+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/optimize/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';

package/optimize/es/components/popover/input_popover.js

@@ -2,7 +2,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 = ["children", "className", "closePopover", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "closeOnScroll", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 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; }
 /*
@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, createContext } from 'react';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { tabbable } from 'tabbable';
@@ -24,11 +24,15 @@ import { EuiFocusTrap } from '../focus_trap';
 import { euiFormVariables } from '../form/form.styles';
 import { EuiPopover } from './popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+// Used by child components that want to know the parent popover width
+export var EuiInputPopoverWidthContext = /*#__PURE__*/createContext(0);
 export var EuiInputPopover = function EuiInputPopover(_ref) {
   var _props$panelProps;
   var children = _ref.children,
     className = _ref.className,
     closePopover = _ref.closePopover,
+    _ref$closeOnScroll = _ref.closeOnScroll,
+    closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
     focusTrapProps = _ref.focusTrapProps,
@@ -109,6 +113,40 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
       }
     }
   }, [disableFocusTrap, closePopover, panelPropsOnKeyDown]);
+
+  /**
+   * Optional close on scroll behavior
+   */
+
+  useEffect(function () {
+    // When the popover opens, add a scroll listener to the page (& remove it after)
+    if (closeOnScroll && panelEl) {
+      // Close the popover, but only if the scroll event occurs outside the input or the popover itself
+      var closePopoverOnScroll = function closePopoverOnScroll(event) {
+        if (!panelEl || !inputEl || !event.target) return;
+        var scrollTarget = event.target;
+        if (panelEl.contains(scrollTarget) === false && inputEl.contains(scrollTarget) === false) {
+          closePopover();
+        }
+      };
+
+      // 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
+      var timeoutId = setTimeout(function () {
+        window.addEventListener('scroll', closePopoverOnScroll, {
+          passive: true,
+          // for better performance as we won't call preventDefault
+          capture: true // scroll events don't bubble, they must be captured instead
+        });
+      }, 500);
+      return function () {
+        window.removeEventListener('scroll', closePopoverOnScroll, {
+          capture: true
+        });
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [closeOnScroll, closePopover, panelEl, inputEl]);
   return ___EmotionJSX(EuiPopover, _extends({
     css: /*#__PURE__*/css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     repositionToCrossAxis: false,
@@ -126,7 +164,9 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   }), ___EmotionJSX(EuiFocusTrap, _extends({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
-  }, focusTrapProps), children));
+  }, focusTrapProps), ___EmotionJSX(EuiInputPopoverWidthContext.Provider, {
+    value: panelWidth
+  }, children)));
 };
 EuiInputPopover.defaultProps = {
   anchorPosition: 'downLeft',