Fixes imports, rerenders, and overflow.

Author: natalyjazzviolin

src/components/Grid/Cell.tsx

@@ -59,12 +59,12 @@ export const Cell = memo(
     const cellRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-      if (rowCount !== 1) return;
+      if (!rowAutoHeight) return;
       else if (cellRef.current) {
         const height = cellRef.current.getBoundingClientRect().height;
         updateRowHeight(rowIndex, height);
       }
-    }, [rowCount, updateRowHeight, rowIndex]);
+    }, [updateRowHeight, rowIndex, rowAutoHeight]);
 
     const styleWithHeight = {
       ...style,

src/components/Grid/Grid.test.tsx

@@ -2,7 +2,6 @@ import { CellProps, Grid, GridProps } from "@/components";
 import { renderCUI } from "@/utils/test-utils";
 import { SelectionFocus } from "./types";
 import { ReactNode } from "react";
-import { act } from "react-dom/test-utils";
 
 const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, ...props }) => {
   let content = `${rowIndex} ${columnIndex} - ${type}`;

src/components/Grid/Grid.tsx

@@ -227,8 +227,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
 
     const updateRowHeight = useCallback(
       (rowIndex: number, height: number) => {
-        if (rowCount !== 1) return;
-
+        if (!rowAutoHeight) return;
         const prevHeight = rowHeightsRef.current.get(rowIndex) ?? 0;
         if (height > prevHeight) {
           rowHeightsRef.current.set(rowIndex, height);
@@ -237,7 +236,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
           }
         }
       },
-      [rowCount]
+      [rowAutoHeight]
     );
 
     const customOnCopy: () => Promise<void> = useMemo(() => {

src/components/Grid/Header.tsx

@@ -153,7 +153,6 @@ const Column = ({
         $isLastRow={false}
         $isFirstRow
         $height={height}
-        $overflow="hidden"
         data-grid-row={-1}
         data-grid-column={columnIndex}
         data-selected={isSelected}

src/components/Grid/RowNumberColumn.tsx

@@ -103,7 +103,6 @@ const RowNumber = ({
         $isSelectedLeft={isSelected}
         $isSelectedTop={isSelectedTop}
         $rowAutoHeight={rowAutoHeight}
-        $overflow="hidden"
         data-selected={isSelected}
         data-grid-row={currentRowIndex}
         data-grid-column={-1}

src/components/Grid/StyledCell.tsx

@@ -14,7 +14,6 @@ export const StyledCell = styled.div<{
   $type?: "body" | "header";
   $showBorder: boolean;
   $rowAutoHeight?: boolean;
-  $overflow?: string;
 }>`
   display: block;
   text-align: left;
@@ -37,11 +36,10 @@ export const StyledCell = styled.div<{
     $type = "body",
     $showBorder,
     $rowAutoHeight,
-    $overflow,
   }) => `
     height: ${$rowAutoHeight ? "100%" : `${$height}px`};
     min-height: ${$rowAutoHeight ? "auto" : ""};
-    overflow-y: ${$overflow ? $overflow : "auto"};
+    overflow-y: ${$rowAutoHeight ? "auto" : ""};
     background: ${theme.click.grid[$type].cell.color.background[$selectionType]};
     color: ${
       $type === "header"