@elastic/eui 88.5.4 → 89.0.0

package/test-env/components/combo_box/combo_box_input/combo_box_input.js

@@ -68,12 +68,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({
@@ -114,10 +108,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();
       }
     }
   }, {
@@ -143,7 +133,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,
@@ -210,7 +199,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'
@@ -326,7 +314,6 @@ EuiComboBoxInput.propTypes = {
     asPlainText: _propTypes.default.bool
   }).isRequired]),
   toggleButtonRef: _propTypes.default.any,
-  updatePosition: _propTypes.default.func.isRequired,
   value: _propTypes.default.string,
   prepend: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),
   append: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),

package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -28,11 +28,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; }
@@ -61,43 +62,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,
@@ -106,12 +89,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,
@@ -139,7 +121,6 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
             onOptionClick(option);
           }
         },
-        ref: optionRef.bind((0, _assertThisInitialized2.default)(_this), index),
         isFocused: optionIsFocused,
         checked: checked,
         showIcons: singleSelection ? true : false,
@@ -198,51 +179,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() {
@@ -262,10 +204,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,
@@ -273,14 +212,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, {
@@ -377,44 +312,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,
@@ -430,9 +351,9 @@ EuiComboBoxOptionsList.propTypes = {
   areAllOptionsSelected: _propTypes.default.bool,
   listboxAriaLabel: _propTypes.default.string.isRequired,
   /**
-       * Creates a custom text option. You can use `{searchValue}` inside your string to better customize your text.
-       * It won't show if there's no onCreateOption.
-       */
+     * Creates a custom text option. You can use `{searchValue}` inside your string to better customize your text.
+     * It won't show if there's no onCreateOption.
+     */
   customOptionText: _propTypes.default.string,
   fullWidth: _propTypes.default.bool,
   getSelectedOptionForSearchValue: _propTypes.default.func,
@@ -471,10 +392,9 @@ EuiComboBoxOptionsList.propTypes = {
   onOptionClick: _propTypes.default.func,
   onOptionEnterKey: _propTypes.default.func,
   onScroll: _propTypes.default.any,
-  optionRef: _propTypes.default.func.isRequired,
   /**
-       * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
-       */
+     * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
+     */
   options: _propTypes.default.arrayOf(_propTypes.default.shape({
     isGroupLabelOption: _propTypes.default.bool,
     label: _propTypes.default.string.isRequired,
@@ -502,7 +422,6 @@ EuiComboBoxOptionsList.propTypes = {
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
   }).isRequired).isRequired,
-  position: _propTypes.default.oneOf(["top", "bottom"]),
   renderOption: _propTypes.default.func,
   rootId: _propTypes.default.any.isRequired,
   rowHeight: _propTypes.default.number.isRequired,
@@ -535,12 +454,9 @@ EuiComboBoxOptionsList.propTypes = {
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
   }).isRequired).isRequired,
-  updatePosition: _propTypes.default.func.isRequired,
-  width: _propTypes.default.number.isRequired,
   singleSelection: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
     asPlainText: _propTypes.default.bool
   }).isRequired]),
   delimiter: _propTypes.default.string,
-  zIndex: _propTypes.default.number,
   truncationProps: _propTypes.default.any
 };

package/test-env/components/context_menu/context_menu_panel.js

@@ -109,7 +109,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();
@@ -122,7 +122,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);
@@ -133,21 +133,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/test-env/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/test-env/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/test-env/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/test-env/components/form/range/dual_range.js

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

package/test-env/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/test-env/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"));
@@ -21,7 +21,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
@@ -33,11 +33,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,
@@ -118,6 +123,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,
@@ -135,7 +174,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.propTypes = {
@@ -148,6 +189,10 @@ EuiInputPopover.propTypes = {
      */
   anchorPosition: _propTypes.default.oneOf(["downLeft", "downRight", "downCenter"]),
   disableFocusTrap: _propTypes.default.bool,
+  /**
+     * Allows automatically closing the input popover on page scroll
+     */
+  closeOnScroll: _propTypes.default.bool,
   fullWidth: _propTypes.default.bool,
   input: _propTypes.default.any.isRequired,
   inputRef: _propTypes.default.any,

package/test-env/components/popover/popover.js

@@ -135,7 +135,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       }, closingTransitionTime);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
-      if (event.key === _services.cascadingMenuKeys.ESCAPE) {
+      if (event.key === _services.keys.ESCAPE) {
         _this.onEscapeKey(event);
       }
     });