@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

package/lib/components/date_picker/super_date_picker/date_popover/relative_tab.js

@@ -18,10 +18,12 @@ var _popover = require("../../../popover");
 var _spacer = require("../../../spacer");
 var _date_modes = require("../date_modes");
 var _relative_utils = require("../relative_utils");
+var _timezone_display = require("./timezone_display");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -43,7 +45,9 @@ var EuiRelativeTab = exports.EuiRelativeTab = function EuiRelativeTab(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     roundUp = _ref.roundUp,
-    labelPrefix = _ref.labelPrefix;
+    labelPrefix = _ref.labelPrefix,
+    _ref$timeZoneDisplayP = _ref.timeZoneDisplayProps,
+    timeZoneDisplayProps = _ref$timeZoneDisplayP === void 0 ? {} : _ref$timeZoneDisplayP;
   var initialRelativeParts = (0, _react.useRef)((0, _relative_utils.parseRelativeParts)(value));
   var roundUnit = initialRelativeParts.current.roundUnit;
   var _useState = (0, _react.useState)(initialRelativeParts.current.unit),
@@ -91,6 +95,7 @@ var EuiRelativeTab = exports.EuiRelativeTab = function EuiRelativeTab(_ref) {
     return parsedValue.locale(locale || 'en').format(dateFormat);
   }, [isInvalid, value, roundUp, locale, dateFormat]);
   var relativeDateInputNumberDescriptionId = (0, _services.useGeneratedHtmlId)();
+  var timeZomeDescriptionId = (0, _services.useGeneratedHtmlId)();
   var numberAriaLabel = (0, _i18n.useEuiI18n)('euiRelativeTab.numberInputLabel', 'Time span amount');
   var numberInputError = (0, _i18n.useEuiI18n)('euiRelativeTab.numberInputError', 'Must be >= 0');
   var dateInputError = (0, _i18n.useEuiI18n)('euiRelativeTab.dateInputError', 'Must be a valid range');
@@ -124,6 +129,7 @@ var EuiRelativeTab = exports.EuiRelativeTab = function EuiRelativeTab(_ref) {
     compressed: true,
     value: formattedValue,
     readOnly: true,
+    "aria-describedby": timeZomeDescriptionId,
     prepend: (0, _react2.jsx)(_form.EuiFormLabel, null, labelPrefix)
   }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
     id: relativeDateInputNumberDescriptionId
@@ -133,7 +139,9 @@ var EuiRelativeTab = exports.EuiRelativeTab = function EuiRelativeTab(_ref) {
     values: {
       unit: unit
     }
-  })))), (0, _react2.jsx)(_popover.EuiPopoverFooter, {
+  })))), (0, _react2.jsx)(_timezone_display.EuiTimeZoneDisplay, _extends({
+    id: timeZomeDescriptionId
+  }, timeZoneDisplayProps)), (0, _react2.jsx)(_popover.EuiPopoverFooter, {
     paddingSize: "s"
   }, (0, _react2.jsx)(_form.EuiSwitch, {
     "data-test-subj": "superDatePickerRelativeDateRoundSwitch",
@@ -163,5 +171,23 @@ EuiRelativeTab.propTypes = {
       label: _propTypes.default.string,
       start: _propTypes.default.oneOfType([_propTypes.default.oneOf(["now"]), _propTypes.default.string.isRequired]).isRequired
     }).isRequired).isRequired
-  }).isRequired
+  }).isRequired,
+  timeZoneDisplayProps: _propTypes.default.shape({
+    /**
+       * A valid time zone name, from the IANA database, e.g. "America/Los_Angeles".
+       *
+       * @link https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+       */
+    timeZone: _propTypes.default.string,
+    /**
+       * Render prop function to add additional content to the time zone display.
+       * Useful for e.g. adding links to documentation or setting pages.
+       */
+    customRender: _propTypes.default.func,
+    /**
+       * Reference date to be used while resolving the UTC offset.
+       * Only useful for edge cases involving daylight saving time.
+       */
+    date: _propTypes.default.any
+  })
 };

package/lib/components/date_picker/super_date_picker/date_popover/timezone_display.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiTimeZoneDisplay = void 0;
+exports.useEuiUTCOffsetDisplay = useEuiUTCOffsetDisplay;
+var _react = _interopRequireDefault(require("react"));
+var _timezone_display = require("./timezone_display.styles");
+var _services = require("../../../../services");
+var _flex = require("../../../flex");
+var _icon = require("../../../icon");
+var _text = require("../../../text");
+var _react2 = require("@emotion/react");
+var _excluded = ["timeZone", "customRender", "date"];
+/*
+ * 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.
+ */
+/**
+ * Available elements to render passed to the
+ * `customRender` render function.
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+/**
+ * Display time zone information.
+ */
+var EuiTimeZoneDisplay = exports.EuiTimeZoneDisplay = function EuiTimeZoneDisplay(_ref) {
+  var timeZone = _ref.timeZone,
+    customRender = _ref.customRender,
+    date = _ref.date,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var color = 'subdued';
+  var styles = (0, _services.useEuiMemoizedStyles)(_timezone_display.euiTimeZoneDisplayStyles);
+  var referenceDate = date ? date.toDate() : undefined;
+  var _useEuiUTCOffsetDispl = useEuiUTCOffsetDisplay(timeZone !== null && timeZone !== void 0 ? timeZone : 'Browser', referenceDate),
+    utc = _useEuiUTCOffsetDispl.utc,
+    name = _useEuiUTCOffsetDispl.name,
+    isInvalid = _useEuiUTCOffsetDispl.isInvalid;
+  if (!timeZone || isInvalid) return null;
+  var label = !name ? utc : "".concat(utc, " (").concat(name, ")");
+  var nameDisplay = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "globe",
+    color: color
+  }), (0, _react2.jsx)(_text.EuiText, {
+    component: "span",
+    color: color,
+    size: "s"
+  }, label));
+  return (0, _react2.jsx)(_flex.EuiFlexGroup, _extends({
+    css: styles.euiTimeZoneDisplay,
+    alignItems: "center",
+    gutterSize: "xs",
+    "data-test-subj": "euiTimeZoneDisplay",
+    "aria-label": label
+  }, rest), typeof customRender === 'function' ? customRender({
+    nameDisplay: nameDisplay
+  }) : nameDisplay);
+};
+
+/**
+ * Get the UTC offset display in hours e.g. "UTC+2" from time zone name.
+ *
+ * @param timeZoneName IANA time zone name
+ * @param [date] Reference date to get offset with Intl.DateTimeFormat
+ */
+function useEuiUTCOffsetDisplay(timeZoneName, date) {
+  try {
+    var _formattedParts$find;
+    if (timeZoneName === 'UTC') {
+      return {
+        utc: 'UTC',
+        name: '',
+        isInvalid: false
+      };
+    }
+    var ianaName = timeZoneName === 'Browser' ? new Intl.DateTimeFormat().resolvedOptions().timeZone : timeZoneName;
+    var formatter = new Intl.DateTimeFormat(undefined, {
+      timeZone: ianaName,
+      timeZoneName: 'shortOffset'
+    });
+    var formattedParts = formatter.formatToParts(date !== null && date !== void 0 ? date : new Date());
+    var timeZoneNamePart = ((_formattedParts$find = formattedParts.find(function (part) {
+      return part.type === 'timeZoneName';
+    })) === null || _formattedParts$find === void 0 ? void 0 : _formattedParts$find.value) || '';
+    return {
+      utc: timeZoneNamePart.replace('GMT', 'UTC'),
+      name: ianaName,
+      isInvalid: false
+    };
+  } catch (err) {
+    return {
+      utc: '',
+      name: timeZoneName,
+      isInvalid: true
+    };
+  }
+}

package/lib/components/date_picker/super_date_picker/date_popover/timezone_display.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTimeZoneDisplayStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var euiTimeZoneDisplayStyles = exports.euiTimeZoneDisplayStyles = function euiTimeZoneDisplayStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // This padding should probably not be part of this component to make it really reusable
+
+  return {
+    euiTimeZoneDisplay: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";;label:euiTimeZoneDisplay;")
+  };
+};

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

@@ -224,7 +224,7 @@ var usePrettyDuration = exports.usePrettyDuration = function usePrettyDuration(_
    */
   var relativeDuration = 0;
   var relativeParts = {};
-  if (isRelativeToNow(timeFrom, timeTo)) {
+  if ((0, _relative_utils.isRelativeToNow)(timeFrom, timeTo)) {
     if ((0, _date_modes.getDateMode)(timeTo) === _date_modes.DATE_MODES.NOW) {
       relativeParts = (0, _relative_utils.parseRelativeParts)(timeFrom);
     } else {
@@ -281,16 +281,9 @@ var hasRangeMatch = function hasRangeMatch(timeFrom, timeTo, ranges) {
     return timeFrom === start && timeTo === end;
   });
 };
-var isRelativeToNow = function isRelativeToNow(timeFrom, timeTo) {
-  var fromDateMode = (0, _date_modes.getDateMode)(timeFrom);
-  var toDateMode = (0, _date_modes.getDateMode)(timeTo);
-  var isLast = fromDateMode === _date_modes.DATE_MODES.RELATIVE && toDateMode === _date_modes.DATE_MODES.NOW;
-  var isNext = fromDateMode === _date_modes.DATE_MODES.NOW && toDateMode === _date_modes.DATE_MODES.RELATIVE;
-  return isLast || isNext;
-};
 var showPrettyDuration = exports.showPrettyDuration = function showPrettyDuration(timeFrom, timeTo, quickRanges) {
   if (hasRangeMatch(timeFrom, timeTo, quickRanges)) {
     return true;
   }
-  return isRelativeToNow(timeFrom, timeTo);
+  return (0, _relative_utils.isRelativeToNow)(timeFrom, timeTo);
 };

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isRelativeToNow = void 0;
 exports.parseRelativeParts = parseRelativeParts;
 exports.toRelativeStringFromParts = exports.relativeUnitsFromLargestToSmallest = void 0;
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
 var _moment = _interopRequireDefault(require("moment"));
 var _objects = require("../../../services/objects");
 var _predicate = require("../../../services/predicate");
+var _date_modes = require("./date_modes");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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; }
@@ -71,4 +73,11 @@ var toRelativeStringFromParts = exports.toRelativeStringFromParts = function toR
   var operator = matches && matches[2] ? matches[2] : '-';
   var round = isRounded ? "".concat(ROUND_DELIMETER).concat(unit) : '';
   return "now".concat(operator).concat(count).concat(unit).concat(round);
+};
+var isRelativeToNow = exports.isRelativeToNow = function isRelativeToNow(timeFrom, timeTo) {
+  var fromDateMode = (0, _date_modes.getDateMode)(timeFrom);
+  var toDateMode = (0, _date_modes.getDateMode)(timeTo);
+  var isLast = fromDateMode === _date_modes.DATE_MODES.RELATIVE && toDateMode === _date_modes.DATE_MODES.NOW;
+  var isNext = fromDateMode === _date_modes.DATE_MODES.NOW && toDateMode === _date_modes.DATE_MODES.RELATIVE;
+  return isLast || isNext;
 };

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

@@ -16,6 +16,7 @@ var _date_picker_range = require("../date_picker_range");
 var _form = require("../../form");
 var _time_options = require("./time_options");
 var _pretty_duration = require("./pretty_duration");
+var _time_window_buttons = require("./time_window_buttons");
 var _async_interval = require("./async_interval");
 var _super_update_button = require("./super_update_button");
 var _quick_select_popover = require("./quick_select_popover/quick_select_popover");
@@ -283,7 +284,9 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         maxDate = _this$props3.maxDate,
         compressed = _this$props3.compressed,
         onFocus = _this$props3.onFocus,
-        styles = _this$props3.memoizedStyles;
+        styles = _this$props3.memoizedStyles,
+        _this$props3$timeZone = _this$props3.timeZoneDisplayProps,
+        timeZoneDisplayProps = _this$props3$timeZone === void 0 ? {} : _this$props3$timeZone;
       var autoRefreshAppend = !isPaused ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
         refreshInterval: refreshInterval,
         minInterval: refreshMinInterval,
@@ -360,7 +363,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
             timeOptions: timeOptions,
             buttonProps: {
               onFocus: onFocus
-            }
+            },
+            timeZoneDisplayProps: timeZoneDisplayProps
           }),
           endDateControl: isQuickSelectOnly ? undefined : (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
             css: styles.euiSuperDatePicker__rangeInput,
@@ -385,7 +389,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
             timeOptions: timeOptions,
             buttonProps: {
               onFocus: onFocus
-            }
+            },
+            timeZoneDisplayProps: timeZoneDisplayProps
           })
         }));
       });
@@ -405,13 +410,32 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         _this.applyTime();
       }
     });
-    _defineProperty(_this, "renderUpdateButton", function () {
+    _defineProperty(_this, "renderTimeWindowButtons", function () {
+      if (!_this.props.showTimeWindowButtons || _this.props.isAutoRefreshOnly) {
+        return null;
+      }
       var _this$props5 = _this.props,
-        isLoading = _this$props5.isLoading,
-        isDisabled = _this$props5.isDisabled,
-        updateButtonProps = _this$props5.updateButtonProps,
-        showUpdateButton = _this$props5.showUpdateButton,
-        compressed = _this$props5.compressed;
+        start = _this$props5.start,
+        end = _this$props5.end,
+        showTimeWindowButtons = _this$props5.showTimeWindowButtons,
+        compressed = _this$props5.compressed,
+        isDisabled = _this$props5.isDisabled;
+      var config = typeof showTimeWindowButtons === 'boolean' ? {} : showTimeWindowButtons;
+      return (0, _react2.jsx)(_time_window_buttons.EuiTimeWindowButtons, _extends({
+        applyTime: _this.applyQuickTime,
+        start: start,
+        end: end,
+        compressed: compressed,
+        isDisabled: !!isDisabled || _this.state.isInvalid
+      }, config));
+    });
+    _defineProperty(_this, "renderUpdateButton", function () {
+      var _this$props6 = _this.props,
+        isLoading = _this$props6.isLoading,
+        isDisabled = _this$props6.isDisabled,
+        updateButtonProps = _this$props6.updateButtonProps,
+        showUpdateButton = _this$props6.showUpdateButton,
+        compressed = _this$props6.compressed;
       if (!showUpdateButton) return null;
       return (0, _react2.jsx)(_super_update_button.EuiSuperUpdateButton, _extends({
         needsUpdate: _this.state.hasChanged,
@@ -430,21 +454,21 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
   return _createClass(EuiSuperDatePickerInternal, [{
     key: "render",
     value: function render() {
-      var _this$props6 = this.props,
-        isAutoRefreshOnly = _this$props6.isAutoRefreshOnly,
-        isDisabled = _this$props6.isDisabled,
-        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,
-        isQuickSelectOnly = _this$props6.isQuickSelectOnly,
-        compressed = _this$props6.compressed,
-        className = _this$props6.className,
-        styles = _this$props6.memoizedStyles;
+      var _this$props7 = this.props,
+        isAutoRefreshOnly = _this$props7.isAutoRefreshOnly,
+        isDisabled = _this$props7.isDisabled,
+        isPaused = _this$props7.isPaused,
+        onRefreshChange = _this$props7.onRefreshChange,
+        refreshInterval = _this$props7.refreshInterval,
+        refreshMinInterval = _this$props7.refreshMinInterval,
+        refreshIntervalUnits = _this$props7.refreshIntervalUnits,
+        showUpdateButton = _this$props7.showUpdateButton,
+        dataTestSubj = _this$props7['data-test-subj'],
+        _width = _this$props7.width,
+        isQuickSelectOnly = _this$props7.isQuickSelectOnly,
+        compressed = _this$props7.compressed,
+        className = _this$props7.className,
+        styles = _this$props7.memoizedStyles;
       var _this$state2 = this.state,
         hasChanged = _this$state2.hasChanged,
         isInvalid = _this$state2.isInvalid;
@@ -469,7 +493,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         compressed: compressed,
         isDisabled: !!isDisabled,
         className: className
-      }) : (0, _react2.jsx)(_react.default.Fragment, null, this.renderDatePickerRange(), this.renderUpdateButton()));
+      }) : (0, _react2.jsx)(_react.default.Fragment, null, this.renderDatePickerRange(), this.renderTimeWindowButtons(), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -632,6 +656,28 @@ EuiSuperDatePickerInternal.propTypes = {
      * @default true
      */
   showUpdateButton: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.oneOf(["iconOnly"])]),
+  /**
+     * Set to true to display buttons for time shifting and zooming out,
+     * next to the top-level control.
+     */
+  showTimeWindowButtons: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
+    /**
+       * Show button for zooming out
+       * @default true
+       */
+    showZoomOut: _propTypes.default.bool,
+    /**
+       * Show buttons for shifting the time window forward and backward
+       * @default true
+       */
+    showShiftArrows: _propTypes.default.bool,
+    /**
+       * How much the time window is increased when zooming.
+       * A number between 0 and 1 e.g. 0.25, or a string representing a percentage e.g. 25%
+       * @default 0.5
+       * */
+    zoomFactor: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.string.isRequired])
+  }).isRequired]),
   /**
      * Hides the actual input reducing to just the quick select button.
      */
@@ -678,6 +724,31 @@ EuiSuperDatePickerInternal.propTypes = {
      * input by the user, set this flag to `false`.
      */
   canRoundRelativeUnits: _propTypes.default.bool,
+  /**
+     * Props passed to the time zone display in the popovers {@link EuiTimeZoneDisplayProps}
+     *
+     * Setting `timeZoneDisplayProps.timeZone` with a valid time zone name will make
+     * the time zone information be visible below the start and end input fields.
+     * This is informational only, it will not affect how date/times are handled.
+     */
+  timeZoneDisplayProps: _propTypes.default.shape({
+    /**
+       * A valid time zone name, from the IANA database, e.g. "America/Los_Angeles".
+       *
+       * @link https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+       */
+    timeZone: _propTypes.default.string,
+    /**
+       * Render prop function to add additional content to the time zone display.
+       * Useful for e.g. adding links to documentation or setting pages.
+       */
+    customRender: _propTypes.default.func,
+    /**
+       * Reference date to be used while resolving the UTC offset.
+       * Only useful for edge cases involving daylight saving time.
+       */
+    date: _propTypes.default.any
+  }),
   memoizedStyles: _propTypes.default.any.isRequired,
   timeOptions: _propTypes.default.shape({
     timeTenseOptions: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
@@ -827,6 +898,15 @@ EuiSuperDatePicker.propTypes = {
      * @default true
      */
   showUpdateButton: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.oneOf(["iconOnly"])]),
+  /**
+     * Set to true to display buttons for time shifting and zooming out,
+     * next to the top-level control.
+     */
+  showTimeWindowButtons: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
+    showZoomOut: _propTypes.default.bool,
+    showShiftArrows: _propTypes.default.bool,
+    zoomFactor: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.string.isRequired])
+  }).isRequired]),
   /**
      * Hides the actual input reducing to just the quick select button.
      */
@@ -852,5 +932,17 @@ EuiSuperDatePicker.propTypes = {
      * If you do not want this behavior and instead wish to keep the exact units
      * input by the user, set this flag to `false`.
      */
-  canRoundRelativeUnits: _propTypes.default.bool
+  canRoundRelativeUnits: _propTypes.default.bool,
+  /**
+     * Props passed to the time zone display in the popovers {@link EuiTimeZoneDisplayProps}
+     *
+     * Setting `timeZoneDisplayProps.timeZone` with a valid time zone name will make
+     * the time zone information be visible below the start and end input fields.
+     * This is informational only, it will not affect how date/times are handled.
+     */
+  timeZoneDisplayProps: _propTypes.default.shape({
+    timeZone: _propTypes.default.string,
+    customRender: _propTypes.default.func,
+    date: _propTypes.default.any
+  })
 };

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

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZOOM_FACTOR_DEFAULT = exports.EuiTimeWindowButtons = void 0;
+exports.useEuiTimeWindow = useEuiTimeWindow;
+var _react = _interopRequireDefault(require("react"));
+var _datemath = _interopRequireDefault(require("@elastic/datemath"));
+var _moment = _interopRequireDefault(require("moment"));
+var _pretty_interval = require("./pretty_interval");
+var _relative_utils = require("./relative_utils");
+var _button_group_button = require("../../button/button_group/button_group_button");
+var _button_group = require("../../button/button_group/button_group.styles");
+var _services = require("../../../services");
+var _i18n = require("../../i18n");
+var _react2 = require("@emotion/react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: 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
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var ZOOM_FACTOR_DEFAULT = exports.ZOOM_FACTOR_DEFAULT = 0.5;
+/**
+ * Button group with time window controls for shifting the time window
+ * forwards and backwards, and zooming out.
+ */
+var EuiTimeWindowButtons = exports.EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
+  var applyTime = _ref.applyTime,
+    start = _ref.start,
+    end = _ref.end,
+    compressed = _ref.compressed,
+    isDisabled = _ref.isDisabled,
+    _ref$showZoomOut = _ref.showZoomOut,
+    showZoomOut = _ref$showZoomOut === void 0 ? true : _ref$showZoomOut,
+    _ref$showShiftArrows = _ref.showShiftArrows,
+    showShiftArrows = _ref$showShiftArrows === void 0 ? true : _ref$showShiftArrows,
+    _ref$zoomFactor = _ref.zoomFactor,
+    zoomFactor = _ref$zoomFactor === void 0 ? ZOOM_FACTOR_DEFAULT : _ref$zoomFactor;
+  var buttonColor = 'text';
+  var buttonSize = compressed ? 's' : 'm';
+  var iconSize = compressed ? 's' : 'm';
+  var styles = (0, _services.useEuiMemoizedStyles)(_button_group.euiButtonGroupButtonsStyles);
+  var _useEuiTimeWindow = useEuiTimeWindow(start, end, applyTime, {
+      zoomFactor: zoomFactor
+    }),
+    displayInterval = _useEuiTimeWindow.displayInterval,
+    isInvalid = _useEuiTimeWindow.isInvalid,
+    stepForward = _useEuiTimeWindow.stepForward,
+    stepBackward = _useEuiTimeWindow.stepBackward,
+    expandWindow = _useEuiTimeWindow.expandWindow;
+  var invalidShiftDescription = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.invalidShiftLabel', 'Cannot shift invalid time window');
+  var invalidZoomOutDescription = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.invalidZoomOutLabel', 'Cannot zoom out invalid time window');
+  var previousId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'previous'
+  });
+  var previousLabel = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.previousLabel', 'Previous');
+  var previousTooltipContent = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.previousDescription', 'Previous {displayInterval}', {
+    displayInterval: displayInterval
+  });
+  var zoomOutId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'zoom_out'
+  });
+  var zoomOutLabel = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.zoomOutLabel', 'Zoom out');
+  var zoomOutTooltipContent = isInvalid ? invalidZoomOutDescription : zoomOutLabel;
+  var nextId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'next'
+  });
+  var nextLabel = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.nextLabel', 'Next');
+  var nextTooltipContent = (0, _i18n.useEuiI18n)('euiTimeWindowButtons.nextDescription', 'Next {displayInterval}', {
+    displayInterval: displayInterval
+  });
+  if (!showZoomOut && !showShiftArrows) return null;
+  return (0, _react2.jsx)("div", {
+    className: "euiSuperDatePicker__timeWindowButtons",
+    css: [styles.euiButtonGroup__buttons, styles[buttonSize], ";label:EuiTimeWindowButtons;"],
+    "data-test-subj": "timeWindowButtons"
+  }, showShiftArrows && (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, {
+    id: previousId,
+    "data-test-subj": "timeWindowButtonsPrevious",
+    label: previousLabel,
+    title: "",
+    toolTipContent: !isDisabled && (isInvalid ? invalidShiftDescription : previousTooltipContent),
+    color: buttonColor,
+    size: buttonSize,
+    iconType: "arrowLeft",
+    iconSize: iconSize,
+    isIconOnly: true,
+    isSelected: false,
+    isDisabled: isDisabled,
+    onClick: stepBackward
+  }), showZoomOut && (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, {
+    id: zoomOutId,
+    "data-test-subj": "timeWindowButtonsZoomOut",
+    label: zoomOutLabel,
+    title: "",
+    toolTipContent: !isDisabled && zoomOutTooltipContent,
+    toolTipProps: {
+      disableScreenReaderOutput: zoomOutLabel === zoomOutTooltipContent
+    },
+    color: buttonColor,
+    size: buttonSize,
+    iconType: "magnifyWithMinus",
+    iconSize: iconSize,
+    isIconOnly: true,
+    isSelected: false,
+    isDisabled: isDisabled,
+    onClick: expandWindow
+  }), showShiftArrows && (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, {
+    id: nextId,
+    "data-test-subj": "timeWindowButtonsNext",
+    label: nextLabel,
+    title: "",
+    toolTipContent: !isDisabled && (isInvalid ? invalidShiftDescription : nextTooltipContent),
+    color: buttonColor,
+    size: buttonSize,
+    iconType: "arrowRight",
+    iconSize: iconSize,
+    isIconOnly: true,
+    isSelected: false,
+    isDisabled: isDisabled,
+    onClick: stepForward
+  }));
+};
+
+/**
+ * Partly adapted from date_picker/super_date_picker/quick_select_popover/quick_select.tsx
+ */
+function useEuiTimeWindow(start, end, apply, options) {
+  var _options$zoomFactor;
+  var min = _datemath.default.parse(start);
+  var max = _datemath.default.parse(end, {
+    roundUp: true
+  });
+  var isInvalid = !min || !min.isValid() || !max || !max.isValid();
+  var windowDuration = isInvalid ? 1 : max.diff(min);
+  var zoomFactor = getPercentageMultiplier((_options$zoomFactor = options === null || options === void 0 ? void 0 : options.zoomFactor) !== null && _options$zoomFactor !== void 0 ? _options$zoomFactor : ZOOM_FACTOR_DEFAULT);
+  var zoomAddition = windowDuration * (zoomFactor / 2); // Gets added to each end, that's why it's split in half
+  var prettyInterval = (0, _pretty_interval.usePrettyInterval)(false, windowDuration);
+  var displayInterval = isInvalid ? '' : prettyInterval;
+  if (!isInvalid && !(0, _relative_utils.isRelativeToNow)(start, end) && !isExactMinuteRange(windowDuration)) {
+    displayInterval = "~".concat(displayInterval);
+  }
+  return {
+    displayInterval: displayInterval,
+    isInvalid: isInvalid,
+    stepForward: stepForward,
+    stepBackward: stepBackward,
+    expandWindow: expandWindow
+  };
+  function stepForward() {
+    if (isInvalid) return;
+    apply({
+      start: (0, _moment.default)(max).toISOString(),
+      end: (0, _moment.default)(max).add(windowDuration, 'ms').toISOString()
+    });
+  }
+  function stepBackward() {
+    if (isInvalid) return;
+    apply({
+      start: (0, _moment.default)(min).subtract(windowDuration, 'ms').toISOString(),
+      end: (0, _moment.default)(min).toISOString()
+    });
+  }
+  function expandWindow() {
+    if (isInvalid) return;
+    apply({
+      start: (0, _moment.default)(min).subtract(zoomAddition, 'ms').toISOString(),
+      end: (0, _moment.default)(max).add(zoomAddition, 'ms').toISOString()
+    });
+  }
+}
+
+/**
+ * Get a number out of either 0.2 or "20%"
+ */
+function getPercentageMultiplier(value) {
+  var result = typeof value === 'number' ? value : parseFloat(String(value).replace('%', '').trim());
+  if (isNaN(result)) throw new TypeError('Please provide a valid number or percentage string e.g. "25%"');
+  return result > 1 ? result / 100 : result;
+}
+
+/**
+ * Useful to determine whether to show the tilde in the display
+ */
+function isExactMinuteRange(diffMs) {
+  // 60 * 1000 = ms per minute
+  return diffMs % (60 * 1000) === 0;
+}