@clickhouse/click-ui 0.0.194 → 0.0.196

package/dist/click-ui.es.js

@@ -7956,7 +7956,7 @@ DropdownTrigger.displayName = "DropdownTrigger";
 Dropdown.Trigger = DropdownTrigger;
 const DropdownMenuContent = styled(GenericMenuPanel).withConfig({
   componentId: "sc-18bhwbw-2"
-})(["min-width:", ";flex-direction:column;z-index:1;overflow-y:scroll;max-height:calc( (var(--radix-", "-content-available-height) - 100px) );"], ({
+})(["min-width:", ";flex-direction:column;z-index:1;overflow-y:auto;max-height:calc( (var(--radix-", "-content-available-height) - 100px) );"], ({
   theme: theme2
 }) => theme2.click.genericMenu.item.size.minWidth, ({
   $type
@@ -18143,12 +18143,9 @@ const StyledCell = styled.div.withConfig({
   $selectionType,
   $height,
   $type = "body",
-  $showBorder,
-  $rowAutoHeight
+  $showBorder
 }) => `
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
-    min-height: ${$rowAutoHeight ? "auto" : ""};
-    overflow-y: ${$rowAutoHeight ? "auto" : ""};
+    height: ${$height}px;
     background: ${theme2.click.grid[$type].cell.color.background[$selectionType]};
     color: ${$type === "header" ? theme2.click.grid.header.cell.color.title[$selectionType] : theme2.click.grid.body.cell.color.text[$selectionType]};
     font: ${theme2.click.grid.cell.text.default};
@@ -18169,7 +18166,6 @@ const StyledCell = styled.div.withConfig({
     ${$isLastColumn ? `
         border-right-color: ${theme2.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
     ` : "border-right: none;"}
-    ${$rowAutoHeight && "border: none;"}
   `, ({
   theme: theme2,
   $isLastRow,
@@ -18177,9 +18173,8 @@ const StyledCell = styled.div.withConfig({
   $selectionType,
   $type = "body",
   $isSelectedTop,
-  $isSelectedLeft,
-  $rowAutoHeight
-}) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || $rowAutoHeight ? `
+  $isSelectedLeft
+}) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) ? `
           &::before {
             content: "";
             position: absolute;
@@ -18191,7 +18186,6 @@ const StyledCell = styled.div.withConfig({
             ${$isSelectedLeft ? `border-left: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
             ${$selectionType === "selectDirect" && $isLastRow ? `border-bottom: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
             ${$selectionType === "selectDirect" && $isLastColumn ? `border-right: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$rowAutoHeight && "border: none;"}
           }
         ` : "");
 const RowNumberColumnContainer = styled.div.withConfig({
@@ -18202,7 +18196,7 @@ const RowNumberColumnContainer = styled.div.withConfig({
 }) => `
     top: ${$height}px;
     width: ${$width}px;
-    height: 100%
+    height: 100%;
   `, ({
   $scrolledHorizontal,
   theme: theme2
@@ -18211,11 +18205,10 @@ const RowNumberCell = styled.div.withConfig({
   componentId: "sc-7gbi4d-1"
 })(["position:absolute;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;", ""], ({
   $height,
-  $rowNumber,
-  $rowAutoHeight
+  $rowNumber
 }) => `
     top: ${$height * $rowNumber}px;
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
+    height: ${$height}px;
   `);
 const RowNumber = ({
   rowIndex,
@@ -18224,8 +18217,7 @@ const RowNumber = ({
   isLastRow,
   isFirstRow,
   showBorder,
-  rowStart,
-  rowAutoHeight
+  rowStart
 }) => {
   const currentRowIndex = rowIndex + rowStart;
   const selectionType = getSelectionType({
@@ -18238,7 +18230,7 @@ const RowNumber = ({
     type: "row"
   });
   const isSelectedTop = (topSelectionType === "selectDirect" || isSelected) && topSelectionType !== selectionType;
-  return /* @__PURE__ */ jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, $rowAutoHeight: rowAutoHeight, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, $rowAutoHeight: rowAutoHeight, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
+  return /* @__PURE__ */ jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
 };
 const RowNumberColumn = ({
   minRow,
@@ -18251,12 +18243,11 @@ const RowNumberColumn = ({
   showHeader,
   scrolledHorizontal,
   rowStart = 0,
-  showBorder,
-  rowAutoHeight
+  showBorder
 }) => {
-  return /* @__PURE__ */ jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, $rowAutoHeight: rowAutoHeight, children: Array.from({
+  return /* @__PURE__ */ jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, children: Array.from({
     length: maxRow - minRow + 1
-  }, (_, index2) => minRow + index2).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart, rowAutoHeight }, `row-number-${rowIndex}`)) });
+  }, (_, index2) => minRow + index2).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart }, `row-number-${rowIndex}`)) });
 };
 function isObject$a(value) {
   var type = typeof value;
@@ -18638,7 +18629,7 @@ const RowColumnContainer = styled(HeaderCellContainer).withConfig({
 }) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme2.click.grid.header.cell.color.stroke.default};` : "");
 const RowColumn = styled(StyledCell).withConfig({
   componentId: "sc-1oadqc8-4"
-})(["width:100%;text-align:right;overflow:hidden;"]);
+})(["width:100%;text-align:right;"]);
 const Column = ({
   columnIndex,
   cell,
@@ -19067,9 +19058,7 @@ const Cell = memo(({
     showRowNumber,
     showHeader,
     rowHeight,
-    rowStart,
-    rowAutoHeight,
-    updateRowHeight
+    rowStart
   } = data;
   const currentRowIndex = rowIndex + rowStart;
   const {
@@ -19098,21 +19087,7 @@ const Cell = memo(({
   const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
   const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
   const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
-  const cellRef = useRef(null);
-  useEffect(() => {
-    if (!rowAutoHeight) {
-      return;
-    }
-    if (cellRef.current) {
-      const height = cellRef.current.getBoundingClientRect().height;
-      updateRowHeight(rowIndex, height);
-    }
-  }, [updateRowHeight, rowIndex, rowAutoHeight]);
-  const styleWithHeight = {
-    ...style,
-    height: "auto"
-  };
-  return /* @__PURE__ */ jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
+  return /* @__PURE__ */ jsx("div", { style, "data-row": currentRowIndex, "data-column": columnIndex, children: /* @__PURE__ */ jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, ...props }) });
 }, areEqual);
 var reactDomServerLegacy_browser_production_min = {};
 /**
@@ -33322,7 +33297,6 @@ const Grid = forwardRef(({
   onContextMenu: onContextMenuProp,
   forwardedGridRef,
   onItemsRendered: onItemsRenderedProp,
-  rowAutoHeight,
   ...props
 }, forwardedRef) => {
   const [focus, setFocus] = useState(focusProp ?? {
@@ -33366,25 +33340,6 @@ const Grid = forwardRef(({
       }
     }
   }, [cell, columnCount, focus, focusProp, rowCount, selection, showToast, onCopyCallback]);
-  const rowHeightsRef = useRef(/* @__PURE__ */ new Map());
-  const getRowHeight2 = useCallback((index2) => {
-    if (rowAutoHeight && rowHeightsRef.current.get(index2)) {
-      return rowHeightsRef.current.get(index2) + rowHeight;
-    }
-    return rowHeight;
-  }, [rowHeight, rowAutoHeight]);
-  const updateRowHeight = useCallback((rowIndex, height) => {
-    if (!rowAutoHeight) {
-      return;
-    }
-    const prevHeight = rowHeightsRef.current.get(rowIndex) ?? 0;
-    if (height > prevHeight) {
-      rowHeightsRef.current.set(rowIndex, height);
-      if (gridRef.current) {
-        gridRef.current.resetAfterRowIndex(rowIndex);
-      }
-    }
-  }, [rowAutoHeight]);
   const customOnCopy = useMemo(() => {
     const result = async () => {
       if (onCopyProp) {
@@ -33548,10 +33503,7 @@ const Grid = forwardRef(({
     rowHeight,
     headerHeight,
     rowNumberWidth,
-    rowStart,
-    rowAutoHeight,
-    updateRowHeight,
-    getRowHeight: getRowHeight2
+    rowStart
   };
   const InnerElementType = forwardRef(({
     children,
@@ -33560,7 +33512,7 @@ const Grid = forwardRef(({
     const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
     return /* @__PURE__ */ jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
       /* @__PURE__ */ jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
-      showRowNumber && /* @__PURE__ */ jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder, rowAutoHeight }),
+      showRowNumber && /* @__PURE__ */ jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder }),
       showHeader && /* @__PURE__ */ jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
     ] });
   });
@@ -33813,16 +33765,11 @@ const Grid = forwardRef(({
     const width = columnWidth(args.columnIndex);
     return /* @__PURE__ */ jsx(Cell, { ...args, width });
   };
-  useEffect(() => {
-    if (gridRef.current) {
-      gridRef.current.resetAfterRowIndex(0);
-    }
-  }, [rowCount, columnCount]);
   return /* @__PURE__ */ jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
     /* @__PURE__ */ jsx(ContextMenuTrigger, { as: ContextMenu.Trigger, ref: mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsx(AutoSizer, { onResize, children: ({
       height,
       width
-    }) => /* @__PURE__ */ jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: getRowHeight2, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
+    }) => /* @__PURE__ */ jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
     /* @__PURE__ */ jsx(ContextMenu.Content, { children: menuOptions.map((option2, index2) => /* @__PURE__ */ jsx(ContextMenu.Item, { onSelect: option2.onSelect, children: option2.label }, `grid-${index2}`)) })
   ] });
 });

package/dist/click-ui.umd.js

@@ -7971,7 +7971,7 @@ var __publicField = (obj, key, value) => {
   Dropdown.Trigger = DropdownTrigger;
   const DropdownMenuContent = styledComponents.styled(GenericMenuPanel).withConfig({
     componentId: "sc-18bhwbw-2"
-  })(["min-width:", ";flex-direction:column;z-index:1;overflow-y:scroll;max-height:calc( (var(--radix-", "-content-available-height) - 100px) );"], ({
+  })(["min-width:", ";flex-direction:column;z-index:1;overflow-y:auto;max-height:calc( (var(--radix-", "-content-available-height) - 100px) );"], ({
     theme: theme2
   }) => theme2.click.genericMenu.item.size.minWidth, ({
     $type
@@ -18158,12 +18158,9 @@ var __publicField = (obj, key, value) => {
     $selectionType,
     $height,
     $type = "body",
-    $showBorder,
-    $rowAutoHeight
+    $showBorder
   }) => `
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
-    min-height: ${$rowAutoHeight ? "auto" : ""};
-    overflow-y: ${$rowAutoHeight ? "auto" : ""};
+    height: ${$height}px;
     background: ${theme2.click.grid[$type].cell.color.background[$selectionType]};
     color: ${$type === "header" ? theme2.click.grid.header.cell.color.title[$selectionType] : theme2.click.grid.body.cell.color.text[$selectionType]};
     font: ${theme2.click.grid.cell.text.default};
@@ -18184,7 +18181,6 @@ var __publicField = (obj, key, value) => {
     ${$isLastColumn ? `
         border-right-color: ${theme2.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
     ` : "border-right: none;"}
-    ${$rowAutoHeight && "border: none;"}
   `, ({
     theme: theme2,
     $isLastRow,
@@ -18192,9 +18188,8 @@ var __publicField = (obj, key, value) => {
     $selectionType,
     $type = "body",
     $isSelectedTop,
-    $isSelectedLeft,
-    $rowAutoHeight
-  }) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || $rowAutoHeight ? `
+    $isSelectedLeft
+  }) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) ? `
           &::before {
             content: "";
             position: absolute;
@@ -18206,7 +18201,6 @@ var __publicField = (obj, key, value) => {
             ${$isSelectedLeft ? `border-left: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
             ${$selectionType === "selectDirect" && $isLastRow ? `border-bottom: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
             ${$selectionType === "selectDirect" && $isLastColumn ? `border-right: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$rowAutoHeight && "border: none;"}
           }
         ` : "");
   const RowNumberColumnContainer = styledComponents.styled.div.withConfig({
@@ -18217,7 +18211,7 @@ var __publicField = (obj, key, value) => {
   }) => `
     top: ${$height}px;
     width: ${$width}px;
-    height: 100%
+    height: 100%;
   `, ({
     $scrolledHorizontal,
     theme: theme2
@@ -18226,11 +18220,10 @@ var __publicField = (obj, key, value) => {
     componentId: "sc-7gbi4d-1"
   })(["position:absolute;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;", ""], ({
     $height,
-    $rowNumber,
-    $rowAutoHeight
+    $rowNumber
   }) => `
     top: ${$height * $rowNumber}px;
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
+    height: ${$height}px;
   `);
   const RowNumber = ({
     rowIndex,
@@ -18239,8 +18232,7 @@ var __publicField = (obj, key, value) => {
     isLastRow,
     isFirstRow,
     showBorder,
-    rowStart,
-    rowAutoHeight
+    rowStart
   }) => {
     const currentRowIndex = rowIndex + rowStart;
     const selectionType = getSelectionType({
@@ -18253,7 +18245,7 @@ var __publicField = (obj, key, value) => {
       type: "row"
     });
     const isSelectedTop = (topSelectionType === "selectDirect" || isSelected) && topSelectionType !== selectionType;
-    return /* @__PURE__ */ jsxRuntime.jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, $rowAutoHeight: rowAutoHeight, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, $rowAutoHeight: rowAutoHeight, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
   };
   const RowNumberColumn = ({
     minRow,
@@ -18266,12 +18258,11 @@ var __publicField = (obj, key, value) => {
     showHeader,
     scrolledHorizontal,
     rowStart = 0,
-    showBorder,
-    rowAutoHeight
+    showBorder
   }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, $rowAutoHeight: rowAutoHeight, children: Array.from({
+    return /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, children: Array.from({
       length: maxRow - minRow + 1
-    }, (_, index2) => minRow + index2).map((rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart, rowAutoHeight }, `row-number-${rowIndex}`)) });
+    }, (_, index2) => minRow + index2).map((rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, showBorder, rowStart }, `row-number-${rowIndex}`)) });
   };
   function isObject$a(value) {
     var type = typeof value;
@@ -18653,7 +18644,7 @@ var __publicField = (obj, key, value) => {
   }) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme2.click.grid.header.cell.color.stroke.default};` : "");
   const RowColumn = styledComponents.styled(StyledCell).withConfig({
     componentId: "sc-1oadqc8-4"
-  })(["width:100%;text-align:right;overflow:hidden;"]);
+  })(["width:100%;text-align:right;"]);
   const Column = ({
     columnIndex,
     cell,
@@ -19082,9 +19073,7 @@ var __publicField = (obj, key, value) => {
       showRowNumber,
       showHeader,
       rowHeight,
-      rowStart,
-      rowAutoHeight,
-      updateRowHeight
+      rowStart
     } = data;
     const currentRowIndex = rowIndex + rowStart;
     const {
@@ -19113,21 +19102,7 @@ var __publicField = (obj, key, value) => {
     const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
     const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
     const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
-    const cellRef = React.useRef(null);
-    React.useEffect(() => {
-      if (!rowAutoHeight) {
-        return;
-      }
-      if (cellRef.current) {
-        const height = cellRef.current.getBoundingClientRect().height;
-        updateRowHeight(rowIndex, height);
-      }
-    }, [updateRowHeight, rowIndex, rowAutoHeight]);
-    const styleWithHeight = {
-      ...style,
-      height: "auto"
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style, "data-row": currentRowIndex, "data-column": columnIndex, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, ...props }) });
   }, areEqual);
   var reactDomServerLegacy_browser_production_min = {};
   /**
@@ -33337,7 +33312,6 @@ var __publicField = (obj, key, value) => {
     onContextMenu: onContextMenuProp,
     forwardedGridRef,
     onItemsRendered: onItemsRenderedProp,
-    rowAutoHeight,
     ...props
   }, forwardedRef) => {
     const [focus, setFocus] = React.useState(focusProp ?? {
@@ -33381,25 +33355,6 @@ var __publicField = (obj, key, value) => {
         }
       }
     }, [cell, columnCount, focus, focusProp, rowCount, selection, showToast, onCopyCallback]);
-    const rowHeightsRef = React.useRef(/* @__PURE__ */ new Map());
-    const getRowHeight = React.useCallback((index2) => {
-      if (rowAutoHeight && rowHeightsRef.current.get(index2)) {
-        return rowHeightsRef.current.get(index2) + rowHeight;
-      }
-      return rowHeight;
-    }, [rowHeight, rowAutoHeight]);
-    const updateRowHeight = React.useCallback((rowIndex, height) => {
-      if (!rowAutoHeight) {
-        return;
-      }
-      const prevHeight = rowHeightsRef.current.get(rowIndex) ?? 0;
-      if (height > prevHeight) {
-        rowHeightsRef.current.set(rowIndex, height);
-        if (gridRef.current) {
-          gridRef.current.resetAfterRowIndex(rowIndex);
-        }
-      }
-    }, [rowAutoHeight]);
     const customOnCopy = React.useMemo(() => {
       const result = async () => {
         if (onCopyProp) {
@@ -33563,10 +33518,7 @@ var __publicField = (obj, key, value) => {
       rowHeight,
       headerHeight,
       rowNumberWidth,
-      rowStart,
-      rowAutoHeight,
-      updateRowHeight,
-      getRowHeight
+      rowStart
     };
     const InnerElementType = React.forwardRef(({
       children,
@@ -33575,7 +33527,7 @@ var __publicField = (obj, key, value) => {
       const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
       return /* @__PURE__ */ jsxRuntime.jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
-        showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder, rowAutoHeight }),
+        showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder }),
         showHeader && /* @__PURE__ */ jsxRuntime.jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
       ] });
     });
@@ -33828,16 +33780,11 @@ var __publicField = (obj, key, value) => {
       const width = columnWidth(args.columnIndex);
       return /* @__PURE__ */ jsxRuntime.jsx(Cell, { ...args, width });
     };
-    React.useEffect(() => {
-      if (gridRef.current) {
-        gridRef.current.resetAfterRowIndex(0);
-      }
-    }, [rowCount, columnCount]);
     return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { as: ContextMenu.Trigger, ref: mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsxRuntime.jsx(AutoSizer, { onResize, children: ({
         height,
         width
-      }) => /* @__PURE__ */ jsxRuntime.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: getRowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
+      }) => /* @__PURE__ */ jsxRuntime.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.Content, { children: menuOptions.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.Item, { onSelect: option.onSelect, children: option.label }, `grid-${index2}`)) })
     ] });
   });

package/dist/components/Grid/Header.d.ts

@@ -19,5 +19,5 @@ interface HeaderProps {
     scrolledHorizontal: boolean;
     resizingState: ResizingState;
 }
-declare const Header: ({ scrolledVertical, scrolledHorizontal, showRowNumber, rowNumberWidth, minColumn, maxColumn, height, getColumnWidth, cell, columnCount, getSelectionType, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ scrolledVertical, scrolledHorizontal, showRowNumber, rowNumberWidth, minColumn, maxColumn, height, getColumnWidth, cell, columnCount, getSelectionType, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/components/Grid/RowNumberColumn.d.ts

@@ -12,7 +12,6 @@ interface RowNumberColumnProps {
     scrolledHorizontal: boolean;
     rowStart: number;
     showBorder: boolean;
-    rowAutoHeight?: boolean;
 }
-declare const RowNumberColumn: ({ minRow, maxRow, rowHeight, headerHeight, rowWidth, getSelectionType, rowCount, showHeader, scrolledHorizontal, rowStart, showBorder, rowAutoHeight, }: RowNumberColumnProps) => import("react/jsx-runtime").JSX.Element;
+declare const RowNumberColumn: ({ minRow, maxRow, rowHeight, headerHeight, rowWidth, getSelectionType, rowCount, showHeader, scrolledHorizontal, rowStart, showBorder, }: RowNumberColumnProps) => import("react/jsx-runtime").JSX.Element;
 export default RowNumberColumn;

package/dist/components/Grid/StyledCell.d.ts

@@ -12,5 +12,4 @@ export declare const StyledCell: import('styled-components/dist/types').IStyledC
     $height: number;
     $type?: "body" | "header";
     $showBorder: boolean;
-    $rowAutoHeight?: boolean;
 }>> & string;

package/dist/components/Grid/types.d.ts

@@ -107,9 +107,6 @@ export interface ItemDataType {
     headerHeight: number;
     rowNumberWidth: number;
     rowStart: number;
-    rowAutoHeight?: boolean;
-    updateRowHeight: (rowIndex: number, height: number) => void;
-    getRowHeight: (index: number) => number;
 }
 export interface GridContextMenuItemProps extends Omit<ContextMenuItemProps, "children"> {
     label: ReactNode;
@@ -140,7 +137,6 @@ export interface GridProps extends Omit<VariableSizeGridProps, "height" | "width
     onCopyCallback?: (copied: boolean) => void;
     onContextMenu?: MouseEventHandler<HTMLDivElement>;
     forwardedGridRef?: MutableRefObject<VariableSizeGrid>;
-    rowAutoHeight?: boolean;
 }
 export type ResizerPosition = {
     left: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.194",
+  "version": "0.0.196",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",