@alaarab/ogrid-core 1.3.1 → 1.4.0

package/dist/esm/components/OGridLayout.js

@@ -1,16 +1,82 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultGap = 16;
+import { SideBar } from './SideBar';
+// Stable style objects (avoid re-creating on every render)
+const borderedContainerStyle = {
+    border: '1px solid var(--ogrid-border, #e0e0e0)',
+    borderRadius: 6,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    minHeight: 0,
+    background: 'var(--ogrid-bg, #fff)',
+};
+const toolbarStripStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '6px 12px',
+    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+    background: 'var(--ogrid-header-bg, #f5f5f5)',
+    gap: 8,
+    flexWrap: 'wrap',
+    minHeight: 0,
+};
+const toolbarSectionStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+};
+const footerStripStyle = {
+    borderTop: '1px solid var(--ogrid-border, #e0e0e0)',
+    background: 'var(--ogrid-header-bg, #f5f5f5)',
+    padding: '6px 12px',
+};
+const gridAreaFlexStyle = {
+    width: '100%',
+    minWidth: 0,
+    flex: 1,
+    display: 'flex',
+};
+const gridAreaSoloStyle = {
+    width: '100%',
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+};
+const gridChildStyle = {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column',
+};
 /**
- * Renders OGrid layout: [toolbar row | title, toolbar, columnChooser] [grid] [pagination].
- * Inner structure uses divs; only the root uses Container so UIs can use Box/div and pass gap.
+ * Renders OGrid layout as a unified bordered container:
+ *   [deprecated title above]
+ *   ┌────────────────────────────────────┐
+ *   │ [toolbar strip]                    │
+ *   ├────────────────────────────────────┤
+ *   │ [sidebar]? [grid]                  │
+ *   ├────────────────────────────────────┤
+ *   │ [footer strip / pagination]        │
+ *   └────────────────────────────────────┘
  */
 export function OGridLayout(props) {
-    const { containerComponent: Container = 'div', containerProps = {}, gap = defaultGap, className, title, toolbar, columnChooser, children, pagination, } = props;
-    // Always apply flex layout; merge with any containerProps styles
+    const { containerComponent: Container = 'div', containerProps = {}, gap = 8, className, title, toolbar, columnChooser, toolbarEnd: toolbarEndProp, children, pagination, sideBar, } = props;
+    const hasSideBar = sideBar != null;
+    const sideBarPosition = sideBar?.position ?? 'right';
+    // Backward compat: columnChooser prop → toolbarEnd
+    const toolbarEnd = toolbarEndProp ?? columnChooser;
+    const hasToolbar = toolbar != null || toolbarEnd != null;
+    // Root styles: flex column, fill parent height, gap for deprecated title spacing
     const rootStyle = {
         display: 'flex',
         flexDirection: 'column',
-        gap: typeof gap === 'number' ? `${gap}px` : gap,
+        height: '100%',
+        gap: title != null ? (typeof gap === 'number' ? `${gap}px` : gap) : undefined,
     };
-    return (_jsxs(Container, { className: className, style: rootStyle, ...containerProps, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8, minHeight: 40 }, children: [title != null ? _jsx("div", { style: { margin: 0 }, children: title }) : null, toolbar, columnChooser] }), _jsx("div", { style: { width: '100%', minWidth: 0, flex: 1 }, children: children }), pagination] }));
+    return (_jsxs(Container, { className: className, style: rootStyle, ...containerProps, children: [title != null && _jsx("div", { style: { margin: 0 }, children: title }), _jsxs("div", { style: borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsx("div", { style: toolbarSectionStyle, children: toolbarEnd })] })), hasSideBar ? (_jsxs("div", { style: gridAreaFlexStyle, children: [sideBarPosition === 'left' && _jsx(SideBar, { ...sideBar }), _jsx("div", { style: gridChildStyle, children: children }), sideBarPosition !== 'left' && _jsx(SideBar, { ...sideBar })] })) : (_jsx("div", { style: gridAreaSoloStyle, children: children })), pagination && (_jsx("div", { style: footerStripStyle, children: pagination }))] })] }));
 }

package/dist/esm/components/SideBar.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const PANEL_WIDTH = 240;
+const TAB_WIDTH = 36;
+const PANEL_LABELS = {
+    columns: 'Columns',
+    filters: 'Filters',
+};
+export function SideBar(props) {
+    const { activePanel, onPanelChange, panels, position, columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, filterableColumns, multiSelectFilters, textFilters, onMultiSelectFilterChange, onTextFilterChange, dateFilters, onDateFilterChange, filterOptions, } = props;
+    const isOpen = activePanel !== null;
+    const handleTabClick = (panel) => {
+        onPanelChange(activePanel === panel ? null : panel);
+    };
+    const tabStrip = (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: TAB_WIDTH,
+            borderLeft: position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
+            borderRight: position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
+            background: 'var(--ogrid-header-bg, #f5f5f5)',
+        }, role: "tablist", "aria-label": "Side bar tabs", children: panels.map((panel) => (_jsx("button", { role: "tab", "aria-selected": activePanel === panel, "aria-label": PANEL_LABELS[panel], onClick: () => handleTabClick(panel), title: PANEL_LABELS[panel], style: {
+                width: TAB_WIDTH,
+                height: TAB_WIDTH,
+                border: 'none',
+                cursor: 'pointer',
+                background: activePanel === panel ? 'var(--ogrid-bg, #fff)' : 'transparent',
+                color: 'var(--ogrid-fg, #242424)',
+                fontWeight: activePanel === panel ? 'bold' : 'normal',
+                fontSize: 14,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: panel === 'columns' ? '\u2261' : '\u2A65' }, panel))) }));
+    const panelContent = isOpen ? (_jsxs("div", { role: "tabpanel", "aria-label": PANEL_LABELS[activePanel], style: {
+            width: PANEL_WIDTH,
+            display: 'flex',
+            flexDirection: 'column',
+            borderLeft: position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
+            borderRight: position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : undefined,
+            overflow: 'hidden',
+            background: 'var(--ogrid-bg, #fff)',
+            color: 'var(--ogrid-fg, #242424)',
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '8px 12px',
+                    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+                    fontWeight: 600,
+                }, children: [_jsx("span", { children: PANEL_LABELS[activePanel] }), _jsx("button", { onClick: () => onPanelChange(null), style: { border: 'none', background: 'transparent', cursor: 'pointer', fontSize: 16, color: 'var(--ogrid-fg, #242424)' }, "aria-label": "Close panel", children: "\u00D7" })] }), _jsxs("div", { style: { flex: 1, overflowY: 'auto', padding: '8px 12px' }, children: [activePanel === 'columns' && (_jsx(ColumnsPanel, { columns: columns, visibleColumns: visibleColumns, onVisibilityChange: onVisibilityChange, onSetVisibleColumns: onSetVisibleColumns })), activePanel === 'filters' && (_jsx(FiltersPanel, { filterableColumns: filterableColumns, multiSelectFilters: multiSelectFilters, textFilters: textFilters, onMultiSelectFilterChange: onMultiSelectFilterChange, onTextFilterChange: onTextFilterChange, dateFilters: dateFilters, onDateFilterChange: onDateFilterChange, filterOptions: filterOptions }))] })] })) : null;
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', flexShrink: 0 }, role: "complementary", "aria-label": "Side bar", children: [position === 'left' && tabStrip, position === 'left' && panelContent, position === 'right' && panelContent, position === 'right' && tabStrip] }));
+}
+// --- Internal sub-components ---
+function ColumnsPanel(props) {
+    const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns } = props;
+    const allVisible = columns.every((c) => visibleColumns.has(c.columnId));
+    const handleSelectAll = () => {
+        const next = new Set(visibleColumns);
+        columns.forEach((c) => next.add(c.columnId));
+        onSetVisibleColumns(next);
+    };
+    const handleClearAll = () => {
+        const next = new Set();
+        columns.forEach((c) => {
+            if (c.required && visibleColumns.has(c.columnId))
+                next.add(c.columnId);
+        });
+        onSetVisibleColumns(next);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', gap: 8, marginBottom: 8 }, children: [_jsx("button", { onClick: handleSelectAll, disabled: allVisible, style: { flex: 1, cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4, padding: '4px 8px' }, children: "Select All" }), _jsx("button", { onClick: handleClearAll, style: { flex: 1, cursor: 'pointer', background: 'var(--ogrid-bg-subtle, #f3f2f1)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4, padding: '4px 8px' }, children: "Clear All" })] }), columns.map((col) => (_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0', cursor: 'pointer' }, children: [_jsx("input", { type: "checkbox", checked: visibleColumns.has(col.columnId), onChange: (e) => onVisibilityChange(col.columnId, e.target.checked), disabled: col.required }), _jsx("span", { children: col.name })] }, col.columnId)))] }));
+}
+function FiltersPanel(props) {
+    const { filterableColumns, multiSelectFilters, textFilters, onMultiSelectFilterChange, onTextFilterChange, dateFilters, onDateFilterChange, filterOptions } = props;
+    if (filterableColumns.length === 0) {
+        return _jsx("div", { style: { color: 'var(--ogrid-muted, #999)', fontStyle: 'italic' }, children: "No filterable columns" });
+    }
+    return (_jsx(_Fragment, { children: filterableColumns.map((col) => {
+            const filterKey = col.filterField;
+            return (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { style: { fontWeight: 500, marginBottom: 4, fontSize: 13 }, children: col.name }), col.filterType === 'text' && (_jsx("input", { type: "text", value: textFilters[filterKey] ?? '', onChange: (e) => onTextFilterChange(filterKey, e.target.value), placeholder: `Filter ${col.name}...`, "aria-label": `Filter ${col.name}`, style: { width: '100%', boxSizing: 'border-box', padding: '4px 6px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })), col.filterType === 'date' && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }, children: ["From:", _jsx("input", { type: "date", value: dateFilters[filterKey]?.from ?? '', onChange: (e) => {
+                                            const from = e.target.value || undefined;
+                                            const to = dateFilters[filterKey]?.to;
+                                            onDateFilterChange(filterKey, from || to ? { from, to } : undefined);
+                                        }, "aria-label": `${col.name} from date`, style: { flex: 1, padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }, children: ["To:", _jsx("input", { type: "date", value: dateFilters[filterKey]?.to ?? '', onChange: (e) => {
+                                            const to = e.target.value || undefined;
+                                            const from = dateFilters[filterKey]?.from;
+                                            onDateFilterChange(filterKey, from || to ? { from, to } : undefined);
+                                        }, "aria-label": `${col.name} to date`, style: { flex: 1, padding: '2px 4px', background: 'var(--ogrid-bg, #fff)', color: 'var(--ogrid-fg, #242424)', border: '1px solid var(--ogrid-border, #e0e0e0)', borderRadius: 4 } })] })] })), col.filterType === 'multiSelect' && (_jsx("div", { style: { maxHeight: 120, overflowY: 'auto' }, role: "group", "aria-label": `${col.name} options`, children: (filterOptions[filterKey] ?? []).map((opt) => {
+                            const selected = (multiSelectFilters[filterKey] ?? []).includes(opt);
+                            return (_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, padding: '1px 0', cursor: 'pointer', fontSize: 13 }, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: (e) => {
+                                            const current = multiSelectFilters[filterKey] ?? [];
+                                            const next = e.target.checked
+                                                ? [...current, opt]
+                                                : current.filter((v) => v !== opt);
+                                            onMultiSelectFilterChange(filterKey, next);
+                                        } }), _jsx("span", { children: opt })] }, opt));
+                        }) }))] }, col.columnId));
+        }) }));
+}

package/dist/esm/hooks/index.js

@@ -15,3 +15,5 @@ export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
 export { useColumnChooserState } from './useColumnChooserState';
 export { useInlineCellEditorState } from './useInlineCellEditorState';
 export { useColumnResize } from './useColumnResize';
+export { useRichSelectState } from './useRichSelectState';
+export { useSideBarState } from './useSideBarState';

package/dist/esm/hooks/useCellSelection.js

@@ -1,12 +1,32 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { normalizeSelectionRange } from '../types';
+/** 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 } = params;
+    const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
     const [selectionRange, setSelectionRange] = useState(null);
     const isDraggingRef = useRef(false);
     const [isDragging, setIsDragging] = useState(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);
     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
@@ -23,12 +43,14 @@ export function useCellSelection(params) {
         }
         else {
             dragStartRef.current = { row: rowIndex, col: dataColIndex };
-            setSelectionRange({
+            const initial = {
                 startRow: rowIndex,
                 startCol: dataColIndex,
                 endRow: rowIndex,
                 endCol: dataColIndex,
-            });
+            };
+            setSelectionRange(initial);
+            liveDragRangeRef.current = initial;
             setActiveCell({ rowIndex, columnIndex: globalColIndex });
             isDraggingRef.current = true;
             setIsDragging(true);
@@ -45,41 +67,210 @@ export function useCellSelection(params) {
         });
         setActiveCell({ rowIndex: 0, columnIndex: colOffset });
     }, [rowCount, visibleColCount, colOffset, setActiveCell]);
-    // Window mouse move/up for drag selection
+    /** 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 onMove = (e) => {
-            if (!isDraggingRef.current || !dragStartRef.current)
+        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 target = document.elementFromPoint(e.clientX, e.clientY);
+            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;
+                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 < colOffset)
-                return;
-            const dataCol = c - colOffset;
+            if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
+                return null;
+            const dataCol = c - colOff;
             const start = dragStartRef.current;
-            setSelectionRange(normalizeSelectionRange({
+            return normalizeSelectionRange({
                 startRow: start.row,
                 startCol: start.col,
                 endRow: r,
                 endCol: dataCol,
-            }));
-            setActiveCell({ rowIndex: r, columnIndex: c });
+            });
+        };
+        /** 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;
+            // 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;
-            setIsDragging(false);
+            // 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,
+                });
+            }
+            // Clean up DOM attributes — React will apply CSS-module classes on the same paint
+            clearDragAttrs();
+            liveDragRangeRef.current = null;
+            lastMousePosRef.current = null;
             dragStartRef.current = null;
+            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]);
+    }, [colOffset, setActiveCell, wrapperRef]);
     return {
         selectionRange,
         setSelectionRange,

package/dist/esm/hooks/useColumnHeaderFilterState.js

@@ -7,7 +7,7 @@ import { useDebounce } from './useDebounce';
 const SEARCH_DEBOUNCE_MS = 150;
 const EMPTY_OPTIONS = [];
 export function useColumnHeaderFilterState(params) {
-    const { filterType, onSort, selectedValues, onFilterChange, options, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, } = params;
+    const { filterType, onSort, selectedValues, onFilterChange, options, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = params;
     const safeSelectedValues = selectedValues ?? EMPTY_OPTIONS;
     const safeOptions = options ?? EMPTY_OPTIONS;
     const headerRef = useRef(null);
@@ -22,12 +22,16 @@ export function useColumnHeaderFilterState(params) {
     const [peopleSuggestions, setPeopleSuggestions] = useState([]);
     const [isPeopleLoading, setIsPeopleLoading] = useState(false);
     const [peopleSearchText, setPeopleSearchText] = useState('');
+    const [tempDateFrom, setTempDateFrom] = useState(dateValue?.from ?? '');
+    const [tempDateTo, setTempDateTo] = useState(dateValue?.to ?? '');
     const [popoverPosition, setPopoverPosition] = useState(null);
     // Sync temp state when popover opens
     useEffect(() => {
         if (isFilterOpen) {
             setTempSelected(new Set(safeSelectedValues));
             setTempTextValue(textValue);
+            setTempDateFrom(dateValue?.from ?? '');
+            setTempDateTo(dateValue?.to ?? '');
             setSearchText('');
             setPeopleSearchText('');
             setPeopleSuggestions([]);
@@ -38,7 +42,7 @@ export function useColumnHeaderFilterState(params) {
         else {
             setPopoverPosition(null);
         }
-    }, [isFilterOpen, filterType, safeSelectedValues, textValue]);
+    }, [isFilterOpen, filterType, safeSelectedValues, textValue, dateValue]);
     // Click outside and Escape to close
     useEffect(() => {
         if (!isFilterOpen)
@@ -144,6 +148,16 @@ export function useColumnHeaderFilterState(params) {
         onUserChange?.(user);
         setFilterOpen(false);
     }, [onUserChange]);
+    const handleDateApply = useCallback(() => {
+        const from = tempDateFrom || undefined;
+        const to = tempDateTo || undefined;
+        onDateChange?.(from || to ? { from, to } : undefined);
+        setFilterOpen(false);
+    }, [onDateChange, tempDateFrom, tempDateTo]);
+    const handleDateClear = useCallback(() => {
+        setTempDateFrom('');
+        setTempDateTo('');
+    }, []);
     const handleClearUser = useCallback(() => {
         onUserChange?.(undefined);
         setFilterOpen(false);
@@ -163,8 +177,10 @@ export function useColumnHeaderFilterState(params) {
             return !!textValue.trim();
         if (filterType === 'people')
             return !!selectedUser;
+        if (filterType === 'date')
+            return !!(dateValue?.from || dateValue?.to);
         return false;
-    }, [filterType, safeSelectedValues, textValue, selectedUser]);
+    }, [filterType, safeSelectedValues, textValue, selectedUser, dateValue]);
     return {
         headerRef,
         popoverRef,
@@ -183,6 +199,10 @@ export function useColumnHeaderFilterState(params) {
         isPeopleLoading,
         peopleSearchText,
         setPeopleSearchText,
+        tempDateFrom,
+        setTempDateFrom,
+        tempDateTo,
+        setTempDateTo,
         hasActiveFilter,
         popoverPosition,
         handlers: {
@@ -192,6 +212,8 @@ export function useColumnHeaderFilterState(params) {
             handleTextClear,
             handleUserSelect,
             handleClearUser,
+            handleDateApply,
+            handleDateClear,
             handleCheckboxChange,
             handleSelectAll,
             handleClearSelection,

package/dist/esm/hooks/useColumnResize.js

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useEffect } from 'react';
-export function useColumnResize({ columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, }) {
+export function useColumnResize({ columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, onColumnResized, }) {
     const resizingRef = useRef(null);
     const handleResizeStart = useCallback((e, col) => {
         e.preventDefault();
@@ -26,8 +26,15 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
         }));
     }, [setColumnSizingOverrides, minWidth]);
     const handleResizeEnd = useCallback(() => {
+        if (resizingRef.current && onColumnResized) {
+            const { columnId } = resizingRef.current;
+            const width = columnSizingOverrides[columnId]?.widthPx;
+            if (width != null) {
+                onColumnResized(columnId, width);
+            }
+        }
         resizingRef.current = null;
-    }, []);
+    }, [onColumnResized, columnSizingOverrides]);
     useEffect(() => {
         const handleMouseMove = (e) => handleResizeMove(e);
         const handleMouseUp = () => handleResizeEnd();