Convert lineCount rows to use this.props.setRowHeight state from data…

…_grid_body

- IIRC this is what the state was originally used for; might as well go back to using it for lineCount

src/components/datagrid/body/data_grid_cell.tsx

@@ -213,6 +213,27 @@ export class EuiDataGridCell extends Component<
     }
   };
 
+  recalculateLineCountHeight = () => {
+    if (!this.props.setRowHeight) return; // setRowHeight is only passed by data_grid_body into one cell per row
+    if (!this.cellContentsRef) return;
+
+    const { rowHeightUtils, rowHeightsOptions, rowIndex } = this.props;
+    const rowHeightOption = rowHeightUtils?.getRowHeightOption(
+      rowIndex,
+      rowHeightsOptions
+    );
+    const lineCount = rowHeightUtils?.getLineCount(rowHeightOption);
+
+    if (lineCount) {
+      const height = rowHeightUtils!.calculateHeightForLineCount(
+        this.cellContentsRef,
+        lineCount
+      );
+
+      this.props.setRowHeight(height);
+    }
+  };
+
   componentDidMount() {
     this.unsubscribeCell = this.context.onFocusUpdate(
       [this.props.colIndex, this.props.visibleRowIndex],
@@ -290,7 +311,10 @@ export class EuiDataGridCell extends Component<
   setCellContentsRef = (ref: HTMLDivElement | null) => {
     this.cellContentsRef = ref;
     if (ref && hasResizeObserver) {
-      this.contentObserver = this.observeHeight(ref, this.recalculateRowHeight);
+      this.contentObserver = this.observeHeight(ref, () => {
+        this.recalculateRowHeight();
+        this.recalculateLineCountHeight();
+      });
     } else if (this.contentObserver) {
       this.contentObserver.disconnect();
     }

src/components/datagrid/row_height_utils.ts

@@ -175,9 +175,16 @@ export class RowHeightUtils {
     );
   }
 
-  calculateHeightForLineCount(lineCount: number) {
+  getLineCount(option?: EuiDataGridRowHeightOption) {
+    return isObject(option) ? option.lineCount : undefined;
+  }
+
+  calculateHeightForLineCount(cellRef: HTMLElement, lineCount: number) {
+    const computedStyles = window.getComputedStyle(cellRef, null);
+    const lineHeight = parseInt(computedStyles.lineHeight, 10) || 24;
+
     return Math.ceil(
-      lineCount * this.styles.lineHeight +
+      lineCount * lineHeight +
         this.styles.paddingTop +
         this.styles.paddingBottom
     );
@@ -190,9 +197,8 @@ export class RowHeightUtils {
   ) {
     if (isObject(heightOption)) {
       if (heightOption.lineCount) {
-        return this.calculateHeightForLineCount(heightOption.lineCount);
+        return defaultHeight; // lineCount height is set in minRowHeight state in grid_row_body
       }
-
       if (heightOption.height) {
         return Math.max(heightOption.height, defaultHeight);
       }
@@ -219,9 +225,10 @@ export class RowHeightUtils {
       return {};
     }
 
-    if (isObject(height) && height.lineCount) {
+    const lineCount = this.getLineCount(height);
+    if (lineCount) {
       return {
-        WebkitLineClamp: height.lineCount,
+        WebkitLineClamp: lineCount,
         display: '-webkit-box',
         WebkitBoxOrient: 'vertical',
         height: '100%',