@lotics/ui 2.6.0 → 3.0.0

package/src/grid/engine.tsx

@@ -1,1042 +0,0 @@
-/// <reference path="../react_native.d.ts" />
-// Force-load the react-native type augmentation file so consumers picking up
-// the grid via subpath imports (e.g. `@lotics/ui/grid/data_grid`) see the
-// web-only `hovered`/`outline`/`cursor` types — they otherwise wouldn't,
-// because TypeScript doesn't auto-include `.d.ts` files inside dependency
-// directories. The triple-slash reference is the documented mechanism for
-// "include this file as part of the compilation when this one is loaded".
-import styles from "./engine.module.css";
-import React, { memo, useEffect, useImperativeHandle, useMemo, useState } from "react";
-import { GridGroup, GroupPathKey, RowPathKey, groupPathToKey, rowPathToKey } from "./layout";
-import { RecycledColumn } from "./recycling";
-import { useVirtualGrid, GridRef } from "./use_virtual_grid";
-import { SkeletonRow } from "./skeleton_row";
-import { StyleProp, ViewStyle } from "react-native";
-
-export interface GridProps<TRow = unknown> {
-  selectedRows?: Set<RowPathKey>;
-  collapsedRows?: GroupPathKey[] | null;
-  /** Editing cell. Only passed if the row is being edited. */
-  editingCell?: {
-    rowKey: RowPathKey;
-    column: number;
-  } | null;
-  height: number;
-  width: number;
-  footerHeight?: number;
-  renderFooterCell?: (props: GridRenderFooterCellProps) => React.ReactNode;
-  renderRowCell: (props: GridRenderRowCellProps<TRow>) => React.ReactNode;
-  renderRow: (props: GridRenderRowProps<TRow>) => React.ReactNode;
-  renderHeader?: (props: GridRenderHeaderProps) => React.ReactNode;
-  renderFooter?: (props: GridRenderFooterProps) => React.ReactNode;
-  headerHeight?: number;
-  renderHeaderCell?: (props: GridRenderHeaderCellProps) => React.ReactNode;
-  leafRowHeight: number;
-  groups: GridGroup[];
-  groupHeadingHeight?: number;
-  groupSummaryHeight?: number;
-  spacerHeight?: number;
-  renderGroupSummaryCell?: (props: GridRenderGroupSummaryCellProps) => React.ReactNode;
-  renderGroupSummaryRow?: (props: GridRenderGroupSummaryRowProps) => React.ReactNode;
-  renderGroupHeading?: (props: GridRenderGroupHeadingProps) => React.ReactNode;
-  /** Length of the array determines number of columns. Array values correspond to their width. */
-  columns: number[];
-  /** Number of columns to freeze. Default is 0. */
-  frozenColumnCount?: number;
-  /** Maximum width for frozen columns. If frozen columns exceed this, they will be scaled down proportionally. */
-  maxFrozenColumnsWidth?: number;
-  /** Map of rowKey to row data. Used to pass row data to renderRowCell. */
-  rowData?: Map<RowPathKey, TRow>;
-  /** Map of rowKey to row index for selection bounds checking. */
-  rowKeyToIndex?: Map<RowPathKey, number>;
-  /** Selection bounds - min row index (primitive for optimization) */
-  selectionMinRowIndex?: number | null;
-  /** Selection bounds - max row index (primitive for optimization) */
-  selectionMaxRowIndex?: number | null;
-  /** Selection bounds - min column (primitive for optimization) */
-  selectionMinColumn?: number | null;
-  /** Selection bounds - max column (primitive for optimization) */
-  selectionMaxColumn?: number | null;
-  /** Active cell row index (primitive for optimization) */
-  selectionActiveRowIndex?: number | null;
-  /** Active cell column (primitive for optimization) */
-  selectionActiveColumn?: number | null;
-  /** Fill drag source row index (for fill handle) */
-  fillSourceRowIndex?: number | null;
-  /** Fill drag target row index (for fill handle) */
-  fillTargetRowIndex?: number | null;
-  /** Fill drag column (for fill handle) */
-  fillColumn?: number | null;
-  /** Optional function to get background color for a row (used for conditional row coloring) */
-  rowBackgroundColorGetter?: (row: TRow) => string | undefined;
-  /** Fires when scroll reaches near the bottom of the content. Used for infinite scroll pagination. */
-  onEndReached?: () => void;
-  /** Fires when the visible row range changes. Used for viewport-driven page loading. */
-  onVisibleRangeChange?: (rowRange: [number, number]) => void;
-  /** Number of rows to render outside the visible area for smoother scrolling. Default is 0. */
-  rowOverscan?: number;
-  /** Number of columns to render outside the visible area for smoother scrolling. Default is 0. */
-  columnOverscan?: number;
-  style?: StyleProp<ViewStyle>;
-  ref?: React.Ref<GridRef>;
-}
-
-export interface GridRenderGroupSummaryCellProps {
-  groupKey: GroupPathKey;
-  column: number;
-  width: number;
-  height: number;
-}
-
-export interface GridRenderGroupSummaryRowProps {
-  groupKey: GroupPathKey;
-  collapsed: boolean;
-  children: React.ReactNode;
-}
-
-export interface GridRenderHeaderCellProps {
-  column: number;
-  width: number;
-  height: number;
-}
-
-export interface GridRenderFooterCellProps {
-  column: number;
-  width: number;
-  height: number;
-}
-
-export interface GridRenderRowCellProps<TRow = unknown> {
-  rowKey: RowPathKey;
-  row: TRow;
-  column: number;
-  frozen: boolean;
-  editing: boolean;
-  active: boolean;
-  selected: boolean;
-  inSelectedRow: boolean;
-  /** Row index for fill operations */
-  rowIndex: number;
-  /** Whether this cell is the source of a fill operation */
-  isFillSource: boolean;
-  /** Whether this cell is in the fill range (target cells during drag) */
-  inFillRange: boolean;
-  /** Optional background color for the row (from conditional coloring) */
-  rowBackgroundColor?: string;
-}
-
-export interface GridRenderGroupHeadingProps {
-  groupKey: GroupPathKey;
-  collapsed: boolean;
-  children: React.ReactNode;
-}
-
-export interface GridRenderRowProps<TRow = unknown> {
-  rowKey: RowPathKey;
-  row: TRow;
-  selected: boolean;
-  children: React.ReactNode;
-}
-
-export interface GridRenderHeaderProps {
-  children: React.ReactNode;
-}
-
-export interface GridRenderFooterProps {
-  children: React.ReactNode;
-}
-
-export const Grid = memo(function Grid<TRow = unknown>(props: GridProps<TRow>) {
-  const {
-    selectedRows,
-    collapsedRows = null,
-    columns,
-    frozenColumnCount = 0,
-    maxFrozenColumnsWidth,
-    groups,
-    spacerHeight = 0,
-    groupHeadingHeight = 0,
-    groupSummaryHeight = 0,
-    footerHeight = 0,
-    headerHeight = 0,
-    leafRowHeight,
-    height,
-    width,
-    renderFooterCell,
-    renderGroupHeading,
-    renderGroupSummaryCell,
-    renderGroupSummaryRow,
-    renderRowCell,
-    renderRow,
-    renderFooter,
-    renderHeader,
-    renderHeaderCell,
-    rowData,
-    rowKeyToIndex,
-    editingCell,
-    selectionMinRowIndex = null,
-    selectionMaxRowIndex = null,
-    selectionMinColumn = null,
-    selectionMaxColumn = null,
-    selectionActiveRowIndex = null,
-    selectionActiveColumn = null,
-    fillSourceRowIndex = null,
-    fillTargetRowIndex = null,
-    fillColumn = null,
-    rowBackgroundColorGetter,
-    onEndReached,
-    onVisibleRangeChange,
-    rowOverscan = 5,
-    columnOverscan = 2,
-    ref,
-    style,
-  } = props;
-
-  const {
-    api,
-    frozenColumns,
-    scrollableColumns,
-    recycledRows,
-    layout,
-    scrollViewRef,
-    handleScroll,
-    isGroupCollapsed,
-    isScrolledX,
-  } = useVirtualGrid({
-    columns,
-    frozenColumnCount,
-    maxFrozenColumnsWidth,
-    groups,
-    groupHeadingHeight,
-    groupSummaryHeight,
-    leafRowHeight,
-    spacerHeight,
-    collapsedRows,
-    width,
-    height,
-    headerHeight,
-    footerHeight,
-    onEndReached,
-    onVisibleRangeChange,
-    rowOverscan,
-    columnOverscan,
-  });
-
-  useImperativeHandle(ref, () => api, [api]);
-
-  const [scrollbarHeight, setScrollbarHeight] = useState(0);
-
-  useEffect(() => {
-    const element = scrollViewRef.current;
-    if (!element) return;
-
-    const measureScrollbar = () => {
-      const height = element.offsetHeight - element.clientHeight;
-      setScrollbarHeight(height);
-    };
-
-    measureScrollbar();
-
-    const resizeObserver = new ResizeObserver(measureScrollbar);
-    resizeObserver.observe(element);
-
-    return () => resizeObserver.disconnect();
-  }, [scrollViewRef]);
-
-  const footerOffset = useMemo(
-    () => layout.scrollViewHeight + layout.headerHeight - scrollbarHeight,
-    [layout.scrollViewHeight, layout.headerHeight, scrollbarHeight],
-  );
-
-  return (
-    <div
-      ref={scrollViewRef}
-      className={styles.root}
-      onScroll={handleScroll}
-      data-testid="grid-scroll-container"
-      data-scrolled-x={isScrolledX || undefined}
-      style={style as React.CSSProperties}
-    >
-      <div
-        className={styles.content}
-        style={{ width: layout.contentWidth, height: layout.totalHeight }}
-      >
-        {headerHeight > 0 && renderHeaderCell !== undefined && renderHeader !== undefined && (
-          <Header
-            height={headerHeight}
-            width={layout.contentWidth}
-            frozenColumns={frozenColumns.columns}
-            frozenColumnsWidth={frozenColumns.width}
-            scrollableColumns={scrollableColumns.columns}
-            scrollableColumnsWidth={scrollableColumns.width}
-            renderHeader={renderHeader}
-            renderHeaderCell={renderHeaderCell}
-          />
-        )}
-        <div className={styles.rows_wrapper} style={{ top: headerHeight }}>
-          {recycledRows.map((recycledRow) => {
-            switch (recycledRow.type) {
-              case "row": {
-                const rowKey = rowPathToKey(recycledRow.rowPath);
-                const row = rowData?.get(rowKey);
-                if (row === undefined) {
-                  return (
-                    <SkeletonRow
-                      key={recycledRow.key}
-                      y={recycledRow.y}
-                      height={recycledRow.height}
-                      width={layout.contentWidth}
-                    />
-                  );
-                }
-                const rowIndex = rowKeyToIndex?.get(rowKey);
-                const selected = selectedRows?.has(rowKey) ?? false;
-
-                // Check if this row is within selection bounds
-                const rowInSelection =
-                  rowIndex !== undefined &&
-                  selectionMinRowIndex !== null &&
-                  selectionMaxRowIndex !== null &&
-                  rowIndex >= selectionMinRowIndex &&
-                  rowIndex <= selectionMaxRowIndex;
-
-                // Check if this row contains the active cell
-                const isActiveRow =
-                  rowIndex !== undefined &&
-                  selectionActiveRowIndex !== null &&
-                  rowIndex === selectionActiveRowIndex;
-
-                // Only pass column selection props if this row needs them
-                // This prevents re-renders of rows outside selection when selection changes
-                const needsSelectionProps = rowInSelection || isActiveRow;
-
-                // Compute fill range to check if this row is affected
-                const fillMinRow =
-                  fillSourceRowIndex !== null && fillTargetRowIndex !== null
-                    ? Math.min(fillSourceRowIndex, fillTargetRowIndex)
-                    : null;
-                const fillMaxRow =
-                  fillSourceRowIndex !== null && fillTargetRowIndex !== null
-                    ? Math.max(fillSourceRowIndex, fillTargetRowIndex)
-                    : null;
-
-                // Check if this row needs fill props
-                const needsFillProps =
-                  rowIndex !== undefined &&
-                  fillMinRow !== null &&
-                  fillMaxRow !== null &&
-                  rowIndex >= fillMinRow &&
-                  rowIndex <= fillMaxRow;
-
-                return (
-                  <Row
-                    key={recycledRow.key}
-                    y={recycledRow.y}
-                    rowKey={rowKey}
-                    row={row}
-                    rowIndex={rowIndex ?? -1}
-                    selected={selected}
-                    editingCell={editingCell?.rowKey === rowKey ? editingCell : null}
-                    height={recycledRow.height}
-                    width={layout.contentWidth}
-                    frozenColumns={frozenColumns.columns}
-                    frozenColumnsWidth={frozenColumns.width}
-                    scrollableColumns={scrollableColumns.columns}
-                    scrollableColumnsWidth={scrollableColumns.width}
-                    rowInSelection={rowInSelection}
-                    isActiveRow={isActiveRow}
-                    selectionMinColumn={needsSelectionProps ? selectionMinColumn : null}
-                    selectionMaxColumn={needsSelectionProps ? selectionMaxColumn : null}
-                    selectionActiveColumn={needsSelectionProps ? selectionActiveColumn : null}
-                    fillSourceRowIndex={needsFillProps ? fillSourceRowIndex : null}
-                    fillTargetRowIndex={needsFillProps ? fillTargetRowIndex : null}
-                    fillColumn={needsFillProps ? fillColumn : null}
-                    rowBackgroundColor={row ? rowBackgroundColorGetter?.(row) : undefined}
-                    renderRow={renderRow}
-                    renderRowCell={renderRowCell}
-                  />
-                );
-              }
-              case "group_heading": {
-                if (renderGroupHeading === undefined) {
-                  return null;
-                }
-
-                return (
-                  <GroupHeadingRow
-                    key={recycledRow.key}
-                    y={recycledRow.y}
-                    groupKey={groupPathToKey(recycledRow.groupPath)}
-                    height={recycledRow.height}
-                    width={layout.contentWidth}
-                    renderGroupHeading={renderGroupHeading}
-                    collapsed={isGroupCollapsed(groupPathToKey(recycledRow.groupPath))}
-                  />
-                );
-              }
-              case "group_summary": {
-                if (renderGroupSummaryCell === undefined) {
-                  return null;
-                }
-
-                const groupKey = groupPathToKey(recycledRow.groupPath);
-
-                return (
-                  <GroupSummaryRow
-                    key={recycledRow.key}
-                    y={recycledRow.y}
-                    groupKey={groupKey}
-                    height={recycledRow.height}
-                    width={layout.contentWidth}
-                    frozenColumns={frozenColumns.columns}
-                    frozenColumnsWidth={frozenColumns.width}
-                    scrollableColumns={scrollableColumns.columns}
-                    scrollableColumnsWidth={scrollableColumns.width}
-                    renderGroupSummaryCell={renderGroupSummaryCell}
-                    renderGroupSummaryRow={renderGroupSummaryRow}
-                    collapsed={isGroupCollapsed(groupKey)}
-                  />
-                );
-              }
-              case "spacer":
-                return (
-                  <SpacerRow key={recycledRow.key} y={recycledRow.y} height={recycledRow.height} />
-                );
-            }
-          })}
-        </div>
-        {footerHeight > 0 && renderFooterCell !== undefined && renderFooter !== undefined && (
-          <Footer
-            y={footerOffset}
-            height={footerHeight}
-            width={layout.contentWidth}
-            frozenColumns={frozenColumns.columns}
-            frozenColumnsWidth={frozenColumns.width}
-            scrollableColumns={scrollableColumns.columns}
-            scrollableColumnsWidth={scrollableColumns.width}
-            renderFooter={renderFooter}
-            renderFooterCell={renderFooterCell}
-          />
-        )}
-      </div>
-    </div>
-  );
-}) as <TRow = unknown>(props: GridProps<TRow>) => React.ReactNode;
-
-interface HeaderProps {
-  height: number;
-  width: number;
-  frozenColumns: RecycledColumn[];
-  frozenColumnsWidth: number;
-  scrollableColumns: RecycledColumn[];
-  scrollableColumnsWidth: number;
-  renderHeader: (props: GridRenderHeaderProps) => React.ReactNode;
-  renderHeaderCell: (props: GridRenderHeaderCellProps) => React.ReactNode;
-}
-
-const Header = memo(function Header(props: HeaderProps) {
-  const {
-    height,
-    width,
-    frozenColumns,
-    frozenColumnsWidth,
-    scrollableColumns,
-    scrollableColumnsWidth,
-    renderHeader,
-    renderHeaderCell,
-  } = props;
-
-  const children = useMemo(
-    () => (
-      <>
-        <div className={styles.frozen_cells} style={{ width: frozenColumnsWidth, height }}>
-          {frozenColumns.map((columnData) => (
-            <Cell key={columnData.key} height={height} width={columnData.width}>
-              {renderHeaderCell({
-                column: columnData.column,
-                width: columnData.width,
-                height,
-              })}
-            </Cell>
-          ))}
-        </div>
-        <div className={styles.scrollable_cells} style={{ width: scrollableColumnsWidth, height }}>
-          {scrollableColumns.map((columnData) => (
-            <ScrollableCell
-              key={columnData.key}
-              x={columnData.x}
-              height={height}
-              width={columnData.width}
-            >
-              {renderHeaderCell({
-                column: columnData.column,
-                width: columnData.width,
-                height,
-              })}
-            </ScrollableCell>
-          ))}
-        </div>
-      </>
-    ),
-    [
-      frozenColumns,
-      frozenColumnsWidth,
-      scrollableColumns,
-      scrollableColumnsWidth,
-      renderHeaderCell,
-      height,
-    ],
-  );
-
-  return (
-    <div className={styles.header_wrapper} style={{ width, height }}>
-      {renderHeader({ children })}
-    </div>
-  );
-});
-
-interface FooterProps {
-  height: number;
-  width: number;
-  y: number;
-  frozenColumns: RecycledColumn[];
-  frozenColumnsWidth: number;
-  scrollableColumns: RecycledColumn[];
-  scrollableColumnsWidth: number;
-  renderFooter: (props: GridRenderFooterProps) => React.ReactNode;
-  renderFooterCell: (props: GridRenderFooterCellProps) => React.ReactNode;
-}
-
-const Footer = memo(function Footer(props: FooterProps) {
-  const {
-    y,
-    height,
-    width,
-    frozenColumns,
-    frozenColumnsWidth,
-    scrollableColumns,
-    scrollableColumnsWidth,
-    renderFooterCell,
-    renderFooter,
-  } = props;
-
-  const children = useMemo(
-    () => (
-      <>
-        <div className={styles.frozen_cells} style={{ width: frozenColumnsWidth, height }}>
-          {frozenColumns.map((columnData) => (
-            <Cell key={columnData.key} height={height} width={columnData.width}>
-              {renderFooterCell({
-                column: columnData.column,
-                width: columnData.width,
-                height,
-              })}
-            </Cell>
-          ))}
-        </div>
-        <div className={styles.scrollable_cells} style={{ width: scrollableColumnsWidth, height }}>
-          {scrollableColumns.map((columnData) => (
-            <ScrollableCell
-              key={columnData.key}
-              x={columnData.x}
-              height={height}
-              width={columnData.width}
-            >
-              {renderFooterCell({
-                column: columnData.column,
-                width: columnData.width,
-                height,
-              })}
-            </ScrollableCell>
-          ))}
-        </div>
-      </>
-    ),
-    [
-      frozenColumns,
-      frozenColumnsWidth,
-      scrollableColumns,
-      scrollableColumnsWidth,
-      renderFooterCell,
-      height,
-    ],
-  );
-
-  return (
-    <div data-testid="footer" className={styles.footer_wrapper} style={{ top: y, width, height }}>
-      {renderFooter({ children })}
-    </div>
-  );
-});
-
-interface RowProps<TRow = unknown> {
-  height: number;
-  width: number;
-  y: number;
-  rowKey: RowPathKey;
-  row: TRow | undefined;
-  rowIndex: number;
-  selected: boolean;
-  /** Editing cell. Only passed if the row is being edited. */
-  editingCell?: {
-    rowKey: RowPathKey;
-    column: number;
-  } | null;
-  frozenColumns: RecycledColumn[];
-  frozenColumnsWidth: number;
-  scrollableColumns: RecycledColumn[];
-  scrollableColumnsWidth: number;
-  /** Whether this row is within the selection range */
-  rowInSelection: boolean;
-  /** Whether this row contains the active cell */
-  isActiveRow: boolean;
-  /** Selection min column (for computing cell selection). Only passed if row is in selection. */
-  selectionMinColumn: number | null;
-  /** Selection max column (for computing cell selection). Only passed if row is in selection. */
-  selectionMaxColumn: number | null;
-  /** Active cell column. Only passed if row contains active cell. */
-  selectionActiveColumn: number | null;
-  /** Fill source row index. Only passed if this row is affected by fill. */
-  fillSourceRowIndex: number | null;
-  /** Fill target row index. Only passed if this row is affected by fill. */
-  fillTargetRowIndex: number | null;
-  /** Fill column. Only passed if this row is affected by fill. */
-  fillColumn: number | null;
-  /** Background color for the row (from conditional coloring) */
-  rowBackgroundColor?: string;
-  renderRowCell: (props: GridRenderRowCellProps<TRow>) => React.ReactNode;
-  renderRow: (props: GridRenderRowProps<TRow>) => React.ReactNode;
-}
-
-const Row = memo(function Row<TRow = unknown>(props: RowProps<TRow>) {
-  const {
-    width,
-    height,
-    y,
-    rowKey,
-    row,
-    rowIndex,
-    selected,
-    editingCell,
-    frozenColumns,
-    frozenColumnsWidth,
-    scrollableColumns,
-    scrollableColumnsWidth,
-    rowInSelection,
-    isActiveRow,
-    selectionMinColumn,
-    selectionMaxColumn,
-    selectionActiveColumn,
-    fillSourceRowIndex,
-    fillTargetRowIndex,
-    fillColumn,
-    rowBackgroundColor,
-    renderRow,
-    renderRowCell,
-  } = props;
-
-  // Compute fill range for this row
-  const fillMinRow =
-    fillSourceRowIndex !== null && fillTargetRowIndex !== null
-      ? Math.min(fillSourceRowIndex, fillTargetRowIndex)
-      : null;
-  const fillMaxRow =
-    fillSourceRowIndex !== null && fillTargetRowIndex !== null
-      ? Math.max(fillSourceRowIndex, fillTargetRowIndex)
-      : null;
-
-  const children = (
-    <>
-      <div className={styles.frozen_cells} style={{ width: frozenColumnsWidth, height }}>
-        {frozenColumns.map((columnData) => {
-          const col = columnData.column;
-          const selectedCell =
-            rowInSelection &&
-            selectionMinColumn !== null &&
-            selectionMaxColumn !== null &&
-            col >= selectionMinColumn &&
-            col <= selectionMaxColumn;
-          const active = isActiveRow && selectionActiveColumn === col;
-
-          const isEditing = editingCell?.rowKey === rowKey && editingCell.column === col;
-
-          // Fill source: this cell is the origin of the fill
-          const isFillSource = fillSourceRowIndex === rowIndex && fillColumn === col;
-
-          // In fill range: this cell is being filled (excluding source)
-          const inFillRange =
-            fillColumn === col &&
-            fillMinRow !== null &&
-            fillMaxRow !== null &&
-            rowIndex >= fillMinRow &&
-            rowIndex <= fillMaxRow &&
-            rowIndex !== fillSourceRowIndex;
-
-          return (
-            <FrozenCellWrapper
-              key={columnData.key}
-              rowKey={rowKey}
-              row={row}
-              rowIndex={rowIndex}
-              column={col}
-              editing={isEditing}
-              cellWidth={columnData.width}
-              cellHeight={height}
-              active={active}
-              selected={selectedCell}
-              inSelectedRow={selected}
-              isFillSource={isFillSource}
-              inFillRange={inFillRange}
-              rowBackgroundColor={rowBackgroundColor}
-              renderRowCell={renderRowCell}
-            />
-          );
-        })}
-      </div>
-      <div className={styles.scrollable_cells} style={{ width: scrollableColumnsWidth, height }}>
-        {scrollableColumns.map((columnData) => {
-          const col = columnData.column;
-          const selectedCell =
-            rowInSelection &&
-            selectionMinColumn !== null &&
-            selectionMaxColumn !== null &&
-            col >= selectionMinColumn &&
-            col <= selectionMaxColumn;
-          const active = isActiveRow && selectionActiveColumn === col;
-
-          const isEditing = editingCell?.rowKey === rowKey && editingCell.column === col;
-
-          // Fill source: this cell is the origin of the fill
-          const isFillSource = fillSourceRowIndex === rowIndex && fillColumn === col;
-
-          // In fill range: this cell is being filled (excluding source)
-          const inFillRange =
-            fillColumn === col &&
-            fillMinRow !== null &&
-            fillMaxRow !== null &&
-            rowIndex >= fillMinRow &&
-            rowIndex <= fillMaxRow &&
-            rowIndex !== fillSourceRowIndex;
-
-          return (
-            <ScrollableCellWrapper
-              key={columnData.key}
-              rowKey={rowKey}
-              row={row}
-              rowIndex={rowIndex}
-              column={col}
-              editing={isEditing}
-              x={columnData.x}
-              cellWidth={columnData.width}
-              cellHeight={height}
-              active={active}
-              selected={selectedCell}
-              inSelectedRow={selected}
-              isFillSource={isFillSource}
-              inFillRange={inFillRange}
-              rowBackgroundColor={rowBackgroundColor}
-              renderRowCell={renderRowCell}
-            />
-          );
-        })}
-      </div>
-    </>
-  );
-
-  return (
-    <div className={styles.row_wrapper} style={{ height, width, transform: `translateY(${y}px)` }}>
-      {renderRow({ children, rowKey, row: row as TRow, selected })}
-    </div>
-  );
-}) as <TRow = unknown>(props: RowProps<TRow>) => React.ReactNode;
-
-/** Memoized cell wrapper - only re-renders when active/selected change */
-interface FrozenCellWrapperProps<TRow = unknown> {
-  rowKey: RowPathKey;
-  row: TRow | undefined;
-  rowIndex: number;
-  column: number;
-  cellWidth: number;
-  cellHeight: number;
-  active: boolean;
-  selected: boolean;
-  inSelectedRow: boolean;
-  editing: boolean;
-  isFillSource: boolean;
-  inFillRange: boolean;
-  rowBackgroundColor?: string;
-  renderRowCell: (props: GridRenderRowCellProps<TRow>) => React.ReactNode;
-}
-
-const FrozenCellWrapper = memo(function FrozenCellWrapper<TRow = unknown>(
-  props: FrozenCellWrapperProps<TRow>,
-) {
-  const {
-    rowKey,
-    row,
-    rowIndex,
-    column,
-    cellWidth,
-    cellHeight,
-    active,
-    selected,
-    inSelectedRow,
-    editing,
-    isFillSource,
-    inFillRange,
-    rowBackgroundColor,
-    renderRowCell,
-  } = props;
-
-  return (
-    <Cell height={cellHeight} width={cellWidth}>
-      {renderRowCell({
-        rowKey,
-        row: row as TRow,
-        rowIndex,
-        column,
-        frozen: true,
-        inSelectedRow,
-        active,
-        selected,
-        editing,
-        isFillSource,
-        inFillRange,
-        rowBackgroundColor,
-      })}
-    </Cell>
-  );
-}) as <TRow = unknown>(props: FrozenCellWrapperProps<TRow>) => React.ReactNode;
-
-interface ScrollableCellWrapperProps<TRow = unknown> {
-  rowKey: RowPathKey;
-  row: TRow | undefined;
-  rowIndex: number;
-  column: number;
-  x: number;
-  cellWidth: number;
-  cellHeight: number;
-  active: boolean;
-  selected: boolean;
-  inSelectedRow: boolean;
-  editing: boolean;
-  isFillSource: boolean;
-  inFillRange: boolean;
-  rowBackgroundColor?: string;
-  renderRowCell: (props: GridRenderRowCellProps<TRow>) => React.ReactNode;
-}
-
-const ScrollableCellWrapper = memo(function ScrollableCellWrapper<TRow = unknown>(
-  props: ScrollableCellWrapperProps<TRow>,
-) {
-  const {
-    rowKey,
-    row,
-    rowIndex,
-    column,
-    x,
-    cellWidth,
-    cellHeight,
-    active,
-    selected,
-    inSelectedRow,
-    editing,
-    isFillSource,
-    inFillRange,
-    rowBackgroundColor,
-    renderRowCell,
-  } = props;
-
-  return (
-    <ScrollableCell x={x} height={cellHeight} width={cellWidth}>
-      {renderRowCell({
-        rowKey,
-        row: row as TRow,
-        rowIndex,
-        column,
-        frozen: false,
-        inSelectedRow,
-        active,
-        selected,
-        editing,
-        isFillSource,
-        inFillRange,
-        rowBackgroundColor,
-      })}
-    </ScrollableCell>
-  );
-}) as <TRow = unknown>(props: ScrollableCellWrapperProps<TRow>) => React.ReactNode;
-
-interface GroupHeadingRowProps {
-  height: number;
-  width: number;
-  y: number;
-  groupKey: GroupPathKey;
-  collapsed: boolean;
-  renderGroupHeading: (props: GridRenderGroupHeadingProps) => React.ReactNode;
-}
-
-const GroupHeadingRow = memo(function GroupHeadingRow(props: GroupHeadingRowProps) {
-  const { width, height, y, groupKey, collapsed, renderGroupHeading } = props;
-
-  return (
-    <div
-      className={styles.group_heading_wrapper}
-      style={{ height, width, transform: `translateY(${y}px)` }}
-    >
-      <div className={styles.group_heading_content} style={{ height }}>
-        {renderGroupHeading({ groupKey, collapsed, children: null })}
-      </div>
-    </div>
-  );
-}) as (props: GroupHeadingRowProps) => React.ReactNode;
-
-interface GroupSummaryRowProps {
-  height: number;
-  width: number;
-  y: number;
-  groupKey: GroupPathKey;
-  collapsed: boolean;
-  frozenColumns: RecycledColumn[];
-  frozenColumnsWidth: number;
-  scrollableColumns: RecycledColumn[];
-  scrollableColumnsWidth: number;
-  renderGroupSummaryCell: (props: GridRenderGroupSummaryCellProps) => React.ReactNode;
-  renderGroupSummaryRow?: (props: GridRenderGroupSummaryRowProps) => React.ReactNode;
-}
-
-const GroupSummaryRow = memo(function GroupSummary(props: GroupSummaryRowProps) {
-  const {
-    width,
-    height,
-    y,
-    groupKey,
-    collapsed,
-    frozenColumns,
-    frozenColumnsWidth,
-    scrollableColumns,
-    scrollableColumnsWidth,
-    renderGroupSummaryCell,
-    renderGroupSummaryRow,
-  } = props;
-
-  const children = useMemo(
-    () => (
-      <>
-        <div className={styles.frozen_cells} style={{ width: frozenColumnsWidth, height }}>
-          {frozenColumns.map((columnData) => (
-            <Cell key={columnData.key} height={height} width={columnData.width}>
-              {renderGroupSummaryCell({
-                groupKey,
-                column: columnData.column,
-                width: columnData.width,
-                height,
-              })}
-            </Cell>
-          ))}
-        </div>
-        <div className={styles.scrollable_cells} style={{ width: scrollableColumnsWidth, height }}>
-          {scrollableColumns.map((columnData) => (
-            <ScrollableCell
-              key={columnData.key}
-              x={columnData.x}
-              height={height}
-              width={columnData.width}
-            >
-              {renderGroupSummaryCell({
-                groupKey,
-                column: columnData.column,
-                width: columnData.width,
-                height,
-              })}
-            </ScrollableCell>
-          ))}
-        </div>
-      </>
-    ),
-    [
-      frozenColumns,
-      frozenColumnsWidth,
-      scrollableColumns,
-      scrollableColumnsWidth,
-      groupKey,
-      height,
-      renderGroupSummaryCell,
-    ],
-  );
-
-  const rowContent = renderGroupSummaryRow ? (
-    renderGroupSummaryRow({ groupKey, collapsed, children })
-  ) : (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        height: "100%",
-      }}
-    >
-      {children}
-    </div>
-  );
-
-  return (
-    <div className={styles.row_wrapper} style={{ height, width, transform: `translateY(${y}px)` }}>
-      {rowContent}
-    </div>
-  );
-}) as (props: GroupSummaryRowProps) => React.ReactNode;
-
-interface SpacerRowProps {
-  y: number;
-  height: number;
-}
-
-const SpacerRow = memo(function SpacerRow(props: SpacerRowProps) {
-  const { height, y } = props;
-
-  return <div className={styles.spacer} style={{ height, transform: `translateY(${y}px)` }} />;
-}) as (props: SpacerRowProps) => React.ReactNode;
-
-interface CellProps {
-  width: number;
-  height: number;
-  children: React.ReactNode;
-}
-
-const Cell = memo(function Cell(props: CellProps) {
-  const { width, height, children } = props;
-
-  return (
-    <div className={styles.cell} style={{ width, height }}>
-      {children}
-    </div>
-  );
-});
-
-interface ScrollableCellProps {
-  x: number;
-  width: number;
-  height: number;
-  children: React.ReactNode;
-}
-
-const ScrollableCell = memo(function ScrollableCell(props: ScrollableCellProps) {
-  const { x, width, height, children } = props;
-
-  return (
-    <div
-      className={styles.cell}
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        transform: `translateX(${x}px)`,
-        width,
-        height,
-        overflow: "hidden",
-      }}
-    >
-      {children}
-    </div>
-  );
-});