@elastic/eui 87.0.0 → 87.1.0

package/optimize/lib/components/code/code_block_virtualized.js

@@ -53,27 +53,35 @@ var EuiCodeBlockVirtualized = function EuiCodeBlockVirtualized(_ref) {
       }, codeProps));
     });
   }, [codeProps]);
-  return (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
-    disableHeight: typeof overflowHeight === 'number'
+  var virtualizationProps = {
+    itemData: data,
+    itemSize: rowHeight,
+    itemCount: data.length,
+    outerElementType: VirtualizedOuterElement,
+    innerElementType: VirtualizedInnerElement
+  };
+  return typeof overflowHeight === 'number' ? (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
+    disableHeight: true
   }, function (_ref4) {
-    var height = _ref4.height,
-      width = _ref4.width;
-    return (0, _react2.jsx)(_reactWindow.FixedSizeList, {
-      height: height !== null && height !== void 0 ? height : overflowHeight,
-      width: width,
-      itemData: data,
-      itemSize: rowHeight,
-      itemCount: data.length,
-      outerElementType: VirtualizedOuterElement,
-      innerElementType: VirtualizedInnerElement
-    }, ListRow);
+    var width = _ref4.width;
+    return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
+      height: overflowHeight,
+      width: width
+    }, virtualizationProps), ListRow);
+  }) : (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, null, function (_ref5) {
+    var height = _ref5.height,
+      width = _ref5.width;
+    return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
+      height: height,
+      width: width
+    }, virtualizationProps), ListRow);
   });
 };
 exports.EuiCodeBlockVirtualized = EuiCodeBlockVirtualized;
-var ListRow = function ListRow(_ref5) {
-  var data = _ref5.data,
-    index = _ref5.index,
-    style = _ref5.style;
+var ListRow = function ListRow(_ref6) {
+  var data = _ref6.data,
+    index = _ref6.index,
+    style = _ref6.style;
   var row = data[index];
   row.properties.style = (0, _global_styling.logicalStyles)(style);
   return (0, _utils.nodeToHtml)(row, index, data, 0);

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -16,6 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _flyout = require("../flyout");
+var _i18n = require("../i18n");
 var _header = require("../header/header.styles");
 var _context = require("./context");
 var _collapsible_nav_button = require("./collapsible_nav_button");
@@ -131,6 +132,7 @@ var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
     conditionalId: id,
     suffix: 'euiCollapsibleNav'
   });
+  var defaultAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsibleNavBeta.ariaLabel', 'Site menu');
   var buttonRef = (0, _react.useRef)(null);
   var focusTrapProps = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
@@ -142,7 +144,9 @@ var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
   var cssStyles = [styles.euiCollapsibleNavBeta, styles[side], isPush && styles.isPush, isPush && isCollapsed && styles.isPushCollapsed, isOverlayFullWidth && styles.isOverlayFullWidth];
 
   // Wait for any fixed headers to be queried before rendering (prevents position jumping)
-  var flyout = fixedHeadersCount !== false && (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({}, rest, {
+  var flyout = fixedHeadersCount !== false && (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({
+    "aria-label": defaultAriaLabel
+  }, rest, {
     // EuiCollapsibleNav is significantly less permissive than EuiFlyout
     id: flyoutID,
     css: cssStyles,

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js

@@ -58,7 +58,8 @@ var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
     size: "s",
     color: "text",
     href: href,
-    onClick: onClick
+    onClick: onClick,
+    "aria-label": title
   }, linkProps, {
     // Exclusive union shenanigans
     className: buttonClassName,

package/optimize/lib/components/date_picker/date_picker_range.js

@@ -14,7 +14,7 @@ var _form = require("../form");
 var _services = require("../../services");
 var _date_picker_range = require("./date_picker_range.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,6 +35,7 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
     _fullWidth = _ref.fullWidth,
+    _compressed = _ref.compressed,
     isCustom = _ref.isCustom,
     readOnly = _ref.readOnly,
     isLoading = _ref.isLoading,
@@ -45,8 +46,9 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     append = _ref.append,
     prepend = _ref.prepend,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // `fullWidth` should not affect inline datepickers (matches non-range behavior)
+  // `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
   var fullWidth = _fullWidth && !inline;
+  var compressed = _compressed && !inline;
   var classes = (0, _classnames.default)('euiDatePickerRange', className);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _date_picker_range.euiDatePickerRangeStyles)(euiTheme);
@@ -118,6 +120,7 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     startControl: startControl,
     endControl: endControl,
     fullWidth: fullWidth,
+    compressed: compressed,
     readOnly: readOnly,
     isDisabled: disabled,
     isInvalid: isInvalid,

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

@@ -24,7 +24,7 @@ var _portal = require("../portal");
 var _accessibility = require("../accessibility");
 var _flyout = require("./flyout.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "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
@@ -83,6 +83,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
     _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
     includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
+    _ariaDescribedBy = _ref['aria-describedby'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
@@ -216,6 +217,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    */
   var hasOverlayMask = ownFocus && !isPushed;
   var descriptionId = (0, _services.useGeneratedHtmlId)();
+  var ariaDescribedBy = (0, _classnames.default)(descriptionId, _ariaDescribedBy);
   var screenReaderDescription = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
     id: descriptionId
   }, hasOverlayMask ? (0, _react2.jsx)(_i18n.EuiI18n, {
@@ -260,15 +262,15 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), (0, _react2.jsx)(Element, (0, _extends2.default)({
-    css: cssStyles
-  }, rest, {
-    role: "dialog",
     className: classes,
-    tabIndex: 0,
-    "data-autofocus": true,
-    "aria-describedby": !isPushed ? descriptionId : undefined,
+    css: cssStyles,
     style: newStyle,
     ref: setRef
+  }, rest, {
+    role: !isPushed ? 'dialog' : rest.role,
+    tabIndex: !isPushed ? 0 : rest.tabIndex,
+    "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
+    "data-autofocus": !isPushed || undefined
   }), !isPushed && screenReaderDescription, closeButton, children));
 
   // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.

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

@@ -12,7 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _flyout_body = require("./flyout_body.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "banner"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,6 +24,8 @@ var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   var children = _ref.children,
     className = _ref.className,
     banner = _ref.banner,
+    _ref$scrollableTabInd = _ref.scrollableTabIndex,
+    scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFlyoutBody', className);
   var euiTheme = (0, _services.useEuiTheme)();
@@ -35,7 +37,7 @@ var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
     className: classes,
     css: cssStyles
   }, rest), (0, _react2.jsx)("div", {
-    tabIndex: 0,
+    tabIndex: scrollableTabIndex,
     className: "euiFlyoutBody__overflow",
     css: overflowCssStyles
   }, banner && (0, _react2.jsx)("div", {

package/optimize/lib/components/form/range/dual_range.js

@@ -37,7 +37,7 @@ var _range = require("./range.styles");
 var _dual_range = require("./dual_range.styles");
 var _i18n = require("../../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "inputPopoverProps", "isDraggable", "theme"];
 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; }
@@ -267,9 +267,11 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function (width) {
+      var _this$props$inputPopo, _this$props$inputPopo2;
       _this.setState({
         rangeWidth: width
       });
+      (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -386,6 +388,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         prepend = _this$props.prepend,
         minInputProps = _this$props.minInputProps,
         maxInputProps = _this$props.maxInputProps,
+        inputPopoverProps = _this$props.inputPopoverProps,
         isDraggable = _this$props.isDraggable,
         theme = _this$props.theme,
         rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
@@ -626,8 +629,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       }), maxInput));
-      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiDualRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: (0, _react2.jsx)(_form_control_layout.EuiFormControlLayoutDelimited, {
           startControl: minInput,
           endControl: maxInput,
@@ -646,7 +649,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         disableFocusTrap: true,
         onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover || theRange;
     }
   }]);

package/optimize/lib/components/form/range/range.js

@@ -32,7 +32,7 @@ var _range_wrapper = require("./range_wrapper");
 var _range = require("./range.styles");
 var _i18n = require("../../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "inputPopoverProps", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -122,6 +122,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         step = _this$props.step,
         showLabels = _this$props.showLabels,
         showInput = _this$props.showInput,
+        inputPopoverProps = _this$props.inputPopoverProps,
         showTicks = _this$props.showTicks,
         tickInterval = _this$props.tickInterval,
         ticks = _this$props.ticks,
@@ -234,8 +235,8 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
-      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({}, inputPopoverProps, {
+        className: (0, _classnames.default)('euiRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: theInput // `showInputOnly` confirms existence
         ,
         fullWidth: fullWidth,
@@ -243,7 +244,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         closePopover: this.closePopover,
         disableFocusTrap: true,
         popoverScreenReaderText: sliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }
   }]);

package/optimize/lib/components/page/page_sidebar/page_sidebar.js

@@ -51,7 +51,7 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     inlineStyles = _useState2[0],
     setInlineStyles = _useState2[1];
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     var updatedStyles = _objectSpread(_objectSpread({}, style), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth));
     if (sticky) {
       var _document$body$datase;

package/optimize/lib/components/page_template/page_template.js

@@ -39,6 +39,14 @@ var TemplateContext = /*#__PURE__*/(0, _react.createContext)({
   bottomBar: {}
 });
 exports.TemplateContext = TemplateContext;
+var calculateOffset = function calculateOffset(base) {
+  var _document$body$datase;
+  if (typeof document === 'undefined') return 0; // SSR catch
+
+  var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
+  return base * 3 * euiHeaderFixedCounter;
+};
+
 /**
  * Consumed via `EuiPageTemplate`,
  * it controls and propogates most of the shared props per direct child
@@ -65,7 +73,9 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useEuiTheme = (0, _services.useEuiTheme)(),
     euiTheme = _useEuiTheme.euiTheme;
-  var _useState = (0, _react.useState)(_offset),
+  var _useState = (0, _react.useState)(function () {
+      return _offset !== null && _offset !== void 0 ? _offset : calculateOffset(euiTheme.base);
+    }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     offset = _useState2[0],
     setOffset = _useState2[1];
@@ -78,9 +88,7 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   (0, _react.useEffect)(function () {
     if (_offset === undefined) {
-      var _document$body$datase;
-      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
-      setOffset(euiTheme.base * 3 * euiHeaderFixedCounter);
+      setOffset(calculateOffset(euiTheme.base));
     }
   }, [_offset, euiTheme.base]);
 

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

@@ -19,7 +19,7 @@ var _services = require("../../services");
 var _form = require("../form/form.styles");
 var _react2 = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "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
@@ -38,6 +38,8 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     input = _ref.input,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$panelMinWidth = _ref.panelMinWidth,
+    panelMinWidth = _ref$panelMinWidth === void 0 ? 0 : _ref$panelMinWidth,
     onPanelResize = _ref.onPanelResize,
     _inputRef = _ref.inputRef,
     _panelRef = _ref.panelRef,
@@ -55,22 +57,24 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     panelEl = _useState6[0],
     setPanelEl = _useState6[1];
+  var popoverClassRef = (0, _react.useRef)(null);
   var inputRef = (0, _services.useCombinedRefs)([setInputEl, _inputRef]);
   var panelRef = (0, _services.useCombinedRefs)([setPanelEl, _panelRef]);
   var setPanelWidth = (0, _react.useCallback)(function (width) {
     if (panelEl && (!!inputElWidth || !!width)) {
       var newWidth = !!width ? width : inputElWidth;
-      panelEl.style.width = "".concat(newWidth, "px");
-      if (onPanelResize) {
-        onPanelResize(newWidth);
-      }
+      var widthToSet = newWidth && newWidth > panelMinWidth ? newWidth : panelMinWidth;
+      panelEl.style.width = "".concat(widthToSet, "px");
+      onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(widthToSet);
     }
-  }, [panelEl, inputElWidth, onPanelResize]);
+  }, [panelEl, inputElWidth, onPanelResize, panelMinWidth]);
   var onResize = (0, _react.useCallback)(function () {
     if (inputEl) {
+      var _popoverClassRef$curr;
       var _width = inputEl.getBoundingClientRect().width;
       setInputElWidth(_width);
       setPanelWidth(_width);
+      (_popoverClassRef$curr = popoverClassRef.current) === null || _popoverClassRef$curr === void 0 ? void 0 : _popoverClassRef$curr.positionPopoverFluid();
     }
   }, [inputEl, setPanelWidth]);
   (0, _react.useEffect)(function () {
@@ -105,7 +109,8 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     }),
     buttonRef: inputRef,
     panelRef: panelRef,
-    className: classes
+    className: classes,
+    ref: popoverClassRef
   }, props), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
     clickOutsideDisables: true,
     disabled: disableFocusTrap

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

@@ -216,8 +216,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         top = _findPopoverPosition.top,
         left = _findPopoverPosition.left,
         foundPosition = _findPopoverPosition.position,
-        arrow = _findPopoverPosition.arrow,
-        anchorBoundingBox = _findPopoverPosition.anchorBoundingBox;
+        arrow = _findPopoverPosition.arrow;
 
       // the popover's z-index must inherit from the button
       // this keeps a button's popover under a flyout that would cover the button
@@ -226,7 +225,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       var zIndex = zIndexProp == null ? (0, _popover.getElementZIndex)(_this.button, _this.panel) + 2000 : zIndexProp;
       var popoverStyles = _objectSpread(_objectSpread({}, _this.props.panelStyle), {}, {
         top: top,
-        left: _this.props.attachToAnchor && anchorBoundingBox ? anchorBoundingBox.left : left,
+        left: left,
         zIndex: zIndex
       });
       var willRenderArrow = !_this.props.attachToAnchor && _this.props.hasArrow;

package/optimize/lib/components/selectable/selectable_list/selectable_list.js

@@ -170,17 +170,67 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         search: searchValue
       }, label));
     }, _reactWindow.areEqual));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderVirtualizedList", function (heightIsFull, optionArray) {
+      if (!_this.props.isVirtualized) return null;
+      var _this$props3 = _this.props,
+        windowProps = _this$props3.windowProps,
+        forcedHeight = _this$props3.height,
+        rowHeight = _this$props3.rowHeight;
+      var virtualizationProps = _objectSpread({
+        className: 'euiSelectableList__list',
+        ref: _this.setListRef,
+        outerRef: _this.removeScrollableTabStop,
+        innerRef: _this.setListBoxRef,
+        innerElementType: 'ul',
+        itemCount: optionArray.length,
+        itemData: optionArray,
+        itemSize: rowHeight,
+        'data-skip-axe': 'scrollable-region-focusable'
+      }, windowProps);
+
+      // Calculated height is only used if height is not full
+      var calculatedHeight = !heightIsFull ? forcedHeight || 0 : 0;
+
+      // If calculatedHeight is still falsy, then calculate it
+      if (!heightIsFull && !calculatedHeight) {
+        var maxVisibleOptions = 7;
+        var numVisibleOptions = optionArray.length;
+        var numVisibleMoreThanMax = optionArray.length > maxVisibleOptions;
+        if (numVisibleMoreThanMax) {
+          // Show only half of the last one to indicate there's more to scroll to
+          calculatedHeight = (maxVisibleOptions - 0.5) * rowHeight;
+        } else {
+          calculatedHeight = numVisibleOptions * rowHeight;
+        }
+      }
+      return heightIsFull ? (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, null, function (_ref2) {
+        var width = _ref2.width,
+          height = _ref2.height;
+        return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
+          width: width,
+          height: height
+        }, virtualizationProps), _this.ListRow);
+      }) : (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
+        disableHeight: true
+      }, function (_ref3) {
+        var width = _ref3.width;
+        return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
+          width: width,
+          height: calculatedHeight
+        }, virtualizationProps), _this.ListRow);
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onAddOrRemoveOption", function (option, event) {
       if (option.disabled) {
         return;
       }
-      var _this$props3 = _this.props,
-        allowExclusions = _this$props3.allowExclusions,
-        options = _this$props3.options,
-        _this$props3$visibleO = _this$props3.visibleOptions,
-        visibleOptions = _this$props3$visibleO === void 0 ? options : _this$props3$visibleO;
-      _this.props.setActiveOptionIndex(visibleOptions.findIndex(function (_ref2) {
-        var label = _ref2.label;
+      var _this$props4 = _this.props,
+        allowExclusions = _this$props4.allowExclusions,
+        options = _this$props4.options,
+        _this$props4$visibleO = _this$props4.visibleOptions,
+        visibleOptions = _this$props4$visibleO === void 0 ? options : _this$props4$visibleO;
+      _this.props.setActiveOptionIndex(visibleOptions.findIndex(function (_ref4) {
+        var label = _ref4.label;
         return label === option.label;
       }), function () {
         if (option.checked === 'on' && allowExclusions) {
@@ -193,10 +243,10 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onAddOption", function (addedOption, event) {
-      var _this$props4 = _this.props,
-        onOptionClick = _this$props4.onOptionClick,
-        options = _this$props4.options,
-        singleSelection = _this$props4.singleSelection;
+      var _this$props5 = _this.props,
+        onOptionClick = _this$props5.onOptionClick,
+        options = _this$props5.options,
+        singleSelection = _this$props5.singleSelection;
       var changedOption = _objectSpread({}, addedOption);
       var updatedOptions = options.map(function (option) {
         // if singleSelection is enabled, uncheck any selected option(s)
@@ -215,10 +265,10 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRemoveOption", function (removedOption, event) {
-      var _this$props5 = _this.props,
-        onOptionClick = _this$props5.onOptionClick,
-        singleSelection = _this$props5.singleSelection,
-        options = _this$props5.options;
+      var _this$props6 = _this.props,
+        onOptionClick = _this$props6.onOptionClick,
+        singleSelection = _this$props6.singleSelection,
+        options = _this$props6.options;
       var changedOption = _objectSpread({}, removedOption);
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
@@ -231,9 +281,9 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExcludeOption", function (excludedOption, event) {
-      var _this$props6 = _this.props,
-        onOptionClick = _this$props6.onOptionClick,
-        options = _this$props6.options;
+      var _this$props7 = _this.props,
+        onOptionClick = _this$props7.onOptionClick,
+        options = _this$props7.options;
       var changedOption = _objectSpread({}, excludedOption);
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
@@ -262,76 +312,44 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props7 = this.props,
-        className = _this$props7.className,
-        options = _this$props7.options,
-        searchValue = _this$props7.searchValue,
-        onOptionClick = _this$props7.onOptionClick,
-        renderOption = _this$props7.renderOption,
-        forcedHeight = _this$props7.height,
-        windowProps = _this$props7.windowProps,
-        rowHeight = _this$props7.rowHeight,
-        activeOptionIndex = _this$props7.activeOptionIndex,
-        makeOptionId = _this$props7.makeOptionId,
-        showIcons = _this$props7.showIcons,
-        singleSelection = _this$props7.singleSelection,
-        visibleOptions = _this$props7.visibleOptions,
-        allowExclusions = _this$props7.allowExclusions,
-        bordered = _this$props7.bordered,
-        paddingSize = _this$props7.paddingSize,
-        searchable = _this$props7.searchable,
-        onFocusBadge = _this$props7.onFocusBadge,
-        listId = _this$props7.listId,
-        setActiveOptionIndex = _this$props7.setActiveOptionIndex,
-        ariaLabel = _this$props7['aria-label'],
-        ariaLabelledby = _this$props7['aria-labelledby'],
-        ariaDescribedby = _this$props7['aria-describedby'],
-        role = _this$props7.role,
-        isVirtualized = _this$props7.isVirtualized,
-        textWrap = _this$props7.textWrap,
-        rest = (0, _objectWithoutProperties2.default)(_this$props7, _excluded3);
+      var _this$props8 = this.props,
+        className = _this$props8.className,
+        options = _this$props8.options,
+        searchValue = _this$props8.searchValue,
+        onOptionClick = _this$props8.onOptionClick,
+        renderOption = _this$props8.renderOption,
+        forcedHeight = _this$props8.height,
+        windowProps = _this$props8.windowProps,
+        rowHeight = _this$props8.rowHeight,
+        activeOptionIndex = _this$props8.activeOptionIndex,
+        makeOptionId = _this$props8.makeOptionId,
+        showIcons = _this$props8.showIcons,
+        singleSelection = _this$props8.singleSelection,
+        visibleOptions = _this$props8.visibleOptions,
+        allowExclusions = _this$props8.allowExclusions,
+        bordered = _this$props8.bordered,
+        paddingSize = _this$props8.paddingSize,
+        searchable = _this$props8.searchable,
+        onFocusBadge = _this$props8.onFocusBadge,
+        listId = _this$props8.listId,
+        setActiveOptionIndex = _this$props8.setActiveOptionIndex,
+        ariaLabel = _this$props8['aria-label'],
+        ariaLabelledby = _this$props8['aria-labelledby'],
+        ariaDescribedby = _this$props8['aria-describedby'],
+        role = _this$props8.role,
+        isVirtualized = _this$props8.isVirtualized,
+        textWrap = _this$props8.textWrap,
+        rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded3);
       var optionArray = visibleOptions || options;
       this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
-      var calculatedHeight = heightIsFull ? false : forcedHeight;
-
-      // If calculatedHeight is still undefined, then calculate it
-      if (calculatedHeight === undefined) {
-        var maxVisibleOptions = 7;
-        var numVisibleOptions = optionArray.length;
-        var numVisibleMoreThanMax = optionArray.length > maxVisibleOptions;
-        if (numVisibleMoreThanMax) {
-          // Show only half of the last one to indicate there's more to scroll to
-          calculatedHeight = (maxVisibleOptions - 0.5) * rowHeight;
-        } else {
-          calculatedHeight = numVisibleOptions * rowHeight;
-        }
-      }
       var classes = (0, _classnames.default)('euiSelectableList', {
         'euiSelectableList-fullHeight': heightIsFull,
         'euiSelectableList-bordered': bordered
       }, className);
       return (0, _react2.jsx)("div", (0, _extends2.default)({
         className: classes
-      }, rest), isVirtualized ? (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
-        disableHeight: !heightIsFull
-      }, function (_ref3) {
-        var width = _ref3.width,
-          height = _ref3.height;
-        return (0, _react2.jsx)(_reactWindow.FixedSizeList, (0, _extends2.default)({
-          ref: _this2.setListRef,
-          outerRef: _this2.removeScrollableTabStop,
-          className: "euiSelectableList__list",
-          "data-skip-axe": "scrollable-region-focusable",
-          width: width,
-          height: calculatedHeight || height,
-          itemCount: optionArray.length,
-          itemData: optionArray,
-          itemSize: rowHeight,
-          innerElementType: "ul",
-          innerRef: _this2.setListBoxRef
-        }, windowProps), _this2.ListRow);
-      }) : (0, _react2.jsx)("div", {
+      }, rest), isVirtualized ? this.renderVirtualizedList(heightIsFull, optionArray) : (0, _react2.jsx)("div", {
         className: "euiSelectableList__list",
         ref: this.removeScrollableTabStop
       }, (0, _react2.jsx)("ul", {