@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

package/optimize/es/components/button/button_icon/button_icon.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "disabled", "href", "type", "display", "target", "rel", "size", "buttonRef", "isSelected", "isLoading"];
+var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "disabled", "hasAriaDisabled", "href", "type", "display", "target", "rel", "size", "buttonRef", "isSelected", "isLoading"],
+  _excluded2 = ["ref"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,7 +12,8 @@ var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "di
 
 import React from 'react';
 import classNames from 'classnames';
-import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
+import { getSecureRelForTarget, useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
+import { useEuiDisabledElement } from '../../../services/hooks/useEuiDisabledElement';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
 import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../global_styling/mixins/_button';
@@ -29,6 +31,8 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     color = _ref$color === void 0 ? 'primary' : _ref$color,
     _isDisabled = _ref.isDisabled,
     disabled = _ref.disabled,
+    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
+    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
     href = _ref.href,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
@@ -47,6 +51,14 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     href: href,
     isLoading: isLoading
   });
+  var _useEuiDisabledElemen = useEuiDisabledElement({
+      isDisabled: isDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      onKeyDown: rest.onKeyDown
+    }),
+    disabledRef = _useEuiDisabledElemen.ref,
+    disabledButtonProps = _objectWithoutProperties(_useEuiDisabledElemen, _excluded2);
+  var setCombinedRef = useCombinedRefs([disabledRef, buttonRef]);
   var ariaHidden = rest['aria-hidden'];
   var isAriaHidden = ariaHidden === 'true' || ariaHidden === true;
   if (!rest['aria-label'] && !rest['aria-labelledby'] && !isAriaHidden) {
@@ -106,7 +118,7 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
       href: href,
       target: target,
       rel: secureRel,
-      ref: buttonRef
+      ref: setCombinedRef
     }, rest), buttonIcon);
   }
   var buttonType;
@@ -117,6 +129,6 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     className: classes,
     "aria-pressed": isSelected,
     type: type,
-    ref: buttonRef
-  }, rest), buttonIcon);
+    ref: setCombinedRef
+  }, rest, disabledButtonProps), buttonIcon);
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["style", "children"],
+var _excluded = ["style"],
   _excluded2 = ["style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -23,29 +23,31 @@ export var EuiCodeBlockVirtualized = function EuiCodeBlockVirtualized(_ref) {
     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 = useMemo(function () {
     return /*#__PURE__*/forwardRef(function (_ref2, ref) {
       var style = _ref2.style,
-        children = _ref2.children,
         props = _objectWithoutProperties(_ref2, _excluded);
       return ___EmotionJSX("pre", _extends({
         style: logicalStyles(style)
       }, props, {
         ref: ref
-      }, preProps), label, children);
+      }, preProps));
     });
-  }, [preProps, label]);
+  }, [preProps]);
   var VirtualizedInnerElement = useMemo(function () {
     return /*#__PURE__*/forwardRef(function (_ref3, ref) {
       var style = _ref3.style,
         props = _objectWithoutProperties(_ref3, _excluded2);
-      return ___EmotionJSX("code", _extends({
+      return ___EmotionJSX(React.Fragment, null, label, ___EmotionJSX("code", _extends({
         style: logicalStyles(style)
       }, props, {
         ref: ref
-      }, codeProps));
+      }, codeProps)));
     });
-  }, [codeProps]);
+  }, [codeProps, label]);
   var virtualizationProps = {
     itemData: data,
     itemSize: rowHeight,

package/optimize/es/components/datagrid/body/header/column_actions.js

@@ -72,16 +72,6 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
   var closePopover = useCallback(function () {
     setIsPopoverOpen(false);
   }, []);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var onFocus = useCallback(function () {
-    return setIsActionsButtonFocused(true);
-  }, []);
-  var onBlur = useCallback(function () {
-    return setIsActionsButtonFocused(false);
-  }, []);
   var actionsButtonAriaLabel = useEuiI18n('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
     title: title
   });
@@ -96,10 +86,10 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
   /**
    * Props to set on parent EuiDataGridHeaderCell
    */
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isColumnMoving = _useState6[0],
-    setIsColumnMoving = _useState6[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isColumnMoving = _useState4[0],
+    setIsColumnMoving = _useState4[1];
   useEffect(function () {
     setPropsFromColumnActions({
       className: isPopoverOpen ? 'euiDataGridHeaderCell--isActionsPopoverOpen' : '',
@@ -145,17 +135,11 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
       iconType: "boxesVertical",
       iconSize: "s",
       color: "text",
-      css: styles.euiDataGridHeaderCell__actions,
       className: "euiDataGridHeaderCell__button",
       onClick: togglePopover,
       buttonRef: actionsButtonRef,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      tabIndex: 0 // Override EuiButtonIcon's conditional tabindex based on aria-hidden
-      ,
-      "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
-      : undefined,
       "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
+      css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.end, ";label:ColumnActions;"],
       "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
     }),
     isOpen: isPopoverOpen,

package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -45,6 +45,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var hasColumnActions = useHasColumnActions(actions);
+  var cellContentId = "dataGridHeaderCellContent-".concat(id);
   var classes = classnames(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = useEuiMemoizedStyles(euiDataGridHeaderCellStyles);
   var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
@@ -88,8 +89,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
       isLastColumn: isLastColumn,
       width: width,
       "aria-sort": ariaSort,
-      "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
-      ,
+      "aria-labelledby": cellContentId,
       "aria-describedby": classnames(sortingAriaId, dragProps === null || dragProps === void 0 ? void 0 : dragProps['aria-describedby']),
       "data-column-moving": propsFromColumnActions['data-column-moving'] || (dragProps === null || dragProps === void 0 ? void 0 : dragProps['data-column-moving']) || undefined
     }), function (hasFocusTrap) {
@@ -98,11 +98,13 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
       }, ___EmotionJSX(EuiIcon, {
         type: "grabOmnidirectional",
         size: "s",
-        css: styles.euiDataGridHeaderCell__actions
+        css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.start, ";label:EuiDataGridHeaderCell;"]
       })), ___EmotionJSX("div", {
         css: contentStyles,
         className: "euiDataGridHeaderCell__content",
-        title: title
+        title: title,
+        id: cellContentId,
+        "aria-label": displayAsText ? displayAsText : typeof children === 'string' ? children : undefined
       }, children), sortingArrow, sortingScreenReaderText, hasColumnActions && ___EmotionJSX(ColumnActions, {
         index: index,
         id: id,

package/optimize/es/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -9,7 +9,6 @@
 import { css } from '@emotion/react';
 import { euiCanAnimate, euiTextTruncate, logicalCSS, logicalTextAlignCSS } from '../../../../global_styling';
 import { euiDataGridCellOutlineSelectors } from '../cell/data_grid_cell.styles';
-
 /**
  * Styles only applied to data header cell content, not control header cells
  */
@@ -17,11 +16,18 @@ export var euiDataGridHeaderCellStyles = function euiDataGridHeaderCellStyles(eu
   var euiTheme = euiThemeContext.euiTheme;
   var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors('.euiDataGridHeaderCell'),
     header = _euiDataGridCellOutli.header;
+  var hideAnimation = function hideAnimation(margin, translateX) {
+    return "\n    ".concat(header.hideActions, " & {\n      ").concat(logicalCSS('margin-left', margin), "\n      transform: translateX(").concat(translateX, ") scale(0.01);\n      opacity: 0;\n    }\n  ");
+  };
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/css("flex-grow:1;", euiTextTruncate(), ";;label:euiDataGridHeaderCell__content;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/css(logicalCSS('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__actions: /*#__PURE__*/css("overflow:hidden;display:flex;", header.hideActions, " &{", logicalCSS('width', 0), " opacity:0;}", euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__actions;")
+    euiDataGridHeaderCell__actions: {
+      action: /*#__PURE__*/css("overflow:hidden;display:flex;max-inline-size:24px;", euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in,margin-left ", euiTheme.animation.fast, " ease-in;animation:none!important;};label:action;"),
+      start: /*#__PURE__*/css(hideAnimation("-".concat(euiTheme.size.m), '0%'), ";;label:start;"),
+      end: /*#__PURE__*/css(hideAnimation("-".concat(euiTheme.size.l), '50%'), ";;label:end;")
+    }
   };
 };

package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label"];
+var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -34,6 +34,7 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     isDragging = _ref.isDragging,
     _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classnames('euiDataGridHeaderCell', className);
   var styles = useEuiMemoizedStyles(euiDataGridHeaderCellWrapperStyles);
@@ -99,7 +100,8 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     style: width != null ? {
       width: "".concat(width, "px")
     } : {},
-    "aria-label": renderFocusTrap ? ariaLabel : undefined
+    "aria-label": renderFocusTrap ? ariaLabel : undefined,
+    "aria-labelledby": renderFocusTrap ? ariaLabelledby : undefined
   }, rest), ___EmotionJSX(HandleInteractiveChildren, {
     cellEl: isDragging ? null : headerEl,
     renderFocusTrap: isDragging ? false : renderFocusTrap,

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

@@ -1,5 +1,5 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 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; } }
@@ -37,31 +37,48 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         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 = _toConsumableArray(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
@@ -126,7 +143,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       anchorPosition: "downLeft",
       panelPaddingSize: "none",
       button: ___EmotionJSX(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/es/components/datagrid/data_grid.js

@@ -156,7 +156,11 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
    */
   var displayValues = useMemo(function () {
     return columns.reduce(function (acc, column) {
-      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, column.id, column.displayAsText || column.id));
+      // prevent duplicate values
+      if (!acc[column.id]) {
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, column.id, column.displayAsText || column.id));
+      }
+      return acc;
     }, {});
   }, [columns]);
   var _useDataGridDisplaySe = useDataGridDisplaySelector(checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showDisplaySelector'), gridStyleWithDefaults, _rowHeightsOptions),

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

@@ -87,13 +87,14 @@ export var EuiDataGridInMemoryRenderer = function EuiDataGridInMemoryRenderer(_r
     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 ___EmotionJSX("div", {
-          key: "".concat(i, "-").concat(column.id),
+          key: key,
           "data-dg-row": i,
           "data-dg-column": column.id
         }, ___EmotionJSX(CellElement, {

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -10,13 +11,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState, useEffect, useCallback } from 'react';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
-import { useUpdateEffect, useEuiMemoizedStyles } from '../../../../services';
+import { useUpdateEffect, useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../../services';
 import { useEuiI18n } from '../../../i18n';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
 import { EuiFlexGroup } from '../../../flex';
 import { EuiButtonIcon } from '../../../button';
 import { EuiCode } from '../../../code';
 import { EuiDatePicker } from '../../date_picker';
+import { EuiTimeZoneDisplay } from './timezone_display';
 import { euiAbsoluteTabDateFormStyles } from './absolute_tab.styles';
 
 // Allow users to paste in and have the datepicker parse multiple common date formats,
@@ -34,7 +36,9 @@ export var 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 = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles);
   var _useState = useState(function () {
       var parsedValue = dateMath.parse(value, {
@@ -53,6 +57,7 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     setHasUnparsedText(false);
     setIsTextInvalid(false);
   }, [dateFormat]);
+  var timeZomeDescriptionId = useGeneratedHtmlId();
   var submitButtonLabel = useEuiI18n('euiAbsoluteTab.dateFormatButtonLabel', 'Parse date');
   var dateFormatError = useEuiI18n('euiAbsoluteTab.dateFormatError', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.', {
     dateFormat: ___EmotionJSX(EuiCode, null, dateFormat)
@@ -143,7 +148,8 @@ export var 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]
   }, ___EmotionJSX(EuiFieldText, {
     compressed: true,
     isInvalid: isTextInvalid,
@@ -167,5 +173,7 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     "aria-label": submitButtonLabel,
     title: submitButtonLabel,
     "data-test-subj": "parseAbsoluteDateFormat"
-  })));
+  })), ___EmotionJSX(EuiTimeZoneDisplay, _extends({
+    id: timeZomeDescriptionId
+  }, timeZoneDisplayProps)));
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -41,6 +41,8 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     onPopoverClose = props.onPopoverClose,
     compressed = props.compressed,
     timeOptions = props.timeOptions,
+    _props$timeZoneDispla = props.timeZoneDisplayProps,
+    timeZoneDisplayProps = _props$timeZoneDispla === void 0 ? {} : _props$timeZoneDispla,
     rest = _objectWithoutProperties(props, _excluded);
   var classes = classNames(['euiDatePopoverButton', "euiDatePopoverButton--".concat(position), {
     'euiDatePopoverButton--compressed': compressed,
@@ -99,7 +101,8 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     utcOffset: utcOffset,
     timeOptions: timeOptions,
     minDate: minDate,
-    maxDate: maxDate
+    maxDate: maxDate,
+    timeZoneDisplayProps: timeZoneDisplayProps
   }));
 };
 EuiDatePopoverButton.displayName = 'EuiDatePopoverButton';

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

@@ -32,7 +32,9 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
     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 = useEuiMemoizedStyles(euiDatePopoverContentStyles);
   var onTabClick = function onTabClick(selectedTab) {
     switch (selectedTab.id) {
@@ -63,7 +65,8 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
       labelPrefix: labelPrefix,
       utcOffset: utcOffset,
       minDate: minDate,
-      maxDate: maxDate
+      maxDate: maxDate,
+      timeZoneDisplayProps: timeZoneDisplayProps
     }),
     'data-test-subj': 'superDatePickerAbsoluteTab',
     'aria-label': "".concat(labelPrefix, ": ").concat(absoluteLabel)
@@ -77,7 +80,8 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
       onChange: onChange,
       roundUp: roundUp,
       labelPrefix: labelPrefix,
-      timeOptions: timeOptions
+      timeOptions: timeOptions,
+      timeZoneDisplayProps: timeZoneDisplayProps
     }),
     'data-test-subj': 'superDatePickerRelativeTab',
     'aria-label': "".concat(labelPrefix, ": ").concat(relativeLabel)

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -19,6 +20,7 @@ import { EuiPopoverFooter } from '../../../popover';
 import { EuiSpacer } from '../../../spacer';
 import { INVALID_DATE } from '../date_modes';
 import { parseRelativeParts, toRelativeStringFromParts } from '../relative_utils';
+import { EuiTimeZoneDisplay } from './timezone_display';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRelativeTab = function EuiRelativeTab(_ref) {
   var _ref$timeOptions = _ref.timeOptions,
@@ -29,7 +31,9 @@ export var 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 = useRef(parseRelativeParts(value));
   var roundUnit = initialRelativeParts.current.roundUnit;
   var _useState = useState(initialRelativeParts.current.unit),
@@ -77,6 +81,7 @@ export var EuiRelativeTab = function EuiRelativeTab(_ref) {
     return parsedValue.locale(locale || 'en').format(dateFormat);
   }, [isInvalid, value, roundUp, locale, dateFormat]);
   var relativeDateInputNumberDescriptionId = useGeneratedHtmlId();
+  var timeZomeDescriptionId = useGeneratedHtmlId();
   var numberAriaLabel = useEuiI18n('euiRelativeTab.numberInputLabel', 'Time span amount');
   var numberInputError = useEuiI18n('euiRelativeTab.numberInputError', 'Must be >= 0');
   var dateInputError = useEuiI18n('euiRelativeTab.dateInputError', 'Must be a valid range');
@@ -110,6 +115,7 @@ export var EuiRelativeTab = function EuiRelativeTab(_ref) {
     compressed: true,
     value: formattedValue,
     readOnly: true,
+    "aria-describedby": timeZomeDescriptionId,
     prepend: ___EmotionJSX(EuiFormLabel, null, labelPrefix)
   }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
     id: relativeDateInputNumberDescriptionId
@@ -119,7 +125,9 @@ export var EuiRelativeTab = function EuiRelativeTab(_ref) {
     values: {
       unit: unit
     }
-  })))), ___EmotionJSX(EuiPopoverFooter, {
+  })))), ___EmotionJSX(EuiTimeZoneDisplay, _extends({
+    id: timeZomeDescriptionId
+  }, timeZoneDisplayProps)), ___EmotionJSX(EuiPopoverFooter, {
     paddingSize: "s"
   }, ___EmotionJSX(EuiSwitch, {
     "data-test-subj": "superDatePickerRelativeDateRoundSwitch",

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

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+ */
+
+import React from 'react';
+import { euiTimeZoneDisplayStyles } from './timezone_display.styles';
+import { useEuiMemoizedStyles } from '../../../../services';
+import { EuiFlexGroup } from '../../../flex';
+import { EuiIcon } from '../../../icon';
+import { EuiText } from '../../../text';
+
+/**
+ * Available elements to render passed to the
+ * `customRender` render function.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * Display time zone information.
+ */
+export var EuiTimeZoneDisplay = function EuiTimeZoneDisplay(_ref) {
+  var timeZone = _ref.timeZone,
+    customRender = _ref.customRender,
+    date = _ref.date,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var color = 'subdued';
+  var styles = useEuiMemoizedStyles(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 = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, {
+    type: "globe",
+    color: color
+  }), ___EmotionJSX(EuiText, {
+    component: "span",
+    color: color,
+    size: "s"
+  }, label));
+  return ___EmotionJSX(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
+ */
+export 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/es/components/date_picker/super_date_picker/date_popover/timezone_display.styles.js

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../../global_styling';
+export var 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__*/css(logicalCSS('padding-horizontal', euiTheme.size.s), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";;label:euiTimeZoneDisplay;")
+  };
+};