@elastic/eui 95.10.1 → 95.12.0

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

@@ -1,7 +1,8 @@
 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 = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "showCellActions", "onExpandClick", "popoverAnchorRef"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeight", "rowHeightUtils", "isControlColumn"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
-  _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
+  _excluded3 = ["isExpandable", "style", "className", "data-test-subj"],
+  _excluded4 = ["columnId", "columnIndex", "rowIndex", "visibleRowIndex"];
 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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
@@ -18,6 +19,12 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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; }
 /*
@@ -30,18 +37,19 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import classNames from 'classnames';
 import PropTypes from "prop-types";
-import React, { Component, createRef, memo, useMemo } from 'react';
+import React, { Component, createRef, memo, useMemo, forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 import { IS_JEST_ENVIRONMENT } from '../../../../utils';
-import { keys } from '../../../../services';
+import { keys, tabularCopyMarkers, useEuiMemoizedStyles } from '../../../../services';
 import { EuiScreenReaderOnly } from '../../../accessibility';
-import { EuiI18n } from '../../../i18n';
+import { useEuiI18n } from '../../../i18n';
 import { EuiTextBlockTruncate } from '../../../text_truncate';
 import { hasResizeObserver } from '../../../observer/resize_observer/resize_observer';
 import { DataGridFocusContext } from '../../utils/focus';
 import { EuiDataGridCellActions, EuiDataGridCellPopoverActions } from './data_grid_cell_actions';
 import { DefaultCellPopover } from './data_grid_cell_popover';
 import { HandleInteractiveChildren } from './focus_utils';
+import { euiDataGridRowCellStyles } from './data_grid_cell.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
   var renderCellValue = _ref.renderCellValue,
@@ -50,14 +58,9 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     setCellContentsRef = _ref.setCellContentsRef,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex,
-    ariaRowIndex = _ref.ariaRowIndex,
     rowHeight = _ref.rowHeight,
     rowHeightUtils = _ref.rowHeightUtils,
     isControlColumn = _ref.isControlColumn,
-    isFocused = _ref.isFocused,
-    showCellActions = _ref.showCellActions,
-    onExpandClick = _ref.onExpandClick,
-    popoverAnchorRef = _ref.popoverAnchorRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   // React is more permissive than the TS types indicate
   var CellElement = renderCellValue;
@@ -70,39 +73,26 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
       'eui-textTruncate': cellHeightType === 'default'
     });
   }, [cellHeightType, isControlColumn]);
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RenderTruncatedCellContent, {
+  var styles = useEuiMemoizedStyles(euiDataGridRowCellStyles);
+  var cssStyles = [styles.content.euiDataGridRowCell__content].concat(_toConsumableArray(isControlColumn ? [styles.content.controlColumn, styles.content.autoHeight] : [
+  // Regular data cells should always inherit height from the row wrapper,
+  // except for auto height
+  cellHeightType === 'auto' ? styles.content.autoHeight : styles.content.defaultHeight]));
+  return ___EmotionJSX(RenderTruncatedCellContent, {
     hasLineCountTruncation: cellHeightType === 'lineCount' && !isControlColumn,
     rowHeight: rowHeight
   }, ___EmotionJSX("div", {
     ref: setCellContentsRef,
     "data-datagrid-cellcontent": true,
-    className: classes
+    className: classes,
+    css: cssStyles
   }, ___EmotionJSX(CellElement, _extends({
     isDetails: false,
     "data-test-subj": "cell-content",
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, cellContext, rest)))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-    hidden: !isFocused
-  }, '- ', ___EmotionJSX(EuiI18n, {
-    token: "euiDataGridCell.position",
-    default: "{columnId}, column {col}, row {row}",
-    values: {
-      columnId: (column === null || column === void 0 ? void 0 : column.displayAsText) || rest.columnId,
-      col: colIndex + 1,
-      row: ariaRowIndex
-    }
-  }), showCellActions && ___EmotionJSX(React.Fragment, null, '. ', ___EmotionJSX(EuiI18n, {
-    token: "euiDataGridCell.expansionEnterPrompt",
-    default: "Press the Enter key to expand this cell."
-  })))), showCellActions && ___EmotionJSX(EuiDataGridCellActions, {
-    rowIndex: rowIndex,
-    colIndex: colIndex,
-    column: column,
-    onExpandClick: onExpandClick,
-    popoverAnchorRef: popoverAnchorRef
-  }));
+  }, cellContext, rest))));
 });
 EuiDataGridCellContent.propTypes = {
   rowIndex: PropTypes.number.isRequired,
@@ -548,15 +538,61 @@ EuiDataGridCellContent.propTypes = {
   }),
   rowHeightUtils: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
   pagination: PropTypes.any,
+  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 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"]),
+    /**
+       * Optionally pass custom classes to highlight or customize certain rows
+       */
+    rowClasses: PropTypes.shape({}),
+    /**
+       * Optional callback returning the current `gridStyle` config when changes occur from user input (e.g. toolbar display controls).
+       * Can be used for, e.g. storing user `gridStyle` in a local storage object.
+       */
+    onChange: PropTypes.func
+  }).isRequired,
   setCellProps: PropTypes.func.isRequired,
   setCellContentsRef: PropTypes.func.isRequired,
-  showCellActions: PropTypes.bool.isRequired,
   isExpanded: PropTypes.bool.isRequired,
-  onExpandClick: PropTypes.func.isRequired,
-  popoverAnchorRef: PropTypes.any.isRequired,
   isControlColumn: PropTypes.bool.isRequired,
-  isFocused: PropTypes.bool.isRequired,
-  ariaRowIndex: PropTypes.number.isRequired,
   rowHeight: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf(["auto"]), PropTypes.shape({
     lineCount: PropTypes.number,
     height: PropTypes.number
@@ -579,8 +615,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "state", {
       cellProps: {},
       isFocused: false,
-      isHovered: false,
-      cellTextAlign: 'Left'
+      isHovered: false
     });
     _defineProperty(_this, "unsubscribeCell", void 0);
     _defineProperty(_this, "style", null);
@@ -621,7 +656,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       var lineCount = isSingleLine ? 1 : rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getLineCount(rowHeightOption);
       if (lineCount) {
         var shouldUseHeightsCache = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.isRowHeightOverride(rowIndex, rowHeightsOptions);
-        var height = rowHeightUtils.calculateHeightForLineCount(_this.cellContentsRef, lineCount, shouldUseHeightsCache);
+        var height = rowHeightUtils.calculateHeightForLineCount(_this.cellContentsRef, lineCount);
         if (shouldUseHeightsCache) {
           var _this$props4 = _this.props,
             columnId = _this$props4.columnId,
@@ -662,29 +697,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       } else if (_this.contentObserver) {
         _this.contentObserver.disconnect();
       }
-      _this.setCellTextAlign();
-    });
-    _defineProperty(_this, "setCellTextAlign", function () {
-      if (_this.cellContentsRef) {
-        var columnType = _this.props.columnType;
-        if (!columnType) {
-          // If no schema was set, this is likely a left aligned column
-          _this.setState({
-            cellTextAlign: 'Left'
-          });
-        } else if (columnType === 'numeric' || columnType === 'currency') {
-          // Default EUI schemas that we know set right text align
-          _this.setState({
-            cellTextAlign: 'Right'
-          });
-        } else {
-          // If the consumer is using a custom schema, it may have custom text alignment
-          var textAlign = window.getComputedStyle(_this.cellContentsRef).getPropertyValue('text-align');
-          _this.setState({
-            cellTextAlign: textAlign === 'right' || textAlign === 'end' ? 'Right' : 'Left'
-          });
-        }
-      }
     });
     _defineProperty(_this, "isExpandable", function () {
       var _this$props$column, _this$state$cellProps;
@@ -713,7 +725,9 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         // Set popover anchor
         var cellAnchorEl = _this.popoverAnchorRef.current;
         setPopoverAnchor(cellAnchorEl);
-        setPopoverAnchorPosition("down".concat(_this.state.cellTextAlign));
+        // TODO: Potentially switch to `topLeft` based on occlusion with sticky header
+        // @see https://github.com/elastic/eui/issues/7828
+        setPopoverAnchorPosition('downLeft');
 
         // Set popover contents with cell content
         var _this$props5 = _this.props,
@@ -834,12 +848,12 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props$rowHeight, _prevProps$rowHeights, _this$props$rowHeight2, _this$props$rowHeight3, _this$props$style, _prevProps$style;
+      var _this$props$rowHeight, _prevProps$rowHeights, _this$props$rowHeight2, _prevProps$rowHeights2, _this$props$rowHeight3, _prevProps$rowHeights3, _this$props$gridStyle, _prevProps$gridStyles, _this$props$gridStyle2, _prevProps$gridStyles2, _this$props$rowHeight4, _this$props$rowHeight5, _this$props$style, _prevProps$style;
       this.recalculateAutoHeight();
-      if (((_this$props$rowHeight = this.props.rowHeightsOptions) === null || _this$props$rowHeight === void 0 ? void 0 : _this$props$rowHeight.defaultHeight) !== ((_prevProps$rowHeights = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights === void 0 ? void 0 : _prevProps$rowHeights.defaultHeight)) {
+      if (((_this$props$rowHeight = this.props.rowHeightsOptions) === null || _this$props$rowHeight === void 0 ? void 0 : _this$props$rowHeight.defaultHeight) !== ((_prevProps$rowHeights = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights === void 0 ? void 0 : _prevProps$rowHeights.defaultHeight) || ((_this$props$rowHeight2 = this.props.rowHeightsOptions) === null || _this$props$rowHeight2 === void 0 || (_this$props$rowHeight2 = _this$props$rowHeight2.rowHeights) === null || _this$props$rowHeight2 === void 0 ? void 0 : _this$props$rowHeight2[this.props.rowIndex]) !== ((_prevProps$rowHeights2 = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights2 === void 0 || (_prevProps$rowHeights2 = _prevProps$rowHeights2.rowHeights) === null || _prevProps$rowHeights2 === void 0 ? void 0 : _prevProps$rowHeights2[prevProps.rowIndex]) || ((_this$props$rowHeight3 = this.props.rowHeightsOptions) === null || _this$props$rowHeight3 === void 0 ? void 0 : _this$props$rowHeight3.lineHeight) !== ((_prevProps$rowHeights3 = prevProps.rowHeightsOptions) === null || _prevProps$rowHeights3 === void 0 ? void 0 : _prevProps$rowHeights3.lineHeight) || ((_this$props$gridStyle = this.props.gridStyles) === null || _this$props$gridStyle === void 0 ? void 0 : _this$props$gridStyle.fontSize) !== ((_prevProps$gridStyles = prevProps.gridStyles) === null || _prevProps$gridStyles === void 0 ? void 0 : _prevProps$gridStyles.fontSize) || ((_this$props$gridStyle2 = this.props.gridStyles) === null || _this$props$gridStyle2 === void 0 ? void 0 : _this$props$gridStyle2.cellPadding) !== ((_prevProps$gridStyles2 = prevProps.gridStyles) === null || _prevProps$gridStyles2 === void 0 ? void 0 : _prevProps$gridStyles2.cellPadding)) {
         this.recalculateLineHeight();
       }
-      if ((_this$props$rowHeight2 = this.props.rowHeightUtils) !== null && _this$props$rowHeight2 !== void 0 && _this$props$rowHeight2.compensateForLayoutShift && (_this$props$rowHeight3 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight3 !== void 0 && _this$props$rowHeight3.scrollAnchorRow && this.props.colIndex === 0 &&
+      if ((_this$props$rowHeight4 = this.props.rowHeightUtils) !== null && _this$props$rowHeight4 !== void 0 && _this$props$rowHeight4.compensateForLayoutShift && (_this$props$rowHeight5 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight5 !== void 0 && _this$props$rowHeight5.scrollAnchorRow && this.props.colIndex === 0 &&
       // once per row
       this.props.columnId === prevProps.columnId &&
       // if this is still the same column
@@ -847,12 +861,12 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       // if this is still the same row
       ((_this$props$style = this.props.style) === null || _this$props$style === void 0 ? void 0 : _this$props$style.top) !== ((_prevProps$style = prevProps.style) === null || _prevProps$style === void 0 ? void 0 : _prevProps$style.top) // if the top position has changed
       ) {
-        var _prevProps$style2, _this$props$style2, _this$props$rowHeight4;
+        var _prevProps$style2, _this$props$style2, _this$props$rowHeight6;
         var previousTop = parseFloat((_prevProps$style2 = prevProps.style) === null || _prevProps$style2 === void 0 ? void 0 : _prevProps$style2.top);
         var currentTop = parseFloat((_this$props$style2 = this.props.style) === null || _this$props$style2 === void 0 ? void 0 : _this$props$style2.top);
 
         // @ts-ignore We've already checked that this virtualization util is available above
-        this.props.rowHeightUtils.compensateForLayoutShift(this.props.rowIndex, currentTop - previousTop, (_this$props$rowHeight4 = this.props.rowHeightsOptions) === null || _this$props$rowHeight4 === void 0 ? void 0 : _this$props$rowHeight4.scrollAnchorRow);
+        this.props.rowHeightUtils.compensateForLayoutShift(this.props.rowIndex, currentTop - previousTop, (_this$props$rowHeight6 = this.props.rowHeightsOptions) === null || _this$props$rowHeight6 === void 0 ? void 0 : _this$props$rowHeight6.scrollAnchorRow);
       }
       if (this.props.popoverContext.popoverIsOpen !== prevProps.popoverContext.popoverIsOpen || this.props.popoverContext.cellLocation !== prevProps.popoverContext.cellLocation || this.props.renderCellPopover !== prevProps.renderCellPopover) {
         this.handleCellPopover();
@@ -864,6 +878,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
+      var _nextProps$gridStyles, _this$props$gridStyle3, _nextProps$gridStyles2, _this$props$gridStyle4;
       if (nextProps.rowIndex !== this.props.rowIndex) return true;
       if (nextProps.visibleRowIndex !== this.props.visibleRowIndex) return true;
       if (nextProps.colIndex !== this.props.colIndex) return true;
@@ -871,6 +886,8 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       if (nextProps.columnType !== this.props.columnType) return true;
       if (nextProps.width !== this.props.width) return true;
       if (nextProps.rowHeightsOptions !== this.props.rowHeightsOptions) return true;
+      if (((_nextProps$gridStyles = nextProps.gridStyles) === null || _nextProps$gridStyles === void 0 ? void 0 : _nextProps$gridStyles.fontSize) !== ((_this$props$gridStyle3 = this.props.gridStyles) === null || _this$props$gridStyle3 === void 0 ? void 0 : _this$props$gridStyle3.fontSize)) return true;
+      if (((_nextProps$gridStyles2 = nextProps.gridStyles) === null || _nextProps$gridStyles2 === void 0 ? void 0 : _nextProps$gridStyles2.cellPadding) !== ((_this$props$gridStyle4 = this.props.gridStyles) === null || _this$props$gridStyle4 === void 0 ? void 0 : _this$props$gridStyle4.cellPadding)) return true;
       if (nextProps.renderCellValue !== this.props.renderCellValue) return true;
       if (nextProps.renderCellPopover !== this.props.renderCellPopover) return true;
       if (nextProps.interactiveCellId !== this.props.interactiveCellId) return true;
@@ -915,7 +932,11 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       var isExpandable = this.isExpandable();
       var popoverIsOpen = this.isPopoverOpen();
       var showCellActions = isExpandable && (popoverIsOpen || this.state.isFocused || this.state.isHovered);
-      var cellClasses = classNames('euiDataGridRowCell', "euiDataGridRowCell--align".concat(this.state.cellTextAlign), _defineProperty(_defineProperty({}, "euiDataGridRowCell--".concat(columnType), columnType), 'euiDataGridRowCell--open', popoverIsOpen), className);
+      var cellClasses = classNames('euiDataGridRowCell', _defineProperty(_defineProperty({}, "euiDataGridRowCell--".concat(columnType), columnType), 'euiDataGridRowCell--open', popoverIsOpen), className);
+
+      // classNames set by EuiDataGridCellWrapper
+      var isControlColumn = cellClasses.includes('euiDataGridRowCell--controlColumn');
+      var isLastColumn = cellClasses.includes('euiDataGridRowCell--lastColumn');
       var ariaRowIndex = pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
       var _this$state$cellProps2 = this.state.cellProps,
         _ = _this$state$cellProps2.isExpandable,
@@ -945,23 +966,14 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       }) : undefined;
       return ___EmotionJSX(RenderCellInRow, {
         row: row
-      }, ___EmotionJSX("div", _extends({
-        role: "gridcell",
+      }, ___EmotionJSX(GridCellDiv, _extends({}, cellProps, {
+        ref: this.cellRef,
+        columnId: this.props.columnId,
+        columnIndex: this.props.colIndex,
+        rowIndex: rowIndex,
+        visibleRowIndex: this.props.visibleRowIndex,
         "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused ? 0 : -1,
-        ref: this.cellRef
-      }, cellProps, {
-        "data-test-subj": "dataGridRowCell"
-        // Data attributes to help target specific cells by either data or current cell location
-        ,
-        "data-gridcell-column-id": this.props.columnId // Static column ID name, not affected by column order
-        ,
-        "data-gridcell-column-index": this.props.colIndex // Affected by column reordering
-        ,
-        "data-gridcell-row-index": this.props.rowIndex // Index from data, not affected by sorting or pagination
-        ,
-        "data-gridcell-visible-row-index": this.props.visibleRowIndex // Affected by sorting & pagination
-        ,
         onKeyDown: this.handleCellKeyDown,
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave
@@ -975,18 +987,24 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         columnType: columnType,
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
-        onExpandClick: this.handleCellExpansionClick,
-        popoverAnchorRef: this.popoverAnchorRef,
-        showCellActions: showCellActions,
-        isFocused: this.state.isFocused,
         setCellContentsRef: this.setCellContentsRef,
         rowHeight: rowHeight,
         rowHeightUtils: rowHeightUtils,
-        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
-        ariaRowIndex: ariaRowIndex,
+        isControlColumn: isControlColumn,
         rowIndex: rowIndex,
         colIndex: colIndex
-      })))));
+      }))), isLastColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab, this.state.isFocused && ___EmotionJSX(CellScreenReaderDescription, {
+        columnName: (column === null || column === void 0 ? void 0 : column.displayAsText) || this.props.columnId,
+        columnIndex: colIndex + 1,
+        rowIndex: ariaRowIndex,
+        canExpandCell: showCellActions
+      }), showCellActions && ___EmotionJSX(EuiDataGridCellActions, {
+        rowIndex: rowIndex,
+        colIndex: colIndex,
+        column: column,
+        onExpandClick: this.handleCellExpansionClick,
+        popoverAnchorRef: this.popoverAnchorRef
+      })));
     }
   }]);
 }(Component);
@@ -1383,7 +1401,58 @@ EuiDataGridCell.propTypes = {
   rowManager: PropTypes.shape({
     getRow: PropTypes.func.isRequired
   }),
-  pagination: PropTypes.any
+  pagination: PropTypes.any,
+  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 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"]),
+    /**
+       * Optionally pass custom classes to highlight or customize certain rows
+       */
+    rowClasses: PropTypes.shape({}),
+    /**
+       * Optional callback returning the current `gridStyle` config when changes occur from user input (e.g. toolbar display controls).
+       * Can be used for, e.g. storing user `gridStyle` in a local storage object.
+       */
+    onChange: PropTypes.func
+  }).isRequired
 };
 var RenderCellInRow = /*#__PURE__*/memo(function (_ref2) {
   var row = _ref2.row,
@@ -1414,4 +1483,53 @@ RenderTruncatedCellContent.propTypes = {
     height: PropTypes.number
   }).isRequired])
 };
-RenderTruncatedCellContent.displayName = 'RenderTruncatedCellContent';
+RenderTruncatedCellContent.displayName = 'RenderTruncatedCellContent';
+
+/**
+ * Function component utilities for easier hook usage
+ */
+
+var GridCellDiv = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var columnId = _ref4.columnId,
+    columnIndex = _ref4.columnIndex,
+    rowIndex = _ref4.rowIndex,
+    visibleRowIndex = _ref4.visibleRowIndex,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  var styles = useEuiMemoizedStyles(euiDataGridRowCellStyles);
+  return ___EmotionJSX("div", _extends({
+    ref: ref,
+    css: styles.euiDataGridRowCell
+  }, props, {
+    role: "gridcell"
+    // Data attributes to help target specific cells by either data or current cell location
+    ,
+    "data-gridcell-column-id": columnId // Static column ID name, not affected by column order
+    ,
+    "data-gridcell-column-index": columnIndex // Affected by column reordering
+    ,
+    "data-gridcell-row-index": rowIndex // Index from data, not affected by sorting or pagination
+    ,
+    "data-gridcell-visible-row-index": visibleRowIndex // Affected by sorting & pagination
+  }));
+}));
+GridCellDiv.displayName = 'GridCellDiv';
+var CellScreenReaderDescription = /*#__PURE__*/memo(function (_ref5) {
+  var columnName = _ref5.columnName,
+    columnIndex = _ref5.columnIndex,
+    rowIndex = _ref5.rowIndex,
+    canExpandCell = _ref5.canExpandCell;
+  var cellPosition = useEuiI18n('euiDataGridCell.position', '{columnName}, column {columnIndex}, row {rowIndex}', {
+    columnName: columnName,
+    columnIndex: columnIndex,
+    rowIndex: rowIndex
+  });
+  var enterKeyPrompt = useEuiI18n('euiDataGridCell.expansionEnterPrompt', 'Press the Enter key to expand this cell.');
+  return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, tabularCopyMarkers.hiddenNoCopyBoundary, " - ".concat(cellPosition).concat(canExpandCell ? ". ".concat(enterKeyPrompt) : ''), tabularCopyMarkers.hiddenNoCopyBoundary));
+});
+CellScreenReaderDescription.propTypes = {
+  columnName: PropTypes.string.isRequired,
+  columnIndex: PropTypes.number.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  canExpandCell: PropTypes.bool.isRequired
+};
+CellScreenReaderDescription.displayName = 'CellScreenReaderDescription';

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

@@ -0,0 +1,110 @@
+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 { logicalCSS, logicalTextAlignCSS, mathWithUnits } from '../../../../global_styling';
+export var euiDataGridCellOutlineStyles = function euiDataGridCellOutlineStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  var focusColor = euiTheme.colors.primary;
+  var hoverColor = euiTheme.colors.darkShade;
+  var outlineWidth = euiTheme.border.width.thick;
+  var borderRadius = mathWithUnits(euiTheme.border.radius.medium, function (x) {
+    return x / 2;
+  });
+
+  // Note: We use a pseudo element for the 'outline' over any other CSS approaches
+  // (outline, border, box-shadow) because it gives us the most control and reduces
+  // overlap with other cells or inner elements
+  return {
+    borderRadius: borderRadius,
+    focusColor: focusColor,
+    focusStyles: "\n      /* Remove outline as we're handling it manually. Needed to override global styles */\n      &:focus-visible {\n        outline: none;\n      }\n\n      &::after {\n        content: '';\n        /* We want this to be visually on top of cell content but not interactive */\n        z-index: 2;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        border: ".concat(outlineWidth, " solid ").concat(focusColor, ";\n        border-radius: ").concat(borderRadius, ";\n      }\n    "),
+    hoverColor: hoverColor,
+    hoverStyles: "\n      &::after {\n        border-color: ".concat(hoverColor, ";\n      }\n    ")
+  };
+};
+export var euiDataGridCellOutlineSelectors = function euiDataGridCellOutlineSelectors() {
+  var parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '&';
+  // Focus selectors
+  var focus = ':focus'; // cell has been clicked or keyboard navigated to
+  var isOpen = '.euiDataGridRowCell--open'; // always show when the cell expansion popover is open
+  var isClosing = '[data-keyboard-closing]'; // prevents the animation from replaying when keyboard focus is moved from the popover back to the cell
+  var isEntered = ':has([data-focus-lock-disabled="false"])'; // cell focus trap has been entered - ideally show the outline still, but grayed out
+
+  // Hover selectors
+  var hover = ':hover'; // hover styles should not supercede focus styles
+  var focusWithin = ':focus-within'; // used by :hover:not() to prevent flash of gray when mouse users are opening/closing the expansion popover via cell action click
+
+  // Cell header specific selectors
+  var headerActionsOpen = '.euiDataGridHeaderCell--isActionsPopoverOpen';
+
+  // Utils
+  var selectors = function selectors() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return [].concat(args).join(', ');
+  };
+  var is = function is(selectors) {
+    return "".concat(parentSelector, ":is(").concat(selectors, ")");
+  };
+  var not = function not(selectors) {
+    return "".concat(parentSelector, ":not(").concat(selectors, ")");
+  };
+  var hoverNot = function hoverNot(selectors) {
+    return "".concat(parentSelector, ":hover:not(").concat(selectors, ")");
+  };
+  var _ = function _(selectors) {
+    return "".concat(parentSelector).concat(selectors);
+  };
+  return {
+    outline: {
+      show: is(selectors(hover, focus, isOpen, isEntered)),
+      hover: hoverNot(selectors(focus, focusWithin, isOpen)),
+      focusTrapped: _(isEntered)
+    },
+    actions: {
+      hoverZone: hoverNot(selectors(focus, isOpen)),
+      hoverColor: hoverNot(selectors(focus, focusWithin, isOpen)),
+      showAnimation: is(selectors(hover, focus, isOpen, isClosing)),
+      hoverAnimation: hoverNot(selectors(focus, isOpen, isClosing))
+    },
+    header: {
+      focus: is(selectors(focus, focusWithin, headerActionsOpen)),
+      // :focus-within here is primarily intended for when the column actions button has been clicked twice
+      focusTrapped: _(isEntered),
+      hideActions: not(selectors(hover, focusWithin, headerActionsOpen))
+    }
+  };
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "12y9ria-euiDataGridRowCell__content",
+  styles: "overflow:hidden;label:euiDataGridRowCell__content;"
+} : {
+  name: "12y9ria-euiDataGridRowCell__content",
+  styles: "overflow:hidden;label:euiDataGridRowCell__content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiDataGridRowCellStyles = function euiDataGridRowCellStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var cellOutline = euiDataGridCellOutlineStyles(euiThemeContext);
+  var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors(),
+    outlineSelectors = _euiDataGridCellOutli.outline;
+  return {
+    euiDataGridRowCell: /*#__PURE__*/css("position:relative;", outlineSelectors.show, "{", cellOutline.focusStyles, ";}", outlineSelectors.hover, "{", cellOutline.hoverStyles, ";}", outlineSelectors.focusTrapped, "{", cellOutline.hoverStyles, ";}&>[data-focus-lock-disabled]{", logicalCSS('height', '100%'), ";}&:where(.euiDataGridRowCell--numeric, .euiDataGridRowCell--currency){", logicalTextAlignCSS('right'), ";}&:where(.euiDataGridRowCell--uppercase){text-transform:uppercase;}&:where(.euiDataGridRowCell--lowercase){text-transform:lowercase;}&:where(.euiDataGridRowCell--capitalize){text-transform:capitalize;};label:euiDataGridRowCell;"),
+    content: {
+      euiDataGridRowCell__content: _ref,
+      autoHeight: /*#__PURE__*/css(logicalCSS('height', 'auto'), ";;label:autoHeight;"),
+      defaultHeight: /*#__PURE__*/css(logicalCSS('height', '100%'), ";;label:defaultHeight;"),
+      // Control columns should be vertically centered with the *first line* of text
+      // for both single and multi-line heights (see https://github.com/elastic/eui/issues/7897)
+      controlColumn: /*#__PURE__*/css("display:inline-flex;align-items:start;gap:", euiTheme.size.xxs, ";vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;.euiDataGrid--fontSizeSmall &:where(.euiDataGridRowCell__content--defaultHeight){", logicalCSS('height', '100%'), " align-items:center;}.euiCheckbox:not(:has(label)){display:inline;.euiCheckbox__square{display:inline-flex;vertical-align:text-bottom;@supports (vertical-align: -moz-middle-with-baseline){vertical-align:sub;}}};label:controlColumn;")
+    }
+  };
+};

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

@@ -18,11 +18,13 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  */
 
 import React, { useMemo, useCallback } from 'react';
+import { useEuiMemoizedStyles } from '../../../../services';
 import { EuiI18n } from '../../../i18n';
 import { EuiButtonIcon } from '../../../button/button_icon';
 import { EuiButtonEmpty } from '../../../button/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
 import { EuiPopoverFooter } from '../../../popover';
+import { euiDataGridCellActionsStyles } from './data_grid_cell_actions.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
   var onExpandClick = _ref.onExpandClick,
@@ -30,6 +32,8 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
     column = _ref.column,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex;
+  var styles = useEuiMemoizedStyles(euiDataGridCellActionsStyles);
+
   // Note: The cell expand button/expansion popover is *always* rendered if
   // column.cellActions is present (regardless of column.isExpandable).
   // This is because cell actions are not otherwise accessible to keyboard
@@ -41,6 +45,7 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
       default: "Click or hit enter to interact with cell content"
     }, function (expandButtonTitle) {
       return ___EmotionJSX(EuiButtonIcon, {
+        css: styles.euiDataGridRowCell__actionButtonIcon,
         className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
         "data-test-subj": "euiDataGridCellExpandButton",
         display: "fill",
@@ -52,12 +57,13 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
         title: expandButtonTitle
       });
     });
-  }, [onExpandClick]);
+  }, [onExpandClick, styles]);
   var additionalButtons = useMemo(function () {
     if (!column || !Array.isArray(column === null || column === void 0 ? void 0 : column.cellActions)) return [];
     var ButtonComponent = function ButtonComponent(props) {
       return ___EmotionJSX(EuiButtonIcon, _extends({}, props, {
         "aria-hidden": true,
+        css: styles.euiDataGridRowCell__actionButtonIcon,
         className: "euiDataGridRowCell__actionButtonIcon"
         // Don't allow consumers to override sizes or colors for cell actions on hover/focus
         ,
@@ -82,8 +88,12 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
         isExpanded: false
       });
     });
-  }, [column, colIndex, rowIndex]);
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+  }, [column, colIndex, rowIndex, styles]);
+  return ___EmotionJSX("div", {
+    css: styles.euiDataGridRowCell__actionsWrapper,
+    className: "euiDataGridRowCell__actionsWrapper"
+  }, ___EmotionJSX("div", {
+    css: styles.euiDataGridRowCell__actions,
     className: "euiDataGridRowCell__actions"
   }, [].concat(_toConsumableArray(additionalButtons), [expandButton])), ___EmotionJSX("div", {
     ref: popoverAnchorRef,