@elastic/eui 102.1.0 → 102.2.0-snapshot.1748601905883

package/test-env/components/datagrid/controls/data_grid_toolbar_control.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 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");
@@ -28,7 +29,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
   });
@@ -37,7 +43,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, {
@@ -154,6 +160,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/test-env/components/datagrid/utils/focus.js

@@ -62,7 +62,7 @@ var useFocus = exports.useFocus = function useFocus() {
     });
   }, []);
   var previousCell = (0, _react.useRef)(undefined);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     if (previousCell.current) {
       notifyCellOfFocusState(cellsUpdateFocus.current, previousCell.current, false);
     }

package/test-env/components/datagrid/utils/in_memory.js

@@ -235,12 +235,12 @@ EuiDataGridInMemoryRenderer.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -289,7 +289,7 @@ EuiDataGridInMemoryRenderer.propTypes = {
              */
         showToolTip: _propTypes.default.bool,
         /**
-             * An object of #EuiListGroupItemExtraAction props.
+             * An object of {@link EuiListGroupItemExtraAction} props.
              * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
              * pass `alwaysShow` if you don't want the default behavior of only showing on hover
              */

package/test-env/components/datagrid/utils/scrolling.js

@@ -25,6 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Side Public License, v 1.
  */
 
+var ACTIONS_MENU_HEIGHT = 21;
 /**
  * The primary goal of this scroll logic is to ensure keyboard navigation works accessibly,
  * but there are other scenarios where it applies (e.g. clicking partially-visible cells)
@@ -179,7 +180,8 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
                 if (topHeightOutOfView > 0) {
                   // Note: This overrides the bottom side being out of bounds, as we want to prefer
                   // showing the top-left corner of items if a cell is larger than the grid container
-                  adjustedScrollTop = cellTopPos - headerRowHeight;
+                  // Additionally, add an offset for the actions menu
+                  adjustedScrollTop = cellTopPos - headerRowHeight - ACTIONS_MENU_HEIGHT;
                 }
               }
 

package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -186,7 +186,8 @@ var EuiQuickSelect = exports.EuiQuickSelect = /*#__PURE__*/function (_Component)
         default: "Previous time window"
       }, function (previousLabel) {
         return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-          content: previousLabel
+          content: previousLabel,
+          disableScreenReaderOutput: true
         }, (0, _react2.jsx)(_button.EuiButtonIcon, {
           "aria-label": previousLabel,
           iconType: "arrowLeft",
@@ -199,7 +200,8 @@ var EuiQuickSelect = exports.EuiQuickSelect = /*#__PURE__*/function (_Component)
         default: "Next time window"
       }, function (nextLabel) {
         return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-          content: nextLabel
+          content: nextLabel,
+          disableScreenReaderOutput: true
         }, (0, _react2.jsx)(_button.EuiButtonIcon, {
           "aria-label": nextLabel,
           iconType: "arrowRight",

package/test-env/components/date_picker/super_date_picker/super_date_picker.js

@@ -635,7 +635,7 @@ EuiSuperDatePickerInternal.propTypes = {
      */
   isQuickSelectOnly: _propTypes.default.bool,
   /**
-     * Props passed to the update button #EuiSuperUpdateButtonProps
+     * Props passed to the update button {@link EuiSuperUpdateButtonProps}
      */
   updateButtonProps: _propTypes.default.shape({
     /**
@@ -665,7 +665,7 @@ EuiSuperDatePickerInternal.propTypes = {
     responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
   }),
   /**
-     * Props passed to the quick select button #EuiQuickSelectButtonProps
+     * Props passed to the quick select button {@link EuiQuickSelectButtonProps}
      */
   quickSelectButtonProps: _propTypes.default.any,
   /**
@@ -830,7 +830,7 @@ EuiSuperDatePicker.propTypes = {
      */
   isQuickSelectOnly: _propTypes.default.bool,
   /**
-     * Props passed to the update button #EuiSuperUpdateButtonProps
+     * Props passed to the update button {@link EuiSuperUpdateButtonProps}
      */
   updateButtonProps: _propTypes.default.shape({
     children: _propTypes.default.node,
@@ -840,7 +840,7 @@ EuiSuperDatePicker.propTypes = {
     responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
   }),
   /**
-     * Props passed to the quick select button #EuiQuickSelectButtonProps
+     * Props passed to the quick select button {@link EuiQuickSelectButtonProps}
      */
   quickSelectButtonProps: _propTypes.default.any,
   /**

package/test-env/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"));
@@ -18,8 +18,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
@@ -42,6 +44,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,
@@ -52,18 +55,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);
 
   /**
@@ -78,6 +100,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
@@ -91,7 +123,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,
@@ -100,27 +142,42 @@ 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);
 };
 EuiFilterButton.propTypes = {
   /**
-     * Bolds the button if true
+     * Highlights active filters
      */
   hasActiveFilters: _propTypes.default.bool,
   /**
@@ -134,7 +191,15 @@ EuiFilterButton.propTypes = {
      */
   numActiveFilters: _propTypes.default.number,
   /**
-     * Applies a visual state to the button useful when using with a popover.
+     * Switches between toggle and regular button
+     * @default false
+     */
+  isToggle: _propTypes.default.bool,
+  /**
+     * Applies a visual state to the button.
+     * Automatically applies `aria-pressed` when used with `isToggle={true}`.
+     * Otherwise applies `aria-expanded` when used with `isToggle={false}` and
+     * `iconType="arrowDown"` as trigger button for e.g. a popover.
      */
   isSelected: _propTypes.default.bool,
   /**

package/test-env/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/test-env/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/test-env/components/form/range/dual_range.js

@@ -692,7 +692,7 @@ EuiDualRangeClass.propTypes = {
   tickInterval: _propTypes.default.number,
   /**
      * Create colored indicators for certain intervals.
-     * An array of #EuiRangeLevel objects
+     * An array of {@link EuiRangeLevel} objects
      */
   levels: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**

package/test-env/components/form/range/range.js

@@ -330,7 +330,7 @@ EuiRangeClass.propTypes = {
   tickInterval: _propTypes.default.number,
   /**
      * Create colored indicators for certain intervals.
-     * An array of #EuiRangeLevel objects
+     * An array of {@link EuiRangeLevel} objects
      */
   levels: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**

package/test-env/components/form/range/range_track.js

@@ -142,7 +142,7 @@ EuiRangeTrack.propTypes = {
   tickInterval: _propTypes.default.number,
   /**
      * Create colored indicators for certain intervals.
-     * An array of #EuiRangeLevel objects
+     * An array of {@link EuiRangeLevel} objects
      */
   levels: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**

package/test-env/components/form/select/select.js

@@ -96,7 +96,7 @@ var EuiSelect = exports.EuiSelect = function EuiSelect(props) {
     value: value,
     onMouseUp: handleMouseUp,
     disabled: disabled
-  }, rest), hasNoInitialSelection && (0, _react2.jsx)("option", {
+  }, rest), hasNoInitialSelection && value === '' && (0, _react2.jsx)("option", {
     value: "",
     disabled: true,
     hidden: true,

package/test-env/components/header/header.js

@@ -100,23 +100,23 @@ EuiHeader.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-       * An array of objects to wrap in a #EuiHeaderSection.
+       * An array of objects to wrap in a {@link EuiHeaderSection}.
        * Each section is spaced using `space-between`.
-       * See #EuiHeaderSections for object details.
+       * See {@link EuiHeaderSections} for object details.
        * This prop disregards the prop `children` if both are passed.
        */
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * An array of items that will be wrapped in a #EuiHeaderSectionItem
+       * An array of items that will be wrapped in a {@link EuiHeaderSectionItem}
        */
     items: _propTypes.default.arrayOf(_propTypes.default.node.isRequired),
     /**
-       * Breadcrumbs in the header cannot be wrapped in a #EuiHeaderSection in order for truncation to work.
+       * Breadcrumbs in the header cannot be wrapped in a {@link EuiHeaderSection} in order for truncation to work.
        * Simply pass the array of EuiBreadcrumb objects
        */
     breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
     /**
-       * Other props to pass to #EuiHeaderBreadcrumbs
+       * Other props to pass to {@link EuiHeaderBreadcrumbs}
        */
     breadcrumbProps: _propTypes.default.any
   }).isRequired),
@@ -188,23 +188,23 @@ EuiFixedHeader.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-       * An array of objects to wrap in a #EuiHeaderSection.
+       * An array of objects to wrap in a {@link EuiHeaderSection}.
        * Each section is spaced using `space-between`.
-       * See #EuiHeaderSections for object details.
+       * See {@link EuiHeaderSections} for object details.
        * This prop disregards the prop `children` if both are passed.
        */
   sections: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * An array of items that will be wrapped in a #EuiHeaderSectionItem
+       * An array of items that will be wrapped in a {@link EuiHeaderSectionItem}
        */
     items: _propTypes.default.arrayOf(_propTypes.default.node.isRequired),
     /**
-       * Breadcrumbs in the header cannot be wrapped in a #EuiHeaderSection in order for truncation to work.
+       * Breadcrumbs in the header cannot be wrapped in a {@link EuiHeaderSection} in order for truncation to work.
        * Simply pass the array of EuiBreadcrumb objects
        */
     breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
     /**
-       * Other props to pass to #EuiHeaderBreadcrumbs
+       * Other props to pass to {@link EuiHeaderBreadcrumbs}
        */
     breadcrumbProps: _propTypes.default.any
   }).isRequired),

package/test-env/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -44,7 +44,7 @@ EuiHeaderBreadcrumbs.propTypes = {
   css: _propTypes.default.any,
   /**
      * Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller.
-     * Pass a custom #EuiBreadcrumbResponsiveMaxCount object to change the number of breadcrumbs to show at the particular breakpoints.
+     * Pass a custom {@link EuiBreadcrumbResponsiveMaxCount} object to change the number of breadcrumbs to show at the particular breakpoints.
      *
      * Pass `false` to turn this behavior off.
      *
@@ -64,7 +64,7 @@ EuiHeaderBreadcrumbs.propTypes = {
      */
   max: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
   /**
-     * The array of individual #EuiBreadcrumb items
+     * The array of individual {@link EuiBreadcrumb} items
      */
   breadcrumbs: _propTypes.default.arrayOf(_propTypes.default.shape({
     className: _propTypes.default.string,