glideapps / glide-data-grid / 7312551980

import * as React from "react";

import type { FullTheme } from "../../common/styles.js";

import {

    computeBounds,

    getColumnIndexForX,

    getEffectiveColumns,

    getRowIndexForY,

    getStickyWidth,

    rectBottomRight,

    useMappedColumns,

} from "./data-grid-lib.js";

import {

    GridCellKind,

    type Rectangle,

    type GridSelection,

    type InnerGridCell,

    InnerGridCellKind,

    CompactSelection,

    type Item,

    type DrawHeaderCallback,

    isReadWriteCell,

    isInnerOnlyCell,

    booleanCellIsEditable,

    type InnerGridColumn,

    type TrailingRowType,

    type DrawCellCallback,

} from "./data-grid-types.js";

import { CellSet } from "./cell-set.js";

import { SpriteManager, type SpriteMap } from "./data-grid-sprites.js";

import { direction, getScrollBarWidth, useDebouncedMemo, useEventListener } from "../../common/utils.js";

import clamp from "lodash/clamp.js";

import makeRange from "lodash/range.js";

import {

    type BlitData,

    drawCell,

    drawGrid,

    drawHeader,

    getActionBoundsForGroup,

    getHeaderMenuBounds,

    type GetRowThemeCallback,

    type GroupDetailsCallback,

    type Highlight,

    pointInRect,

} from "./data-grid-render.js";

import { AnimationManager, type StepCallback } from "./animation-manager.js";

import { RenderStateProvider } from "../../common/render-state-provider.js";

import { browserIsFirefox, browserIsSafari } from "../../common/browser-detect.js";

import { type EnqueueCallback, useAnimationQueue } from "./use-animation-queue.js";

import { assert } from "../../common/support.js";

import type { CellRenderer, GetCellRendererCallback } from "../../cells/cell-types.js";

import type { DrawGridArg } from "./draw-grid-arg.js";

import type { ImageWindowLoader } from "./image-window-loader-interface.js";

import {

    type GridMouseEventArgs,

    type GridKeyEventArgs,

    type GridDragEventArgs,

    OutOfBoundsRegionAxis,

    outOfBoundsKind,

    groupHeaderKind,

    headerKind,

    mouseEventArgsAreEqual,

} from "./event-args.js";

export interface DataGridProps {

    readonly width: number;

    readonly height: number;

    readonly cellXOffset: number;

    readonly cellYOffset: number;

    readonly translateX: number | undefined;

    readonly translateY: number | undefined;

    readonly accessibilityHeight: number;

    readonly freezeColumns: number;

    readonly trailingRowType: TrailingRowType;

    readonly firstColAccessible: boolean;

    /**

     * Enables or disables the overlay shadow when scrolling horizontally

     * @group Style

     */

    readonly fixedShadowX: boolean | undefined;

    /**

     * Enables or disables the overlay shadow when scrolling vertical

     * @group Style

     */

    readonly fixedShadowY: boolean | undefined;

    readonly allowResize: boolean | undefined;

    readonly isResizing: boolean;

    readonly resizeColumn: number | undefined;

    readonly isDragging: boolean;

    readonly isFilling: boolean;

    readonly isFocused: boolean;

    readonly columns: readonly InnerGridColumn[];

    /**

     * The number of rows in the grid.

     * @group Data

     */

    readonly rows: number;

    readonly headerHeight: number;

    readonly groupHeaderHeight: number;

    readonly enableGroups: boolean;

    readonly rowHeight: number | ((index: number) => number);

    readonly canvasRef: React.MutableRefObject<HTMLCanvasElement | null> | undefined;

    readonly eventTargetRef: React.MutableRefObject<HTMLDivElement | null> | undefined;

    readonly getCellContent: (cell: Item, forceStrict?: boolean) => InnerGridCell;

    /**

     * Provides additional details about groups to extend group functionality.

     * @group Data

     */

    readonly getGroupDetails: GroupDetailsCallback | undefined;

    /**

     * Provides per row theme overrides.

     * @group Style

     */

    readonly getRowThemeOverride: GetRowThemeCallback | undefined;

    /**

     * Emitted when a header menu disclosure indicator is clicked.

     * @group Events

     */

    readonly onHeaderMenuClick: ((col: number, screenPosition: Rectangle) => void) | undefined;

    readonly selection: GridSelection;

    readonly prelightCells: readonly Item[] | undefined;

    /**

     * Highlight regions provide hints to users about relations between cells and selections.

     * @group Selection

     */

    readonly highlightRegions: readonly Highlight[] | undefined;

    /**

     * Enabled/disables the fill handle.

     * @defaultValue false

     * @group Editing

     */

    readonly fillHandle: boolean | undefined;

    readonly disabledRows: CompactSelection | undefined;

    /**

     * Allows passing a custom image window loader.

     * @group Advanced

     */

    readonly imageWindowLoader: ImageWindowLoader;

    /**

     * Emitted when an item is hovered.

     * @group Events

     */

    readonly onItemHovered: (args: GridMouseEventArgs) => void;

    readonly onMouseMove: (args: GridMouseEventArgs) => void;

    readonly onMouseDown: (args: GridMouseEventArgs) => void;

    readonly onMouseUp: (args: GridMouseEventArgs, isOutside: boolean) => void;

    readonly onContextMenu: (args: GridMouseEventArgs, preventDefault: () => void) => void;

    readonly onCanvasFocused: () => void;

    readonly onCanvasBlur: () => void;

    readonly onCellFocused: (args: Item) => void;

    readonly onMouseMoveRaw: (event: MouseEvent) => void;

    /**

     * Emitted when the canvas receives a key down event.

     * @group Events

     */

    readonly onKeyDown: (event: GridKeyEventArgs) => void;

    /**

     * Emitted when the canvas receives a key up event.

     * @group Events

     */

    readonly onKeyUp: ((event: GridKeyEventArgs) => void) | undefined;

    readonly verticalBorder: (col: number) => boolean;

    /**

     * Determines what can be dragged using HTML drag and drop

     * @defaultValue false

     * @group Drag and Drop

     */

    readonly isDraggable: boolean | "cell" | "header" | undefined;

    /**

     * If `isDraggable` is set, the grid becomes HTML draggable, and `onDragStart` will be called when dragging starts.

     * You can use this to build a UI where the user can drag the Grid around.

     * @group Drag and Drop

     */

    readonly onDragStart: (args: GridDragEventArgs) => void;

    readonly onDragEnd: () => void;

    /** @group Drag and Drop */

    readonly onDragOverCell: ((cell: Item, dataTransfer: DataTransfer | null) => void) | undefined;

    /** @group Drag and Drop */

    readonly onDragLeave: (() => void) | undefined;

    /**

     * Called when a HTML Drag and Drop event is ended on the data grid.

     * @group Drag and Drop

     */

    readonly onDrop: ((cell: Item, dataTransfer: DataTransfer | null) => void) | undefined;

    /**

     * Overrides the rendering of a header. The grid will call this for every header it needs to render. Header

     * rendering is not as well optimized because they do not redraw as often, but very heavy drawing methods can

     * negatively impact horizontal scrolling performance.

     *

     * It is possible to return `false` after rendering just a background and the regular foreground rendering

     * will happen.

     * @group Drawing

     * @returns `false` if default header rendering should still happen, `true` to cancel rendering.

     */

    readonly drawHeader: DrawHeaderCallback | undefined;

    readonly drawCell: DrawCellCallback | undefined;

    /**

     * Controls the drawing of the focus ring.

     * @defaultValue true

     * @group Style

     */

    readonly drawFocusRing: boolean | undefined;

    readonly dragAndDropState:

        | {

              src: number;

              dest: number;

          }

        | undefined;

    /**

     * Experimental features

     * @group Advanced

     * @experimental

     */

    readonly experimental:

        | {

              readonly disableAccessibilityTree?: boolean;

              readonly disableMinimumCellWidth?: boolean;

              readonly paddingRight?: number;

              readonly paddingBottom?: number;

              readonly enableFirefoxRescaling?: boolean;

              readonly kineticScrollPerfHack?: boolean;

              readonly isSubGrid?: boolean;

              readonly strict?: boolean;

              readonly scrollbarWidthOverride?: number;

              readonly hyperWrapping?: boolean;

              readonly renderStrategy?: "single-buffer" | "double-buffer" | "direct";

          }

        | undefined;

    /**

     * Additional header icons for use by `GridColumn`.

     *

     * Providing custom header icons to the data grid must be done with a somewhat non-standard mechanism to allow

     * theming and scaling. The `headerIcons` property takes a dictionary which maps icon names to functions which can

     * take a foreground and background color and returns back a string representation of an svg. The svg should contain

     * a header similar to this `<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">` and

     * interpolate the fg/bg colors into the string.

     *

     * We recognize this process is not fantastic from a graphics workflow standpoint, improvements are very welcome

     * here.

     *

     * @group Style

     */

    readonly headerIcons: SpriteMap | undefined;

    /** Controls smooth scrolling in the data grid. If smooth scrolling is not enabled the grid will always be cell

     * aligned.

     * @defaultValue `false`

     * @group Style

     */

    readonly smoothScrollX: boolean | undefined;

    /** Controls smooth scrolling in the data grid. If smooth scrolling is not enabled the grid will always be cell

     * aligned.

     * @defaultValue `false`

     * @group Style

     */

    readonly smoothScrollY: boolean | undefined;

    readonly theme: FullTheme;

    readonly getCellRenderer: <T extends InnerGridCell>(cell: T) => CellRenderer<T> | undefined;

}

type DamageUpdateList = readonly {

    cell: Item;

    // newValue: GridCell,

}[];

const fillHandleClickSize = 6;

export interface DataGridRef {

    focus: () => void;

    getBounds: (col?: number, row?: number) => Rectangle | undefined;

    damage: (cells: DamageUpdateList) => void;

}

const getRowData = (cell: InnerGridCell, getCellRenderer?: GetCellRendererCallback) => {

    if (cell.kind === GridCellKind.Custom) return cell.copyData;

    const r = getCellRenderer?.(cell);

};

const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p, forwardedRef) => {

    const {

        width,

        height,

        accessibilityHeight,

        columns,

        cellXOffset: cellXOffsetReal,

        cellYOffset,

        headerHeight,

        fillHandle = false,

        groupHeaderHeight,

        rowHeight,

        rows,

        getCellContent,

        getRowThemeOverride,

        onHeaderMenuClick,

        enableGroups,

        isFilling,

        onCanvasFocused,

        onCanvasBlur,

        isFocused,

        selection,

        freezeColumns,

        onContextMenu,

        trailingRowType: trailingRowType,

        fixedShadowX = true,

        fixedShadowY = true,

        drawFocusRing = true,

        onMouseDown,

        onMouseUp,

        onMouseMoveRaw,

        onMouseMove,

        onItemHovered,

        dragAndDropState,

        firstColAccessible,

        onKeyDown,

        onKeyUp,

        highlightRegions,

        canvasRef,

        onDragStart,

        onDragEnd,

        eventTargetRef,

        isResizing,

        resizeColumn: resizeCol,

        isDragging,

        isDraggable = false,

        allowResize,

        disabledRows,

        getGroupDetails,

        theme,

        prelightCells,

        headerIcons,

        verticalBorder,

        drawCell: drawCellCallback,

        drawHeader: drawHeaderCallback,

        onCellFocused,

        onDragOverCell,

        onDrop,

        onDragLeave,

        imageWindowLoader,

        smoothScrollX = false,

        smoothScrollY = false,

        experimental,

        getCellRenderer,

    } = p;

    const translateX = p.translateX ?? 0;

    const translateY = p.translateY ?? 0;

    const cellXOffset = Math.max(freezeColumns, Math.min(columns.length - 1, cellXOffsetReal));

    const ref = React.useRef<HTMLCanvasElement | null>(null);

    const imageLoader = imageWindowLoader;

    const damageRegion = React.useRef<CellSet | undefined>();

    const [scrolling, setScrolling] = React.useState<boolean>(false);

    const hoverValues = React.useRef<readonly { item: Item; hoverAmount: number }[]>([]);

    const lastBlitData = React.useRef<BlitData | undefined>();

    const [hoveredItemInfo, setHoveredItemInfo] = React.useState<[Item, readonly [number, number]] | undefined>();

    const [hoveredOnEdge, setHoveredOnEdge] = React.useState<boolean>();

    const overlayRef = React.useRef<HTMLCanvasElement | null>(null);

    const [drawCursorOverride, setDrawCursorOverride] = React.useState<React.CSSProperties["cursor"] | undefined>();

    const [lastWasTouch, setLastWasTouch] = React.useState(false);

    const lastWasTouchRef = React.useRef(lastWasTouch);

    lastWasTouchRef.current = lastWasTouch;

    const spriteManager = React.useMemo(

        () =>

            new SpriteManager(headerIcons, () => {

            }),

        [headerIcons]

    );

    const totalHeaderHeight = enableGroups ? groupHeaderHeight + headerHeight : headerHeight;

    const scrollingStopRef = React.useRef(-1);

    const disableFirefoxRescaling = experimental?.enableFirefoxRescaling !== true;

    React.useLayoutEffect(() => {

    }, [cellYOffset, cellXOffset, translateX, translateY, disableFirefoxRescaling]);

    const mappedColumns = useMappedColumns(columns, freezeColumns);

    // row: -1 === columnHeader, -2 === groupHeader

    const getBoundsForItem = React.useCallback(

        (canvas: HTMLCanvasElement, col: number, row: number): Rectangle | undefined => {

            const rect = canvas.getBoundingClientRect();

            const scale = rect.width / width;

            const result = computeBounds(

                col,

                row,

                width,

                height,

                groupHeaderHeight,

                totalHeaderHeight,

                cellXOffset,

                cellYOffset,

                translateX,

                translateY,

                rows,

                freezeColumns,

                trailingRowType === "sticky",

                mappedColumns,

                rowHeight

            );

            result.x += rect.x;

            result.y += rect.y;

            return result;

        },

        [

            width,

            height,

            groupHeaderHeight,

            totalHeaderHeight,

            cellXOffset,

            cellYOffset,

            translateX,

            translateY,

            rows,

            freezeColumns,

            trailingRowType,

            mappedColumns,

            rowHeight,

        ]

    );

    const getMouseArgsForPosition = React.useCallback(

        (canvas: HTMLCanvasElement, posX: number, posY: number, ev?: MouseEvent | TouchEvent): GridMouseEventArgs => {

            const rect = canvas.getBoundingClientRect();

            const scale = rect.width / width;

            const x = (posX - rect.left) / scale;

            const y = (posY - rect.top) / scale;

            const edgeDetectionBuffer = 5;

            const effectiveCols = getEffectiveColumns(mappedColumns, cellXOffset, width, undefined, translateX);

            let button = 0;

            if (ev instanceof MouseEvent) {

                button = ev.button;

            }

            // -1 === off right edge

            const col = getColumnIndexForX(x, effectiveCols, translateX);

            // -1: header or above

            // undefined: offbottom

            const row = getRowIndexForY(

                y,

                height,

                enableGroups,

                headerHeight,

                groupHeaderHeight,

                rows,

                rowHeight,

                cellYOffset,

                translateY,

                trailingRowType === "sticky"

            );

            const shiftKey = ev?.shiftKey === true;

            const ctrlKey = ev?.ctrlKey === true;

            const metaKey = ev?.metaKey === true;

            const isTouch = (ev !== undefined && !(ev instanceof MouseEvent)) || (ev as any)?.pointerType === "touch";

            const scrollEdge: GridMouseEventArgs["scrollEdge"] = [

            ];

            let result: GridMouseEventArgs;

            if (col === -1 || y < 0 || x < 0 || row === undefined || x > width || y > height) {

                let innerHorizontal: OutOfBoundsRegionAxis = horizontal * 2;

                let innerVertical: OutOfBoundsRegionAxis = vertical * 2;

                if (horizontal === 0)

                    innerHorizontal = col === -1 ? OutOfBoundsRegionAxis.EndPadding : OutOfBoundsRegionAxis.Center;

                if (vertical === 0)

                    innerVertical = row === undefined ? OutOfBoundsRegionAxis.EndPadding : OutOfBoundsRegionAxis.Center;

                let isEdge = false;

                if (col === -1 && row === -1) {

                    const b = getBoundsForItem(canvas, mappedColumns.length - 1, -1);

                    assert(b !== undefined);

                    isEdge = posX < b.x + b.width + edgeDetectionBuffer;

                }

                // This is used to ensure that clicking on the scrollbar doesn't unset the selection.

                // Unfortunately this doesn't work for overlay scrollbars because they are just a broken interaction

                // by design.

                const isMaybeScrollbar =

                result = {

                    kind: outOfBoundsKind,

                    region: [innerHorizontal, innerVertical],

                    shiftKey,

                    ctrlKey,

                    metaKey,

                    isEdge,

                    isTouch,

                    button,

                    scrollEdge,

                    isMaybeScrollbar,

                };

            } else if (row <= -1) {

                let bounds = getBoundsForItem(canvas, col, row);

                assert(bounds !== undefined);

                let isEdge = bounds !== undefined && bounds.x + bounds.width - posX <= edgeDetectionBuffer;

                const previousCol = col - 1;

                } else {

                    result = {

                        kind: enableGroups && row === -2 ? groupHeaderKind : headerKind,

                        group: mappedColumns[col].group ?? "",

                        location: [col, row] as any,

                        bounds: bounds,

                        isEdge,

                        shiftKey,

                        ctrlKey,

                        metaKey,

                        isTouch,

                        localEventX: posX - bounds.x,

                        localEventY: posY - bounds.y,

                        button,

                        scrollEdge,

                    };

                }

            } else {

                const bounds = getBoundsForItem(canvas, col, row);

                assert(bounds !== undefined);

                const isEdge = bounds !== undefined && bounds.x + bounds.width - posX < edgeDetectionBuffer;

                let isFillHandle = false;

                if (fillHandle && selection.current !== undefined) {

                    const fillHandleLocation = rectBottomRight(selection.current.range);

                    const fillHandleCellBounds = getBoundsForItem(canvas, fillHandleLocation[0], fillHandleLocation[1]);

                    if (fillHandleCellBounds !== undefined) {

                        const handleLogicalCenterX = fillHandleCellBounds.x + fillHandleCellBounds.width - 2;

                        const handleLogicalCenterY = fillHandleCellBounds.y + fillHandleCellBounds.height - 2;

                        //check if posX and posY are within fillHandleClickSize from handleLogicalCenter

                        isFillHandle =

                            Math.abs(handleLogicalCenterX - posX) < fillHandleClickSize &&

                            Math.abs(handleLogicalCenterY - posY) < fillHandleClickSize;

                    }

                }

                result = {

                    kind: "cell",

                    location: [col, row],

                    bounds: bounds,

                    isEdge,

                    shiftKey,

                    ctrlKey,

                    isFillHandle,

                    metaKey,

                    isTouch,

                    localEventX: posX - bounds.x,

                    localEventY: posY - bounds.y,

                    button,

                    scrollEdge,

                };

            }

            return result;

        },

        [

            width,

            mappedColumns,

            cellXOffset,

            translateX,

            height,

            enableGroups,

            headerHeight,

            groupHeaderHeight,

            rows,

            rowHeight,

            cellYOffset,

            translateY,

            trailingRowType,

            getBoundsForItem,

            fillHandle,

            selection,

            stickyX,

            totalHeaderHeight,

        ]

    );

    const [hoveredItem] = hoveredItemInfo ?? [];

    const enqueueRef = React.useRef<EnqueueCallback>(() => {

    });

    const hoverInfoRef = React.useRef(hoveredItemInfo);

    hoverInfoRef.current = hoveredItemInfo;

    const [bufferA, bufferB] = React.useMemo(() => {

        const a = document.createElement("canvas");

        const b = document.createElement("canvas");

        a.style["display"] = "none";

        a.style["opacity"] = "0";

        a.style["position"] = "fixed";

        b.style["display"] = "none";

        b.style["opacity"] = "0";

        b.style["position"] = "fixed";

        return [a, b];

    }, []);

    React.useLayoutEffect(() => {

        document.documentElement.append(bufferA);

        document.documentElement.append(bufferB);

        return () => {

            bufferA.remove();

            bufferB.remove();

        };

    }, [bufferA, bufferB]);

    const renderStateProvider = React.useMemo(() => new RenderStateProvider(), []);

    const lastArgsRef = React.useRef<DrawGridArg>();

    const draw = React.useCallback(() => {

        const canvas = ref.current;

        const overlay = overlayRef.current;

        if (canvas === null || overlay === null) return;

        let didOverride = false;

        const overrideCursor = (cursor: React.CSSProperties["cursor"]) => {

        const last = lastArgsRef.current;

        const current = {

            canvas,

            bufferA,

            bufferB,

            headerCanvas: overlay,

            width,

            height,

            cellXOffset,

            cellYOffset,

            translateX: Math.round(translateX),

            translateY: Math.round(translateY),

            mappedColumns,

            enableGroups,

            freezeColumns,

            dragAndDropState,

            theme,

            headerHeight,

            groupHeaderHeight,

            disabledRows: disabledRows ?? CompactSelection.empty(),

            rowHeight,

            verticalBorder,

            isResizing,

            resizeCol,

            isFocused,

            selection,

            fillHandle,

            drawCellCallback,

            overrideCursor,

            lastRowSticky: trailingRowType,

            rows,

            drawFocus: drawFocusRing,

            getCellContent,

            getGroupDetails: getGroupDetails ?? (name => ({ name })),

            getRowThemeOverride,

            drawHeaderCallback,

            prelightCells,

            highlightRegions,

            imageLoader,

            lastBlitData,

            damage: damageRegion.current,

            hoverValues: hoverValues.current,

            hoverInfo: hoverInfoRef.current,

            spriteManager,

            scrolling,

            hyperWrapping: experimental?.hyperWrapping ?? false,

            touchMode: lastWasTouch,

            enqueue: enqueueRef.current,

            renderStateProvider,

            getCellRenderer,

            minimumCellWidth,

        };

        // This confusing bit of code due to some poor design. Long story short, the damage property is only used

        // with what is effectively the "last args" for the last normal draw anyway. We don't want the drawing code

        // to look at this and go "shit dawg, nothing changed" so we force it to draw frash, but the damage restricts

        // the draw anyway.

        //

        // Dear future Jason, I'm sorry. It was expedient, it worked, and had almost zero perf overhead. THe universe

        // basically made me do it. What choice did I have?

        if (current.damage === undefined) {

            lastArgsRef.current = current;

            drawGrid(current, last);

        } else {

            drawGrid(current, undefined);

        }

        // don't reset on damage events

        if (!didOverride && (current.damage === undefined || current.damage.has(hoverInfoRef?.current?.[0]))) {

            setDrawCursorOverride(undefined);

        }

    }, [

        bufferA,

        bufferB,

        width,

        height,

        cellXOffset,

        cellYOffset,

        translateX,

        translateY,

        mappedColumns,

        enableGroups,

        freezeColumns,

        dragAndDropState,

        theme,

        headerHeight,

        groupHeaderHeight,

        disabledRows,

        rowHeight,

        verticalBorder,

        isResizing,

        resizeCol,

        isFocused,

        selection,

        fillHandle,

        trailingRowType,

        rows,

        drawFocusRing,

        getCellContent,

        getGroupDetails,

        getRowThemeOverride,

        drawCellCallback,

        drawHeaderCallback,

        prelightCells,

        highlightRegions,

        imageLoader,

        spriteManager,

        scrolling,

        experimental?.hyperWrapping,

        experimental?.renderStrategy,

        lastWasTouch,

        renderStateProvider,

        getCellRenderer,

        minimumCellWidth,

    ]);

    const lastDrawRef = React.useRef(draw);

    React.useLayoutEffect(() => {

        draw();

        lastDrawRef.current = draw;

    }, [draw]);

    React.useLayoutEffect(() => {

        const fn = async () => {

        };

        void fn();

    }, []);

    const damageInternal = React.useCallback((locations: CellSet) => {

        damageRegion.current = locations;

        lastDrawRef.current();

        damageRegion.current = undefined;

    }, []);

    const enqueue = useAnimationQueue(damageInternal);

    enqueueRef.current = enqueue;

    const damage = React.useCallback(

        (cells: DamageUpdateList) => {

            damageInternal(new CellSet(cells.map(x => x.cell)));

        },

        [damageInternal]

    );

    imageLoader.setCallback(damageInternal);

    const [overFill, setOverFill] = React.useState(false);

    const [hCol, hRow] = hoveredItem ?? [];

    const headerHovered = hCol !== undefined && hRow === -1;

    const groupHeaderHovered = hCol !== undefined && hRow === -2;

    let clickableInnerCellHovered = false;

    let editableBoolHovered = false;

    let cursorOverride: React.CSSProperties["cursor"] | undefined = drawCursorOverride;

    if (cursorOverride === undefined && hCol !== undefined && hRow !== undefined && hRow > -1 && hRow < rows) {

        const cell = getCellContent([hCol, hRow], true);

        clickableInnerCellHovered =

            cell.kind === InnerGridCellKind.NewRow ||

            (cell.kind === InnerGridCellKind.Marker && cell.markerKind !== "number");

        cursorOverride = cell.cursor;

    }

    const canDrag = hoveredOnEdge ?? false;

    const cursor = isDragging

        ? "grabbing"

        : canDrag || isResizing

        ? "col-resize"

        : overFill || isFilling

        ? "crosshair"

        : headerHovered || clickableInnerCellHovered || editableBoolHovered || groupHeaderHovered

        ? "pointer"

        : "default";

    const style = React.useMemo(

        () => ({

            // width,

            // height,

            contain: "strict",

            display: "block",

            cursor,

        }),

        [cursor]

    );

    const lastSetCursor = React.useRef<typeof cursor>("default");

    const target = eventTargetRef?.current;

    if (target !== null && target !== undefined && lastSetCursor.current !== style.cursor) {

        // because we have an event target we need to set its cursor instead.

        target.style.cursor = lastSetCursor.current = style.cursor;

    }