@elastic/eui 102.0.0 → 102.1.0-snapshot.1746441787383

package/optimize/lib/components/color_picker/saturation.js

@@ -16,6 +16,7 @@ var _services = require("../../services");
 var _predicate = require("../../services/predicate");
 var _global_styling = require("../../global_styling");
 var _i18n = require("../i18n");
+var _tool_tip = require("../tool_tip");
 var _utils = require("./utils");
 var _saturation = require("./saturation.styles");
 var _react2 = require("@emotion/react");
@@ -50,10 +51,11 @@ var EuiSaturation = exports.EuiSaturation = /*#__PURE__*/(0, _react.forwardRef)(
   });
   var instructionsId = "".concat(id, "-instructions");
   var indicatorId = "".concat(id, "-saturationIndicator");
-  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiSaturation.ariaLabel', 'euiSaturation.screenReaderInstructions'], ['HSV color mode saturation and value 2-axis slider', "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value."]),
-    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 2),
-    roleDescString = _useEuiI18n2[0],
-    instructionsString = _useEuiI18n2[1];
+  var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiSaturation.ariaLabel', 'euiSaturation.roleDescription', 'euiSaturation.screenReaderInstructions'], ['Select a color', 'HSV color mode saturation and value 2-axis slider.', "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value."]),
+    _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 3),
+    ariaLabel = _useEuiI18n2[0],
+    roleDescString = _useEuiI18n2[1],
+    instructionsString = _useEuiI18n2[2];
   var _useState = (0, _react.useState)({
       left: 0,
       top: 0
@@ -175,18 +177,21 @@ var EuiSaturation = exports.EuiSaturation = /*#__PURE__*/(0, _react.forwardRef)(
   }, (0, _react2.jsx)("div", {
     css: styles.euiSaturation__saturation,
     className: "euiSaturation__saturation"
-  })), (0, _react2.jsx)("button", {
+  })), (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: hex,
+    anchorProps: {
+      css: styles.euiSaturation__tooltip,
+      style: (0, _global_styling.logicalStyles)(indicator)
+    },
+    disableScreenReaderOutput: true // required to prevent verbose screen reader output
+  }, (0, _react2.jsx)("button", {
     id: indicatorId,
     css: styles.euiSaturation__indicator,
     className: "euiSaturation__indicator",
-    style: (0, _global_styling.logicalStyles)(indicator),
     "aria-roledescription": roleDescString,
-    "aria-label": hex,
+    "aria-label": ariaLabel,
     "aria-describedby": instructionsId
-  }), (0, _react2.jsx)("span", {
-    hidden: true,
-    "aria-live": "assertive"
-  }, hex), (0, _react2.jsx)("span", {
+  })), (0, _react2.jsx)("span", {
     hidden: true,
     id: instructionsId
   }, instructionsString));

package/optimize/lib/components/color_picker/saturation.styles.js

@@ -36,7 +36,8 @@ var euiSaturationStyles = exports.euiSaturationStyles = function euiSaturationSt
     }), ";;label:euiSaturation;"),
     euiSaturation__lightness: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;border-radius:", gradientBorderRadius, ";background:linear-gradient(\n        to right,\n        rgba(255, 255, 255, 1),\n        rgba(255, 255, 255, 0)\n      );;label:euiSaturation__lightness;"),
     euiSaturation__saturation: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;border-radius:", gradientBorderRadius, ";background:linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));;label:euiSaturation__saturation;"),
-    euiSaturation__indicator: /*#__PURE__*/(0, _react.css)("z-index:2;position:absolute;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    euiSaturation__tooltip: /*#__PURE__*/(0, _react.css)("z-index:2;position:absolute;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;;label:euiSaturation__tooltip;"),
+    euiSaturation__indicator: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " border-radius:100%;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n          border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.darkestShade, ";\n\n          &::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            border-radius: 100%;\n            border: ").concat(euiTheme.border.width.thin, " solid\n              ").concat(euiTheme.colors.lightestShade, ";\n          }\n        "),
       preferred: "\n          border: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.ink, ";\n          background-color: ").concat(euiTheme.colors.ghost, ";\n        ")
     }), ";;label:euiSaturation__indicator;")

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -52,8 +52,8 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
         "data-test-subj": "euiDataGridCellExpandButton",
         display: "fill",
         color: "primary",
-        iconSize: "m",
-        iconType: "expandMini",
+        iconSize: "s",
+        iconType: "expand",
         "aria-hidden": true,
         onClick: onExpandClick,
         title: expandButtonTitle

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_actions.styles.js

@@ -34,7 +34,7 @@ var euiDataGridCellActionsStyles = exports.euiDataGridCellActionsStyles = functi
     })), " background-color:inherit;}", cellSelectors.hoverColor, " &{background-color:", cellOutline.hoverColor, ";border-color:", cellOutline.hoverColor, ";}", _global_styling.euiCanAnimate, "{transform:scaleY(0);transform-origin:bottom;", cellSelectors.showAnimation, " &{animation-duration:", euiTheme.animation.fast, ";animation-name:", slideUp, ";animation-iteration-count:1;animation-fill-mode:forwards;}", cellSelectors.hoverAnimation, " &{animation-delay:", euiTheme.animation.slow, ";}};label:euiDataGridRowCell__actions;"),
     euiDataGridRowCell__actionButtonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([euiTheme.size.base, euiTheme.size.xs], function (x, y) {
       return x + y;
-    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}&.euiDataGridRowCell__expandCell .euiIcon{", (0, _global_styling.logicalCSS)('width', '120%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       preferred: 'border: none;'
     }), ";;label:euiDataGridRowCell__actionButtonIcon;")
   };

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

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@emotion/react");
+var _services = require("../../../services");
 var _button = require("../../button");
 var _badge = require("../../badge");
 var _i18n = require("../../i18n");
@@ -27,7 +28,12 @@ var EuiDataGridToolbarControl = exports.EuiDataGridToolbarControl = function Eui
     badgeContent = _ref.badgeContent,
     textProps = _ref.textProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  var isRefreshVariant = (0, _services.useEuiThemeRefreshVariant)('buttonVariant');
   var classes = (0, _classnames.default)('euiDataGridToolbarControl', className);
+  var cssStyles = isRefreshVariant ?
+  // passes euiThemeContext here instead via `css` to ensure legacy Enzyme tests work
+  interactiveStyles(euiThemeContext) : underlineStyles;
   var badgeAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', {
     count: typeof badgeContent === 'string' ? betterScreenReaderSlashes(badgeContent) : badgeContent
   });
@@ -36,7 +42,7 @@ var EuiDataGridToolbarControl = exports.EuiDataGridToolbarControl = function Eui
     size: "xs",
     color: "text",
     textProps: false,
-    css: underlineStyles
+    css: cssStyles
   }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({}, textProps, {
     className: (0, _classnames.default)('euiDataGridToolbarControl__text', 'eui-textTruncate', textProps && textProps.className)
   }), children), Boolean(badgeContent) && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
@@ -64,6 +70,10 @@ var underlineStyles = process.env.NODE_ENV === "production" ? {
   styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:underlineStyles;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var interactiveStyles = function interactiveStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return /*#__PURE__*/(0, _react2.css)("&:focus,&:hover:not(:disabled){.euiDataGridToolbarControl__badge{background-color:", euiTheme.components.filterButtonBadgeBackgroundHover, ";}};label:interactiveStyles;");
+};
 var badgeStyles = process.env.NODE_ENV === "production" ? {
   name: "1968nw3-badgeStyles",
   styles: "cursor:inherit;label:badgeStyles;"

package/optimize/lib/components/filter_group/filter_button.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFilterButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -17,8 +17,10 @@ var _inner_text = require("../inner_text");
 var _badge = require("../badge");
 var _button_empty = require("../button/button_empty");
 var _filter_button = require("./filter_button.styles");
+var _button_group_button = require("../button/button_group/button_group_button");
+var _button_group_button2 = require("../button/button_group/button_group_button.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
+var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isToggle", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
 /*
  * 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 +43,7 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     hasActiveFilters = _ref.hasActiveFilters,
     numFilters = _ref.numFilters,
     numActiveFilters = _ref.numActiveFilters,
+    isToggle = _ref.isToggle,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     _ref$type = _ref.type,
@@ -51,18 +54,37 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     textProps = _ref.textProps,
     contentProps = _ref.contentProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var id = (0, _services.useGeneratedHtmlId)({
+    prefix: 'filter-button'
+  });
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  var colorMode = euiThemeContext.colorMode;
+  var isRefreshVariant = (0, _services.useEuiThemeRefreshVariant)('buttonVariant');
+
+  // assumption about type of usage based on icon usage
+  // requires manual override to apply correct aria attributes for more custom usages
+  var isCollapsible = !isToggle && iconType === 'arrowDown';
+  // NOTE: in Amsterdam `hasActiveFilters` applies selected styling while `isSelected` does not.
+  // With Borealis this is more granular as EuiFilterButton now supports proper toggle buttons next to regular buttons
+  var isExpanded = isCollapsible && (isSelected !== null && isSelected !== void 0 ? isSelected : hasActiveFilters);
   var styles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonStyles);
-  var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
+  var focusColorStyles = (0, _services.useEuiMemoizedStyles)(_button_group_button2._compressedButtonFocusColors);
+  var toggleVariantStyles = isRefreshVariant ? [isToggle && styles.buttonType.toggle, !isToggle && !isDisabled && focusColorStyles[color], !isToggle && styles.buttonType.default] : [isToggle && styles.buttonType.toggle];
+  var cssStyles = [styles.euiFilterButton, !isRefreshVariant && withNext && styles.withNext, hasActiveFilters && styles.hasActiveFilters].concat(toggleVariantStyles);
+  var wrapperStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonWrapperStyles);
+  var wrapperCssStyles = [wrapperStyles.wrapper, isRefreshVariant && withNext && styles.withNext, numFiltersDefined && styles.hasNotification, isToggle && wrapperStyles.hasToggle, !grow && styles.noGrow];
   var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonChildStyles),
     contentStyles = _useEuiMemoizedStyles.content,
     textStyles = _useEuiMemoizedStyles.text,
     notificationStyles = _useEuiMemoizedStyles.notification;
+  var wrapperClasses = (0, _classnames.default)('euiFilterButton__wrapper');
   var classes = (0, _classnames.default)('euiFilterButton', {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
-    'euiFilterButton-hasNotification': numFiltersDefined
+    'euiFilterButton-hasNotification': numFiltersDefined,
+    'euiFilterButton-isToggle': isRefreshVariant && isToggle
   }, className);
 
   /**
@@ -77,6 +99,16 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     count: badgeCount
   });
   var badgeStyles = [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled];
+  var badgeContent = (0, _react2.jsx)(_badge.EuiNotificationBadge, {
+    className: "euiFilterButton__notification",
+    css: badgeStyles,
+    "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
+    color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
+    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
+  }, badgeCount);
+  var badgeElement = showBadge && (isRefreshVariant ? (0, _react2.jsx)(_services.EuiThemeProvider, {
+    colorMode: isToggle && isSelected ? 'INVERSE' : colorMode
+  }, badgeContent) : badgeContent);
 
   /**
    * Text
@@ -90,7 +122,17 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  return (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
+  var textContent = (0, _react2.jsx)("span", (0, _extends2.default)({
+    ref: ref,
+    "data-text": dataText,
+    title: dataText
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children);
+
+  /** Button element */
+  var button = (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
     color: color,
@@ -99,21 +141,36 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     iconType: iconType,
     type: type,
     textProps: false,
+    contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
+      css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
+    }),
+    "aria-expanded": isCollapsible ? isExpanded : undefined
+  }, rest), textContent, badgeElement);
+  var onToggleClick = function onToggleClick(e) {
+    var _rest$onClick;
+    rest === null || rest === void 0 || (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, e);
+  };
+  return (0, _react2.jsx)("div", {
+    className: wrapperClasses,
+    css: wrapperCssStyles
+  }, isToggle && !isCollapsible ? (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, (0, _extends2.default)({
+    id: id,
+    label: (0, _react2.jsx)(_react.default.Fragment, null, textContent, badgeElement),
+    className: classes,
+    css: cssStyles,
+    color: color,
+    isSelected: isSelected,
+    size: "compressed",
+    isDisabled: isDisabled,
+    iconSide: iconSide,
+    iconType: iconType,
+    isIconOnly: false,
+    type: type,
+    textProps: false,
     contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
       css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
     })
-  }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({
-    ref: ref,
-    "data-text": dataText,
-    title: dataText
-  }, textProps, {
-    className: buttonTextClassNames,
-    css: textCssStyles
-  }), children), showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
-    className: "euiFilterButton__notification",
-    css: badgeStyles,
-    "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
-    color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
-    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
-  }, badgeCount));
+  }, rest, {
+    onClick: onToggleClick
+  })) : button);
 };

package/optimize/lib/components/filter_group/filter_button.styles.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFilterButtonStyles = exports.euiFilterButtonDisplay = exports.euiFilterButtonChildStyles = void 0;
+exports.euiFilterButtonWrapperStyles = exports.euiFilterButtonStyles = exports.euiFilterButtonDisplay = exports.euiFilterButtonChildStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
+var _supports = require("../../global_styling/functions/supports");
 var _form = require("../form/form.styles");
 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)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,12 +16,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiFilterButtonDisplay = exports.euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiFilterButtonDisplay = exports.euiFilterButtonDisplay = function euiFilterButtonDisplay(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   return {
     flex: '1 1 auto',
     minInlineSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-      return x * 3;
+      return x * (isRefreshVariant ? 2.75 : 3);
     })
   };
 };
@@ -33,9 +36,11 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlHeight = _euiFormVariables.controlHeight,
     borderColor = _euiFormVariables.borderColor;
+  var selectedSelector = '.euiFilterButton-isSelected';
   var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
 
   // Pseudo elements create borders without affecting width. We also prefer them
@@ -43,14 +48,44 @@ var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterBu
   var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('right', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('vertical', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-left', border), "\n    }\n  ");
   // Bottom borders are needed for responsive flex-wrap behavior
   var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('top', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n    }\n  ");
+  var buttonStyles = isRefreshVariant ? "\n      ".concat((0, _global_styling.logicalCSS)('width', '100%'), "\n\n      &:not(").concat(selectedSelector, ") {\n        &:hover,\n        &:active {\n          .euiFilterButton__notification[class*=\"subdued\"] {\n            background-color: ").concat(euiTheme.components.filterButtonBadgeBackgroundHover, "\n          }\n        }\n      }\n    ") : "\n      ".concat((0, _global_styling.logicalCSS)('height', controlHeight), "\n      border-radius: 0;\n      ").concat(leftBorder, "\n      ").concat(bottomBorder, "\n\n      /* :not(:disabled) specificity needed to override EuiButtonEmpty styles */\n      &:hover:not(:disabled),\n      &:focus:not(:disabled) {\n        /* Remove underline from whole button so notifications don't get the underline */\n        text-decoration: none;\n\n        .euiFilterButton__text {\n          /* And put it only on the actual text part */\n          text-decoration: underline;\n        }\n      }\n    ");
+  var toggleTypeStyles = isRefreshVariant ? "\n      ".concat(euiFilterButtonDisplay(euiThemeContext), ";\n\n      ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n          &:is(".concat(selectedSelector, ") {\n            ").concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n              color: ").concat(euiTheme.colors.emptyShade, ";\n              background-color: ").concat(euiTheme.colors.fullShade, ";\n          }\n        ")
+  }), "\n    ") : "\n      font-weight: ".concat(euiTheme.font.weight.medium, ";\n      padding: 0;\n\n      &:is(").concat(selectedSelector, ") {\n        color: ").concat((0, _global_styling.euiButtonEmptyColor)(euiThemeContext, 'text').color, ";\n        background-color: transparent;\n        font-weight: ").concat(euiTheme.font.weight.bold, ";\n      }\n    ");
+  var withNextSelector = isRefreshVariant ? '& + .euiFilterButton__wrapper' : '.euiFilterButton__wrapper:has(&) + .euiFilterButton__wrapper';
+  // handles display of borders between buttons
+  var withNextStyles = isRefreshVariant ? "\n      &::before {\n        border: none;\n      }\n\n      ".concat((0, _supports.cssSupportsHasWithNextSibling)("\n          &:has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), "\n    ") : "\n      .euiFilterButton {\n        &::before {\n          border: none;\n        }\n      }\n    ";
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)("position:relative;", euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;", leftBorder, " ", bottomBorder, "&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
-    withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "&::before{display:none;}};label:withNext;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)(!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext), ";position:relative;", buttonStyles, ";;label:euiFilterButton;"),
+    buttonType: {
+      default: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "\n          border-radius: 0;\n\n          &:focus-visible {\n            z-index: 1;\n            outline-offset: -".concat(euiTheme.border.width.thick, ";\n            border-radius: ").concat(euiTheme.border.radius.small, ";\n            transition: none;\n          }\n        "), ";;label:default;"),
+      toggle: /*#__PURE__*/(0, _react.css)("&:focus-visible{outline-offset:", (0, _global_styling.mathWithUnits)(euiTheme.focus.width, function (x) {
+        return isRefreshVariant ? x / 2 : x * -1;
+      }), ";}", toggleTypeStyles, ";;label:toggle;")
+    },
+    withNext: /*#__PURE__*/(0, _react.css)(withNextSelector, "{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), withNextStyles, ";};label:withNext;"),
     noGrow: _ref3,
     hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
-    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", isRefreshVariant ? euiTheme.font.weight.regular : euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+  };
+};
+var euiFilterButtonWrapperStyles = exports.euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
+  var _euiFormVariables2 = (0, _form.euiFormVariables)(euiThemeContext),
+    borderColor = _euiFormVariables2.borderColor;
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
+
+  // Pseudo elements create borders without affecting width. We also prefer them
+  // over box-shadow for Windows high contrast theme compatibility
+  var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      ".concat((0, _global_styling.logicalCSS)('border-left', border), "\n\n      pointer-events: none;\n    }\n  ");
+  // Bottom borders are needed for responsive flex-wrap behavior
+  var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      ".concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n      pointer-events: none;\n    }\n  ");
+  return {
+    wrapper: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", isRefreshVariant && "\n        ".concat(leftBorder, "\n        ").concat(bottomBorder, "\n      "), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
+    hasToggle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', isRefreshVariant ? euiTheme.border.width.thin : '0'), (0, _supports.cssSupportsHasWithNextSibling)("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -62,24 +97,25 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "nd1u8j-euiFilterButton__notification",
-  styles: "cursor:inherit;label:euiFilterButton__notification;"
+  name: "zxesfz-euiFilterButton__notification",
+  styles: "cursor:inherit;forced-color-adjust:auto;&{transition:none;};label:euiFilterButton__notification;"
 } : {
-  name: "nd1u8j-euiFilterButton__notification",
-  styles: "cursor:inherit;label:euiFilterButton__notification;",
+  name: "zxesfz-euiFilterButton__notification",
+  styles: "cursor:inherit;forced-color-adjust:auto;&{transition:none;};label:euiFilterButton__notification;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiFilterButtonChildStyles = exports.euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiFilterButtonChildStyles = exports.euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   return {
     content: {
-      euiFilterButton__content: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__content;"),
+      euiFilterButton__content: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "\n          .euiThemeProvider {\n            display: inline-flex;\n          }\n        ", ";;label:euiFilterButton__content;"),
       hasIcon: /*#__PURE__*/(0, _react.css)("&>.euiIcon:last-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
       euiFilterButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-        return x * 3;
+        return x * (isRefreshVariant ? 2 : 3);
       })), ";;label:hasNotification;")
     },
     notification: {

package/optimize/lib/components/filter_group/filter_group.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFilterGroupStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _form = require("../form/form.styles");
@@ -26,20 +27,31 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiFilterGroupStyles = exports.euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     backgroundColor = _euiFormVariables.backgroundColor,
     borderColor = _euiFormVariables.borderColor,
     controlBorderRadius = _euiFormVariables.controlBorderRadius,
+    controlHeight = _euiFormVariables.controlHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  var borderRadius = isRefreshVariant ? euiTheme.border.radius.small : controlBorderRadius;
+  var borderRadiusCompressed = isRefreshVariant ? euiTheme.border.radius.small : controlCompressedBorderRadius;
+  var borderStyle = isRefreshVariant ? "\n      /* Adds the border on a pseudo element to prevent height differences between wrapper and buttons.\n      Uses ::after to ensure overlap and prevents blocking by setting pointer-events: none */\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    ") : "\n      ".concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
+    forced: "border: ".concat(euiTheme.border.thin, ";")
+  }), "\n    ");
   return {
-    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
-      forced: "border: ".concat(euiTheme.border.thin, ";")
-    }), ">*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "position: relative;", " display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", borderStyle, ">*:not(.euiFilterButton__wrapper, .euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;", isRefreshVariant && "\n          .euiPopover:focus-within {\n            z-index: 1;\n          }\n            \n          .euiFilterButton__wrapper {\n            flex-grow: 1;\n          }\n        ", ";.euiFilterButton__wrapper{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
-    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
-    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlCompressedHeight), ";};label:compressed;"),
+    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}.euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}", !isRefreshVariant && buttonChildrenBorderRadii(borderRadius), " ", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:uncompressed;"),
+    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadiusCompressed, ";", !isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', isRefreshVariant ? (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+      return x - 2 * y;
+    }) : controlCompressedHeight), ";}", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:compressed;"),
     /**
      * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
      * A fixed width is required because of the shift in widths that can be caused

package/optimize/lib/components/search_bar/filters/field_value_selection_filter.js

@@ -292,6 +292,7 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
         return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
           iconType: "arrowDown",
           iconSide: "right",
+          isSelected: active,
           hasActiveFilters: active,
           numActiveFilters: active ? activeItemsCount : undefined,
           grow: true,

package/optimize/lib/components/search_bar/filters/field_value_toggle_filter.js

@@ -79,8 +79,10 @@ var FieldValueToggleFilter = exports.FieldValueToggleFilter = /*#__PURE__*/funct
       };
       return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

package/optimize/lib/components/search_bar/filters/field_value_toggle_group_filter.js

@@ -80,9 +80,11 @@ var FieldValueToggleGroupFilter = exports.FieldValueToggleGroupFilter = /*#__PUR
         return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
           key: key,
           onClick: onClick,
+          isSelected: active,
           hasActiveFilters: active,
           "aria-pressed": !!active,
-          withNext: !isLastItem
+          withNext: !isLastItem,
+          isToggle: true
         }, name);
       });
     }

package/optimize/lib/components/search_bar/filters/is_filter.js

@@ -75,8 +75,10 @@ var IsFilter = exports.IsFilter = /*#__PURE__*/function (_Component) {
       };
       return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

package/optimize/lib/components/search_bar/search_bar.a11y.js

@@ -194,7 +194,7 @@ describe('EuiSearchBar', function () {
       cy.checkAxe();
     });
     it('has zero violations after filtering on Open items', function () {
-      cy.get('button.euiButtonEmpty').first().focus();
+      cy.get('button.euiFilterButton').first().focus();
       cy.realPress('Enter');
       cy.get('table.euiTable tbody').find('tr').should('have.length', 3);
       cy.checkAxe();
@@ -205,12 +205,12 @@ describe('EuiSearchBar', function () {
       cy.checkAxe();
     });
     it('has zero violations after filtering by Tags', function () {
-      cy.get('button.euiButtonEmpty').last().focus();
+      cy.get('button.euiFilterButton').last().focus();
       cy.realPress('Enter');
       cy.realPress('ArrowDown');
       cy.realPress('Enter');
       cy.realPress('Escape');
-      cy.get('button.euiButtonEmpty').last().should('have.focus');
+      cy.get('button.euiFilterButton').last().should('have.focus');
       cy.get('table.euiTable tbody').find('tr').should('have.length', 3);
       cy.checkAxe();
       cy.repeatRealPress(['Shift', 'Tab'], 3);

package/optimize/lib/components/table/table_header_cell.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiTableHeaderCell = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -21,7 +22,8 @@ var _table_cell_content = require("./_table_cell_content");
 var _table_cells_shared = require("./table_cells_shared.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "style", "readOnly", "tooltipProps", "description", "append"];
-/*
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * 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
@@ -37,6 +39,21 @@ var CellContents = function CellContents(_ref) {
     canSort = _ref.canSort,
     isSorted = _ref.isSorted,
     isSortAscending = _ref.isSortAscending;
+  var tooltipIcon = tooltipProps ? canSort ? (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
+    className: "euiTableSortIcon",
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued"
+  }, tooltipProps.iconProps)) : (0, _react2.jsx)(_tool_tip.EuiIconTip, (0, _extends2.default)({
+    content: tooltipProps.content,
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued",
+    position: "top",
+    iconProps: _objectSpread({
+      role: 'button'
+    }, tooltipProps.iconProps)
+  }, tooltipProps.tooltipProps)) : null;
   return (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, {
     className: className,
     align: align,
@@ -57,14 +74,7 @@ var CellContents = function CellContents(_ref) {
         className: "eui-textTruncate"
       }, children);
     });
-  }), description && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, description)), tooltipProps && (0, _react2.jsx)(_tool_tip.EuiIconTip, (0, _extends2.default)({
-    content: tooltipProps.content,
-    type: tooltipProps.icon || 'questionInCircle',
-    size: "m",
-    color: "subdued",
-    position: "top",
-    iconProps: tooltipProps.iconProps
-  }, tooltipProps.tooltipProps)), isSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
+  }), description && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, description)), tooltipIcon, isSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
     className: "euiTableSortIcon",
     type: isSortAscending ? 'sortUp' : 'sortDown',
     size: "m"
@@ -126,7 +136,11 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     role: "columnheader",
     "aria-sort": ariaSortValue,
     style: inlineStyles
-  }, rest), canSort ? (0, _react2.jsx)("button", {
+  }, rest), canSort ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
+    content: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content
+  }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.tooltipProps, {
+    display: "block"
+  }), (0, _react2.jsx)("button", {
     type: "button",
     css: styles.euiTableHeaderCell__button,
     className: (0, _classnames.default)('euiTableHeaderButton', {
@@ -134,5 +148,5 @@ var EuiTableHeaderCell = exports.EuiTableHeaderCell = function EuiTableHeaderCel
     }),
     onClick: onSort,
     "data-test-subj": "tableHeaderSortButton"
-  }, (0, _react2.jsx)(CellContents, cellContentsProps)) : (0, _react2.jsx)(CellContents, cellContentsProps), append);
+  }, (0, _react2.jsx)(CellContents, cellContentsProps))) : (0, _react2.jsx)(CellContents, cellContentsProps), append);
 };