@alaarab/ogrid 1.8.1 → 1.9.0

package/README.md

@@ -1,6 +1,40 @@
-# @alaarab/ogrid
+<p align="center">
+  <strong>OGrid</strong> — The lightweight React data grid with enterprise features and zero enterprise cost.
+</p>
 
-[OGrid](https://github.com/alaarab/ogrid) data table with [Radix UI](https://www.radix-ui.com/) primitives and no Fluent/Material dependency. Sort, filter (text, multi-select, people), paginate, show/hide columns, spreadsheet-style selection (cell range, copy/paste, context menu), row selection, status bar, and CSV export. Use an in-memory array or plug in your own API.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@alaarab/ogrid"><img src="https://img.shields.io/npm/v/@alaarab/ogrid?color=%23217346&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/alaarab/ogrid/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="MIT License" /></a>
+  <img src="https://img.shields.io/badge/React-17%20%7C%2018%20%7C%2019-blue" alt="React 17, 18, 19" />
+  <img src="https://img.shields.io/badge/TypeScript-strict-blue" alt="TypeScript strict" />
+</p>
+
+<p align="center">
+  <a href="https://alaarab.github.io/ogrid/">Documentation</a> · <a href="https://alaarab.github.io/ogrid/docs/getting-started/overview">Getting Started</a> · <a href="https://alaarab.github.io/ogrid/docs/api/ogrid-props">API Reference</a>
+</p>
+
+---
+
+This is the **default OGrid package** built with Radix UI primitives — lightweight, no Fluent/Material dependency. Also available for [Fluent UI](https://www.npmjs.com/package/@alaarab/ogrid-fluent) and [Material UI](https://www.npmjs.com/package/@alaarab/ogrid-material). Same API, just swap the import.
+
+## Why OGrid?
+
+| | OGrid | AG Grid Community | AG Grid Enterprise |
+|---|---|---|---|
+| Spreadsheet selection | Built-in | - | $999/dev/year |
+| Clipboard (copy/paste) | Built-in | - | $999/dev/year |
+| Fill handle | Built-in | - | $999/dev/year |
+| Undo/redo | Built-in | - | $999/dev/year |
+| Context menu | Built-in | - | $999/dev/year |
+| Status bar | Built-in | - | $999/dev/year |
+| Side bar | Built-in | - | $999/dev/year |
+| Cell editing | Built-in | Built-in | Built-in |
+| Sorting & filtering | Built-in | Built-in | Built-in |
+| **License** | **MIT (free)** | MIT | Commercial |
+
+## Features
+
+Sorting · Filtering (text, multi-select, date range, people picker) · Pagination · Cell editing (inline, select, checkbox, rich select, date, custom popover) · Spreadsheet selection · Clipboard · Fill handle · Undo/redo · Row selection · Column groups · Column pinning · Column resize · Column chooser · Side bar · Context menu · Status bar with aggregations · CSV export · Grid API · Server-side data · Column state persistence · Keyboard navigation (Excel-style Ctrl+Arrow) · Built-in column types (text, numeric, date, boolean) · React 17/18/19 · TypeScript strict
 
 ## Install
 
@@ -8,49 +42,37 @@
 npm install @alaarab/ogrid
 ```
 
-### Peer Dependencies
-
-```
-react ^17.0.0 || ^18.0.0 || ^19.0.0
-react-dom ^17.0.0 || ^18.0.0 || ^19.0.0
-```
-
-Radix UI primitives (`@radix-ui/react-checkbox`, `@radix-ui/react-popover`) are bundled as regular dependencies.
+Radix UI primitives are bundled as regular dependencies — only `react` and `react-dom` are peer deps.
 
 ## Quick Start
 
 ```tsx
 import { OGrid, type IColumnDef } from '@alaarab/ogrid';
 
-const columns: IColumnDef<Product>[] = [
-  { columnId: 'name', name: 'Name', sortable: true, filterable: { type: 'text' }, renderCell: (item) => <span>{item.name}</span> },
-  { columnId: 'category', name: 'Category', sortable: true, filterable: { type: 'multiSelect', filterField: 'category' }, renderCell: (item) => <span>{item.category}</span> },
+const columns: IColumnDef<Employee>[] = [
+  { columnId: 'name', name: 'Name', sortable: true, editable: true },
+  { columnId: 'department', name: 'Department',
+    filterable: { type: 'multiSelect' },
+    cellEditor: 'richSelect', cellEditorParams: { values: ['Engineering', 'Sales', 'Marketing'] } },
+  { columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
+    valueFormatter: (v) => `$${Number(v).toLocaleString()}` },
 ];
 
-<OGrid<Product>
-  data={products}
+<OGrid
   columns={columns}
-  getRowId={(r) => r.id}
-  entityLabelPlural="products"
+  data={employees}
+  getRowId={(e) => e.id}
+  editable
+  cellSelection
+  statusBar
+  sideBar
 />
 ```
 
-## Components
-
-- **`OGrid<T>`** -- Full table with column chooser, filters, and pagination (Radix/native implementation)
-- **`DataGridTable<T>`** -- Lower-level grid for custom state management
-- **`ColumnChooser`** -- Column visibility dropdown
-- **`PaginationControls`** -- Pagination UI
-- **`ColumnHeaderFilter`** -- Column header with sort/filter (used internally)
+## Documentation
 
-All core types, hooks, and utilities are re-exported from `@alaarab/ogrid-core`.
-
-## Storybook
-
-```bash
-npm run storybook
-```
+Full docs, API reference, and interactive examples at **[alaarab.github.io/ogrid](https://alaarab.github.io/ogrid/)**.
 
 ## License
 
-MIT
+MIT — Free forever. No enterprise tiers. No feature paywalls.

package/dist/esm/DataGridTable/DataGridTable.js

@@ -8,70 +8,19 @@ import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { InlineCellEditor } from './InlineCellEditor';
 import { StatusBar } from './StatusBar';
 import { GridContextMenu } from './GridContextMenu';
-import { useDataGridState, useColumnResize, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from '@alaarab/ogrid-core';
+import { useDataGridState, useColumnResize, useLatestRef, getHeaderFilterConfig, getCellRenderDescriptor, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-core';
 import styles from './DataGridTable.module.css';
 // Module-scope stable constants (avoid per-render allocations)
 const GRID_ROOT_STYLE = { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' };
 const CURSOR_CELL_STYLE = { cursor: 'cell' };
+const POPOVER_ANCHOR_STYLE = { minHeight: '100%', minWidth: 40 };
 const STOP_PROPAGATION = (e) => e.stopPropagation();
 const PREVENT_DEFAULT = (e) => { e.preventDefault(); };
+const NOOP = () => { };
 function GridRowInner(props) {
     const { item, rowIndex, rowId, isSelected, visibleCols, columnMeta, renderCellContent, handleSingleRowClick, handleRowCheckboxChange, lastMouseShiftRef, hasCheckboxCol, } = props;
     return (_jsxs("tr", { className: isSelected ? styles.selectedRow : '', "data-row-id": rowId, onClick: handleSingleRowClick, children: [hasCheckboxCol && (_jsx("td", { className: styles.selectionCell, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: STOP_PROPAGATION, children: _jsx(Checkbox.Root, { className: styles.rowCheckbox, checked: isSelected, onCheckedChange: (c) => handleRowCheckboxChange(rowId, !!c, rowIndex, lastMouseShiftRef.current), "aria-label": `Select row ${rowIndex + 1}`, children: _jsx(Checkbox.Indicator, { className: styles.rowCheckboxIndicator, children: "\u2713" }) }) }) })), visibleCols.map((col, colIdx) => (_jsx("td", { className: columnMeta.cellClasses[col.columnId] || undefined, style: columnMeta.cellStyles[col.columnId], children: renderCellContent(item, col, rowIndex, colIdx) }, col.columnId)))] }));
 }
-function areGridRowPropsEqual(prev, next) {
-    // Data / structure changes — always re-render
-    if (prev.item !== next.item)
-        return false;
-    if (prev.isSelected !== next.isSelected)
-        return false;
-    if (prev.visibleCols !== next.visibleCols)
-        return false;
-    if (prev.columnMeta !== next.columnMeta)
-        return false;
-    if (prev.hasCheckboxCol !== next.hasCheckboxCol)
-        return false;
-    const ri = prev.rowIndex;
-    // Editing cell in this row?
-    if (prev.editingRowId !== next.editingRowId) {
-        if (prev.editingRowId === prev.rowId || next.editingRowId === next.rowId)
-            return false;
-    }
-    // Active cell in this row?
-    const prevActive = prev.activeCell?.rowIndex === ri;
-    const nextActive = next.activeCell?.rowIndex === ri;
-    if (prevActive !== nextActive)
-        return false;
-    if (prevActive && nextActive && prev.activeCell.columnIndex !== next.activeCell.columnIndex)
-        return false;
-    // Selection range touches this row?
-    const prevInSel = isRowInRange(prev.selectionRange, ri);
-    const nextInSel = isRowInRange(next.selectionRange, ri);
-    if (prevInSel !== nextInSel)
-        return false;
-    if (prevInSel && nextInSel) {
-        if (prev.selectionRange.startCol !== next.selectionRange.startCol ||
-            prev.selectionRange.endCol !== next.selectionRange.endCol)
-            return false;
-    }
-    // Fill handle (selection end row) + isDragging
-    const prevIsEnd = prev.selectionRange?.endRow === ri;
-    const nextIsEnd = next.selectionRange?.endRow === ri;
-    if (prevIsEnd !== nextIsEnd)
-        return false;
-    if ((prevIsEnd || nextIsEnd) && prev.isDragging !== next.isDragging)
-        return false;
-    // Cut/copy ranges touch this row?
-    if (prev.cutRange !== next.cutRange) {
-        if (isRowInRange(prev.cutRange, ri) || isRowInRange(next.cutRange, ri))
-            return false;
-    }
-    if (prev.copyRange !== next.copyRange) {
-        if (isRowInRange(prev.copyRange, ri) || isRowInRange(next.copyRange, ri))
-            return false;
-    }
-    return true;
-}
 const GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
 function DataGridTableInner(props) {
     const wrapperRef = useRef(null);
@@ -83,8 +32,9 @@ function DataGridTableInner(props) {
     const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
     const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
     const { setActiveCell, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging } = interaction;
+    const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
     const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
-    const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid } = viewModels;
+    const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
     const { items, columns, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, visibleColumns, } = props;
     // Memoize header rows (recursive tree traversal — avoid recomputing every render)
     const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
@@ -98,12 +48,9 @@ function DataGridTableInner(props) {
     const interactionHandlers = useMemo(() => ({ handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu }), [handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu]);
     // Refs for volatile state — lets renderCellContent be stable (same function ref across
     // selection changes) so that GridRow's React.memo comparator can skip unaffected rows.
-    const cellDescriptorInputRef = useRef(cellDescriptorInput);
-    cellDescriptorInputRef.current = cellDescriptorInput;
-    const pendingEditorValueRef = useRef(pendingEditorValue);
-    pendingEditorValueRef.current = pendingEditorValue;
-    const popoverAnchorElRef = useRef(popoverAnchorEl);
-    popoverAnchorElRef.current = popoverAnchorEl;
+    const cellDescriptorInputRef = useLatestRef(cellDescriptorInput);
+    const pendingEditorValueRef = useLatestRef(pendingEditorValue);
+    const popoverAnchorElRef = useLatestRef(popoverAnchorEl);
     // Pre-compute column styles and classNames (avoids per-cell object creation in the row loop)
     const columnMeta = useMemo(() => {
         const cellStyles = {};
@@ -118,13 +65,13 @@ function DataGridTableInner(props) {
             const isPinnedLeft = col.pinned === 'left';
             const isPinnedRight = col.pinned === 'right';
             cellStyles[col.columnId] = {
-                minWidth: col.minWidth ?? 80,
+                minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
                 width: hasExplicitWidth ? columnWidth : undefined,
                 maxWidth: hasExplicitWidth ? columnWidth : undefined,
                 textAlign: col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : undefined,
             };
             hdrStyles[col.columnId] = {
-                minWidth: col.minWidth ?? 80,
+                minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
                 width: hasExplicitWidth ? columnWidth : undefined,
                 maxWidth: hasExplicitWidth ? columnWidth : undefined,
             };
@@ -144,8 +91,7 @@ function DataGridTableInner(props) {
         return { cellStyles, cellClasses, hdrStyles, hdrClasses };
     }, [visibleCols, getColumnWidth, columnSizingOverrides, freezeCols]);
     // Stable row-click handler (avoids creating a new arrow function per row)
-    const selectedRowIdsRef = useRef(selectedRowIds);
-    selectedRowIdsRef.current = selectedRowIds;
+    const selectedRowIdsRef = useLatestRef(selectedRowIds);
     const handleSingleRowClick = useCallback((e) => {
         if (rowSelection !== 'single')
             return;
@@ -161,28 +107,27 @@ function DataGridTableInner(props) {
     // GridRow's React.memo comparator can skip rows whose selection state hasn't changed.
     const renderCellContent = useCallback((item, col, rowIndex, colIdx) => {
         const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
+        const rowId = getRowId(item);
+        let content;
         if (descriptor.mode === 'editing-inline') {
-            return _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) });
+            content = _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) });
         }
-        if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
+        else if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
             const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);
             const CustomEditor = col.cellEditor;
-            return (_jsxs(Popover.Root, { open: !!popoverAnchorElRef.current, onOpenChange: (open) => { if (!open)
-                    cancelPopoverEdit(); }, children: [_jsx(Popover.Anchor, { asChild: true, children: _jsx("div", { ref: (el) => el && setPopoverAnchorEl(el), style: { minHeight: '100%', minWidth: 40 }, "aria-hidden": true }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { sideOffset: 4, onOpenAutoFocus: (e) => e.preventDefault(), children: _jsx(CustomEditor, { ...editorProps }) }) })] }));
+            content = (_jsxs(Popover.Root, { open: !!popoverAnchorElRef.current, onOpenChange: (open) => { if (!open)
+                    cancelPopoverEdit(); }, children: [_jsx(Popover.Anchor, { asChild: true, children: _jsx("div", { ref: (el) => el && setPopoverAnchorEl(el), style: POPOVER_ANCHOR_STYLE, "aria-hidden": true }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { sideOffset: 4, onOpenAutoFocus: (e) => e.preventDefault(), children: _jsx(CustomEditor, { ...editorProps }) }) })] }));
+        }
+        else {
+            const displayContent = resolveCellDisplayContent(col, item, descriptor.displayValue);
+            const cellStyle = resolveCellStyle(col, item);
+            const styledContent = cellStyle ? _jsx("span", { style: cellStyle, children: displayContent }) : displayContent;
+            const cellClassNames = `${styles.cellContent}${descriptor.isActive && !descriptor.isInRange ? ` ${styles.activeCellContent}` : ''}${descriptor.isInRange ? ` ${styles.cellInRange}` : ''}${descriptor.isInCutRange ? ` ${styles.cellCut}` : ''}${descriptor.isInCopyRange ? ` ${styles.cellCopied}` : ''}`;
+            const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
+            content = (_jsxs("div", { className: cellClassNames, ...interactionProps, style: descriptor.canEditAny ? CURSOR_CELL_STYLE : undefined, children: [styledContent, descriptor.canEditAny && descriptor.isSelectionEndCell && (_jsx("div", { className: styles.fillHandle, onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" }))] }));
         }
-        const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
-        const cellStyle = resolveCellStyle(col, item);
-        const styledContent = cellStyle ? _jsx("span", { style: cellStyle, children: content }) : content;
-        const cellClassNames = [
-            styles.cellContent,
-            descriptor.isActive && !descriptor.isInRange ? styles.activeCellContent : '',
-            descriptor.isInRange ? styles.cellInRange : '',
-            descriptor.isInCutRange ? styles.cellCut : '',
-            descriptor.isInCopyRange ? styles.cellCopied : '',
-        ].filter(Boolean).join(' ');
-        const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
-        return (_jsxs("div", { className: cellClassNames, ...interactionProps, style: descriptor.canEditAny ? CURSOR_CELL_STYLE : undefined, children: [styledContent, descriptor.canEditAny && descriptor.isSelectionEndCell && (_jsx("div", { className: styles.fillHandle, onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" }))] }));
-    }, [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit]);
+        return (_jsx(CellErrorBoundary, { onError: onCellError, children: content }, `${rowId}-${col.columnId}`));
+    }, [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError]);
     return (_jsxs("div", { style: GRID_ROOT_STYLE, children: [_jsxs("div", { ref: wrapperRef, tabIndex: 0, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, className: `${styles.tableWrapper} ${rowSelection !== 'none' ? styles.selectableGrid : ''}`, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, "data-empty": showEmptyInGrid ? 'true' : undefined, "data-column-count": totalColCount, "data-freeze-rows": freezeRows != null && freezeRows >= 1 ? freezeRows : undefined, "data-freeze-cols": freezeCols != null && freezeCols >= 1 ? freezeCols : undefined, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-container-width": containerWidth, "data-min-table-width": Math.round(minTableWidth), "data-has-selection": rowSelection !== 'none' ? 'true' : undefined, onContextMenu: PREVENT_DEFAULT, onKeyDown: handleGridKeyDown, style: {
                     ['--data-table-column-count']: totalColCount,
                     ['--data-table-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'fit-content' : fitToContent ? 'fit-content' : '100%',
@@ -202,6 +147,6 @@ function DataGridTableInner(props) {
                                                     const rowIdStr = getRowId(item);
                                                     return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), visibleCols: visibleCols, columnMeta: columnMeta, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
                                                 }) }))] }), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }))] }) }) }), menuPosition &&
-                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? (() => { }), onRedo: onRedo ?? (() => { }), onCopy: handleCopy, onCut: handleCut, onPaste: () => void handlePaste(), onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body)] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && items.length > 0 && (_jsx("div", { className: styles.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.loadingOverlayContent, children: [_jsx("div", { className: styles.spinner }), _jsx("span", { className: styles.loadingOverlayText, children: loadingMessage })] }) }))] }));
+                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body)] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && items.length > 0 && (_jsx("div", { className: styles.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.loadingOverlayContent, children: [_jsx("div", { className: styles.spinner }), _jsx("span", { className: styles.loadingOverlayText, children: loadingMessage })] }) }))] }));
 }
 export const DataGridTable = React.memo(DataGridTableInner);

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -266,7 +266,7 @@
   width: 7px;
   height: 7px;
   background: var(--ogrid-selection, #217346);
-  border: 1px solid #fff;
+  border: 1px solid var(--ogrid-bg, #fff);
   border-radius: 1px;
   cursor: crosshair;
   pointer-events: auto;

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -1,85 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as Checkbox from '@radix-ui/react-checkbox';
-import { useInlineCellEditorState, useRichSelectState } from '@alaarab/ogrid-core';
-// Match .cellContent layout so column width doesn't shift during editing
-const editorWrapperStyle = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    padding: '6px 10px',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    minWidth: 0,
-};
-const editorInputStyle = {
-    width: '100%',
-    padding: 0,
-    border: 'none',
-    background: 'transparent',
-    color: 'inherit',
-    font: 'inherit',
-    fontSize: '13px',
-    outline: 'none',
-    minWidth: 0,
-};
+import { BaseInlineCellEditor, selectEditorStyle } from '@alaarab/ogrid-core';
+const selectWrapperStyle = { width: '100%', height: '100%', display: 'flex', alignItems: 'center', padding: '6px 10px', boxSizing: 'border-box', overflow: 'hidden', minWidth: 0 };
 export function InlineCellEditor(props) {
-    const { value, column, editorType, onCommit, onCancel } = props;
-    const wrapperRef = React.useRef(null);
-    const { localValue, setLocalValue, handleKeyDown, handleBlur, commit, cancel } = useInlineCellEditorState({ value, editorType, onCommit, onCancel });
-    const richSelectValues = column.cellEditorParams?.values ?? [];
-    const richSelectFormatValue = column.cellEditorParams?.formatValue;
-    const richSelect = useRichSelectState({
-        values: richSelectValues,
-        formatValue: richSelectFormatValue,
-        initialValue: value,
-        onCommit,
-        onCancel,
-    });
-    React.useEffect(() => {
-        const input = wrapperRef.current?.querySelector('input');
-        input?.focus();
-    }, []);
-    if (editorType === 'richSelect') {
-        return (_jsxs("div", { ref: wrapperRef, style: { ...editorWrapperStyle, position: 'relative' }, children: [_jsx("input", { type: "text", value: richSelect.searchText, onChange: (e) => richSelect.setSearchText(e.target.value), onKeyDown: richSelect.handleKeyDown, placeholder: "Search...", autoFocus: true, style: editorInputStyle }), _jsxs("div", { style: {
-                        position: 'absolute',
-                        top: '100%',
-                        left: 0,
-                        right: 0,
-                        maxHeight: 200,
-                        overflowY: 'auto',
-                        background: 'var(--ogrid-bg, #fff)',
-                        border: '1px solid var(--ogrid-border, #ccc)',
-                        zIndex: 10,
-                        boxShadow: '0 4px 16px rgba(0,0,0,0.2)',
-                    }, role: "listbox", children: [richSelect.filteredValues.map((v, i) => (_jsx("div", { role: "option", "aria-selected": i === richSelect.highlightedIndex, onClick: () => richSelect.selectValue(v), style: {
-                                padding: '6px 8px',
-                                cursor: 'pointer',
-                                color: 'var(--ogrid-fg, #242424)',
-                                background: i === richSelect.highlightedIndex ? 'var(--ogrid-bg-hover, #e8f0fe)' : undefined,
-                            }, children: richSelect.getDisplayText(v) }, String(v)))), richSelect.filteredValues.length === 0 && (_jsx("div", { style: { padding: '6px 8px', color: 'var(--ogrid-muted, #999)' }, children: "No matches" }))] })] }));
-    }
-    if (editorType === 'checkbox') {
-        const checked = value === true;
-        return (_jsx(Checkbox.Root, { checked: checked, onCheckedChange: (c) => commit(c === true), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), cancel()), children: _jsx(Checkbox.Indicator, { children: "\u2713" }) }));
-    }
-    if (editorType === 'select') {
-        const values = column.cellEditorParams?.values ?? [];
-        return (_jsx("div", { style: editorWrapperStyle, children: _jsx("select", { value: value !== null && value !== undefined ? String(value) : '', onChange: (e) => commit(e.target.value), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), cancel()), autoFocus: true, style: {
-                    width: '100%',
-                    padding: 0,
-                    border: 'none',
-                    background: 'transparent',
-                    color: 'inherit',
-                    font: 'inherit',
-                    fontSize: '13px',
-                    cursor: 'pointer',
-                    outline: 'none',
-                }, children: values.map((v) => (_jsx("option", { value: String(v), children: String(v) }, String(v)))) }) }));
-    }
-    if (editorType === 'date') {
-        return (_jsx("div", { ref: wrapperRef, style: editorWrapperStyle, children: _jsx("input", { type: "date", value: localValue, onChange: (e) => setLocalValue(e.target.value), onBlur: handleBlur, onKeyDown: handleKeyDown, style: editorInputStyle, autoFocus: true }) }));
-    }
-    return (_jsx("div", { ref: wrapperRef, style: editorWrapperStyle, children: _jsx("input", { type: "text", value: localValue, onChange: (e) => setLocalValue(e.target.value), onBlur: handleBlur, onKeyDown: handleKeyDown, style: editorInputStyle, autoFocus: true }) }));
+    return (_jsx(BaseInlineCellEditor, { ...props, renderCheckbox: (checked, onCommit, onCancel) => (_jsx(Checkbox.Root, { checked: checked, onCheckedChange: (c) => onCommit(c === true), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), children: _jsx(Checkbox.Indicator, { children: "\u2713" }) })), renderSelect: (value, values, onCommit, onCancel) => {
+            const { column } = props;
+            return (_jsx("div", { style: selectWrapperStyle, children: _jsx("select", { value: value !== null && value !== undefined ? String(value) : '', onChange: (e) => onCommit(e.target.value), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), autoFocus: true, style: selectEditorStyle, children: values.map((v) => (_jsx("option", { value: String(v), children: String(v) }, String(v)))) }) }));
+        } }));
 }

package/dist/esm/OGrid/OGrid.js

@@ -6,11 +6,11 @@ import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
 import { PaginationControls } from '../PaginationControls/PaginationControls';
 import { useOGrid, OGridLayout, } from '@alaarab/ogrid-core';
 const OGridInner = forwardRef(function OGridInner(props, ref) {
-    const { dataGridProps, page, pageSize, displayTotalCount, setPage, setPageSize, columnChooserColumns, visibleColumns, handleVisibilityChange, columnChooserPlacement, toolbar, toolbarBelow, className, entityLabelPlural, pageSizeOptions, sideBarProps, } = useOGrid(props, ref);
-    return (_jsx(OGridLayout, { className: className, sideBar: sideBarProps, toolbar: toolbar, toolbarBelow: toolbarBelow, toolbarEnd: columnChooserPlacement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooserColumns, visibleColumns: visibleColumns, onVisibilityChange: handleVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: page, pageSize: pageSize, totalCount: displayTotalCount, onPageChange: setPage, onPageSizeChange: (size) => {
-                setPageSize(size);
-                setPage(1);
-            }, pageSizeOptions: pageSizeOptions, entityLabelPlural: entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+    const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
+    return (_jsx(OGridLayout, { className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
+                pagination.setPageSize(size);
+                pagination.setPage(1);
+            }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
 });
 OGridInner.displayName = 'OGrid';
 export const OGrid = React.memo(OGridInner);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "OGrid default (Radix) – Data grid with sorting, filtering, pagination, column chooser, and CSV export. Packed with Radix UI; no Fluent or Material required.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "^1.8.1",
+    "@alaarab/ogrid-core": "^1.8.2",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-popover": "^1.1.2"
   },