@alaarab/ogrid-core 1.8.2 → 2.0.0-beta

package/dist/esm/hooks/useCellSelection.js

@@ -1,318 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { normalizeSelectionRange } from '../types';
-/** Compares two selection ranges by value. */
-function rangesEqual(a, b) {
-    if (a === b)
-        return true;
-    if (!a || !b)
-        return false;
-    return a.startRow === b.startRow && a.endRow === b.endRow &&
-        a.startCol === b.startCol && a.endCol === b.endCol;
-}
-/** DOM attribute name used for drag-range highlighting (bypasses React). */
-const DRAG_ATTR = 'data-drag-range';
-/** Auto-scroll config */
-const AUTO_SCROLL_EDGE = 40; // px from wrapper edge to trigger
-const AUTO_SCROLL_MIN_SPEED = 2;
-const AUTO_SCROLL_MAX_SPEED = 20;
-const AUTO_SCROLL_INTERVAL = 16; // ~60fps
-/** Compute scroll speed proportional to distance past the edge, capped. */
-function autoScrollSpeed(distance) {
-    const t = Math.min(distance / AUTO_SCROLL_EDGE, 1);
-    return AUTO_SCROLL_MIN_SPEED + t * (AUTO_SCROLL_MAX_SPEED - AUTO_SCROLL_MIN_SPEED);
-}
-export function useCellSelection(params) {
-    const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
-    const [selectionRange, _setSelectionRange] = useState(null);
-    const isDraggingRef = useRef(false);
-    const [isDragging, setIsDragging] = useState(false);
-    /** True once a mousemove has been seen during the current drag gesture. */
-    const dragMovedRef = useRef(false);
-    const dragStartRef = useRef(null);
-    const rafRef = useRef(0);
-    /** Live drag range kept in a ref — only committed to React state on mouseup. */
-    const liveDragRangeRef = useRef(null);
-    /** Auto-scroll interval during drag. */
-    const autoScrollRef = useRef(null);
-    // Ref mirror of selectionRange — lets handleCellMouseDown read current value
-    // without adding selectionRange to its useCallback deps (keeps it stable).
-    const selectionRangeRef = useRef(selectionRange);
-    selectionRangeRef.current = selectionRange;
-    // Deduplicating setter — skips re-render when the range hasn't actually changed.
-    const setSelectionRange = useCallback((next) => {
-        if (rangesEqual(selectionRangeRef.current, next))
-            return;
-        _setSelectionRange(next);
-    }, []);
-    const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
-        // Only handle primary (left) button — let middle-click scroll and right-click context menu work natively
-        if (e.button !== 0)
-            return;
-        if (globalColIndex < colOffset)
-            return;
-        // Prevent native text selection during cell drag
-        e.preventDefault();
-        const dataColIndex = globalColIndex - colOffset;
-        const currentRange = selectionRangeRef.current;
-        if (e.shiftKey && currentRange != null) {
-            setSelectionRange(normalizeSelectionRange({
-                startRow: currentRange.startRow,
-                startCol: currentRange.startCol,
-                endRow: rowIndex,
-                endCol: dataColIndex,
-            }));
-            setActiveCell({ rowIndex, columnIndex: globalColIndex });
-        }
-        else {
-            dragStartRef.current = { row: rowIndex, col: dataColIndex };
-            dragMovedRef.current = false;
-            const initial = {
-                startRow: rowIndex,
-                startCol: dataColIndex,
-                endRow: rowIndex,
-                endCol: dataColIndex,
-            };
-            setSelectionRange(initial);
-            liveDragRangeRef.current = initial;
-            setActiveCell({ rowIndex, columnIndex: globalColIndex });
-            // Mark drag as "started" but don't set isDragging state yet —
-            // setIsDragging(true) is deferred to the first mousemove to avoid
-            // a true→false toggle on simple clicks (which causes 2 extra renders).
-            isDraggingRef.current = true;
-        }
-    }, [colOffset, setActiveCell]);
-    const handleSelectAllCells = useCallback(() => {
-        if (rowCount === 0 || visibleColCount === 0)
-            return;
-        setSelectionRange({
-            startRow: 0,
-            startCol: 0,
-            endRow: rowCount - 1,
-            endCol: visibleColCount - 1,
-        });
-        setActiveCell({ rowIndex: 0, columnIndex: colOffset });
-    }, [rowCount, visibleColCount, colOffset, setActiveCell]);
-    /** Last known mouse position during drag — used by mouseUp to flush pending RAF work. */
-    const lastMousePosRef = useRef(null);
-    // Window mouse move/up for drag selection.
-    // Performance: during drag, we update a ref + toggle DOM attributes via rAF.
-    // React state is only committed on mouseup (single re-render instead of 60-120/s).
-    useEffect(() => {
-        const colOff = colOffset; // capture for closure
-        /** Toggle DRAG_ATTR on cell-content divs to show the range highlight via CSS. */
-        const applyDragAttrs = (range) => {
-            const wrapper = wrapperRef.current;
-            if (!wrapper)
-                return;
-            const minR = Math.min(range.startRow, range.endRow);
-            const maxR = Math.max(range.startRow, range.endRow);
-            const minC = Math.min(range.startCol, range.endCol);
-            const maxC = Math.max(range.startCol, range.endCol);
-            const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
-            for (let i = 0; i < cells.length; i++) {
-                const el = cells[i];
-                const r = parseInt(el.getAttribute('data-row-index'), 10);
-                const c = parseInt(el.getAttribute('data-col-index'), 10) - colOff;
-                const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
-                if (inRange) {
-                    if (!el.hasAttribute(DRAG_ATTR))
-                        el.setAttribute(DRAG_ATTR, '');
-                }
-                else {
-                    if (el.hasAttribute(DRAG_ATTR))
-                        el.removeAttribute(DRAG_ATTR);
-                }
-            }
-        };
-        const clearDragAttrs = () => {
-            const wrapper = wrapperRef.current;
-            if (!wrapper)
-                return;
-            const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
-            for (let i = 0; i < marked.length; i++)
-                marked[i].removeAttribute(DRAG_ATTR);
-        };
-        /** Resolve mouse coordinates to a cell range (shared by RAF callback and mouseUp flush). */
-        const resolveRange = (cx, cy) => {
-            if (!dragStartRef.current)
-                return null;
-            const target = document.elementFromPoint(cx, cy);
-            const cell = target?.closest?.('[data-row-index][data-col-index]');
-            if (!cell)
-                return null;
-            const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
-            const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
-            if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
-                return null;
-            const dataCol = c - colOff;
-            const start = dragStartRef.current;
-            return normalizeSelectionRange({
-                startRow: start.row,
-                startCol: start.col,
-                endRow: r,
-                endCol: dataCol,
-            });
-        };
-        /** Start or update auto-scroll interval based on mouse position relative to wrapper edges. */
-        const updateAutoScroll = () => {
-            const wrapper = wrapperRef.current;
-            const pos = lastMousePosRef.current;
-            if (!wrapper || !pos || !isDraggingRef.current) {
-                stopAutoScroll();
-                return;
-            }
-            const rect = wrapper.getBoundingClientRect();
-            let dx = 0;
-            let dy = 0;
-            if (pos.cy < rect.top + AUTO_SCROLL_EDGE) {
-                dy = -autoScrollSpeed(rect.top + AUTO_SCROLL_EDGE - pos.cy);
-            }
-            else if (pos.cy > rect.bottom - AUTO_SCROLL_EDGE) {
-                dy = autoScrollSpeed(pos.cy - (rect.bottom - AUTO_SCROLL_EDGE));
-            }
-            if (pos.cx < rect.left + AUTO_SCROLL_EDGE) {
-                dx = -autoScrollSpeed(rect.left + AUTO_SCROLL_EDGE - pos.cx);
-            }
-            else if (pos.cx > rect.right - AUTO_SCROLL_EDGE) {
-                dx = autoScrollSpeed(pos.cx - (rect.right - AUTO_SCROLL_EDGE));
-            }
-            if (dx === 0 && dy === 0) {
-                stopAutoScroll();
-                return;
-            }
-            // Start interval if not already running
-            if (!autoScrollRef.current) {
-                autoScrollRef.current = setInterval(() => {
-                    const w = wrapperRef.current;
-                    const p = lastMousePosRef.current;
-                    if (!w || !p || !isDraggingRef.current) {
-                        stopAutoScroll();
-                        return;
-                    }
-                    const r = w.getBoundingClientRect();
-                    let sdx = 0;
-                    let sdy = 0;
-                    if (p.cy < r.top + AUTO_SCROLL_EDGE)
-                        sdy = -autoScrollSpeed(r.top + AUTO_SCROLL_EDGE - p.cy);
-                    else if (p.cy > r.bottom - AUTO_SCROLL_EDGE)
-                        sdy = autoScrollSpeed(p.cy - (r.bottom - AUTO_SCROLL_EDGE));
-                    if (p.cx < r.left + AUTO_SCROLL_EDGE)
-                        sdx = -autoScrollSpeed(r.left + AUTO_SCROLL_EDGE - p.cx);
-                    else if (p.cx > r.right - AUTO_SCROLL_EDGE)
-                        sdx = autoScrollSpeed(p.cx - (r.right - AUTO_SCROLL_EDGE));
-                    if (sdx === 0 && sdy === 0) {
-                        stopAutoScroll();
-                        return;
-                    }
-                    w.scrollTop += sdy;
-                    w.scrollLeft += sdx;
-                    // After scrolling, re-resolve the cell under the mouse and update drag range
-                    const newRange = resolveRange(p.cx, p.cy);
-                    if (newRange) {
-                        liveDragRangeRef.current = newRange;
-                        applyDragAttrs(newRange);
-                    }
-                }, AUTO_SCROLL_INTERVAL);
-            }
-        };
-        const stopAutoScroll = () => {
-            if (autoScrollRef.current) {
-                clearInterval(autoScrollRef.current);
-                autoScrollRef.current = null;
-            }
-        };
-        const onMove = (e) => {
-            if (!isDraggingRef.current || !dragStartRef.current)
-                return;
-            // Promote to a real drag on first mousemove (deferred from mouseDown
-            // to avoid a true→false toggle on simple clicks).
-            if (!dragMovedRef.current) {
-                dragMovedRef.current = true;
-                setIsDragging(true);
-            }
-            // Always store latest position so mouseUp can flush if RAF hasn't executed
-            lastMousePosRef.current = { cx: e.clientX, cy: e.clientY };
-            // Update auto-scroll based on mouse proximity to edges
-            updateAutoScroll();
-            // Cancel previous pending frame
-            if (rafRef.current)
-                cancelAnimationFrame(rafRef.current);
-            rafRef.current = requestAnimationFrame(() => {
-                rafRef.current = 0;
-                const pos = lastMousePosRef.current;
-                if (!pos)
-                    return;
-                const newRange = resolveRange(pos.cx, pos.cy);
-                if (!newRange)
-                    return;
-                // Skip if range unchanged
-                const prev = liveDragRangeRef.current;
-                if (prev &&
-                    prev.startRow === newRange.startRow &&
-                    prev.startCol === newRange.startCol &&
-                    prev.endRow === newRange.endRow &&
-                    prev.endCol === newRange.endCol) {
-                    return;
-                }
-                liveDragRangeRef.current = newRange;
-                // DOM-only highlighting — no React state update until mouseup
-                applyDragAttrs(newRange);
-            });
-        };
-        const onUp = () => {
-            if (!isDraggingRef.current)
-                return;
-            stopAutoScroll();
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = 0;
-            }
-            isDraggingRef.current = false;
-            const wasDrag = dragMovedRef.current;
-            if (wasDrag) {
-                // Flush: if the last RAF hasn't executed yet, resolve the range now from the
-                // last known mouse position so the final committed range is always accurate.
-                const pos = lastMousePosRef.current;
-                if (pos) {
-                    const flushed = resolveRange(pos.cx, pos.cy);
-                    if (flushed)
-                        liveDragRangeRef.current = flushed;
-                }
-                // Commit final range to React state (triggers a single re-render)
-                const finalRange = liveDragRangeRef.current;
-                if (finalRange) {
-                    setSelectionRange(finalRange);
-                    setActiveCell({
-                        rowIndex: finalRange.endRow,
-                        columnIndex: finalRange.endCol + colOff,
-                    });
-                }
-            }
-            // For simple clicks (no drag movement), mouseDown already set
-            // selectionRange + activeCell — skip redundant state updates.
-            // Clean up DOM attributes — React will apply CSS-module classes on the same paint
-            clearDragAttrs();
-            liveDragRangeRef.current = null;
-            lastMousePosRef.current = null;
-            dragStartRef.current = null;
-            if (wasDrag)
-                setIsDragging(false);
-        };
-        window.addEventListener('mousemove', onMove, true);
-        window.addEventListener('mouseup', onUp, true);
-        return () => {
-            window.removeEventListener('mousemove', onMove, true);
-            window.removeEventListener('mouseup', onUp, true);
-            if (rafRef.current)
-                cancelAnimationFrame(rafRef.current);
-            stopAutoScroll();
-        };
-    }, [colOffset, setActiveCell, wrapperRef]);
-    return {
-        selectionRange,
-        setSelectionRange,
-        handleCellMouseDown,
-        handleSelectAllCells,
-        isDragging,
-    };
-}

package/dist/esm/hooks/useClipboard.js

@@ -1,162 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { getCellValue } from '../utils';
-import { parseValue } from '../utils/valueParsers';
-import { normalizeSelectionRange } from '../types';
-export function useClipboard(params) {
-    const { items, visibleCols, colOffset, selectionRange, activeCell, editable, onCellValueChanged, beginBatch, endBatch, } = params;
-    const cutRangeRef = useRef(null);
-    const [cutRange, setCutRange] = useState(null);
-    const [copyRange, setCopyRange] = useState(null);
-    /** In-page clipboard fallback when system clipboard is unavailable. */
-    const internalClipboardRef = useRef(null);
-    const handleCopy = useCallback(() => {
-        const range = selectionRange ??
-            (activeCell != null
-                ? {
-                    startRow: activeCell.rowIndex,
-                    startCol: activeCell.columnIndex - colOffset,
-                    endRow: activeCell.rowIndex,
-                    endCol: activeCell.columnIndex - colOffset,
-                }
-                : null);
-        if (range == null)
-            return;
-        const norm = normalizeSelectionRange(range);
-        const rows = [];
-        for (let r = norm.startRow; r <= norm.endRow; r++) {
-            const cells = [];
-            for (let c = norm.startCol; c <= norm.endCol; c++) {
-                if (r >= items.length || c >= visibleCols.length)
-                    break;
-                const item = items[r];
-                const col = visibleCols[c];
-                const raw = getCellValue(item, col);
-                const val = col.valueFormatter ? col.valueFormatter(raw, item) : raw;
-                cells.push(val != null && val !== '' ? String(val).replace(/\t/g, ' ').replace(/\n/g, ' ') : '');
-            }
-            rows.push(cells.join('\t'));
-        }
-        const tsv = rows.join('\r\n');
-        internalClipboardRef.current = tsv;
-        setCopyRange(norm);
-        void navigator.clipboard.writeText(tsv).catch(() => { });
-    }, [selectionRange, activeCell, colOffset, items, visibleCols]);
-    const handleCut = useCallback(() => {
-        if (editable === false)
-            return;
-        const range = selectionRange ??
-            (activeCell != null
-                ? {
-                    startRow: activeCell.rowIndex,
-                    startCol: activeCell.columnIndex - colOffset,
-                    endRow: activeCell.rowIndex,
-                    endCol: activeCell.columnIndex - colOffset,
-                }
-                : null);
-        if (range == null || onCellValueChanged == null)
-            return;
-        const norm = normalizeSelectionRange(range);
-        cutRangeRef.current = norm;
-        setCutRange(norm);
-        setCopyRange(null);
-        handleCopy();
-        // handleCopy sets copyRange — override it back since this is a cut
-        setCopyRange(null);
-    }, [selectionRange, activeCell, colOffset, handleCopy, editable, onCellValueChanged]);
-    const handlePaste = useCallback(async () => {
-        if (editable === false)
-            return;
-        if (onCellValueChanged == null)
-            return;
-        let text;
-        try {
-            text = await navigator.clipboard.readText();
-        }
-        catch {
-            text = '';
-        }
-        if (!text.trim() && internalClipboardRef.current != null) {
-            text = internalClipboardRef.current;
-        }
-        if (!text.trim())
-            return;
-        const norm = selectionRange ??
-            (activeCell != null
-                ? {
-                    startRow: activeCell.rowIndex,
-                    startCol: activeCell.columnIndex - colOffset,
-                    endRow: activeCell.rowIndex,
-                    endCol: activeCell.columnIndex - colOffset,
-                }
-                : null);
-        const anchorRow = norm ? norm.startRow : 0;
-        const anchorCol = norm ? norm.startCol : 0;
-        const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
-        beginBatch?.();
-        for (let r = 0; r < lines.length; r++) {
-            const cells = lines[r].split('\t');
-            for (let c = 0; c < cells.length; c++) {
-                const targetRow = anchorRow + r;
-                const targetCol = anchorCol + c;
-                if (targetRow >= items.length || targetCol >= visibleCols.length)
-                    continue;
-                const item = items[targetRow];
-                const col = visibleCols[targetCol];
-                const colEditable = col.editable === true ||
-                    (typeof col.editable === 'function' && col.editable(item));
-                if (!colEditable)
-                    continue;
-                const rawValue = cells[c] ?? '';
-                const oldValue = getCellValue(item, col);
-                const result = parseValue(rawValue, oldValue, item, col);
-                if (!result.valid)
-                    continue;
-                onCellValueChanged({
-                    item,
-                    columnId: col.columnId,
-                    field: col.columnId,
-                    oldValue,
-                    newValue: result.value,
-                    rowIndex: targetRow,
-                });
-            }
-        }
-        if (cutRangeRef.current) {
-            const cut = cutRangeRef.current;
-            for (let r = cut.startRow; r <= cut.endRow; r++) {
-                for (let c = cut.startCol; c <= cut.endCol; c++) {
-                    if (r >= items.length || c >= visibleCols.length)
-                        continue;
-                    const item = items[r];
-                    const col = visibleCols[c];
-                    const colEditable = col.editable === true ||
-                        (typeof col.editable === 'function' && col.editable(item));
-                    if (!colEditable)
-                        continue;
-                    const oldValue = getCellValue(item, col);
-                    const result = parseValue('', oldValue, item, col);
-                    if (!result.valid)
-                        continue;
-                    onCellValueChanged({
-                        item,
-                        columnId: col.columnId,
-                        field: col.columnId,
-                        oldValue,
-                        newValue: result.value,
-                        rowIndex: r,
-                    });
-                }
-            }
-            cutRangeRef.current = null;
-            setCutRange(null);
-        }
-        endBatch?.();
-        setCopyRange(null);
-    }, [selectionRange, activeCell, colOffset, items, visibleCols, editable, onCellValueChanged, beginBatch, endBatch]);
-    const clearClipboardRanges = useCallback(() => {
-        setCopyRange(null);
-        setCutRange(null);
-        cutRangeRef.current = null;
-    }, []);
-    return { handleCopy, handleCut, handlePaste, cutRangeRef, cutRange, copyRange, clearClipboardRanges };
-}

package/dist/esm/hooks/useColumnChooserState.js

@@ -1,62 +0,0 @@
-/**
- * Headless column chooser state and handlers for Fluent, Material, and Radix.
- * UI packages use this hook and render only trigger + popover (checkboxes, Select All, Clear All).
- */
-import { useState, useCallback, useEffect } from 'react';
-/**
- * Returns open/setOpen, handleToggle, handleClose (Escape handled in hook),
- * handleCheckboxChange(columnKey)(visible), handleSelectAll, handleClearAll,
- * visibleCount, totalCount. UI renders trigger + popover and wires handlers.
- */
-export function useColumnChooserState(params) {
-    const { columns, visibleColumns, onVisibilityChange } = params;
-    const [open, setOpen] = useState(false);
-    useEffect(() => {
-        if (!open)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                setOpen(false);
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown, true);
-        return () => document.removeEventListener('keydown', handleKeyDown, true);
-    }, [open]);
-    const handleToggle = useCallback(() => {
-        setOpen((prev) => !prev);
-    }, []);
-    const handleClose = useCallback(() => {
-        setOpen(false);
-    }, []);
-    const handleCheckboxChange = useCallback((columnKey) => (visible) => {
-        onVisibilityChange(columnKey, visible);
-    }, [onVisibilityChange]);
-    const handleSelectAll = useCallback(() => {
-        columns.forEach((col) => {
-            if (!visibleColumns.has(col.columnId)) {
-                onVisibilityChange(col.columnId, true);
-            }
-        });
-    }, [columns, visibleColumns, onVisibilityChange]);
-    const handleClearAll = useCallback(() => {
-        columns.forEach((col) => {
-            if (!col.required && visibleColumns.has(col.columnId)) {
-                onVisibilityChange(col.columnId, false);
-            }
-        });
-    }, [columns, visibleColumns, onVisibilityChange]);
-    const visibleCount = visibleColumns.size;
-    const totalCount = columns.length;
-    return {
-        open,
-        setOpen,
-        handleToggle,
-        handleClose,
-        handleCheckboxChange,
-        handleSelectAll,
-        handleClearAll,
-        visibleCount,
-        totalCount,
-    };
-}