@elastic/eui 92.2.1 → 93.1.0

package/optimize/lib/components/context_menu/context_menu_item.js

@@ -16,7 +16,7 @@ var _icon = require("../icon");
 var _tool_tip = require("../tool_tip");
 var _context_menu_item = require("./context_menu_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipTitle", "toolTipContent", "toolTipPosition", "toolTipProps", "href", "target", "rel", "size"];
+var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipContent", "toolTipProps", "href", "target", "rel", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -42,10 +42,7 @@ var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
     _disabled = _ref.disabled,
     _ref$layoutAlign = _ref.layoutAlign,
     layoutAlign = _ref$layoutAlign === void 0 ? 'center' : _ref$layoutAlign,
-    toolTipTitle = _ref.toolTipTitle,
     toolTipContent = _ref.toolTipContent,
-    _ref$toolTipPosition = _ref.toolTipPosition,
-    toolTipPosition = _ref$toolTipPosition === void 0 ? 'right' : _ref$toolTipPosition,
     toolTipProps = _ref.toolTipProps,
     href = _ref.href,
     target = _ref.target,
@@ -116,8 +113,7 @@ var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
   if (toolTipContent) {
     var anchorClasses = (0, _classnames.default)('eui-displayBlock', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName);
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
-      title: toolTipTitle ? toolTipTitle : null,
-      position: toolTipPosition
+      position: "right"
     }, toolTipProps, {
       anchorClassName: anchorClasses,
       content: toolTipContent

package/optimize/lib/components/datagrid/body/cell/data_grid_cell.js

@@ -99,6 +99,7 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }))));
   return (0, _react2.jsx)(_react.default.Fragment, null, cellContent, screenReaderText, cellActions);
 });
+EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
 var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EuiDataGridCell, _Component);
   var _super = _createSuper(EuiDataGridCell);

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

@@ -18,8 +18,8 @@ var _i18n = require("../../i18n");
 var _pretty_interval = require("../super_date_picker/pretty_interval");
 var _refresh_interval = require("./refresh_interval");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "onRefreshChange", "isDisabled", "isPaused", "refreshInterval", "readOnly"],
-  _excluded2 = ["className", "onRefreshChange", "isDisabled", "isPaused", "refreshInterval", "shortHand", "size", "color"];
+var _excluded = ["className", "onRefreshChange", "intervalUnits", "isDisabled", "isPaused", "refreshInterval", "minInterval", "readOnly"],
+  _excluded2 = ["className", "onRefreshChange", "intervalUnits", "isDisabled", "isPaused", "refreshInterval", "minInterval", "shortHand", "size", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,11 +32,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var EuiAutoRefresh = function EuiAutoRefresh(_ref) {
   var className = _ref.className,
     onRefreshChange = _ref.onRefreshChange,
+    intervalUnits = _ref.intervalUnits,
     isDisabled = _ref.isDisabled,
     _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,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? true : _ref$readOnly,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -70,7 +73,9 @@ var EuiAutoRefresh = function EuiAutoRefresh(_ref) {
       }, (0, _react2.jsx)("strong", null, (0, _react2.jsx)("small", null, autoRefeshLabel))),
       readOnly: readOnly,
       disabled: isDisabled,
-      value: (0, _pretty_interval.usePrettyInterval)(Boolean(isPaused), refreshInterval)
+      value: (0, _pretty_interval.usePrettyInterval)(Boolean(isPaused), refreshInterval, {
+        unit: intervalUnits
+      })
     }, rest)),
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {
@@ -79,18 +84,23 @@ var EuiAutoRefresh = function EuiAutoRefresh(_ref) {
   }, (0, _react2.jsx)(_refresh_interval.EuiRefreshInterval, {
     onRefreshChange: onRefreshChange,
     isPaused: isPaused,
-    refreshInterval: refreshInterval
+    refreshInterval: refreshInterval,
+    minInterval: minInterval,
+    intervalUnits: intervalUnits
   }));
 };
 exports.EuiAutoRefresh = EuiAutoRefresh;
 var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
   var className = _ref2.className,
     onRefreshChange = _ref2.onRefreshChange,
+    intervalUnits = _ref2.intervalUnits,
     isDisabled = _ref2.isDisabled,
     _ref2$isPaused = _ref2.isPaused,
     isPaused = _ref2$isPaused === void 0 ? true : _ref2$isPaused,
     _ref2$refreshInterval = _ref2.refreshInterval,
     refreshInterval = _ref2$refreshInterval === void 0 ? 1000 : _ref2$refreshInterval,
+    _ref2$minInterval = _ref2.minInterval,
+    minInterval = _ref2$minInterval === void 0 ? 0 : _ref2$minInterval,
     _ref2$shortHand = _ref2.shortHand,
     shortHand = _ref2$shortHand === void 0 ? false : _ref2$shortHand,
     _ref2$size = _ref2.size,
@@ -105,7 +115,9 @@ var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
   var classes = (0, _classnames.default)('euiAutoRefreshButton', className);
   var autoRefeshLabelOff = (0, _i18n.useEuiI18n)('euiAutoRefresh.buttonLabelOff', 'Auto refresh is off');
   var autoRefeshLabelOn = (0, _i18n.useEuiI18n)('euiAutoRefresh.buttonLabelOn', 'Auto refresh is on and set to {prettyInterval}', {
-    prettyInterval: (0, _pretty_interval.usePrettyInterval)(Boolean(isPaused), refreshInterval)
+    prettyInterval: (0, _pretty_interval.usePrettyInterval)(Boolean(isPaused), refreshInterval, {
+      unit: intervalUnits
+    })
   });
   return (0, _react2.jsx)(_popover.EuiPopover, {
     button: (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
@@ -120,7 +132,10 @@ var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
       iconType: "timeRefresh",
       title: isPaused ? autoRefeshLabelOff : autoRefeshLabelOn,
       isDisabled: isDisabled
-    }, rest), (0, _pretty_interval.usePrettyInterval)(Boolean(isPaused), refreshInterval, shortHand)),
+    }, rest), (0, _pretty_interval.usePrettyInterval)(Boolean(isPaused), refreshInterval, {
+      shortHand: shortHand,
+      unit: intervalUnits
+    })),
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {
       setIsPopoverOpen(false);
@@ -129,7 +144,9 @@ var EuiAutoRefreshButton = function EuiAutoRefreshButton(_ref2) {
   }, (0, _react2.jsx)(_refresh_interval.EuiRefreshInterval, {
     onRefreshChange: onRefreshChange,
     isPaused: isPaused,
-    refreshInterval: refreshInterval
+    refreshInterval: refreshInterval,
+    minInterval: minInterval,
+    intervalUnits: intervalUnits
   }));
 };
 exports.EuiAutoRefreshButton = EuiAutoRefreshButton;

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'