@elastic/eui 93.0.0 → 93.1.0

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

@@ -23,6 +23,8 @@ var _time_options = require("../super_date_picker/time_options");
 var _react2 = require("@emotion/react");
 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /*
                                                                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -34,17 +36,17 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var MILLISECONDS_IN_SECOND = 1000;
 var MILLISECONDS_IN_MINUTE = MILLISECONDS_IN_SECOND * 60;
 var MILLISECONDS_IN_HOUR = MILLISECONDS_IN_MINUTE * 60;
-function fromMilliseconds(milliseconds) {
+var fromMilliseconds = function fromMilliseconds(milliseconds, unit) {
   var round = function round(value) {
     return parseFloat(value.toFixed(2));
   };
-  if (milliseconds > MILLISECONDS_IN_HOUR) {
+  if (unit === 'h' || !unit && milliseconds > MILLISECONDS_IN_HOUR) {
     return {
       units: 'h',
       value: round(milliseconds / MILLISECONDS_IN_HOUR)
     };
   }
-  if (milliseconds > MILLISECONDS_IN_MINUTE) {
+  if (unit === 'm' || !unit && milliseconds > MILLISECONDS_IN_MINUTE) {
     return {
       units: 'm',
       value: round(milliseconds / MILLISECONDS_IN_MINUTE)
@@ -54,8 +56,8 @@ function fromMilliseconds(milliseconds) {
     units: 's',
     value: round(milliseconds / MILLISECONDS_IN_SECOND)
   };
-}
-function toMilliseconds(units, value) {
+};
+var toMilliseconds = function toMilliseconds(units, value) {
   switch (units) {
     case 'h':
       return Math.round(value * MILLISECONDS_IN_HOUR);
@@ -65,7 +67,13 @@ function toMilliseconds(units, value) {
     default:
       return Math.round(value * MILLISECONDS_IN_SECOND);
   }
-}
+};
+var getMinInterval = function getMinInterval(minInterval, unit) {
+  if (!minInterval) return 0;
+  var _fromMilliseconds = fromMilliseconds(minInterval, unit),
+    value = _fromMilliseconds.value;
+  return Math.floor(value || 0);
+};
 var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EuiRefreshInterval, _Component);
   var _super = _createSuper(EuiRefreshInterval);
@@ -76,7 +84,9 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", fromMilliseconds(_this.props.refreshInterval || 0));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", _objectSpread(_objectSpread({}, fromMilliseconds(_this.props.refreshInterval || 0, _this.props.intervalUnits)), {}, {
+      min: getMinInterval(_this.props.minInterval, _this.props.intervalUnits)
+    }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "generateId", (0, _services.htmlIdGenerator)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "legendId", _this.generateId());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "refreshSelectionId", _this.generateId());
@@ -87,8 +97,10 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       }, _this.applyRefreshInterval);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onUnitsChange", function (event) {
+      var units = event.target.value;
       _this.setState({
-        units: event.target.value
+        units: units,
+        min: getMinInterval(_this.props.minInterval, units)
       }, _this.applyRefreshInterval);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startRefresh", function () {
@@ -99,6 +111,7 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       if (value !== '' && value > 0 && onRefreshChange !== undefined) {
         onRefreshChange({
           refreshInterval: toMilliseconds(units, value),
+          intervalUnits: units,
           isPaused: false
         });
       }
@@ -112,7 +125,8 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyRefreshInterval", function () {
       var _this$props = _this.props,
         onRefreshChange = _this$props.onRefreshChange,
-        isPaused = _this$props.isPaused;
+        isPaused = _this$props.isPaused,
+        minInterval = _this$props.minInterval;
       var _this$state2 = _this.state,
         units = _this$state2.units,
         value = _this$state2.value;
@@ -122,9 +136,10 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       if (!onRefreshChange) {
         return;
       }
-      var refreshInterval = toMilliseconds(units, value);
+      var refreshInterval = Math.max(toMilliseconds(units, value), minInterval || 0);
       onRefreshChange({
         refreshInterval: refreshInterval,
+        intervalUnits: units,
         isPaused: refreshInterval <= 0 ? true : !!isPaused
       });
     });
@@ -140,6 +155,7 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       }
       onRefreshChange({
         refreshInterval: toMilliseconds(units, value),
+        intervalUnits: units,
         isPaused: !isPaused
       });
     });
@@ -181,7 +197,8 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
       var isPaused = this.props.isPaused;
       var _this$state5 = this.state,
         value = _this$state5.value,
-        units = _this$state5.units;
+        units = _this$state5.units,
+        min = _this$state5.min;
       return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref3) {
         var refreshUnitsOptions = _ref3.refreshUnitsOptions;
         return (0, _react2.jsx)("fieldset", {
@@ -214,6 +231,7 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
           compressed: true,
           fullWidth: true,
           value: value,
+          min: min,
           onChange: _this2.onValueChange,
           onKeyDown: _this2.handleKeyDown,
           isInvalid: !isPaused && (value === '' || value <= 0),
@@ -246,5 +264,6 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
 exports.EuiRefreshInterval = EuiRefreshInterval;
 (0, _defineProperty2.default)(EuiRefreshInterval, "defaultProps", {
   isPaused: true,
-  refreshInterval: 1000
+  refreshInterval: 1000,
+  minInterval: 0
 });

package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -14,7 +14,7 @@ var _popover = require("../../../popover");
 var _pretty_duration = require("../pretty_duration");
 var _date_popover_content = require("./date_popover_content");
 var _react2 = require("@emotion/react");
-var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
+var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,6 +30,7 @@ var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     needsUpdating = props.needsUpdating,
     value = props.value,
     buttonProps = props.buttonProps,
+    canRoundRelativeUnits = props.canRoundRelativeUnits,
     roundUp = props.roundUp,
     onChange = props.onChange,
     locale = props.locale,
@@ -49,7 +50,11 @@ var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     'euiDatePopoverButton-needsUpdating': needsUpdating,
     'euiDatePopoverButton-disabled': isDisabled
   }]);
-  var formattedValue = (0, _pretty_duration.useFormatTimeString)(value, dateFormat, roundUp, locale);
+  var formattedValue = (0, _pretty_duration.useFormatTimeString)(value, dateFormat, {
+    roundUp: roundUp,
+    locale: locale,
+    canRoundRelativeUnits: canRoundRelativeUnits
+  });
   var title = formattedValue;
   var invalidTitle = (0, _i18n.useEuiI18n)('euiDatePopoverButton.invalidTitle', 'Invalid date: {title}', {
     title: title
@@ -63,6 +68,7 @@ var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     title = outdatedTitle;
   }
   var button = (0, _react2.jsx)("button", (0, _extends2.default)({
+    type: "button",
     onClick: onPopoverToggle,
     className: classes,
     title: title,
@@ -79,6 +85,7 @@ var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
   }, rest), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
     value: value,
     roundUp: roundUp,
+    canRoundRelativeUnits: canRoundRelativeUnits,
     onChange: onChange,
     dateFormat: dateFormat,
     timeFormat: timeFormat,

package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_content.js

@@ -26,6 +26,8 @@ var _react2 = require("@emotion/react");
 
 var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
   var value = _ref.value,
+    _ref$canRoundRelative = _ref.canRoundRelativeUnits,
+    canRoundRelativeUnits = _ref$canRoundRelative === void 0 ? true : _ref$canRoundRelative,
     _ref$roundUp = _ref.roundUp,
     roundUp = _ref$roundUp === void 0 ? false : _ref$roundUp,
     onChange = _ref.onChange,
@@ -73,7 +75,7 @@ var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
     content: (0, _react2.jsx)(_relative_tab.EuiRelativeTab, {
       dateFormat: dateFormat,
       locale: locale,
-      value: (0, _date_modes.toAbsoluteString)(value, roundUp),
+      value: canRoundRelativeUnits ? (0, _date_modes.toAbsoluteString)(value, roundUp) : value,
       onChange: onChange,
       roundUp: roundUp,
       position: position,

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

@@ -148,9 +148,15 @@ var useRelativeDurationRoundedI18n = function useRelativeDurationRoundedI18n(pre
  */
 
 var ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
-var useFormatTimeString = function useFormatTimeString(timeString, dateFormat) {
-  var roundUp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var locale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'en';
+var useFormatTimeString = function useFormatTimeString(timeString, dateFormat, options) {
+  var _ref15 = options || {},
+    _ref15$locale = _ref15.locale,
+    locale = _ref15$locale === void 0 ? 'en' : _ref15$locale,
+    _ref15$roundUp = _ref15.roundUp,
+    roundUp = _ref15$roundUp === void 0 ? false : _ref15$roundUp,
+    _ref15$canRoundRelati = _ref15.canRoundRelativeUnits,
+    canRoundRelativeUnits = _ref15$canRoundRelati === void 0 ? true : _ref15$canRoundRelati;
+
   // i18n'd strings
   var nowDisplay = (0, _i18n.useEuiI18n)('euiPrettyDuration.now', 'now');
   var invalidDateDisplay = (0, _i18n.useEuiI18n)('euiPrettyDuration.invalid', 'Invalid date');
@@ -168,8 +174,27 @@ var useFormatTimeString = function useFormatTimeString(timeString, dateFormat) {
     return invalidDateDisplay;
   }
   if (_moment.default.isMoment(tryParse)) {
-    return "~ ".concat(tryParse.locale(locale).fromNow());
+    if (canRoundRelativeUnits) {
+      return "~ ".concat(tryParse.locale(locale).fromNow());
+    } else {
+      // To force a specific unit to be used, we need to skip moment.fromNow()
+      // entirely and write our own custom moment formatted output.
+      var _parseRelativeParts = (0, _relative_utils.parseRelativeParts)(timeString),
+        count = _parseRelativeParts.count,
+        _unit = _parseRelativeParts.unit;
+      var isFuture = _unit.endsWith('+');
+      var unit = isFuture ? _unit.slice(0, -1) : _unit; // We want just the unit letter without the trailing +
+
+      // @see https://momentjs.com/docs/#/customization/relative-time/
+      var relativeUnitKey = count === 1 ? unit : unit + unit;
+
+      // @see https://momentjs.com/docs/#/i18n/locale-data/
+      return _moment.default.localeData().pastFuture(isFuture ? count : count * -1, _moment.default.localeData().relativeTime(count, false, relativeUnitKey, false)
+      // Booleans don't seem to actually matter for output, .pastFuture() handles that
+      );
+    }
   }
+
   return timeString;
 };
 
@@ -177,11 +202,11 @@ var useFormatTimeString = function useFormatTimeString(timeString, dateFormat) {
  * Pretty duration hook+component
  */
 exports.useFormatTimeString = useFormatTimeString;
-var usePrettyDuration = function usePrettyDuration(_ref15) {
-  var timeFrom = _ref15.timeFrom,
-    timeTo = _ref15.timeTo,
-    quickRanges = _ref15.quickRanges,
-    dateFormat = _ref15.dateFormat;
+var usePrettyDuration = function usePrettyDuration(_ref16) {
+  var timeFrom = _ref16.timeFrom,
+    timeTo = _ref16.timeTo,
+    quickRanges = _ref16.quickRanges,
+    dateFormat = _ref16.dateFormat;
   var prettyDuration = '';
 
   /**
@@ -220,7 +245,9 @@ var usePrettyDuration = function usePrettyDuration(_ref15) {
    * If it's none of the above, display basic fallback copy
    */
   var displayFrom = useFormatTimeString(timeFrom, dateFormat);
-  var displayTo = useFormatTimeString(timeTo, dateFormat, true);
+  var displayTo = useFormatTimeString(timeTo, dateFormat, {
+    roundUp: true
+  });
   var fallbackDuration = (0, _i18n.useEuiI18n)('euiPrettyDuration.fallbackDuration', '{displayFrom} to {displayTo}', {
     displayFrom: displayFrom,
     displayTo: displayTo
@@ -231,11 +258,11 @@ var usePrettyDuration = function usePrettyDuration(_ref15) {
   return prettyDuration;
 };
 exports.usePrettyDuration = usePrettyDuration;
-var PrettyDuration = function PrettyDuration(_ref16) {
-  var timeFrom = _ref16.timeFrom,
-    timeTo = _ref16.timeTo,
-    quickRanges = _ref16.quickRanges,
-    dateFormat = _ref16.dateFormat;
+var PrettyDuration = function PrettyDuration(_ref17) {
+  var timeFrom = _ref17.timeFrom,
+    timeTo = _ref17.timeTo,
+    quickRanges = _ref17.quickRanges,
+    dateFormat = _ref17.dateFormat;
   var prettyDuration = usePrettyDuration({
     timeFrom: timeFrom,
     timeTo: timeTo,
@@ -250,9 +277,9 @@ var PrettyDuration = function PrettyDuration(_ref16) {
  */
 exports.PrettyDuration = PrettyDuration;
 var hasRangeMatch = function hasRangeMatch(timeFrom, timeTo, ranges) {
-  return ranges.find(function (_ref17) {
-    var start = _ref17.start,
-      end = _ref17.end;
+  return ranges.find(function (_ref18) {
+    var start = _ref18.start,
+      end = _ref18.end;
     return timeFrom === start && timeTo === end;
   });
 };

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

@@ -13,10 +13,18 @@ var _i18n = require("../../i18n");
  * Side Public License, v 1.
  */
 
-var MS_IN_SECOND = 1000;
-var MS_IN_MINUTE = 60 * MS_IN_SECOND;
-var MS_IN_HOUR = 60 * MS_IN_MINUTE;
-var MS_IN_DAY = 24 * MS_IN_HOUR;
+var MS_INTERVALS = {
+  s: 1000,
+  get m() {
+    return 60 * this.s;
+  },
+  get h() {
+    return 60 * this.m;
+  },
+  get d() {
+    return 24 * this.h;
+  }
+};
 /**
  * Pretty interval i18n strings
  *
@@ -65,23 +73,31 @@ var usePrettyIntervalI18n = function usePrettyIntervalI18n(interval) {
     }
   };
 };
-var usePrettyInterval = function usePrettyInterval(isPaused, intervalInMs) {
-  var shortHand = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+var usePrettyInterval = function usePrettyInterval(isPaused, intervalInMs, options) {
+  var _ref5 = options || {},
+    _ref5$shortHand = _ref5.shortHand,
+    shortHand = _ref5$shortHand === void 0 ? false : _ref5$shortHand,
+    unit = _ref5.unit;
   var prettyInterval = '';
   var interval;
   var unitId;
-  if (intervalInMs < MS_IN_MINUTE) {
-    interval = Math.round(intervalInMs / MS_IN_SECOND);
-    unitId = 's';
-  } else if (intervalInMs < MS_IN_HOUR) {
-    interval = Math.round(intervalInMs / MS_IN_MINUTE);
-    unitId = 'm';
-  } else if (intervalInMs < MS_IN_DAY) {
-    interval = Math.round(intervalInMs / MS_IN_HOUR);
-    unitId = 'h';
+  if (unit) {
+    unitId = unit;
+    interval = Math.round(intervalInMs / MS_INTERVALS[unit]);
   } else {
-    interval = Math.round(intervalInMs / MS_IN_DAY);
-    unitId = 'd';
+    if (intervalInMs < MS_INTERVALS.m) {
+      interval = Math.round(intervalInMs / MS_INTERVALS.s);
+      unitId = 's';
+    } else if (intervalInMs < MS_INTERVALS.h) {
+      interval = Math.round(intervalInMs / MS_INTERVALS.m);
+      unitId = 'm';
+    } else if (intervalInMs < MS_INTERVALS.d) {
+      interval = Math.round(intervalInMs / MS_INTERVALS.h);
+      unitId = 'h';
+    } else {
+      interval = Math.round(intervalInMs / MS_INTERVALS.d);
+      unitId = 'd';
+    }
   }
   var prettyIntervalI18n = usePrettyIntervalI18n(interval);
   prettyInterval = shortHand ? prettyIntervalI18n.shorthand[unitId] : prettyIntervalI18n[unitId];

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

@@ -106,6 +106,7 @@ var EuiQuickSelectPanels = function EuiQuickSelectPanels(_ref3) {
     customQuickSelectRender = _ref3.customQuickSelectRender,
     isPaused = _ref3.isPaused,
     refreshInterval = _ref3.refreshInterval,
+    intervalUnits = _ref3.intervalUnits,
     applyRefreshInterval = _ref3.applyRefreshInterval,
     applyTime = _ref3.applyTime,
     prevQuickSelect = _ref3.prevQuickSelect;
@@ -129,7 +130,8 @@ var EuiQuickSelectPanels = function EuiQuickSelectPanels(_ref3) {
   var refreshIntervalElement = applyRefreshInterval && (0, _react2.jsx)(_refresh_interval.EuiRefreshInterval, {
     onRefreshChange: applyRefreshInterval,
     isPaused: isPaused,
-    refreshInterval: refreshInterval
+    refreshInterval: refreshInterval,
+    intervalUnits: intervalUnits
   });
   var customQuickSelectPanelsElement = (0, _react.useMemo)(function () {
     if (!customQuickSelectPanels) {

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

@@ -173,6 +173,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRefreshChange", function (_ref3) {
       var refreshInterval = _ref3.refreshInterval,
+        intervalUnits = _ref3.intervalUnits,
         isPaused = _ref3.isPaused;
       _this.stopInterval();
       if (!isPaused) {
@@ -181,7 +182,8 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       if (_this.props.onRefreshChange) {
         _this.props.onRefreshChange({
           refreshInterval: refreshInterval,
-          isPaused: isPaused
+          isPaused: isPaused,
+          intervalUnits: intervalUnits
         });
       }
     });
@@ -218,6 +220,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         onRefreshChange = _this$props2.onRefreshChange,
         recentlyUsedRanges = _this$props2.recentlyUsedRanges,
         refreshInterval = _this$props2.refreshInterval,
+        refreshIntervalUnits = _this$props2.refreshIntervalUnits,
         isPaused = _this$props2.isPaused,
         isDisabled = _this$props2.isDisabled;
       return (0, _react2.jsx)(_quick_select_popover.EuiQuickSelectPopover, {
@@ -232,6 +235,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isPaused: isPaused,
         recentlyUsedRanges: recentlyUsedRanges,
         refreshInterval: refreshInterval,
+        intervalUnits: refreshIntervalUnits,
         start: start,
         timeOptions: timeOptions
       });
@@ -249,9 +253,12 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isQuickSelectOnly = _this$props3.isQuickSelectOnly,
         showUpdateButton = _this$props3.showUpdateButton,
         commonlyUsedRanges = _this$props3.commonlyUsedRanges,
+        canRoundRelativeUnits = _this$props3.canRoundRelativeUnits,
         timeOptions = _this$props3.timeOptions,
         dateFormat = _this$props3.dateFormat,
         refreshInterval = _this$props3.refreshInterval,
+        refreshMinInterval = _this$props3.refreshMinInterval,
+        refreshIntervalUnits = _this$props3.refreshIntervalUnits,
         isPaused = _this$props3.isPaused,
         isDisabled = _this$props3.isDisabled,
         isLoading = _this$props3.isLoading,
@@ -262,6 +269,8 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         onFocus = _this$props3.onFocus;
       var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
+        minInterval: refreshMinInterval,
+        intervalUnits: refreshIntervalUnits,
         isDisabled: !!isDisabled,
         isPaused: isPaused,
         onRefreshChange: _this.onRefreshChange,
@@ -283,6 +292,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       var isDisabledDisplay = (0, _predicate.isObject)(isDisabled) && (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled.display);
       if (isDisabledDisplay || showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
         return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
+          type: "button",
           className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
@@ -315,6 +325,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            canRoundRelativeUnits: canRoundRelativeUnits,
             isOpen: _this.state.isStartDatePopoverOpen,
             onPopoverToggle: _this.onStartDatePopoverToggle,
             onPopoverClose: _this.onStartDatePopoverClose,
@@ -335,6 +346,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            canRoundRelativeUnits: canRoundRelativeUnits,
             roundUp: true,
             isOpen: _this.state.isEndDatePopoverOpen,
             onPopoverToggle: _this.onEndDatePopoverToggle,
@@ -392,6 +404,8 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isPaused = _this$props6.isPaused,
         onRefreshChange = _this$props6.onRefreshChange,
         refreshInterval = _this$props6.refreshInterval,
+        refreshMinInterval = _this$props6.refreshMinInterval,
+        refreshIntervalUnits = _this$props6.refreshIntervalUnits,
         showUpdateButton = _this$props6.showUpdateButton,
         dataTestSubj = _this$props6['data-test-subj'],
         _width = _this$props6.width,
@@ -418,7 +432,9 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       }, isAutoRefreshOnly && onRefreshChange ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefresh, {
         isPaused: isPaused,
         refreshInterval: refreshInterval,
-        onRefreshChange: onRefreshChange,
+        minInterval: refreshMinInterval,
+        intervalUnits: refreshIntervalUnits,
+        onRefreshChange: this.onRefreshChange,
         fullWidth: width === 'full',
         compressed: compressed,
         isDisabled: !!isDisabled,
@@ -459,6 +475,7 @@ exports.EuiSuperDatePickerInternal = EuiSuperDatePickerInternal;
   recentlyUsedRanges: [],
   refreshInterval: 1000,
   showUpdateButton: true,
+  canRoundRelativeUnits: true,
   start: 'now-15m',
   timeFormat: 'HH:mm',
   width: 'restricted'

package/optimize/lib/components/highlight/_highlight_all.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightAll = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
+var _react2 = require("@emotion/react");
+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; }
+/*
+ * 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.
+ */
+
+/**
+ * Internal subcomponent with logic for highlighting all occurrences
+ * of a search value within a subject
+ *
+ * Uses regex rather than indexOf/while loops for easier dev maintainability
+ */
+var HighlightAll = function HighlightAll(_ref) {
+  var searchSubject = _ref.searchSubject,
+    _searchValue = _ref.searchValue,
+    isStrict = _ref.isStrict,
+    _ref$highlightCompone = _ref.highlightComponent,
+    HighlightComponent = _ref$highlightCompone === void 0 ? 'mark' : _ref$highlightCompone;
+  var searchValue = (0, _react.useMemo)(function () {
+    return Array.isArray(_searchValue) ? _searchValue.map(_escapeRegExp.default).join('|') : (0, _escapeRegExp.default)(_searchValue);
+  }, [_searchValue]);
+  var chunks = (0, _react.useMemo)(function () {
+    var regex = new RegExp(searchValue, isStrict ? 'g' : 'gi');
+    var matches = (0, _toConsumableArray2.default)(searchSubject.matchAll(regex)).map(function (match) {
+      return {
+        start: match.index || 0,
+        end: (match.index || 0) + match[0].length
+      };
+    });
+    return fillInChunks(matches, searchSubject.length);
+  }, [searchValue, searchSubject, isStrict]);
+  return (0, _react2.jsx)(_react.default.Fragment, null, chunks.map(function (chunk) {
+    var end = chunk.end,
+      highlight = chunk.highlight,
+      start = chunk.start;
+    var value = searchSubject.substring(start, end);
+    return highlight ? (0, _react2.jsx)(HighlightComponent, {
+      key: start
+    }, value) : value;
+  }));
+};
+
+/**
+ * Chunk utility
+ */
+exports.HighlightAll = HighlightAll;
+var fillInChunks = function fillInChunks(chunksToHighlight, totalLength) {
+  var allChunks = [];
+  var append = function append(start, end, highlight) {
+    if (end - start > 0) {
+      allChunks.push({
+        start: start,
+        end: end,
+        highlight: highlight
+      });
+    }
+  };
+  if (chunksToHighlight.length === 0) {
+    append(0, totalLength, false);
+  } else {
+    var lastIndex = 0;
+    chunksToHighlight.forEach(function (chunk) {
+      append(lastIndex, chunk.start, false);
+      append(chunk.start, chunk.end, true);
+      lastIndex = chunk.end;
+    });
+    append(lastIndex, totalLength, false);
+  }
+  return allChunks;
+};

package/optimize/lib/components/highlight/_highlight_first.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightFirst = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+/*
+ * 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.
+ */
+
+/**
+ * Internal subcomponent with logic for highlighting only the first occurrence
+ * of a search value within a subject
+ *
+ * Uses indexOf for performance (which does matter for, e.g. EuiSelectable searching)
+ */
+var HighlightFirst = function HighlightFirst(_ref) {
+  var searchSubject = _ref.searchSubject,
+    searchValue = _ref.searchValue,
+    isStrict = _ref.isStrict,
+    _ref$highlightCompone = _ref.highlightComponent,
+    HighlightComponent = _ref$highlightCompone === void 0 ? 'mark' : _ref$highlightCompone;
+  if (Array.isArray(searchValue)) {
+    throw new Error('Cannot parse multiple search strings without `highlightAll` enabled');
+  }
+  var normalizedSearchSubject = isStrict ? searchSubject : searchSubject.toLowerCase();
+  var normalizedSearchValue = isStrict ? searchValue : searchValue.toLowerCase();
+  var indexOfMatch = normalizedSearchSubject.indexOf(normalizedSearchValue);
+  if (indexOfMatch === -1) {
+    return (0, _react2.jsx)(_react.default.Fragment, null, searchSubject);
+  }
+  var preMatch = searchSubject.substring(0, indexOfMatch);
+  var match = searchSubject.substring(indexOfMatch, indexOfMatch + searchValue.length);
+  var postMatch = searchSubject.substring(indexOfMatch + searchValue.length);
+  return (
+    // Note: React 16/17 will render empty strings in the DOM. The
+    // `|| undefined` prevents this & keeps snapshots the same for all versions
+    (0, _react2.jsx)(_react.default.Fragment, null, preMatch || undefined, (0, _react2.jsx)(HighlightComponent, null, match), postMatch || undefined)
+  );
+};
+exports.HighlightFirst = HighlightFirst;