@elastic/eui 88.5.4 → 89.0.0

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

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "aria-label", "aria-labelledby"];
+var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "inputPopoverProps", "aria-label", "aria-labelledby"];
 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); }; }
@@ -26,9 +26,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  */
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
-import { getElementZIndex } from '../../services/popover';
-import { EuiPortal } from '../portal';
+import { htmlIdGenerator, keys } from '../../services';
+import { EuiInputPopover } from '../popover';
 import { EuiI18n } from '../i18n';
 import { getMatchingOptions, flattenOptionGroups, getSelectedOptionForSearchValue, transformForCaseSensitivity } from './matching_options';
 import { EuiComboBoxInput } from './combo_box_input/combo_box_input';
@@ -58,9 +57,6 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       activeOptionIndex: -1,
       hasFocus: false,
       isListOpen: false,
-      listElement: null,
-      listPosition: 'bottom',
-      listZIndex: undefined,
       matchingOptions: getMatchingOptions({
         options: _this.props.options,
         selectedOptions: _this.props.selectedOptions,
@@ -70,118 +66,43 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         showPrevSelected: Boolean(_this.props.singleSelection),
         sortMatchesBy: _this.props.sortMatchesBy
       }),
-      searchValue: initialSearchValue,
-      width: 0
+      searchValue: initialSearchValue
     });
-    _defineProperty(_assertThisInitialized(_this), "_isMounted", false);
     _defineProperty(_assertThisInitialized(_this), "rootId", htmlIdGenerator());
     // Refs
     _defineProperty(_assertThisInitialized(_this), "comboBoxRefInstance", null);
     _defineProperty(_assertThisInitialized(_this), "comboBoxRefCallback", function (ref) {
       _this.comboBoxRefInstance = ref;
-      if (_this.comboBoxRefInstance) {
-        var comboBoxBounds = _this.comboBoxRefInstance.getBoundingClientRect();
-        _this.setState({
-          width: comboBoxBounds.width
-        });
-      }
     });
     _defineProperty(_assertThisInitialized(_this), "searchInputRefInstance", null);
     _defineProperty(_assertThisInitialized(_this), "searchInputRefCallback", function (ref) {
+      var _this$props$inputRef, _this$props;
       _this.searchInputRefInstance = ref;
-      if (_this.props.inputRef) _this.props.inputRef(ref);
+      (_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, ref);
     });
     _defineProperty(_assertThisInitialized(_this), "listRefInstance", null);
     _defineProperty(_assertThisInitialized(_this), "listRefCallback", function (ref) {
-      if (_this.comboBoxRefInstance) {
-        // find the zIndex of the combobox relative to the page body
-        // and use that to depth-position the list box
-        // adds an extra `100` to provide some defense around neighboring elements' positioning
-        var listZIndex = getElementZIndex(_this.comboBoxRefInstance, document.body) + 100;
-        _this.setState({
-          listZIndex: listZIndex
-        });
-      }
       _this.listRefInstance = ref;
     });
-    _defineProperty(_assertThisInitialized(_this), "toggleButtonRefInstance", null);
-    _defineProperty(_assertThisInitialized(_this), "toggleButtonRefCallback", function (ref) {
-      _this.toggleButtonRefInstance = ref;
-    });
-    _defineProperty(_assertThisInitialized(_this), "optionsRefInstances", []);
-    _defineProperty(_assertThisInitialized(_this), "optionRefCallback", function (index, ref) {
-      _this.optionsRefInstances[index] = ref;
-    });
     _defineProperty(_assertThisInitialized(_this), "openList", function () {
       _this.setState({
         isListOpen: true
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "closeList", function (event) {
-      if (event && event.target === _this.searchInputRefInstance) {
-        // really long search values / custom entries triggers a scroll event on the input
-        // which the EuiComboBoxOptionsList passes through here
-        return;
-      }
+    _defineProperty(_assertThisInitialized(_this), "closeList", function () {
       _this.clearActiveOption();
       _this.setState({
-        listZIndex: undefined,
         isListOpen: false
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
-      var listElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.listElement;
-      if (!_this._isMounted) {
-        return;
-      }
-      if (!_this.state.isListOpen) {
-        return;
-      }
-      if (!listElement) {
-        return;
-      }
-
-      // it's possible that updateListPosition is called when listElement is becoming visible, but isn't yet
-      var listElementBounds = listElement.getBoundingClientRect();
-      if (listElementBounds.width === 0 || listElementBounds.height === 0) {
-        return;
-      }
-      if (!_this.comboBoxRefInstance) {
-        return;
-      }
-      var comboBoxBounds = _this.comboBoxRefInstance.getBoundingClientRect();
-      var _ref = findPopoverPosition({
-          allowCrossAxis: false,
-          anchor: _this.comboBoxRefInstance,
-          popover: listElement,
-          position: 'bottom'
-        }),
-        position = _ref.position,
-        top = _ref.top;
-      if (_this.listRefInstance) {
-        _this.listRefInstance.style.top = "".concat(top, "px");
-        // listElement doesn't have its width set until after updating the position
-        // which means the popover service won't know about the correct width
-        // however, we already know where to position the element
-        _this.listRefInstance.style.left = "".concat(comboBoxBounds.left + window.pageXOffset, "px");
-        _this.listRefInstance.style.width = "".concat(comboBoxBounds.width, "px");
-      }
-
-      // Cache for future calls.
-      _this.setState({
-        listElement: listElement,
-        listPosition: position,
-        width: comboBoxBounds.width
-      });
-    });
     _defineProperty(_assertThisInitialized(_this), "incrementActiveOptionIndex", function (amount) {
       // If there are no options available, do nothing.
       if (!_this.state.matchingOptions.length) {
         return;
       }
-      _this.setState(function (_ref2) {
-        var activeOptionIndex = _ref2.activeOptionIndex,
-          matchingOptions = _ref2.matchingOptions;
+      _this.setState(function (_ref) {
+        var activeOptionIndex = _ref.activeOptionIndex,
+          matchingOptions = _ref.matchingOptions;
         var nextActiveOptionIndex;
         if (activeOptionIndex < 0) {
           // If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
@@ -224,12 +145,12 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       _this.onSearchChange('');
     });
     _defineProperty(_assertThisInitialized(_this), "addCustomOption", function (isContainerBlur, searchValue) {
-      var _this$props = _this.props,
-        isCaseSensitive = _this$props.isCaseSensitive,
-        onCreateOption = _this$props.onCreateOption,
-        options = _this$props.options,
-        selectedOptions = _this$props.selectedOptions,
-        singleSelection = _this$props.singleSelection;
+      var _this$props2 = _this.props,
+        isCaseSensitive = _this$props2.isCaseSensitive,
+        onCreateOption = _this$props2.onCreateOption,
+        options = _this$props2.options,
+        selectedOptions = _this$props2.selectedOptions,
+        singleSelection = _this$props2.singleSelection;
       var matchingOptions = _this.state.matchingOptions;
       if (_this.doesSearchMatchOnlyOption()) {
         _this.onAddOption(matchingOptions[0], isContainerBlur);
@@ -276,11 +197,11 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       return normalizedSearchSubject === normalizedSearchValue;
     });
     _defineProperty(_assertThisInitialized(_this), "areAllOptionsSelected", function () {
-      var _this$props2 = _this.props,
-        options = _this$props2.options,
-        selectedOptions = _this$props2.selectedOptions,
-        async = _this$props2.async,
-        isCaseSensitive = _this$props2.isCaseSensitive;
+      var _this$props3 = _this.props,
+        options = _this$props3.options,
+        selectedOptions = _this$props3.selectedOptions,
+        async = _this$props3.async,
+        isCaseSensitive = _this$props3.isCaseSensitive;
       // Assume if this is async then there could be infinite options.
       if (async) {
         return false;
@@ -291,8 +212,8 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         });
       });
       var numberOfSelectedOptions = 0;
-      selectedOptions.forEach(function (_ref3) {
-        var label = _ref3.label;
+      selectedOptions.forEach(function (_ref2) {
+        var label = _ref2.label;
         var trimmedLabel = transformForCaseSensitivity(label.trim(), isCaseSensitive);
         if (flattenOptions.findIndex(function (option) {
           return option.label === trimmedLabel;
@@ -301,9 +222,8 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       return flattenOptions.length === numberOfSelectedOptions;
     });
     _defineProperty(_assertThisInitialized(_this), "onComboBoxFocus", function (event) {
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
+      var _this$props$onFocus, _this$props4;
+      (_this$props$onFocus = (_this$props4 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props4, event);
       _this.openList();
       _this.setState({
         hasFocus: true
@@ -326,10 +246,9 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       var focusedInOptionsList = relatedTarget && _this.listRefInstance && _this.listRefInstance.contains(relatedTarget);
       var focusedInInput = relatedTarget && _this.comboBoxRefInstance && _this.comboBoxRefInstance.contains(relatedTarget);
       if (!focusedInOptionsList && !focusedInInput) {
+        var _this$props$onBlur, _this$props5;
+        (_this$props$onBlur = (_this$props5 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props5, event);
         _this.closeList();
-        if (_this.props.onBlur) {
-          _this.props.onBlur(event);
-        }
         _this.setState({
           hasFocus: false
         });
@@ -352,7 +271,9 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
+      var _this$props$onKeyDown, _this$props6;
       if (_this.props.isDisabled) return;
+      event.persist(); // TODO: Remove once React 16 support is dropped
       switch (event.key) {
         case keys.ARROW_UP:
           event.preventDefault();
@@ -396,9 +317,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
           }
           break;
         default:
-          if (_this.props.onKeyDown) {
-            _this.props.onKeyDown(event);
-          }
+          (_this$props$onKeyDown = (_this$props6 = _this.props).onKeyDown) === null || _this$props$onKeyDown === void 0 ? void 0 : _this$props$onKeyDown.call(_this$props6, event);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onOptionEnterKey", function (option) {
@@ -411,21 +330,18 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       if (addedOption.disabled) {
         return;
       }
-      var _this$props3 = _this.props,
-        onChange = _this$props3.onChange,
-        selectedOptions = _this$props3.selectedOptions,
-        singleSelectionProp = _this$props3.singleSelection;
+      var _this$props7 = _this.props,
+        onChange = _this$props7.onChange,
+        selectedOptions = _this$props7.selectedOptions,
+        singleSelectionProp = _this$props7.singleSelection;
       var singleSelection = Boolean(singleSelectionProp);
       var changeOptions = singleSelection ? [addedOption] : selectedOptions.concat(addedOption);
-      if (onChange) {
-        onChange(changeOptions);
-      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(changeOptions);
       _this.clearSearchValue();
       _this.clearActiveOption();
       if (!isContainerBlur) {
-        if (_this.searchInputRefInstance) {
-          _this.searchInputRefInstance.focus();
-        }
+        var _this$searchInputRefI2;
+        (_this$searchInputRefI2 = _this.searchInputRefInstance) === null || _this$searchInputRefI2 === void 0 ? void 0 : _this$searchInputRefI2.focus();
       }
       if (singleSelection) {
         requestAnimationFrame(function () {
@@ -438,36 +354,29 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onRemoveOption", function (removedOption) {
-      var _this$props4 = _this.props,
-        onChange = _this$props4.onChange,
-        selectedOptions = _this$props4.selectedOptions;
-      if (onChange) {
-        onChange(selectedOptions.filter(function (option) {
-          return option !== removedOption;
-        }));
-      }
+      var _this$props8 = _this.props,
+        onChange = _this$props8.onChange,
+        selectedOptions = _this$props8.selectedOptions;
+      onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions.filter(function (option) {
+        return option !== removedOption;
+      }));
       _this.clearActiveOption();
     });
     _defineProperty(_assertThisInitialized(_this), "clearSelectedOptions", function () {
-      var onChange = _this.props.onChange;
-      if (onChange) {
-        onChange([]);
-      }
+      var _this$props$onChange, _this$props9, _this$searchInputRefI3;
+      (_this$props$onChange = (_this$props9 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props9, []);
 
       // Clicking the clear button will also cause it to disappear. This would result in focus
       // shifting unexpectedly to the body element so we set it to the input which is more reasonable,
-      if (_this.searchInputRefInstance) {
-        _this.searchInputRefInstance.focus();
-      }
+      (_this$searchInputRefI3 = _this.searchInputRefInstance) === null || _this$searchInputRefI3 === void 0 ? void 0 : _this$searchInputRefI3.focus();
       if (!_this.state.isListOpen) {
         _this.openList();
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onComboBoxClick", function () {
+      var _this$searchInputRefI4;
       // When the user clicks anywhere on the box, enter the interaction state.
-      if (_this.searchInputRefInstance) {
-        _this.searchInputRefInstance.focus();
-      }
+      (_this$searchInputRefI4 = _this.searchInputRefInstance) === null || _this$searchInputRefI4 === void 0 ? void 0 : _this$searchInputRefI4.focus();
 
       // If the user does this from a state in which an option has focus, then we need to reset it or clear it.
       if (Boolean(_this.props.singleSelection) && _this.props.selectedOptions.length === 1) {
@@ -482,25 +391,20 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onOpenListClick", function () {
-      if (_this.searchInputRefInstance) {
-        _this.searchInputRefInstance.focus();
-      }
+      var _this$searchInputRefI5;
+      (_this$searchInputRefI5 = _this.searchInputRefInstance) === null || _this$searchInputRefI5 === void 0 ? void 0 : _this$searchInputRefI5.focus();
       if (!_this.state.isListOpen) {
         _this.openList();
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onOptionListScroll", function () {
-      if (_this.searchInputRefInstance) {
-        _this.searchInputRefInstance.focus();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onCloseListClick", function () {
-      _this.closeList();
+      var _this$searchInputRefI6;
+      (_this$searchInputRefI6 = _this.searchInputRefInstance) === null || _this$searchInputRefI6 === void 0 ? void 0 : _this$searchInputRefI6.focus();
     });
     _defineProperty(_assertThisInitialized(_this), "onSearchChange", function (searchValue) {
-      var _this$props5 = _this.props,
-        onSearchChange = _this$props5.onSearchChange,
-        delimiter = _this$props5.delimiter;
+      var _this$props10 = _this.props,
+        onSearchChange = _this$props10.onSearchChange,
+        delimiter = _this$props10.delimiter;
       if (onSearchChange) {
         var _hasMatchingOptions = _this.state.matchingOptions.length > 0;
         onSearchChange(searchValue, _hasMatchingOptions);
@@ -514,126 +418,53 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         _this.setCustomOptions(false);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "updateMatchingOptionsIfDifferent", function (newMatchingOptions) {
-      var _this$state = _this.state,
-        matchingOptions = _this$state.matchingOptions,
-        activeOptionIndex = _this$state.activeOptionIndex;
-      var _this$props6 = _this.props,
-        singleSelection = _this$props6.singleSelection,
-        selectedOptions = _this$props6.selectedOptions;
-      var areOptionsDifferent = false;
-      if (matchingOptions.length !== newMatchingOptions.length) {
-        areOptionsDifferent = true;
-      } else {
-        for (var i = 0; i < matchingOptions.length; i++) {
-          if (matchingOptions[i].label !== newMatchingOptions[i].label) {
-            areOptionsDifferent = true;
-            break;
-          }
-        }
-      }
-      if (areOptionsDifferent) {
-        _this.optionsRefInstances = [];
-        var nextActiveOptionIndex = activeOptionIndex;
-        // ensure that the currently selected single option is active if it is in the matchingOptions
-        if (Boolean(singleSelection) && selectedOptions.length === 1) {
-          if (newMatchingOptions.includes(selectedOptions[0])) {
-            nextActiveOptionIndex = newMatchingOptions.indexOf(selectedOptions[0]);
-          }
-        }
-        _this.setState({
-          matchingOptions: newMatchingOptions,
-          activeOptionIndex: nextActiveOptionIndex
-        });
-        if (!newMatchingOptions.length) {
-          // Prevent endless setState -> componentWillUpdate -> setState loop.
-          if (_this.hasActiveOption()) {
-            _this.clearActiveOption();
-          }
-        }
-      }
-    });
     return _this;
   }
   _createClass(EuiComboBox, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this._isMounted = true;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$props7 = this.props,
-        options = _this$props7.options,
-        selectedOptions = _this$props7.selectedOptions,
-        singleSelection = _this$props7.singleSelection,
-        sortMatchesBy = _this$props7.sortMatchesBy;
-      var searchValue = this.state.searchValue;
-
-      // React 16.3 has a bug (fixed in 16.4) where getDerivedStateFromProps
-      // isn't called after a state change, and we track `searchValue` in state
-      // instead we need to react to a change in searchValue here
-      this.updateMatchingOptionsIfDifferent(getMatchingOptions({
-        options: options,
-        selectedOptions: selectedOptions,
-        searchValue: searchValue,
-        isCaseSensitive: this.props.isCaseSensitive,
-        isPreFiltered: this.props.async,
-        showPrevSelected: Boolean(singleSelection),
-        sortMatchesBy: sortMatchesBy
-      }));
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._isMounted = false;
-    }
-  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props8 = this.props,
-        dataTestSubj = _this$props8['data-test-subj'],
-        async = _this$props8.async,
-        className = _this$props8.className,
-        compressed = _this$props8.compressed,
-        customOptionText = _this$props8.customOptionText,
-        fullWidth = _this$props8.fullWidth,
-        id = _this$props8.id,
-        inputRef = _this$props8.inputRef,
-        isCaseSensitive = _this$props8.isCaseSensitive,
-        isClearable = _this$props8.isClearable,
-        isDisabled = _this$props8.isDisabled,
-        isInvalid = _this$props8.isInvalid,
-        isLoading = _this$props8.isLoading,
-        noSuggestions = _this$props8.noSuggestions,
-        onBlur = _this$props8.onBlur,
-        onChange = _this$props8.onChange,
-        onCreateOption = _this$props8.onCreateOption,
-        onSearchChange = _this$props8.onSearchChange,
-        options = _this$props8.options,
-        placeholder = _this$props8.placeholder,
-        renderOption = _this$props8.renderOption,
-        rowHeight = _this$props8.rowHeight,
-        selectedOptions = _this$props8.selectedOptions,
-        singleSelection = _this$props8.singleSelection,
-        prepend = _this$props8.prepend,
-        sortMatchesBy = _this$props8.sortMatchesBy,
-        delimiter = _this$props8.delimiter,
-        append = _this$props8.append,
-        autoFocus = _this$props8.autoFocus,
-        truncationProps = _this$props8.truncationProps,
-        ariaLabel = _this$props8['aria-label'],
-        ariaLabelledby = _this$props8['aria-labelledby'],
-        rest = _objectWithoutProperties(_this$props8, _excluded);
-      var _this$state2 = this.state,
-        activeOptionIndex = _this$state2.activeOptionIndex,
-        hasFocus = _this$state2.hasFocus,
-        isListOpen = _this$state2.isListOpen,
-        listPosition = _this$state2.listPosition,
-        searchValue = _this$state2.searchValue,
-        width = _this$state2.width,
-        matchingOptions = _this$state2.matchingOptions;
+      var _this$props11 = this.props,
+        dataTestSubj = _this$props11['data-test-subj'],
+        async = _this$props11.async,
+        className = _this$props11.className,
+        compressed = _this$props11.compressed,
+        customOptionText = _this$props11.customOptionText,
+        fullWidth = _this$props11.fullWidth,
+        id = _this$props11.id,
+        inputRef = _this$props11.inputRef,
+        isCaseSensitive = _this$props11.isCaseSensitive,
+        isClearable = _this$props11.isClearable,
+        isDisabled = _this$props11.isDisabled,
+        isInvalid = _this$props11.isInvalid,
+        isLoading = _this$props11.isLoading,
+        noSuggestions = _this$props11.noSuggestions,
+        onBlur = _this$props11.onBlur,
+        onChange = _this$props11.onChange,
+        onCreateOption = _this$props11.onCreateOption,
+        onSearchChange = _this$props11.onSearchChange,
+        options = _this$props11.options,
+        placeholder = _this$props11.placeholder,
+        renderOption = _this$props11.renderOption,
+        rowHeight = _this$props11.rowHeight,
+        selectedOptions = _this$props11.selectedOptions,
+        singleSelection = _this$props11.singleSelection,
+        prepend = _this$props11.prepend,
+        sortMatchesBy = _this$props11.sortMatchesBy,
+        delimiter = _this$props11.delimiter,
+        append = _this$props11.append,
+        autoFocus = _this$props11.autoFocus,
+        truncationProps = _this$props11.truncationProps,
+        inputPopoverProps = _this$props11.inputPopoverProps,
+        ariaLabel = _this$props11['aria-label'],
+        ariaLabelledby = _this$props11['aria-labelledby'],
+        rest = _objectWithoutProperties(_this$props11, _excluded);
+      var _this$state = this.state,
+        activeOptionIndex = _this$state.activeOptionIndex,
+        hasFocus = _this$state.hasFocus,
+        isListOpen = _this$state.isListOpen,
+        searchValue = _this$state.searchValue,
+        matchingOptions = _this$state.matchingOptions;
 
       // Make sure we have a valid ID if users don't pass one as a prop
       var inputId = id !== null && id !== void 0 ? id : this.rootId('_eui-combobox-id');
@@ -657,12 +488,11 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       var optionsList;
       if (!noSuggestions && isListOpen) {
         var optionsListDataTestSubj = dataTestSubj ? "".concat(dataTestSubj, "-optionsList") : undefined;
-        optionsList = ___EmotionJSX(EuiPortal, null, ___EmotionJSX(EuiI18n, {
+        optionsList = ___EmotionJSX(EuiI18n, {
           token: "euiComboBox.listboxAriaLabel",
           default: "Choose from the following options"
         }, function (listboxAriaLabel) {
           return ___EmotionJSX(EuiComboBoxOptionsList, {
-            zIndex: _this2.state.listZIndex,
             activeOptionIndex: _this2.state.activeOptionIndex,
             areAllOptionsSelected: _this2.areAllOptionsSelected(),
             customOptionText: customOptionText,
@@ -677,9 +507,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             onOptionClick: _this2.onOptionClick,
             onOptionEnterKey: _this2.onOptionEnterKey,
             onScroll: _this2.onOptionListScroll,
-            optionRef: _this2.optionRefCallback,
             options: options,
-            position: listPosition,
             singleSelection: singleSelection,
             renderOption: renderOption,
             rootId: _this2.rootId,
@@ -687,14 +515,12 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             scrollToIndex: activeOptionIndex,
             searchValue: searchValue,
             selectedOptions: selectedOptions,
-            updatePosition: _this2.updatePosition,
-            width: width,
             delimiter: delimiter,
             getSelectedOptionForSearchValue: getSelectedOptionForSearchValue,
             listboxAriaLabel: listboxAriaLabel,
             truncationProps: truncationProps
           });
-        }));
+        });
       }
       return (
         /**
@@ -710,39 +536,46 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
           onKeyDown: this.onKeyDown,
           onBlur: this.onContainerBlur,
           ref: this.comboBoxRefCallback
-        }), ___EmotionJSX(EuiComboBoxInput, {
-          compressed: compressed,
-          focusedOptionId: this.hasActiveOption() ? this.rootId("_option-".concat(this.state.activeOptionIndex)) : undefined,
+        }), ___EmotionJSX(EuiInputPopover, _extends({
           fullWidth: fullWidth,
-          hasSelectedOptions: selectedOptions.length > 0,
-          id: inputId,
-          inputRef: this.searchInputRefCallback,
-          isDisabled: isDisabled,
-          isListOpen: isListOpen,
-          noIcon: !!noSuggestions,
-          onChange: this.onSearchChange,
-          onClear: isClearable && !isDisabled ? this.clearSelectedOptions : undefined,
-          onClick: this.onComboBoxClick,
-          onCloseListClick: this.onCloseListClick,
-          onFocus: this.onComboBoxFocus,
-          onOpenListClick: this.onOpenListClick,
-          onRemoveOption: this.onRemoveOption,
-          placeholder: placeholder,
-          rootId: this.rootId,
-          searchValue: searchValue,
-          selectedOptions: selectedOptions,
-          singleSelection: singleSelection,
-          toggleButtonRef: this.toggleButtonRefCallback,
-          updatePosition: this.updatePosition,
-          value: value,
-          append: singleSelection ? append : undefined,
-          prepend: singleSelection ? prepend : undefined,
-          isLoading: isLoading,
-          isInvalid: markAsInvalid,
-          autoFocus: autoFocus,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledby
-        }), optionsList)
+          panelPaddingSize: "none",
+          disableFocusTrap: true,
+          closeOnScroll: true
+        }, inputPopoverProps, {
+          isOpen: isListOpen,
+          closePopover: this.closeList,
+          input: ___EmotionJSX(EuiComboBoxInput, {
+            compressed: compressed,
+            focusedOptionId: this.hasActiveOption() ? this.rootId("_option-".concat(this.state.activeOptionIndex)) : undefined,
+            fullWidth: fullWidth,
+            hasSelectedOptions: selectedOptions.length > 0,
+            id: inputId,
+            inputRef: this.searchInputRefCallback,
+            isDisabled: isDisabled,
+            isListOpen: isListOpen,
+            noIcon: !!noSuggestions,
+            onChange: this.onSearchChange,
+            onClear: isClearable && !isDisabled ? this.clearSelectedOptions : undefined,
+            onClick: this.onComboBoxClick,
+            onCloseListClick: this.closeList,
+            onFocus: this.onComboBoxFocus,
+            onOpenListClick: this.onOpenListClick,
+            onRemoveOption: this.onRemoveOption,
+            placeholder: placeholder,
+            rootId: this.rootId,
+            searchValue: searchValue,
+            selectedOptions: selectedOptions,
+            singleSelection: singleSelection,
+            value: value,
+            append: singleSelection ? append : undefined,
+            prepend: singleSelection ? prepend : undefined,
+            isLoading: isLoading,
+            isInvalid: markAsInvalid,
+            autoFocus: autoFocus,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby
+          })
+        }), optionsList))
       );
     }
   }], [{