[Emotion] Convert final EuiDataGrid cell styles (Part 5)

packages/eui/src/components/datagrid/body/cell/data_grid_cell.test.tsx

@@ -13,6 +13,7 @@ import { render } from '../../../../test/rtl';
 import { RowHeightUtils } from '../../utils/__mocks__/row_heights';
 import { mockFocusContext } from '../../utils/__mocks__/focus_context';
 import { DataGridFocusContext } from '../../utils/focus';
+import type { EuiDataGridProps } from '../../data_grid_types';
 
 import { EuiDataGridCell } from './data_grid_cell';
 
@@ -104,6 +105,61 @@ describe('EuiDataGridCell', () => {
     expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(1);
   });
 
+  describe('setCellProps', () => {
+    it('correctly merges props that also have EUI values', () => {
+      const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+        setCellProps,
+      }) => {
+        useEffect(() => {
+          setCellProps({
+            style: { backgroundColor: 'black' },
+            css: { color: 'white' },
+            'data-test-subj': 'test',
+            className: 'helloWorld',
+          });
+        }, [setCellProps]);
+        return 'cell render';
+      };
+
+      const { getByTestSubject } = render(
+        <EuiDataGridCell {...requiredProps} renderCellValue={RenderCellValue} />
+      );
+
+      const cell = getByTestSubject('dataGridRowCell test'); // should have merged `data-test-subj` correctly
+      expect(cell).toHaveClass('euiDataGridRowCell helloWorld'); // should have merged `className` correctly
+      expect(cell).toHaveStyle('background-color: rgb(0, 0, 0)'); // should have merged `style` correctly
+      expect(cell).toHaveStyle('color: rgb(255, 255, 255)'); // should have applied consumer `css`
+      expect(cell.className).toMatch(/css-[\w\d]+-euiDataGridRowCell/); // should not have overridden EUI `css`
+    });
+
+    it('does not allow overriding certain EUI props/values', () => {
+      const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+        setCellProps,
+      }) => {
+        useEffect(() => {
+          setCellProps({
+            // @ts-expect-error - deliberately passing omitted props
+            role: 'ignored',
+            tabIndex: 2,
+            'aria-rowindex': 99,
+            'data-gridcell-visible-row-index': -200,
+          });
+        }, [setCellProps]);
+        return 'cell render';
+      };
+
+      const { container } = render(
+        <EuiDataGridCell {...requiredProps} renderCellValue={RenderCellValue} />
+      );
+
+      const cell = container.firstElementChild;
+      expect(cell).toHaveAttribute('role', 'gridcell');
+      expect(cell).toHaveAttribute('tabIndex', '-1');
+      expect(cell).toHaveAttribute('aria-rowindex', '1');
+      expect(cell).toHaveAttribute('data-gridcell-visible-row-index', '0');
+    });
+  });
+
   describe('shouldComponentUpdate', () => {
     let shouldComponentUpdate: jest.SpyInstance;
     let component: ReactWrapper;
@@ -489,7 +545,9 @@ describe('EuiDataGridCell', () => {
     });
 
     it('allows overriding column.isExpandable with setCellProps({ isExpandable })', () => {
-      const RenderCellValue = ({ setCellProps }: any) => {
+      const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+        setCellProps,
+      }) => {
         useEffect(() => {
           setCellProps({ isExpandable: false });
         }, [setCellProps]);

packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx

@@ -16,17 +16,15 @@ import React, {
   KeyboardEvent,
   memo,
   useMemo,
+  forwardRef,
   MutableRefObject,
   ReactElement,
+  HTMLAttributes,
 } from 'react';
 import { createPortal } from 'react-dom';
 
 import { IS_JEST_ENVIRONMENT } from '../../../../utils';
-import {
-  keys,
-  useEuiMemoizedStyles,
-  RenderWithEuiStylesMemoizer,
-} from '../../../../services';
+import { keys, useEuiMemoizedStyles } from '../../../../services';
 import { EuiScreenReaderOnly } from '../../../accessibility';
 import { EuiI18n } from '../../../i18n';
 import { EuiTextBlockTruncate } from '../../../text_truncate';
@@ -636,58 +634,47 @@ export class EuiDataGridCell extends Component<
 
     return (
       <RenderCellInRow row={row}>
-        <RenderWithEuiStylesMemoizer>
-          {(stylesMemoizer) => {
-            const styles = stylesMemoizer(euiDataGridRowCellStyles);
-            const cssStyles = [styles.euiDataGridRowCell, cellProps?.css];
-            return (
-              <div
-                role="gridcell"
-                aria-rowindex={ariaRowIndex}
-                tabIndex={this.state.isFocused ? 0 : -1}
-                ref={this.cellRef}
-                {...cellProps}
-                css={cssStyles}
-                // 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}
-              >
-                <HandleInteractiveChildren
-                  cellEl={this.cellRef.current}
-                  updateCellFocusContext={this.updateCellFocusContext}
-                  renderFocusTrap={!isExpandable}
-                >
-                  <EuiDataGridCellContent
-                    {...rest}
-                    setCellProps={this.setCellProps}
-                    column={column}
-                    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}
-                    rowIndex={rowIndex}
-                    colIndex={colIndex}
-                  />
-                </HandleInteractiveChildren>
-              </div>
-            );
-          }}
-        </RenderWithEuiStylesMemoizer>
+        <GridCellDiv
+          {...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}
+          onKeyDown={this.handleCellKeyDown}
+          onMouseEnter={this.onMouseEnter}
+          onMouseLeave={this.onMouseLeave}
+        >
+          <HandleInteractiveChildren
+            cellEl={this.cellRef.current}
+            updateCellFocusContext={this.updateCellFocusContext}
+            renderFocusTrap={!isExpandable}
+          >
+            <EuiDataGridCellContent
+              {...rest}
+              setCellProps={this.setCellProps}
+              column={column}
+              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}
+              rowIndex={rowIndex}
+              colIndex={colIndex}
+            />
+          </HandleInteractiveChildren>
+        </GridCellDiv>
       </RenderCellInRow>
     );
   }
@@ -725,3 +712,35 @@ const RenderTruncatedCellContent: FunctionComponent<{
   );
 });
 RenderTruncatedCellContent.displayName = 'RenderTruncatedCellContent';
+
+/**
+ * Function component utilities for easier hook usage
+ */
+
+const GridCellDiv = memo(
+  forwardRef<
+    HTMLDivElement,
+    HTMLAttributes<HTMLDivElement> & {
+      columnId: string;
+      columnIndex: number;
+      rowIndex: number;
+      visibleRowIndex: number;
+    }
+  >(({ columnId, columnIndex, rowIndex, visibleRowIndex, ...props }, ref) => {
+    const styles = useEuiMemoizedStyles(euiDataGridRowCellStyles);
+    return (
+      <div
+        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';

packages/eui/src/components/datagrid/data_grid_types.ts

@@ -546,7 +546,10 @@ interface SharedRenderCellElementProps {
 }
 
 export type EuiDataGridSetCellProps = CommonProps &
-  HTMLAttributes<HTMLDivElement> & {
+  Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'role' | 'tabIndex' | 'aria-rowindex'
+  > & {
     isExpandable?: boolean;
   };