@elastic/eui 88.5.4 → 89.0.0

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

@@ -72,12 +72,6 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         inputWidth: inputWidth
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
-      // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
-      requestAnimationFrame(function () {
-        _this.props.updatePosition();
-      });
-    });
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (event) {
       _this.props.onFocus(event);
       _this.setState({
@@ -118,10 +112,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();
       }
     }
   }, {
@@ -147,7 +137,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,
@@ -214,7 +203,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'
@@ -330,7 +318,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/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -17,18 +17,19 @@ 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -66,43 +67,25 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "listRefInstance", null);
     _defineProperty(_assertThisInitialized(_this), "listRef", null);
-    _defineProperty(_assertThisInitialized(_this), "listBoxRef", null);
-    _defineProperty(_assertThisInitialized(_this), "updatePosition", function () {
-      // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
-      requestAnimationFrame(function () {
-        _this.props.updatePosition(_this.listRefInstance);
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "closeListOnScroll", function (event) {
-      // Close the list when a scroll event happens, but not if the scroll happened in the options list.
-      // This mirrors Firefox's approach of auto-closing `select` elements onscroll.
-      if (_this.listRefInstance && event.target && _this.listRefInstance.contains(event.target) === false) {
-        _this.props.onCloseList(event);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "listRefCallback", function (ref) {
-      _this.props.listRef(ref);
-      _this.listRefInstance = ref;
-    });
     _defineProperty(_assertThisInitialized(_this), "setListRef", function (ref) {
       _this.listRef = ref;
     });
-    _defineProperty(_assertThisInitialized(_this), "setListBoxRef", function (ref) {
-      _this.listBoxRef = ref;
-      if (ref) {
-        ref.setAttribute('aria-label', _this.props.listboxAriaLabel);
-        ref.setAttribute('id', _this.props.rootId('listbox'));
-        ref.setAttribute('role', 'listbox');
-        ref.setAttribute('tabIndex', '0');
-      }
+    _defineProperty(_assertThisInitialized(_this), "ListInnerElement", function (_ref) {
+      var children = _ref.children,
+        rest = _objectWithoutProperties(_ref, _excluded);
+      return (0, _react2.jsx)("div", _extends({}, rest, {
+        "aria-label": _this.props.listboxAriaLabel,
+        id: _this.props.rootId('listbox'),
+        role: "listbox",
+        tabIndex: "0"
+      }), children);
     });
-    _defineProperty(_assertThisInitialized(_this), "ListRow", function (_ref) {
+    _defineProperty(_assertThisInitialized(_this), "ListRow", function (_ref2) {
       var _option$key;
-      var data = _ref.data,
-        index = _ref.index,
-        style = _ref.style;
+      var data = _ref2.data,
+        index = _ref2.index,
+        style = _ref2.style;
       var option = data[index];
       var key = option.key,
         isGroupLabelOption = option.isGroupLabelOption,
@@ -111,12 +94,11 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         prepend = option.prepend,
         append = option.append,
         _truncationProps = option.truncationProps,
-        rest = _objectWithoutProperties(option, _excluded);
+        rest = _objectWithoutProperties(option, _excluded2);
       var _this$props = _this.props,
         singleSelection = _this$props.singleSelection,
         selectedOptions = _this$props.selectedOptions,
         onOptionClick = _this$props.onOptionClick,
-        optionRef = _this$props.optionRef,
         activeOptionIndex = _this$props.activeOptionIndex,
         renderOption = _this$props.renderOption,
         searchValue = _this$props.searchValue,
@@ -144,7 +126,6 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
             onOptionClick(option);
           }
         },
-        ref: optionRef.bind(_assertThisInitialized(_this), index),
         isFocused: optionIsFocused,
         checked: checked,
         showIcons: singleSelection ? true : false,
@@ -203,51 +184,12 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(EuiComboBoxOptionsList, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      // Wait a frame, otherwise moving focus from one combo box to another will result in the class
-      // being removed from the body.
-      requestAnimationFrame(function () {
-        document.body.classList.add('euiBody-hasPortalContent');
-      });
-      this.updatePosition();
-      window.addEventListener('resize', this.updatePosition);
-
-      // Firefox will trigger a scroll event in many common situations when the options list div is appended
-      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
-      setTimeout(function () {
-        window.addEventListener('scroll', _this2.closeListOnScroll, {
-          passive: true,
-          // for better performance as we won't call preventDefault
-          capture: true // scroll events don't bubble, they must be captured instead
-        });
-      }, 500);
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var options = prevProps.options,
-        selectedOptions = prevProps.selectedOptions,
-        searchValue = prevProps.searchValue;
-
-      // We don't compare matchingOptions because that will result in a loop.
-      if (searchValue !== this.props.searchValue || options !== this.props.options || selectedOptions !== this.props.selectedOptions) {
-        this.updatePosition();
-      }
       if (this.listRef && typeof this.props.activeOptionIndex !== 'undefined' && this.props.activeOptionIndex !== prevProps.activeOptionIndex) {
         this.listRef.scrollToItem(this.props.activeOptionIndex, 'auto');
       }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.body.classList.remove('euiBody-hasPortalContent');
-      window.removeEventListener('resize', this.updatePosition);
-      window.removeEventListener('scroll', this.closeListOnScroll, {
-        capture: true
-      });
-    }
   }, {
     key: "render",
     value: function render() {
@@ -267,10 +209,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,
@@ -278,14 +217,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 = _objectWithoutProperties(_this$props2, _excluded2);
+        rest = _objectWithoutProperties(_this$props2, _excluded3);
       var emptyStateContent;
       if (isLoading) {
         emptyStateContent = (0, _react2.jsx)(_flex.EuiFlexGroup, {
@@ -382,44 +317,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, _extends({
-        paddingSize: "none",
-        hasShadow: false,
-        className: classes,
-        panelRef: this.listRefCallback,
+      return (0, _react2.jsx)("div", _extends({
+        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;
+_defineProperty(EuiComboBoxOptionsList, "contextType", _input_popover.EuiInputPopoverWidthContext);
 _defineProperty(EuiComboBoxOptionsList, "defaultProps", {
   'data-test-subj': '',
   rowHeight: 29,
@@ -435,9 +356,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,
@@ -476,10 +397,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,
@@ -507,7 +427,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,
@@ -540,12 +459,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/lib/components/context_menu/context_menu_panel.js

@@ -114,7 +114,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();
@@ -127,7 +127,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);
@@ -138,21 +138,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/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/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/lib/components/flyout/flyout.js

@@ -18,7 +18,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
@@ -90,8 +90,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'],
@@ -119,18 +120,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') {
@@ -138,38 +137,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) {
@@ -189,7 +186,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
@@ -219,9 +216,11 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       });
     }
   }, [includeFixedHeadersInFocusTrap, resizeRef]);
-  var focusTrapProps = _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
-    shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray(_focusTrapProps.shards || []))
-  });
+  var focusTrapProps = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+      shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+    });
+  }, [fixedHeaders, _focusTrapProps]);
 
   /*
    * Provide meaningful screen reader instructions/details
@@ -254,7 +253,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) {
@@ -266,7 +265,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, _extends({
     disabled: isPushed,
     scrollLock: hasOverlayMask,
@@ -275,7 +274,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, focusTrapProps), (0, _react2.jsx)(Element, _extends({
     className: classes,
     css: cssStyles,
-    style: newStyle,
+    style: inlineStyles,
     ref: setRef
   }, rest, {
     role: !isPushed ? 'dialog' : rest.role,

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

@@ -10,14 +10,14 @@ 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+                                                                                                                                                                                                                                                                                           * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+                                                                                                                                                                                                                                                                                           * or more contributor license agreements. Licensed under the Elastic License
+                                                                                                                                                                                                                                                                                           * 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 = _taggedTemplateLiteral(["\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 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
@@ -37,6 +37,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 {
@@ -52,10 +60,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/lib/components/form/range/dual_range.js

@@ -799,6 +799,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/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;