@alaarab/ogrid-react 2.0.22 → 2.1.0

package/dist/esm/hooks/useColumnPinning.js

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback } from 'react';
 /**
  * Manages column pinning state (left/right sticky positioning).
  * Supports controlled and uncontrolled modes.
@@ -6,8 +6,8 @@ import { useState, useCallback, useMemo } from 'react';
  */
 export function useColumnPinning(params) {
     const { columns, pinnedColumns: controlledPinnedColumns, onColumnPinned } = params;
-    // Initialize internal state from column.pinned definitions
-    const initialPinnedColumns = useMemo(() => {
+    // Initialize internal state from column.pinned definitions (mount only)
+    const [internalPinnedColumns, setInternalPinnedColumns] = useState(() => {
         const initial = {};
         for (const col of columns) {
             if (col.pinned) {
@@ -15,22 +15,21 @@ export function useColumnPinning(params) {
             }
         }
         return initial;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Only on mount
-    const [internalPinnedColumns, setInternalPinnedColumns] = useState(initialPinnedColumns);
+    });
     // Use controlled state if provided, otherwise internal
     const pinnedColumns = controlledPinnedColumns ?? internalPinnedColumns;
     const pinColumn = useCallback((columnId, side) => {
         const next = { ...pinnedColumns, [columnId]: side };
-        setInternalPinnedColumns(next);
+        if (!controlledPinnedColumns)
+            setInternalPinnedColumns(next);
         onColumnPinned?.(columnId, side);
-    }, [pinnedColumns, onColumnPinned]);
+    }, [pinnedColumns, controlledPinnedColumns, onColumnPinned]);
     const unpinColumn = useCallback((columnId) => {
-        const next = { ...pinnedColumns };
-        delete next[columnId];
-        setInternalPinnedColumns(next);
+        const { [columnId]: _, ...next } = pinnedColumns;
+        if (!controlledPinnedColumns)
+            setInternalPinnedColumns(next);
         onColumnPinned?.(columnId, null);
-    }, [pinnedColumns, onColumnPinned]);
+    }, [pinnedColumns, controlledPinnedColumns, onColumnPinned]);
     const isPinned = useCallback((columnId) => {
         return pinnedColumns[columnId];
     }, [pinnedColumns]);

package/dist/esm/hooks/useColumnReorder.js

@@ -98,7 +98,14 @@ export function useColumnReorder(params) {
                 if (!wrapper)
                     return;
                 const currentOrder = columnOrderRef.current ?? columnsRef.current.map((c) => c.columnId);
-                const result = calculateDropTarget(moveEvent.clientX, currentOrder, columnId, draggedPinState, wrapper, pinnedShape);
+                const result = calculateDropTarget({
+                    mouseX: moveEvent.clientX,
+                    columnOrder: currentOrder,
+                    draggedColumnId: columnId,
+                    draggedPinState,
+                    tableElement: wrapper,
+                    pinnedColumns: pinnedShape,
+                });
                 if (result) {
                     latestDropTargetIndex = result.targetIndex;
                     setDropIndicatorX(result.indicatorX);

package/dist/esm/hooks/useColumnResize.js

@@ -23,6 +23,11 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
     const handleResizeStart = useCallback((e, col) => {
         e.preventDefault();
         e.stopPropagation();
+        // Clean up any in-progress drag before starting a new one
+        if (cleanupRef.current) {
+            cleanupRef.current();
+            cleanupRef.current = null;
+        }
         const startX = e.clientX;
         const columnId = col.columnId;
         // Measure the actual rendered width from the DOM. With table-layout: auto,
@@ -111,8 +116,7 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
         document.addEventListener('mousemove', onMove);
         document.addEventListener('mouseup', onUp);
         cleanupRef.current = cleanup;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultWidth, minWidth, setColumnSizingOverrides]); // columnSizingOverrides read via ref
+    }, [defaultWidth, minWidth, setColumnSizingOverrides, columnSizingOverridesRef]);
     const getColumnWidth = useCallback((col) => {
         return columnSizingOverrides[col.columnId]?.widthPx
             ?? col.idealWidth

package/dist/esm/hooks/useDataGridContextMenu.js

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { useContextMenu } from './useContextMenu';
+// Stable no-op handlers used when cellSelection is disabled
+const NOOP = () => { };
+const NOOP_CTX = (_e) => { };
+/**
+ * Manages context menu position and handlers.
+ * Extracted from useDataGridState for modularity.
+ */
+export function useDataGridContextMenu(params) {
+    const { cellSelection } = params;
+    const { contextMenuPosition, setContextMenuPosition, handleCellContextMenu, closeContextMenu } = useContextMenu();
+    const contextMenuState = useMemo(() => ({
+        menuPosition: cellSelection ? contextMenuPosition : null,
+        setMenuPosition: cellSelection ? setContextMenuPosition : NOOP,
+        handleCellContextMenu: cellSelection ? handleCellContextMenu : NOOP_CTX,
+        closeContextMenu: cellSelection ? closeContextMenu : NOOP,
+    }), [cellSelection, contextMenuPosition, setContextMenuPosition, handleCellContextMenu, closeContextMenu]);
+    return {
+        contextMenu: contextMenuState,
+        contextMenuPosition,
+        setContextMenuPosition,
+    };
+}

package/dist/esm/hooks/useDataGridEditing.js

@@ -0,0 +1,56 @@
+import { useMemo, useCallback, useState } from 'react';
+import { parseValue } from '../utils';
+import { useLatestRef } from './useLatestRef';
+/**
+ * Manages cell editing commit/cancel logic and popover editor state.
+ * Extracted from useDataGridState for modularity.
+ *
+ * The editingCell/setEditingCell/pendingEditorValue/setPendingEditorValue are
+ * passed in from useCellEditing() (called at the orchestrator level) to avoid
+ * circular dependencies with useDataGridInteraction.
+ */
+export function useDataGridEditing(params) {
+    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, onCellValueChanged, setActiveCell, } = params;
+    const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+    const visibleColsRef = useLatestRef(params.visibleCols);
+    const itemsLengthRef = useLatestRef(params.itemsLength);
+    const commitCellEdit = useCallback((item, columnId, oldValue, newValue, rowIndex, globalColIndex) => {
+        // Validate via valueParser before committing
+        const col = visibleColsRef.current.find((c) => c.columnId === columnId);
+        if (col) {
+            const result = parseValue(newValue, oldValue, item, col);
+            if (!result.valid) {
+                // Reject -- cancel the edit
+                setEditingCell(null);
+                setPopoverAnchorEl(null);
+                setPendingEditorValue(undefined);
+                return;
+            }
+            newValue = result.value;
+        }
+        onCellValueChanged?.({
+            item,
+            columnId,
+            oldValue,
+            newValue,
+            rowIndex,
+        });
+        setEditingCell(null);
+        setPopoverAnchorEl(null);
+        setPendingEditorValue(undefined);
+        // Advance to next row for inline editors
+        if (rowIndex < itemsLengthRef.current - 1) {
+            setActiveCell({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
+        }
+    }, [onCellValueChanged, setEditingCell, setPendingEditorValue, setActiveCell, visibleColsRef, itemsLengthRef]);
+    const cancelPopoverEdit = useCallback(() => {
+        setEditingCell(null);
+        setPopoverAnchorEl(null);
+        setPendingEditorValue(undefined);
+    }, [setEditingCell, setPendingEditorValue]);
+    const editingState = useMemo(() => ({
+        editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue,
+        commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl,
+    }), [editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl]);
+    return { editing: editingState };
+}

package/dist/esm/hooks/useDataGridInteraction.js

@@ -0,0 +1,109 @@
+import { useMemo, useCallback } from 'react';
+import { useCellSelection } from './useCellSelection';
+import { useClipboard } from './useClipboard';
+import { useKeyboardNavigation } from './useKeyboardNavigation';
+import { useFillHandle } from './useFillHandle';
+import { useUndoRedo } from './useUndoRedo';
+// Stable no-op handlers used when cellSelection is disabled (module-scope = no re-renders)
+const NOOP = () => { };
+const NOOP_ASYNC = async () => { };
+const NOOP_MOUSE = (_e, _r, _c) => { };
+const NOOP_KEY = (_e) => { };
+/**
+ * Manages cell selection, keyboard navigation, clipboard, fill handle, and undo/redo.
+ * Extracted from useDataGridState for modularity.
+ *
+ * activeCell/setActiveCell and editingCell/setEditingCell are passed in from the
+ * orchestrator level to avoid circular dependencies with useDataGridEditing.
+ */
+export function useDataGridInteraction(params) {
+    const { items, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, getRowId, editable, onCellValueChangedProp, cellSelection, rowSelection, selectedRowIds, editingCell, setEditingCell, activeCell, setActiveCell, handleRowCheckboxChange, setContextMenuPosition, wrapperRef, } = params;
+    // Wrap onCellValueChanged with undo/redo tracking
+    const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp });
+    const onCellValueChanged = undoRedo.onCellValueChanged;
+    const { selectionRange, setSelectionRange, handleCellMouseDown: handleCellMouseDownBase, handleSelectAllCells, isDragging, } = useCellSelection({
+        colOffset,
+        rowCount: items.length,
+        visibleColCount: visibleCols.length,
+        setActiveCell,
+        wrapperRef,
+    });
+    const { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges } = useClipboard({
+        items,
+        visibleCols,
+        colOffset,
+        selectionRange,
+        activeCell,
+        editable,
+        onCellValueChanged,
+        beginBatch: undoRedo.beginBatch,
+        endBatch: undoRedo.endBatch,
+    });
+    const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
+        if (e.button !== 0)
+            return;
+        wrapperRef.current?.focus({ preventScroll: true });
+        clearClipboardRanges();
+        handleCellMouseDownBase(e, rowIndex, globalColIndex);
+    }, [handleCellMouseDownBase, clearClipboardRanges, wrapperRef]);
+    const { handleGridKeyDown } = useKeyboardNavigation({
+        data: { items, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, getRowId },
+        state: { activeCell, selectionRange, editingCell, selectedRowIds },
+        handlers: { setActiveCell, setSelectionRange, setEditingCell, handleRowCheckboxChange, handleCopy, handleCut, handlePaste, setContextMenu: setContextMenuPosition, onUndo: undoRedo.undo, onRedo: undoRedo.redo, clearClipboardRanges },
+        features: { editable, onCellValueChanged, rowSelection: rowSelection ?? 'none', wrapperRef },
+    });
+    const { handleFillHandleMouseDown } = useFillHandle({
+        items,
+        visibleCols,
+        editable,
+        onCellValueChanged,
+        selectionRange,
+        setSelectionRange,
+        setActiveCell,
+        colOffset,
+        wrapperRef,
+        beginBatch: undoRedo.beginBatch,
+        endBatch: undoRedo.endBatch,
+    });
+    const hasCellSelection = selectionRange != null || activeCell != null;
+    const interactionState = useMemo(() => ({
+        activeCell: cellSelection ? activeCell : null,
+        setActiveCell: cellSelection ? setActiveCell : NOOP,
+        selectionRange: cellSelection ? selectionRange : null,
+        setSelectionRange: cellSelection ? setSelectionRange : NOOP,
+        handleCellMouseDown: cellSelection ? handleCellMouseDown : NOOP_MOUSE,
+        handleSelectAllCells: cellSelection ? handleSelectAllCells : NOOP,
+        hasCellSelection: cellSelection ? hasCellSelection : false,
+        handleGridKeyDown: cellSelection ? handleGridKeyDown : NOOP_KEY,
+        handleFillHandleMouseDown: cellSelection ? handleFillHandleMouseDown : NOOP,
+        handleCopy: cellSelection ? handleCopy : NOOP,
+        handleCut: cellSelection ? handleCut : NOOP,
+        handlePaste: cellSelection ? handlePaste : NOOP_ASYNC,
+        cutRange: cellSelection ? cutRange : null,
+        copyRange: cellSelection ? copyRange : null,
+        clearClipboardRanges: cellSelection ? clearClipboardRanges : NOOP,
+        canUndo: undoRedo.canUndo,
+        canRedo: undoRedo.canRedo,
+        onUndo: undoRedo.undo,
+        onRedo: undoRedo.redo,
+        isDragging: cellSelection ? isDragging : false,
+    }), [
+        cellSelection, activeCell, setActiveCell, selectionRange, setSelectionRange,
+        handleCellMouseDown, handleSelectAllCells, hasCellSelection, handleGridKeyDown,
+        handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange,
+        clearClipboardRanges, undoRedo.canUndo, undoRedo.canRedo, undoRedo.undo, undoRedo.redo,
+        isDragging,
+    ]);
+    return {
+        interaction: interactionState,
+        selectionRange,
+        setSelectionRange,
+        cutRange,
+        copyRange,
+        clearClipboardRanges,
+        isDragging,
+        onCellValueChanged,
+        canUndo: undoRedo.canUndo,
+        canRedo: undoRedo.canRedo,
+    };
+}

package/dist/esm/hooks/useDataGridLayout.js

@@ -0,0 +1,172 @@
+import { useMemo, useState, useLayoutEffect, useCallback } from 'react';
+import { flattenColumns } from '../utils';
+import { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
+import { useTableLayout } from './useTableLayout';
+import { useColumnPinning } from './useColumnPinning';
+import { useColumnHeaderMenuState } from './useColumnHeaderMenuState';
+import { useLatestRef } from './useLatestRef';
+/**
+ * Manages column layout, visibility, sizing, pinning, and header menu state.
+ * Extracted from useDataGridState for modularity.
+ */
+export function useDataGridLayout(params) {
+    const { columns, items, getRowId, visibleColumns, columnOrder, rowSelection = 'none', showRowNumbers, initialColumnWidths, onColumnResized, onAutosizeColumn, pinnedColumns, onColumnPinned, sortBy, sortDirection, onColumnSort, wrapperRef, } = params;
+    // Cast is safe: input columns are React.IColumnDef instances; flattenColumns only extracts leaves.
+    const flatColumnsRaw = useMemo(() => flattenColumns(columns), [columns]);
+    // Apply runtime pin overrides (from applyColumnState or programmatic changes)
+    const flatColumns = useMemo(() => {
+        if (!pinnedColumns || Object.keys(pinnedColumns).length === 0)
+            return flatColumnsRaw;
+        return flatColumnsRaw.map((col) => {
+            const override = pinnedColumns[col.columnId];
+            if (override && col.pinned !== override) {
+                return { ...col, pinned: override };
+            }
+            return col;
+        });
+    }, [flatColumnsRaw, pinnedColumns]);
+    const visibleCols = useMemo(() => {
+        const filtered = visibleColumns
+            ? flatColumns.filter((c) => visibleColumns.has(c.columnId))
+            : flatColumns;
+        if (!columnOrder?.length)
+            return filtered;
+        const orderMap = new Map();
+        for (let i = 0; i < columnOrder.length; i++) {
+            orderMap.set(columnOrder[i], i);
+        }
+        return [...filtered].sort((a, b) => {
+            const ia = orderMap.get(a.columnId) ?? -1;
+            const ib = orderMap.get(b.columnId) ?? -1;
+            if (ia === -1 && ib === -1)
+                return 0;
+            if (ia === -1)
+                return 1;
+            if (ib === -1)
+                return -1;
+            return ia - ib;
+        });
+    }, [flatColumns, visibleColumns, columnOrder]);
+    const visibleColumnCount = visibleCols.length;
+    const hasCheckboxCol = rowSelection === 'multiple';
+    const hasRowNumbersCol = !!showRowNumbers;
+    const specialColsCount = (hasCheckboxCol ? 1 : 0) + (hasRowNumbersCol ? 1 : 0);
+    const totalColCount = visibleColumnCount + specialColsCount;
+    const colOffset = specialColsCount;
+    const rowIndexByRowId = useMemo(() => {
+        const m = new Map();
+        items.forEach((item, idx) => m.set(getRowId(item), idx));
+        return m;
+    }, [items, getRowId]);
+    const { containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, } = useTableLayout({
+        wrapperRef,
+        visibleCols,
+        flatColumns,
+        hasCheckboxCol,
+        initialColumnWidths,
+        onColumnResized,
+    });
+    const pinningResult = useColumnPinning({
+        columns: flatColumns,
+        pinnedColumns,
+        onColumnPinned,
+    });
+    // Measure actual column widths from the DOM for accurate pinning offsets.
+    const [measuredColumnWidths, setMeasuredColumnWidths] = useState({});
+    useLayoutEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper)
+            return;
+        const headerCells = wrapper.querySelectorAll('th[data-column-id]');
+        if (headerCells.length === 0)
+            return;
+        const measured = {};
+        headerCells.forEach((cell) => {
+            const colId = cell.getAttribute('data-column-id');
+            if (colId)
+                measured[colId] = cell.offsetWidth;
+        });
+        setMeasuredColumnWidths((prev) => {
+            for (const key in measured) {
+                if (prev[key] !== measured[key])
+                    return measured;
+            }
+            if (Object.keys(prev).length !== Object.keys(measured).length)
+                return measured;
+            return prev;
+        });
+    }, [visibleCols, containerWidth, columnSizingOverrides, wrapperRef]);
+    // Build column width map for pinning offset computation
+    const columnWidthMap = useMemo(() => {
+        const map = {};
+        for (const col of visibleCols) {
+            const override = columnSizingOverrides[col.columnId];
+            map[col.columnId] = override
+                ? override.widthPx
+                : (measuredColumnWidths[col.columnId] ?? col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+        }
+        return map;
+    }, [visibleCols, columnSizingOverrides, measuredColumnWidths]);
+    const leftOffsets = useMemo(() => pinningResult.computeLeftOffsets(visibleCols, columnWidthMap, DEFAULT_MIN_COLUMN_WIDTH, hasCheckboxCol, CHECKBOX_COLUMN_WIDTH), [pinningResult, visibleCols, columnWidthMap, hasCheckboxCol]);
+    const rightOffsets = useMemo(() => pinningResult.computeRightOffsets(visibleCols, columnWidthMap, DEFAULT_MIN_COLUMN_WIDTH), [pinningResult, visibleCols, columnWidthMap]);
+    // Stabilize onColumnSort via ref
+    const onColumnSortRef = useLatestRef(onColumnSort);
+    const stableOnColumnSort = useCallback((columnKey, direction) => onColumnSortRef.current?.(columnKey, direction), [onColumnSortRef]);
+    // Autosize callback
+    const handleAutosizeColumn = useCallback((columnId, width) => {
+        setColumnSizingOverrides((prev) => ({ ...prev, [columnId]: { widthPx: width } }));
+        (onAutosizeColumn ?? onColumnResized)?.(columnId, width);
+    }, [setColumnSizingOverrides, onAutosizeColumn, onColumnResized]);
+    const headerMenuResult = useColumnHeaderMenuState({
+        pinnedColumns: pinningResult.pinnedColumns,
+        onPinColumn: pinningResult.pinColumn,
+        onUnpinColumn: pinningResult.unpinColumn,
+        sortBy,
+        sortDirection: sortDirection ?? 'asc',
+        onColumnSort: stableOnColumnSort,
+        onColumnResized,
+        onAutosizeColumn: handleAutosizeColumn,
+        columns: flatColumns,
+    });
+    // Memoize layout sub-object
+    const layoutState = useMemo(() => ({
+        flatColumns, visibleCols, visibleColumnCount, totalColCount, colOffset,
+        hasCheckboxCol, hasRowNumbersCol, rowIndexByRowId, containerWidth, minTableWidth,
+        desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, onColumnResized,
+        measuredColumnWidths,
+    }), [
+        flatColumns, visibleCols, visibleColumnCount, totalColCount, colOffset,
+        hasCheckboxCol, hasRowNumbersCol, rowIndexByRowId, containerWidth, minTableWidth,
+        desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, onColumnResized,
+        measuredColumnWidths,
+    ]);
+    // Memoize pinning sub-object
+    const pinningState = useMemo(() => ({
+        pinnedColumns: pinningResult.pinnedColumns,
+        pinColumn: pinningResult.pinColumn,
+        unpinColumn: pinningResult.unpinColumn,
+        isPinned: pinningResult.isPinned,
+        leftOffsets,
+        rightOffsets,
+        headerMenu: headerMenuResult,
+    }), [
+        pinningResult.pinnedColumns, pinningResult.pinColumn, pinningResult.unpinColumn,
+        pinningResult.isPinned, leftOffsets, rightOffsets,
+        headerMenuResult,
+    ]);
+    return {
+        layout: layoutState,
+        pinning: pinningState,
+        flatColumns,
+        visibleCols,
+        visibleColumnCount,
+        totalColCount,
+        colOffset,
+        hasCheckboxCol,
+        hasRowNumbersCol,
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+        handleAutosizeColumn,
+        stableOnColumnSort,
+    };
+}