@elastic/eui 102.0.0 → 102.1.0-snapshot.1746441787383

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

@@ -19,6 +19,7 @@ import { keys, useMouseMove, useEuiMemoizedStyles, useGeneratedHtmlId } from '..
 import { isNil } from '../../services/predicate';
 import { logicalStyles } from '../../global_styling';
 import { useEuiI18n } from '../i18n';
+import { EuiToolTip } from '../tool_tip';
 import { getEventPosition } from './utils';
 import { euiSaturationStyles } from './saturation.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -41,10 +42,11 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   var instructionsId = "".concat(id, "-instructions");
   var indicatorId = "".concat(id, "-saturationIndicator");
-  var _useEuiI18n = 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 = _slicedToArray(_useEuiI18n, 2),
-    roleDescString = _useEuiI18n2[0],
-    instructionsString = _useEuiI18n2[1];
+  var _useEuiI18n = 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 = _slicedToArray(_useEuiI18n, 3),
+    ariaLabel = _useEuiI18n2[0],
+    roleDescString = _useEuiI18n2[1],
+    instructionsString = _useEuiI18n2[2];
   var _useState = useState({
       left: 0,
       top: 0
@@ -166,18 +168,21 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, ___EmotionJSX("div", {
     css: styles.euiSaturation__saturation,
     className: "euiSaturation__saturation"
-  })), ___EmotionJSX("button", {
+  })), ___EmotionJSX(EuiToolTip, {
+    content: hex,
+    anchorProps: {
+      css: styles.euiSaturation__tooltip,
+      style: logicalStyles(indicator)
+    },
+    disableScreenReaderOutput: true // required to prevent verbose screen reader output
+  }, ___EmotionJSX("button", {
     id: indicatorId,
     css: styles.euiSaturation__indicator,
     className: "euiSaturation__indicator",
-    style: logicalStyles(indicator),
     "aria-roledescription": roleDescString,
-    "aria-label": hex,
+    "aria-label": ariaLabel,
     "aria-describedby": instructionsId
-  }), ___EmotionJSX("span", {
-    hidden: true,
-    "aria-live": "assertive"
-  }, hex), ___EmotionJSX("span", {
+  })), ___EmotionJSX("span", {
     hidden: true,
     id: instructionsId
   }, instructionsString));

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

@@ -30,7 +30,8 @@ export var euiSaturationStyles = function euiSaturationStyles(euiThemeContext) {
     }), ";;label:euiSaturation;"),
     euiSaturation__lightness: /*#__PURE__*/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__*/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__*/css("z-index:2;position:absolute;", logicalSizeCSS(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;", highContrastModeStyles(euiThemeContext, {
+    euiSaturation__tooltip: /*#__PURE__*/css("z-index:2;position:absolute;", logicalSizeCSS(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;;label:euiSaturation__tooltip;"),
+    euiSaturation__indicator: /*#__PURE__*/css("position:absolute;inset:0;", logicalSizeCSS(indicatorSize), " border-radius:100%;", 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/es/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -42,8 +42,8 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
         "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/es/components/datagrid/body/cell/data_grid_cell_actions.styles.js

@@ -28,7 +28,7 @@ export var euiDataGridCellActionsStyles = function euiDataGridCellActionsStyles(
     })), " background-color:inherit;}", cellSelectors.hoverColor, " &{background-color:", cellOutline.hoverColor, ";border-color:", cellOutline.hoverColor, ";}", 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__*/css(logicalCSS('width', euiTheme.size.base), " ", logicalCSS('height', 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{", logicalCSS('width', '120%'), " ", logicalCSS('height', '100%'), ";}", highContrastModeStyles(euiThemeContext, {
+    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}", highContrastModeStyles(euiThemeContext, {
       preferred: 'border: none;'
     }), ";;label:euiDataGridRowCell__actionButtonIcon;")
   };

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

@@ -13,6 +13,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import React from 'react';
 import classNames from 'classnames';
 import { css } from '@emotion/react';
+import { useEuiTheme, useEuiThemeRefreshVariant } from '../../../services';
 import { EuiButtonEmpty } from '../../button';
 import { EuiNotificationBadge } from '../../badge';
 import { useEuiI18n } from '../../i18n';
@@ -23,7 +24,12 @@ export var EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref)
     badgeContent = _ref.badgeContent,
     textProps = _ref.textProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiThemeContext = useEuiTheme();
+  var isRefreshVariant = useEuiThemeRefreshVariant('buttonVariant');
   var classes = classNames('euiDataGridToolbarControl', className);
+  var cssStyles = isRefreshVariant ?
+  // passes euiThemeContext here instead via `css` to ensure legacy Enzyme tests work
+  interactiveStyles(euiThemeContext) : underlineStyles;
   var badgeAriaLabel = useEuiI18n('euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', {
     count: typeof badgeContent === 'string' ? betterScreenReaderSlashes(badgeContent) : badgeContent
   });
@@ -32,7 +38,7 @@ export var EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref)
     size: "xs",
     color: "text",
     textProps: false,
-    css: underlineStyles
+    css: cssStyles
   }, rest), ___EmotionJSX("span", _extends({}, textProps, {
     className: classNames('euiDataGridToolbarControl__text', 'eui-textTruncate', textProps && textProps.className)
   }), children), Boolean(badgeContent) && ___EmotionJSX(EuiNotificationBadge, {
@@ -60,6 +66,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__*/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/es/components/filter_group/filter_button.js

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 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) { _defineProperty(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; }
 /*
@@ -15,12 +15,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
+import { EuiThemeProvider, useEuiMemoizedStyles, useEuiTheme, useGeneratedHtmlId, useEuiThemeRefreshVariant } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { useInnerText } from '../inner_text';
 import { EuiNotificationBadge } from '../badge';
 import { EuiButtonEmpty } from '../button/button_empty';
-import { euiFilterButtonStyles, euiFilterButtonChildStyles } from './filter_button.styles';
+import { euiFilterButtonStyles, euiFilterButtonWrapperStyles, euiFilterButtonChildStyles } from './filter_button.styles';
+import { EuiButtonGroupButton } from '../button/button_group/button_group_button';
+import { _compressedButtonFocusColors } from '../button/button_group/button_group_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFilterButton = function EuiFilterButton(_ref) {
   var children = _ref.children,
@@ -35,6 +37,7 @@ export var 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,
@@ -45,18 +48,37 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     textProps = _ref.textProps,
     contentProps = _ref.contentProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var id = useGeneratedHtmlId({
+    prefix: 'filter-button'
+  });
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
+  var euiThemeContext = useEuiTheme();
+  var colorMode = euiThemeContext.colorMode;
+  var isRefreshVariant = 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 = useEuiMemoizedStyles(euiFilterButtonStyles);
-  var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
+  var focusColorStyles = useEuiMemoizedStyles(_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 = useEuiMemoizedStyles(euiFilterButtonWrapperStyles);
+  var wrapperCssStyles = [wrapperStyles.wrapper, isRefreshVariant && withNext && styles.withNext, numFiltersDefined && styles.hasNotification, isToggle && wrapperStyles.hasToggle, !grow && styles.noGrow];
   var _useEuiMemoizedStyles = useEuiMemoizedStyles(euiFilterButtonChildStyles),
     contentStyles = _useEuiMemoizedStyles.content,
     textStyles = _useEuiMemoizedStyles.text,
     notificationStyles = _useEuiMemoizedStyles.notification;
+  var wrapperClasses = classNames('euiFilterButton__wrapper');
   var classes = classNames('euiFilterButton', {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
-    'euiFilterButton-hasNotification': numFiltersDefined
+    'euiFilterButton-hasNotification': numFiltersDefined,
+    'euiFilterButton-isToggle': isRefreshVariant && isToggle
   }, className);
 
   /**
@@ -71,6 +93,16 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     count: badgeCount
   });
   var badgeStyles = [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled];
+  var badgeContent = ___EmotionJSX(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 ? ___EmotionJSX(EuiThemeProvider, {
+    colorMode: isToggle && isSelected ? 'INVERSE' : colorMode
+  }, badgeContent) : badgeContent);
 
   /**
    * Text
@@ -84,7 +116,17 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  return ___EmotionJSX(EuiButtonEmpty, _extends({
+  var textContent = ___EmotionJSX("span", _extends({
+    ref: ref,
+    "data-text": dataText,
+    title: dataText
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children);
+
+  /** Button element */
+  var button = ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
     css: cssStyles,
     color: color,
@@ -93,21 +135,36 @@ export var 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 ___EmotionJSX("div", {
+    className: wrapperClasses,
+    css: wrapperCssStyles
+  }, isToggle && !isCollapsible ? ___EmotionJSX(EuiButtonGroupButton, _extends({
+    id: id,
+    label: ___EmotionJSX(React.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), ___EmotionJSX("span", _extends({
-    ref: ref,
-    "data-text": dataText,
-    title: dataText
-  }, textProps, {
-    className: buttonTextClassNames,
-    css: textCssStyles
-  }), children), showBadge && ___EmotionJSX(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/es/components/filter_group/filter_button.styles.js

@@ -8,14 +8,17 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate } from '../../global_styling';
+import { isEuiThemeRefreshVariant } from '../../services';
+import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate, highContrastModeStyles, preventForcedColors, euiButtonEmptyColor } from '../../global_styling';
+import { cssSupportsHasWithNextSibling } from '../../global_styling/functions/supports';
 import { euiFormVariables } from '../form/form.styles';
-export var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiFilterButtonDisplay = function euiFilterButtonDisplay(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     flex: '1 1 auto',
     minInlineSize: mathWithUnits(euiTheme.size.base, function (x) {
-      return x * 3;
+      return x * (isRefreshVariant ? 2.75 : 3);
     })
   };
 };
@@ -29,9 +32,11 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = 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
@@ -39,14 +44,44 @@ export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContex
   var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat(logicalCSS('right', '100%'), "\n      ").concat(logicalCSS('vertical', 0), "\n      ").concat(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(logicalCSS('top', '100%'), "\n      ").concat(logicalCSS('horizontal', 0), "\n      ").concat(logicalCSS('border-bottom', border), "\n    }\n  ");
+  var buttonStyles = isRefreshVariant ? "\n      ".concat(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(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(highContrastModeStyles(euiThemeContext, {
+    forced: "\n          &:is(".concat(selectedSelector, ") {\n            ").concat(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(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(cssSupportsHasWithNextSibling("\n          &:has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), "\n    ") : "\n      .euiFilterButton {\n        &::before {\n          border: none;\n        }\n      }\n    ";
   return {
-    euiFilterButton: /*#__PURE__*/css("position:relative;", euiFilterButtonDisplay(euiThemeContext), " ", 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__*/css("&+.euiFilterButton{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), "&::before{display:none;}};label:withNext;"),
+    euiFilterButton: /*#__PURE__*/css(!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext), ";position:relative;", buttonStyles, ";;label:euiFilterButton;"),
+    buttonType: {
+      default: /*#__PURE__*/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__*/css("&:focus-visible{outline-offset:", mathWithUnits(euiTheme.focus.width, function (x) {
+        return isRefreshVariant ? x / 2 : x * -1;
+      }), ";}", toggleTypeStyles, ";;label:toggle;")
+    },
+    withNext: /*#__PURE__*/css(withNextSelector, "{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), withNextStyles, ";};label:withNext;"),
     noGrow: _ref3,
     hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
-    hasActiveFilters: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+    hasActiveFilters: /*#__PURE__*/css("font-weight:", isRefreshVariant ? euiTheme.font.weight.regular : euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+  };
+};
+export var euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
+  var _euiFormVariables2 = 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(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(logicalCSS('border-bottom', border), "\n      pointer-events: none;\n    }\n  ");
+  return {
+    wrapper: /*#__PURE__*/css(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", isRefreshVariant && "\n        ".concat(leftBorder, "\n        ").concat(bottomBorder, "\n      "), " ", logicalCSS('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
+    hasToggle: /*#__PURE__*/css(logicalCSS('padding-horizontal', isRefreshVariant ? euiTheme.border.width.thin : '0'), cssSupportsHasWithNextSibling("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -58,24 +93,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__
 };
-export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     content: {
-      euiFilterButton__content: /*#__PURE__*/css(";label:euiFilterButton__content;"),
+      euiFilterButton__content: /*#__PURE__*/css(isRefreshVariant && "\n          .euiThemeProvider {\n            display: inline-flex;\n          }\n        ", ";;label:euiFilterButton__content;"),
       hasIcon: /*#__PURE__*/css("&>.euiIcon:last-child{", logicalCSS('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
       euiFilterButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
-        return x * 3;
+        return x * (isRefreshVariant ? 2 : 3);
       })), ";;label:hasNotification;")
     },
     notification: {

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

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../services';
 import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form/form.styles';
@@ -22,20 +23,31 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = 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(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__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", highContrastModeStyles(euiThemeContext, {
-      none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
-      forced: "border: ".concat(euiTheme.border.thin, ";")
-    }), ">*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css(isRefreshVariant && "position: relative;", " display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", borderStyle, ">*:not(.euiFilterButton__wrapper, .euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", 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__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
-    compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),
+    uncompressed: /*#__PURE__*/css("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", logicalCSS('height', controlHeight), ";}.euiFilterButton{", logicalCSS('height', controlHeight), ";}", !isRefreshVariant && buttonChildrenBorderRadii(borderRadius), " ", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat(logicalCSS('height', mathWithUnits([controlHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:uncompressed;"),
+    compressed: /*#__PURE__*/css("border-radius:", borderRadiusCompressed, ";", !isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed), " .euiFilterButton{", logicalCSS('height', isRefreshVariant ? mathWithUnits([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+      return x - 2 * y;
+    }) : controlCompressedHeight), ";}", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat(logicalCSS('height', 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/es/components/search_bar/filters/field_value_selection_filter.js

@@ -284,6 +284,7 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX(EuiFilterButton, {
           iconType: "arrowDown",
           iconSide: "right",
+          isSelected: active,
           hasActiveFilters: active,
           numActiveFilters: active ? activeItemsCount : undefined,
           grow: true,

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

@@ -71,8 +71,10 @@ export var FieldValueToggleFilter = /*#__PURE__*/function (_Component) {
       };
       return ___EmotionJSX(EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

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

@@ -72,9 +72,11 @@ export var FieldValueToggleGroupFilter = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX(EuiFilterButton, {
           key: key,
           onClick: onClick,
+          isSelected: active,
           hasActiveFilters: active,
           "aria-pressed": !!active,
-          withNext: !isLastItem
+          withNext: !isLastItem,
+          isToggle: true
         }, name);
       });
     }

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

@@ -67,8 +67,10 @@ export var IsFilter = /*#__PURE__*/function (_Component) {
       };
       return ___EmotionJSX(EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

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

@@ -184,7 +184,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();
@@ -195,12 +195,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/es/components/table/table_header_cell.js

@@ -1,6 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 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) { _defineProperty(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
@@ -16,7 +19,7 @@ import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
 import { EuiInnerText } from '../inner_text';
-import { EuiIconTip } from '../tool_tip';
+import { EuiIconTip, EuiToolTip } from '../tool_tip';
 import { resolveWidthAsStyle } from './utils';
 import { useEuiTableIsResponsive } from './mobile/responsive_context';
 import { EuiTableCellContent } from './_table_cell_content';
@@ -31,6 +34,21 @@ var CellContents = function CellContents(_ref) {
     canSort = _ref.canSort,
     isSorted = _ref.isSorted,
     isSortAscending = _ref.isSortAscending;
+  var tooltipIcon = tooltipProps ? canSort ? ___EmotionJSX(EuiIcon, _extends({
+    className: "euiTableSortIcon",
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued"
+  }, tooltipProps.iconProps)) : ___EmotionJSX(EuiIconTip, _extends({
+    content: tooltipProps.content,
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued",
+    position: "top",
+    iconProps: _objectSpread({
+      role: 'button'
+    }, tooltipProps.iconProps)
+  }, tooltipProps.tooltipProps)) : null;
   return ___EmotionJSX(EuiTableCellContent, {
     className: className,
     align: align,
@@ -51,14 +69,7 @@ var CellContents = function CellContents(_ref) {
         className: "eui-textTruncate"
       }, children);
     });
-  }), description && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, description)), tooltipProps && ___EmotionJSX(EuiIconTip, _extends({
-    content: tooltipProps.content,
-    type: tooltipProps.icon || 'questionInCircle',
-    size: "m",
-    color: "subdued",
-    position: "top",
-    iconProps: tooltipProps.iconProps
-  }, tooltipProps.tooltipProps)), isSorted ? ___EmotionJSX(EuiIcon, {
+  }), description && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, description)), tooltipIcon, isSorted ? ___EmotionJSX(EuiIcon, {
     className: "euiTableSortIcon",
     type: isSortAscending ? 'sortUp' : 'sortDown',
     size: "m"
@@ -120,7 +131,11 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     role: "columnheader",
     "aria-sort": ariaSortValue,
     style: inlineStyles
-  }, rest), canSort ? ___EmotionJSX("button", {
+  }, rest), canSort ? ___EmotionJSX(EuiToolTip, _extends({
+    content: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content
+  }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.tooltipProps, {
+    display: "block"
+  }), ___EmotionJSX("button", {
     type: "button",
     css: styles.euiTableHeaderCell__button,
     className: classNames('euiTableHeaderButton', {
@@ -128,5 +143,5 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     }),
     onClick: onSort,
     "data-test-subj": "tableHeaderSortButton"
-  }, ___EmotionJSX(CellContents, cellContentsProps)) : ___EmotionJSX(CellContents, cellContentsProps), append);
+  }, ___EmotionJSX(CellContents, cellContentsProps))) : ___EmotionJSX(CellContents, cellContentsProps), append);
 };

package/optimize/es/components/tool_tip/tool_tip.js

@@ -171,7 +171,10 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "onEscapeKey", function (event) {
       if (event.key === keys.ESCAPE) {
-        if (_this.state.visible) event.stopPropagation();
+        // when the tooltip is only visual, we don't want it to add an additional key stop
+        if (!_this.props.disableScreenReaderOutput) {
+          if (_this.state.visible) event.stopPropagation();
+        }
         _this.setState({
           hasFocus: false
         }); // Allows mousing over back into the tooltip to work correctly