@alaarab/ogrid-react 2.0.19 → 2.0.21

package/dist/esm/components/BaseColumnHeaderMenu.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { getColumnHeaderMenuItems } from '../utils';
+/**
+ * Base column header dropdown menu for pin/sort/autosize actions.
+ * Uses positioned div with portal rendering.
+ * Shared by Radix and Fluent UI packages (Material uses MUI Menu instead).
+ */
+export function BaseColumnHeaderMenu(props) {
+    const { isOpen, anchorElement, onClose, onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll, canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable, classNames, getPortalTarget, } = props;
+    const [position, setPosition] = React.useState(null);
+    const menuRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isOpen || !anchorElement) {
+            setPosition(null);
+            return;
+        }
+        const rect = anchorElement.getBoundingClientRect();
+        setPosition({
+            top: rect.bottom + 4,
+            left: rect.left,
+        });
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            // Don't close if clicking inside the menu itself (portal) — let onClick fire first
+            if (menuRef.current && menuRef.current.contains(target))
+                return;
+            if (anchorElement && !anchorElement.contains(target)) {
+                onClose();
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen, anchorElement, onClose]);
+    const menuInput = React.useMemo(() => ({
+        canPinLeft,
+        canPinRight,
+        canUnpin,
+        currentSort,
+        isSortable,
+        isResizable,
+    }), [canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]);
+    const items = React.useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
+    const handlers = React.useMemo(() => ({
+        pinLeft: onPinLeft,
+        pinRight: onPinRight,
+        unpin: onUnpin,
+        sortAsc: onSortAsc,
+        sortDesc: onSortDesc,
+        clearSort: onClearSort,
+        autosizeThis: onAutosizeThis,
+        autosizeAll: onAutosizeAll,
+    }), [onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll]);
+    if (!isOpen || !position)
+        return null;
+    const portalTarget = anchorElement && getPortalTarget
+        ? getPortalTarget(anchorElement)
+        : document.body;
+    return createPortal(_jsx("div", { ref: menuRef, className: classNames?.content, style: {
+            position: 'fixed',
+            top: position.top,
+            left: position.left,
+            zIndex: 1000,
+        }, children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsx("button", { className: classNames?.item, disabled: item.disabled, onClick: () => {
+                        handlers[item.id]();
+                        onClose();
+                    }, children: item.label }), item.divider && idx < items.length - 1 && (_jsx("div", { className: classNames?.separator }))] }, item.id))) }), portalTarget);
+}

package/dist/esm/components/BaseDropIndicator.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BaseDropIndicator({ dropIndicatorX, wrapperLeft, className }) {
+    return (_jsx("div", { className: className, style: { left: dropIndicatorX - wrapperLeft } }));
+}

package/dist/esm/components/BaseEmptyState.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function BaseEmptyState({ emptyState, classNames, icon }) {
+    return (_jsx("div", { className: classNames.emptyStateInGrid, children: _jsx("div", { className: classNames.emptyStateInGridInner, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [icon != null && (_jsx("span", { className: classNames.emptyStateInGridIcon, "aria-hidden": true, children: icon })), _jsx("div", { className: classNames.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: classNames.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: classNames.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }));
+}

package/dist/esm/components/BaseLoadingOverlay.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BaseLoadingOverlay({ message, classNames }) {
+    return (_jsx("div", { className: classNames.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: classNames.loadingOverlayContent, children: [_jsx("div", { className: classNames.spinner }), _jsx("span", { className: classNames.loadingOverlayText, children: message })] }) }));
+}

package/dist/esm/components/createOGrid.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { useOGrid } from '../hooks';
+import { OGridLayout } from './OGridLayout';
+/**
+ * Factory that creates a memoized, forwardRef OGrid component.
+ * Used by Radix and Fluent to avoid duplicating the same wiring code.
+ * Material uses its own OGrid because it adds MUI theme bridging (containerSx).
+ */
+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 }) }));
+    });
+    OGridInner.displayName = 'OGrid';
+    return React.memo(OGridInner);
+}

package/dist/esm/hooks/useActiveCell.js

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect, useCallback, useRef } from 'react';
+import { useState, useLayoutEffect, useEffect, useCallback, useRef } from 'react';
 /**
  * Tracks the active cell for keyboard navigation.
  * When wrapperRef and editingCell are provided, scrolls the active cell into view when it changes (and not editing).
@@ -18,45 +18,60 @@ export function useActiveCell(wrapperRef, editingCell) {
             return;
         _setActiveCell(cell);
     }, []);
-    // useLayoutEffect ensures focus moves synchronously before the browser can
-    // reset focus to body (fixes left/right arrow navigation losing focus)
+    // RAF ref for batching scroll-into-view during rapid keyboard navigation
+    const scrollRafRef = useRef(0);
+    // Synchronously focus the cell to prevent the browser from resetting
+    // focus to body between arrow presses.
     useLayoutEffect(() => {
-        if (activeCell == null ||
-            wrapperRef?.current == null ||
-            editingCell != null)
+        if (activeCell == null || wrapperRef?.current == null || editingCell != null)
             return;
         const { rowIndex, columnIndex } = activeCell;
         const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
         const cell = wrapperRef.current.querySelector(selector);
-        if (cell) {
-            // Scroll the cell into view within the table wrapper only — do NOT
-            // use native scrollIntoView() which scrolls all ancestor containers
-            // including the page, causing an unwanted viewport jump.
-            const wrapper = wrapperRef.current;
-            const thead = wrapper.querySelector('thead');
-            const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
-            const wrapperRect = wrapper.getBoundingClientRect();
-            const cellRect = cell.getBoundingClientRect();
-            // Vertical scroll (account for sticky thead)
-            const visibleTop = wrapperRect.top + headerHeight;
-            if (cellRect.top < visibleTop) {
-                wrapper.scrollTop -= visibleTop - cellRect.top;
-            }
-            else if (cellRect.bottom > wrapperRect.bottom) {
-                wrapper.scrollTop += cellRect.bottom - wrapperRect.bottom;
-            }
-            // Horizontal scroll
-            if (cellRect.left < wrapperRect.left) {
-                wrapper.scrollLeft -= wrapperRect.left - cellRect.left;
-            }
-            else if (cellRect.right > wrapperRect.right) {
-                wrapper.scrollLeft += cellRect.right - wrapperRect.right;
-            }
-            if (document.activeElement !== cell && typeof cell.focus === 'function') {
-                cell.focus({ preventScroll: true });
-            }
+        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
+    // Batch scroll-into-view via RAF so rapid keyboard navigation only scrolls once
+    useEffect(() => {
+        if (activeCell == null || wrapperRef?.current == null || editingCell != null)
+            return;
+        cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = requestAnimationFrame(() => {
+            const wrapper = wrapperRef?.current;
+            if (!wrapper)
+                return;
+            const { rowIndex, columnIndex } = activeCell;
+            const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
+            const cell = wrapper.querySelector(selector);
+            if (cell) {
+                const thead = wrapper.querySelector('thead');
+                const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
+                const wrapperRect = wrapper.getBoundingClientRect();
+                const cellRect = cell.getBoundingClientRect();
+                // Vertical scroll (account for sticky thead)
+                const visibleTop = wrapperRect.top + headerHeight;
+                if (cellRect.top < visibleTop) {
+                    wrapper.scrollTop -= visibleTop - cellRect.top;
+                }
+                else if (cellRect.bottom > wrapperRect.bottom) {
+                    wrapper.scrollTop += cellRect.bottom - wrapperRect.bottom;
+                }
+                // Horizontal scroll
+                if (cellRect.left < wrapperRect.left) {
+                    wrapper.scrollLeft -= wrapperRect.left - cellRect.left;
+                }
+                else if (cellRect.right > wrapperRect.right) {
+                    wrapper.scrollLeft += cellRect.right - wrapperRect.right;
+                }
+            }
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeCell, editingCell]); // wrapperRef excluded — refs are stable across renders
+    // Clean up pending RAF on unmount
+    useEffect(() => {
+        return () => cancelAnimationFrame(scrollRafRef.current);
+    }, []);
     return { activeCell, setActiveCell };
 }

package/dist/esm/hooks/useCellSelection.js

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { normalizeSelectionRange } from '../types';
 import { rangesEqual, computeAutoScrollSpeed } from '../utils';
+import { useLatestRef } from './useLatestRef';
 /** DOM attribute names used for drag-range highlighting (bypasses React). */
 const DRAG_ATTR = 'data-drag-range';
 const DRAG_ANCHOR_ATTR = 'data-drag-anchor';
@@ -14,6 +15,8 @@ const AUTO_SCROLL_INTERVAL = 16; // ~60fps
  */
 export function useCellSelection(params) {
     const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
+    // Use ref for colOffset to prevent drag restart mid-drag when colOffset changes
+    const colOffsetRef = useLatestRef(colOffset);
     const [selectionRange, _setSelectionRange] = useState(null);
     const isDraggingRef = useRef(false);
     const [isDragging, setIsDragging] = useState(false);
@@ -39,11 +42,12 @@ export function useCellSelection(params) {
         // Only handle primary (left) button — let middle-click scroll and right-click context menu work natively
         if (e.button !== 0)
             return;
-        if (globalColIndex < colOffset)
+        const colOff = colOffsetRef.current;
+        if (globalColIndex < colOff)
             return;
         // Prevent native text selection during cell drag
         e.preventDefault();
-        const dataColIndex = globalColIndex - colOffset;
+        const dataColIndex = globalColIndex - colOff;
         const currentRange = selectionRangeRef.current;
         if (e.shiftKey && currentRange != null) {
             setSelectionRange(normalizeSelectionRange({
@@ -75,8 +79,8 @@ export function useCellSelection(params) {
             setTimeout(() => applyDragAttrsRef.current?.(initial), 0);
         }
     }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is a stable callback
-    [colOffset, setActiveCell]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is stable; colOffsetRef is a ref
+    [setActiveCell]);
     const handleSelectAllCells = useCallback(() => {
         if (rowCount === 0 || visibleColCount === 0)
             return;
@@ -86,9 +90,9 @@ export function useCellSelection(params) {
             endRow: rowCount - 1,
             endCol: visibleColCount - 1,
         });
-        setActiveCell({ rowIndex: 0, columnIndex: colOffset });
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is a stable callback
-    }, [rowCount, visibleColCount, colOffset, setActiveCell]);
+        setActiveCell({ rowIndex: 0, columnIndex: colOffsetRef.current });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- setSelectionRange is stable; colOffsetRef is a ref
+    }, [rowCount, visibleColCount, setActiveCell]);
     /** 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
@@ -97,7 +101,6 @@ 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(() => {
-        const colOff = colOffset; // capture for closure
         /** Toggle DRAG_ATTR on cells to show the range highlight via CSS.
          *  Also sets edge box-shadows for a green border around the selection range,
          *  and marks the anchor cell with DRAG_ANCHOR_ATTR (white background). */
@@ -114,7 +117,7 @@ export function useCellSelection(params) {
             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 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))
@@ -175,6 +178,7 @@ export function useCellSelection(params) {
                 return null;
             const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
             const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+            const colOff = colOffsetRef.current;
             if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
                 return null;
             const dataCol = c - colOff;
@@ -317,7 +321,7 @@ export function useCellSelection(params) {
                     setSelectionRange(finalRange);
                     setActiveCell({
                         rowIndex: finalRange.endRow,
-                        columnIndex: finalRange.endCol + colOff,
+                        columnIndex: finalRange.endCol + colOffsetRef.current,
                     });
                 }
             }
@@ -341,7 +345,7 @@ export function useCellSelection(params) {
             stopAutoScroll();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [colOffset, setActiveCell]); // wrapperRef excluded — refs are stable across renders
+    }, [setActiveCell]); // wrapperRef, colOffsetRef excluded — refs are stable across renders
     return {
         selectionRange,
         setSelectionRange,

package/dist/esm/hooks/useDataGridState.js

@@ -26,7 +26,7 @@ const NOOP_CTX = (_e) => { };
  */
 export function useDataGridState(params) {
     const { props, wrapperRef } = params;
-    const { items, columns, getRowId, visibleColumns, columnOrder, rowSelection = 'none', selectedRows: controlledSelectedRows, onSelectionChange, showRowNumbers, statusBar, emptyState, editable, cellSelection: cellSelectionProp, onCellValueChanged: onCellValueChangedProp, initialColumnWidths, onColumnResized, pinnedColumns, onColumnPinned, onCellError, } = props;
+    const { items, columns, getRowId, visibleColumns, columnOrder, rowSelection = 'none', selectedRows: controlledSelectedRows, onSelectionChange, showRowNumbers, statusBar, emptyState, editable, cellSelection: cellSelectionProp, onCellValueChanged: onCellValueChangedProp, initialColumnWidths, onColumnResized, onAutosizeColumn, pinnedColumns, onColumnPinned, onCellError, } = props;
     const cellSelection = cellSelectionProp !== false;
     // Wrap onCellValueChanged with undo/redo tracking — all edits are recorded automatically
     const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp });
@@ -216,8 +216,8 @@ export function useDataGridState(params) {
     // Autosize callback — updates internal column sizing state + notifies external listener
     const handleAutosizeColumn = useCallback((columnId, width) => {
         setColumnSizingOverrides((prev) => ({ ...prev, [columnId]: { widthPx: width } }));
-        onColumnResized?.(columnId, width);
-    }, [setColumnSizingOverrides, onColumnResized]);
+        (onAutosizeColumn ?? onColumnResized)?.(columnId, width);
+    }, [setColumnSizingOverrides, onAutosizeColumn, onColumnResized]);
     const headerMenuResult = useColumnHeaderMenuState({
         pinnedColumns: pinningResult.pinnedColumns,
         onPinColumn: pinningResult.pinColumn,
@@ -386,37 +386,11 @@ export function useDataGridState(params) {
         isPinned: pinningResult.isPinned,
         leftOffsets,
         rightOffsets,
-        headerMenu: {
-            isOpen: headerMenuResult.isOpen,
-            openForColumn: headerMenuResult.openForColumn,
-            anchorElement: headerMenuResult.anchorElement,
-            open: headerMenuResult.open,
-            close: headerMenuResult.close,
-            handlePinLeft: headerMenuResult.handlePinLeft,
-            handlePinRight: headerMenuResult.handlePinRight,
-            handleUnpin: headerMenuResult.handleUnpin,
-            handleSortAsc: headerMenuResult.handleSortAsc,
-            handleSortDesc: headerMenuResult.handleSortDesc,
-            handleClearSort: headerMenuResult.handleClearSort,
-            handleAutosizeThis: headerMenuResult.handleAutosizeThis,
-            handleAutosizeAll: headerMenuResult.handleAutosizeAll,
-            canPinLeft: headerMenuResult.canPinLeft,
-            canPinRight: headerMenuResult.canPinRight,
-            canUnpin: headerMenuResult.canUnpin,
-            currentSort: headerMenuResult.currentSort,
-            isSortable: headerMenuResult.isSortable,
-            isResizable: headerMenuResult.isResizable,
-        },
+        headerMenu: headerMenuResult,
     }), [
         pinningResult.pinnedColumns, pinningResult.pinColumn, pinningResult.unpinColumn,
         pinningResult.isPinned, leftOffsets, rightOffsets,
-        headerMenuResult.isOpen, headerMenuResult.openForColumn, headerMenuResult.anchorElement,
-        headerMenuResult.open, headerMenuResult.close, headerMenuResult.handlePinLeft,
-        headerMenuResult.handlePinRight, headerMenuResult.handleUnpin,
-        headerMenuResult.handleSortAsc, headerMenuResult.handleSortDesc, headerMenuResult.handleClearSort,
-        headerMenuResult.handleAutosizeThis, headerMenuResult.handleAutosizeAll,
-        headerMenuResult.canPinLeft, headerMenuResult.canPinRight, headerMenuResult.canUnpin,
-        headerMenuResult.currentSort, headerMenuResult.isSortable, headerMenuResult.isResizable,
+        headerMenuResult,
     ]);
     return {
         layout: layoutState,

package/dist/esm/hooks/useDataGridTableOrchestration.js

@@ -35,7 +35,7 @@ export function useDataGridTableOrchestration(params) {
     const { headerMenu } = pinning;
     const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
     // ── Props destructuring ─────────────────────────────────────────────────
-    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
+    const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, rowHeight, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
     // ── Derived values ──────────────────────────────────────────────────────
     const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
     const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
@@ -126,6 +126,7 @@ export function useDataGridTableOrchestration(params) {
         columnOrder,
         columnReorder,
         density,
+        rowHeight,
         pinnedColumns,
         currentPage,
         propPageSize,

package/dist/esm/hooks/useOGrid.js

@@ -11,7 +11,7 @@ const EMPTY_LOADING_OPTIONS = {};
  * @returns Grouped props for DataGridTable, pagination controls, column chooser, layout, and filters.
  */
 export function useOGrid(props, ref) {
-    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, toolbarBelow, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, showRowNumbers, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, columnReorder, virtualScroll, density = 'normal', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, toolbarBelow, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, showRowNumbers, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, columnReorder, virtualScroll, rowHeight, density = 'normal', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
     // Resolve column chooser placement
     const columnChooserPlacement = columnChooserProp === false ? 'none'
         : columnChooserProp === 'sidebar' ? 'sidebar'
@@ -105,10 +105,29 @@ export function useOGrid(props, ref) {
         return deriveFilterOptionsFromData(displayData, columns);
     }, [hasServerFilterOptions, displayData, columns, serverFilterOptions]);
     // --- Client-side filtering & sorting ---
+    // Stabilize filters ref via shallow comparison so processClientSideData useMemo
+    // doesn't re-run when the filter object reference changes but values are identical.
+    const stableFiltersRef = useRef(filters);
+    const stableFilters = useMemo(() => {
+        const prev = stableFiltersRef.current;
+        const prevKeys = Object.keys(prev);
+        const nextKeys = Object.keys(filters);
+        if (prevKeys.length !== nextKeys.length) {
+            stableFiltersRef.current = filters;
+            return filters;
+        }
+        for (let i = 0; i < nextKeys.length; i++) {
+            if (prev[nextKeys[i]] !== filters[nextKeys[i]]) {
+                stableFiltersRef.current = filters;
+                return filters;
+            }
+        }
+        return prev;
+    }, [filters]);
     const clientItemsAndTotal = useMemo(() => {
         if (!isClientSide)
             return null;
-        const rows = processClientSideData(displayData, columns, filters, sort.field, sort.direction);
+        const rows = processClientSideData(displayData, columns, stableFilters, sort.field, sort.direction);
         const total = rows.length;
         const start = (page - 1) * pageSize;
         const paged = rows.slice(start, start + pageSize);
@@ -117,7 +136,7 @@ export function useOGrid(props, ref) {
         isClientSide,
         displayData,
         columns,
-        filters,
+        stableFilters,
         sort.field,
         sort.direction,
         page,
@@ -420,6 +439,7 @@ export function useOGrid(props, ref) {
         suppressHorizontalScroll,
         columnReorder,
         virtualScroll,
+        rowHeight,
         density,
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
@@ -437,7 +457,7 @@ export function useOGrid(props, ref) {
         rowSelection, effectiveSelectedRows, handleSelectionChange, showRowNumbers, page, pageSize, statusBarConfig,
         isLoadingResolved, filters, handleFilterChange, clientFilterOptions, dataSource,
         loadingFilterOptions, layoutMode, suppressHorizontalScroll, columnReorder, virtualScroll,
-        density, ariaLabel, ariaLabelledBy,
+        rowHeight, density, ariaLabel, ariaLabelledBy,
         hasActiveFilters, clearAllFilters, emptyState,
     ]);
     const pagination = useMemo(() => ({

package/dist/esm/hooks/useRowSelection.js

@@ -67,8 +67,17 @@ export function useRowSelection(params) {
             updateSelection(new Set());
         }
     }, [items, getRowId, updateSelection]);
-    const allSelected = useMemo(() => items.length > 0 && items.every((item) => selectedRowIds.has(getRowId(item))), [items, selectedRowIds, getRowId]);
-    const someSelected = useMemo(() => !allSelected && items.some((item) => selectedRowIds.has(getRowId(item))), [allSelected, items, selectedRowIds, getRowId]);
+    const allSelected = useMemo(() => {
+        if (selectedRowIds.size === 0 || items.length === 0)
+            return false;
+        return items.every((item) => selectedRowIds.has(getRowId(item)));
+    }, [items, selectedRowIds, getRowId]);
+    const someSelected = useMemo(() => {
+        if (allSelected)
+            return false;
+        // No iteration needed — any selected row means "some" are selected
+        return selectedRowIds.size > 0;
+    }, [allSelected, selectedRowIds.size]);
     return {
         selectedRowIds,
         updateSelection,

package/dist/esm/index.js

@@ -12,8 +12,13 @@ export { BaseInlineCellEditor, editorWrapperStyle, editorInputStyle, richSelectW
 export { GridContextMenu } from './components/GridContextMenu';
 export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export { SideBar } from './components/SideBar';
+export { BaseColumnHeaderMenu } from './components/BaseColumnHeaderMenu';
+export { createOGrid } from './components/createOGrid';
 export { CellErrorBoundary } from './components/CellErrorBoundary';
 export { EmptyState } from './components/EmptyState';
+export { BaseEmptyState } from './components/BaseEmptyState';
+export { BaseLoadingOverlay } from './components/BaseLoadingOverlay';
+export { BaseDropIndicator } from './components/BaseDropIndicator';
 export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from './components/ColumnHeaderFilterContent';
 // Utilities
 export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, UndoRedoStack, } from './utils';

package/dist/types/components/BaseColumnHeaderMenu.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export interface ColumnHeaderMenuClassNames {
+    content?: string;
+    item?: string;
+    separator?: string;
+}
+export interface BaseColumnHeaderMenuProps {
+    isOpen: boolean;
+    anchorElement: HTMLElement | null;
+    onClose: () => void;
+    onPinLeft: () => void;
+    onPinRight: () => void;
+    onUnpin: () => void;
+    onSortAsc: () => void;
+    onSortDesc: () => void;
+    onClearSort: () => void;
+    onAutosizeThis: () => void;
+    onAutosizeAll: () => void;
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+    currentSort: 'asc' | 'desc' | null;
+    isSortable: boolean;
+    isResizable: boolean;
+    classNames?: ColumnHeaderMenuClassNames;
+    /** Resolve the portal target element. Defaults to document.body. */
+    getPortalTarget?: (anchorElement: HTMLElement) => HTMLElement;
+}
+/**
+ * Base column header dropdown menu for pin/sort/autosize actions.
+ * Uses positioned div with portal rendering.
+ * Shared by Radix and Fluent UI packages (Material uses MUI Menu instead).
+ */
+export declare function BaseColumnHeaderMenu(props: BaseColumnHeaderMenuProps): React.ReactPortal | null;

package/dist/types/components/BaseDropIndicator.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface BaseDropIndicatorProps {
+    dropIndicatorX: number;
+    wrapperLeft: number;
+    className?: string;
+}
+export declare function BaseDropIndicator({ dropIndicatorX, wrapperLeft, className }: BaseDropIndicatorProps): React.ReactElement;

package/dist/types/components/BaseEmptyState.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface BaseEmptyStateClassNames {
+    emptyStateInGrid?: string;
+    emptyStateInGridInner?: string;
+    emptyStateInGridIcon?: string;
+    emptyStateInGridTitle?: string;
+    emptyStateInGridMessage?: string;
+    emptyStateInGridLink?: string;
+}
+export interface BaseEmptyStateProps {
+    emptyState: {
+        render?: () => React.ReactNode;
+        message?: React.ReactNode;
+        hasActiveFilters?: boolean;
+        onClearAll?: () => void;
+    };
+    classNames: BaseEmptyStateClassNames;
+    /** Optional icon rendered above the title (e.g. emoji or SVG) */
+    icon?: React.ReactNode;
+}
+export declare function BaseEmptyState({ emptyState, classNames, icon }: BaseEmptyStateProps): React.ReactElement;

package/dist/types/components/BaseLoadingOverlay.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface BaseLoadingOverlayClassNames {
+    loadingOverlay?: string;
+    loadingOverlayContent?: string;
+    spinner?: string;
+    loadingOverlayText?: string;
+}
+export interface BaseLoadingOverlayProps {
+    message: string;
+    classNames: BaseLoadingOverlayClassNames;
+}
+export declare function BaseLoadingOverlay({ message, classNames }: BaseLoadingOverlayProps): React.ReactElement;

package/dist/types/components/createOGrid.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import type { IOGridProps, IOGridApi, IOGridDataGridProps } from '../types';
+import type { IColumnDef } from '../types';
+import type { IColumnChooserProps } from './ColumnChooserProps';
+import type { IPaginationControlsProps } from './PaginationControlsProps';
+export interface InlineCellEditorProps<T> {
+    value: unknown;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    editorType: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+}
+export interface GridRowProps {
+    item: unknown;
+    rowIndex: number;
+    rowId: string | number;
+    isSelected: boolean;
+    visibleCols: IColumnDef<unknown>[];
+    columnMeta: {
+        cellStyles: Record<string, React.CSSProperties>;
+        cellClasses: Record<string, string>;
+    };
+    renderCellContent: (item: unknown, col: IColumnDef<unknown>, rowIndex: number, colIdx: number) => React.ReactNode;
+    handleSingleRowClick: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    handleRowCheckboxChange: (rowId: string | number, checked: boolean, rowIndex: number, shiftKey: boolean) => void;
+    lastMouseShiftRef: React.MutableRefObject<boolean>;
+    hasCheckboxCol: boolean;
+    hasRowNumbersCol: boolean;
+    rowNumberOffset: number;
+    selectionRange: {
+        startRow: number;
+        endRow: number;
+        startCol: number;
+        endCol: number;
+    } | null;
+    activeCell: {
+        rowIndex: number;
+        columnIndex: number;
+    } | null;
+    cutRange: {
+        startRow: number;
+        endRow: number;
+        startCol: number;
+        endCol: number;
+    } | null;
+    copyRange: {
+        startRow: number;
+        endRow: number;
+        startCol: number;
+        endCol: number;
+    } | null;
+    isDragging: boolean;
+    editingRowId: string | number | null;
+}
+export interface CreateOGridComponents {
+    DataGridTable: React.ComponentType<IOGridDataGridProps<unknown>>;
+    ColumnChooser: React.ComponentType<IColumnChooserProps>;
+    PaginationControls: React.ComponentType<IPaginationControlsProps>;
+    /** Optional wrapper component + props (e.g. MUI Box with sx). */
+    containerComponent?: React.ElementType;
+    containerProps?: Record<string, unknown>;
+}
+/**
+ * Factory that creates a memoized, forwardRef OGrid component.
+ * Used by Radix and Fluent to avoid duplicating the same wiring code.
+ * Material uses its own OGrid because it adds MUI theme bridging (containerSx).
+ */
+export declare function createOGrid(components: CreateOGridComponents): React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;

package/dist/types/hooks/useDataGridTableOrchestration.d.ts

@@ -46,6 +46,7 @@ export interface UseDataGridTableOrchestrationResult<T> {
     columnOrder: IOGridDataGridProps<T>['columnOrder'];
     columnReorder: IOGridDataGridProps<T>['columnReorder'];
     density: 'compact' | 'normal' | 'comfortable';
+    rowHeight: number | undefined;
     pinnedColumns: IOGridDataGridProps<T>['pinnedColumns'];
     currentPage: number;
     propPageSize: number;

package/dist/types/index.d.ts

@@ -16,10 +16,20 @@ export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export type { MarchingAntsOverlayProps } from './components/MarchingAntsOverlay';
 export { SideBar } from './components/SideBar';
 export type { SideBarProps, SideBarFilterColumn } from './components/SideBar';
+export { BaseColumnHeaderMenu } from './components/BaseColumnHeaderMenu';
+export type { BaseColumnHeaderMenuProps, ColumnHeaderMenuClassNames } from './components/BaseColumnHeaderMenu';
+export { createOGrid } from './components/createOGrid';
+export type { CreateOGridComponents, GridRowProps, InlineCellEditorProps } from './components/createOGrid';
 export { CellErrorBoundary } from './components/CellErrorBoundary';
 export type { CellErrorBoundaryProps } from './components/CellErrorBoundary';
 export { EmptyState } from './components/EmptyState';
 export type { EmptyStateProps } from './components/EmptyState';
+export { BaseEmptyState } from './components/BaseEmptyState';
+export type { BaseEmptyStateProps, BaseEmptyStateClassNames } from './components/BaseEmptyState';
+export { BaseLoadingOverlay } from './components/BaseLoadingOverlay';
+export type { BaseLoadingOverlayProps, BaseLoadingOverlayClassNames } from './components/BaseLoadingOverlay';
+export { BaseDropIndicator } from './components/BaseDropIndicator';
+export type { BaseDropIndicatorProps } from './components/BaseDropIndicator';
 export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from './components/ColumnHeaderFilterContent';
 export type { IColumnHeaderFilterProps, DateFilterContentProps, DateFilterClassNames, } from './components/ColumnHeaderFilterContent';
 export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, UndoRedoStack, } from './utils';

package/dist/types/types/dataGridTypes.d.ts

@@ -72,6 +72,8 @@ interface IOGridBaseProps<T> {
     columnReorder?: boolean;
     /** Virtual scrolling configuration. When provided, only visible rows are rendered for large datasets. */
     virtualScroll?: IVirtualScrollConfig;
+    /** Fixed row height in pixels. Overrides default row height (36px). */
+    rowHeight?: number;
     /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
     density?: 'compact' | 'normal' | 'comfortable';
     /** Fires once when the grid first renders with data (useful for restoring column state). */
@@ -110,6 +112,8 @@ export interface IOGridDataGridProps<T> {
     onColumnOrderChange?: (order: string[]) => void;
     /** Called when a column is resized by the user. */
     onColumnResized?: (columnId: string, width: number) => void;
+    /** Called when user requests autosize for a single column (with measured width). */
+    onAutosizeColumn?: (columnId: string, width: number) => void;
     /** Called when a column is pinned or unpinned. */
     onColumnPinned?: (columnId: string, pinned: 'left' | 'right' | null) => void;
     /** Runtime pin overrides (from restored state or programmatic changes). */
@@ -157,6 +161,8 @@ export interface IOGridDataGridProps<T> {
     columnReorder?: boolean;
     /** Virtual scrolling configuration. When provided, only visible rows are rendered for large datasets. */
     virtualScroll?: IVirtualScrollConfig;
+    /** Fixed row height in pixels. Overrides default row height (36px). */
+    rowHeight?: number;
     /** Cell spacing/density preset. Controls cell padding throughout the grid. Default: 'normal'. */
     density?: 'compact' | 'normal' | 'comfortable';
     /** Called when a cell renderer or custom editor throws an error. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.0.19",
+  "version": "2.0.21",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.19"
+    "@alaarab/ogrid-core": "2.0.21"
   },
   "peerDependencies": {
     "@tanstack/react-virtual": "^3.0.0",