@elastic/eui 109.0.0 → 109.1.0-snapshot.1763390960850

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

@@ -14,7 +14,7 @@ var _global_styling = require("../../global_styling");
 var _auto_sizer = require("../auto_sizer");
 var _utils = require("./utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["style", "children"],
+var _excluded = ["style"],
   _excluded2 = ["style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -32,29 +32,31 @@ var EuiCodeBlockVirtualized = exports.EuiCodeBlockVirtualized = function EuiCode
     overflowHeight = _ref.overflowHeight,
     preProps = _ref.preProps,
     codeProps = _ref.codeProps;
+  // NOTE: Don't inject other content (e.g. a label) inside this outer virtualized
+  // container as react-window requires this to be stable for scroll calculations.
+  // Instead, inject it into the inner virtualized element.
   var VirtualizedOuterElement = (0, _react.useMemo)(function () {
     return /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       var style = _ref2.style,
-        children = _ref2.children,
         props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
       return (0, _react2.jsx)("pre", (0, _extends2.default)({
         style: (0, _global_styling.logicalStyles)(style)
       }, props, {
         ref: ref
-      }, preProps), label, children);
+      }, preProps));
     });
-  }, [preProps, label]);
+  }, [preProps]);
   var VirtualizedInnerElement = (0, _react.useMemo)(function () {
     return /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
       var style = _ref3.style,
         props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-      return (0, _react2.jsx)("code", (0, _extends2.default)({
+      return (0, _react2.jsx)(_react.default.Fragment, null, label, (0, _react2.jsx)("code", (0, _extends2.default)({
         style: (0, _global_styling.logicalStyles)(style)
       }, props, {
         ref: ref
-      }, codeProps));
+      }, codeProps)));
     });
-  }, [codeProps]);
+  }, [codeProps, label]);
   var virtualizationProps = {
     itemData: data,
     itemSize: rowHeight,

package/optimize/lib/components/datagrid/controls/column_selector.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridColumnSelector = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -45,31 +45,48 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
         var id = _ref.id;
         return id;
       });
-      var availableSet = new Set(availableColumnIds);
-      // Filter visibleColumns to only include existing columns
+      // remove duplicate columns to ensure unique columns
+      var availableColumnIdsSet = new Set(availableColumnIds);
+      if (process.env.NODE_ENV === 'development') {
+        if (availableColumnIds.length > availableColumnIdsSet.size) {
+          var duplicateIds = [];
+          var _iterator = _createForOfIteratorHelper(availableColumnIds),
+            _step;
+          try {
+            var _loop = function _loop() {
+              var id = _step.value;
+              if (!duplicateIds.includes(id) && availableColumnIds.filter(function (_id) {
+                return _id === id;
+              }).length > 1) {
+                duplicateIds.push(id);
+              }
+            };
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              _loop();
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          console.warn("\u26A0\uFE0F EuiDataGrid: Duplicate column IDs detected and removed: ".concat(duplicateIds.join(', '), "."), '\n Column IDs must be unique. Only the first occurrence of each duplicate will be used.');
+        }
+      }
       var validVisibleColumns = visibleColumns.filter(function (id) {
-        return availableSet.has(id);
+        return availableColumnIdsSet.has(id);
       });
       var visibleSet = new Set(validVisibleColumns);
       var result = [];
       var visibleIndex = 0;
-      var _iterator = _createForOfIteratorHelper(availableColumnIds),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var columnId = _step.value;
-          if (visibleSet.has(columnId)) {
-            // Replace with next visible column in order
+      for (var _i = 0, _arr = (0, _toConsumableArray2.default)(availableColumnIdsSet); _i < _arr.length; _i++) {
+        var columnId = _arr[_i];
+        if (visibleSet.has(columnId)) {
+          if (visibleIndex < validVisibleColumns.length) {
             result.push(validVisibleColumns[visibleIndex++]);
-          } else {
-            // Keep hidden column in original position
-            result.push(columnId);
           }
+        } else {
+          result.push(columnId);
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
       return result;
       // doesn't depend on visibleColumns on purpose to keep it an initial state
@@ -134,7 +151,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
       anchorPosition: "downLeft",
       panelPaddingSize: "none",
       button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
-        badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
+        badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(sortedColumns.length) : sortedColumns.length,
         iconType: "tableDensityNormal",
         "data-test-subj": "dataGridColumnSelectorButton",
         onClick: function onClick() {

package/optimize/lib/components/datagrid/data_grid.js

@@ -164,7 +164,11 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
    */
   var displayValues = (0, _react.useMemo)(function () {
     return columns.reduce(function (acc, column) {
-      return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, column.id, column.displayAsText || column.id));
+      // prevent duplicate values
+      if (!acc[column.id]) {
+        return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, column.id, column.displayAsText || column.id));
+      }
+      return acc;
     }, {});
   }, [columns]);
   var _useDataGridDisplaySe = (0, _controls.useDataGridDisplaySelector)((0, _controls.checkOrDefaultToolBarDisplayOptions)(toolbarVisibility, 'showDisplaySelector'), gridStyleWithDefaults, _rowHeightsOptions),

package/optimize/lib/components/datagrid/utils/in_memory.js

@@ -95,13 +95,14 @@ var EuiDataGridInMemoryRenderer = exports.EuiDataGridInMemoryRenderer = function
     var cells = [];
     var _loop = function _loop(i) {
       cells.push(columns.map(function (column, j) {
+        var key = "".concat(i, "-").concat(j, "-").concat(column.id);
         var skipThisColumn = inMemory.skipColumns && inMemory.skipColumns.indexOf(column.id) !== -1;
         if (skipThisColumn) {
           return null;
         }
         var isExpandable = column.isExpandable !== undefined ? column.isExpandable : true;
         return (0, _react3.jsx)("div", {
-          key: "".concat(i, "-").concat(column.id),
+          key: key,
           "data-dg-row": i,
           "data-dg-column": column.id
         }, (0, _react3.jsx)(CellElement, {

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiAbsoluteTab = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
@@ -17,6 +18,7 @@ var _flex = require("../../../flex");
 var _button = require("../../../button");
 var _code = require("../../../code");
 var _date_picker = require("../../date_picker");
+var _timezone_display = require("./timezone_display");
 var _absolute_tab = require("./absolute_tab.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -43,7 +45,9 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     utcOffset = _ref.utcOffset,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
-    labelPrefix = _ref.labelPrefix;
+    labelPrefix = _ref.labelPrefix,
+    _ref$timeZoneDisplayP = _ref.timeZoneDisplayProps,
+    timeZoneDisplayProps = _ref$timeZoneDisplayP === void 0 ? {} : _ref$timeZoneDisplayP;
   var styles = (0, _services.useEuiMemoizedStyles)(_absolute_tab.euiAbsoluteTabDateFormStyles);
   var _useState = (0, _react.useState)(function () {
       var parsedValue = _datemath.default.parse(value, {
@@ -62,6 +66,7 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     setHasUnparsedText(false);
     setIsTextInvalid(false);
   }, [dateFormat]);
+  var timeZomeDescriptionId = (0, _services.useGeneratedHtmlId)();
   var submitButtonLabel = (0, _i18n.useEuiI18n)('euiAbsoluteTab.dateFormatButtonLabel', 'Parse date');
   var dateFormatError = (0, _i18n.useEuiI18n)('euiAbsoluteTab.dateFormatError', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.', {
     dateFormat: (0, _react2.jsx)(_code.EuiCode, null, dateFormat)
@@ -152,7 +157,8 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     css: styles.euiAbsoluteTabDateForm__row,
     isInvalid: isTextInvalid,
     error: isTextInvalid ? dateFormatError : undefined,
-    helpText: hasUnparsedText && !isTextInvalid ? dateFormatError : undefined
+    helpText: hasUnparsedText && !isTextInvalid ? dateFormatError : undefined,
+    describedByIds: [timeZomeDescriptionId]
   }, (0, _react2.jsx)(_form.EuiFieldText, {
     compressed: true,
     isInvalid: isTextInvalid,
@@ -176,5 +182,7 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     "aria-label": submitButtonLabel,
     title: submitButtonLabel,
     "data-test-subj": "parseAbsoluteDateFormat"
-  })));
+  })), (0, _react2.jsx)(_timezone_display.EuiTimeZoneDisplay, (0, _extends2.default)({
+    id: timeZomeDescriptionId
+  }, timeZoneDisplayProps)));
 };

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

@@ -16,7 +16,7 @@ var _pretty_duration = require("../pretty_duration");
 var _date_popover_content = require("./date_popover_content");
 var _date_popover_button = require("./date_popover_button.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "minDate", "maxDate", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
+var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "minDate", "maxDate", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions", "timeZoneDisplayProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -46,6 +46,8 @@ var EuiDatePopoverButton = exports.EuiDatePopoverButton = function EuiDatePopove
     onPopoverClose = props.onPopoverClose,
     compressed = props.compressed,
     timeOptions = props.timeOptions,
+    _props$timeZoneDispla = props.timeZoneDisplayProps,
+    timeZoneDisplayProps = _props$timeZoneDispla === void 0 ? {} : _props$timeZoneDispla,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var classes = (0, _classnames.default)(['euiDatePopoverButton', "euiDatePopoverButton--".concat(position), {
     'euiDatePopoverButton--compressed': compressed,
@@ -104,7 +106,8 @@ var EuiDatePopoverButton = exports.EuiDatePopoverButton = function EuiDatePopove
     utcOffset: utcOffset,
     timeOptions: timeOptions,
     minDate: minDate,
-    maxDate: maxDate
+    maxDate: maxDate,
+    timeZoneDisplayProps: timeZoneDisplayProps
   }));
 };
 EuiDatePopoverButton.displayName = 'EuiDatePopoverButton';

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

@@ -39,7 +39,9 @@ var EuiDatePopoverContent = exports.EuiDatePopoverContent = function EuiDatePopo
     utcOffset = _ref.utcOffset,
     timeOptions = _ref.timeOptions,
     minDate = _ref.minDate,
-    maxDate = _ref.maxDate;
+    maxDate = _ref.maxDate,
+    _ref$timeZoneDisplayP = _ref.timeZoneDisplayProps,
+    timeZoneDisplayProps = _ref$timeZoneDisplayP === void 0 ? {} : _ref$timeZoneDisplayP;
   var styles = (0, _services.useEuiMemoizedStyles)(_date_popover_content.euiDatePopoverContentStyles);
   var onTabClick = function onTabClick(selectedTab) {
     switch (selectedTab.id) {
@@ -70,7 +72,8 @@ var EuiDatePopoverContent = exports.EuiDatePopoverContent = function EuiDatePopo
       labelPrefix: labelPrefix,
       utcOffset: utcOffset,
       minDate: minDate,
-      maxDate: maxDate
+      maxDate: maxDate,
+      timeZoneDisplayProps: timeZoneDisplayProps
     }),
     'data-test-subj': 'superDatePickerAbsoluteTab',
     'aria-label': "".concat(labelPrefix, ": ").concat(absoluteLabel)
@@ -84,7 +87,8 @@ var EuiDatePopoverContent = exports.EuiDatePopoverContent = function EuiDatePopo
       onChange: onChange,
       roundUp: roundUp,
       labelPrefix: labelPrefix,
-      timeOptions: timeOptions
+      timeOptions: timeOptions,
+      timeZoneDisplayProps: timeZoneDisplayProps
     }),
     'data-test-subj': 'superDatePickerRelativeTab',
     'aria-label': "".concat(labelPrefix, ": ").concat(relativeLabel)

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiRelativeTab = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
@@ -19,6 +20,7 @@ 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 _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; }
@@ -39,7 +41,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),
@@ -87,6 +91,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');
@@ -120,6 +125,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
@@ -129,7 +135,9 @@ var EuiRelativeTab = exports.EuiRelativeTab = function EuiRelativeTab(_ref) {
     values: {
       unit: unit
     }
-  })))), (0, _react2.jsx)(_popover.EuiPopoverFooter, {
+  })))), (0, _react2.jsx)(_timezone_display.EuiTimeZoneDisplay, (0, _extends2.default)({
+    id: timeZomeDescriptionId
+  }, timeZoneDisplayProps)), (0, _react2.jsx)(_popover.EuiPopoverFooter, {
     paddingSize: "s"
   }, (0, _react2.jsx)(_form.EuiSwitch, {
     "data-test-subj": "superDatePickerRelativeDateRoundSwitch",

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiTimeZoneDisplay = void 0;
+exports.useEuiUTCOffsetDisplay = useEuiUTCOffsetDisplay;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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.
+ */
+/**
+ * Display time zone information.
+ */
+var EuiTimeZoneDisplay = exports.EuiTimeZoneDisplay = function EuiTimeZoneDisplay(_ref) {
+  var timeZone = _ref.timeZone,
+    customRender = _ref.customRender,
+    date = _ref.date,
+    rest = (0, _objectWithoutProperties2.default)(_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, (0, _extends2.default)({
+    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/optimize/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/optimize/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/optimize/lib/components/date_picker/super_date_picker/relative_utils.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isRelativeToNow = void 0;
 exports.parseRelativeParts = parseRelativeParts;
 exports.toRelativeStringFromParts = exports.relativeUnitsFromLargestToSmallest = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -11,6 +12,7 @@ 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -68,4 +70,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/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -25,6 +25,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");
@@ -276,7 +277,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,
@@ -353,7 +356,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,
@@ -378,7 +382,8 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
             timeOptions: timeOptions,
             buttonProps: {
               onFocus: onFocus
-            }
+            },
+            timeZoneDisplayProps: timeZoneDisplayProps
           })
         }));
       });
@@ -398,13 +403,32 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         _this.applyTime();
       }
     });
-    (0, _defineProperty2.default)(_this, "renderUpdateButton", function () {
+    (0, _defineProperty2.default)(_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, (0, _extends2.default)({
+        applyTime: _this.applyQuickTime,
+        start: start,
+        end: end,
+        compressed: compressed,
+        isDisabled: !!isDisabled || _this.state.isInvalid
+      }, config));
+    });
+    (0, _defineProperty2.default)(_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, (0, _extends2.default)({
         needsUpdate: _this.state.hasChanged,
@@ -423,21 +447,21 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
   return (0, _createClass2.default)(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;
@@ -462,7 +486,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",