@alaarab/ogrid 1.2.2 → 1.3.0

package/dist/esm/DataGridTable/DataGridTable.js

@@ -8,13 +8,14 @@ import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { InlineCellEditor } from './InlineCellEditor';
 import { StatusBar } from './StatusBar';
 import { GridContextMenu } from './GridContextMenu';
-import { useDataGridState, useColumnResize, getHeaderFilterConfig, getCellRenderDescriptor, } from '@alaarab/ogrid-core';
+import { useDataGridState, useColumnResize, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, } from '@alaarab/ogrid-core';
 import styles from './DataGridTable.module.css';
 function DataGridTableInner(props) {
     const wrapperRef = useRef(null);
+    const tableContainerRef = useRef(null);
     const state = useDataGridState({ props, wrapperRef });
     const lastMouseShiftRef = useRef(false);
-    const { visibleCols, totalColCount, hasCheckboxCol, selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, setEditingCell, pendingEditorValue, setPendingEditorValue, setActiveCell, handleCellMouseDown, handleSelectAllCells, contextMenu, setContextMenu, handleCellContextMenu, closeContextMenu, handleCopy, handleCut, handlePaste, handleGridKeyDown, handleFillHandleMouseDown, containerWidth, minTableWidth, columnSizingOverrides, setColumnSizingOverrides, statusBarConfig, showEmptyInGrid, hasCellSelection, selectionRange, headerFilterInput, cellDescriptorInput, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl, } = state;
+    const { visibleCols, totalColCount, hasCheckboxCol, selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, setEditingCell, pendingEditorValue, setPendingEditorValue, setActiveCell, handleCellMouseDown, handleSelectAllCells, contextMenu, setContextMenu, handleCellContextMenu, closeContextMenu, canUndo, canRedo, onUndo, onRedo, handleCopy, handleCut, handlePaste, handleGridKeyDown, handleFillHandleMouseDown, containerWidth, minTableWidth, columnSizingOverrides, setColumnSizingOverrides, statusBarConfig, showEmptyInGrid, hasCellSelection, selectionRange, copyRange, cutRange, colOffset, headerFilterInput, cellDescriptorInput, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl, } = state;
     const { items, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
     const allowOverflowX = containerWidth > 0 && minTableWidth > containerWidth;
     const fitToContent = layoutMode === 'content';
@@ -63,50 +64,27 @@ function DataGridTableInner(props) {
             content = _jsx("span", { style: cellStyle, children: content });
         const cellClassNames = [
             styles.cellContent,
-            descriptor.isActive ? styles.activeCellContent : '',
+            descriptor.isActive && !descriptor.isInRange ? styles.activeCellContent : '',
             descriptor.isInRange ? styles.cellInRange : '',
             descriptor.isInCutRange ? styles.cellCut : '',
+            descriptor.isInCopyRange ? styles.cellCopied : '',
         ].filter(Boolean).join(' ');
         if (descriptor.canEditAny) {
-            return (_jsxs("div", { className: cellClassNames, "data-row-index": descriptor.rowIndex, "data-col-index": descriptor.globalColIndex, "data-in-range": descriptor.isInRange ? 'true' : undefined, role: "button", tabIndex: descriptor.isActive ? 0 : -1, onMouseDown: (e) => handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex), onClick: () => setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }), onDoubleClick: () => setEditingCell({ rowId: descriptor.rowId, columnId: col.columnId }), onContextMenu: handleCellContextMenu, style: { minHeight: '100%', cursor: 'cell', outline: 'none', position: 'relative', userSelect: 'none' }, children: [content, descriptor.isSelectionEndCell && (_jsx("div", { className: styles.fillHandle, onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" }))] }));
+            return (_jsxs("div", { className: cellClassNames, "data-row-index": descriptor.rowIndex, "data-col-index": descriptor.globalColIndex, "data-in-range": descriptor.isInRange ? 'true' : undefined, role: "button", tabIndex: descriptor.isActive ? 0 : -1, onMouseDown: (e) => handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex), onClick: () => setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }), onDoubleClick: () => setEditingCell({ rowId: descriptor.rowId, columnId: col.columnId }), onContextMenu: handleCellContextMenu, style: { cursor: 'cell' }, children: [content, descriptor.isSelectionEndCell && (_jsx("div", { className: styles.fillHandle, onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" }))] }));
         }
-        return (_jsx("div", { className: cellClassNames, "data-row-index": descriptor.rowIndex, "data-col-index": descriptor.globalColIndex, "data-in-range": descriptor.isInRange ? 'true' : undefined, tabIndex: descriptor.isActive ? 0 : -1, onMouseDown: (e) => handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex), onClick: () => setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }), onContextMenu: handleCellContextMenu, style: { outline: 'none', userSelect: 'none' }, children: content }));
+        return (_jsx("div", { className: cellClassNames, "data-row-index": descriptor.rowIndex, "data-col-index": descriptor.globalColIndex, "data-in-range": descriptor.isInRange ? 'true' : undefined, tabIndex: descriptor.isActive ? 0 : -1, onMouseDown: (e) => handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex), onClick: () => setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }), onContextMenu: handleCellContextMenu, children: content }));
     }, [cellDescriptorInput, pendingEditorValue, popoverAnchorEl, handleCellMouseDown, handleCellContextMenu, handleFillHandleMouseDown, setActiveCell, setEditingCell, setPendingEditorValue, setPopoverAnchorEl, commitCellEdit, cancelPopoverEdit]);
-    return (_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: (e) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY }); }, onKeyDown: handleGridKeyDown, style: {
+    return (_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: (e) => { e.preventDefault(); }, onKeyDown: handleGridKeyDown, style: {
             ['--data-table-column-count']: totalColCount,
             ['--data-table-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'fit-content' : fitToContent ? 'fit-content' : '100%',
             ['--data-table-min-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'max-content' : fitToContent ? 'max-content' : '100%',
             ['--data-table-total-min-width']: `${minTableWidth}px`,
-        }, children: [_jsxs("div", { className: styles.tableScrollContent, children: [_jsxs("div", { className: isLoading && items.length > 0 ? styles.loadingOverlayContainer : undefined, children: [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 })] }) })), _jsx("div", { className: isLoading && items.length > 0 ? styles.loadingDimmed : undefined, children: _jsx("div", { className: styles.tableWidthAnchor, children: _jsxs("table", { className: styles.dataTable, children: [_jsx("thead", { className: freezeRows != null && freezeRows >= 1 ? styles.stickyHeader : undefined, children: _jsxs("tr", { children: [hasCheckboxCol && (_jsx("th", { className: styles.selectionHeaderCell, scope: "col", children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox.Root, { checked: allSelected ? true : someSelected ? 'indeterminate' : false, onCheckedChange: (c) => handleSelectAll(!!c), "aria-label": "Select all rows", children: _jsx(Checkbox.Indicator, { children: "\u2713" }) }) }) })), visibleCols.map((col, colIdx) => {
-                                                            const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
-                                                            const isPinnedLeft = col.pinned === 'left';
-                                                            const isPinnedRight = col.pinned === 'right';
-                                                            const columnWidth = getColumnWidth(col);
-                                                            return (_jsxs("th", { scope: "col", "data-column-id": col.columnId, className: [
-                                                                    isFreezeCol ? styles.freezeCol : '',
-                                                                    isFreezeCol && colIdx === 0 ? styles.freezeColFirst : '',
-                                                                    isPinnedLeft ? styles.pinnedColLeft : '',
-                                                                    isPinnedRight ? styles.pinnedColRight : '',
-                                                                ].filter(Boolean).join(' '), style: {
-                                                                    minWidth: col.minWidth ?? 80,
-                                                                    width: columnWidth,
-                                                                    maxWidth: columnWidth,
-                                                                    position: 'relative',
-                                                                }, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("div", { className: styles.resizeHandle, onMouseDown: (e) => handleResizeStart(e, col), "aria-label": `Resize ${col.name}` })] }, col.columnId));
-                                                        })] }) }), !showEmptyInGrid && (_jsx("tbody", { children: items.map((item, rowIndex) => {
-                                                    const rowIdStr = getRowId(item);
-                                                    const isSelected = selectedRowIds.has(rowIdStr);
-                                                    return (_jsxs("tr", { className: isSelected ? styles.selectedRow : '', onClick: () => {
-                                                            if (rowSelection === 'single') {
-                                                                const id = getRowId(item);
-                                                                updateSelection(selectedRowIds.has(id) ? new Set() : new Set([id]));
-                                                            }
-                                                        }, children: [hasCheckboxCol && (_jsx("td", { className: styles.selectionCell, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", checked: selectedRowIds.has(rowIdStr), onChange: (e) => handleRowCheckboxChange(rowIdStr, e.target.checked, rowIndex, lastMouseShiftRef.current), "aria-label": `Select row ${rowIndex + 1}` }) }) })), visibleCols.map((col, colIdx) => {
+        }, children: [_jsxs("div", { className: styles.tableScrollContent, children: [_jsxs("div", { className: isLoading && items.length > 0 ? styles.loadingOverlayContainer : undefined, children: [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 })] }) })), _jsx("div", { className: isLoading && items.length > 0 ? styles.loadingDimmed : undefined, children: _jsxs("div", { className: styles.tableWidthAnchor, ref: tableContainerRef, children: [_jsxs("table", { className: styles.dataTable, children: [_jsx("thead", { className: freezeRows != null && freezeRows >= 1 ? styles.stickyHeader : undefined, children: _jsxs("tr", { children: [hasCheckboxCol && (_jsx("th", { className: styles.selectionHeaderCell, scope: "col", children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox.Root, { className: styles.rowCheckbox, checked: allSelected ? true : someSelected ? 'indeterminate' : false, onCheckedChange: (c) => handleSelectAll(!!c), "aria-label": "Select all rows", children: _jsx(Checkbox.Indicator, { className: styles.rowCheckboxIndicator, children: someSelected && !allSelected ? '–' : '✓' }) }) }) })), visibleCols.map((col, colIdx) => {
                                                                 const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
                                                                 const isPinnedLeft = col.pinned === 'left';
                                                                 const isPinnedRight = col.pinned === 'right';
                                                                 const columnWidth = getColumnWidth(col);
-                                                                return (_jsx("td", { className: [
+                                                                return (_jsxs("th", { scope: "col", "data-column-id": col.columnId, className: [
                                                                         isFreezeCol ? styles.freezeCol : '',
                                                                         isFreezeCol && colIdx === 0 ? styles.freezeColFirst : '',
                                                                         isPinnedLeft ? styles.pinnedColLeft : '',
@@ -115,9 +93,33 @@ function DataGridTableInner(props) {
                                                                         minWidth: col.minWidth ?? 80,
                                                                         width: columnWidth,
                                                                         maxWidth: columnWidth,
-                                                                    }, children: renderCellContent(item, col, rowIndex, colIdx) }, col.columnId));
-                                                            })] }, rowIdStr));
-                                                }) }))] }) }) })] }), 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.') })] })) }) }))] }), 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 })), contextMenu &&
-                createPortal(_jsx(GridContextMenu, { x: contextMenu.x, y: contextMenu.y, hasSelection: hasCellSelection, onCopy: handleCopy, onCut: handleCut, onPaste: () => void handlePaste(), onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body)] }));
+                                                                        position: 'relative',
+                                                                    }, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("div", { className: styles.resizeHandle, onMouseDown: (e) => handleResizeStart(e, col), "aria-label": `Resize ${col.name}` })] }, col.columnId));
+                                                            })] }) }), !showEmptyInGrid && (_jsx("tbody", { children: items.map((item, rowIndex) => {
+                                                        const rowIdStr = getRowId(item);
+                                                        const isSelected = selectedRowIds.has(rowIdStr);
+                                                        return (_jsxs("tr", { className: isSelected ? styles.selectedRow : '', onClick: () => {
+                                                                if (rowSelection === 'single') {
+                                                                    const id = getRowId(item);
+                                                                    updateSelection(selectedRowIds.has(id) ? new Set() : new Set([id]));
+                                                                }
+                                                            }, children: [hasCheckboxCol && (_jsx("td", { className: styles.selectionCell, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox.Root, { className: styles.rowCheckbox, checked: selectedRowIds.has(rowIdStr), onCheckedChange: (c) => handleRowCheckboxChange(rowIdStr, !!c, rowIndex, lastMouseShiftRef.current), "aria-label": `Select row ${rowIndex + 1}`, children: _jsx(Checkbox.Indicator, { className: styles.rowCheckboxIndicator, children: "\u2713" }) }) }) })), visibleCols.map((col, colIdx) => {
+                                                                    const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
+                                                                    const isPinnedLeft = col.pinned === 'left';
+                                                                    const isPinnedRight = col.pinned === 'right';
+                                                                    const columnWidth = getColumnWidth(col);
+                                                                    return (_jsx("td", { className: [
+                                                                            isFreezeCol ? styles.freezeCol : '',
+                                                                            isFreezeCol && colIdx === 0 ? styles.freezeColFirst : '',
+                                                                            isPinnedLeft ? styles.pinnedColLeft : '',
+                                                                            isPinnedRight ? styles.pinnedColRight : '',
+                                                                        ].filter(Boolean).join(' '), style: {
+                                                                            minWidth: col.minWidth ?? 80,
+                                                                            width: columnWidth,
+                                                                            maxWidth: columnWidth,
+                                                                        }, children: renderCellContent(item, col, rowIndex, colIdx) }, col.columnId));
+                                                                })] }, rowIdStr));
+                                                    }) }))] }), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), 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 }))] }) })] }), 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.') })] })) }) }))] }), contextMenu &&
+                createPortal(_jsx(GridContextMenu, { x: contextMenu.x, y: contextMenu.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? (() => { }), onRedo: onRedo ?? (() => { }), onCopy: handleCopy, onCut: handleCut, onPaste: () => void handlePaste(), onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body)] }));
 }
 export const DataGridTable = React.memo(DataGridTableInner);

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

@@ -24,6 +24,7 @@
 }
 
 .tableWidthAnchor {
+  position: relative;
   width: max-content;
   min-width: max(100%, var(--data-table-total-min-width, 0px));
   background: var(--ogrid-bg, #fff);
@@ -37,7 +38,6 @@
   border-spacing: 0;
   border: 1px solid var(--ogrid-border, #e0e0e0);
   border-radius: 6px;
-  overflow: hidden;
   box-sizing: border-box;
   table-layout: auto;
 }
@@ -46,17 +46,30 @@
 .dataTable td {
   min-width: 80px;
   box-sizing: border-box;
-  padding: 6px 10px;
   border-right: 1px solid var(--ogrid-border, #e0e0e0);
   font-size: 13px;
   vertical-align: middle;
 }
 
+.dataTable th {
+  padding: 6px 10px;
+}
+
+.dataTable td {
+  padding: 0;
+}
+
 .dataTable th:last-of-type,
 .dataTable td:last-of-type {
   border-right: none;
 }
 
+/* When status bar follows, remove bottom border-radius so the frame connects */
+.tableWidthAnchor:has(.statusBar) .dataTable {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .dataTable thead {
   background: var(--ogrid-bg-subtle, #f3f2f1);
 }
@@ -176,59 +189,51 @@
 }
 
 .dataTable tbody td {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  position: relative;
+  height: 1px;
 }
 
 .cellContent {
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   min-width: 0;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   user-select: none;
+  outline: none;
 }
 
 .activeCellContent {
-  outline: 2px solid var(--ogrid-primary, #0066cc);
-  outline-offset: -2px;
-  border-radius: 2px;
-  z-index: 1;
+  outline: 2px solid var(--ogrid-selection, #217346);
+  outline-offset: -1px;
+  z-index: 2;
   position: relative;
+  overflow: visible;
 }
 
 .cellInRange {
-  background: var(--ogrid-bg-range, #cce4f7) !important;
-  box-shadow: inset 0 0 0 1px var(--ogrid-primary, #0066cc);
+  background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
 }
 
 .cellCut {
-  outline: 2px dashed var(--ogrid-primary, #0066cc);
-  outline-offset: -2px;
   background: var(--ogrid-bg-hover, rgba(0, 0, 0, 0.04)) !important;
-  animation: cellCutDash 0.6s linear infinite;
+  opacity: 0.7;
 }
 
-@keyframes cellCutDash {
-  0% {
-    outline-offset: -2px;
-  }
-  50% {
-    outline-offset: -3px;
-  }
-  100% {
-    outline-offset: -2px;
-  }
-}
 .fillHandle {
   position: absolute;
-  right: 2px;
-  bottom: 2px;
-  width: 8px;
-  height: 8px;
-  background: var(--ogrid-primary, #0066cc);
-  border-radius: 2px;
+  right: -3px;
+  bottom: -3px;
+  width: 7px;
+  height: 7px;
+  background: var(--ogrid-selection, #217346);
+  border: 1px solid #fff;
+  border-radius: 1px;
   cursor: crosshair;
   pointer-events: auto;
   z-index: 3;
@@ -251,6 +256,33 @@
   width: 100%;
 }
 
+.rowCheckbox {
+  width: 18px;
+  height: 18px;
+  border: 1.5px solid var(--ogrid-border-strong, #888);
+  border-radius: 3px;
+  background: var(--ogrid-bg, #fff);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+}
+.rowCheckbox[data-state=checked], .rowCheckbox[data-state=indeterminate] {
+  background: var(--ogrid-primary, #0066cc);
+  border-color: var(--ogrid-primary, #0066cc);
+}
+
+.rowCheckboxIndicator {
+  color: var(--ogrid-primary-fg, #fff);
+  font-size: 13px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .statusBar {
   display: flex;
   align-items: center;
@@ -300,7 +332,10 @@
 }
 
 .contextMenuItem {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
   width: 100%;
   padding: 6px 12px;
   border: none;
@@ -318,6 +353,15 @@
   cursor: not-allowed;
 }
 
+.contextMenuItemLabel {
+  flex: 1;
+}
+
+.contextMenuItemShortcut {
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4));
+  font-size: 0.85em;
+}
+
 .contextMenuDivider {
   height: 1px;
   margin: 4px 0;

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -1,11 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers } from '@alaarab/ogrid-core';
+import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from '@alaarab/ogrid-core';
 import styles from './DataGridTable.module.css';
 export function GridContextMenu(props) {
-    const { x, y, hasSelection, onClose } = props;
+    const { x, y, hasSelection, canUndo, canRedo, onClose } = props;
     const ref = React.useRef(null);
     const handlers = React.useMemo(() => getContextMenuHandlers(props), [props]);
+    const isDisabled = React.useCallback((item) => {
+        if (item.disabledWhenNoSelection && !hasSelection)
+            return true;
+        if (item.id === 'undo' && !canUndo)
+            return true;
+        if (item.id === 'redo' && !canRedo)
+            return true;
+        return false;
+    }, [hasSelection, canUndo, canRedo]);
     React.useEffect(() => {
         const handleClickOutside = (e) => {
             if (ref.current && !ref.current.contains(e.target))
@@ -22,5 +31,5 @@ export function GridContextMenu(props) {
             document.removeEventListener('keydown', handleKeyDown, true);
         };
     }, [onClose]);
-    return (_jsx("div", { ref: ref, className: styles.contextMenu, role: "menu", style: { left: x, top: y }, "aria-label": "Grid context menu", children: GRID_CONTEXT_MENU_ITEMS.map((item) => (_jsxs(React.Fragment, { children: [item.id === 'selectAll' && _jsx("div", { className: styles.contextMenuDivider }), _jsx("button", { type: "button", className: styles.contextMenuItem, onClick: handlers[item.id], disabled: item.disabledWhenNoSelection ? !hasSelection : false, children: item.label })] }, item.id))) }));
+    return (_jsx("div", { ref: ref, className: styles.contextMenu, role: "menu", style: { left: x, top: y }, "aria-label": "Grid context menu", children: GRID_CONTEXT_MENU_ITEMS.map((item) => (_jsxs(React.Fragment, { children: [item.dividerBefore && _jsx("div", { className: styles.contextMenuDivider }), _jsxs("button", { type: "button", className: styles.contextMenuItem, onClick: handlers[item.id], disabled: isDisabled(item), children: [_jsx("span", { className: styles.contextMenuItemLabel, children: item.label }), item.shortcut && (_jsx("span", { className: styles.contextMenuItemShortcut, children: formatShortcut(item.shortcut) }))] })] }, item.id))) }));
 }

package/dist/types/DataGridTable/GridContextMenu.d.ts

@@ -4,5 +4,7 @@ export interface GridContextMenuProps extends GridContextMenuHandlerProps {
     x: number;
     y: number;
     hasSelection: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
 }
 export declare function GridContextMenu(props: GridContextMenuProps): React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid",
-  "version": "1.2.2",
+  "version": "1.3.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",