@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

package/optimize/lib/components/button/button_group/button_group.js

@@ -14,7 +14,7 @@ var _accessibility = require("../../accessibility");
 var _button_group_button = require("./button_group_button");
 var _button_group = require("./button_group.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"];
+var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "hasAriaDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"];
 /*
  * 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,8 @@ var EuiButtonGroup = exports.EuiButtonGroup = function EuiButtonGroup(_ref) {
     idToSelectedMap = _ref$idToSelectedMap === void 0 ? {} : _ref$idToSelectedMap,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
+    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
     _ref$isFullWidth = _ref.isFullWidth,
     isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
     _ref$isIconOnly = _ref.isIconOnly,
@@ -53,18 +55,21 @@ var EuiButtonGroup = exports.EuiButtonGroup = function EuiButtonGroup(_ref) {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var typeIsSingle = type === 'single';
+  var groupDisabledProps = {
+    disabled: hasAriaDisabled ? undefined : isDisabled,
+    'aria-disabled': hasAriaDisabled ? isDisabled : undefined
+  };
   return (0, _react2.jsx)("fieldset", (0, _extends2.default)({
     css: wrapperCssStyles,
     className: classes
-  }, rest, {
-    disabled: isDisabled
-  }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("legend", null, legend)), (0, _react2.jsx)("div", {
+  }, rest, groupDisabledProps), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("legend", null, legend)), (0, _react2.jsx)("div", {
     css: cssStyles,
     className: "euiButtonGroup__buttons"
   }, options.map(function (option) {
     return (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, (0, _extends2.default)({
       key: option.id,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      hasAriaDisabled: hasAriaDisabled
     }, option, {
       onClick: typeIsSingle ? function () {
         return onChange(option.id, option.value);

package/optimize/lib/components/button/button_group/button_group_button.js

@@ -33,8 +33,7 @@ var EuiButtonGroupButton = exports.EuiButtonGroupButton = function EuiButtonGrou
     id = _ref.id,
     isDisabled = _ref.isDisabled,
     isIconOnly = _ref.isIconOnly,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    isSelected = _ref.isSelected,
     label = _ref.label,
     value = _ref.value,
     size = _ref.size,
@@ -54,7 +53,7 @@ var EuiButtonGroupButton = exports.EuiButtonGroupButton = function EuiButtonGrou
   var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: display
   })[color];
-  var cssStyles = [styles.euiButtonGroupButton, isIconOnly && styles.iconOnly, !isCompressed && (hasToolTip ? styles.uncompressed.hasToolTip : styles.uncompressed[size]), isCompressed ? styles.compressed : styles.uncompressed.uncompressed, isDisabled && isSelected ? styles.disabledAndSelected : buttonColorStyles, !isDisabled && isCompressed && focusColorStyles[color], hasBorder && styles.hasBorder];
+  var cssStyles = [styles.euiButtonGroupButton, isIconOnly && styles.iconOnly.iconOnly, isIconOnly && styles.iconOnly[size], !isCompressed && (hasToolTip ? styles.uncompressed.hasToolTip : styles.uncompressed[size]), isCompressed ? styles.compressed : styles.uncompressed.uncompressed, isDisabled && isSelected ? styles.disabledAndSelected : buttonColorStyles, !isDisabled && isCompressed && focusColorStyles[color], hasBorder && styles.hasBorder];
   var tooltipWrapperStyles = [styles.tooltipWrapper, !isCompressed && styles.uncompressed[size]];
   var contentStyles = [styles.content.euiButtonGroupButton__content, isCompressed && styles.content.compressed];
   var textStyles = [isIconOnly ? styles.text.euiButtonGroupButton__iconOnly : styles.text.euiButtonGroupButton__text];

package/optimize/lib/components/button/button_group/button_group_button.styles.js

@@ -11,7 +11,6 @@ var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
 var _button = require("../../../global_styling/mixins/_button");
 var _accessibility = require("../../accessibility");
-var _form = require("../../form/form.styles");
 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; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
@@ -40,9 +39,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
-    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
-  var compressedButtonHeight = (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+  var buttonSizes = (0, _button.euiButtonSizeMap)(euiThemeContext);
+  var compressedButtonHeight = (0, _global_styling.mathWithUnits)([buttonSizes.s.height, euiTheme.border.width.thin], function (x, y) {
     return x - y * 6;
   });
   var selectedSelectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
@@ -54,10 +52,16 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
     euiButtonGroupButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), " flex-shrink:1;flex-grow:0;z-index:0;&:focus-visible{z-index:2;}", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;}&:is(", selectedSelectors, "){", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
       forced: "\n            --highContrastHoverIndicatorColor: ".concat(euiTheme.colors.textInverse, ";\n            border: none;\n\n            /* styles the content manually instead of the button itself to preserve the system\n            focus style, as otherwise preventForcedColors() would require manual styling */\n            > [class*=\"euiButtonDisplayContent\"] {\n              ").concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n              color: ").concat(euiTheme.colors.emptyShade, ";\n              border: none;\n            }\n          ")
     }), ";};label:euiButtonGroupButton;"),
-    iconOnly: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
+    iconOnly: {
+      // used only as classname, sizes are added separately
+      iconOnly: /*#__PURE__*/(0, _react.css)(";label:iconOnly;"),
+      s: "\n        ".concat((0, _global_styling.logicalCSS)('width', buttonSizes.s.height), "\n      "),
+      m: "\n        ".concat((0, _global_styling.logicalCSS)('width', buttonSizes.m.height), "\n      "),
+      compressed: "\n        ".concat((0, _global_styling.logicalCSS)('width', compressedButtonHeight), "\n      ")
+    },
     // Sizes
     uncompressed: {
-      uncompressed: /*#__PURE__*/(0, _react.css)("&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";}&:is(", selectedSelectors, "):not(:disabled){z-index:1;border:", euiTheme.border.width.thin, " solid transparent;", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+      uncompressed: /*#__PURE__*/(0, _react.css)("&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";}&:is(", selectedSelectors, "):not(", _global_styling.euiDisabledSelector, "){z-index:1;border:", euiTheme.border.width.thin, " solid transparent;", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
         forced: "\n            /* use inset focus outline to ensure visibility, same as custom hover.\n            NOTE: temp solution - this will be revisited once we handle global focus styles */\n            &:focus-visible {\n              outline-color: ".concat(euiTheme.colors.textInverse, ";\n              /* has to be inset due to overflow: hidden */\n              outline-offset: -").concat((0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
           return x * 4;
         }), ";\n            }\n          ")

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

@@ -10,13 +10,15 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
+var _useEuiDisabledElement = require("../../../services/hooks/useEuiDisabledElement");
 var _icon = require("../../icon");
 var _loading = require("../../loading");
 var _button = require("../../../global_styling/mixins/_button");
 var _button_display = require("../button_display/_button_display");
 var _button_icon = require("./button_icon.styles");
 var _react2 = require("@emotion/react");
-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
@@ -35,6 +37,8 @@ var EuiButtonIcon = exports.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,
@@ -53,6 +57,14 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
     href: href,
     isLoading: isLoading
   });
+  var _useEuiDisabledElemen = (0, _useEuiDisabledElement.useEuiDisabledElement)({
+      isDisabled: isDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      onKeyDown: rest.onKeyDown
+    }),
+    disabledRef = _useEuiDisabledElemen.ref,
+    disabledButtonProps = (0, _objectWithoutProperties2.default)(_useEuiDisabledElemen, _excluded2);
+  var setCombinedRef = (0, _services.useCombinedRefs)([disabledRef, buttonRef]);
   var ariaHidden = rest['aria-hidden'];
   var isAriaHidden = ariaHidden === 'true' || ariaHidden === true;
   if (!rest['aria-label'] && !rest['aria-labelledby'] && !isAriaHidden) {
@@ -112,7 +124,7 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
       href: href,
       target: target,
       rel: secureRel,
-      ref: buttonRef
+      ref: setCombinedRef
     }, rest), buttonIcon);
   }
   var buttonType;
@@ -123,6 +135,6 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
     className: classes,
     "aria-pressed": isSelected,
     type: type,
-    ref: buttonRef
-  }, rest), buttonIcon);
+    ref: setCombinedRef
+  }, rest, disabledButtonProps), buttonIcon);
 };

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/body/header/column_actions.js

@@ -79,16 +79,6 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   var closePopover = (0, _react.useCallback)(function () {
     setIsPopoverOpen(false);
   }, []);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var onFocus = (0, _react.useCallback)(function () {
-    return setIsActionsButtonFocused(true);
-  }, []);
-  var onBlur = (0, _react.useCallback)(function () {
-    return setIsActionsButtonFocused(false);
-  }, []);
   var actionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
     title: title
   });
@@ -103,10 +93,10 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   /**
    * Props to set on parent EuiDataGridHeaderCell
    */
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isColumnMoving = _useState6[0],
-    setIsColumnMoving = _useState6[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isColumnMoving = _useState4[0],
+    setIsColumnMoving = _useState4[1];
   (0, _react.useEffect)(function () {
     setPropsFromColumnActions({
       className: isPopoverOpen ? 'euiDataGridHeaderCell--isActionsPopoverOpen' : '',
@@ -152,17 +142,11 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
       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/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -55,6 +55,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var hasColumnActions = (0, _column_actions.useHasColumnActions)(actions);
+  var cellContentId = "dataGridHeaderCellContent-".concat(id);
   var classes = (0, _classnames2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
   var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
@@ -98,8 +99,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       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": (0, _classnames2.default)(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) {
@@ -108,11 +108,13 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       }, (0, _react2.jsx)(_icon.EuiIcon, {
         type: "grabOmnidirectional",
         size: "s",
-        css: styles.euiDataGridHeaderCell__actions
+        css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.start, ";label:EuiDataGridHeaderCell;"]
       })), (0, _react2.jsx)("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 && (0, _react2.jsx)(_column_actions.ColumnActions, {
         index: index,
         id: id,

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

@@ -22,11 +22,18 @@ var euiDataGridHeaderCellStyles = exports.euiDataGridHeaderCellStyles = function
   var euiTheme = euiThemeContext.euiTheme;
   var _euiDataGridCellOutli = (0, _data_grid_cell.euiDataGridCellOutlineSelectors)('.euiDataGridHeaderCell'),
     header = _euiDataGridCellOutli.header;
+  var hideAnimation = function hideAnimation(margin, translateX) {
+    return "\n    ".concat(header.hideActions, " & {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', margin), "\n      transform: translateX(").concat(translateX, ") scale(0.01);\n      opacity: 0;\n    }\n  ");
+  };
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.euiTextTruncate)(), ";;label:euiDataGridHeaderCell__content;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__actions: /*#__PURE__*/(0, _react.css)("overflow:hidden;display:flex;", header.hideActions, " &{", (0, _global_styling.logicalCSS)('width', 0), " opacity:0;}", _global_styling.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__*/(0, _react.css)("overflow:hidden;display:flex;max-inline-size:24px;", _global_styling.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__*/(0, _react.css)(hideAnimation("-".concat(euiTheme.size.m), '0%'), ";;label:start;"),
+      end: /*#__PURE__*/(0, _react.css)(hideAnimation("-".concat(euiTheme.size.l), '50%'), ";;label:end;")
+    }
   };
 };

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

@@ -16,7 +16,7 @@ var _focus = require("../../utils/focus");
 var _focus_utils = require("../cell/focus_utils");
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper.styles");
 var _react2 = require("@emotion/react");
-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
@@ -42,6 +42,7 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     isDragging = _ref.isDragging,
     _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeaderCell', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell_wrapper.euiDataGridHeaderCellWrapperStyles);
@@ -107,7 +108,8 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     style: width != null ? {
       width: "".concat(width, "px")
     } : {},
-    "aria-label": renderFocusTrap ? ariaLabel : undefined
+    "aria-label": renderFocusTrap ? ariaLabel : undefined,
+    "aria-labelledby": renderFocusTrap ? ariaLabelledby : undefined
   }, rest), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
     cellEl: isDragging ? null : headerEl,
     renderFocusTrap: isDragging ? false : renderFocusTrap,

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",