@elastic/eui 116.3.0 → 116.3.1-snapshot.1782148316870

package/optimize/lib/components/date_picker/auto_refresh/refresh_interval.js

@@ -6,13 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiRefreshInterval = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../../services");
 var _i18n = require("../../i18n");
@@ -25,9 +20,7 @@ var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
  * 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
@@ -75,198 +68,181 @@ var getMinInterval = function getMinInterval(minInterval, unit) {
     value = _fromMilliseconds.value;
   return Math.floor(value || 0);
 };
-var EuiRefreshInterval = exports.EuiRefreshInterval = /*#__PURE__*/function (_Component) {
-  function EuiRefreshInterval() {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiRefreshInterval);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var EuiRefreshInterval = exports.EuiRefreshInterval = function EuiRefreshInterval(_ref) {
+  var _ref$isPaused = _ref.isPaused,
+    isPaused = _ref$isPaused === void 0 ? true : _ref$isPaused,
+    _ref$refreshInterval = _ref.refreshInterval,
+    refreshInterval = _ref$refreshInterval === void 0 ? 1000 : _ref$refreshInterval,
+    _ref$minInterval = _ref.minInterval,
+    minInterval = _ref$minInterval === void 0 ? 0 : _ref$minInterval,
+    intervalUnits = _ref.intervalUnits,
+    onRefreshChange = _ref.onRefreshChange;
+  var _useState = (0, _react.useState)(function () {
+      return _objectSpread(_objectSpread({}, fromMilliseconds(refreshInterval || 0, intervalUnits)), {}, {
+        min: getMinInterval(minInterval, intervalUnits)
+      });
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var refreshSelectionId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'euiRefreshInterval'
+  });
+  var _useI18nTimeOptions = (0, _time_options.useI18nTimeOptions)(),
+    refreshUnitsOptions = _useI18nTimeOptions.refreshUnitsOptions;
+  var applyRefreshInterval = function applyRefreshInterval(nextState) {
+    var units = nextState.units,
+      value = nextState.value;
+    if (value === '') {
+      return;
     }
-    _this = _callSuper(this, EuiRefreshInterval, [].concat(args));
-    (0, _defineProperty2.default)(_this, "state", _objectSpread(_objectSpread({}, fromMilliseconds(_this.props.refreshInterval || 0, _this.props.intervalUnits)), {}, {
-      min: getMinInterval(_this.props.minInterval, _this.props.intervalUnits)
-    }));
-    (0, _defineProperty2.default)(_this, "generateId", (0, _services.htmlIdGenerator)());
-    (0, _defineProperty2.default)(_this, "refreshSelectionId", _this.generateId());
-    (0, _defineProperty2.default)(_this, "onValueChange", function (event) {
-      var sanitizedValue = parseFloat(event.target.value);
-      _this.setState({
-        value: isNaN(sanitizedValue) ? '' : sanitizedValue
-      }, _this.applyRefreshInterval);
-    });
-    (0, _defineProperty2.default)(_this, "onUnitsChange", function (event) {
-      var units = event.target.value;
-      _this.setState({
-        units: units,
-        min: getMinInterval(_this.props.minInterval, units)
-      }, _this.applyRefreshInterval);
-    });
-    (0, _defineProperty2.default)(_this, "startRefresh", function () {
-      var onRefreshChange = _this.props.onRefreshChange;
-      var _this$state = _this.state,
-        value = _this$state.value,
-        units = _this$state.units;
-      if (value !== '' && value > 0 && onRefreshChange !== undefined) {
-        onRefreshChange({
-          refreshInterval: toMilliseconds(units, value),
-          intervalUnits: units,
-          isPaused: false
-        });
-      }
+    if (!onRefreshChange) {
+      return;
+    }
+    var refreshIntervalMs = Math.max(toMilliseconds(units, value), minInterval || 0);
+    onRefreshChange({
+      refreshInterval: refreshIntervalMs,
+      intervalUnits: units,
+      isPaused: refreshIntervalMs <= 0 ? true : !!isPaused
     });
-    (0, _defineProperty2.default)(_this, "handleKeyDown", function (_ref) {
-      var key = _ref.key;
-      if (key === 'Enter') {
-        _this.startRefresh();
-      }
+  };
+  var onValueChange = function onValueChange(event) {
+    var sanitizedValue = parseFloat(event.target.value);
+    var newValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
+    var nextState = _objectSpread(_objectSpread({}, state), {}, {
+      value: newValue
     });
-    (0, _defineProperty2.default)(_this, "applyRefreshInterval", function () {
-      var _this$props = _this.props,
-        onRefreshChange = _this$props.onRefreshChange,
-        isPaused = _this$props.isPaused,
-        minInterval = _this$props.minInterval;
-      var _this$state2 = _this.state,
-        units = _this$state2.units,
-        value = _this$state2.value;
-      if (value === '') {
-        return;
-      }
-      if (!onRefreshChange) {
-        return;
-      }
-      var refreshInterval = Math.max(toMilliseconds(units, value), minInterval || 0);
-      onRefreshChange({
-        refreshInterval: refreshInterval,
-        intervalUnits: units,
-        isPaused: refreshInterval <= 0 ? true : !!isPaused
-      });
+    setState(nextState);
+    applyRefreshInterval(nextState);
+  };
+  var onUnitsChange = function onUnitsChange(event) {
+    var units = event.target.value;
+    var nextState = _objectSpread(_objectSpread({}, state), {}, {
+      units: units,
+      min: getMinInterval(minInterval, units)
     });
-    (0, _defineProperty2.default)(_this, "toggleRefresh", function () {
-      var _this$props2 = _this.props,
-        onRefreshChange = _this$props2.onRefreshChange,
-        isPaused = _this$props2.isPaused;
-      var _this$state3 = _this.state,
-        units = _this$state3.units,
-        value = _this$state3.value;
-      if (!onRefreshChange || value === '') {
-        return;
-      }
+    setState(nextState);
+    applyRefreshInterval(nextState);
+  };
+  var startRefresh = function startRefresh() {
+    var value = state.value,
+      units = state.units;
+    if (value !== '' && value > 0 && onRefreshChange !== undefined) {
       onRefreshChange({
         refreshInterval: toMilliseconds(units, value),
         intervalUnits: units,
-        isPaused: !isPaused
+        isPaused: false
       });
+    }
+  };
+  var handleKeyDown = function handleKeyDown(_ref2) {
+    var key = _ref2.key;
+    if (key === 'Enter') {
+      startRefresh();
+    }
+  };
+  var toggleRefresh = function toggleRefresh() {
+    if (!onRefreshChange || state.value === '') {
+      return;
+    }
+    var units = state.units,
+      value = state.value;
+    onRefreshChange({
+      refreshInterval: toMilliseconds(units, value),
+      intervalUnits: units,
+      isPaused: !isPaused
     });
-    (0, _defineProperty2.default)(_this, "renderScreenReaderText", function (refreshUnitsOptions) {
-      var isPaused = _this.props.isPaused;
-      var _this$state4 = _this.state,
-        value = _this$state4.value,
-        units = _this$state4.units;
-      var options = refreshUnitsOptions.find(function (_ref2) {
-        var value = _ref2.value;
-        return value === units;
-      });
-      var optionText = options ? options.text : '';
-      var fullDescription = isPaused ? (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiRefreshInterval.fullDescriptionOff",
-        default: "Refresh is off, interval set to {optionValue} {optionText}.",
-        values: {
-          optionValue: value,
-          optionText: optionText
-        }
-      }) : (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiRefreshInterval.fullDescriptionOn",
-        default: "Refresh is on, interval set to {optionValue} {optionText}.",
-        values: {
-          optionValue: value,
-          optionText: optionText
-        }
-      });
-      return (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-        id: _this.refreshSelectionId
-      }, fullDescription));
+  };
+  var renderScreenReaderText = function renderScreenReaderText() {
+    var value = state.value,
+      units = state.units;
+    var options = refreshUnitsOptions.find(function (_ref3) {
+      var value = _ref3.value;
+      return value === units;
     });
-    return _this;
-  }
-  (0, _inherits2.default)(EuiRefreshInterval, _Component);
-  return (0, _createClass2.default)(EuiRefreshInterval, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isPaused = this.props.isPaused;
-      var _this$state5 = this.state,
-        value = _this$state5.value,
-        units = _this$state5.units,
-        min = _this$state5.min;
-      return (0, _react2.jsx)(_i18n.EuiI18n, {
-        tokens: ['euiRefreshInterval.toggleLabel', 'euiRefreshInterval.toggleAriaLabel', 'euiRefreshInterval.valueAriaLabel', 'euiRefreshInterval.unitsAriaLabel'],
-        defaults: ['Refresh every', 'Toggle refresh', 'Refresh interval value', 'Refresh interval units']
-      }, function (_ref3) {
-        var _ref4 = (0, _slicedToArray2.default)(_ref3, 4),
-          toggleLabel = _ref4[0],
-          toggleAriaLabel = _ref4[1],
-          valueAriaLabel = _ref4[2],
-          unitsAriaLabel = _ref4[3];
-        return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref5) {
-          var refreshUnitsOptions = _ref5.refreshUnitsOptions;
-          return (0, _react2.jsx)(_quick_select_panel.EuiQuickSelectPanel, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-            alignItems: "center",
-            gutterSize: "s",
-            responsive: false,
-            wrap: true
-          }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-            grow: false
-          }, (0, _react2.jsx)(_form.EuiSwitch, {
-            "data-test-subj": "superDatePickerToggleRefreshButton",
-            checked: !isPaused,
-            onChange: _this2.toggleRefresh,
-            compressed: true
-            // The IDs attached to this visible label are unused - we override with our own aria-label
-            ,
-            label: (0, _react2.jsx)(_form.EuiFormLabel, null, toggleLabel),
-            "aria-label": toggleAriaLabel,
-            "aria-labelledby": undefined,
-            "aria-describedby": _this2.refreshSelectionId
-          })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-            style: {
-              minWidth: 60
-            }
-          }, (0, _react2.jsx)(_form.EuiFieldNumber, {
-            compressed: true,
-            fullWidth: true,
-            value: value,
-            min: min,
-            onChange: _this2.onValueChange,
-            onKeyDown: _this2.handleKeyDown,
-            isInvalid: !isPaused && (value === '' || value <= 0),
-            disabled: isPaused,
-            "aria-label": valueAriaLabel,
-            "aria-describedby": _this2.refreshSelectionId,
-            "data-test-subj": "superDatePickerRefreshIntervalInput"
-          })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-            style: {
-              minWidth: 100
-            },
-            grow: 2
-          }, (0, _react2.jsx)(_form.EuiSelect, {
-            compressed: true,
-            fullWidth: true,
-            "aria-label": unitsAriaLabel,
-            "aria-describedby": _this2.refreshSelectionId,
-            value: units,
-            disabled: isPaused,
-            options: refreshUnitsOptions,
-            onChange: _this2.onUnitsChange,
-            onKeyDown: _this2.handleKeyDown,
-            "data-test-subj": "superDatePickerRefreshIntervalUnitsSelect"
-          }))), _this2.renderScreenReaderText(refreshUnitsOptions));
-        });
-      });
-    }
-  }]);
-}(_react.Component);
-(0, _defineProperty2.default)(EuiRefreshInterval, "defaultProps", {
-  isPaused: true,
-  refreshInterval: 1000,
-  minInterval: 0
-});
+    var optionText = options ? options.text : '';
+    var fullDescription = isPaused ? (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiRefreshInterval.fullDescriptionOff",
+      default: "Refresh is off, interval set to {optionValue} {optionText}.",
+      values: {
+        optionValue: value,
+        optionText: optionText
+      }
+    }) : (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiRefreshInterval.fullDescriptionOn",
+      default: "Refresh is on, interval set to {optionValue} {optionText}.",
+      values: {
+        optionValue: value,
+        optionText: optionText
+      }
+    });
+    return (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+      id: refreshSelectionId
+    }, fullDescription));
+  };
+  var value = state.value,
+    units = state.units,
+    min = state.min;
+  return (0, _react2.jsx)(_i18n.EuiI18n, {
+    tokens: ['euiRefreshInterval.toggleLabel', 'euiRefreshInterval.toggleAriaLabel', 'euiRefreshInterval.valueAriaLabel', 'euiRefreshInterval.unitsAriaLabel'],
+    defaults: ['Refresh every', 'Toggle refresh', 'Refresh interval value', 'Refresh interval units']
+  }, function (_ref4) {
+    var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),
+      toggleLabel = _ref5[0],
+      toggleAriaLabel = _ref5[1],
+      valueAriaLabel = _ref5[2],
+      unitsAriaLabel = _ref5[3];
+    return (0, _react2.jsx)(_quick_select_panel.EuiQuickSelectPanel, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      alignItems: "center",
+      gutterSize: "s",
+      responsive: false,
+      wrap: true
+    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false
+    }, (0, _react2.jsx)(_form.EuiSwitch, {
+      "data-test-subj": "superDatePickerToggleRefreshButton",
+      checked: !isPaused,
+      onChange: toggleRefresh,
+      compressed: true
+      // The IDs attached to this visible label are unused - we override with our own aria-label
+      ,
+      label: (0, _react2.jsx)(_form.EuiFormLabel, null, toggleLabel),
+      "aria-label": toggleAriaLabel,
+      "aria-labelledby": undefined,
+      "aria-describedby": refreshSelectionId
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+      style: {
+        minWidth: 60
+      }
+    }, (0, _react2.jsx)(_form.EuiFieldNumber, {
+      compressed: true,
+      fullWidth: true,
+      value: value,
+      min: min,
+      onChange: onValueChange,
+      onKeyDown: handleKeyDown,
+      isInvalid: !isPaused && (value === '' || value <= 0),
+      disabled: isPaused,
+      "aria-label": valueAriaLabel,
+      "aria-describedby": refreshSelectionId,
+      "data-test-subj": "superDatePickerRefreshIntervalInput"
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+      style: {
+        minWidth: 100
+      },
+      grow: 2
+    }, (0, _react2.jsx)(_form.EuiSelect, {
+      compressed: true,
+      fullWidth: true,
+      "aria-label": unitsAriaLabel,
+      "aria-describedby": refreshSelectionId,
+      value: units,
+      disabled: isPaused,
+      options: refreshUnitsOptions,
+      onChange: onUnitsChange,
+      onKeyDown: handleKeyDown,
+      "data-test-subj": "superDatePickerRefreshIntervalUnitsSelect"
+    }))), renderScreenReaderText());
+  });
+};
+EuiRefreshInterval.displayName = 'EuiRefreshInterval';

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

@@ -133,7 +133,7 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     fullDateFormat = "".concat(dateFormat, " ").concat(timeFormat);
   }
 
-  // Set an internal ref on ReactDatePicker's `input` so we can set its :invalid state via useEuiValidatableControl
+  // Set an internal ref on ReactDatePicker's `input` so we can set its `aria-invalid` state via useEuiValidatableControl
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     inputValidityRef = _useState2[0],

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

@@ -403,8 +403,10 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     // Main flyout with child flyout - don't close on ESC
     return false;
   }, [isInManagedContext, hasChildFlyout, isChildFlyout]);
-  var handleClose = (0, _react.useCallback)(function (event) {
-    onClose(event);
+  var handleClose = (0, _react.useCallback)(function (event, reason) {
+    onClose(event, reason ? {
+      reason: reason
+    } : undefined);
   }, [onClose]);
 
   /**
@@ -413,7 +415,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (!isPushed && event.key === _services.keys.ESCAPE && shouldCloseOnEscape) {
       event.preventDefault();
-      handleClose(event);
+      handleClose(event, 'escape');
     }
   }, [handleClose, isPushed, shouldCloseOnEscape]);
   var managedFlyoutIndex = currentZIndexRef.current;
@@ -647,10 +649,10 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     if (outsideClickCloses === false) return undefined;
     if (hasOverlayMask) {
       // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return handleClose(event);
+      if (event.target === maskRef.current) return handleClose(event, 'outside-click');
     } else {
       // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return handleClose(event);
+      if (outsideClickCloses === true) return handleClose(event, 'outside-click');
     }
     // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
     return undefined;
@@ -702,7 +704,9 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   }), !isPushed && screenReaderDescription, shouldRenderMenu ? (0, _react2.jsx)(_flyout_menu.EuiFlyoutMenu, (0, _extends2.default)({}, flyoutMenuProps, {
     titleId: flyoutMenuId
   })) : !hideCloseButton && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, (0, _extends2.default)({}, closeButtonProps, {
-    onClose: handleClose,
+    onClose: function onClose(event) {
+      return handleClose(event, 'close-button');
+    },
     closeButtonPosition: closeButtonPosition,
     side: side
   })), resizable && (0, _react2.jsx)(_flyout_resize_button.EuiFlyoutResizeButton, {

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

@@ -16,13 +16,16 @@ var _button = require("../button");
 var _flex = require("../flex");
 var _list_group = require("../list_group");
 var _popover = require("../popover");
+var _accessibility = require("../accessibility");
+var _text = require("../text");
 var _title = require("../title");
+var _tool_tip = require("../tool_tip");
 var _flyout_close_button = require("./_flyout_close_button");
 var _flyout_menu = require("./flyout_menu.styles");
 var _flyout_menu_context = require("./flyout_menu_context");
 var _i18n = require("../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions", "iconType"];
+var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions", "iconType", "pagination"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -33,6 +36,9 @@ var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton"
 /**
  * History item for the flyout menu history popover
  */
+/**
+ * Pagination configuration for the flyout menu
+ */
 /**
  * Custom action item for the flyout menu component
  */
@@ -88,6 +94,73 @@ var HistoryPopover = function HistoryPopover(_ref) {
     }, item.title);
   })));
 };
+var PaginationControls = function PaginationControls(_ref2) {
+  var pagination = _ref2.pagination,
+    styles = _ref2.styles;
+  var currentIndex = pagination.currentIndex,
+    total = pagination.total,
+    onPrevious = pagination.onPrevious,
+    onNext = pagination.onNext;
+  var prevLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.pagination.previous', 'Previous');
+  var nextLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.pagination.next', 'Next');
+  var isPrevDisabled = currentIndex === 0;
+  var isNextDisabled = currentIndex === total - 1;
+  var prevButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
+    iconType: "chevronSingleUp",
+    color: "text",
+    size: "xs",
+    "aria-label": prevLabel,
+    onClick: onPrevious,
+    isDisabled: isPrevDisabled,
+    "data-test-subj": "euiFlyoutMenuPaginationPrev"
+  });
+  var nextButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
+    iconType: "chevronSingleDown",
+    color: "text",
+    size: "xs",
+    "aria-label": nextLabel,
+    onClick: onNext,
+    isDisabled: isNextDisabled,
+    "data-test-subj": "euiFlyoutMenuPaginationNext"
+  });
+  return (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "xs",
+    alignItems: "center",
+    responsive: false
+  }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, isPrevDisabled ? prevButton : (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: prevLabel,
+    disableScreenReaderOutput: true
+  }, prevButton)), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_text.EuiText, {
+    size: "s",
+    css: styles.euiFlyoutMenu__paginationCounter,
+    "aria-hidden": "true"
+  }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyoutMenu.pagination.counter",
+    default: "{position} of {total}",
+    values: {
+      position: currentIndex + 1,
+      total: total
+    }
+  })), (0, _react2.jsx)(_accessibility.EuiScreenReaderLive, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyoutMenu.pagination.counter",
+    default: "{position} of {total}",
+    values: {
+      position: currentIndex + 1,
+      total: total
+    }
+  }))), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, isNextDisabled ? nextButton : (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: nextLabel,
+    disableScreenReaderOutput: true
+  }, nextButton))));
+};
 
 /**
  * The component for the top menu bar inside a flyout. Since this is a private
@@ -98,24 +171,26 @@ var HistoryPopover = function HistoryPopover(_ref) {
  *
  * @private
  */
-var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
-  var className = _ref2.className,
-    title = _ref2.title,
-    titleId = _ref2.titleId,
-    _ref2$hideTitle = _ref2.hideTitle,
-    hideTitle = _ref2$hideTitle === void 0 ? true : _ref2$hideTitle,
-    hideCloseButton = _ref2.hideCloseButton,
-    _ref2$historyItems = _ref2.historyItems,
-    historyItems = _ref2$historyItems === void 0 ? [] : _ref2$historyItems,
-    showBackButton = _ref2.showBackButton,
-    backButtonProps = _ref2.backButtonProps,
-    customActions = _ref2.customActions,
-    _iconType = _ref2.iconType,
-    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref3) {
+  var className = _ref3.className,
+    title = _ref3.title,
+    titleId = _ref3.titleId,
+    _ref3$hideTitle = _ref3.hideTitle,
+    hideTitle = _ref3$hideTitle === void 0 ? true : _ref3$hideTitle,
+    hideCloseButton = _ref3.hideCloseButton,
+    _ref3$historyItems = _ref3.historyItems,
+    historyItems = _ref3$historyItems === void 0 ? [] : _ref3$historyItems,
+    showBackButton = _ref3.showBackButton,
+    backButtonProps = _ref3.backButtonProps,
+    customActions = _ref3.customActions,
+    _iconType = _ref3.iconType,
+    pagination = _ref3.pagination,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
   var _useContext = (0, _react.useContext)(_flyout_menu_context.EuiFlyoutMenuContext),
     onClose = _useContext.onClose;
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_menu.euiFlyoutMenuStyles);
   var classes = (0, _classnames.default)('euiFlyoutMenu', className);
+  var showPaginationControls = pagination != null && pagination.total > 1;
   var titleNode;
   if (title) {
     titleNode = (0, _react2.jsx)(_title.EuiTitle, {
@@ -126,7 +201,9 @@ var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
     }, title));
   }
   var handleClose = function handleClose(event) {
-    onClose === null || onClose === void 0 || onClose(event);
+    onClose === null || onClose === void 0 || onClose(event, {
+      reason: 'close-button'
+    });
   };
   var closeButton = (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
     onClose: handleClose,
@@ -142,13 +219,16 @@ var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
     justifyContent: "spaceBetween",
     gutterSize: "none",
     responsive: false
-  }, showBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
+  }, showPaginationControls ? (0, _react2.jsx)(PaginationControls, {
+    pagination: pagination,
+    styles: styles
+  }) : (0, _react2.jsx)(_react.default.Fragment, null, showBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, (0, _react2.jsx)(BackButton, backButtonProps)), historyItems.length > 0 && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, (0, _react2.jsx)(HistoryPopover, {
     items: historyItems
-  })), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
+  }))), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, titleNode), (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: true

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

@@ -20,6 +20,7 @@ var euiFlyoutMenuStyles = exports.euiFlyoutMenuStyles = function euiFlyoutMenuSt
     euiFlyoutMenu__container: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 3.5);flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";padding-block-start:calc(", euiTheme.size.m, " * 0.8);.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
     euiFlyoutMenu__spacer: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),
     euiFlyoutMenu__actions: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 1.8);;label:euiFlyoutMenu__actions;"),
-    euiFlyoutMenu__hiddenTitle: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:euiFlyoutMenu__hiddenTitle;")
+    euiFlyoutMenu__hiddenTitle: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:euiFlyoutMenu__hiddenTitle;"),
+    euiFlyoutMenu__paginationCounter: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";white-space:nowrap;;label:euiFlyoutMenu__paginationCounter;")
   };
 };