@elastic/eui 95.10.0 → 95.11.0

package/es/components/datagrid/body/cell/data_grid_cell_actions.styles.js

@@ -0,0 +1,33 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css, keyframes } from '@emotion/react';
+import { euiCanAnimate, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../../../global_styling';
+import { euiDataGridVariables } from '../../data_grid.styles';
+import { euiDataGridCellOutlineStyles, euiDataGridCellOutlineSelectors } from './data_grid_cell.styles';
+export var euiDataGridCellActionsStyles = function euiDataGridCellActionsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridVariables = euiDataGridVariables(euiThemeContext),
+    levels = _euiDataGridVariables.levels;
+  var borderWidth = euiTheme.border.width.thin;
+  var cellOutline = euiDataGridCellOutlineStyles(euiThemeContext);
+  var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors('.euiDataGridRowCell'),
+    cellSelectors = _euiDataGridCellOutli.actions;
+  return {
+    euiDataGridRowCell__actionsWrapper: /*#__PURE__*/css("position:absolute;", logicalCSS('left', 0), " ", logicalCSS('bottom', '100%'), "z-index:", levels.stickyHeader - 1, ";.euiDataGridRowCell[data-gridcell-visible-row-index='0']>&{z-index:", levels.stickyHeader + 1, ";}", cellSelectors.hoverZone, " &{", logicalCSS('min-width', '50%'), " ", logicalCSS('padding-right', euiTheme.size.base), ";};label:euiDataGridRowCell__actionsWrapper;"),
+    euiDataGridRowCell__actions: /*#__PURE__*/css("position:relative;display:flex;gap:", euiTheme.size.xxs, ";", logicalCSS('width', 'fit-content'), " padding-inline:", euiTheme.size.xxs, ";", logicalCSS('margin-bottom', "-".concat(borderWidth)), " background-color:", cellOutline.focusColor, ";color:", euiTheme.colors.emptyShade, ";border:", borderWidth, " solid ", cellOutline.focusColor, ";border-radius:", cellOutline.borderRadius, ";", logicalCSS('border-bottom-left-radius', 0), "&::after{content:'';position:absolute;", logicalCSS('top', '100%'), " ", logicalCSS('left', "-".concat(borderWidth)), " ", logicalSizeCSS(mathWithUnits(borderWidth, function (x) {
+      return x * 2;
+    })), " 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%'), ";};label:euiDataGridRowCell__actionButtonIcon;")
+  };
+};
+var slideUp = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { transform: scaleY(0); }\n  to { transform: scaleY(1); }\n"])));

package/es/components/datagrid/body/cell/data_grid_cell_popover.js

@@ -21,8 +21,10 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 import React, { createContext, useState, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import { keys } from '../../../../services';
+import { keys, useEuiMemoizedStyles } from '../../../../services';
 import { EuiWrappingPopover } from '../../../popover';
+import { euiDataGridVariables } from '../../data_grid.styles';
+import { euiDataGridCellPopoverStyles } from './data_grid_cell_popover.styles';
 export var DataGridCellPopoverContext = /*#__PURE__*/createContext({
   popoverIsOpen: false,
   cellLocation: {
@@ -92,25 +94,23 @@ export var useCellPopover = function useCellPopover() {
   // popover button isn't actually the DOM node we pass to `button`. Otherwise,
   // clicking the expansion cell action triggers an outside click
   var onClickOutside = useCallback(function (event) {
-    var _popoverAnchor$parent;
-    var cellActions = popoverAnchor === null || popoverAnchor === void 0 || (_popoverAnchor$parent = popoverAnchor.parentElement) === null || _popoverAnchor$parent === void 0 || (_popoverAnchor$parent = _popoverAnchor$parent.parentElement) === null || _popoverAnchor$parent === void 0 ? void 0 : _popoverAnchor$parent.previousElementSibling;
+    var cellActions = popoverAnchor === null || popoverAnchor === void 0 ? void 0 : popoverAnchor.closest('.euiDataGridRowCell__actionsWrapper');
     if (!(cellActions !== null && cellActions !== void 0 && cellActions.contains(event.target))) {
       closeCellPopover();
     }
   }, [popoverAnchor, closeCellPopover]);
   var onKeyDown = useCallback(function (event) {
     if (event.key === keys.F2 || event.key === keys.ESCAPE) {
-      var _popoverAnchor$parent2;
       event.preventDefault();
       event.stopPropagation();
       closeCellPopover();
-      var cell = popoverAnchor === null || popoverAnchor === void 0 || (_popoverAnchor$parent2 = popoverAnchor.parentElement) === null || _popoverAnchor$parent2 === void 0 || (_popoverAnchor$parent2 = _popoverAnchor$parent2.parentElement) === null || _popoverAnchor$parent2 === void 0 ? void 0 : _popoverAnchor$parent2.parentElement;
+      var cell = popoverAnchor === null || popoverAnchor === void 0 ? void 0 : popoverAnchor.closest('.euiDataGridRowCell');
 
       // Prevent cell animation flash while focus is being shifted between popover and cell
       cell === null || cell === void 0 || cell.setAttribute('data-keyboard-closing', 'true');
       // Ensure focus is returned to the parent cell, and remove animation stopgap
       requestAnimationFrame(function () {
-        popoverAnchor === null || popoverAnchor === void 0 || popoverAnchor.parentElement.focus();
+        cell === null || cell === void 0 || cell.focus();
         cell === null || cell === void 0 || cell.removeAttribute('data-keyboard-closing');
       });
     }
@@ -127,36 +127,45 @@ export var useCellPopover = function useCellPopover() {
       setCellPopoverProps: setCellPopoverProps
     };
   }, [popoverIsOpen, closeCellPopover, openCellPopover, cellLocation]);
+  var styles = useEuiMemoizedStyles(euiDataGridCellPopoverStyles);
+  var _useEuiMemoizedStyles = useEuiMemoizedStyles(euiDataGridVariables),
+    levels = _useEuiMemoizedStyles.levels;
   var cellPopover = useMemo(function () {
-    var _cellPopoverProps$pan;
+    var _cellPopoverProps$pan, _cell$offsetWidth;
     if (!popoverIsOpen || !popoverAnchor) return null;
+    var cell = popoverAnchor.closest('.euiDataGridRowCell');
 
     // Note that this popover is rendered once at the top grid level, rather than one popover per cell
     return ___EmotionJSX(EuiWrappingPopover, _extends({
       isOpen: popoverIsOpen,
       display: "block",
       hasArrow: false,
+      attachToAnchor: true // required for https://github.com/elastic/eui/issues/6151
+      ,
       panelPaddingSize: "s",
       anchorPosition: popoverAnchorPosition,
-      repositionToCrossAxis: false
+      repositionToCrossAxis: false,
+      zIndex: levels.cellPopover
     }, cellPopoverProps, {
       focusTrapProps: {
         onClickOutside: onClickOutside,
         clickOutsideDisables: false
       },
-      panelProps: _objectSpread({
+      panelProps: _objectSpread(_objectSpread({
         'data-test-subj': 'euiDataGridExpansionPopover'
-      }, cellPopoverProps.panelProps || {}),
+      }, cellPopoverProps.panelProps || {}), {}, {
+        css: [styles.euiDataGridRowCell__popover, cellPopoverProps.css]
+      }),
       panelClassName: classNames('euiDataGridRowCell__popover', cellPopoverProps.panelClassName, (_cellPopoverProps$pan = cellPopoverProps.panelProps) === null || _cellPopoverProps$pan === void 0 ? void 0 : _cellPopoverProps$pan.className),
       panelStyle: {
-        maxInlineSize: "min(75vw, max(".concat(popoverAnchor.parentElement.offsetWidth, "px, 400px))"),
+        maxInlineSize: "min(75vw, max(".concat((_cell$offsetWidth = cell === null || cell === void 0 ? void 0 : cell.offsetWidth) !== null && _cell$offsetWidth !== void 0 ? _cell$offsetWidth : 0, "px, 400px))"),
         maxBlockSize: '50vh'
       },
       onKeyDown: onKeyDown,
       button: popoverAnchor,
       closePopover: closeCellPopover
     }), popoverContent);
-  }, [popoverIsOpen, popoverAnchor, popoverContent, cellPopoverProps, closeCellPopover, onClickOutside, onKeyDown, popoverAnchorPosition]);
+  }, [styles, levels.cellPopover, popoverIsOpen, popoverAnchor, popoverContent, cellPopoverProps, closeCellPopover, onClickOutside, onKeyDown, popoverAnchorPosition]);
   return useMemo(function () {
     return {
       cellPopoverContext: cellPopoverContext,

package/es/components/datagrid/body/cell/data_grid_cell_popover.styles.js

@@ -0,0 +1,19 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css, keyframes } from '@emotion/react';
+import { euiScrollBarStyles, euiCanAnimate } from '../../../../global_styling';
+export var euiDataGridCellPopoverStyles = function euiDataGridCellPopoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiDataGridRowCell__popover: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " overflow:auto;", euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";animation-name:", fadeIn, ";};label:euiDataGridRowCell__popover;")
+  };
+};
+var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));

package/es/components/datagrid/body/cell/focus_utils.js

@@ -15,11 +15,10 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useEffect, useState, useMemo } from 'react';
 import PropTypes from "prop-types";
 import { tabbable } from 'tabbable';
-import { keys } from '../../../../services';
-import { useGeneratedHtmlId } from '../../../../services/accessibility';
+import classNames from 'classnames';
+import { keys, useGeneratedHtmlId } from '../../../../services';
 import { isDOMNode } from '../../../../utils';
 import { EuiFocusTrap } from '../../../focus_trap';
-import { EuiScreenReaderOnly } from '../../../accessibility';
 import { EuiI18n } from '../../../i18n';
 
 /**
@@ -99,20 +98,22 @@ export var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
     _useState6 = _slicedToArray(_useState5, 2),
     isExited = _useState6[0],
     setExited = _useState6[1];
-  var keyboardHintAriaId = useGeneratedHtmlId({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'keyboardHint'
-  });
-  var exitedHintAriaId = useGeneratedHtmlId({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'exited'
+  var ariaDescribedById = useGeneratedHtmlId({
+    suffix: 'focusTrapHint'
   });
 
   // direct DOM manipulation as workaround to attach required hints
   useEffect(function () {
     var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
-    cellEl.setAttribute('aria-describedby', "".concat(currentAriaDescribedbyId, " ").concat(exitedHintAriaId, " ").concat(keyboardHintAriaId, " "));
-  }, [cellEl, keyboardHintAriaId, exitedHintAriaId]);
+    cellEl.setAttribute('aria-describedby', classNames(currentAriaDescribedbyId, ariaDescribedById));
+    return function () {
+      if (currentAriaDescribedbyId) {
+        cellEl.setAttribute('aria-descibedby', currentAriaDescribedbyId);
+      } else {
+        cellEl.removeAttribute('aria-describedby');
+      }
+    };
+  }, [cellEl, ariaDescribedById]);
   useEffect(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -166,23 +167,20 @@ export var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
     onDeactivation: function onDeactivation() {
       return setIsCellEntered(false);
     }
-  }, children, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-    id: exitedHintAriaId,
-    "aria-hidden": "true"
+  }, children, ___EmotionJSX("p", {
+    id: ariaDescribedById,
+    hidden: true
   }, isExited && ___EmotionJSX(EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapExitPrompt",
     default: "Exited cell content."
-  }))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-    id: keyboardHintAriaId,
-    "aria-hidden": "true"
-  }, !isCellEntered && ___EmotionJSX(EuiI18n
+  }), !isCellEntered && ___EmotionJSX(EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapEnterPrompt",
     default: "Press the Enter key to interact with this cell's contents."
-  }))));
+  })));
 };
 
 /**

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

@@ -12,8 +12,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React from 'react';
 import PropTypes from "prop-types";
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiDataGridBodyVirtualized } from './data_grid_body_virtualized';
 import { EuiDataGridBodyCustomRender } from './data_grid_body_custom';
+import { euiDataGridBodyStyles } from './data_grid_body.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridBody = function EuiDataGridBody(_ref) {
   var renderCustomGridBody = _ref.renderCustomGridBody,
@@ -23,9 +25,14 @@ export var EuiDataGridBody = function EuiDataGridBody(_ref) {
    * + virtualization library for rendering content, or if consumers have
    * passed their own custom renderer
    */
+  var styles = useEuiMemoizedStyles(euiDataGridBodyStyles);
+  var cssStyles = [styles.euiDataGridBody, renderCustomGridBody ? styles.customRender : styles.virtualized];
   return renderCustomGridBody ? ___EmotionJSX(EuiDataGridBodyCustomRender, _extends({
-    renderCustomGridBody: renderCustomGridBody
-  }, props)) : ___EmotionJSX(EuiDataGridBodyVirtualized, props);
+    renderCustomGridBody: renderCustomGridBody,
+    css: cssStyles
+  }, props)) : ___EmotionJSX(EuiDataGridBodyVirtualized, _extends({
+    css: cssStyles
+  }, props));
 };
 EuiDataGridBody.propTypes = {
   leadingControlColumns: PropTypes.arrayOf(PropTypes.shape({
@@ -594,34 +601,42 @@ EuiDataGridBody.propTypes = {
   gridStyles: PropTypes.shape({
     /**
        * Size of fonts used within the row and column cells
+       * @default m
        */
     fontSize: PropTypes.oneOf(["s", "m", "l"]),
     /**
        * Defines the padding with the row and column cells
+       * @default m
        */
     cellPadding: PropTypes.oneOf(["s", "m", "l"]),
     /**
-       * Border uses for the row and column cells
+       * Border used for the row and column cells
+       * @default all
        */
     border: PropTypes.oneOf(["all", "horizontal", "none"]),
     /**
        * If set to true, rows will alternate zebra striping for clarity
+       * @default false
        */
     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`.
+       * @default shade
        */
     header: PropTypes.oneOf(["shade", "underline"]),
     /**
        * Visual style for the column footers.
+       * @default overline
        */
     footer: PropTypes.oneOf(["shade", "overline", "striped"]),
     /**
        * If set to true, the footer row will be sticky
+       * @default true
        */
     stickyFooter: PropTypes.bool,
     /**
        * Will define what visual style to show on row hover
+       * @default hover
        */
     rowHover: PropTypes.oneOf(["highlight", "none"]),
     /**
@@ -637,5 +652,6 @@ EuiDataGridBody.propTypes = {
   gridWidth: PropTypes.number.isRequired,
   gridRef: PropTypes.any.isRequired,
   gridItemsRendered: PropTypes.any.isRequired,
-  wrapperRef: PropTypes.any.isRequired
+  wrapperRef: PropTypes.any.isRequired,
+  className: PropTypes.string
 };

package/es/components/datagrid/body/data_grid_body.styles.js

@@ -0,0 +1,26 @@
+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
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiScrollBarStyles, logicalSizeCSS } from '../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "jawla0-virtualized",
+  styles: "scroll-padding:0;label:virtualized;"
+} : {
+  name: "jawla0-virtualized",
+  styles: "scroll-padding:0;label:virtualized;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiDataGridBodyStyles = function euiDataGridBodyStyles(euiThemeContext) {
+  return {
+    euiDataGridBody: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), ";;label:euiDataGridBody;"),
+    virtualized: _ref,
+    customRender: /*#__PURE__*/css(logicalSizeCSS('100%'), " overflow:auto;;label:customRender;")
+  };
+};

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

@@ -56,7 +56,8 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     pagination = _ref.pagination,
     rowHeightsOptions = _ref.rowHeightsOptions,
     gridWidth = _ref.gridWidth,
-    gridStyles = _ref.gridStyles;
+    gridStyles = _ref.gridStyles,
+    className = _ref.className;
   /**
    * Columns & widths
    */
@@ -105,7 +106,8 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      gridStyles: gridStyles
     }),
     headerRow = _useDataGridHeader.headerRow;
   var _useDataGridFooter = useDataGridFooter({
@@ -119,7 +121,8 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
-      schema: schema
+      schema: schema,
+      gridStyles: gridStyles
     }),
     footerRow = _useDataGridFooter.footerRow;
 
@@ -167,7 +170,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     customGridBodyProps = _useState2[0],
     setCustomGridBodyProps = _useState2[1];
   return ___EmotionJSX("div", _extends({}, customGridBodyProps, {
-    className: classNames('euiDataGrid__customRenderBody', customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
+    className: classNames('euiDataGrid__customRenderBody', className, customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
   }), headerRow, renderCustomGridBody({
     visibleColumns: visibleColumns,
     visibleRowData: visibleRows,
@@ -742,34 +745,42 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridStyles: PropTypes.shape({
     /**
        * Size of fonts used within the row and column cells
+       * @default m
        */
     fontSize: PropTypes.oneOf(["s", "m", "l"]),
     /**
        * Defines the padding with the row and column cells
+       * @default m
        */
     cellPadding: PropTypes.oneOf(["s", "m", "l"]),
     /**
-       * Border uses for the row and column cells
+       * Border used for the row and column cells
+       * @default all
        */
     border: PropTypes.oneOf(["all", "horizontal", "none"]),
     /**
        * If set to true, rows will alternate zebra striping for clarity
+       * @default false
        */
     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`.
+       * @default shade
        */
     header: PropTypes.oneOf(["shade", "underline"]),
     /**
        * Visual style for the column footers.
+       * @default overline
        */
     footer: PropTypes.oneOf(["shade", "overline", "striped"]),
     /**
        * If set to true, the footer row will be sticky
+       * @default true
        */
     stickyFooter: PropTypes.bool,
     /**
        * Will define what visual style to show on row hover
+       * @default hover
        */
     rowHover: PropTypes.oneOf(["highlight", "none"]),
     /**
@@ -785,5 +796,6 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridWidth: PropTypes.number.isRequired,
   gridRef: PropTypes.any.isRequired,
   gridItemsRendered: PropTypes.any.isRequired,
-  wrapperRef: PropTypes.any.isRequired
+  wrapperRef: PropTypes.any.isRequired,
+  className: PropTypes.string
 };

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

@@ -108,7 +108,8 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     gridWidth = _ref3.gridWidth,
     gridRef = _ref3.gridRef,
     gridItemsRendered = _ref3.gridItemsRendered,
-    wrapperRef = _ref3.wrapperRef;
+    wrapperRef = _ref3.wrapperRef,
+    className = _ref3.className;
   /**
    * Grid refs & observers
    */
@@ -157,7 +158,8 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      gridStyles: gridStyles
     }),
     headerRow = _useDataGridHeader.headerRow,
     headerRowHeight = _useDataGridHeader.headerRowHeight;
@@ -172,7 +174,8 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
-      schema: schema
+      schema: schema,
+      gridStyles: gridStyles
     }),
     footerRow = _useDataGridFooter.footerRow,
     footerRowHeight = _useDataGridFooter.footerRowHeight;
@@ -301,7 +304,7 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     value: rowWrapperContextValue
   }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions, {
     ref: gridRef,
-    className: classNames('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
+    className: classNames('euiDataGrid__virtualized', className, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: onItemsRendered,
     innerElementType: InnerElement,
     outerRef: outerGridRef,
@@ -882,34 +885,42 @@ EuiDataGridBodyVirtualized.propTypes = {
   gridStyles: PropTypes.shape({
     /**
        * Size of fonts used within the row and column cells
+       * @default m
        */
     fontSize: PropTypes.oneOf(["s", "m", "l"]),
     /**
        * Defines the padding with the row and column cells
+       * @default m
        */
     cellPadding: PropTypes.oneOf(["s", "m", "l"]),
     /**
-       * Border uses for the row and column cells
+       * Border used for the row and column cells
+       * @default all
        */
     border: PropTypes.oneOf(["all", "horizontal", "none"]),
     /**
        * If set to true, rows will alternate zebra striping for clarity
+       * @default false
        */
     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`.
+       * @default shade
        */
     header: PropTypes.oneOf(["shade", "underline"]),
     /**
        * Visual style for the column footers.
+       * @default overline
        */
     footer: PropTypes.oneOf(["shade", "overline", "striped"]),
     /**
        * If set to true, the footer row will be sticky
+       * @default true
        */
     stickyFooter: PropTypes.bool,
     /**
        * Will define what visual style to show on row hover
+       * @default hover
        */
     rowHover: PropTypes.oneOf(["highlight", "none"]),
     /**
@@ -925,6 +936,7 @@ EuiDataGridBodyVirtualized.propTypes = {
   gridWidth: PropTypes.number.isRequired,
   gridRef: PropTypes.any.isRequired,
   gridItemsRendered: PropTypes.any.isRequired,
-  wrapperRef: PropTypes.any.isRequired
+  wrapperRef: PropTypes.any.isRequired,
+  className: PropTypes.string
 };
 EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';

package/es/components/datagrid/body/footer/data_grid_footer.styles.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../../global_styling';
+import { euiDataGridVariables } from '../../data_grid.styles';
+export var euiDataGridFooterStyles = function euiDataGridFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridVariables = euiDataGridVariables(euiThemeContext),
+    levels = _euiDataGridVariables.levels;
+  return {
+    euiDataGridFooter: /*#__PURE__*/css("display:flex;", logicalCSS('width', 'fit-content'), " background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGridFooter;"),
+    sticky: /*#__PURE__*/css("z-index:", levels.stickyHeader, ";position:sticky;", logicalCSS('bottom', 0), ";;label:sticky;"),
+    overline: /*#__PURE__*/css(logicalCSS('border-top', "".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.text)), ";;label:overline;"),
+    shade: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:shade;"),
+    striped: /*#__PURE__*/css(".euiDataGrid--stripes &{background-color:", euiTheme.colors.lightestShade, ";};label:striped;"),
+    euiDataGridFooterCell: /*#__PURE__*/css("flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";;label:euiDataGridFooterCell;")
+  };
+};

package/es/components/datagrid/body/footer/data_grid_footer_row.js

@@ -1,4 +1,4 @@
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex", "gridStyles"];
 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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -10,9 +10,11 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import classnames from 'classnames';
 import React, { forwardRef, memo, useContext } from 'react';
+import classnames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../../services';
 import { EuiDataGridCell, DataGridCellPopoverContext } from '../cell';
+import { euiDataGridFooterStyles } from './data_grid_footer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var renderEmpty = function renderEmpty() {
   return null;
@@ -32,13 +34,15 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
     _dataTestSubj = _ref['data-test-subj'],
     _ref$visibleRowIndex = _ref.visibleRowIndex,
     visibleRowIndex = _ref$visibleRowIndex === void 0 ? rowIndex : _ref$visibleRowIndex,
+    gridStyles = _ref.gridStyles,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classnames('euiDataGridRow', {
-    'euiDataGridRow--striped': visibleRowIndex % 2 !== 0
-  }, 'euiDataGridFooter', className);
+  var styles = useEuiMemoizedStyles(euiDataGridFooterStyles);
+  var cssStyles = [styles.euiDataGridFooter, gridStyles.stickyFooter && styles.sticky, gridStyles.footer === 'striped' ? visibleRowIndex % 2 !== 0 && styles.striped : styles[gridStyles.footer]];
+  var classes = classnames('euiDataGridFooter', className);
   var dataTestSubj = classnames('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
   var popoverContext = useContext(DataGridCellPopoverContext);
   var sharedCellProps = {
+    css: styles.euiDataGridFooterCell,
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
     interactiveCellId: interactiveCellId,
@@ -47,6 +51,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
   return ___EmotionJSX("div", _extends({
     ref: ref,
     role: "row",
+    css: cssStyles,
     className: classes,
     "data-test-subj": dataTestSubj
   }, rest), leadingControlColumns.map(function (_ref2, i) {

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

@@ -216,8 +216,15 @@ export var getSortColumnActions = function getSortColumnActions(_ref4) {
     var onClickSortAsc = function onClickSortAsc() {
       sortBy('asc');
     };
+    var isSorted = sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'asc';
     var action = {
-      label: ___EmotionJSX(EuiI18n, {
+      label: isSorted ? ___EmotionJSX(EuiI18n, {
+        token: "euiColumnActions.unsort",
+        default: "Unsort {schemaLabel}",
+        values: {
+          schemaLabel: label
+        }
+      }) : ___EmotionJSX(EuiI18n, {
         token: "euiColumnActions.sort",
         default: "Sort {schemaLabel}",
         values: {
@@ -226,7 +233,6 @@ export var getSortColumnActions = function getSortColumnActions(_ref4) {
       }),
       onClick: onClickSortAsc,
       isDisabled: column.isSortable === false,
-      className: sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'asc' ? 'euiDataGridHeader__action--selected' : '',
       iconType: 'sortUp',
       size: 'xs',
       color: 'text'
@@ -238,8 +244,15 @@ export var getSortColumnActions = function getSortColumnActions(_ref4) {
     var onClickSortDesc = function onClickSortDesc() {
       sortBy('desc');
     };
+    var _isSorted = sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'desc';
     var _action2 = {
-      label: ___EmotionJSX(EuiI18n, {
+      label: _isSorted ? ___EmotionJSX(EuiI18n, {
+        token: "euiColumnActions.unsort",
+        default: "Unsort {schemaLabel}",
+        values: {
+          schemaLabel: _label
+        }
+      }) : ___EmotionJSX(EuiI18n, {
         token: "euiColumnActions.sort",
         default: "Sort {schemaLabel}",
         values: {
@@ -248,7 +261,6 @@ export var getSortColumnActions = function getSortColumnActions(_ref4) {
       }),
       onClick: onClickSortDesc,
       isDisabled: column.isSortable === false,
-      className: sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'desc' ? 'euiDataGridHeader__action--selected' : '',
       iconType: 'sortDown',
       size: 'xs',
       color: 'text'