@elastic/eui 95.10.0 → 95.11.0

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

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../../services");
 var _popover = require("../../../popover");
+var _data_grid = require("../../data_grid.styles");
+var _data_grid_cell_popover = require("./data_grid_cell_popover.styles");
 var _text = require("../../../text");
 var _code = require("../../../code");
 var _react2 = require("@emotion/react");
@@ -102,25 +104,23 @@ var useCellPopover = exports.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 = (0, _react.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 = (0, _react.useCallback)(function (event) {
     if (event.key === _services.keys.F2 || event.key === _services.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');
       });
     }
@@ -137,36 +137,45 @@ var useCellPopover = exports.useCellPopover = function useCellPopover() {
       setCellPopoverProps: setCellPopoverProps
     };
   }, [popoverIsOpen, closeCellPopover, openCellPopover, cellLocation]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_cell_popover.euiDataGridCellPopoverStyles);
+  var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_data_grid.euiDataGridVariables),
+    levels = _useEuiMemoizedStyles.levels;
   var cellPopover = (0, _react.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 (0, _react2.jsx)(_popover.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: (0, _classnames.default)('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 (0, _react.useMemo)(function () {
     return {
       cellPopoverContext: cellPopoverContext,

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridCellPopoverStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _templateObject;
+/*
+ * 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.
+ */
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+var euiDataGridCellPopoverStyles = exports.euiDataGridCellPopoverStyles = function euiDataGridCellPopoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiDataGridRowCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " overflow:auto;", _global_styling.euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";animation-name:", fadeIn, ";};label:euiDataGridRowCell__popover;")
+  };
+};
+var fadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));

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

@@ -8,11 +8,10 @@ exports.HandleInteractiveChildren = exports.FocusTrappedChildren = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tabbable = require("tabbable");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../../services");
-var _accessibility = require("../../../../services/accessibility");
 var _utils = require("../../../../utils");
 var _focus_trap = require("../../../focus_trap");
-var _accessibility2 = require("../../../accessibility");
 var _i18n = require("../../../i18n");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -105,20 +104,22 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
     _useState6 = _slicedToArray(_useState5, 2),
     isExited = _useState6[0],
     setExited = _useState6[1];
-  var keyboardHintAriaId = (0, _accessibility.useGeneratedHtmlId)({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'keyboardHint'
-  });
-  var exitedHintAriaId = (0, _accessibility.useGeneratedHtmlId)({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'exited'
+  var ariaDescribedById = (0, _services.useGeneratedHtmlId)({
+    suffix: 'focusTrapHint'
   });
 
   // direct DOM manipulation as workaround to attach required hints
   (0, _react.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', (0, _classnames.default)(currentAriaDescribedbyId, ariaDescribedById));
+    return function () {
+      if (currentAriaDescribedbyId) {
+        cellEl.setAttribute('aria-descibedby', currentAriaDescribedbyId);
+      } else {
+        cellEl.removeAttribute('aria-describedby');
+      }
+    };
+  }, [cellEl, ariaDescribedById]);
   (0, _react.useEffect)(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -172,23 +173,20 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
     onDeactivation: function onDeactivation() {
       return setIsCellEntered(false);
     }
-  }, children, (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-    id: exitedHintAriaId,
-    "aria-hidden": "true"
+  }, children, (0, _react2.jsx)("p", {
+    id: ariaDescribedById,
+    hidden: true
   }, isExited && (0, _react2.jsx)(_i18n.EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapExitPrompt",
     default: "Exited cell content."
-  }))), (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-    id: keyboardHintAriaId,
-    "aria-hidden": "true"
-  }, !isCellEntered && (0, _react2.jsx)(_i18n.EuiI18n
+  }), !isCellEntered && (0, _react2.jsx)(_i18n.EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapEnterPrompt",
     default: "Press the Enter key to interact with this cell's contents."
-  }))));
+  })));
 };
 
 /**

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

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiDataGridBody = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _services = require("../../../services");
 var _data_grid_body_virtualized = require("./data_grid_body_virtualized");
 var _data_grid_body_custom = require("./data_grid_body_custom");
+var _data_grid_body = require("./data_grid_body.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["renderCustomGridBody"];
 /*
@@ -29,9 +31,14 @@ var EuiDataGridBody = exports.EuiDataGridBody = function EuiDataGridBody(_ref) {
    * + virtualization library for rendering content, or if consumers have
    * passed their own custom renderer
    */
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_body.euiDataGridBodyStyles);
+  var cssStyles = [styles.euiDataGridBody, renderCustomGridBody ? styles.customRender : styles.virtualized];
   return renderCustomGridBody ? (0, _react2.jsx)(_data_grid_body_custom.EuiDataGridBodyCustomRender, _extends({
-    renderCustomGridBody: renderCustomGridBody
-  }, props)) : (0, _react2.jsx)(_data_grid_body_virtualized.EuiDataGridBodyVirtualized, props);
+    renderCustomGridBody: renderCustomGridBody,
+    css: cssStyles
+  }, props)) : (0, _react2.jsx)(_data_grid_body_virtualized.EuiDataGridBodyVirtualized, _extends({
+    css: cssStyles
+  }, props));
 };
 EuiDataGridBody.propTypes = {
   leadingControlColumns: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -600,34 +607,42 @@ EuiDataGridBody.propTypes = {
   gridStyles: _propTypes.default.shape({
     /**
        * Size of fonts used within the row and column cells
+       * @default m
        */
     fontSize: _propTypes.default.oneOf(["s", "m", "l"]),
     /**
        * Defines the padding with the row and column cells
+       * @default m
        */
     cellPadding: _propTypes.default.oneOf(["s", "m", "l"]),
     /**
-       * Border uses for the row and column cells
+       * Border used for the row and column cells
+       * @default all
        */
     border: _propTypes.default.oneOf(["all", "horizontal", "none"]),
     /**
        * If set to true, rows will alternate zebra striping for clarity
+       * @default false
        */
     stripes: _propTypes.default.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.default.oneOf(["shade", "underline"]),
     /**
        * Visual style for the column footers.
+       * @default overline
        */
     footer: _propTypes.default.oneOf(["shade", "overline", "striped"]),
     /**
        * If set to true, the footer row will be sticky
+       * @default true
        */
     stickyFooter: _propTypes.default.bool,
     /**
        * Will define what visual style to show on row hover
+       * @default hover
        */
     rowHover: _propTypes.default.oneOf(["highlight", "none"]),
     /**
@@ -643,5 +658,6 @@ EuiDataGridBody.propTypes = {
   gridWidth: _propTypes.default.number.isRequired,
   gridRef: _propTypes.default.any.isRequired,
   gridItemsRendered: _propTypes.default.any.isRequired,
-  wrapperRef: _propTypes.default.any.isRequired
+  wrapperRef: _propTypes.default.any.isRequired,
+  className: _propTypes.default.string
 };

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridBodyStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+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.
+ */
+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__
+};
+var euiDataGridBodyStyles = exports.euiDataGridBodyStyles = function euiDataGridBodyStyles(euiThemeContext) {
+  return {
+    euiDataGridBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";;label:euiDataGridBody;"),
+    virtualized: _ref,
+    customRender: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)('100%'), " overflow:auto;;label:customRender;")
+  };
+};

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

@@ -63,7 +63,8 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
     pagination = _ref.pagination,
     rowHeightsOptions = _ref.rowHeightsOptions,
     gridWidth = _ref.gridWidth,
-    gridStyles = _ref.gridStyles;
+    gridStyles = _ref.gridStyles,
+    className = _ref.className;
   /**
    * Columns & widths
    */
@@ -112,7 +113,8 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      gridStyles: gridStyles
     }),
     headerRow = _useDataGridHeader.headerRow;
   var _useDataGridFooter = (0, _footer.useDataGridFooter)({
@@ -126,7 +128,8 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
-      schema: schema
+      schema: schema,
+      gridStyles: gridStyles
     }),
     footerRow = _useDataGridFooter.footerRow;
 
@@ -174,7 +177,7 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
     customGridBodyProps = _useState2[0],
     setCustomGridBodyProps = _useState2[1];
   return (0, _react2.jsx)("div", _extends({}, customGridBodyProps, {
-    className: (0, _classnames.default)('euiDataGrid__customRenderBody', customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
+    className: (0, _classnames.default)('euiDataGrid__customRenderBody', className, customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
   }), headerRow, renderCustomGridBody({
     visibleColumns: visibleColumns,
     visibleRowData: visibleRows,
@@ -749,34 +752,42 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridStyles: _propTypes.default.shape({
     /**
        * Size of fonts used within the row and column cells
+       * @default m
        */
     fontSize: _propTypes.default.oneOf(["s", "m", "l"]),
     /**
        * Defines the padding with the row and column cells
+       * @default m
        */
     cellPadding: _propTypes.default.oneOf(["s", "m", "l"]),
     /**
-       * Border uses for the row and column cells
+       * Border used for the row and column cells
+       * @default all
        */
     border: _propTypes.default.oneOf(["all", "horizontal", "none"]),
     /**
        * If set to true, rows will alternate zebra striping for clarity
+       * @default false
        */
     stripes: _propTypes.default.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.default.oneOf(["shade", "underline"]),
     /**
        * Visual style for the column footers.
+       * @default overline
        */
     footer: _propTypes.default.oneOf(["shade", "overline", "striped"]),
     /**
        * If set to true, the footer row will be sticky
+       * @default true
        */
     stickyFooter: _propTypes.default.bool,
     /**
        * Will define what visual style to show on row hover
+       * @default hover
        */
     rowHover: _propTypes.default.oneOf(["highlight", "none"]),
     /**
@@ -792,5 +803,6 @@ EuiDataGridBodyCustomRender.propTypes = {
   gridWidth: _propTypes.default.number.isRequired,
   gridRef: _propTypes.default.any.isRequired,
   gridItemsRendered: _propTypes.default.any.isRequired,
-  wrapperRef: _propTypes.default.any.isRequired
+  wrapperRef: _propTypes.default.any.isRequired,
+  className: _propTypes.default.string
 };

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

@@ -115,7 +115,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     gridWidth = _ref3.gridWidth,
     gridRef = _ref3.gridRef,
     gridItemsRendered = _ref3.gridItemsRendered,
-    wrapperRef = _ref3.wrapperRef;
+    wrapperRef = _ref3.wrapperRef,
+    className = _ref3.className;
   /**
    * Grid refs & observers
    */
@@ -164,7 +165,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      gridStyles: gridStyles
     }),
     headerRow = _useDataGridHeader.headerRow,
     headerRowHeight = _useDataGridHeader.headerRowHeight;
@@ -179,7 +181,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
-      schema: schema
+      schema: schema,
+      gridStyles: gridStyles
     }),
     footerRow = _useDataGridFooter.footerRow,
     footerRowHeight = _useDataGridFooter.footerRowHeight;
@@ -308,7 +311,7 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     value: rowWrapperContextValue
   }, (0, _react2.jsx)(_reactWindow.VariableSizeGrid, _extends({}, virtualizationOptions, {
     ref: gridRef,
-    className: (0, _classnames.default)('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
+    className: (0, _classnames.default)('euiDataGrid__virtualized', className, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: onItemsRendered,
     innerElementType: InnerElement,
     outerRef: outerGridRef,
@@ -889,34 +892,42 @@ EuiDataGridBodyVirtualized.propTypes = {
   gridStyles: _propTypes.default.shape({
     /**
        * Size of fonts used within the row and column cells
+       * @default m
        */
     fontSize: _propTypes.default.oneOf(["s", "m", "l"]),
     /**
        * Defines the padding with the row and column cells
+       * @default m
        */
     cellPadding: _propTypes.default.oneOf(["s", "m", "l"]),
     /**
-       * Border uses for the row and column cells
+       * Border used for the row and column cells
+       * @default all
        */
     border: _propTypes.default.oneOf(["all", "horizontal", "none"]),
     /**
        * If set to true, rows will alternate zebra striping for clarity
+       * @default false
        */
     stripes: _propTypes.default.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.default.oneOf(["shade", "underline"]),
     /**
        * Visual style for the column footers.
+       * @default overline
        */
     footer: _propTypes.default.oneOf(["shade", "overline", "striped"]),
     /**
        * If set to true, the footer row will be sticky
+       * @default true
        */
     stickyFooter: _propTypes.default.bool,
     /**
        * Will define what visual style to show on row hover
+       * @default hover
        */
     rowHover: _propTypes.default.oneOf(["highlight", "none"]),
     /**
@@ -932,6 +943,7 @@ EuiDataGridBodyVirtualized.propTypes = {
   gridWidth: _propTypes.default.number.isRequired,
   gridRef: _propTypes.default.any.isRequired,
   gridItemsRendered: _propTypes.default.any.isRequired,
-  wrapperRef: _propTypes.default.any.isRequired
+  wrapperRef: _propTypes.default.any.isRequired,
+  className: _propTypes.default.string
 };
 EuiDataGridBodyVirtualized.displayName = 'EuiDataGridBodyVirtualized';

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridFooterStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _data_grid = require("../../data_grid.styles");
+/*
+ * 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.
+ */
+
+var euiDataGridFooterStyles = exports.euiDataGridFooterStyles = function euiDataGridFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridVariables = (0, _data_grid.euiDataGridVariables)(euiThemeContext),
+    levels = _euiDataGridVariables.levels;
+  return {
+    euiDataGridFooter: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('width', 'fit-content'), " background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGridFooter;"),
+    sticky: /*#__PURE__*/(0, _react.css)("z-index:", levels.stickyHeader, ";position:sticky;", (0, _global_styling.logicalCSS)('bottom', 0), ";;label:sticky;"),
+    overline: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.text)), ";;label:overline;"),
+    shade: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:shade;"),
+    striped: /*#__PURE__*/(0, _react.css)(".euiDataGrid--stripes &{background-color:", euiTheme.colors.lightestShade, ";};label:striped;"),
+    euiDataGridFooterCell: /*#__PURE__*/(0, _react.css)("flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";;label:euiDataGridFooterCell;")
+  };
+};

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

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiDataGridFooterRow = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../../services");
 var _cell = require("../cell");
+var _data_grid_footer = require("./data_grid_footer.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,9 +19,9 @@ var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -41,13 +43,15 @@ var EuiDataGridFooterRow = exports.EuiDataGridFooterRow = /*#__PURE__*/(0, _reac
     _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 = (0, _classnames.default)('euiDataGridRow', {
-    'euiDataGridRow--striped': visibleRowIndex % 2 !== 0
-  }, 'euiDataGridFooter', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_footer.euiDataGridFooterStyles);
+  var cssStyles = [styles.euiDataGridFooter, gridStyles.stickyFooter && styles.sticky, gridStyles.footer === 'striped' ? visibleRowIndex % 2 !== 0 && styles.striped : styles[gridStyles.footer]];
+  var classes = (0, _classnames.default)('euiDataGridFooter', className);
   var dataTestSubj = (0, _classnames.default)('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
   var popoverContext = (0, _react.useContext)(_cell.DataGridCellPopoverContext);
   var sharedCellProps = {
+    css: styles.euiDataGridFooterCell,
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
     interactiveCellId: interactiveCellId,
@@ -56,6 +60,7 @@ var EuiDataGridFooterRow = exports.EuiDataGridFooterRow = /*#__PURE__*/(0, _reac
   return (0, _react2.jsx)("div", _extends({
     ref: ref,
     role: "row",
+    css: cssStyles,
     className: classes,
     "data-test-subj": dataTestSubj
   }, rest), leadingControlColumns.map(function (_ref2, i) {

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

@@ -221,8 +221,15 @@ var getSortColumnActions = exports.getSortColumnActions = function getSortColumn
     var onClickSortAsc = function onClickSortAsc() {
       sortBy('asc');
     };
+    var isSorted = sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'asc';
     var action = {
-      label: (0, _react2.jsx)(_i18n.EuiI18n, {
+      label: isSorted ? (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiColumnActions.unsort",
+        default: "Unsort {schemaLabel}",
+        values: {
+          schemaLabel: label
+        }
+      }) : (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiColumnActions.sort",
         default: "Sort {schemaLabel}",
         values: {
@@ -231,7 +238,6 @@ var getSortColumnActions = exports.getSortColumnActions = function getSortColumn
       }),
       onClick: onClickSortAsc,
       isDisabled: column.isSortable === false,
-      className: sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'asc' ? 'euiDataGridHeader__action--selected' : '',
       iconType: 'sortUp',
       size: 'xs',
       color: 'text'
@@ -243,8 +249,15 @@ var getSortColumnActions = exports.getSortColumnActions = function getSortColumn
     var onClickSortDesc = function onClickSortDesc() {
       sortBy('desc');
     };
+    var _isSorted = sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'desc';
     var _action2 = {
-      label: (0, _react2.jsx)(_i18n.EuiI18n, {
+      label: _isSorted ? (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiColumnActions.unsort",
+        default: "Unsort {schemaLabel}",
+        values: {
+          schemaLabel: _label
+        }
+      }) : (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiColumnActions.sort",
         default: "Sort {schemaLabel}",
         values: {
@@ -253,7 +266,6 @@ var getSortColumnActions = exports.getSortColumnActions = function getSortColumn
       }),
       onClick: onClickSortDesc,
       isDisabled: column.isSortable === false,
-      className: sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'desc' ? 'euiDataGridHeader__action--selected' : '',
       iconType: 'sortDown',
       size: 'xs',
       color: 'text'