@alaarab/ogrid-react 2.0.23 → 2.1.0

package/dist/esm/components/ColumnHeaderFilterContent.js

@@ -5,8 +5,6 @@ DateFilterContent.displayName = 'DateFilterContent';
 export function getColumnHeaderFilterStateParams(props) {
     return {
         filterType: props.filterType,
-        isSorted: props.isSorted ?? false,
-        isSortedDescending: props.isSortedDescending ?? false,
         onSort: props.onSort,
         selectedValues: props.selectedValues,
         onFilterChange: props.onFilterChange,

package/dist/esm/components/MarchingAntsOverlay.js

@@ -24,8 +24,7 @@ export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, c
         }
         setSelRect(selectionRange ? measureRange(container, selectionRange, colOffset) : null);
         setClipRect(clipRange ? measureRange(container, clipRange, colOffset) : null);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectionRange, clipRange, containerRef, colOffset, items, visibleColumns, columnSizingOverrides, columnOrder]);
+    }, [selectionRange, clipRange, containerRef, colOffset]);
     // Inject keyframes on mount
     useEffect(() => {
         injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
@@ -49,7 +48,7 @@ export function MarchingAntsOverlay({ containerRef, selectionRange, copyRange, c
             cancelAnimationFrame(rafRef.current);
             ro?.disconnect();
         };
-    }, [selectionRange, clipRange, measureAll, containerRef]);
+    }, [selectionRange, clipRange, measureAll, containerRef, items, visibleColumns, columnSizingOverrides, columnOrder]);
     if (!selRect && !clipRect)
         return null;
     // When clipboard range matches the selection range, hide the solid selection border

package/dist/esm/components/SideBar.js

@@ -69,7 +69,7 @@ export function SideBar(props) {
     const tabStripStyle = position === 'right' ? tabStripBorderLeft : tabStripBorderRight;
     const panelContainerStyle = position === 'right' ? panelContainerBorderLeft : panelContainerBorderRight;
     const tabStrip = (_jsx("div", { style: tabStripStyle, 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: activePanel === panel ? tabButtonActive : tabButtonInactive, children: panel === 'columns' ? '\u2261' : '\u2A65' }, panel))) }));
-    const panelContent = isOpen ? (_jsxs("div", { role: "tabpanel", "aria-label": PANEL_LABELS[activePanel], style: panelContainerStyle, children: [_jsxs("div", { style: panelHeaderStyle, children: [_jsx("span", { children: PANEL_LABELS[activePanel] }), _jsx("button", { onClick: () => onPanelChange(null), style: closeButtonStyle, "aria-label": "Close panel", children: "\u00D7" })] }), _jsxs("div", { style: panelBodyStyle, children: [activePanel === 'columns' && (_jsx(ColumnsPanel, { columns: columns, visibleColumns: visibleColumns, onVisibilityChange: onVisibilityChange, onSetVisibleColumns: onSetVisibleColumns })), activePanel === 'filters' && (_jsx(FiltersPanel, { filterableColumns: filterableColumns, filters: filters, onFilterChange: onFilterChange, filterOptions: filterOptions }))] })] })) : null;
+    const panelContent = isOpen && activePanel ? (_jsxs("div", { role: "tabpanel", "aria-label": PANEL_LABELS[activePanel], style: panelContainerStyle, children: [_jsxs("div", { style: panelHeaderStyle, children: [_jsx("span", { children: PANEL_LABELS[activePanel] }), _jsx("button", { onClick: () => onPanelChange(null), style: closeButtonStyle, "aria-label": "Close panel", children: "\u00D7" })] }), _jsxs("div", { style: panelBodyStyle, children: [activePanel === 'columns' && (_jsx(ColumnsPanel, { columns: columns, visibleColumns: visibleColumns, onVisibilityChange: onVisibilityChange, onSetVisibleColumns: onSetVisibleColumns })), activePanel === 'filters' && (_jsx(FiltersPanel, { filterableColumns: filterableColumns, filters: filters, onFilterChange: onFilterChange, filterOptions: filterOptions }))] })] })) : null;
     return (_jsxs("div", { style: sideBarRootStyle, role: "complementary", "aria-label": "Side bar", children: [position === 'left' && tabStrip, position === 'left' && panelContent, position === 'right' && panelContent, position === 'right' && tabStrip] }));
 }
 // --- Internal sub-components ---
@@ -98,20 +98,21 @@ function FiltersPanel(props) {
     }
     return (_jsx(_Fragment, { children: filterableColumns.map((col) => {
             const filterKey = col.filterField;
-            return (_jsxs("div", { style: filterGroupStyle, children: [_jsx("div", { style: filterLabelStyle, children: col.name }), col.filterType === 'text' && (_jsx("input", { type: "text", value: filters[filterKey]?.type === 'text' ? filters[filterKey].value : '', onChange: (e) => onFilterChange(filterKey, e.target.value ? { type: 'text', value: e.target.value } : undefined), placeholder: `Filter ${col.name}...`, "aria-label": `Filter ${col.name}`, style: textInputStyle })), col.filterType === 'date' && (_jsxs("div", { style: dateContainerStyle, children: [_jsxs("label", { style: dateLabelStyle, children: ["From:", _jsx("input", { type: "date", value: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.from ?? '') : '', onChange: (e) => {
+            const fv = filters[filterKey];
+            return (_jsxs("div", { style: filterGroupStyle, children: [_jsx("div", { style: filterLabelStyle, children: col.name }), col.filterType === 'text' && (_jsx("input", { type: "text", value: fv?.type === 'text' ? fv.value : '', onChange: (e) => onFilterChange(filterKey, e.target.value ? { type: 'text', value: e.target.value } : undefined), placeholder: `Filter ${col.name}...`, "aria-label": `Filter ${col.name}`, style: textInputStyle })), col.filterType === 'date' && (_jsxs("div", { style: dateContainerStyle, children: [_jsxs("label", { style: dateLabelStyle, children: ["From:", _jsx("input", { type: "date", value: fv?.type === 'date' ? (fv.value.from ?? '') : '', onChange: (e) => {
                                             const from = e.target.value || undefined;
-                                            const existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
+                                            const existingValue = fv?.type === 'date' ? fv.value : {};
                                             const to = existingValue.to;
                                             onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
-                                        }, "aria-label": `${col.name} from date`, style: dateInputStyle })] }), _jsxs("label", { style: dateLabelStyle, children: ["To:", _jsx("input", { type: "date", value: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.to ?? '') : '', onChange: (e) => {
+                                        }, "aria-label": `${col.name} from date`, style: dateInputStyle })] }), _jsxs("label", { style: dateLabelStyle, children: ["To:", _jsx("input", { type: "date", value: fv?.type === 'date' ? (fv.value.to ?? '') : '', onChange: (e) => {
                                             const to = e.target.value || undefined;
-                                            const existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
+                                            const existingValue = fv?.type === 'date' ? fv.value : {};
                                             const from = existingValue.from;
                                             onFilterChange(filterKey, from || to ? { type: 'date', value: { from, to } } : undefined);
                                         }, "aria-label": `${col.name} to date`, style: dateInputStyle })] })] })), col.filterType === 'multiSelect' && (_jsx("div", { style: multiSelectContainerStyle, role: "group", "aria-label": `${col.name} options`, children: (filterOptions[filterKey] ?? []).map((opt) => {
-                            const selected = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value.includes(opt) : false;
+                            const selected = fv?.type === 'multiSelect' ? fv.value.includes(opt) : false;
                             return (_jsxs("label", { style: multiSelectLabelStyle, children: [_jsx("input", { type: "checkbox", checked: selected, onChange: (e) => {
-                                            const current = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value : [];
+                                            const current = fv?.type === 'multiSelect' ? fv.value : [];
                                             const next = e.target.checked
                                                 ? [...current, opt]
                                                 : current.filter((v) => v !== opt);

package/dist/esm/components/createOGrid.js

@@ -12,10 +12,7 @@ export function createOGrid(components) {
     const { DataGridTable, ColumnChooser, PaginationControls, containerComponent, containerProps, } = components;
     const OGridInner = forwardRef(function OGridInner(props, ref) {
         const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
-        return (_jsx(OGridLayout, { containerComponent: containerComponent, containerProps: containerProps, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
-                    pagination.setPageSize(size);
-                    pagination.setPage(1);
-                }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+        return (_jsx(OGridLayout, { containerComponent: containerComponent, containerProps: containerProps, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange, onSetVisibleColumns: columnChooser.onSetVisibleColumns })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: pagination.setPageSize, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
     });
     OGridInner.displayName = 'OGrid';
     return React.memo(OGridInner);

package/dist/esm/hooks/index.js

@@ -1,5 +1,9 @@
 export { useFilterOptions } from './useFilterOptions';
 export { useOGrid } from './useOGrid';
+export { useOGridPagination } from './useOGridPagination';
+export { useOGridSorting } from './useOGridSorting';
+export { useOGridFilters as useOGridFiltersState } from './useOGridFilters';
+export { useOGridDataFetching } from './useOGridDataFetching';
 export { useActiveCell } from './useActiveCell';
 export { useCellEditing } from './useCellEditing';
 export { useContextMenu } from './useContextMenu';
@@ -11,6 +15,10 @@ export { useUndoRedo } from './useUndoRedo';
 export { useDebounce } from './useDebounce';
 export { useFillHandle } from './useFillHandle';
 export { useDataGridState } from './useDataGridState';
+export { useDataGridLayout } from './useDataGridLayout';
+export { useDataGridEditing } from './useDataGridEditing';
+export { useDataGridInteraction } from './useDataGridInteraction';
+export { useDataGridContextMenu } from './useDataGridContextMenu';
 export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
 export { useTextFilterState } from './useTextFilterState';
 export { useMultiSelectFilterState } from './useMultiSelectFilterState';
@@ -29,5 +37,7 @@ export { useColumnReorder } from './useColumnReorder';
 export { useVirtualScroll } from './useVirtualScroll';
 export { useListVirtualizer } from './useListVirtualizer';
 export { useLatestRef } from './useLatestRef';
+export { useShallowEqualMemo } from './useShallowEqualMemo';
 export { usePaginationControls } from './usePaginationControls';
 export { useDataGridTableOrchestration } from './useDataGridTableOrchestration';
+export { useColumnMeta } from './useColumnMeta';

package/dist/esm/hooks/useActiveCell.js

@@ -31,8 +31,7 @@ export function useActiveCell(wrapperRef, editingCell) {
         if (cell && document.activeElement !== cell && typeof cell.focus === 'function') {
             cell.focus({ preventScroll: true });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeCell, editingCell]); // wrapperRef excluded — refs are stable across renders
+    }, [activeCell, editingCell, wrapperRef]);
     // Batch scroll-into-view via RAF so rapid keyboard navigation only scrolls once
     useEffect(() => {
         if (activeCell == null || wrapperRef?.current == null || editingCell != null)
@@ -67,8 +66,7 @@ export function useActiveCell(wrapperRef, editingCell) {
                 }
             }
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeCell, editingCell]); // wrapperRef excluded — refs are stable across renders
+    }, [activeCell, editingCell, wrapperRef]);
     // Clean up pending RAF on unmount
     useEffect(() => {
         return () => cancelAnimationFrame(scrollRafRef.current);

package/dist/esm/hooks/useCellSelection.js

@@ -78,9 +78,7 @@ export function useCellSelection(params) {
             // even before the first mousemove. This ensures instant visual feedback.
             setTimeout(() => applyDragAttrsRef.current?.(initial), 0);
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is stable; colOffsetRef is a ref
-    [setActiveCell]);
+    }, [setActiveCell, colOffsetRef, setSelectionRange]);
     const handleSelectAllCells = useCallback(() => {
         if (rowCount === 0 || visibleColCount === 0)
             return;
@@ -91,8 +89,7 @@ export function useCellSelection(params) {
             endCol: visibleColCount - 1,
         });
         setActiveCell({ rowIndex: 0, columnIndex: colOffsetRef.current });
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is stable; colOffsetRef is a ref
-    }, [rowCount, visibleColCount, setActiveCell]);
+    }, [rowCount, visibleColCount, setActiveCell, colOffsetRef, setSelectionRange]);
     /** Last known mouse position during drag — used by mouseUp to flush pending RAF work. */
     const lastMousePosRef = useRef(null);
     // Ref to expose applyDragAttrs outside useEffect so it can be called from mouseDown
@@ -101,7 +98,57 @@ export function useCellSelection(params) {
     // 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(() => {
+        /** Set of currently drag-marked HTMLElements — avoids O(n) full DOM scan on each frame. */
+        const markedCells = new Set();
+        /** Cell lookup index built on drag start — O(1) lookups per frame instead of querySelectorAll. */
+        let cellIndex = null;
+        /** Build cell lookup index from a single querySelectorAll scan. */
+        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);
+            }
+        };
+        /** Apply styling to a single in-range cell (attrs + box-shadow). */
+        const styleCellInRange = (el, r, c, minR, maxR, minC, maxC, anchor) => {
+            if (!el.hasAttribute(DRAG_ATTR))
+                el.setAttribute(DRAG_ATTR, '');
+            const isAnchor = anchor && r === anchor.row && c === anchor.col;
+            if (isAnchor) {
+                if (!el.hasAttribute(DRAG_ANCHOR_ATTR))
+                    el.setAttribute(DRAG_ANCHOR_ATTR, '');
+            }
+            else {
+                if (el.hasAttribute(DRAG_ANCHOR_ATTR))
+                    el.removeAttribute(DRAG_ANCHOR_ATTR);
+            }
+            const shadows = [];
+            if (r === minR)
+                shadows.push('inset 0 2px 0 0 var(--ogrid-selection, #217346)');
+            if (r === maxR)
+                shadows.push('inset 0 -2px 0 0 var(--ogrid-selection, #217346)');
+            if (c === minC)
+                shadows.push('inset 2px 0 0 0 var(--ogrid-selection, #217346)');
+            if (c === maxC)
+                shadows.push('inset -2px 0 0 0 var(--ogrid-selection, #217346)');
+            el.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : '';
+            markedCells.add(el);
+        };
+        /** Remove drag styling from a single cell. */
+        const unstyleCell = (el) => {
+            el.removeAttribute(DRAG_ATTR);
+            el.removeAttribute(DRAG_ANCHOR_ATTR);
+            el.style.boxShadow = '';
+        };
         /** Toggle DRAG_ATTR on cells to show the range highlight via CSS.
+         *  Uses a cell index Map for O(1) lookups per cell in the range instead of scanning all cells.
          *  Also sets edge box-shadows for a green border around the selection range,
          *  and marks the anchor cell with DRAG_ANCHOR_ATTR (white background). */
         const applyDragAttrs = (range) => {
@@ -113,60 +160,45 @@ export function useCellSelection(params) {
             const minC = Math.min(range.startCol, range.endCol);
             const maxC = Math.max(range.startCol, range.endCol);
             const anchor = dragStartRef.current;
-            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) - colOffsetRef.current;
-                const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
-                if (inRange) {
-                    if (!el.hasAttribute(DRAG_ATTR))
-                        el.setAttribute(DRAG_ATTR, '');
-                    // Anchor cell gets white background instead of green
-                    const isAnchor = anchor && r === anchor.row && c === anchor.col;
-                    if (isAnchor) {
-                        if (!el.hasAttribute(DRAG_ANCHOR_ATTR))
-                            el.setAttribute(DRAG_ANCHOR_ATTR, '');
+            const colOff = colOffsetRef.current;
+            // 1. Un-mark cells that are no longer in the new range (iterate the small set, not all DOM)
+            for (const el of markedCells) {
+                const r = parseInt(el.getAttribute('data-row-index') ?? '', 10);
+                const c = parseInt(el.getAttribute('data-col-index') ?? '', 10) - colOff;
+                const stillInRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+                if (!stillInRange) {
+                    unstyleCell(el);
+                    markedCells.delete(el);
+                }
+            }
+            // Build index on first call if not yet initialized
+            if (!cellIndex)
+                buildCellIndex();
+            // 2. Look up only the 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);
                     }
-                    else {
-                        if (el.hasAttribute(DRAG_ANCHOR_ATTR))
-                            el.removeAttribute(DRAG_ANCHOR_ATTR);
+                    if (el) {
+                        styleCellInRange(el, r, c, minR, maxR, minC, maxC, anchor);
                     }
-                    // Edge borders via inset box-shadow (no layout shift)
-                    const shadows = [];
-                    if (r === minR)
-                        shadows.push('inset 0 2px 0 0 var(--ogrid-selection, #217346)');
-                    if (r === maxR)
-                        shadows.push('inset 0 -2px 0 0 var(--ogrid-selection, #217346)');
-                    if (c === minC)
-                        shadows.push('inset 2px 0 0 0 var(--ogrid-selection, #217346)');
-                    if (c === maxC)
-                        shadows.push('inset -2px 0 0 0 var(--ogrid-selection, #217346)');
-                    el.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : '';
-                }
-                else {
-                    if (el.hasAttribute(DRAG_ATTR))
-                        el.removeAttribute(DRAG_ATTR);
-                    if (el.hasAttribute(DRAG_ANCHOR_ATTR))
-                        el.removeAttribute(DRAG_ANCHOR_ATTR);
-                    if (el.style.boxShadow)
-                        el.style.boxShadow = '';
                 }
             }
         };
         // Expose applyDragAttrs via ref so mouseDown can access it
         applyDragAttrsRef.current = applyDragAttrs;
+        /** Clear all drag styling using the tracked set — O(marked) not O(all cells). */
         const clearDragAttrs = () => {
-            const wrapper = wrapperRef.current;
-            if (!wrapper)
-                return;
-            const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
-            for (let i = 0; i < marked.length; i++) {
-                const el = marked[i];
-                el.removeAttribute(DRAG_ATTR);
-                el.removeAttribute(DRAG_ANCHOR_ATTR);
-                el.style.boxShadow = '';
+            for (const el of markedCells) {
+                unstyleCell(el);
             }
+            markedCells.clear();
+            cellIndex = null;
         };
         /** Resolve mouse coordinates to a cell range (shared by RAF callback and mouseUp flush). */
         const resolveRange = (cx, cy) => {
@@ -266,6 +298,8 @@ export function useCellSelection(params) {
             if (!dragMovedRef.current) {
                 dragMovedRef.current = true;
                 setIsDragging(true);
+                // Build cell index once at drag start for O(1) lookups during drag
+                buildCellIndex();
             }
             // Always store latest position so mouseUp can flush if RAF hasn't executed
             lastMousePosRef.current = { cx: e.clientX, cy: e.clientY };
@@ -344,8 +378,7 @@ export function useCellSelection(params) {
                 cancelAnimationFrame(rafRef.current);
             stopAutoScroll();
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [setActiveCell]); // wrapperRef, colOffsetRef excluded — refs are stable across renders
+    }, [setActiveCell, colOffsetRef, setSelectionRange, wrapperRef]);
     return {
         selectionRange,
         setSelectionRange,

package/dist/esm/hooks/useClipboard.js

@@ -1,5 +1,5 @@
-import { useCallback, useRef, useState } from 'react';
-import { getCellValue, parseValue, formatSelectionAsTsv, parseTsvClipboard } from '../utils';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear } from '../utils';
 import { normalizeSelectionRange } from '../types';
 import { useLatestRef } from './useLatestRef';
 /**
@@ -21,6 +21,9 @@ export function useClipboard(params) {
     const [copyRange, setCopyRange] = useState(null);
     /** In-page clipboard fallback when system clipboard is unavailable. */
     const internalClipboardRef = useRef(null);
+    /** Guard against async clipboard reads completing after unmount. */
+    const isMountedRef = useRef(true);
+    useEffect(() => () => { isMountedRef.current = false; }, []);
     /** Resolve current effective range from selection or active cell. */
     const getEffectiveRange = useCallback(() => {
         const sel = selectionRangeRef.current;
@@ -66,6 +69,9 @@ export function useClipboard(params) {
         catch {
             text = '';
         }
+        // Bail out if component unmounted during async clipboard read
+        if (!isMountedRef.current)
+            return;
         if (!text.trim() && internalClipboardRef.current != null) {
             text = internalClipboardRef.current;
         }
@@ -78,58 +84,13 @@ export function useClipboard(params) {
         const visibleCols = visibleColsRef.current;
         const parsedRows = parseTsvClipboard(text);
         beginBatch?.();
-        for (let r = 0; r < parsedRows.length; r++) {
-            const cells = parsedRows[r];
-            for (let c = 0; c < cells.length; c++) {
-                const targetRow = anchorRow + r;
-                const targetCol = anchorCol + c;
-                if (targetRow >= items.length || targetCol >= visibleCols.length)
-                    continue;
-                const item = items[targetRow];
-                const col = visibleCols[targetCol];
-                const colEditable = col.editable === true ||
-                    (typeof col.editable === 'function' && col.editable(item));
-                if (!colEditable)
-                    continue;
-                const rawValue = cells[c] ?? '';
-                const oldValue = getCellValue(item, col);
-                const result = parseValue(rawValue, oldValue, item, col);
-                if (!result.valid)
-                    continue;
-                onCellValueChanged({
-                    item,
-                    columnId: col.columnId,
-                    oldValue,
-                    newValue: result.value,
-                    rowIndex: targetRow,
-                });
-            }
-        }
+        const pasteEvents = applyPastedValues(parsedRows, anchorRow, anchorCol, items, visibleCols);
+        for (const evt of pasteEvents)
+            onCellValueChanged(evt);
         if (cutRangeRef.current) {
-            const cut = cutRangeRef.current;
-            for (let r = cut.startRow; r <= cut.endRow; r++) {
-                for (let c = cut.startCol; c <= cut.endCol; c++) {
-                    if (r >= items.length || c >= visibleCols.length)
-                        continue;
-                    const item = items[r];
-                    const col = visibleCols[c];
-                    const colEditable = col.editable === true ||
-                        (typeof col.editable === 'function' && col.editable(item));
-                    if (!colEditable)
-                        continue;
-                    const oldValue = getCellValue(item, col);
-                    const result = parseValue('', oldValue, item, col);
-                    if (!result.valid)
-                        continue;
-                    onCellValueChanged({
-                        item,
-                        columnId: col.columnId,
-                        oldValue,
-                        newValue: result.value,
-                        rowIndex: r,
-                    });
-                }
-            }
+            const cutEvents = applyCutClear(cutRangeRef.current, items, visibleCols);
+            for (const evt of cutEvents)
+                onCellValueChanged(evt);
             cutRangeRef.current = null;
             setCutRange(null);
         }
@@ -141,5 +102,5 @@ export function useClipboard(params) {
         setCutRange(null);
         cutRangeRef.current = null;
     }, []);
-    return { handleCopy, handleCut, handlePaste, cutRangeRef, cutRange, copyRange, clearClipboardRanges };
+    return { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges };
 }

package/dist/esm/hooks/useColumnChooserState.js

@@ -9,7 +9,7 @@ import { useState, useCallback, useEffect } from 'react';
  * visibleCount, totalCount. UI renders trigger + popover and wires handlers.
  */
 export function useColumnChooserState(params) {
-    const { columns, visibleColumns, onVisibilityChange } = params;
+    const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns } = params;
     const [open, setOpen] = useState(false);
     useEffect(() => {
         if (!open)
@@ -33,19 +33,31 @@ export function useColumnChooserState(params) {
         onVisibilityChange(columnKey, visible);
     }, [onVisibilityChange]);
     const handleSelectAll = useCallback(() => {
-        columns.forEach((col) => {
-            if (!visibleColumns.has(col.columnId)) {
-                onVisibilityChange(col.columnId, true);
-            }
-        });
-    }, [columns, visibleColumns, onVisibilityChange]);
+        if (onSetVisibleColumns) {
+            onSetVisibleColumns(new Set(columns.map((col) => col.columnId)));
+        }
+        else {
+            columns.forEach((col) => {
+                if (!visibleColumns.has(col.columnId)) {
+                    onVisibilityChange(col.columnId, true);
+                }
+            });
+        }
+    }, [columns, visibleColumns, onVisibilityChange, onSetVisibleColumns]);
     const handleClearAll = useCallback(() => {
-        columns.forEach((col) => {
-            if (!col.required && visibleColumns.has(col.columnId)) {
-                onVisibilityChange(col.columnId, false);
-            }
-        });
-    }, [columns, visibleColumns, onVisibilityChange]);
+        if (onSetVisibleColumns) {
+            // Keep required columns visible
+            const required = new Set(columns.filter((col) => col.required).map((col) => col.columnId));
+            onSetVisibleColumns(required);
+        }
+        else {
+            columns.forEach((col) => {
+                if (!col.required && visibleColumns.has(col.columnId)) {
+                    onVisibilityChange(col.columnId, false);
+                }
+            });
+        }
+    }, [columns, visibleColumns, onVisibilityChange, onSetVisibleColumns]);
     const visibleCount = visibleColumns.size;
     const totalCount = columns.length;
     return {

package/dist/esm/hooks/useColumnHeaderFilterState.js

@@ -91,27 +91,38 @@ export function useColumnHeaderFilterState(params) {
         e.stopPropagation();
         onSort?.();
     }, [onSort]);
+    // Destructure stable callbacks from sub-hooks before using as deps
+    const { handleApplyMultiSelect: _applyMultiSelect } = multiSelectFilterState;
+    const { handleTextApply: _textApply, handleTextClear: _textClear } = textFilterState;
+    const { handleUserSelect: _userSelect, handleClearUser: _clearUser } = peopleFilterState;
+    const { handleDateApply: _dateApply } = dateFilterState;
     // Wrap sub-hook handlers to close popover
     const handleApplyMultiSelect = useCallback(() => {
-        multiSelectFilterState.handleApplyMultiSelect();
+        _applyMultiSelect();
         setFilterOpen(false);
-    }, [multiSelectFilterState]);
+    }, [_applyMultiSelect]);
     const handleTextApply = useCallback(() => {
-        textFilterState.handleTextApply();
+        _textApply();
         setFilterOpen(false);
-    }, [textFilterState]);
+    }, [_textApply]);
+    // Clear immediately commits an empty value and closes the popover (no 2-step clear required)
+    const handleTextClear = useCallback(() => {
+        _textClear();
+        onTextChange?.('');
+        setFilterOpen(false);
+    }, [_textClear, onTextChange]);
     const handleUserSelect = useCallback((user) => {
-        peopleFilterState.handleUserSelect(user);
+        _userSelect(user);
         setFilterOpen(false);
-    }, [peopleFilterState]);
+    }, [_userSelect]);
     const handleClearUser = useCallback(() => {
-        peopleFilterState.handleClearUser();
+        _clearUser();
         setFilterOpen(false);
-    }, [peopleFilterState]);
+    }, [_clearUser]);
     const handleDateApply = useCallback(() => {
-        dateFilterState.handleDateApply();
+        _dateApply();
         setFilterOpen(false);
-    }, [dateFilterState]);
+    }, [_dateApply]);
     // Event propagation stoppers
     const handlePopoverClick = useCallback((e) => e.stopPropagation(), []);
     const handleInputFocus = useCallback((e) => e.stopPropagation(), []);
@@ -161,7 +172,7 @@ export function useColumnHeaderFilterState(params) {
             handleFilterIconClick,
             handleApplyMultiSelect,
             handleTextApply,
-            handleTextClear: textFilterState.handleTextClear,
+            handleTextClear,
             handleUserSelect,
             handleClearUser,
             handleDateApply,

package/dist/esm/hooks/useColumnHeaderMenuState.js

@@ -5,7 +5,7 @@ import { measureColumnContentWidth } from '../utils';
  * Tracks which column's menu is open, anchor element, and action handlers.
  */
 export function useColumnHeaderMenuState(params) {
-    const { pinnedColumns, onPinColumn, onUnpinColumn, sortBy, sortDirection, onColumnSort, onColumnResized, onAutosizeColumn, columns, data: _data, getRowId: _getRowId, } = params;
+    const { pinnedColumns, onPinColumn, onUnpinColumn, sortBy, sortDirection, onColumnSort, onColumnResized, onAutosizeColumn, columns, } = params;
     const [isOpen, setIsOpen] = useState(false);
     const [openForColumn, setOpenForColumn] = useState(null);
     const [anchorElement, setAnchorElement] = useState(null);

package/dist/esm/hooks/useColumnMeta.js

@@ -0,0 +1,61 @@
+/**
+ * Shared hook that pre-computes per-column styles and class names for DataGridTable.
+ * Extracted from Radix/Fluent/Material DataGridTable to avoid duplication.
+ *
+ * @param params.addStickyPosition - When true, adds `position: 'sticky'` inline for pinned columns.
+ *   This is needed by Fluent UI whose `TableCell` injects atomic `position: relative` via CSS-in-JS,
+ *   overriding the shared `.pinnedColLeft { position: sticky }` class. Radix/Material don't need it.
+ */
+import { useMemo } from 'react';
+import { DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
+/**
+ * Computes per-column styles and class names once per render, avoiding per-cell object creation.
+ */
+export function useColumnMeta(params) {
+    const { visibleCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinnedColumns, leftOffsets, rightOffsets, pinnedColLeftClass, pinnedColRightClass, addStickyPosition = false, } = params;
+    return useMemo(() => {
+        const cellStyles = {};
+        const cellClasses = {};
+        const hdrStyles = {};
+        const hdrClasses = {};
+        for (let i = 0; i < visibleCols.length; i++) {
+            const col = visibleCols[i];
+            const columnWidth = getColumnWidth(col);
+            const hasExplicitWidth = !!(columnSizingOverrides[col.columnId] || col.idealWidth != null || col.defaultWidth != null);
+            const isPinnedLeft = pinnedColumns[col.columnId] === 'left';
+            const isPinnedRight = pinnedColumns[col.columnId] === 'right';
+            const isPinned = isPinnedLeft || isPinnedRight;
+            const hasResizeOverride = !!columnSizingOverrides[col.columnId];
+            const measuredW = measuredColumnWidths[col.columnId];
+            const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+            const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
+            const stickyOverride = addStickyPosition && isPinned ? { position: 'sticky' } : undefined;
+            cellStyles[col.columnId] = {
+                minWidth: effectiveMinWidth,
+                width: hasExplicitWidth ? columnWidth : undefined,
+                maxWidth: hasExplicitWidth ? columnWidth : undefined,
+                textAlign: col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : undefined,
+                ...stickyOverride,
+                ...(isPinnedLeft && leftOffsets[col.columnId] != null ? { left: leftOffsets[col.columnId] } : undefined),
+                ...(isPinnedRight && rightOffsets[col.columnId] != null ? { right: rightOffsets[col.columnId] } : undefined),
+            };
+            hdrStyles[col.columnId] = {
+                minWidth: effectiveMinWidth,
+                width: hasExplicitWidth ? columnWidth : undefined,
+                maxWidth: hasExplicitWidth ? columnWidth : undefined,
+                ...stickyOverride,
+                ...(isPinnedLeft && leftOffsets[col.columnId] != null ? { left: leftOffsets[col.columnId] } : undefined),
+                ...(isPinnedRight && rightOffsets[col.columnId] != null ? { right: rightOffsets[col.columnId] } : undefined),
+            };
+            const parts = [];
+            if (isPinnedLeft)
+                parts.push(pinnedColLeftClass);
+            if (isPinnedRight)
+                parts.push(pinnedColRightClass);
+            const cn = parts.join(' ');
+            cellClasses[col.columnId] = cn;
+            hdrClasses[col.columnId] = cn;
+        }
+        return { cellStyles, cellClasses, hdrStyles, hdrClasses };
+    }, [visibleCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinnedColumns, leftOffsets, rightOffsets, pinnedColLeftClass, pinnedColRightClass, addStickyPosition]);
+}