@alaarab/ogrid-react 2.0.0-beta

package/dist/esm/hooks/useColumnHeaderFilterState.js

@@ -0,0 +1,180 @@
+/**
+ * Headless column header filter state and handlers for Fluent, Material, and Radix.
+ * UI packages use this hook and render only presentation (popover, inputs, buttons).
+ * Composes 4 sub-hooks for each filter type's state management.
+ */
+import { useState, useCallback, useRef, useEffect, useMemo, } from 'react';
+import { useTextFilterState } from './useTextFilterState';
+import { useMultiSelectFilterState } from './useMultiSelectFilterState';
+import { usePeopleFilterState } from './usePeopleFilterState';
+import { useDateFilterState } from './useDateFilterState';
+const EMPTY_OPTIONS = [];
+export function useColumnHeaderFilterState(params) {
+    const { filterType, onSort, selectedValues, onFilterChange, options, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = params;
+    const safeSelectedValues = selectedValues ?? EMPTY_OPTIONS;
+    // Shared state
+    const headerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const [isFilterOpen, setFilterOpen] = useState(false);
+    const [popoverPosition, setPopoverPosition] = useState(null);
+    // Compose sub-hooks for each filter type
+    const textFilterState = useTextFilterState({
+        textValue,
+        onTextChange,
+        isFilterOpen,
+    });
+    const multiSelectFilterState = useMultiSelectFilterState({
+        selectedValues,
+        onFilterChange,
+        options,
+        isFilterOpen,
+    });
+    const peopleFilterState = usePeopleFilterState({
+        selectedUser,
+        onUserChange,
+        peopleSearch,
+        isFilterOpen,
+        filterType,
+    });
+    const dateFilterState = useDateFilterState({
+        dateValue,
+        onDateChange,
+        isFilterOpen,
+    });
+    // Close popover resets position
+    useEffect(() => {
+        if (!isFilterOpen) {
+            setPopoverPosition(null);
+        }
+    }, [isFilterOpen]);
+    // Click outside and Escape to close
+    useEffect(() => {
+        if (!isFilterOpen)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (popoverRef.current &&
+                !popoverRef.current.contains(target) &&
+                headerRef.current &&
+                !headerRef.current.contains(target)) {
+                setFilterOpen(false);
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' || e.key === 'Esc') {
+                e.preventDefault();
+                e.stopPropagation();
+                setFilterOpen(false);
+            }
+        };
+        const timeoutId = setTimeout(() => document.addEventListener('mousedown', handleClickOutside), 0);
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [isFilterOpen]);
+    // Shared handlers
+    const handleFilterIconClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setFilterOpen((prev) => {
+            if (!prev && headerRef.current) {
+                const rect = headerRef.current.getBoundingClientRect();
+                setPopoverPosition({ top: rect.bottom + 4, left: rect.left });
+            }
+            return !prev;
+        });
+    }, []);
+    const handleSortClick = useCallback((e) => {
+        e.stopPropagation();
+        onSort?.();
+    }, [onSort]);
+    // Wrap sub-hook handlers to close popover
+    const handleApplyMultiSelect = useCallback(() => {
+        multiSelectFilterState.handleApplyMultiSelect();
+        setFilterOpen(false);
+    }, [multiSelectFilterState]);
+    const handleTextApply = useCallback(() => {
+        textFilterState.handleTextApply();
+        setFilterOpen(false);
+    }, [textFilterState]);
+    const handleUserSelect = useCallback((user) => {
+        peopleFilterState.handleUserSelect(user);
+        setFilterOpen(false);
+    }, [peopleFilterState]);
+    const handleClearUser = useCallback(() => {
+        peopleFilterState.handleClearUser();
+        setFilterOpen(false);
+    }, [peopleFilterState]);
+    const handleDateApply = useCallback(() => {
+        dateFilterState.handleDateApply();
+        setFilterOpen(false);
+    }, [dateFilterState]);
+    // Event propagation stoppers
+    const handlePopoverClick = useCallback((e) => e.stopPropagation(), []);
+    const handleInputFocus = useCallback((e) => e.stopPropagation(), []);
+    const handleInputMouseDown = useCallback((e) => e.stopPropagation(), []);
+    const handleInputClick = useCallback((e) => e.stopPropagation(), []);
+    const handleInputKeyDown = useCallback((e) => {
+        if (e.key !== 'Escape' && e.key !== 'Esc')
+            e.stopPropagation();
+    }, []);
+    // Compute hasActiveFilter from all sub-hooks
+    const hasActiveFilter = useMemo(() => {
+        if (filterType === 'multiSelect')
+            return safeSelectedValues.length > 0;
+        if (filterType === 'text')
+            return !!textValue.trim();
+        if (filterType === 'people')
+            return !!selectedUser;
+        if (filterType === 'date')
+            return !!(dateValue?.from || dateValue?.to);
+        return false;
+    }, [filterType, safeSelectedValues, textValue, selectedUser, dateValue]);
+    return {
+        headerRef,
+        popoverRef,
+        peopleInputRef: peopleFilterState.peopleInputRef,
+        isFilterOpen,
+        setFilterOpen,
+        tempSelected: multiSelectFilterState.tempSelected,
+        setTempSelected: multiSelectFilterState.setTempSelected,
+        tempTextValue: textFilterState.tempTextValue,
+        setTempTextValue: textFilterState.setTempTextValue,
+        searchText: multiSelectFilterState.searchText,
+        setSearchText: multiSelectFilterState.setSearchText,
+        debouncedSearchText: multiSelectFilterState.debouncedSearchText,
+        filteredOptions: multiSelectFilterState.filteredOptions,
+        peopleSuggestions: peopleFilterState.peopleSuggestions,
+        isPeopleLoading: peopleFilterState.isPeopleLoading,
+        peopleSearchText: peopleFilterState.peopleSearchText,
+        setPeopleSearchText: peopleFilterState.setPeopleSearchText,
+        tempDateFrom: dateFilterState.tempDateFrom,
+        setTempDateFrom: dateFilterState.setTempDateFrom,
+        tempDateTo: dateFilterState.tempDateTo,
+        setTempDateTo: dateFilterState.setTempDateTo,
+        hasActiveFilter,
+        popoverPosition,
+        handlers: {
+            handleFilterIconClick,
+            handleApplyMultiSelect,
+            handleTextApply,
+            handleTextClear: textFilterState.handleTextClear,
+            handleUserSelect,
+            handleClearUser,
+            handleDateApply,
+            handleDateClear: dateFilterState.handleDateClear,
+            handleCheckboxChange: multiSelectFilterState.handleCheckboxChange,
+            handleSelectAll: multiSelectFilterState.handleSelectAll,
+            handleClearSelection: multiSelectFilterState.handleClearSelection,
+            handlePopoverClick,
+            handleInputFocus,
+            handleInputMouseDown,
+            handleInputClick,
+            handleInputKeyDown,
+            handleSortClick,
+        },
+    };
+}

package/dist/esm/hooks/useColumnResize.js

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useLatestRef } from './useLatestRef';
+/**
+ * Manages column resize drag interactions with RAF-throttled state updates.
+ * @param params - Sizing overrides, setter, min/default widths, and resize callback.
+ * @returns Resize start handler and column width getter.
+ */
+export function useColumnResize({ columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, onColumnResized, }) {
+    const rafRef = useRef(0);
+    const onColumnResizedRef = useRef(onColumnResized);
+    onColumnResizedRef.current = onColumnResized;
+    const columnSizingOverridesRef = useLatestRef(columnSizingOverrides);
+    // Track active drag listeners so we can clean up on unmount
+    const cleanupRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+        };
+    }, []);
+    const handleResizeStart = useCallback((e, col) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const startX = e.clientX;
+        const columnId = col.columnId;
+        // Measure the actual rendered width from the DOM. With table-layout: auto,
+        // the browser may have auto-sized the column wider than the config values.
+        // The resize handle is a direct child of <th>, so parentElement is the header cell.
+        const thEl = e.currentTarget.parentElement;
+        const startWidth = thEl
+            ? thEl.getBoundingClientRect().width
+            : columnSizingOverridesRef.current[columnId]?.widthPx
+                ?? col.idealWidth
+                ?? col.defaultWidth
+                ?? defaultWidth;
+        let latestWidth = startWidth;
+        // Lock cursor and prevent text selection during drag
+        const prevCursor = document.body.style.cursor;
+        const prevUserSelect = document.body.style.userSelect;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        const flushWidth = () => {
+            setColumnSizingOverrides((prev) => ({
+                ...prev,
+                [columnId]: { widthPx: latestWidth },
+            }));
+        };
+        const onMove = (moveEvent) => {
+            const deltaX = moveEvent.clientX - startX;
+            latestWidth = Math.max(minWidth, startWidth + deltaX);
+            if (!rafRef.current) {
+                rafRef.current = requestAnimationFrame(() => {
+                    rafRef.current = 0;
+                    flushWidth();
+                });
+            }
+        };
+        const cleanup = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            cleanupRef.current = null;
+            // Restore cursor and user-select
+            document.body.style.cursor = prevCursor;
+            document.body.style.userSelect = prevUserSelect;
+            // Cancel pending RAF and flush final width synchronously
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = 0;
+            }
+        };
+        const onUp = () => {
+            cleanup();
+            flushWidth();
+            if (onColumnResizedRef.current) {
+                onColumnResizedRef.current(columnId, latestWidth);
+            }
+        };
+        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
+    const getColumnWidth = useCallback((col) => {
+        return columnSizingOverrides[col.columnId]?.widthPx
+            ?? col.idealWidth
+            ?? col.defaultWidth
+            ?? defaultWidth;
+    }, [columnSizingOverrides, defaultWidth]);
+    return { handleResizeStart, getColumnWidth };
+}

package/dist/esm/hooks/useContextMenu.js

@@ -0,0 +1,21 @@
+import { useState, useCallback } from 'react';
+/**
+ * Manages context menu position state for right-click menus.
+ * @returns Menu position, setter, right-click handler, and close handler.
+ */
+export function useContextMenu() {
+    const [contextMenuPosition, setContextMenuPosition] = useState(null);
+    const handleCellContextMenu = useCallback((e) => {
+        e.preventDefault?.();
+        setContextMenuPosition({ x: e.clientX, y: e.clientY });
+    }, []);
+    const closeContextMenu = useCallback(() => {
+        setContextMenuPosition(null);
+    }, []);
+    return {
+        contextMenuPosition,
+        setContextMenuPosition,
+        handleCellContextMenu,
+        closeContextMenu,
+    };
+}

package/dist/esm/hooks/useDataGridState.js

@@ -0,0 +1,313 @@
+import { useMemo, useCallback, useState } from 'react';
+import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations } from '../utils';
+import { useRowSelection } from './useRowSelection';
+import { useCellEditing } from './useCellEditing';
+import { useActiveCell } from './useActiveCell';
+import { useCellSelection } from './useCellSelection';
+import { useContextMenu } from './useContextMenu';
+import { useClipboard } from './useClipboard';
+import { useKeyboardNavigation } from './useKeyboardNavigation';
+import { useFillHandle } from './useFillHandle';
+import { useUndoRedo } from './useUndoRedo';
+import { useLatestRef } from './useLatestRef';
+import { useTableLayout } from './useTableLayout';
+// 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) => { };
+const NOOP_CTX = (_e) => { };
+/**
+ * Single orchestration hook for DataGridTable. Takes grid props and wrapper ref,
+ * returns all derived state and handlers so Fluent/Material/Radix can be thin view layers.
+ */
+export function useDataGridState(params) {
+    const { props, wrapperRef } = params;
+    const { items, columns, getRowId, visibleColumns, columnOrder, rowSelection = 'none', selectedRows: controlledSelectedRows, onSelectionChange, statusBar, emptyState, editable, cellSelection: cellSelectionProp, onCellValueChanged: onCellValueChangedProp, initialColumnWidths, onColumnResized, pinnedColumns, onCellError, } = props;
+    const cellSelection = cellSelectionProp !== false;
+    // Wrap onCellValueChanged with undo/redo tracking — all edits are recorded automatically
+    const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp });
+    const onCellValueChanged = undoRedo.onCellValueChanged;
+    // 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 };
+            }
+            // If col was pinned by definition but not in overrides, keep original
+            return col;
+        });
+    }, [flatColumnsRaw, pinnedColumns]);
+    const visibleCols = useMemo(() => {
+        const filtered = visibleColumns
+            ? flatColumns.filter((c) => visibleColumns.has(c.columnId))
+            : flatColumns;
+        if (!columnOrder?.length)
+            return filtered;
+        return [...filtered].sort((a, b) => {
+            const ia = columnOrder.indexOf(a.columnId);
+            const ib = columnOrder.indexOf(b.columnId);
+            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 totalColCount = visibleColumnCount + (hasCheckboxCol ? 1 : 0);
+    const colOffset = hasCheckboxCol ? 1 : 0;
+    const rowIndexByRowId = useMemo(() => {
+        const m = new Map();
+        items.forEach((item, idx) => m.set(getRowId(item), idx));
+        return m;
+    }, [items, getRowId]);
+    const rowSelectionResult = useRowSelection({
+        items,
+        getRowId,
+        rowSelection,
+        controlledSelectedRows,
+        onSelectionChange,
+    });
+    const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, } = rowSelectionResult;
+    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, } = useCellEditing();
+    const { activeCell, setActiveCell } = useActiveCell(wrapperRef, editingCell);
+    const { selectionRange, setSelectionRange, handleCellMouseDown: handleCellMouseDownBase, handleSelectAllCells, isDragging, } = useCellSelection({
+        colOffset,
+        rowCount: items.length,
+        visibleColCount: visibleCols.length,
+        setActiveCell,
+        wrapperRef,
+    });
+    const { contextMenuPosition, setContextMenuPosition, handleCellContextMenu, closeContextMenu } = useContextMenu();
+    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);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleCellMouseDownBase, clearClipboardRanges] // wrapperRef excluded — refs are stable
+    );
+    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, wrapperRef },
+    });
+    const { handleFillHandleMouseDown } = useFillHandle({
+        items,
+        visibleCols,
+        editable,
+        onCellValueChanged,
+        selectionRange,
+        setSelectionRange,
+        setActiveCell,
+        colOffset,
+        wrapperRef,
+        beginBatch: undoRedo.beginBatch,
+        endBatch: undoRedo.endBatch,
+    });
+    const { containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, } = useTableLayout({
+        wrapperRef,
+        visibleCols,
+        flatColumns,
+        hasCheckboxCol,
+        initialColumnWidths,
+        onColumnResized,
+    });
+    const aggregation = useMemo(() => computeAggregations(items, visibleCols, cellSelection ? selectionRange : null), [items, visibleCols, selectionRange, cellSelection]);
+    const statusBarConfig = useMemo(() => {
+        const base = getDataGridStatusBarConfig(statusBar, items.length, selectedRowIds.size);
+        if (!base)
+            return null;
+        return { ...base, aggregation: aggregation ?? undefined };
+    }, [statusBar, items.length, selectedRowIds.size, aggregation]);
+    const showEmptyInGrid = items.length === 0 && !!emptyState && !props.isLoading;
+    const hasCellSelection = selectionRange != null || activeCell != null;
+    // --- View-model inputs (shared across all 3 DataGridTables) ---
+    const { sortBy, sortDirection, onColumnSort, filters, onFilterChange, filterOptions, loadingFilterOptions, peopleSearch, } = props;
+    // Stabilize callbacks via refs — headerFilterInput only re-creates when data changes,
+    // not when callback identities change (which happens on unrelated state updates).
+    const onColumnSortRef = useLatestRef(onColumnSort);
+    const onFilterChangeRef = useLatestRef(onFilterChange);
+    const peopleSearchRef = useLatestRef(peopleSearch);
+    // Stable callback wrappers that delegate to refs
+    const stableOnColumnSort = useCallback((columnKey) => onColumnSortRef.current?.(columnKey), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const stableOnFilterChange = useCallback((...args) => onFilterChangeRef.current?.(...args), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const stablePeopleSearch = useCallback((...args) => peopleSearchRef.current?.(...args) ?? Promise.resolve([]), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const headerFilterInput = useMemo(() => ({
+        sortBy,
+        sortDirection,
+        onColumnSort: stableOnColumnSort,
+        filters,
+        onFilterChange: stableOnFilterChange,
+        filterOptions,
+        loadingFilterOptions,
+        peopleSearch: peopleSearch ? stablePeopleSearch : undefined,
+    }), [
+        sortBy,
+        sortDirection,
+        stableOnColumnSort,
+        filters,
+        stableOnFilterChange,
+        filterOptions,
+        loadingFilterOptions,
+        peopleSearch, stablePeopleSearch,
+    ]);
+    const cellDescriptorInput = useMemo(() => ({
+        editingCell,
+        activeCell: cellSelection ? activeCell : null,
+        selectionRange: cellSelection ? selectionRange : null,
+        cutRange: cellSelection ? cutRange : null,
+        copyRange: cellSelection ? copyRange : null,
+        colOffset,
+        itemsLength: items.length,
+        getRowId,
+        editable,
+        onCellValueChanged,
+        isDragging: cellSelection ? isDragging : false,
+    }), [
+        editingCell,
+        activeCell,
+        selectionRange,
+        cutRange,
+        copyRange,
+        colOffset,
+        items.length,
+        getRowId,
+        editable,
+        onCellValueChanged,
+        cellSelection,
+        isDragging,
+    ]);
+    // --- Cell edit helpers ---
+    const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+    const visibleColsRef = useLatestRef(visibleCols);
+    const itemsLengthRef = useLatestRef(items.length);
+    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 });
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onCellValueChanged, setEditingCell, setPendingEditorValue, setActiveCell]);
+    const cancelPopoverEdit = useCallback(() => {
+        setEditingCell(null);
+        setPopoverAnchorEl(null);
+        setPendingEditorValue(undefined);
+    }, [setEditingCell, setPendingEditorValue]);
+    // --- Memoize each sub-object so downstream consumers only re-render when their slice changes ---
+    const layoutState = useMemo(() => ({
+        flatColumns, visibleCols, visibleColumnCount, totalColCount, colOffset,
+        hasCheckboxCol, rowIndexByRowId, containerWidth, minTableWidth,
+        desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, onColumnResized,
+    }), [
+        flatColumns, visibleCols, visibleColumnCount, totalColCount, colOffset,
+        hasCheckboxCol, rowIndexByRowId, containerWidth, minTableWidth,
+        desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, onColumnResized,
+    ]);
+    const rowSelectionState = useMemo(() => ({
+        selectedRowIds, updateSelection, handleRowCheckboxChange,
+        handleSelectAll, allSelected, someSelected,
+    }), [selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected]);
+    const editingState = useMemo(() => ({
+        editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue,
+        commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl,
+    }), [editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl]);
+    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,
+    ]);
+    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]);
+    const viewModelsState = useMemo(() => ({
+        headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError,
+    }), [headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError]);
+    return {
+        layout: layoutState,
+        rowSelection: rowSelectionState,
+        editing: editingState,
+        interaction: interactionState,
+        contextMenu: contextMenuState,
+        viewModels: viewModelsState,
+    };
+}

package/dist/esm/hooks/useDateFilterState.js

@@ -0,0 +1,34 @@
+/**
+ * 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

@@ -0,0 +1,35 @@
+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();
+    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;
+}