glideapps / glide-data-grid / 7213760293

import * as React from "react";

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

import {

    computeBounds,

    getColumnIndexForX,

    getEffectiveColumns,

    getRowIndexForY,

    getStickyWidth,

    useMappedColumns,

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

import {

    GridCellKind,

    type Rectangle,

    type GridSelection,

    type GridMouseEventArgs,

    type GridDragEventArgs,

    type GridKeyEventArgs,

    type InnerGridCell,

    InnerGridCellKind,

    CompactSelection,

    type Item,

    type DrawHeaderCallback,

    isReadWriteCell,

    isInnerOnlyCell,

    booleanCellIsEditable,

    type InnerGridColumn,

    type TrailingRowType,

    groupHeaderKind,

    headerKind,

    outOfBoundsKind,

    OutOfBoundsRegionAxis,

    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";

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 = 8;

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 edgeSize = 20;

            const scrollEdge: GridMouseEventArgs["scrollEdge"] = [

                Math.abs(x) < edgeSize ? -1 : Math.abs(rect.width - x) < edgeSize ? 1 : 0,

                Math.abs(y) < edgeSize ? -1 : Math.abs(rect.height - y) < edgeSize ? 1 : 0,

            ];

            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;

                const canBeFillHandle =

                    fillHandle &&

                    bounds !== undefined &&

                    bounds.x + bounds.width - posX < fillHandleClickSize &&

                    bounds.y + bounds.height - posY < fillHandleClickSize;

                let isFillHandle = false;

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

                    const targetCell = [

                        selection.current.range.x + selection.current.range.width - 1,

                        selection.current.range.y + selection.current.range.height - 1,

                    ];

                    isFillHandle = targetCell[0] === col && targetCell[1] === row;

                }

                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,

        ]

    );

    function isSameItem(item: GridMouseEventArgs | undefined, other: GridMouseEventArgs | undefined) {

        if (item?.kind === "out-of-bounds") {

            return (

            );

        }

        return (

            item?.kind === other?.kind &&

            item?.location[0] === other?.location[0] &&

            item?.location[1] === other?.location[1]

        );

    }

    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) {

        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,