@opencorestack/opengridx 3.9.1 → 3.10.0

package/lib/hooks/core/useGridCellSelection.ts

@@ -1,10 +1,15 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import {
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import type { RefObject } from 'react';
 import { getRowIndex } from '../../utils/rowIndex';
 import { scrollColumnIntoView, scrollRowIntoView } from '../../utils/scroll';
-import { isRtl } from '../../utils/direction';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
-import { isTextEntryElement } from '../../utils/focus';
 import type { FocusedCell } from '../../utils/focus';
 import { getCellValue } from '../../utils/values';
 import { AGGREGATION_FUNCTIONS } from '../../utils/aggregation';
@@ -18,7 +23,12 @@ import {
     rectCellCount,
     resolveCellRange,
 } from '../../utils/cellSelection';
-import type { CellRangeContext, CellRangeRect, CellRangeSpanLookup, ResolvedCellRange } from '../../utils/cellSelection';
+import type {
+    CellRangeContext,
+    CellRangeRect,
+    CellRangeSpanLookup,
+    ResolvedCellRange,
+} from '../../utils/cellSelection';
 import { buildRangeTsv } from '../features/useGridClipboard';
 import type { GridSpanningResult } from '../features/useGridSpanning';
 import type { LayoutResult } from './useLayout';
@@ -34,13 +44,12 @@ import type {
     GridRowModel,
     GridSelectedCell,
 } from '../../types';
+import { useGridCellRangeDrag } from './useGridCellRangeDrag';
 
 /** Root class while a pointer drag selects cells: no text selection meanwhile. Public from v3.3. */
 export const RANGE_DRAGGING_CLASS = 'ogx--range-dragging';
 
 /** Pointer distance (px) from a body edge at which a drag starts scrolling. */
-const AUTO_SCROLL_EDGE = 32;
-const AUTO_SCROLL_MAX_STEP = 40;
 const ANNOUNCEMENT_DELAY_MS = 300;
 
 /** The rectangle in the coordinates rows render with: row indices of the renderable rows, data column indices. */
@@ -127,24 +136,6 @@ export interface UseGridCellSelectionReturn {
     startTrackedDrag: (options: GridTrackedDragOptions) => void;
 }
 
-interface DragState {
-    anchor: GridCellCoordinates;
-    head: GridCellCoordinates;
-    x: number;
-    y: number;
-    frame: number;
-    moved: boolean;
-    /**
-     * Whether the viewport lays out right to left, read once per drag: `getComputedStyle` every frame
-     * forces a style recalculation, which slowed WebKit's auto-scroll enough to delay the release.
-     */
-    rtl?: boolean;
-    /** Ends the drag; `cancelled` unless the button was released normally (tracked drags: Escape cancels). */
-    stop: (cancelled?: boolean, altKey?: boolean) => void;
-    /** A tracked drag (fill handle): told the cell under the pointer each frame instead of moving the range. */
-    onTrack?: (head: GridCellCoordinates, x: number, y: number) => void;
-}
-
 /** A drag that reuses the range drag's hit testing and auto-scroll without selecting (the fill handle, v3.5). */
 export interface GridTrackedDragOptions {
     /** The cell the drag starts on. */
@@ -159,29 +150,6 @@ export interface GridTrackedDragOptions {
     onEnd: (details: { cancelled: boolean; altKey: boolean }) => void;
 }
 
-/** The body cell of `viewport` holding `target`: its row index and field. Not cells of nested grids or detail panels. */
-function cellFromTarget(target: EventTarget | null, viewport: HTMLElement): { rowIndex: number; field: string; element: HTMLElement } | null {
-    if (!target || (target as Node).nodeType !== 1) return null;
-    const element = (target as Element).closest<HTMLElement>('.ogx__cell[data-field]');
-    if (!element || element.closest('.ogx__viewport') !== viewport) return null;
-    const panel = element.closest('.ogx__detail-panel');
-    if (panel && viewport.contains(panel)) return null;
-    const rowElement = element.closest('[role="row"][data-rowindex]');
-    if (!rowElement) return null;
-    const rowIndex = Number(rowElement.getAttribute('data-rowindex'));
-    const field = element.dataset.field;
-    if (!Number.isInteger(rowIndex) || !field) return null;
-    return { rowIndex, field, element };
-}
-
-function clearTextSelection(doc: Document): void {
-    const selection = doc.getSelection();
-    if (selection && selection.rangeCount > 0) selection.removeAllRanges();
-}
-
-const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
-const autoScrollStep = (over: number) => Math.min(AUTO_SCROLL_MAX_STEP, Math.max(2, Math.round(over / 2)));
-
 function warnLargeCopy(cellCount: number): void {
     if (process.env.NODE_ENV === 'production') return;
     console.warn(
@@ -400,256 +368,8 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
         return cells;
     }, [currentRange]);
 
-    // ── Pointer: click, Shift+click and drag ────────────────────────────────
-    const dragRef = useRef<DragState | null>(null);
-    const suppressClickRef = useRef(false);
-
-    useEffect(() => () => dragRef.current?.stop(), []);
-
-    const headAtPoint = useCallback((viewport: HTMLElement, x: number, y: number): GridCellCoordinates | null => {
-        const ctx = latestRef.current.context;
-        if (!ctx) return null;
-        const doc = viewport.ownerDocument;
-        // jsdom has no elementFromPoint.
-        if (typeof doc.elementFromPoint !== 'function') return null;
-        const hit = cellFromTarget(doc.elementFromPoint(x, y), viewport);
-        if (!hit) return null;
-        const id = ctx.rowIds[hit.rowIndex];
-        if (id === undefined) return null;
-        // Over the system or grouping column (left of the data): the first data column.
-        const field = isRangeColumnField(hit.field) ? hit.field : ctx.fields[0];
-        return field === undefined ? null : { id, field };
-    }, []);
-
-    /** The row whose band holds `centerY` (px from the top of the unpinned rows), with `field`. */
-    const headRowAtOffset = useCallback((centerY: number, field: string): GridCellCoordinates | null => {
-        const { context: ctx, layout, pinnedTopRowCount } = latestRef.current;
-        const heights = layout.cumulativeHeights;
-        if (!ctx || heights.length === 0 || centerY < 0) return null;
-        let lo = 0;
-        let hi = heights.length - 1;
-        while (lo < hi) {
-            const mid = (lo + hi) >> 1;
-            if (heights[mid] > centerY) hi = mid; else lo = mid + 1;
-        }
-        const id = ctx.rowIds[lo + pinnedTopRowCount];
-        return id === undefined ? null : { id, field };
-    }, []);
-
-    // The auto-scroll loop schedules the next frame through this ref: a callback cannot name itself.
-    const runDragFrameRef = useRef<(allowScroll: boolean) => void>(() => {});
-    const runDragFrame = useCallback((allowScroll: boolean) => {
-        const drag = dragRef.current;
-        const viewport = latestRef.current.viewportRef.current;
-        if (!drag || !viewport) return;
-        drag.frame = 0;
-        const { layout } = latestRef.current;
-        const box = viewport.getBoundingClientRect();
-        const width = viewport.clientWidth;
-        const height = viewport.clientHeight;
-        const stickyTop = viewport.querySelector(':scope > .ogx__content > .ogx__sticky-top');
-        const stickyBottom = viewport.querySelector(':scope > .ogx__content > .ogx__sticky-bottom');
-        const headerWrap = stickyTop?.querySelector(':scope > .ogx__header-wrap');
-        const bodyTop = stickyTop ? stickyTop.getBoundingClientRect().bottom : box.top;
-        const bodyBottom = Math.min(box.top + height, stickyBottom ? stickyBottom.getBoundingClientRect().top : box.top + height);
-        const headerBottom = headerWrap ? headerWrap.getBoundingClientRect().bottom : bodyTop;
-        // Left-pinned columns (and pinned system columns) sit at the inline start: on the right in a
-        // right-to-left grid, whose vertical scrollbar is on the left.
-        if (drag.rtl === undefined) drag.rtl = isRtl(viewport);
-        const rtl = drag.rtl;
-        const contentLeft = rtl ? box.right - width : box.left;
-        const startPinnedWidth = layout.pinnedSystemColumnsWidth + layout.leftWidth;
-        const bodyLeft = contentLeft + (rtl ? layout.rightWidth : startPinnedWidth);
-        const bodyRight = contentLeft + width - (rtl ? startPinnedWidth : layout.rightWidth);
-
-        // The cell under the pointer; outside the viewport (or over the header) the nearest body cell.
-        const x = clamp(drag.x, contentLeft + 1, contentLeft + width - 2);
-        let y = drag.y;
-        if (y < box.top || y > box.top + height || y < headerBottom) y = clamp(y, bodyTop + 1, Math.max(bodyTop + 1, bodyBottom - 2));
-        // During fast auto-scroll the rows under the pointer may not be rendered yet (virtualization
-        // lags a frame or more on a slow machine), so the hit test finds no cell. Work out the row from
-        // the scroll position and the row heights instead, keeping the column the head already has.
-        const canHitTest = typeof viewport.ownerDocument.elementFromPoint === 'function';
-        const hit = headAtPoint(viewport, x, y);
-        const head = hit ?? (canHitTest && drag.moved
-            ? headRowAtOffset(y - box.top - (stickyTop ? stickyTop.getBoundingClientRect().height : 0) + viewport.scrollTop, drag.head.field)
-            : null);
-        if (head && !isSameCoordinates(head, drag.head)) {
-            drag.head = head;
-            if (!drag.moved && !isSameCoordinates(head, drag.anchor)) {
-                drag.moved = true;
-                latestRef.current.containerRef.current?.classList.add(RANGE_DRAGGING_CLASS);
-                clearTextSelection(viewport.ownerDocument);
-            }
-            if (!drag.onTrack) setRange(drag.anchor, head, 'pointer');
-        }
-        // A tracked drag hears every frame: its target can change while the head stays in one cell.
-        if (drag.onTrack) drag.onTrack(drag.head, drag.x, drag.y);
-
-        if (!allowScroll) return;
-        const outside = drag.y < bodyTop || drag.y > bodyBottom || drag.x < contentLeft || drag.x > contentLeft + width;
-        if (!drag.moved && !outside) return;
-        let dy = 0;
-        let dx = 0;
-        if (drag.y < bodyTop + AUTO_SCROLL_EDGE) dy = -autoScrollStep(bodyTop + AUTO_SCROLL_EDGE - drag.y);
-        else if (drag.y > bodyBottom - AUTO_SCROLL_EDGE) dy = autoScrollStep(drag.y - (bodyBottom - AUTO_SCROLL_EDGE));
-        if (drag.x < bodyLeft + AUTO_SCROLL_EDGE) dx = -autoScrollStep(bodyLeft + AUTO_SCROLL_EDGE - drag.x);
-        else if (drag.x > bodyRight - AUTO_SCROLL_EDGE) dx = autoScrollStep(drag.x - (bodyRight - AUTO_SCROLL_EDGE));
-        const canScrollY = (dy < 0 && viewport.scrollTop > 0) || (dy > 0 && viewport.scrollTop + height < viewport.scrollHeight - 1);
-        // scrollLeft runs from 0 to the maximum, or from minus the maximum to 0 right to left.
-        const maxScroll = viewport.scrollWidth - width;
-        const minLeft = rtl ? -maxScroll : 0;
-        const canScrollX = (dx < 0 && viewport.scrollLeft > minLeft) || (dx > 0 && viewport.scrollLeft < minLeft + maxScroll - 1);
-        if (!canScrollY && !canScrollX) return;
-        if (canScrollY) viewport.scrollTop += dy;
-        if (canScrollX) viewport.scrollLeft += dx;
-        // Keep going while the pointer rests in the edge zone; the next frame picks the new head.
-        drag.frame = requestAnimationFrame(() => runDragFrameRef.current(true));
-    }, [headAtPoint, headRowAtOffset, setRange]);
-    useLayoutEffect(() => {
-        runDragFrameRef.current = runDragFrame;
-    }, [runDragFrame]);
-
-    const startDrag = useCallback((
-        anchor: GridCellCoordinates,
-        head: GridCellCoordinates,
-        x: number,
-        y: number,
-        doc: Document,
-        tracked?: Pick<GridTrackedDragOptions, 'pointerId' | 'onTrack' | 'onEnd'>,
-    ) => {
-        dragRef.current?.stop();
-        // A range drag follows the mouse; a tracked drag (fill handle) follows its pointer, touch included.
-        const moveType = tracked ? 'pointermove' : 'mousemove';
-        const upType = tracked ? 'pointerup' : 'mouseup';
-        const isOwnEvent = (event: MouseEvent) => !tracked || (event as PointerEvent).pointerId === tracked.pointerId;
-        const onMove = (event: MouseEvent) => {
-            const drag = dragRef.current;
-            if (!drag || !isOwnEvent(event)) return;
-            if (event.buttons === 0) {
-                // Released outside the window.
-                drag.stop();
-                return;
-            }
-            drag.x = event.clientX;
-            drag.y = event.clientY;
-            // The native text selection started by the press would otherwise follow the pointer out
-            // of the grid (WebKit), and a page text selection makes Ctrl/Cmd+C leave the copy to the browser.
-            if (drag.moved) {
-                event.preventDefault();
-                clearTextSelection(doc);
-            }
-            if (!drag.frame) drag.frame = requestAnimationFrame(() => runDragFrame(true));
-        };
-        const onUp = (event: MouseEvent) => {
-            const drag = dragRef.current;
-            if (!drag || !isOwnEvent(event)) return;
-            drag.x = event.clientX;
-            drag.y = event.clientY;
-            runDragFrame(false);
-            const moved = drag.moved;
-            drag.stop(false, event.altKey);
-            if (moved) clearTextSelection(doc);
-            if (moved) {
-                // The click that follows lands on the common ancestor of both cells (often the row):
-                // it must not select the row or move focus.
-                suppressClickRef.current = true;
-                setTimeout(() => { suppressClickRef.current = false; }, 0);
-            }
-        };
-        const onCancel = (event: Event) => {
-            if (isOwnEvent(event as MouseEvent)) dragRef.current?.stop();
-        };
-        // Escape abandons a tracked drag (the fill writes nothing).
-        const onKeyDown = (event: KeyboardEvent) => {
-            if (event.key !== 'Escape' || !dragRef.current) return;
-            event.preventDefault();
-            event.stopPropagation();
-            dragRef.current.stop();
-        };
-        const view = doc.defaultView;
-        const onBlur = () => dragRef.current?.stop();
-        let ended = false;
-        const drag: DragState = {
-            anchor, head, x, y, frame: 0, moved: false,
-            onTrack: tracked?.onTrack,
-            stop: (cancelled = true, altKey = false) => {
-                if (drag.frame) cancelAnimationFrame(drag.frame);
-                drag.frame = 0;
-                doc.removeEventListener(moveType, onMove, true);
-                doc.removeEventListener(upType, onUp, true);
-                if (tracked) {
-                    doc.removeEventListener('pointercancel', onCancel, true);
-                    doc.removeEventListener('keydown', onKeyDown, true);
-                }
-                view?.removeEventListener('blur', onBlur);
-                latestRef.current.containerRef.current?.classList.remove(RANGE_DRAGGING_CLASS);
-                if (dragRef.current === drag) dragRef.current = null;
-                if (!ended) {
-                    ended = true;
-                    if (tracked) tracked.onEnd({ cancelled, altKey });
-                }
-            },
-        };
-        dragRef.current = drag;
-        doc.addEventListener(moveType, onMove, true);
-        doc.addEventListener(upType, onUp, true);
-        if (tracked) {
-            doc.addEventListener('pointercancel', onCancel, true);
-            doc.addEventListener('keydown', onKeyDown, true);
-        }
-        view?.addEventListener('blur', onBlur);
-    }, [runDragFrame]);
-
-    const startTrackedDrag = useCallback((options: GridTrackedDragOptions) => {
-        const viewport = latestRef.current.viewportRef.current;
-        if (!viewport || !latestRef.current.enabled) return;
-        const { start, x, y, pointerId, onTrack, onEnd } = options;
-        startDrag(start, start, x, y, viewport.ownerDocument, { pointerId, onTrack, onEnd });
-    }, [startDrag]);
-
-    const handleMouseDown = useCallback((event: React.MouseEvent<HTMLElement>) => {
-        if (event.button !== 0 || event.defaultPrevented) return;
-        const { context: ctx } = latestRef.current;
-        if (!ctx) return;
-        const viewport = event.currentTarget;
-        const hit = cellFromTarget(event.target, viewport);
-        if (!hit || !isRangeColumnField(hit.field)) return;
-        // The fill handle starts its own drag (useGridFillHandle).
-        if ((event.target as Element).closest?.('.ogx__cell-fill-handle')) return;
-        // Typing targets and open editors keep the pointer to themselves.
-        if (hit.element.classList.contains('ogx__cell--editing') || isTextEntryElement(event.target as Element)) return;
-        const id = ctx.rowIds[hit.rowIndex];
-        if (id === undefined) return;
-        const cell = { id, field: hit.field };
-
-        let anchor: GridCellCoordinates = cell;
-        if (event.shiftKey) {
-            const current = currentModel()[0];
-            const focus = focusRef.current;
-            if (current && ctx.rowIndexById.has(current.anchor.id) && ctx.colIndexByField.has(current.anchor.field)) anchor = current.anchor;
-            else if (focus && focus.id !== null && isRangeColumnField(focus.field)) anchor = { id: focus.id, field: focus.field };
-            // Shift+click extends the range: no text selection, no focus move and no click (row
-            // selection, onCellClick) afterwards.
-            event.preventDefault();
-            suppressClickRef.current = true;
-            const doc = viewport.ownerDocument;
-            if (!viewport.contains(doc.activeElement)) viewport.focus({ preventScroll: true });
-        }
-        setRange(anchor, cell, 'pointer');
-        startDrag(anchor, cell, event.clientX, event.clientY, viewport.ownerDocument);
-        if (event.shiftKey) {
-            const drag = dragRef.current;
-            if (drag && !isSameCoordinates(anchor, cell)) drag.moved = true;
-        }
-    }, [currentModel, setRange, startDrag]);
-
-    const handleClickCapture = useCallback((event: React.MouseEvent<HTMLElement>) => {
-        if (!suppressClickRef.current) return;
-        suppressClickRef.current = false;
-        event.stopPropagation();
-        event.preventDefault();
-    }, []);
+    // ── Pointer: click, Shift+click and drag (useGridCellRangeDrag) ──────────────
+    const { startTrackedDrag, handleMouseDown, handleClickCapture } = useGridCellRangeDrag({ latestRef, focusRef, setRange, currentModel });
 
     // ── Live region and status bar ──────────────────────────────────────────
     const columnCount = resolved ? resolved.right - resolved.left + 1 : 0;

package/lib/hooks/core/useGridColumnLookup.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import type { GridColDef, GridRowModel } from '../../types';
 import { buildColumnLookup, type GridColumnLookup } from '../../utils/columnLookup';
+import { untypedColumns } from '../../utils/untypedColumns';
 
 const SEPARATOR = '\u0000';
 
@@ -25,6 +26,6 @@ export function useGridColumnLookup<R extends GridRowModel>(
         if (hiddenFieldsKey) {
             for (const field of hiddenFieldsKey.split(SEPARATOR)) hidden[field] = false;
         }
-        return buildColumnLookup(columns as unknown as GridColDef[], hidden);
+        return buildColumnLookup(untypedColumns(columns), hidden);
     }, [columns, hiddenFieldsKey]);
 }

package/lib/hooks/core/useGridColumns.tsx

@@ -15,6 +15,7 @@ import type {
     GridAggregationModel,
 } from '../../types';
 import type { GridInitialState } from '../../state/types';
+import { untypedColumn, untypedColumns } from '../../utils/untypedColumns';
 
 interface HierarchyHandlers {
     toggleExpansion: (id: GridRowId) => void;
@@ -334,7 +335,7 @@ export function useGridColumns<R extends GridRowModel>(
     }, []);
 
     useEffect(() => {
-        setColumns(activeColumns as unknown as GridColDef[]);
+        setColumns(untypedColumns(activeColumns));
     }, [activeColumns, setColumns]);
 
     // ── Ordered / visible columns ─────────────────────────────────────────────
@@ -370,7 +371,7 @@ export function useGridColumns<R extends GridRowModel>(
         const [movedField] = newOrder.splice(oldIndex, 1);
         newOrder.splice(targetIndex, 0, movedField);
         commitColumnOrder(newOrder, {
-            column: orderedColumns[oldIndex] as unknown as GridColDef,
+            column: untypedColumn(orderedColumns[oldIndex]),
             oldIndex,
             targetIndex,
         });

package/lib/hooks/core/useGridControlledState.ts

@@ -14,6 +14,7 @@ import type {
 } from '../../types';
 import type { GridInitialState, GridDensityState } from '../../state/types';
 import { EMPTY_ROW_GROUPING_MODEL } from '../../utils/gridModes';
+import { selectionSetOf } from '../../utils/selectionSets';
 
 export type GridDensity = GridDensityState['density'];
 
@@ -96,7 +97,7 @@ export interface UseGridControlledStateReturn {
 
     // selection
     rowSelectionModel: GridRowId[];
-    selectedRowIds: Set<GridRowId>;
+    selectedRowIds: ReadonlySet<GridRowId>;
     isSelectionControlled: boolean;
     setInternalRowSelectionModel: React.Dispatch<React.SetStateAction<GridRowId[]>>;
     /** Sets the internal model when uncontrolled and fires onRowSelectionModelChange. */
@@ -267,7 +268,7 @@ export function useGridControlledState(params: UseGridControlledStateParams): Us
     const isSelectionControlled = propRowSelectionModel !== undefined;
     const [internalRowSelectionModel, setInternalRowSelectionModel] = useState<GridRowId[]>([]);
     const rowSelectionModel = isSelectionControlled ? propRowSelectionModel! : internalRowSelectionModel;
-    const selectedRowIds = useMemo(() => new Set(rowSelectionModel), [rowSelectionModel]);
+    const selectedRowIds = useMemo(() => selectionSetOf(rowSelectionModel), [rowSelectionModel]);
 
     // Cleared on every commit: the rendered model is current again (a controlled parent may
     // also have rejected the change).

package/lib/hooks/core/useGridHierarchy.ts

@@ -54,7 +54,7 @@ export function useGridHierarchy<R extends GridRowModel>(params: UseGridHierarch
         sortingMode,
     });
 
-    const rowGroupingHandlers = useRowGrouping({
+    const rowGroupingHandlers = useRowGrouping<R>({
         rows,
         getRowId,
         columns,