@alaarab/ogrid-react 2.0.0-beta

package/dist/esm/hooks/useSideBarState.js

@@ -0,0 +1,39 @@
+import { useState, useCallback, useMemo } from 'react';
+const DEFAULT_PANELS = ['columns', 'filters'];
+/**
+ * Manages side bar panel state: enabled panels, active panel, position, and toggle/close handlers.
+ * @param params - Side bar config (boolean, ISideBarDef, or undefined).
+ * @returns Enabled flag, active panel, setters, panel list, position, open state, toggle, and close.
+ */
+export function useSideBarState(params) {
+    const { config } = params;
+    const isEnabled = config != null && config !== false;
+    const parsed = useMemo(() => {
+        if (!isEnabled || config === true) {
+            return { panels: DEFAULT_PANELS, position: 'right', defaultPanel: null };
+        }
+        const def = config;
+        return {
+            panels: def.panels ?? DEFAULT_PANELS,
+            position: def.position ?? 'right',
+            defaultPanel: def.defaultPanel ?? null,
+        };
+    }, [isEnabled, config]);
+    const [activePanel, setActivePanel] = useState(parsed.defaultPanel);
+    const toggle = useCallback((panel) => {
+        setActivePanel((prev) => (prev === panel ? null : panel));
+    }, []);
+    const close = useCallback(() => {
+        setActivePanel(null);
+    }, []);
+    return {
+        isEnabled,
+        activePanel,
+        setActivePanel,
+        panels: parsed.panels,
+        position: parsed.position,
+        isOpen: activePanel !== null,
+        toggle,
+        close,
+    };
+}

package/dist/esm/hooks/useTableLayout.js

@@ -0,0 +1,77 @@
+import { useState, useEffect, useMemo } from 'react';
+import { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING } from '@alaarab/ogrid-core';
+/**
+ * Manages table layout: container width measurement, column sizing overrides,
+ * min/desired table width calculations.
+ */
+export function useTableLayout(params) {
+    const { wrapperRef, visibleCols, flatColumns, hasCheckboxCol, initialColumnWidths, onColumnResized, } = params;
+    // --- Container width measurement via ResizeObserver ---
+    const [containerWidth, setContainerWidth] = useState(0);
+    useEffect(() => {
+        const el = wrapperRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const rect = el.getBoundingClientRect();
+            const cs = window.getComputedStyle(el);
+            const borderX = (parseFloat(cs.borderLeftWidth || '0') || 0) +
+                (parseFloat(cs.borderRightWidth || '0') || 0);
+            setContainerWidth(Math.max(0, rect.width - borderX));
+        };
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        measure();
+        return () => ro.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // wrapperRef excluded — refs are stable
+    // --- Column sizing overrides state ---
+    const [columnSizingOverrides, setColumnSizingOverrides] = useState(() => {
+        if (!initialColumnWidths)
+            return {};
+        const result = {};
+        for (const [id, width] of Object.entries(initialColumnWidths)) {
+            result[id] = { widthPx: width };
+        }
+        return result;
+    });
+    // --- Minimum table width calculation ---
+    const minTableWidth = useMemo(() => {
+        const checkboxW = hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0;
+        return visibleCols.reduce((sum, c) => sum + (c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH) + CELL_PADDING, checkboxW);
+    }, [visibleCols, hasCheckboxCol]);
+    // --- Cleanup effect: remove overrides for columns that no longer exist ---
+    useEffect(() => {
+        const colIds = new Set(flatColumns.map((c) => c.columnId));
+        setColumnSizingOverrides((prev) => {
+            const next = { ...prev };
+            let changed = false;
+            for (const id of Object.keys(next)) {
+                if (!colIds.has(id)) {
+                    delete next[id];
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [flatColumns]);
+    // --- Desired table width calculation ---
+    const desiredTableWidth = useMemo(() => {
+        const checkboxW = hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0;
+        return visibleCols.reduce((sum, c) => {
+            const override = columnSizingOverrides[c.columnId];
+            const w = override
+                ? override.widthPx
+                : (c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+            return sum + Math.max(c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, w) + CELL_PADDING;
+        }, checkboxW);
+    }, [visibleCols, columnSizingOverrides, hasCheckboxCol]);
+    return {
+        containerWidth,
+        minTableWidth,
+        desiredTableWidth,
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+        onColumnResized,
+    };
+}

package/dist/esm/hooks/useTextFilterState.js

@@ -0,0 +1,25 @@
+/**
+ * Text filter state sub-hook for column header filters.
+ * Manages temporary text value and apply/clear handlers.
+ */
+import { useState, useCallback, useEffect } from 'react';
+export function useTextFilterState(params) {
+    const { textValue = '', onTextChange, isFilterOpen } = params;
+    const [tempTextValue, setTempTextValue] = useState(textValue);
+    // Sync temp state when popover opens
+    useEffect(() => {
+        if (isFilterOpen) {
+            setTempTextValue(textValue);
+        }
+    }, [isFilterOpen, textValue]);
+    const handleTextApply = useCallback(() => {
+        onTextChange?.(tempTextValue.trim());
+    }, [onTextChange, tempTextValue]);
+    const handleTextClear = useCallback(() => setTempTextValue(''), []);
+    return {
+        tempTextValue,
+        setTempTextValue,
+        handleTextApply,
+        handleTextClear,
+    };
+}

package/dist/esm/hooks/useUndoRedo.js

@@ -0,0 +1,83 @@
+import { useCallback, useRef, useState } from 'react';
+/**
+ * Wraps onCellValueChanged with an undo/redo history stack.
+ * Supports batch operations: changes between beginBatch/endBatch are one undo step.
+ */
+export function useUndoRedo(params) {
+    const { onCellValueChanged, maxUndoDepth = 100 } = params;
+    // Each history entry is an array of events (batch). Single edits are [event].
+    const historyRef = useRef([]);
+    const redoStackRef = useRef([]);
+    const batchRef = useRef(null);
+    const [historyLength, setHistoryLength] = useState(0);
+    const [redoLength, setRedoLength] = useState(0);
+    const wrapped = useCallback((event) => {
+        if (!onCellValueChanged)
+            return;
+        if (batchRef.current !== null) {
+            // Accumulate into the current batch — don't push to history yet
+            batchRef.current.push(event);
+        }
+        else {
+            historyRef.current = [...historyRef.current, [event]].slice(-maxUndoDepth);
+            redoStackRef.current = [];
+            setHistoryLength(historyRef.current.length);
+            setRedoLength(0);
+        }
+        onCellValueChanged(event);
+    }, [onCellValueChanged, maxUndoDepth]);
+    const beginBatch = useCallback(() => {
+        batchRef.current = [];
+    }, []);
+    const endBatch = useCallback(() => {
+        const batch = batchRef.current;
+        batchRef.current = null;
+        if (!batch || batch.length === 0)
+            return;
+        historyRef.current = [...historyRef.current, batch].slice(-maxUndoDepth);
+        redoStackRef.current = [];
+        setHistoryLength(historyRef.current.length);
+        setRedoLength(0);
+    }, [maxUndoDepth]);
+    const undo = useCallback(() => {
+        if (!onCellValueChanged || historyRef.current.length === 0)
+            return;
+        const lastBatch = historyRef.current[historyRef.current.length - 1];
+        historyRef.current = historyRef.current.slice(0, -1);
+        redoStackRef.current = [...redoStackRef.current, lastBatch];
+        setHistoryLength(historyRef.current.length);
+        setRedoLength(redoStackRef.current.length);
+        // Revert in reverse order so multi-cell undo is applied correctly
+        for (let i = lastBatch.length - 1; i >= 0; i--) {
+            const ev = lastBatch[i];
+            onCellValueChanged({
+                ...ev,
+                oldValue: ev.newValue,
+                newValue: ev.oldValue,
+            });
+        }
+    }, [onCellValueChanged]);
+    const redo = useCallback(() => {
+        if (!onCellValueChanged || redoStackRef.current.length === 0)
+            return;
+        const nextBatch = redoStackRef.current[redoStackRef.current.length - 1];
+        redoStackRef.current = redoStackRef.current.slice(0, -1);
+        historyRef.current = [...historyRef.current, nextBatch];
+        setRedoLength(redoStackRef.current.length);
+        setHistoryLength(historyRef.current.length);
+        // Replay in original order
+        for (const ev of nextBatch) {
+            onCellValueChanged(ev);
+        }
+    }, [onCellValueChanged]);
+    return {
+        onCellValueChanged: onCellValueChanged ? wrapped : undefined,
+        undo,
+        redo,
+        canUndo: historyLength > 0,
+        canRedo: redoLength > 0,
+        beginBatch,
+        endBatch,
+        maxUndoDepth,
+    };
+}

package/dist/esm/index.js

@@ -0,0 +1,16 @@
+// Constants (re-exported from core)
+export { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
+// Hooks
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSideBarState, useTableLayout, useLatestRef, } from './hooks';
+// Components
+export { OGridLayout } from './components/OGridLayout';
+export { StatusBar } from './components/StatusBar';
+export { BaseInlineCellEditor, editorWrapperStyle, editorInputStyle, richSelectWrapperStyle, richSelectDropdownStyle, richSelectOptionStyle, richSelectOptionHighlightedStyle, richSelectNoMatchesStyle, selectEditorStyle, } from './components/BaseInlineCellEditor';
+export { GridContextMenu } from './components/GridContextMenu';
+export { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
+export { SideBar } from './components/SideBar';
+export { CellErrorBoundary } from './components/CellErrorBoundary';
+export { EmptyState } from './components/EmptyState';
+// 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, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, } from './utils';

package/dist/esm/storybook/index.js

@@ -0,0 +1 @@
+export { storyRows, storyGetRowId, noop, editableInitialRows, editableColumns, NotesPopupEditor, spreadsheetRows, spreadsheetColumns, departmentFilterOptions, statusFilterOptions, } from './mockData';

package/dist/esm/storybook/mockData.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+export const storyRows = [
+    { id: '1', name: 'Alpha', status: 'Active', owner: 'alice@test.com' },
+    { id: '2', name: 'Beta', status: 'Closed', owner: 'bob@test.com' },
+    { id: '3', name: 'Gamma', status: 'Active', owner: 'carol@test.com' },
+    { id: '4', name: 'Delta', status: 'Planning', owner: 'dave@test.com' },
+];
+export const storyGetRowId = (r) => r.id;
+export const noop = () => { };
+export const editableInitialRows = [
+    { id: '1', name: 'Alpha', status: 'Active', approved: false },
+    { id: '2', name: 'Beta', status: 'Closed', approved: true },
+    { id: '3', name: 'Gamma', status: 'Planning', approved: false },
+];
+export const editableColumns = [
+    {
+        columnId: 'name',
+        name: 'Name',
+        editable: true,
+        cellEditor: 'text',
+    },
+    {
+        columnId: 'status',
+        name: 'Status',
+        editable: true,
+        cellEditor: 'select',
+        cellEditorParams: { values: ['Active', 'Closed', 'Planning'] },
+    },
+    {
+        columnId: 'approved',
+        name: 'Approved',
+        editable: true,
+        cellEditor: 'checkbox',
+        valueFormatter: (v) => (v === true ? 'Yes' : 'No'),
+    },
+];
+export function NotesPopupEditor({ value, onValueChange, onCommit, onCancel }) {
+    const [local, setLocal] = React.useState(String(value ?? ''));
+    return (_jsxs("div", { style: { padding: 8, minWidth: 200 }, children: [_jsx("textarea", { value: local, onChange: (e) => setLocal(e.target.value), onBlur: () => {
+                    onValueChange(local);
+                    onCommit();
+                }, rows: 3, style: { width: '100%', marginBottom: 8 }, "data-testid": "notes-editor" }), _jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx("button", { type: "button", onClick: () => { onValueChange(local); onCommit(); }, children: "Save" }), _jsx("button", { type: "button", onClick: onCancel, children: "Cancel" })] })] }));
+}
+export const spreadsheetRows = [
+    { id: '1', name: 'Alice Johnson', department: 'Engineering', salary: 125000, startDate: '2021-03-15', status: 'Active', email: 'alice@company.com' },
+    { id: '2', name: 'Bob Smith', department: 'Marketing', salary: 95000, startDate: '2020-07-01', status: 'Active', email: 'bob@company.com' },
+    { id: '3', name: 'Carol Williams', department: 'Engineering', salary: 140000, startDate: '2019-11-20', status: 'Active', email: 'carol@company.com' },
+    { id: '4', name: 'Dave Brown', department: 'Sales', salary: 85000, startDate: '2022-01-10', status: 'On Leave', email: 'dave@company.com' },
+    { id: '5', name: 'Eve Davis', department: 'Engineering', salary: 155000, startDate: '2018-05-22', status: 'Active', email: 'eve@company.com' },
+    { id: '6', name: 'Frank Miller', department: 'Marketing', salary: 88000, startDate: '2023-02-14', status: 'Active', email: 'frank@company.com' },
+    { id: '7', name: 'Grace Lee', department: 'Sales', salary: 92000, startDate: '2021-08-30', status: 'Active', email: 'grace@company.com' },
+    { id: '8', name: 'Henry Wilson', department: 'Engineering', salary: 130000, startDate: '2020-04-12', status: 'Inactive', email: 'henry@company.com' },
+    { id: '9', name: 'Iris Taylor', department: 'HR', salary: 78000, startDate: '2022-09-05', status: 'Active', email: 'iris@company.com' },
+    { id: '10', name: 'Jack Anderson', department: 'Engineering', salary: 145000, startDate: '2019-06-18', status: 'Active', email: 'jack@company.com' },
+];
+export const spreadsheetColumns = [
+    { columnId: 'name', name: 'Employee Name', sortable: true, minWidth: 160, filterable: { type: 'text' } },
+    { columnId: 'department', name: 'Department', sortable: true, filterable: { type: 'multiSelect' } },
+    {
+        columnId: 'salary',
+        name: 'Salary',
+        sortable: true,
+        minWidth: 100,
+        valueFormatter: (v) => typeof v === 'number' ? `$${v.toLocaleString()}` : '',
+        cellStyle: { textAlign: 'right', fontVariantNumeric: 'tabular-nums' },
+    },
+    { columnId: 'startDate', name: 'Start Date', sortable: true, minWidth: 110 },
+    { columnId: 'status', name: 'Status', sortable: true, filterable: { type: 'multiSelect' } },
+    { columnId: 'email', name: 'Email', sortable: true, minWidth: 180 },
+];
+export const departmentFilterOptions = ['Engineering', 'Marketing', 'Sales', 'HR'];
+export const statusFilterOptions = ['Active', 'On Leave', 'Inactive'];

package/dist/esm/types/columnTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/dataGridTypes.js

@@ -0,0 +1 @@
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';

package/dist/esm/types/index.js

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

package/dist/esm/utils/dataGridViewModel.js

@@ -0,0 +1,220 @@
+/**
+ * View model helpers for DataGridTable. Core owns the logic; UI packages only render.
+ */
+import { getCellValue, isInSelectionRange } from '@alaarab/ogrid-core';
+/**
+ * Returns ColumnHeaderFilter props from column def and grid filter/sort state.
+ * Use in Fluent/Material/Radix DataGridTable instead of createHeaderWithFilter.
+ */
+export function getHeaderFilterConfig(col, input) {
+    const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+    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,
+        filterType,
+        isSorted: input.sortBy === col.columnId,
+        isSortedDescending: input.sortBy === col.columnId && input.sortDirection === 'desc',
+        onSort: sortable ? () => input.onColumnSort(col.columnId) : undefined,
+    };
+    if (filterType === 'text') {
+        return {
+            ...base,
+            textValue: filterValue?.type === 'text' ? filterValue.value : '',
+            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
+        };
+    }
+    if (filterType === 'people') {
+        return {
+            ...base,
+            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
+            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
+            peopleSearch: input.peopleSearch,
+        };
+    }
+    if (filterType === 'multiSelect') {
+        return {
+            ...base,
+            options: input.filterOptions[filterField] ?? [],
+            isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
+            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
+            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
+        };
+    }
+    if (filterType === 'date') {
+        return {
+            ...base,
+            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
+            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
+        };
+    }
+    return base;
+}
+/**
+ * Returns a descriptor for rendering a cell. UI uses this to decide editing-inline vs editing-popover vs display
+ * and to apply isActive, isInRange, etc. without duplicating the boolean logic.
+ */
+export function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
+    const rowId = input.getRowId(item);
+    const globalColIndex = colIdx + input.colOffset;
+    const colEditable = col.editable === true ||
+        (typeof col.editable === 'function' && col.editable(item));
+    const canEditInline = input.editable !== false &&
+        !!colEditable &&
+        !!input.onCellValueChanged &&
+        typeof col.cellEditor !== 'function';
+    const canEditPopup = input.editable !== false &&
+        !!colEditable &&
+        !!input.onCellValueChanged &&
+        typeof col.cellEditor === 'function' &&
+        col.cellEditorPopup !== false;
+    const canEditAny = canEditInline || canEditPopup;
+    const isEditing = input.editingCell?.rowId === rowId &&
+        input.editingCell?.columnId === col.columnId;
+    const isActive = input.activeCell?.rowIndex === rowIndex &&
+        input.activeCell?.columnIndex === globalColIndex;
+    const isInRange = input.selectionRange != null &&
+        isInSelectionRange(input.selectionRange, rowIndex, colIdx);
+    const isInCutRange = input.cutRange != null &&
+        isInSelectionRange(input.cutRange, rowIndex, colIdx);
+    const isInCopyRange = input.copyRange != null &&
+        isInSelectionRange(input.copyRange, rowIndex, colIdx);
+    const isSelectionEndCell = !input.isDragging &&
+        input.copyRange == null &&
+        input.cutRange == null &&
+        input.selectionRange != null &&
+        rowIndex === input.selectionRange.endRow &&
+        colIdx === input.selectionRange.endCol;
+    const isPinned = col.pinned != null;
+    const pinnedSide = col.pinned ?? undefined;
+    let mode = 'display';
+    let editorType;
+    let value;
+    if (isEditing && canEditInline) {
+        mode = 'editing-inline';
+        if (col.cellEditor === 'text' ||
+            col.cellEditor === 'select' ||
+            col.cellEditor === 'checkbox' ||
+            col.cellEditor === 'richSelect' ||
+            col.cellEditor === 'date') {
+            editorType = col.cellEditor;
+        }
+        else if (col.type === 'date') {
+            editorType = 'date';
+        }
+        else if (col.type === 'boolean') {
+            editorType = 'checkbox';
+        }
+        else {
+            editorType = 'text';
+        }
+        value = getCellValue(item, col);
+    }
+    else if (isEditing && canEditPopup && typeof col.cellEditor === 'function') {
+        mode = 'editing-popover';
+        value = getCellValue(item, col);
+    }
+    else {
+        value = getCellValue(item, col);
+    }
+    return {
+        mode,
+        editorType,
+        value,
+        isActive,
+        isInRange,
+        isInCutRange,
+        isInCopyRange,
+        isSelectionEndCell,
+        canEditAny,
+        isPinned,
+        pinnedSide,
+        globalColIndex,
+        rowId,
+        rowIndex,
+        displayValue: value,
+    };
+}
+// --- Cell rendering helpers (reduce DataGridTable view-layer duplication) ---
+/**
+ * Resolves display content for a cell in display mode.
+ * Handles the renderCell → valueFormatter → String() fallback chain.
+ */
+export function resolveCellDisplayContent(col, item, displayValue) {
+    if (col.renderCell)
+        return col.renderCell(item);
+    if (col.valueFormatter)
+        return col.valueFormatter(displayValue, item);
+    if (displayValue == null)
+        return null;
+    if (col.type === 'date') {
+        const d = new Date(String(displayValue));
+        if (!Number.isNaN(d.getTime()))
+            return d.toLocaleDateString();
+    }
+    if (col.type === 'boolean') {
+        return displayValue ? 'True' : 'False';
+    }
+    return String(displayValue);
+}
+/**
+ * Resolves the cellStyle from a column def, handling both function and static values.
+ */
+export function resolveCellStyle(col, item) {
+    if (!col.cellStyle)
+        return undefined;
+    return typeof col.cellStyle === 'function' ? col.cellStyle(item) : col.cellStyle;
+}
+/**
+ * Builds props for InlineCellEditor. Shared across all UI packages.
+ */
+export function buildInlineEditorProps(item, col, descriptor, callbacks) {
+    return {
+        value: descriptor.value,
+        item,
+        column: col,
+        rowIndex: descriptor.rowIndex,
+        editorType: (descriptor.editorType ?? 'text'),
+        onCommit: (newValue) => callbacks.commitCellEdit(item, col.columnId, descriptor.value, newValue, descriptor.rowIndex, descriptor.globalColIndex),
+        onCancel: () => callbacks.setEditingCell(null),
+    };
+}
+/**
+ * Builds ICellEditorProps for custom popover editors. Shared across all UI packages.
+ */
+export function buildPopoverEditorProps(item, col, descriptor, pendingEditorValue, callbacks) {
+    const oldValue = descriptor.value;
+    const displayValue = pendingEditorValue !== undefined ? pendingEditorValue : oldValue;
+    return {
+        value: displayValue,
+        onValueChange: callbacks.setPendingEditorValue,
+        onCommit: () => {
+            const newValue = pendingEditorValue !== undefined ? pendingEditorValue : oldValue;
+            callbacks.commitCellEdit(item, col.columnId, oldValue, newValue, descriptor.rowIndex, descriptor.globalColIndex);
+        },
+        onCancel: callbacks.cancelPopoverEdit,
+        item,
+        column: col,
+        cellEditorParams: col.cellEditorParams,
+    };
+}
+export function getCellInteractionProps(descriptor, columnId, handlers) {
+    return {
+        'data-row-index': descriptor.rowIndex,
+        'data-col-index': descriptor.globalColIndex,
+        ...(descriptor.isInRange ? { 'data-in-range': 'true' } : {}),
+        tabIndex: descriptor.isActive ? 0 : -1,
+        onMouseDown: (e) => handlers.handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex),
+        onClick: () => handlers.setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }),
+        onContextMenu: handlers.handleCellContextMenu,
+        ...(descriptor.canEditAny
+            ? {
+                role: 'button',
+                onDoubleClick: () => handlers.setEditingCell({ rowId: descriptor.rowId, columnId }),
+            }
+            : {}),
+    };
+}

package/dist/esm/utils/gridRowComparator.js

@@ -0,0 +1,2 @@
+// Re-export from core — no React-specific changes
+export { areGridRowPropsEqual, isRowInRange } from '@alaarab/ogrid-core';

package/dist/esm/utils/index.js

@@ -0,0 +1,5 @@
+// Shared utilities re-exported from core
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from '@alaarab/ogrid-core';
+// React-specific utilities (not in core)
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
+export { areGridRowPropsEqual, isRowInRange } from './gridRowComparator';

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { IColumnDef } from '../types';
+export declare const editorWrapperStyle: React.CSSProperties;
+export declare const editorInputStyle: React.CSSProperties;
+export declare const richSelectWrapperStyle: React.CSSProperties;
+export declare const richSelectDropdownStyle: React.CSSProperties;
+export declare const richSelectOptionStyle: React.CSSProperties;
+export declare const richSelectOptionHighlightedStyle: React.CSSProperties;
+export declare const richSelectNoMatchesStyle: React.CSSProperties;
+export declare const selectEditorStyle: React.CSSProperties;
+export interface BaseInlineCellEditorProps<T> {
+    value: unknown;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    editorType: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+    /** Framework-specific checkbox renderer */
+    renderCheckbox: (checked: boolean, onCommit: (value: boolean) => void, onCancel: () => void) => React.ReactNode;
+    /** Framework-specific select renderer */
+    renderSelect: (value: unknown, values: unknown[], onCommit: (value: unknown) => void, onCancel: () => void) => React.ReactNode;
+}
+/**
+ * Base inline cell editor with shared logic for all editor types except checkbox and select
+ * (which are framework-specific). Used by all 3 UI packages to avoid duplication.
+ *
+ * Usage:
+ * - Radix: Pass Radix Checkbox/native select via render props
+ * - Fluent: Pass Fluent Checkbox/Select via render props
+ * - Material: Pass MUI Checkbox/Select via render props
+ */
+export declare function BaseInlineCellEditor<T>(props: BaseInlineCellEditorProps<T>): React.ReactElement;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/**
+ * Props for the CellErrorBoundary component.
+ */
+export interface CellErrorBoundaryProps {
+    children: React.ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+    fallback?: React.ReactNode;
+}
+interface CellErrorBoundaryState {
+    hasError: boolean;
+}
+/**
+ * Error boundary for cell renderers and custom editors.
+ * Prevents a runtime error in a cell from crashing the entire grid.
+ */
+export declare class CellErrorBoundary extends React.Component<CellErrorBoundaryProps, CellErrorBoundaryState> {
+    constructor(props: CellErrorBoundaryProps);
+    static getDerivedStateFromError(): CellErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    componentDidUpdate(prevProps: CellErrorBoundaryProps): void;
+    resetErrorBoundary(): void;
+    render(): React.ReactNode;
+}
+export {};

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+/**
+ * Props for the EmptyState component.
+ * Used to render "No results found" messages in DataGridTable.
+ */
+export interface EmptyStateProps {
+    /** Custom message override */
+    message?: React.ReactNode;
+    /** Whether filters are currently active */
+    hasActiveFilters?: boolean;
+    /** Called when user clicks "clear all filters" link */
+    onClearAll?: () => void;
+    /** Custom render function (overrides default rendering) */
+    render?: () => React.ReactNode;
+}
+/**
+ * Headless empty state component with default rendering logic.
+ * Framework-specific wrappers provide styling.
+ *
+ * Default behavior:
+ * - Shows "No results found" title
+ * - If hasActiveFilters=true: shows "clear all filters" link
+ * - If message provided: shows custom message
+ * - If render provided: uses custom renderer
+ */
+export declare function EmptyState(props: EmptyStateProps): React.ReactElement;