@alaarab/ogrid-core 1.5.0 → 1.7.1

package/README.md

@@ -32,14 +32,13 @@ npm install @alaarab/ogrid-core
 
 ### Components
 
-- `OGridLayout` -- Layout structure for OGrid: toolbar row (title, toolbar, columnChooser), grid area, pagination. Accepts `containerComponent` and `gap` so Fluent/Material/Radix supply their Container (div or Box).
+- `OGridLayout` -- Unified bordered layout: toolbar strip (custom content + column chooser), optional secondary toolbar row, sidebar, grid area, and footer strip (pagination).
 
 ### Utilities
 
 - `getPaginationViewModel(...)` -- Page numbers, ellipsis, start/end item for PaginationControls
 - `getHeaderFilterConfig(col, input)` -- ColumnHeaderFilter props from column + filter/sort state
 - `getCellRenderDescriptor(item, col, rowIndex, colIdx, input)` -- Cell mode (editing-inline / editing-popover / display) and flags for DataGridTable
-- `toDataGridFilterProps(filters)` -- Splits `IFilters` into `multiSelectFilters`, `textFilters`, `peopleFilters`
 - `toUserLike(user)` -- Converts a user-like object to `UserLike`
 - `exportToCsv(items, columns, getValue, filename)` -- Full CSV export
 - `buildCsvHeader`, `buildCsvRows`, `triggerCsvDownload`, `escapeCsvValue` -- Low-level CSV helpers

package/dist/esm/components/OGridLayout.js

@@ -27,6 +27,11 @@ const toolbarSectionStyle = {
     alignItems: 'center',
     gap: 8,
 };
+const toolbarBelowStyle = {
+    padding: '6px 12px',
+    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+    background: 'var(--ogrid-header-bg, #f5f5f5)',
+};
 const footerStripStyle = {
     borderTop: '1px solid var(--ogrid-border, #e0e0e0)',
     background: 'var(--ogrid-header-bg, #f5f5f5)',
@@ -56,7 +61,6 @@ const gridChildStyle = {
 };
 /**
  * Renders OGrid layout as a unified bordered container:
- *   [deprecated title above]
  *   ┌────────────────────────────────────┐
  *   │ [toolbar strip]                    │
  *   ├────────────────────────────────────┤
@@ -66,18 +70,14 @@ const gridChildStyle = {
  *   └────────────────────────────────────┘
  */
 export function OGridLayout(props) {
-    const { containerComponent: Container = 'div', containerProps = {}, gap = 8, className, title, toolbar, columnChooser, toolbarEnd: toolbarEndProp, children, pagination, sideBar, } = props;
+    const { containerComponent: Container = 'div', containerProps = {}, className, toolbar, toolbarEnd, toolbarBelow, 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',
         height: '100%',
-        gap: title != null ? (typeof gap === 'number' ? `${gap}px` : gap) : undefined,
     };
-    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 }))] })] }));
+    return (_jsx(Container, { className: className, style: rootStyle, ...containerProps, children: _jsxs("div", { style: borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsx("div", { style: toolbarSectionStyle, children: toolbarEnd })] })), toolbarBelow && (_jsx("div", { style: toolbarBelowStyle, children: toolbarBelow })), 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

@@ -6,7 +6,7 @@ const PANEL_LABELS = {
     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 { activePanel, onPanelChange, panels, position, columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, filterableColumns, filters, onFilterChange, filterOptions, } = props;
     const isOpen = activePanel !== null;
     const handleTabClick = (panel) => {
         onPanelChange(activePanel === panel ? null : panel);
@@ -47,7 +47,7 @@ export function SideBar(props) {
                     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;
+                }, 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, filters: filters, onFilterChange: onFilterChange, 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 ---
@@ -70,28 +70,30 @@ function ColumnsPanel(props) {
     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;
+    const { filterableColumns, filters, onFilterChange, 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) => {
+            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: 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: { 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: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.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 existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
+                                            const to = existingValue.to;
+                                            onFilterChange(filterKey, from || to ? { type: 'date', value: { 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: filters[filterKey]?.type === 'date' ? (filters[filterKey].value.to ?? '') : '', onChange: (e) => {
                                             const to = e.target.value || undefined;
-                                            const from = dateFilters[filterKey]?.from;
-                                            onDateFilterChange(filterKey, from || to ? { from, to } : undefined);
+                                            const existingValue = filters[filterKey]?.type === 'date' ? filters[filterKey].value : {};
+                                            const from = existingValue.from;
+                                            onFilterChange(filterKey, from || to ? { type: 'date', value: { 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);
+                            const selected = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value.includes(opt) : false;
                             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 current = filters[filterKey]?.type === 'multiSelect' ? filters[filterKey].value : [];
                                             const next = e.target.checked
                                                 ? [...current, opt]
                                                 : current.filter((v) => v !== opt);
-                                            onMultiSelectFilterChange(filterKey, next);
+                                            onFilterChange(filterKey, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
                                         } }), _jsx("span", { children: opt })] }, opt));
                         }) }))] }, col.columnId));
         }) }));

package/dist/esm/hooks/useColumnResize.js

@@ -8,10 +8,16 @@ export function useColumnResize({ columnSizingOverrides, setColumnSizingOverride
         e.stopPropagation();
         const startX = e.clientX;
         const columnId = col.columnId;
-        const startWidth = columnSizingOverrides[columnId]?.widthPx
-            ?? col.idealWidth
-            ?? col.defaultWidth
-            ?? defaultWidth;
+        // Measure the actual rendered width from the DOM. With table-layout: auto,
+        // the browser may have auto-sized the column wider than the config values.
+        // The resize handle is a direct child of <th>, so parentElement is the header cell.
+        const thEl = e.currentTarget.parentElement;
+        const startWidth = thEl
+            ? thEl.getBoundingClientRect().width
+            : columnSizingOverrides[columnId]?.widthPx
+                ?? col.idealWidth
+                ?? col.defaultWidth
+                ?? defaultWidth;
         let latestWidth = startWidth;
         // Lock cursor and prevent text selection during drag
         const prevCursor = document.body.style.cursor;

package/dist/esm/hooks/useDataGridState.js

@@ -99,6 +99,8 @@ export function useDataGridState(params) {
         endBatch: undoRedo.endBatch,
     });
     const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
+        if (e.button !== 0)
+            return;
         wrapperRef.current?.focus();
         clearClipboardRanges();
         handleCellMouseDownBase(e, rowIndex, globalColIndex);
@@ -209,37 +211,25 @@ export function useDataGridState(params) {
     const showEmptyInGrid = items.length === 0 && !!emptyState;
     const hasCellSelection = selectionRange != null || activeCell != null;
     // --- View-model inputs (shared across all 3 DataGridTables) ---
-    const { sortBy, sortDirection, onColumnSort, textFilters = {}, onTextFilterChange, peopleFilters = {}, onPeopleFilterChange, peopleSearch, filterOptions, loadingFilterOptions, multiSelectFilters, onMultiSelectFilterChange, dateFilters = {}, onDateFilterChange, } = props;
+    const { sortBy, sortDirection, onColumnSort, filters, onFilterChange, filterOptions, loadingFilterOptions, peopleSearch, } = props;
     const headerFilterInput = useMemo(() => ({
         sortBy,
         sortDirection,
         onColumnSort,
-        textFilters,
-        onTextFilterChange,
-        peopleFilters,
-        onPeopleFilterChange,
-        peopleSearch,
+        filters,
+        onFilterChange,
         filterOptions,
         loadingFilterOptions,
-        multiSelectFilters,
-        onMultiSelectFilterChange,
-        dateFilters,
-        onDateFilterChange,
+        peopleSearch,
     }), [
         sortBy,
         sortDirection,
         onColumnSort,
-        textFilters,
-        onTextFilterChange,
-        peopleFilters,
-        onPeopleFilterChange,
-        peopleSearch,
+        filters,
+        onFilterChange,
         filterOptions,
         loadingFilterOptions,
-        multiSelectFilters,
-        onMultiSelectFilterChange,
-        dateFilters,
-        onDateFilterChange,
+        peopleSearch,
     ]);
     const cellDescriptorInput = useMemo(() => ({
         editingCell,
@@ -305,59 +295,71 @@ export function useDataGridState(params) {
         setPendingEditorValue(undefined);
     }, [setEditingCell, setPendingEditorValue]);
     return {
-        flatColumns,
-        visibleCols,
-        visibleColumnCount,
-        totalColCount,
-        colOffset,
-        hasCheckboxCol,
-        rowIndexByRowId,
-        selectedRowIds,
-        updateSelection,
-        handleRowCheckboxChange,
-        handleSelectAll,
-        allSelected,
-        someSelected,
-        editingCell,
-        setEditingCell,
-        pendingEditorValue,
-        setPendingEditorValue,
-        activeCell: cellSelection ? activeCell : null,
-        setActiveCell: cellSelection ? setActiveCell : NOOP,
-        selectionRange: cellSelection ? selectionRange : null,
-        setSelectionRange: cellSelection ? setSelectionRange : NOOP,
-        handleCellMouseDown: cellSelection ? handleCellMouseDown : NOOP_MOUSE,
-        handleSelectAllCells: cellSelection ? handleSelectAllCells : NOOP,
-        contextMenu: cellSelection ? contextMenu : null,
-        setContextMenu: cellSelection ? setContextMenu : NOOP,
-        handleCellContextMenu: cellSelection ? handleCellContextMenu : NOOP_CTX,
-        closeContextMenu: cellSelection ? closeContextMenu : NOOP,
-        canUndo: undoRedo.canUndo,
-        canRedo: undoRedo.canRedo,
-        onUndo: undoRedo.undo,
-        onRedo: undoRedo.redo,
-        handleCopy: cellSelection ? handleCopy : NOOP,
-        handleCut: cellSelection ? handleCut : NOOP,
-        handlePaste: cellSelection ? handlePaste : NOOP_ASYNC,
-        cutRange: cellSelection ? cutRange : null,
-        copyRange: cellSelection ? copyRange : null,
-        handleGridKeyDown: cellSelection ? handleGridKeyDown : NOOP_KEY,
-        handleFillHandleMouseDown: cellSelection ? handleFillHandleMouseDown : NOOP,
-        containerWidth,
-        minTableWidth,
-        desiredTableWidth,
-        columnSizingOverrides,
-        setColumnSizingOverrides,
-        onColumnResized,
-        headerFilterInput,
-        cellDescriptorInput,
-        commitCellEdit,
-        cancelPopoverEdit,
-        popoverAnchorEl,
-        setPopoverAnchorEl,
-        clearClipboardRanges: cellSelection ? clearClipboardRanges : NOOP,
-        statusBarConfig,
-        showEmptyInGrid,
-        hasCellSelection: cellSelection ? hasCellSelection : false,
+        layout: {
+            flatColumns,
+            visibleCols,
+            visibleColumnCount,
+            totalColCount,
+            colOffset,
+            hasCheckboxCol,
+            rowIndexByRowId,
+            containerWidth,
+            minTableWidth,
+            desiredTableWidth,
+            columnSizingOverrides,
+            setColumnSizingOverrides,
+            onColumnResized,
+        },
+        rowSelection: {
+            selectedRowIds,
+            updateSelection,
+            handleRowCheckboxChange,
+            handleSelectAll,
+            allSelected,
+            someSelected,
+        },
+        editing: {
+            editingCell,
+            setEditingCell,
+            pendingEditorValue,
+            setPendingEditorValue,
+            commitCellEdit,
+            cancelPopoverEdit,
+            popoverAnchorEl,
+            setPopoverAnchorEl,
+        },
+        interaction: {
+            activeCell: cellSelection ? activeCell : null,
+            setActiveCell: cellSelection ? setActiveCell : NOOP,
+            selectionRange: cellSelection ? selectionRange : null,
+            setSelectionRange: cellSelection ? setSelectionRange : NOOP,
+            handleCellMouseDown: cellSelection ? handleCellMouseDown : NOOP_MOUSE,
+            handleSelectAllCells: cellSelection ? handleSelectAllCells : NOOP,
+            hasCellSelection: cellSelection ? hasCellSelection : false,
+            handleGridKeyDown: cellSelection ? handleGridKeyDown : NOOP_KEY,
+            handleFillHandleMouseDown: cellSelection ? handleFillHandleMouseDown : NOOP,
+            handleCopy: cellSelection ? handleCopy : NOOP,
+            handleCut: cellSelection ? handleCut : NOOP,
+            handlePaste: cellSelection ? handlePaste : NOOP_ASYNC,
+            cutRange: cellSelection ? cutRange : null,
+            copyRange: cellSelection ? copyRange : null,
+            clearClipboardRanges: cellSelection ? clearClipboardRanges : NOOP,
+            canUndo: undoRedo.canUndo,
+            canRedo: undoRedo.canRedo,
+            onUndo: undoRedo.undo,
+            onRedo: undoRedo.redo,
+        },
+        contextMenu: {
+            menuPosition: cellSelection ? contextMenu : null,
+            setMenuPosition: cellSelection ? setContextMenu : NOOP,
+            handleCellContextMenu: cellSelection ? handleCellContextMenu : NOOP_CTX,
+            closeContextMenu: cellSelection ? closeContextMenu : NOOP,
+        },
+        viewModels: {
+            headerFilterInput,
+            cellDescriptorInput,
+            statusBarConfig,
+            showEmptyInGrid,
+        },
     };
 }

package/dist/esm/hooks/useOGrid.js

@@ -1,12 +1,11 @@
 import { useMemo, useCallback, useState, useEffect, useRef, useImperativeHandle, } from 'react';
-import { getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, } from '../utils/ogridHelpers';
-import { getCellValue, flattenColumns } from '../utils';
-import { toDataGridFilterProps } from '../types';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, } from '../utils/ogridHelpers';
+import { flattenColumns, processClientSideData } from '../utils';
 import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
 const DEFAULT_PAGE_SIZE = 25;
 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, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, emptyState, entityLabelPlural = 'items', className, title, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, '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, freezeRows, freezeCols, 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, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
     // Resolve column chooser placement
     const columnChooserPlacement = columnChooserProp === false ? 'none'
         : columnChooserProp === 'sidebar' ? 'sidebar'
@@ -70,23 +69,14 @@ export function useOGrid(props, ref) {
             setInternalVisibleColumns(cols);
         onVisibleColumnsChange?.(cols);
     }, [controlledVisibleColumns, onVisibleColumnsChange]);
-    const { multiSelectFilters, textFilters, peopleFilters, dateFilters } = useMemo(() => toDataGridFilterProps(filters), [filters]);
     const handleSort = useCallback((columnKey) => {
         setSort({
             field: columnKey,
             direction: sort.field === columnKey && sort.direction === 'asc' ? 'desc' : 'asc',
         });
     }, [sort, setSort]);
-    const handleMultiSelectFilterChange = useCallback((key, values) => {
-        setFilters(mergeFilter(filters, key, values.length ? values : undefined));
-    }, [filters, setFilters]);
-    const handleTextFilterChange = useCallback((key, value) => {
-        setFilters(mergeFilter(filters, key, value.trim() || undefined));
-    }, [filters, setFilters]);
-    const handlePeopleFilterChange = useCallback((key, user) => {
-        setFilters(mergeFilter(filters, key, user ?? undefined));
-    }, [filters, setFilters]);
-    const handleDateFilterChange = useCallback((key, value) => {
+    /** Single filter change handler — wraps discriminated FilterValue into mergeFilter. */
+    const handleFilterChange = useCallback((key, value) => {
         setFilters(mergeFilter(filters, key, value));
     }, [filters, setFilters]);
     const handleVisibilityChange = useCallback((columnKey, isVisible) => {
@@ -113,88 +103,11 @@ export function useOGrid(props, ref) {
             return serverFilterOptions;
         return deriveFilterOptionsFromData(displayData, columns);
     }, [dataSource, displayData, columns, serverFilterOptions]);
+    // --- Client-side filtering & sorting ---
     const clientItemsAndTotal = useMemo(() => {
         if (!isClientSide)
             return null;
-        let rows = displayData.slice();
-        columns.forEach((col) => {
-            const filterKey = getFilterField(col);
-            const f = col.filterable && typeof col.filterable === 'object'
-                ? col.filterable
-                : null;
-            const type = f?.type;
-            const val = filters[filterKey];
-            if (type === 'multiSelect' && Array.isArray(val) && val.length > 0) {
-                rows = rows.filter((r) => val.includes(String(getCellValue(r, col))));
-            }
-            else if (type === 'text' &&
-                typeof val === 'string' &&
-                val.trim()) {
-                const lower = val.trim().toLowerCase();
-                rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase().includes(lower));
-            }
-            else if (type === 'people' &&
-                val &&
-                typeof val === 'object' &&
-                'email' in val) {
-                const email = val.email.toLowerCase();
-                rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase() === email);
-            }
-            else if (type === 'date' &&
-                val &&
-                typeof val === 'object' &&
-                !Array.isArray(val) &&
-                ('from' in val || 'to' in val)) {
-                const dv = val;
-                rows = rows.filter((r) => {
-                    const cellVal = getCellValue(r, col);
-                    if (cellVal == null)
-                        return false;
-                    const cellDate = new Date(String(cellVal));
-                    if (Number.isNaN(cellDate.getTime()))
-                        return false;
-                    const cellDateStr = cellDate.toISOString().split('T')[0];
-                    if (dv.from && cellDateStr < dv.from)
-                        return false;
-                    if (dv.to && cellDateStr > dv.to)
-                        return false;
-                    return true;
-                });
-            }
-        });
-        if (sort.field) {
-            const sortCol = columns.find((c) => c.columnId === sort.field);
-            const compare = sortCol?.compare;
-            const dir = sort.direction === 'asc' ? 1 : -1;
-            rows.sort((a, b) => {
-                if (compare)
-                    return compare(a, b) * dir;
-                const av = sortCol
-                    ? getCellValue(a, sortCol)
-                    : a[sort.field];
-                const bv = sortCol
-                    ? getCellValue(b, sortCol)
-                    : b[sort.field];
-                if (av == null && bv == null)
-                    return 0;
-                if (av == null)
-                    return -1 * dir;
-                if (bv == null)
-                    return 1 * dir;
-                if (sortCol?.type === 'date') {
-                    const at = new Date(String(av)).getTime();
-                    const bt = new Date(String(bv)).getTime();
-                    const aN = Number.isNaN(at) ? 0 : at;
-                    const bN = Number.isNaN(bt) ? 0 : bt;
-                    return aN === bN ? 0 : aN > bN ? dir : -dir;
-                }
-                if (typeof av === 'number' && typeof bv === 'number')
-                    return av === bv ? 0 : av > bv ? dir : -dir;
-                const as = String(av).toLowerCase();
-                const bs = String(bv).toLowerCase();
-                return as === bs ? 0 : as > bs ? dir : -dir;
-            });
-        }
+        const rows = processClientSideData(displayData, columns, filters, sort.field, sort.direction);
         const total = rows.length;
         const start = (page - 1) * pageSize;
         const paged = rows.slice(start, start + pageSize);
@@ -344,9 +257,9 @@ export function useOGrid(props, ref) {
         getRowId,
         onSelectionChange,
     ]);
+    // With discriminated union, any defined value is active (mergeFilter already strips empties)
     const hasActiveFilters = useMemo(() => {
-        return Object.values(filters).some((v) => v !== undefined &&
-            (Array.isArray(v) ? v.length > 0 : typeof v === 'string' ? v.trim() !== '' : true));
+        return Object.values(filters).some((v) => v !== undefined);
     }, [filters]);
     const columnChooserColumns = useMemo(() => columns.map((c) => ({
         columnId: c.columnId,
@@ -413,12 +326,8 @@ export function useOGrid(props, ref) {
             onVisibilityChange: handleVisibilityChange,
             onSetVisibleColumns: setVisibleColumns,
             filterableColumns,
-            multiSelectFilters,
-            textFilters: textFilters ?? {},
-            onMultiSelectFilterChange: handleMultiSelectFilterChange,
-            onTextFilterChange: handleTextFilterChange,
-            dateFilters,
-            onDateFilterChange: handleDateFilterChange,
+            filters,
+            onFilterChange: handleFilterChange,
             filterOptions: clientFilterOptions,
         };
     }, [
@@ -432,12 +341,8 @@ export function useOGrid(props, ref) {
         handleVisibilityChange,
         setVisibleColumns,
         filterableColumns,
-        multiSelectFilters,
-        textFilters,
-        handleMultiSelectFilterChange,
-        handleTextFilterChange,
-        dateFilters,
-        handleDateFilterChange,
+        filters,
+        handleFilterChange,
         clientFilterOptions,
     ]);
     const dataGridProps = {
@@ -468,14 +373,8 @@ export function useOGrid(props, ref) {
         onSelectionChange: handleSelectionChange,
         statusBar: statusBarConfig,
         isLoading: (isServerSide && loading) || displayLoading,
-        multiSelectFilters,
-        onMultiSelectFilterChange: handleMultiSelectFilterChange,
-        textFilters,
-        onTextFilterChange: handleTextFilterChange,
-        peopleFilters,
-        onPeopleFilterChange: handlePeopleFilterChange,
-        dateFilters,
-        onDateFilterChange: handleDateFilterChange,
+        filters,
+        onFilterChange: handleFilterChange,
         filterOptions: clientFilterOptions,
         loadingFilterOptions: dataSource?.fetchFilterOptions ? loadingFilterOptions : {},
         peopleSearch: dataSource?.searchPeople,
@@ -502,8 +401,8 @@ export function useOGrid(props, ref) {
         visibleColumns,
         handleVisibilityChange,
         columnChooserPlacement,
-        title,
         toolbar,
+        toolbarBelow,
         className,
         entityLabelPlural,
         emptyState,

package/dist/esm/hooks/useRowSelection.js

@@ -55,8 +55,8 @@ export function useRowSelection(params) {
             updateSelection(new Set());
         }
     }, [items, getRowId, updateSelection]);
-    const allSelected = items.length > 0 && items.every((item) => selectedRowIds.has(getRowId(item)));
-    const someSelected = !allSelected && items.some((item) => selectedRowIds.has(getRowId(item)));
+    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]);
     return {
         selectedRowIds,
         updateSelection,

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { toUserLike, toDataGridFilterProps, isInSelectionRange, normalizeSelectionRange } from './types';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 // Hooks
 export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, } from './hooks';
 // Components
@@ -8,4 +8,4 @@ export { GridContextMenu } from './components/GridContextMenu';
 export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export { SideBar } from './components/SideBar';
 // Utilities
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, } from './utils';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from './utils';

package/dist/esm/types/dataGridTypes.js

@@ -8,30 +8,6 @@ export function toUserLike(u) {
         photo: u.photo
     };
 }
-/** Type guard for IDateFilterValue. */
-function isDateFilterValue(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value) && !('email' in value) && ('from' in value || 'to' in value);
-}
-/** Split IFilters into DataGridTable's multiSelect, text, people, and date props. */
-export function toDataGridFilterProps(filters) {
-    const multiSelectFilters = {};
-    const textFilters = {};
-    const peopleFilters = {};
-    const dateFilters = {};
-    for (const [key, value] of Object.entries(filters)) {
-        if (value === undefined)
-            continue;
-        if (Array.isArray(value))
-            multiSelectFilters[key] = value;
-        else if (typeof value === 'string')
-            textFilters[key] = value;
-        else if (typeof value === 'object' && value !== null && 'email' in value)
-            peopleFilters[key] = value;
-        else if (isDateFilterValue(value))
-            dateFilters[key] = value;
-    }
-    return { multiSelectFilters, textFilters, peopleFilters, dateFilters };
-}
 /** Returns true if (row, col) is inside the range (inclusive). */
 export function isInSelectionRange(range, row, col) {
     const minR = Math.min(range.startRow, range.endRow);

package/dist/esm/types/index.js

@@ -1 +1 @@
-export { toUserLike, toDataGridFilterProps, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/dist/esm/utils/clientSideData.js

@@ -0,0 +1,94 @@
+import { getCellValue } from './cellValue';
+import { getFilterField } from './ogridHelpers';
+/**
+ * Apply client-side filtering and sorting to data.
+ * Extracted from useOGrid for testability and reuse.
+ *
+ * @param data - The full dataset to process
+ * @param columns - Column definitions (used for filtering and sorting)
+ * @param filters - Current filter state (discriminated FilterValue union)
+ * @param sortBy - Column ID to sort by (optional)
+ * @param sortDirection - Sort direction (optional)
+ * @returns Filtered and sorted array
+ */
+export function processClientSideData(data, columns, filters, sortBy, sortDirection) {
+    let rows = data.slice();
+    // --- Filtering ---
+    columns.forEach((col) => {
+        const filterKey = getFilterField(col);
+        const val = filters[filterKey];
+        if (!val)
+            return;
+        switch (val.type) {
+            case 'multiSelect':
+                if (val.value.length > 0) {
+                    rows = rows.filter((r) => val.value.includes(String(getCellValue(r, col))));
+                }
+                break;
+            case 'text':
+                if (val.value.trim()) {
+                    const lower = val.value.trim().toLowerCase();
+                    rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase().includes(lower));
+                }
+                break;
+            case 'people': {
+                const email = val.value.email.toLowerCase();
+                rows = rows.filter((r) => String(getCellValue(r, col) ?? '').toLowerCase() === email);
+                break;
+            }
+            case 'date': {
+                const dv = val.value;
+                rows = rows.filter((r) => {
+                    const cellVal = getCellValue(r, col);
+                    if (cellVal == null)
+                        return false;
+                    const cellDate = new Date(String(cellVal));
+                    if (Number.isNaN(cellDate.getTime()))
+                        return false;
+                    const cellDateStr = cellDate.toISOString().split('T')[0];
+                    if (dv.from && cellDateStr < dv.from)
+                        return false;
+                    if (dv.to && cellDateStr > dv.to)
+                        return false;
+                    return true;
+                });
+                break;
+            }
+        }
+    });
+    // --- Sorting ---
+    if (sortBy) {
+        const sortCol = columns.find((c) => c.columnId === sortBy);
+        const compare = sortCol?.compare;
+        const dir = sortDirection === 'asc' ? 1 : -1;
+        rows.sort((a, b) => {
+            if (compare)
+                return compare(a, b) * dir;
+            const av = sortCol
+                ? getCellValue(a, sortCol)
+                : a[sortBy];
+            const bv = sortCol
+                ? getCellValue(b, sortCol)
+                : b[sortBy];
+            if (av == null && bv == null)
+                return 0;
+            if (av == null)
+                return -1 * dir;
+            if (bv == null)
+                return 1 * dir;
+            if (sortCol?.type === 'date') {
+                const at = new Date(String(av)).getTime();
+                const bt = new Date(String(bv)).getTime();
+                const aN = Number.isNaN(at) ? 0 : at;
+                const bN = Number.isNaN(bt) ? 0 : bt;
+                return aN === bN ? 0 : aN > bN ? dir : -dir;
+            }
+            if (typeof av === 'number' && typeof bv === 'number')
+                return av === bv ? 0 : av > bv ? dir : -dir;
+            const as = String(av).toLowerCase();
+            const bs = String(bv).toLowerCase();
+            return as === bs ? 0 : as > bs ? dir : -dir;
+        });
+    }
+    return rows;
+}

package/dist/esm/utils/dataGridViewModel.js

@@ -12,6 +12,7 @@ export function getHeaderFilterConfig(col, input) {
     const filterType = (filterable?.type ?? 'none');
     const filterField = filterable?.filterField ?? col.columnId;
     const sortable = col.sortable !== false;
+    const filterValue = input.filters[filterField];
     const base = {
         columnKey: col.columnId,
         columnName: col.name,
@@ -23,19 +24,15 @@ export function getHeaderFilterConfig(col, input) {
     if (filterType === 'text') {
         return {
             ...base,
-            textValue: input.textFilters?.[filterField] ?? '',
-            onTextChange: input.onTextFilterChange
-                ? (v) => input.onTextFilterChange(filterField, v)
-                : undefined,
+            textValue: filterValue?.type === 'text' ? filterValue.value : '',
+            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
         };
     }
     if (filterType === 'people') {
         return {
             ...base,
-            selectedUser: input.peopleFilters?.[filterField],
-            onUserChange: input.onPeopleFilterChange
-                ? (u) => input.onPeopleFilterChange(filterField, u)
-                : undefined,
+            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
+            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
             peopleSearch: input.peopleSearch,
         };
     }
@@ -44,17 +41,15 @@ export function getHeaderFilterConfig(col, input) {
             ...base,
             options: input.filterOptions[filterField] ?? [],
             isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
-            selectedValues: input.multiSelectFilters[filterField] ?? [],
-            onFilterChange: (values) => input.onMultiSelectFilterChange(filterField, values),
+            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
+            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
         };
     }
     if (filterType === 'date') {
         return {
             ...base,
-            dateValue: input.dateFilters?.[filterField],
-            onDateChange: input.onDateFilterChange
-                ? (v) => input.onDateFilterChange(filterField, v)
-                : undefined,
+            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
+            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
         };
     }
     return base;

package/dist/esm/utils/index.js

@@ -9,3 +9,4 @@ export { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export { parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, } from './valueParsers';
 export { computeAggregations } from './aggregationUtils';
+export { processClientSideData } from './clientSideData';

package/dist/esm/utils/ogridHelpers.js

@@ -4,16 +4,14 @@ export function getFilterField(col) {
     const f = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
     return (f?.filterField ?? col.columnId);
 }
-/** Merge a single filter change into a full IFilters object. */
+/** Merge a single filter change into a full IFilters object. Strips empty values automatically. */
 export function mergeFilter(prev, key, value) {
     const next = { ...prev };
     const isEmpty = value === undefined ||
-        (Array.isArray(value) && value.length === 0) ||
-        (typeof value === 'string' && value.trim() === '');
-    // Date filter is empty when neither from nor to is set
-    const isEmptyDate = typeof value === 'object' && value !== null && !Array.isArray(value) && !('email' in value) &&
-        !(value.from || value.to);
-    if (isEmpty || isEmptyDate) {
+        (value.type === 'text' && value.value.trim() === '') ||
+        (value.type === 'multiSelect' && value.value.length === 0) ||
+        (value.type === 'date' && !value.value.from && !value.value.to);
+    if (isEmpty) {
         delete next[key];
     }
     else {

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

@@ -10,17 +10,13 @@ export interface OGridLayoutProps {
     containerComponent?: React.ElementType;
     /** Extra props for the root container (e.g. sx for MUI Box). */
     containerProps?: Record<string, unknown>;
-    /** Gap between deprecated title and the bordered container in px (default: 8). */
-    gap?: number | string;
     className?: string;
-    /** @deprecated Render title outside OGrid. Renders above the bordered container during transition. */
-    title?: React.ReactNode;
     /** Custom toolbar content (left-aligned in toolbar strip). */
     toolbar?: React.ReactNode;
-    /** @deprecated Use toolbarEnd instead. */
-    columnChooser?: React.ReactNode;
     /** Built-in toolbar items rendered on the right side (column chooser, etc.). */
     toolbarEnd?: React.ReactNode;
+    /** Secondary toolbar row below the primary toolbar (e.g. active filter chips). Full width. */
+    toolbarBelow?: React.ReactNode;
     /** Grid content (DataGridTable). */
     children: React.ReactNode;
     /** Pagination controls (rendered in footer strip inside the bordered container). */
@@ -30,7 +26,6 @@ export interface OGridLayoutProps {
 }
 /**
  * Renders OGrid layout as a unified bordered container:
- *   [deprecated title above]
  *   ┌────────────────────────────────────┐
  *   │ [toolbar strip]                    │
  *   ├────────────────────────────────────┤

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

@@ -4,7 +4,7 @@
  * Uses inline styles for framework-agnostic rendering.
  */
 import * as React from 'react';
-import type { IColumnDefinition, IDateFilterValue, SideBarPanelId } from '../types';
+import type { IColumnDefinition, SideBarPanelId, IFilters, FilterValue } from '../types';
 /** Describes a filterable column for the sidebar filters panel. */
 export interface SideBarFilterColumn {
     columnId: string;
@@ -23,12 +23,8 @@ export interface SideBarProps {
     /** Batch-set all visible columns at once (used by Select All / Clear All). */
     onSetVisibleColumns: (columns: Set<string>) => void;
     filterableColumns: SideBarFilterColumn[];
-    multiSelectFilters: Record<string, string[]>;
-    textFilters: Record<string, string>;
-    onMultiSelectFilterChange: (key: string, values: string[]) => void;
-    onTextFilterChange: (key: string, value: string) => void;
-    dateFilters: Record<string, IDateFilterValue>;
-    onDateFilterChange: (key: string, value: IDateFilterValue | undefined) => void;
+    filters: IFilters;
+    onFilterChange: (key: string, value: FilterValue | undefined) => void;
     filterOptions: Record<string, string[]>;
 }
 export declare function SideBar(props: SideBarProps): React.ReactElement;

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

@@ -22,7 +22,7 @@ export { useDebounce } from './useDebounce';
 export { useFillHandle } from './useFillHandle';
 export type { UseFillHandleResult, UseFillHandleParams } from './useFillHandle';
 export { useDataGridState } from './useDataGridState';
-export type { UseDataGridStateParams, UseDataGridStateResult } from './useDataGridState';
+export type { UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, } from './useDataGridState';
 export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
 export type { UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, } from './useColumnHeaderFilterState';
 export { useColumnChooserState } from './useColumnChooserState';

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

@@ -5,7 +5,8 @@ export interface UseDataGridStateParams<T> {
     props: IOGridDataGridProps<T>;
     wrapperRef: RefObject<HTMLDivElement | null>;
 }
-export interface UseDataGridStateResult<T> {
+/** Column layout, visibility, and sizing state. */
+export interface DataGridLayoutState<T> {
     flatColumns: IColumnDef<T>[];
     visibleCols: IColumnDef<T>[];
     visibleColumnCount: number;
@@ -13,12 +14,28 @@ export interface UseDataGridStateResult<T> {
     colOffset: number;
     hasCheckboxCol: boolean;
     rowIndexByRowId: Map<RowId, number>;
+    containerWidth: number;
+    minTableWidth: number;
+    desiredTableWidth: number;
+    columnSizingOverrides: Record<string, {
+        widthPx: number;
+    }>;
+    setColumnSizingOverrides: React.Dispatch<React.SetStateAction<Record<string, {
+        widthPx: number;
+    }>>>;
+    onColumnResized?: (columnId: string, width: number) => void;
+}
+/** Row selection (checkboxes, single-row click). */
+export interface DataGridRowSelectionState {
     selectedRowIds: Set<RowId>;
     updateSelection: (newSelectedIds: Set<RowId>) => void;
     handleRowCheckboxChange: (rowId: RowId, checked: boolean, rowIndex: number, shiftKey: boolean) => void;
     handleSelectAll: (checked: boolean) => void;
     allSelected: boolean;
     someSelected: boolean;
+}
+/** Cell editing, popover editor, and commit/cancel helpers. */
+export interface DataGridEditingState<T> {
     editingCell: {
         rowId: RowId;
         columnId: string;
@@ -29,6 +46,13 @@ export interface UseDataGridStateResult<T> {
     } | null) => void;
     pendingEditorValue: unknown;
     setPendingEditorValue: (value: unknown) => void;
+    commitCellEdit: (item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number) => void;
+    cancelPopoverEdit: () => void;
+    popoverAnchorEl: HTMLElement | null;
+    setPopoverAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+}
+/** Cell selection, active cell, keyboard, clipboard, fill handle, undo/redo. */
+export interface DataGridCellInteractionState {
     activeCell: {
         rowIndex: number;
         columnIndex: number;
@@ -43,27 +67,12 @@ export interface UseDataGridStateResult<T> {
         endRow: number;
         endCol: number;
     } | null;
-    setSelectionRange: (range: UseDataGridStateResult<T>['selectionRange']) => void;
+    setSelectionRange: (range: DataGridCellInteractionState['selectionRange']) => void;
     handleCellMouseDown: (e: React.MouseEvent, rowIndex: number, globalColIndex: number) => void;
     handleSelectAllCells: () => void;
-    contextMenu: {
-        x: number;
-        y: number;
-    } | null;
-    setContextMenu: (pos: {
-        x: number;
-        y: number;
-    } | null) => void;
-    handleCellContextMenu: (e: {
-        clientX: number;
-        clientY: number;
-        preventDefault?: () => void;
-    }) => void;
-    closeContextMenu: () => void;
-    canUndo: boolean;
-    canRedo: boolean;
-    onUndo?: () => void;
-    onRedo?: () => void;
+    hasCellSelection: boolean;
+    handleGridKeyDown: (e: React.KeyboardEvent) => void;
+    handleFillHandleMouseDown: (e: React.MouseEvent) => void;
     handleCopy: () => void;
     handleCut: () => void;
     handlePaste: () => Promise<void>;
@@ -79,29 +88,44 @@ export interface UseDataGridStateResult<T> {
         endRow: number;
         endCol: number;
     } | null;
-    handleGridKeyDown: (e: React.KeyboardEvent) => void;
-    handleFillHandleMouseDown: (e: React.MouseEvent) => void;
-    containerWidth: number;
-    minTableWidth: number;
-    desiredTableWidth: number;
-    columnSizingOverrides: Record<string, {
-        widthPx: number;
-    }>;
-    setColumnSizingOverrides: React.Dispatch<React.SetStateAction<Record<string, {
-        widthPx: number;
-    }>>>;
-    /** Callback to fire when a column resize completes. */
-    onColumnResized?: (columnId: string, width: number) => void;
+    clearClipboardRanges: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo?: () => void;
+    onRedo?: () => void;
+}
+/** Context menu position and handlers. */
+export interface DataGridContextMenuState {
+    menuPosition: {
+        x: number;
+        y: number;
+    } | null;
+    setMenuPosition: (pos: {
+        x: number;
+        y: number;
+    } | null) => void;
+    handleCellContextMenu: (e: {
+        clientX: number;
+        clientY: number;
+        preventDefault?: () => void;
+    }) => void;
+    closeContextMenu: () => void;
+}
+/** View model inputs and derived display state. */
+export interface DataGridViewModelState<T> {
     headerFilterInput: HeaderFilterConfigInput;
     cellDescriptorInput: CellRenderDescriptorInput<T>;
-    commitCellEdit: (item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number) => void;
-    cancelPopoverEdit: () => void;
-    popoverAnchorEl: HTMLElement | null;
-    setPopoverAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
-    clearClipboardRanges: () => void;
     statusBarConfig: IStatusBarProps | null;
     showEmptyInGrid: boolean;
-    hasCellSelection: boolean;
+}
+/** Grouped result from useDataGridState. */
+export interface UseDataGridStateResult<T> {
+    layout: DataGridLayoutState<T>;
+    rowSelection: DataGridRowSelectionState;
+    editing: DataGridEditingState<T>;
+    interaction: DataGridCellInteractionState;
+    contextMenu: DataGridContextMenuState;
+    viewModels: DataGridViewModelState<T>;
 }
 /**
  * Single orchestration hook for DataGridTable. Takes grid props and wrapper ref,

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

@@ -15,8 +15,8 @@ export interface UseOGridResult<T> {
     handleVisibilityChange: (columnKey: string, isVisible: boolean) => void;
     /** Resolved placement of the column chooser. */
     columnChooserPlacement: ColumnChooserPlacement;
-    title: React.ReactNode;
     toolbar: React.ReactNode;
+    toolbarBelow: React.ReactNode;
     className?: string;
     entityLabelPlural: string;
     emptyState?: {

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
-export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, } from './types';
-export { toUserLike, toDataGridFilterProps, isInSelectionRange, normalizeSelectionRange } from './types';
+export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, } from './types';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, } from './hooks';
-export type { UseFilterOptionsResult, UseOGridResult, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, } from './hooks';
+export type { UseFilterOptionsResult, UseOGridResult, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, } from './hooks';
 export { OGridLayout } from './components/OGridLayout';
 export type { OGridLayoutProps } from './components/OGridLayout';
 export { StatusBar } from './components/StatusBar';
@@ -12,5 +12,5 @@ export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
 export type { MarchingAntsOverlayProps } from './components/MarchingAntsOverlay';
 export { SideBar } from './components/SideBar';
 export type { SideBarProps, SideBarFilterColumn } from './components/SideBar';
-export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, } from './utils';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from './utils';
 export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, ParseValueResult, AggregationResult, } from './utils';

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

@@ -18,19 +18,24 @@ export type UserLikeInput = {
     photo?: string;
 };
 export declare function toUserLike(u: UserLikeInput | undefined): UserLike | undefined;
-/** Single filter value: text (string), multi-select (string[]), people (UserLike), or date range. */
-export type FilterValue = string | string[] | UserLike | IDateFilterValue;
-/** Unified filter model: field id -> filter value. Use FilterValue for type-safe access. */
+/** Discriminated filter value. The `type` field identifies the filter kind. */
+export type FilterValue = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'multiSelect';
+    value: string[];
+} | {
+    type: 'people';
+    value: UserLike;
+} | {
+    type: 'date';
+    value: IDateFilterValue;
+};
+/** Unified filter model: field id -> discriminated filter value. */
 export interface IFilters {
     [field: string]: FilterValue | undefined;
 }
-/** Split IFilters into DataGridTable's multiSelect, text, people, and date props. */
-export declare function toDataGridFilterProps(filters: IFilters): {
-    multiSelectFilters: Record<string, string[]>;
-    textFilters: Record<string, string>;
-    peopleFilters: Record<string, UserLike | undefined>;
-    dateFilters: Record<string, IDateFilterValue>;
-};
 export interface IFetchParams {
     page: number;
     pageSize: number;
@@ -192,14 +197,14 @@ export interface IOGridProps<T> {
     defaultSortBy?: string;
     defaultSortDirection?: 'asc' | 'desc';
     toolbar?: ReactNode;
+    /** Secondary toolbar row rendered below the primary toolbar (e.g. active filter chips). */
+    toolbarBelow?: ReactNode;
     emptyState?: {
         message?: ReactNode;
         render?: () => ReactNode;
     };
     entityLabelPlural?: string;
     className?: string;
-    /** @deprecated Render your title outside the OGrid component. Will be removed in next major. */
-    title?: ReactNode;
     /** Where the column chooser renders.
      *  - `true` or `'toolbar'` (default): column chooser button in the toolbar strip.
      *  - `'sidebar'`: column chooser only available via the sidebar columns panel.
@@ -260,14 +265,10 @@ export interface IOGridDataGridProps<T> {
     selectedRows?: Set<RowId>;
     onSelectionChange?: (event: IRowSelectionChangeEvent<T>) => void;
     statusBar?: IStatusBarProps;
-    multiSelectFilters: Record<string, string[]>;
-    onMultiSelectFilterChange: (key: string, values: string[]) => void;
-    textFilters?: Record<string, string>;
-    onTextFilterChange?: (key: string, value: string) => void;
-    peopleFilters?: Record<string, UserLike | undefined>;
-    onPeopleFilterChange?: (key: string, user: UserLike | undefined) => void;
-    dateFilters?: Record<string, IDateFilterValue>;
-    onDateFilterChange?: (key: string, value: IDateFilterValue | undefined) => void;
+    /** Unified filter model (discriminated union values). */
+    filters: IFilters;
+    /** Single callback for all filter changes. Pass undefined to clear. */
+    onFilterChange: (key: string, value: FilterValue | undefined) => void;
     filterOptions: Record<string, string[]>;
     loadingFilterOptions: Record<string, boolean>;
     peopleSearch?: (query: string) => Promise<UserLike[]>;

package/dist/types/types/index.d.ts

@@ -1,3 +1,3 @@
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, IDateFilterValue, HeaderCell, HeaderRow, } from './columnTypes';
 export type { RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, } from './dataGridTypes';
-export { toUserLike, toDataGridFilterProps, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/dist/types/utils/clientSideData.d.ts

@@ -0,0 +1,13 @@
+import type { IColumnDef, IFilters } from '../types';
+/**
+ * Apply client-side filtering and sorting to data.
+ * Extracted from useOGrid for testability and reuse.
+ *
+ * @param data - The full dataset to process
+ * @param columns - Column definitions (used for filtering and sorting)
+ * @param filters - Current filter state (discriminated FilterValue union)
+ * @param sortBy - Column ID to sort by (optional)
+ * @param sortDirection - Sort direction (optional)
+ * @returns Filtered and sorted array
+ */
+export declare function processClientSideData<T>(data: T[], columns: IColumnDef<T>[], filters: IFilters, sortBy?: string, sortDirection?: 'asc' | 'desc'): T[];

package/dist/types/utils/dataGridViewModel.d.ts

@@ -4,22 +4,16 @@
 import type * as React from 'react';
 import type { ColumnFilterType, ICellEditorProps, IDateFilterValue } from '../types/columnTypes';
 import type { IColumnDef } from '../types/columnTypes';
-import type { RowId, UserLike } from '../types/dataGridTypes';
+import type { RowId, UserLike, IFilters, FilterValue } from '../types/dataGridTypes';
 export interface HeaderFilterConfigInput {
     sortBy?: string;
     sortDirection: 'asc' | 'desc';
     onColumnSort: (columnKey: string) => void;
-    textFilters?: Record<string, string>;
-    onTextFilterChange?: (key: string, value: string) => void;
-    peopleFilters?: Record<string, UserLike | undefined>;
-    onPeopleFilterChange?: (key: string, user: UserLike | undefined) => void;
-    peopleSearch?: (query: string) => Promise<UserLike[]>;
+    filters: IFilters;
+    onFilterChange: (key: string, value: FilterValue | undefined) => void;
     filterOptions: Record<string, string[]>;
     loadingFilterOptions: Record<string, boolean>;
-    multiSelectFilters: Record<string, string[]>;
-    onMultiSelectFilterChange: (key: string, values: string[]) => void;
-    dateFilters?: Record<string, IDateFilterValue>;
-    onDateFilterChange?: (key: string, value: IDateFilterValue | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
 }
 /** Props to pass to ColumnHeaderFilter. Matches IColumnHeaderFilterProps. */
 export interface HeaderFilterConfig {

package/dist/types/utils/index.d.ts

@@ -16,3 +16,4 @@ export { parseValue, numberParser, currencyParser, dateParser, emailParser, bool
 export type { ParseValueResult } from './valueParsers';
 export { computeAggregations } from './aggregationUtils';
 export type { AggregationResult } from './aggregationUtils';
+export { processClientSideData } from './clientSideData';

package/dist/types/utils/ogridHelpers.d.ts

@@ -1,7 +1,7 @@
 import type { IColumnDef, IFilters, FilterValue } from '../types';
 /** Resolve the filter field key for a column (filterField or columnId). */
 export declare function getFilterField<T>(col: IColumnDef<T>): string;
-/** Merge a single filter change into a full IFilters object. */
+/** Merge a single filter change into a full IFilters object. Strips empty values automatically. */
 export declare function mergeFilter(prev: IFilters, key: string, value: FilterValue | undefined): IFilters;
 /** Derive filter options for multiSelect columns from client-side data. */
 export declare function deriveFilterOptionsFromData<T>(items: T[], columns: IColumnDef<T>[]): Record<string, string[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-core",
-  "version": "1.5.0",
+  "version": "1.7.1",
   "description": "OGrid core – framework-agnostic types, hooks, and utilities for OGrid data tables.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",