@elastic/eui 88.5.4 → 89.0.0

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

@@ -67,12 +67,6 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         inputWidth: inputWidth
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function () {
-      // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
-      requestAnimationFrame(function () {
-        _this.props.updatePosition();
-      });
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFocus", function (event) {
       _this.props.onFocus(event);
       _this.setState({
@@ -113,10 +107,6 @@ 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();
       }
     }
   }, {
@@ -142,7 +132,6 @@ 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,
@@ -209,7 +198,6 @@ 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/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -27,11 +27,12 @@ var _combo_box_title = require("./combo_box_title");
 var _i18n = require("../../i18n");
 var _filter_select_item = require("../../filter_group/filter_select_item");
 var _badge = require("../../badge");
-var _popover_panel = require("../../popover/popover_panel");
 var _text_truncate = require("../../text_truncate");
+var _input_popover = require("../../popover/input_popover");
 var _react2 = require("@emotion/react");
-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 _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 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; }
@@ -60,43 +61,25 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRefInstance", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRef", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listBoxRef", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listRefCallback", function (ref) {
-      _this.props.listRef(ref);
-      _this.listRefInstance = ref;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setListRef", function (ref) {
       _this.listRef = ref;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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');
-      }
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ListInnerElement", function (_ref) {
+      var children = _ref.children,
+        rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
+        "aria-label": _this.props.listboxAriaLabel,
+        id: _this.props.rootId('listbox'),
+        role: "listbox",
+        tabIndex: "0"
+      }), children);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ListRow", function (_ref) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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,
@@ -105,12 +88,11 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         prepend = option.prepend,
         append = option.append,
         _truncationProps = option.truncationProps,
-        rest = (0, _objectWithoutProperties2.default)(option, _excluded);
+        rest = (0, _objectWithoutProperties2.default)(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,
@@ -138,7 +120,6 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
             onOptionClick(option);
           }
         },
-        ref: optionRef.bind((0, _assertThisInitialized2.default)(_this), index),
         isFocused: optionIsFocused,
         checked: checked,
         showIcons: singleSelection ? true : false,
@@ -197,51 +178,12 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
     return _this;
   }
   (0, _createClass2.default)(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() {
@@ -261,10 +203,7 @@ 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,
@@ -272,14 +211,10 @@ 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 = (0, _objectWithoutProperties2.default)(_this$props2, _excluded2);
+        rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded3);
       var emptyStateContent;
       if (isLoading) {
         emptyStateContent = (0, _react2.jsx)(_flex.EuiFlexGroup, {
@@ -376,44 +311,30 @@ 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 = (0, _react2.jsx)(_reactWindow.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 = (0, _classnames.default)('euiComboBoxOptionsList');
-      return (0, _react2.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({
-        paddingSize: "none",
-        hasShadow: false,
-        className: classes,
-        panelRef: this.listRefCallback,
+      return (0, _react2.jsx)("div", (0, _extends2.default)({
+        className: "euiComboBoxOptionsList",
         "data-test-subj": (0, _classnames.default)('comboBoxOptionsList', dataTestSubj),
-        style: _objectSpread(_objectSpread({}, style), {}, {
-          zIndex: zIndex
-        }),
-        isOpen: true,
-        isAttached: true,
-        position: position
-      }, rest), (0, _react2.jsx)("div", {
-        className: "euiComboBoxOptionsList__rowWrap"
-      }, emptyState || optionsList));
+        ref: listRef
+      }, rest), emptyState || optionsList);
     }
   }]);
   return EuiComboBoxOptionsList;
 }(_react.Component);
 exports.EuiComboBoxOptionsList = EuiComboBoxOptionsList;
+(0, _defineProperty2.default)(EuiComboBoxOptionsList, "contextType", _input_popover.EuiInputPopoverWidthContext);
 (0, _defineProperty2.default)(EuiComboBoxOptionsList, "defaultProps", {
   'data-test-subj': '',
   rowHeight: 29,

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

@@ -108,7 +108,7 @@ 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 === _services.cascadingMenuKeys.ARROW_LEFT) {
+        if (event.key === _services.keys.ARROW_LEFT) {
           if (showPreviousPanel) {
             event.preventDefault();
             event.stopPropagation();
@@ -121,7 +121,7 @@ var EuiContextMenuPanel = /*#__PURE__*/function (_Component) {
       }
       if (items !== null && items !== void 0 && items.length) {
         switch (event.key) {
-          case _services.cascadingMenuKeys.TAB:
+          case _services.keys.TAB:
             requestAnimationFrame(function () {
               // NOTE: document.activeElement is stale if not wrapped in requestAnimationFrame
               var focusedItemIndex = _this.state.menuItems.indexOf(document.activeElement);
@@ -132,21 +132,21 @@ var EuiContextMenuPanel = /*#__PURE__*/function (_Component) {
               });
             });
             break;
-          case _services.cascadingMenuKeys.ARROW_UP:
+          case _services.keys.ARROW_UP:
             event.preventDefault();
             _this.focusMenuItem('up');
             if (_this.props.onUseKeyboardToNavigate) {
               _this.props.onUseKeyboardToNavigate();
             }
             break;
-          case _services.cascadingMenuKeys.ARROW_DOWN:
+          case _services.keys.ARROW_DOWN:
             event.preventDefault();
             _this.focusMenuItem('down');
             if (_this.props.onUseKeyboardToNavigate) {
               _this.props.onUseKeyboardToNavigate();
             }
             break;
-          case _services.cascadingMenuKeys.ARROW_RIGHT:
+          case _services.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/lib/components/flex/flex_grid.styles.js

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

package/optimize/lib/components/flex/flex_group.styles.js

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

package/optimize/lib/components/flyout/flyout.js

@@ -24,7 +24,7 @@ var _portal = require("../portal");
 var _accessibility = require("../accessibility");
 var _flyout = require("./flyout.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -79,8 +79,9 @@ var EuiFlyout = /*#__PURE__*/(0, _react.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'],
@@ -108,18 +109,16 @@ var EuiFlyout = /*#__PURE__*/(0, _react.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') {
@@ -127,38 +126,36 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }
       }
     };
-  }, [type, side, dimensions, isPushed]);
+  }, [side, dimensions, isPushed]);
 
   /**
    * ESC key closes flyout (always?)
    */
-  var onKeyDown = function onKeyDown(event) {
+  var onKeyDown = (0, _react.useCallback)(function (event) {
     if (!isPushed && event.key === _services.keys.ESCAPE) {
       event.preventDefault();
       onClose(event);
     }
-  };
+  }, [onClose, isPushed]);
 
   /**
    * Set inline styles
    */
-  var newStyle = style;
-  if (typeof maxWidth !== 'boolean') {
-    newStyle = _objectSpread(_objectSpread({}, newStyle), (0, _global_styling.logicalStyle)('max-width', maxWidth));
-  }
-  if (!isEuiFlyoutSizeNamed(size)) {
-    newStyle = _objectSpread(_objectSpread({}, newStyle), (0, _global_styling.logicalStyle)('width', size));
-  }
+  var inlineStyles = (0, _react.useMemo)(function () {
+    var widthStyle = !isEuiFlyoutSizeNamed(size) && (0, _global_styling.logicalStyle)('width', size);
+    var maxWidthStyle = typeof maxWidth !== 'boolean' && (0, _global_styling.logicalStyle)('max-width', maxWidth);
+    return _objectSpread(_objectSpread(_objectSpread({}, style), widthStyle), maxWidthStyle);
+  }, [style, maxWidth, size]);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _flyout.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 = (0, _classnames.default)('euiFlyout', className);
-  var closeButton;
-  if (onClose && !hideCloseButton) {
+  var closeButton = (0, _react.useMemo)(function () {
+    if (hideCloseButton || !onClose) return null;
     var closeButtonClasses = (0, _classnames.default)('euiFlyout__closeButton', closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.className);
     var closeButtonStyles = (0, _flyout.euiFlyoutCloseButtonStyles)(euiTheme);
     var closeButtonCssStyles = [closeButtonStyles.euiFlyout__closeButton, closeButtonStyles[closeButtonPosition], closeButtonPosition === 'outside' && closeButtonStyles.outsideSide[side], closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.css];
-    closeButton = (0, _react2.jsx)(_i18n.EuiI18n, {
+    return (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiFlyout.closeAriaLabel",
       default: "Close this dialog"
     }, function (closeAriaLabel) {
@@ -178,7 +175,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }
       }));
     });
-  }
+  }, [onClose, hideCloseButton, closeButtonPosition, closeButtonProps, side, euiTheme]);
 
   /*
    * If not disabled, automatically add fixed EuiHeaders as shards
@@ -208,9 +205,11 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       });
     }
   }, [includeFixedHeadersInFocusTrap, resizeRef]);
-  var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
-    shards: [].concat((0, _toConsumableArray2.default)(fixedHeaders), (0, _toConsumableArray2.default)(_focusTrapProps.shards || []))
-  });
+  var focusTrapProps = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+      shards: [].concat((0, _toConsumableArray2.default)(fixedHeaders), (0, _toConsumableArray2.default)((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+    });
+  }, [fixedHeaders, _focusTrapProps]);
 
   /*
    * Provide meaningful screen reader instructions/details
@@ -243,7 +242,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.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 = (0, _react.useCallback)(function (event) {
     // Do not close the flyout for any external click
     if (outsideClickCloses === false) return undefined;
     if (hasOverlayMask) {
@@ -255,7 +254,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.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 = (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
     disabled: isPushed,
     scrollLock: hasOverlayMask,
@@ -264,7 +263,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, focusTrapProps), (0, _react2.jsx)(Element, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
-    style: newStyle,
+    style: inlineStyles,
     ref: setRef
   }, rest, {
     role: !isPushed ? 'dialog' : rest.role,

package/optimize/lib/components/flyout/flyout.styles.js

@@ -12,13 +12,13 @@ var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _color = require("../../services/color");
 var _form = require("../form/form.styles");
 var _templateObject, _templateObject2;
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
+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
+                                                                                                                                                                                                                                                                                           * 2.0 and the Server Side Public License, v 1; you may not use this file except
+                                                                                                                                                                                                                                                                                           * in compliance with, at your election, the Elastic License 2.0 or the Server
+                                                                                                                                                                                                                                                                                           * Side Public License, v 1.
+                                                                                                                                                                                                                                                                                           */
 var euiFlyoutSlideInRight = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
 exports.euiFlyoutSlideInRight = euiFlyoutSlideInRight;
 var euiFlyoutSlideInLeft = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
@@ -38,6 +38,14 @@ var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeCon
   };
 };
 exports.euiFlyoutCloseButtonStyles = euiFlyoutCloseButtonStyles;
+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__
+};
 var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -53,10 +61,11 @@ var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), ";;label:overlay;"),
-    push: /*#__PURE__*/(0, _react.css)("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
-    pushSide: {
+    push: {
+      push: /*#__PURE__*/(0, _react.css)("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
       right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thick), ";;label:right;"),
-      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-right', euiTheme.border.thick), ";;label:left;")
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-right', euiTheme.border.thick), ";;label:left;"),
+      noAnimation: _ref
     },
     // Padding
     paddingSizes: {

package/optimize/lib/components/index.js

@@ -817,17 +817,6 @@ Object.keys(_steps).forEach(function (key) {
     }
   });
 });
-var _suggest = require("./suggest");
-Object.keys(_suggest).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _suggest[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _suggest[key];
-    }
-  });
-});
 var _table = require("./table");
 Object.keys(_table).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiInputPopover = void 0;
+exports.EuiInputPopoverWidthContext = exports.EuiInputPopover = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -20,7 +20,7 @@ var _resize_observer = require("../observer/resize_observer");
 var _focus_trap = require("../focus_trap");
 var _form = require("../form/form.styles");
 var _popover = require("./popover");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,11 +32,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 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) { (0, _defineProperty2.default)(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; }
+// Used by child components that want to know the parent popover width
+var EuiInputPopoverWidthContext = /*#__PURE__*/(0, _react.createContext)(0);
+exports.EuiInputPopoverWidthContext = EuiInputPopoverWidthContext;
 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,
@@ -117,6 +122,40 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
       }
     }
   }, [disableFocusTrap, closePopover, panelPropsOnKeyDown]);
+
+  /**
+   * Optional close on scroll behavior
+   */
+
+  (0, _react.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 (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
     css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     repositionToCrossAxis: false,
@@ -134,7 +173,9 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   }), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
-  }, focusTrapProps), children));
+  }, focusTrapProps), (0, _react2.jsx)(EuiInputPopoverWidthContext.Provider, {
+    value: panelWidth
+  }, children)));
 };
 exports.EuiInputPopover = EuiInputPopover;
 EuiInputPopover.defaultProps = {