@alaarab/ogrid-react 2.1.3 → 2.1.5

package/dist/esm/hooks/useDataGridTableOrchestration.js

@@ -1,199 +0,0 @@
-import { useCallback, useRef, useMemo } from 'react';
-import { useDataGridState } from './useDataGridState';
-import { useColumnResize } from './useColumnResize';
-import { useColumnReorder } from './useColumnReorder';
-import { useVirtualScroll } from './useVirtualScroll';
-import { useLatestRef } from './useLatestRef';
-import { buildHeaderRows } from '../utils';
-// ---------------------------------------------------------------------------
-// Hook
-// ---------------------------------------------------------------------------
-/**
- * Shared orchestration hook for DataGridTable.
- *
- * Encapsulates all state management and computation that is identical across
- * Radix, Fluent, and Material DataGridTable implementations. Each UI package
- * calls this hook, then renders its own framework-specific JSX using the
- * returned values.
- */
-export function useDataGridTableOrchestration(params) {
-    const { props } = params;
-    // ── Refs ────────────────────────────────────────────────────────────────
-    const wrapperRef = useRef(null);
-    const tableContainerRef = useRef(null);
-    const lastMouseShiftRef = useRef(false);
-    // ── Core state ──────────────────────────────────────────────────────────
-    const state = useDataGridState({ props, wrapperRef });
-    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels, pinning } = state;
-    const { visibleCols: visibleColsTyped, totalColCount, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, measuredColumnWidths, } = layout;
-    const visibleCols = visibleColsTyped;
-    const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
-    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
-    const { setActiveCell, handleCellMouseDown, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging } = interaction;
-    const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
-    const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
-    const { headerMenu } = pinning;
-    const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
-    // ── Props destructuring ─────────────────────────────────────────────────
-    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', suppressHorizontalScroll, stickyHeader = true, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, rowHeight, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
-    // ── Derived values ──────────────────────────────────────────────────────
-    const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
-    const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
-    const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
-    const fitToContent = layoutMode === 'content';
-    // ── Column resize ──────────────────────────────────────────────────────
-    const { handleResizeStart, getColumnWidth } = useColumnResize({
-        columnSizingOverrides,
-        setColumnSizingOverrides,
-    });
-    // ── Column reorder ─────────────────────────────────────────────────────
-    const { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown } = useColumnReorder({
-        columns: visibleCols,
-        columnOrder,
-        onColumnOrderChange,
-        enabled: columnReorder === true,
-        pinnedColumns,
-        wrapperRef,
-    });
-    // ── Virtual scroll ─────────────────────────────────────────────────────
-    const virtualScrollEnabled = virtualScroll?.enabled === true;
-    const virtualRowHeight = virtualScroll?.rowHeight ?? 36;
-    const { visibleRange } = useVirtualScroll({
-        totalRows: items.length,
-        rowHeight: virtualRowHeight,
-        enabled: virtualScrollEnabled,
-        overscan: virtualScroll?.overscan,
-        containerRef: wrapperRef,
-    });
-    // ── Memoized callback groups ───────────────────────────────────────────
-    const editCallbacks = useMemo(() => ({ commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit }), [commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit]);
-    const interactionHandlers = useMemo(() => ({ handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu }), [handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu]);
-    // ── Stable refs for volatile state ─────────────────────────────────────
-    const cellDescriptorInputRef = useLatestRef(cellDescriptorInput);
-    const pendingEditorValueRef = useLatestRef(pendingEditorValue);
-    const popoverAnchorElRef = useLatestRef(popoverAnchorEl);
-    const selectedRowIdsRef = useLatestRef(selectedRowIds);
-    // ── Stable row-click handler ───────────────────────────────────────────
-    const handleSingleRowClick = useCallback((e) => {
-        if (rowSelection !== 'single')
-            return;
-        const rowId = e.currentTarget.dataset.rowId;
-        if (!rowId)
-            return;
-        const ids = selectedRowIdsRef.current;
-        updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
-    }, [rowSelection, updateSelection, selectedRowIdsRef]);
-    // ── Return ─────────────────────────────────────────────────────────────
-    return {
-        // Refs
-        wrapperRef,
-        tableContainerRef,
-        lastMouseShiftRef,
-        // State sub-objects
-        layout,
-        rowSel,
-        editing,
-        interaction,
-        ctxMenu,
-        viewModels,
-        pinning,
-        // Column resize
-        handleResizeStart,
-        getColumnWidth,
-        // Column reorder
-        isReorderDragging,
-        dropIndicatorX,
-        handleHeaderMouseDown,
-        // Virtual scroll
-        virtualScrollEnabled,
-        virtualRowHeight,
-        visibleRange,
-        // Derived from props
-        items,
-        columns,
-        getRowId,
-        emptyState,
-        layoutMode,
-        rowSelection,
-        suppressHorizontalScroll,
-        stickyHeader,
-        isLoading,
-        loadingMessage,
-        ariaLabel,
-        ariaLabelledBy,
-        visibleColumns,
-        columnOrder,
-        columnReorder,
-        density,
-        rowHeight,
-        pinnedColumns,
-        currentPage,
-        propPageSize,
-        // Computed values
-        rowNumberOffset,
-        headerRows,
-        allowOverflowX,
-        fitToContent,
-        // Memoized callback groups
-        editCallbacks,
-        interactionHandlers,
-        // Stable refs for volatile state
-        cellDescriptorInputRef,
-        pendingEditorValueRef,
-        popoverAnchorElRef,
-        selectedRowIdsRef,
-        // Convenience handlers
-        handleSingleRowClick,
-        handlePasteVoid,
-        // Layout-derived references
-        visibleCols,
-        totalColCount,
-        hasCheckboxCol,
-        hasRowNumbersCol,
-        colOffset,
-        containerWidth,
-        minTableWidth,
-        desiredTableWidth,
-        columnSizingOverrides,
-        setColumnSizingOverrides,
-        measuredColumnWidths,
-        // Row selection shortcuts
-        selectedRowIds,
-        updateSelection,
-        handleRowCheckboxChange,
-        handleSelectAll,
-        allSelected,
-        someSelected,
-        // Editing shortcuts
-        editingCell,
-        setPopoverAnchorEl,
-        cancelPopoverEdit,
-        // Interaction shortcuts
-        setActiveCell,
-        selectionRange,
-        hasCellSelection,
-        handleGridKeyDown,
-        handleFillHandleMouseDown,
-        handleCopy,
-        handleCut,
-        cutRange,
-        copyRange,
-        canUndo,
-        canRedo,
-        onUndo,
-        onRedo,
-        isDragging,
-        // Context menu shortcuts
-        menuPosition,
-        handleCellContextMenu,
-        closeContextMenu,
-        // ViewModel shortcuts
-        headerFilterInput,
-        cellDescriptorInput,
-        statusBarConfig,
-        showEmptyInGrid,
-        onCellError,
-        // Pinning shortcuts
-        headerMenu,
-    };
-}

package/dist/esm/hooks/useDateFilterState.js

@@ -1,34 +0,0 @@
-/**
- * Date filter state sub-hook for column header filters.
- * Manages temporary date from/to values and apply/clear handlers.
- */
-import { useState, useCallback, useEffect } from 'react';
-export function useDateFilterState(params) {
-    const { dateValue, onDateChange, isFilterOpen } = params;
-    const [tempDateFrom, setTempDateFrom] = useState(dateValue?.from ?? '');
-    const [tempDateTo, setTempDateTo] = useState(dateValue?.to ?? '');
-    // Sync temp state when popover opens
-    useEffect(() => {
-        if (isFilterOpen) {
-            setTempDateFrom(dateValue?.from ?? '');
-            setTempDateTo(dateValue?.to ?? '');
-        }
-    }, [isFilterOpen, dateValue]);
-    const handleDateApply = useCallback(() => {
-        const from = tempDateFrom || undefined;
-        const to = tempDateTo || undefined;
-        onDateChange?.(from || to ? { from, to } : undefined);
-    }, [onDateChange, tempDateFrom, tempDateTo]);
-    const handleDateClear = useCallback(() => {
-        setTempDateFrom('');
-        setTempDateTo('');
-    }, []);
-    return {
-        tempDateFrom,
-        setTempDateFrom,
-        tempDateTo,
-        setTempDateTo,
-        handleDateApply,
-        handleDateClear,
-    };
-}

package/dist/esm/hooks/useDebounce.js

@@ -1,35 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-/**
- * Returns a debounced value that updates after the specified delay when the source value changes.
- */
-export function useDebounce(value, delayMs) {
-    const [debouncedValue, setDebouncedValue] = useState(value);
-    useEffect(() => {
-        const id = setTimeout(() => {
-            setDebouncedValue(value);
-        }, delayMs);
-        return () => clearTimeout(id);
-    }, [value, delayMs]);
-    return debouncedValue;
-}
-/**
- * Returns a stable callback that invokes the given function after the specified delay.
- * Each new call resets the timer.
- */
-export function useDebouncedCallback(fn, delayMs) {
-    const timeoutRef = useRef(undefined);
-    const fnRef = useRef(fn);
-    fnRef.current = fn;
-    const debounced = useCallback(((...args) => {
-        if (timeoutRef.current)
-            clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(() => {
-            fnRef.current(...args);
-        }, delayMs);
-    }), [delayMs]);
-    useEffect(() => () => {
-        if (timeoutRef.current)
-            clearTimeout(timeoutRef.current);
-    }, []);
-    return debounced;
-}

package/dist/esm/hooks/useFillHandle.js

@@ -1,200 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { normalizeSelectionRange } from '../types';
-import { applyFillValues } from '../utils';
-import { useLatestRef } from './useLatestRef';
-/** DOM attribute name for fill-drag range highlighting (same as cell selection drag). */
-const DRAG_ATTR = 'data-drag-range';
-/**
- * Manages Excel-style fill handle drag-to-fill for cell ranges.
- * @param params - Items, columns, selection range, editability, and value change callback.
- * @returns Fill drag state, setter, and mousedown handler for the fill handle.
- */
-export function useFillHandle(params) {
-    const { items, visibleCols, editable, onCellValueChanged, selectionRange, setSelectionRange, setActiveCell, colOffset, wrapperRef, beginBatch, endBatch, } = params;
-    const [fillDrag, setFillDrag] = useState(null);
-    const fillDragEndRef = useRef({ endRow: 0, endCol: 0 });
-    const rafRef = useRef(0);
-    const liveFillRangeRef = useRef(null);
-    const colOffsetRef = useLatestRef(colOffset);
-    useEffect(() => {
-        if (!fillDrag || editable === false || !onCellValueChanged || !wrapperRef.current)
-            return;
-        fillDragEndRef.current = { endRow: fillDrag.startRow, endCol: fillDrag.startCol };
-        liveFillRangeRef.current = null;
-        /** Set of currently drag-marked HTMLElements — avoids O(n) full DOM scan on clear. */
-        const markedCells = new Set();
-        /** Cell lookup index built on drag start — O(1) lookups per frame. */
-        let cellIndex = null;
-        const buildCellIndex = () => {
-            const wrapper = wrapperRef.current;
-            if (!wrapper)
-                return;
-            cellIndex = new Map();
-            const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
-            for (let i = 0; i < cells.length; i++) {
-                const el = cells[i];
-                const r = el.getAttribute('data-row-index') ?? '';
-                const c = el.getAttribute('data-col-index') ?? '';
-                cellIndex.set(`${r},${c}`, el);
-            }
-        };
-        // Build the index once at fill drag start
-        buildCellIndex();
-        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 colOff = colOffsetRef.current;
-            // Un-mark cells no longer in range
-            for (const el of markedCells) {
-                const r = parseInt(el.getAttribute('data-row-index') ?? '', 10);
-                const c = parseInt(el.getAttribute('data-col-index') ?? '', 10) - colOff;
-                if (!(r >= minR && r <= maxR && c >= minC && c <= maxC)) {
-                    el.removeAttribute(DRAG_ATTR);
-                    markedCells.delete(el);
-                }
-            }
-            // Look up only cells in the new range — O(range size) via Map lookup
-            for (let r = minR; r <= maxR; r++) {
-                for (let c = minC; c <= maxC; c++) {
-                    const key = `${r},${c + colOff}`;
-                    let el = cellIndex?.get(key);
-                    // Handle virtual scroll recycling — if element is stale, rebuild index once
-                    if (el && !el.isConnected) {
-                        buildCellIndex();
-                        el = cellIndex?.get(key);
-                    }
-                    if (el) {
-                        if (!el.hasAttribute(DRAG_ATTR))
-                            el.setAttribute(DRAG_ATTR, '');
-                        markedCells.add(el);
-                    }
-                }
-            }
-        };
-        const clearDragAttrs = () => {
-            for (const el of markedCells) {
-                el.removeAttribute(DRAG_ATTR);
-            }
-            markedCells.clear();
-            cellIndex = null;
-        };
-        let lastFillMousePos = null;
-        const resolveRange = (cx, cy) => {
-            const target = document.elementFromPoint(cx, cy);
-            const cell = target?.closest?.('[data-row-index][data-col-index]');
-            if (!cell || !wrapperRef.current?.contains(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 < colOffsetRef.current)
-                return null;
-            const dataCol = c - colOffsetRef.current;
-            return normalizeSelectionRange({
-                startRow: fillDrag.startRow,
-                startCol: fillDrag.startCol,
-                endRow: r,
-                endCol: dataCol,
-            });
-        };
-        const onMove = (e) => {
-            lastFillMousePos = { cx: e.clientX, cy: e.clientY };
-            if (rafRef.current)
-                cancelAnimationFrame(rafRef.current);
-            rafRef.current = requestAnimationFrame(() => {
-                rafRef.current = 0;
-                if (!lastFillMousePos)
-                    return;
-                const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
-                if (!newRange)
-                    return;
-                // Skip if unchanged
-                const prev = liveFillRangeRef.current;
-                if (prev &&
-                    prev.startRow === newRange.startRow &&
-                    prev.startCol === newRange.startCol &&
-                    prev.endRow === newRange.endRow &&
-                    prev.endCol === newRange.endCol) {
-                    return;
-                }
-                liveFillRangeRef.current = newRange;
-                fillDragEndRef.current = { endRow: newRange.endRow, endCol: newRange.endCol };
-                applyDragAttrs(newRange);
-            });
-        };
-        const onUp = () => {
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = 0;
-            }
-            // Flush: resolve final position if RAF hasn't executed yet
-            if (lastFillMousePos) {
-                const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
-                if (flushed) {
-                    liveFillRangeRef.current = flushed;
-                    fillDragEndRef.current = { endRow: flushed.endRow, endCol: flushed.endCol };
-                }
-            }
-            clearDragAttrs();
-            const end = fillDragEndRef.current;
-            const norm = normalizeSelectionRange({
-                startRow: fillDrag.startRow,
-                startCol: fillDrag.startCol,
-                endRow: end.endRow,
-                endCol: end.endCol,
-            });
-            // Commit range to React state
-            setSelectionRange(norm);
-            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOffsetRef.current });
-            // Apply fill values
-            const fillEvents = applyFillValues(norm, fillDrag.startRow, fillDrag.startCol, items, visibleCols);
-            if (fillEvents.length > 0) {
-                beginBatch?.();
-                for (const evt of fillEvents)
-                    onCellValueChanged(evt);
-                endBatch?.();
-            }
-            setFillDrag(null);
-            liveFillRangeRef.current = null;
-        };
-        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);
-        };
-    }, [
-        fillDrag,
-        editable,
-        items,
-        visibleCols,
-        setSelectionRange,
-        setActiveCell,
-        onCellValueChanged,
-        beginBatch,
-        endBatch,
-        colOffsetRef,
-        wrapperRef,
-    ]);
-    // Ref mirror — keeps handleFillHandleMouseDown stable across selection changes
-    const selectionRangeRef = useRef(selectionRange);
-    selectionRangeRef.current = selectionRange;
-    const handleFillHandleMouseDown = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const range = selectionRangeRef.current;
-        if (!range)
-            return;
-        setFillDrag({
-            startRow: range.startRow,
-            startCol: range.startCol,
-        });
-    }, []);
-    return { fillDrag, setFillDrag, handleFillHandleMouseDown };
-}

package/dist/esm/hooks/useFilterOptions.js

@@ -1,55 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-/** Shallow-compare two string arrays by value. */
-function fieldsEqual(a, b) {
-    if (a.length !== b.length)
-        return false;
-    for (let i = 0; i < a.length; i++) {
-        if (a[i] !== b[i])
-            return false;
-    }
-    return true;
-}
-/**
- * Load filter options for the given fields from a data source.
- *
- * Accepts `IDataSource<T>` or a plain `{ fetchFilterOptions }` object.
- */
-export function useFilterOptions(dataSource, fields) {
-    // Stabilize the fields array so inline literals (e.g. ['a','b']) don't
-    // cause infinite re-render loops via useCallback/useEffect deps.
-    const fieldsRef = useRef(fields);
-    if (!fieldsEqual(fieldsRef.current, fields)) {
-        fieldsRef.current = fields;
-    }
-    const stableFields = fieldsRef.current;
-    const [filterOptions, setFilterOptions] = useState({});
-    const [loadingOptions, setLoadingOptions] = useState({});
-    const load = useCallback(async () => {
-        const fetcher = 'fetchFilterOptions' in dataSource && typeof dataSource.fetchFilterOptions === 'function'
-            ? dataSource.fetchFilterOptions.bind(dataSource)
-            : undefined;
-        if (!fetcher) {
-            setFilterOptions({});
-            setLoadingOptions({});
-            return;
-        }
-        const loading = {};
-        stableFields.forEach((f) => { loading[f] = true; });
-        setLoadingOptions(loading);
-        const results = {};
-        await Promise.all(stableFields.map(async (field) => {
-            try {
-                results[field] = await fetcher(field);
-            }
-            catch {
-                results[field] = [];
-            }
-        }));
-        setFilterOptions(results);
-        setLoadingOptions({});
-    }, [dataSource, stableFields]);
-    useEffect(() => {
-        load().catch(() => { });
-    }, [load]);
-    return { filterOptions, loadingOptions };
-}

package/dist/esm/hooks/useInlineCellEditorState.js

@@ -1,38 +0,0 @@
-/**
- * Headless inline cell editor state for Fluent, Material, and Radix InlineCellEditor.
- * UI packages use this hook and render only the framework input (Input, TextField, select, Checkbox).
- */
-import { useState, useCallback } from 'react';
-/**
- * Returns localValue/setLocalValue (for text), handleKeyDown (Escape cancel, Enter commit for text),
- * handleBlur (commit on blur for text), commit(value), cancel(). UI renders only the input.
- */
-export function useInlineCellEditorState(params) {
-    const { value, editorType, onCommit, onCancel } = params;
-    const [localValue, setLocalValue] = useState(value !== null && value !== undefined ? String(value) : '');
-    const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            e.stopPropagation(); // Don't let the grid handler clear selection on Escape
-            onCancel();
-        }
-        if (e.key === 'Enter' && editorType === 'text') {
-            e.preventDefault();
-            e.stopPropagation(); // Don't let the grid handler re-open an editor
-            onCommit(localValue);
-        }
-    }, [onCancel, onCommit, localValue, editorType]);
-    const handleBlur = useCallback(() => {
-        if (editorType === 'text') {
-            onCommit(localValue);
-        }
-    }, [editorType, localValue, onCommit]);
-    return {
-        localValue,
-        setLocalValue,
-        handleKeyDown,
-        handleBlur,
-        commit: onCommit,
-        cancel: onCancel,
-    };
-}