@alaarab/ogrid-react-radix 2.0.0-beta

package/dist/esm/DataGridTable/DataGridTable.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useRef, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import * as Popover from '@radix-ui/react-popover';
+import * as Checkbox from '@radix-ui/react-checkbox';
+import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
+import { InlineCellEditor } from './InlineCellEditor';
+import { StatusBar } from './StatusBar';
+import { GridContextMenu } from './GridContextMenu';
+import { useDataGridState, useColumnResize, useLatestRef, getHeaderFilterConfig, getCellRenderDescriptor, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-react';
+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)))] }));
+}
+const GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
+function DataGridTableInner(props) {
+    const wrapperRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const state = useDataGridState({ props, wrapperRef });
+    const lastMouseShiftRef = useRef(false);
+    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels } = state;
+    const { visibleCols, totalColCount, hasCheckboxCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides } = layout;
+    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, 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]);
+    const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
+    const fitToContent = layoutMode === 'content';
+    const { handleResizeStart, getColumnWidth } = useColumnResize({
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+    });
+    const editCallbacks = useMemo(() => ({ commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit }), [commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit]);
+    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 = 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 = {};
+        const cellClasses = {};
+        const hdrStyles = {};
+        const hdrClasses = {};
+        for (let i = 0; i < visibleCols.length; i++) {
+            const col = visibleCols[i];
+            const columnWidth = getColumnWidth(col);
+            const hasExplicitWidth = !!(columnSizingOverrides[col.columnId] || col.idealWidth != null || col.defaultWidth != null);
+            const isFreezeCol = freezeCols != null && freezeCols >= 1 && i < freezeCols;
+            const isPinnedLeft = col.pinned === 'left';
+            const isPinnedRight = col.pinned === 'right';
+            cellStyles[col.columnId] = {
+                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 ?? DEFAULT_MIN_COLUMN_WIDTH,
+                width: hasExplicitWidth ? columnWidth : undefined,
+                maxWidth: hasExplicitWidth ? columnWidth : undefined,
+            };
+            const parts = [];
+            if (isFreezeCol)
+                parts.push(styles.freezeCol);
+            if (isFreezeCol && i === 0)
+                parts.push(styles.freezeColFirst);
+            if (isPinnedLeft)
+                parts.push(styles.pinnedColLeft);
+            if (isPinnedRight)
+                parts.push(styles.pinnedColRight);
+            const cn = parts.join(' ');
+            cellClasses[col.columnId] = cn;
+            hdrClasses[col.columnId] = cn;
+        }
+        return { cellStyles, cellClasses, hdrStyles, hdrClasses };
+    }, [visibleCols, getColumnWidth, columnSizingOverrides, freezeCols]);
+    // Stable row-click handler (avoids creating a new arrow function per row)
+    const selectedRowIdsRef = useLatestRef(selectedRowIds);
+    const handleSingleRowClick = useCallback((e) => {
+        if (rowSelection !== 'single')
+            return;
+        const rowId = e.currentTarget.dataset.rowId;
+        if (!rowId)
+            return;
+        const ids = selectedRowIdsRef.current;
+        updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- selectedRowIdsRef is a stable ref
+    }, [rowSelection, updateSelection]);
+    // Stable header select-all handler
+    const handleSelectAllChecked = useCallback((c) => handleSelectAll(!!c), [handleSelectAll]);
+    // renderCellContent reads volatile state from refs — keeps function identity stable so
+    // 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') {
+            content = _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) });
+        }
+        else if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
+            const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);
+            const CustomEditor = col.cellEditor;
+            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" }))] }));
+        }
+        return (_jsx(CellErrorBoundary, { onError: onCellError, children: content }, `${rowId}-${col.columnId}`));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- *Ref vars are stable refs from useLatestRef
+    [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%',
+                    ['--data-table-min-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'max-content' : fitToContent ? 'max-content' : '100%',
+                    ['--data-table-total-min-width']: `${minTableWidth}px`,
+                }, children: [_jsx("div", { className: styles.tableScrollContent, children: _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: styles.stickyHeader, children: headerRows.map((row, rowIdx) => (_jsxs("tr", { children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { className: styles.selectionHeaderCell, scope: "col", rowSpan: 1, children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox.Root, { className: styles.rowCheckbox, checked: allSelected ? true : someSelected ? 'indeterminate' : false, onCheckedChange: handleSelectAllChecked, "aria-label": "Select all rows", children: _jsx(Checkbox.Indicator, { className: styles.rowCheckboxIndicator, children: someSelected && !allSelected ? '–' : '✓' }) }) }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { rowSpan: headerRows.length - 1 })), row.map((cell, cellIdx) => {
+                                                            if (cell.isGroup) {
+                                                                return (_jsx("th", { colSpan: cell.colSpan, className: styles.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx));
+                                                            }
+                                                            // Leaf cell
+                                                            const col = cell.columnDef;
+                                                            const leafRowSpan = headerRows.length > 1 && rowIdx < headerRows.length - 1
+                                                                ? headerRows.length - rowIdx
+                                                                : undefined;
+                                                            return (_jsxs("th", { scope: "col", "data-column-id": col.columnId, rowSpan: leafRowSpan, className: columnMeta.hdrClasses[col.columnId] || undefined, style: columnMeta.hdrStyles[col.columnId], children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("div", { className: styles.resizeHandle, onMouseDown: (e) => handleResizeStart(e, col), "aria-label": `Resize ${col.name}` })] }, col.columnId));
+                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsx("tbody", { children: items.map((item, rowIndex) => {
+                                                    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 ?? 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 && (_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

@@ -0,0 +1,493 @@
+@charset "UTF-8";
+.tableScrollContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  background: var(--ogrid-bg, #fff);
+}
+
+.tableWrapper {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  background: var(--ogrid-bg, #fff);
+  will-change: scroll-position;
+}
+.tableWrapper[data-overflow-x=true] {
+  overflow-x: auto;
+}
+.tableWrapper[data-empty=true] {
+  overflow-x: hidden;
+}
+
+.tableWidthAnchor {
+  position: relative;
+  width: max-content;
+  /* min-width uses the same CSS var as the table: 100% in fill mode, max-content otherwise.
+     Safe now that StatusBar is outside this anchor. */
+  min-width: var(--data-table-min-width, max-content);
+  background: var(--ogrid-bg, #fff);
+}
+
+.dataTable {
+  width: var(--data-table-width, fit-content);
+  max-width: 100%;
+  min-width: var(--data-table-min-width, max-content);
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  table-layout: auto;
+}
+
+.dataTable th,
+.dataTable td {
+  min-width: 80px;
+  box-sizing: border-box;
+  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;
+}
+
+.dataTable thead {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+/* Freeze panes: sticky header when freezeRows >= 1 */
+.dataTable thead.stickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 8;
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+.dataTable thead.stickyHeader th {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+/* Freeze panes: sticky first column when freezeCols >= 1 */
+.dataTable .freezeColFirst {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  background: var(--ogrid-bg, #ffffff);
+  will-change: transform;
+}
+
+/* Freeze/pinned header cells need top: 0 + highest z-index so they stick in BOTH
+   directions — left (from .freezeCol/.pinnedCol) AND top (from .stickyHeader).
+   Without explicit top, the child's own position: sticky overrides the parent's. */
+.dataTable thead.stickyHeader .freezeColFirst,
+.dataTable thead.stickyHeader .pinnedColLeft,
+.dataTable thead.stickyHeader .pinnedColRight {
+  top: 0;
+  z-index: 9;
+}
+
+.dataTable thead .freezeColFirst {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+/* Pinned columns: sticky positioning based on column pinned property.
+   Selectors use .dataTable qualifier to beat .dataTable thead th / .dataTable tbody td
+   which set position: relative. */
+.dataTable .pinnedColLeft {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  background: var(--ogrid-bg, #ffffff);
+  will-change: transform;
+}
+.dataTable .pinnedColLeft::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -4px;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+.dataTable thead .pinnedColLeft {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+.dataTable .pinnedColRight {
+  position: sticky;
+  right: 0;
+  z-index: 6;
+  background: var(--ogrid-bg, #ffffff);
+  will-change: transform;
+}
+.dataTable .pinnedColRight::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -4px;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+.dataTable thead .pinnedColRight {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+.dataTable thead th {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ogrid-fg, #242424);
+  white-space: nowrap;
+  position: relative;
+  border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+}
+
+.groupHeaderCell {
+  text-align: center;
+  font-weight: 600;
+  border-bottom: 2px solid var(--ogrid-border, #e0e0e0);
+  padding: 6px 10px;
+  background: var(--ogrid-header-bg, #f5f5f5);
+}
+
+/* Column resize handle — wide hit area with narrow visual indicator */
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 1;
+}
+.resizeHandle::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 3px;
+  bottom: 0;
+  width: 2px;
+}
+.resizeHandle:hover::after {
+  background-color: var(--ogrid-accent, #0078d4);
+}
+.resizeHandle:active::after {
+  background-color: var(--ogrid-accent-dark, #005a9e);
+}
+
+.dataTable tbody td {
+  border-bottom: 1px solid var(--ogrid-border, #e8e8e8);
+}
+
+.dataTable tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.dataTable tbody tr:hover td {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+}
+
+.dataTable tbody tr.selectedRow td {
+  background: var(--ogrid-bg-selected, #e6f0fb);
+}
+
+.dataTable tbody tr.selectedRow:hover td {
+  background: var(--ogrid-bg-selected-hover, #dae8f8);
+}
+
+.dataTable tbody td {
+  position: relative;
+  height: 1px;
+}
+
+.cellContent {
+  width: 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-selection, #217346);
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+
+.cellInRange {
+  background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+}
+
+:global([data-drag-range]) {
+  background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)) !important;
+}
+
+.cellCut {
+  background: var(--ogrid-bg-hover, rgba(0, 0, 0, 0.04)) !important;
+  opacity: 0.7;
+}
+
+.fillHandle {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  width: 7px;
+  height: 7px;
+  background: var(--ogrid-selection, #217346);
+  border: 1px solid var(--ogrid-bg, #fff);
+  border-radius: 1px;
+  cursor: crosshair;
+  pointer-events: auto;
+  z-index: 3;
+}
+
+.dataTable th.selectionHeaderCell,
+.dataTable td.selectionCell {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  padding: 4px !important;
+  text-align: center;
+}
+
+.selectionHeaderCellInner,
+.selectionCellInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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;
+  gap: 16px;
+  width: 100%;
+  padding: 6px 12px;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: var(--ogrid-muted, #616161);
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+  border-top: 1px solid var(--ogrid-border, #e0e0e0);
+  min-height: 28px;
+}
+
+.statusBarItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.statusBarItem:not(:last-child)::after {
+  content: "";
+  width: 1px;
+  height: 14px;
+  background: var(--ogrid-border, #c4c4c4);
+  margin-left: 12px;
+}
+
+.statusBarLabel {
+  color: var(--ogrid-muted, #707070);
+}
+
+.statusBarValue {
+  color: var(--ogrid-fg, #242424);
+  font-weight: 600;
+}
+
+.contextMenu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 160px;
+  padding: 4px 0;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, #e0e0e0);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.contextMenuItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: none;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  color: var(--ogrid-fg, #242424);
+}
+.contextMenuItem:hover:not(:disabled) {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+}
+.contextMenuItem:disabled {
+  opacity: 0.5;
+  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;
+  background: var(--ogrid-border, #e0e0e0);
+}
+
+.loadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(1px);
+  pointer-events: all;
+}
+
+.loadingOverlayContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, #c4c4c4);
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
+}
+
+.loadingOverlayText {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ogrid-muted, #616161);
+}
+
+.loadingDimmed {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.emptyStateInGrid {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 20px 16px;
+  min-height: 88px;
+  width: 100%;
+  box-sizing: border-box;
+  border-top: 1px solid var(--ogrid-border, #e0e0e0);
+  background: var(--ogrid-bg-subtle, #fafafa);
+}
+
+.emptyStateInGridTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ogrid-fg, #242424);
+  margin-bottom: 4px;
+}
+
+.emptyStateInGridMessage {
+  font-size: 13px;
+  color: var(--ogrid-muted, #616161);
+  line-height: 1.5;
+}
+
+.emptyStateInGridLink {
+  background: none;
+  border: none;
+  color: var(--ogrid-primary, #0066cc);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+}
+.emptyStateInGridLink:hover {
+  color: var(--ogrid-primary-hover, #0052a3);
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--ogrid-border, #e0e0e0);
+  border-top-color: var(--ogrid-primary, #0066cc);
+  border-radius: 50%;
+  animation: ogrid-spin 0.8s linear infinite;
+}
+
+@keyframes ogrid-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from '@alaarab/ogrid-react';
+import styles from './DataGridTable.module.css';
+export function GridContextMenu(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))
+                onClose();
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('mousedown', handleClickOutside, true);
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, true);
+            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.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))) }));
+}