@elastic/eui 102.1.0 → 102.2.0-snapshot.1748601905883

package/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -305,6 +305,48 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       footerRow: footerRow
     };
   }, [headerRowHeight, headerRow, footerRow]);
+  var onScroll = useCallback(function (args) {
+    // check only if a callback is passed
+    if (typeof (virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.onScroll) !== 'function') return;
+    var enhancedArgs = _objectSpread(_objectSpread({}, args), {}, {
+      scrollHeight: 0,
+      scrollWidth: 0,
+      clientHeight: 0,
+      clientWidth: 0,
+      isScrolledToBlockStart: args.scrollTop === 0,
+      isScrolledToBlockEnd: false,
+      isScrolledToInlineStart: args.scrollLeft === 0,
+      isScrolledToInlineEnd: false
+    });
+    if (outerGridRef.current) {
+      var _outerGridRef$current = outerGridRef.current,
+        scrollTop = _outerGridRef$current.scrollTop,
+        scrollLeft = _outerGridRef$current.scrollLeft,
+        scrollHeight = _outerGridRef$current.scrollHeight,
+        scrollWidth = _outerGridRef$current.scrollWidth,
+        clientHeight = _outerGridRef$current.clientHeight,
+        clientWidth = _outerGridRef$current.clientWidth;
+      var isScrollableVertical = scrollHeight > clientHeight;
+      var isScrolledToBlockStart = scrollTop === 0;
+      var isScrollableHorizontal = scrollWidth > clientWidth;
+      var isScrolledToInlineStart = scrollLeft === 0;
+      var isScrolledToBlockEnd = isScrollableVertical && !isScrolledToBlockStart && scrollHeight - scrollTop <= clientHeight;
+      var isScrolledToInlineEnd = isScrollableHorizontal && !isScrolledToInlineStart && scrollWidth - scrollLeft <= clientWidth;
+      enhancedArgs = _objectSpread(_objectSpread({}, enhancedArgs), {}, {
+        scrollTop: scrollTop,
+        scrollLeft: scrollLeft,
+        scrollHeight: scrollHeight,
+        scrollWidth: scrollWidth,
+        clientHeight: clientHeight,
+        clientWidth: clientWidth,
+        isScrolledToBlockStart: isScrolledToBlockStart,
+        isScrolledToBlockEnd: isScrolledToBlockEnd,
+        isScrolledToInlineStart: isScrolledToInlineStart,
+        isScrolledToInlineEnd: isScrolledToInlineEnd
+      });
+    }
+    return virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.onScroll(enhancedArgs);
+  }, [outerGridRef, virtualizationOptions]);
   return IS_JEST_ENVIRONMENT || finalWidth > 0 ? ___EmotionJSX(DataGridWrapperRowsContext.Provider, {
     value: rowWrapperContextValue
   }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions, {
@@ -320,7 +362,8 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     height: finalHeight,
     rowHeight: getRowHeight,
     itemData: itemData,
-    rowCount: IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
+    rowCount: IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0,
+    onScroll: onScroll
   }), Cell), scrollBorderOverlay) : null;
 });
 EuiDataGridBodyVirtualized.propTypes = {
@@ -427,12 +470,12 @@ EuiDataGridBodyVirtualized.propTypes = {
     defaultSortDirection: PropTypes.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.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.oneOfType([PropTypes.oneOf([false]), PropTypes.shape({
       /**
@@ -481,7 +524,7 @@ EuiDataGridBodyVirtualized.propTypes = {
              */
         showToolTip: PropTypes.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
              */
@@ -791,7 +834,7 @@ EuiDataGridBodyVirtualized.propTypes = {
   schema: PropTypes.shape({}).isRequired,
   schemaDetectors: PropTypes.arrayOf(PropTypes.shape({
     /**
-       * The name of this data type, matches #EuiDataGridColumn / `schema`
+       * The name of this data type, matches {@link EuiDataGridColumn} / `schema`
        */
     type: PropTypes.string.isRequired,
     /**
@@ -819,7 +862,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        */
     sortTextDesc: PropTypes.node.isRequired,
     /**
-       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level
+       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     isSortable: PropTypes.bool,
     /**
@@ -827,7 +870,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        */
     textTransform: PropTypes.oneOf(["uppercase", "lowercase", "capitalize"]),
     /**
-       * Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level
+       * Default sort direction of columns with this schema. Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     defaultSortDirection: PropTypes.oneOf(["asc", "desc"])
   }).isRequired).isRequired,
@@ -860,7 +903,12 @@ EuiDataGridBodyVirtualized.propTypes = {
   setVisibleColumns: PropTypes.func.isRequired,
   switchColumnPos: PropTypes.func.isRequired,
   onColumnResize: PropTypes.func,
-  virtualizationOptions: PropTypes.any,
+  virtualizationOptions: PropTypes.shape({
+    /**
+           * Called when the grid scroll positions changes, as a result of user scrolling or scroll-to method calls.
+           */
+    onScroll: PropTypes.func
+  }),
   rowHeightsOptions: PropTypes.shape({
     /**
        * Defines the default size for all rows. It can be line count or just height.
@@ -881,7 +929,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        * Defines the height for a specific row. It can be line count or just height.
        *
        * When using row height overrides, we strongly setting the `showDisplaySelector: allowRowHeight`
-       * toolbar control to `false` in #EuiDataGridToolBarVisibilityOptions
+       * toolbar control to `false` in {@link EuiDataGridToolBarVisibilityOptions}
        */
     rowHeights: PropTypes.any,
     /**
@@ -924,7 +972,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        */
     stripes: PropTypes.bool,
     /**
-       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when {@link EuiDataGrid} `toolbarVisibility` is set to `false`.
        * @default shade
        */
     header: PropTypes.oneOf(["shade", "underline"]),

package/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -175,12 +175,12 @@ EuiDataGridHeaderCell.propTypes = {
     defaultSortDirection: PropTypes.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.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.oneOfType([PropTypes.oneOf([false]), PropTypes.shape({
       /**
@@ -229,7 +229,7 @@ EuiDataGridHeaderCell.propTypes = {
              */
         showToolTip: PropTypes.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/es/components/datagrid/body/header/draggable_columns.js

@@ -216,7 +216,7 @@ DraggableColumn.propTypes = {
        */
     stripes: PropTypes.bool,
     /**
-       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when {@link EuiDataGrid} `toolbarVisibility` is set to `false`.
        * @default shade
        */
     header: PropTypes.oneOf(["shade", "underline"]),

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

@@ -307,12 +307,12 @@ DataGridSortingControl.propTypes = {
     defaultSortDirection: PropTypes.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.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.oneOfType([PropTypes.oneOf([false]), PropTypes.shape({
       /**
@@ -361,7 +361,7 @@ DataGridSortingControl.propTypes = {
              */
         showToolTip: PropTypes.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
              */
@@ -671,7 +671,7 @@ DataGridSortingControl.propTypes = {
   schema: PropTypes.shape({}).isRequired,
   schemaDetectors: PropTypes.arrayOf(PropTypes.shape({
     /**
-       * The name of this data type, matches #EuiDataGridColumn / `schema`
+       * The name of this data type, matches {@link EuiDataGridColumn} / `schema`
        */
     type: PropTypes.string.isRequired,
     /**
@@ -699,7 +699,7 @@ DataGridSortingControl.propTypes = {
        */
     sortTextDesc: PropTypes.node.isRequired,
     /**
-       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level
+       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     isSortable: PropTypes.bool,
     /**
@@ -707,7 +707,7 @@ DataGridSortingControl.propTypes = {
        */
     textTransform: PropTypes.oneOf(["uppercase", "lowercase", "capitalize"]),
     /**
-       * Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level
+       * Default sort direction of columns with this schema. Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     defaultSortDirection: PropTypes.oneOf(["asc", "desc"])
   }).isRequired).isRequired

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

@@ -192,7 +192,7 @@ EuiDataGridColumnSortingDraggable.propTypes = {
   schema: PropTypes.shape({}).isRequired,
   schemaDetectors: PropTypes.arrayOf(PropTypes.shape({
     /**
-       * The name of this data type, matches #EuiDataGridColumn / `schema`
+       * The name of this data type, matches {@link EuiDataGridColumn} / `schema`
        */
     type: PropTypes.string.isRequired,
     /**
@@ -220,7 +220,7 @@ EuiDataGridColumnSortingDraggable.propTypes = {
        */
     sortTextDesc: PropTypes.node.isRequired,
     /**
-       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level
+       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     isSortable: PropTypes.bool,
     /**
@@ -228,7 +228,7 @@ EuiDataGridColumnSortingDraggable.propTypes = {
        */
     textTransform: PropTypes.oneOf(["uppercase", "lowercase", "capitalize"]),
     /**
-       * Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level
+       * Default sort direction of columns with this schema. Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     defaultSortDirection: PropTypes.oneOf(["asc", "desc"])
   }).isRequired).isRequired,

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

@@ -15,6 +15,7 @@ import PropTypes from "prop-types";
 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';
@@ -25,7 +26,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
   });
@@ -34,7 +40,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, {
@@ -151,6 +157,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/es/components/datagrid/utils/focus.js

@@ -12,7 +12,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
  * Side Public License, v 1.
  */
 
-import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { tabbable } from 'tabbable';
 import { keys } from '../../../services';
 export var DataGridFocusContext = /*#__PURE__*/createContext({
@@ -60,7 +60,7 @@ export var useFocus = function useFocus() {
     });
   }, []);
   var previousCell = useRef(undefined);
-  useEffect(function () {
+  useLayoutEffect(function () {
     if (previousCell.current) {
       notifyCellOfFocusState(cellsUpdateFocus.current, previousCell.current, false);
     }

package/es/components/datagrid/utils/in_memory.js

@@ -235,12 +235,12 @@ EuiDataGridInMemoryRenderer.propTypes = {
     defaultSortDirection: PropTypes.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.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.oneOfType([PropTypes.oneOf([false]), PropTypes.shape({
       /**
@@ -289,7 +289,7 @@ EuiDataGridInMemoryRenderer.propTypes = {
              */
         showToolTip: PropTypes.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/es/components/datagrid/utils/scrolling.js

@@ -17,6 +17,7 @@ import { DataGridCellPopoverContext } from '../body/cell';
 import { DataGridFocusContext } from './focus';
 import { euiDataGridScrollBarStyles } from './scrolling.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+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)
@@ -170,7 +171,8 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
               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/es/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -184,7 +184,8 @@ export var EuiQuickSelect = /*#__PURE__*/function (_Component) {
         default: "Previous time window"
       }, function (previousLabel) {
         return ___EmotionJSX(EuiToolTip, {
-          content: previousLabel
+          content: previousLabel,
+          disableScreenReaderOutput: true
         }, ___EmotionJSX(EuiButtonIcon, {
           "aria-label": previousLabel,
           iconType: "arrowLeft",
@@ -197,7 +198,8 @@ export var EuiQuickSelect = /*#__PURE__*/function (_Component) {
         default: "Next time window"
       }, function (nextLabel) {
         return ___EmotionJSX(EuiToolTip, {
-          content: nextLabel
+          content: nextLabel,
+          disableScreenReaderOutput: true
         }, ___EmotionJSX(EuiButtonIcon, {
           "aria-label": nextLabel,
           iconType: "arrowRight",

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

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

package/es/components/filter_group/filter_button.js

@@ -1,11 +1,11 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -25,12 +25,14 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 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,
@@ -45,6 +47,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,
@@ -55,18 +58,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);
 
   /**
@@ -81,6 +103,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
@@ -94,7 +126,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,
@@ -103,27 +145,42 @@ 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);
 };
 EuiFilterButton.propTypes = {
   /**
-     * Bolds the button if true
+     * Highlights active filters
      */
   hasActiveFilters: PropTypes.bool,
   /**
@@ -137,7 +194,15 @@ EuiFilterButton.propTypes = {
      */
   numActiveFilters: PropTypes.number,
   /**
-     * Applies a visual state to the button useful when using with a popover.
+     * Switches between toggle and regular button
+     * @default false
+     */
+  isToggle: PropTypes.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.bool,
   /**