@alaarab/ogrid-fluent 1.8.0 → 1.8.2

package/dist/esm/DataGridTable/DataGridTable.js

@@ -7,7 +7,7 @@ import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { InlineCellEditor } from './InlineCellEditor';
 import { StatusBar } from './StatusBar';
 import { GridContextMenu } from './GridContextMenu';
-import { useDataGridState, getHeaderFilterConfig, getCellRenderDescriptor, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from '@alaarab/ogrid-core';
+import { useDataGridState, getHeaderFilterConfig, getCellRenderDescriptor, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, isRowInRange, } from '@alaarab/ogrid-core';
 import styles from './DataGridTable.module.css';
 // Module-scope stable constants (avoid per-render allocations)
 const gridRootStyle = {
@@ -23,6 +23,66 @@ const BOOLEAN_STYLE = { justifyContent: 'center', textAlign: 'center' };
 const EDITABLE_NUMERIC_STYLE = { cursor: 'cell', justifyContent: 'flex-end', textAlign: 'right' };
 const EDITABLE_BOOLEAN_STYLE = { cursor: 'cell', justifyContent: 'center', textAlign: 'center' };
 const PREVENT_DEFAULT = (e) => { e.preventDefault(); };
+function GridRowInner(props) {
+    const { item, rowId, rowIndex, isSelected, cellClassMap, handleSingleRowClick, activeCell } = props;
+    const rowClassName = [
+        isSelected ? styles.selectedRow : '',
+        activeCell !== null && rowIndex === activeCell.rowIndex ? styles.activeRow : '',
+    ].filter(Boolean).join(' ') || undefined;
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _jsx(DataGridRow, { className: rowClassName, onClick: () => handleSingleRowClick(rowId), children: ({ renderCell, columnId }) => (_jsx(DataGridCell, { className: cellClassMap[String(columnId)] || undefined, children: renderCell(item) })) }));
+}
+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.cellClassMap !== next.cellClassMap)
+        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);
     const tableContainerRef = useRef(null);
@@ -259,11 +319,7 @@ function DataGridTableInner(props) {
                                                                 return (_jsx("th", { rowSpan: headerRows.length - rowIdx, className: styles.leafHeaderCellSpan, scope: "col", children: cell.columnDef?.name }, cellIdx));
                                                             })] }, `group-${rowIdx}`))), _jsx(DataGridRow, { children: ({ renderHeaderCell, columnId }) => (_jsx(DataGridHeaderCell, { className: headerClassMap[String(columnId)] || undefined, children: renderHeaderCell() })) })] }), _jsx(DataGridBody, { children: ({ item }) => {
                                                     const rowId = getRowId(item);
-                                                    const isSelected = selectedRowIdsRef.current.has(rowId);
-                                                    const ac = activeCellRef.current;
-                                                    return (_jsx(DataGridRow, { className: `${isSelected ? styles.selectedRow : ''} ${ac !== null && (rowIndexByRowId.get(rowId) ?? -1) === ac.rowIndex
-                                                            ? styles.activeRow
-                                                            : ''}`, onClick: () => handleSingleRowClick(rowId), children: ({ renderCell, columnId }) => (_jsx(DataGridCell, { className: cellClassMap[String(columnId)] || undefined, children: renderCell(item) })) }, rowId));
+                                                    return (_jsx(GridRow, { item: item, rowId: rowId, rowIndex: rowIndexByRowId.get(rowId) ?? -1, isSelected: selectedRowIds.has(rowId), cellClassMap: cellClassMap, handleSingleRowClick: handleSingleRowClick, selectionRange: selectionRange, activeCell: activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowId));
                                                 } })] }), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { className: styles.emptyStateInGridMessageSticky, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.emptyStateInGridIcon, "aria-hidden": true, children: "\uD83D\uDCCB" }), _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(Spinner, { size: "small" }), _jsx("span", { className: styles.loadingOverlayText, children: loadingMessage })] }) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-fluent",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "OGrid Fluent UI implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -40,7 +40,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "^1.8.0"
+    "@alaarab/ogrid-core": "^1.8.2"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",