@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

package/es/components/datagrid/controls/column_sorting.js

@@ -383,7 +383,6 @@ DataGridSortingControl.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -413,6 +412,19 @@ DataGridSortingControl.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          /**
+             * Controls the disabled behavior via the native `disabled` attribute.
+             */
+          isDisabled: PropTypes.bool,
+          /**
+             * NOTE: Beta feature, may be changed or removed in the future
+             *
+             * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+             * This results in a semantically disabled button without the default browser handling of the disabled state.
+             *
+             * Use e.g. when a disabled button should have a tooltip.
+             */
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         /**
@@ -466,7 +478,6 @@ DataGridSortingControl.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -475,6 +486,8 @@ DataGridSortingControl.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -509,7 +522,6 @@ DataGridSortingControl.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -518,6 +530,8 @@ DataGridSortingControl.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -552,7 +566,6 @@ DataGridSortingControl.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -561,6 +574,8 @@ DataGridSortingControl.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -595,7 +610,6 @@ DataGridSortingControl.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -604,6 +618,8 @@ DataGridSortingControl.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -638,7 +654,6 @@ DataGridSortingControl.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -647,6 +662,8 @@ DataGridSortingControl.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,

package/es/components/datagrid/controls/data_grid_toolbar_control.js

@@ -74,13 +74,6 @@ EuiDataGridToolbarControl.propTypes = {
      * Ensure the text of the button sits flush to the left, right, or both sides of its container
      */
   flush: PropTypes.any,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: PropTypes.bool,
   /**
      * Force disables the button and changes the icon to a loading spinner
      */
@@ -135,10 +128,23 @@ EuiDataGridToolbarControl.propTypes = {
     "data-text": PropTypes.string
   }).isRequired, PropTypes.oneOf([false])]),
   iconSize: PropTypes.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: PropTypes.bool,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool,
   badgeContent: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired])
 };
 var betterScreenReaderSlashes = function betterScreenReaderSlashes(badgeContent) {

package/es/components/datagrid/data_grid.js

@@ -168,7 +168,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/es/components/datagrid/utils/in_memory.js

@@ -96,13 +96,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, {
@@ -311,7 +312,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -341,6 +341,19 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          /**
+             * Controls the disabled behavior via the native `disabled` attribute.
+             */
+          isDisabled: PropTypes.bool,
+          /**
+             * NOTE: Beta feature, may be changed or removed in the future
+             *
+             * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+             * This results in a semantically disabled button without the default browser handling of the disabled state.
+             *
+             * Use e.g. when a disabled button should have a tooltip.
+             */
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         /**
@@ -394,7 +407,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -403,6 +415,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -437,7 +451,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -446,6 +459,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -480,7 +495,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -489,6 +503,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -523,7 +539,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -532,6 +547,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -566,7 +583,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -575,6 +591,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,

package/es/components/date_picker/auto_refresh/auto_refresh.js

@@ -177,7 +177,7 @@ EuiAutoRefreshButton.propTypes = {
   intervalUnits: PropTypes.any,
   onRefreshChange: PropTypes.func.isRequired,
   /**
-     * `disabled` is also allowed
+     * Controls the disabled behavior via the native `disabled` attribute.
      */
   isDisabled: PropTypes.bool,
   /**
@@ -233,5 +233,14 @@ EuiAutoRefreshButton.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
-  css: PropTypes.any
+  css: PropTypes.any,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: PropTypes.bool
 };

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

@@ -1,3 +1,4 @@
+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; } }
@@ -16,13 +17,14 @@ import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from "prop-types";
 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,
@@ -40,7 +42,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, {
@@ -59,6 +63,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)
@@ -149,7 +154,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,
@@ -173,7 +179,9 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     "aria-label": submitButtonLabel,
     title: submitButtonLabel,
     "data-test-subj": "parseAbsoluteDateFormat"
-  })));
+  })), ___EmotionJSX(EuiTimeZoneDisplay, _extends({
+    id: timeZomeDescriptionId
+  }, timeZoneDisplayProps)));
 };
 EuiAbsoluteTab.propTypes = {
   dateFormat: PropTypes.string.isRequired,
@@ -185,5 +193,23 @@ EuiAbsoluteTab.propTypes = {
   labelPrefix: PropTypes.string.isRequired,
   utcOffset: PropTypes.number,
   minDate: PropTypes.any,
-  maxDate: PropTypes.any
+  maxDate: PropTypes.any,
+  timeZoneDisplayProps: PropTypes.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.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.func,
+    /**
+       * Reference date to be used while resolving the UTC offset.
+       * Only useful for edge cases involving daylight saving time.
+       */
+    date: PropTypes.any
+  })
 };

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

@@ -1,4 +1,4 @@
-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"];
 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; }
@@ -43,6 +43,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,
@@ -101,7 +103,8 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     utcOffset: utcOffset,
     timeOptions: timeOptions,
     minDate: minDate,
-    maxDate: maxDate
+    maxDate: maxDate,
+    timeZoneDisplayProps: timeZoneDisplayProps
   }));
 };
 EuiDatePopoverButton.propTypes = {
@@ -144,6 +147,24 @@ EuiDatePopoverButton.propTypes = {
       label: PropTypes.string,
       start: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired
     }).isRequired).isRequired
-  }).isRequired
+  }).isRequired,
+  timeZoneDisplayProps: PropTypes.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.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.func,
+    /**
+       * Reference date to be used while resolving the UTC offset.
+       * Only useful for edge cases involving daylight saving time.
+       */
+    date: PropTypes.any
+  })
 };
 EuiDatePopoverButton.displayName = 'EuiDatePopoverButton';

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

@@ -33,7 +33,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) {
@@ -64,7 +66,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)
@@ -78,7 +81,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)
@@ -150,6 +154,24 @@ EuiDatePopoverContent.propTypes = {
       label: PropTypes.string,
       start: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired
     }).isRequired).isRequired
-  }).isRequired
+  }).isRequired,
+  timeZoneDisplayProps: PropTypes.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.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.func,
+    /**
+       * Reference date to be used while resolving the UTC offset.
+       * Only useful for edge cases involving daylight saving time.
+       */
+    date: PropTypes.any
+  })
 };
 EuiDatePopoverContent.displayName = 'EuiDatePopoverContent';

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

@@ -1,3 +1,4 @@
+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; } }
@@ -25,6 +26,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,
@@ -35,7 +37,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),
@@ -83,6 +87,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');
@@ -116,6 +121,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
@@ -125,7 +131,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",
@@ -155,5 +163,23 @@ EuiRelativeTab.propTypes = {
       label: PropTypes.string,
       start: PropTypes.oneOfType([PropTypes.oneOf(["now"]), PropTypes.string.isRequired]).isRequired
     }).isRequired).isRequired
-  }).isRequired
+  }).isRequired,
+  timeZoneDisplayProps: PropTypes.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.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.func,
+    /**
+       * Reference date to be used while resolving the UTC offset.
+       * Only useful for edge cases involving daylight saving time.
+       */
+    date: PropTypes.any
+  })
 };