@alaarab/ogrid-react-fluent 2.0.11 → 2.0.12

package/dist/esm/DataGridTable/DataGridTable.js

@@ -1,325 +1,148 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { useMemo, useRef, useEffect, useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { DataGrid, DataGridHeader, DataGridRow, DataGridHeaderCell, DataGridBody, DataGridCell, createTableColumn, Spinner, Checkbox, Popover, PopoverSurface, } from '@fluentui/react-components';
+import { Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Checkbox, Popover, PopoverSurface, } from '@fluentui/react-components';
 import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { ColumnHeaderMenu } from '../ColumnHeaderMenu';
 import { InlineCellEditor } from './InlineCellEditor';
 import { StatusBar } from './StatusBar';
 import { GridContextMenu } from './GridContextMenu';
-import { useDataGridState, useColumnReorder, useVirtualScroll, useLatestRef, getHeaderFilterConfig, getCellRenderDescriptor, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-react';
+import { EmptyState } from './EmptyState';
+import { LoadingOverlay } from './LoadingOverlay';
+import { DropIndicator } from './DropIndicator';
+import { useDataGridTableOrchestration, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, } from '@alaarab/ogrid-react';
 import styles from './DataGridTable.module.css';
-// Module-scope stable constants (avoid per-render allocations)
-const gridRootStyle = {
-    position: 'relative',
-    flex: 1,
-    minHeight: 0,
-    display: 'flex',
-    flexDirection: 'column',
-};
-const CURSOR_CELL_STYLE = { cursor: 'cell' };
-const NUMERIC_STYLE = { justifyContent: 'flex-end', textAlign: 'right' };
-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 POPOVER_ANCHOR_STYLE = { minHeight: '100%', minWidth: 40 };
-const PREVENT_DEFAULT = (e) => { e.preventDefault(); };
-const NOOP = () => { };
 function GridRowInner(props) {
-    const { item, rowId, rowIndex, isSelected, cellClassMap, handleSingleRowClick, activeCell } = props;
-    const rowClassName = `${isSelected ? styles.selectedRow : ''}${activeCell !== null && rowIndex === activeCell.rowIndex ? (isSelected ? ` ${styles.activeRow}` : styles.activeRow) : ''}` || 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) })) }));
+    const { item, rowIndex, rowId, isSelected, visibleCols, columnMeta, renderCellContent, handleSingleRowClick, handleRowCheckboxChange, lastMouseShiftRef, hasCheckboxCol, hasRowNumbersCol, rowNumberOffset, } = props;
+    return (_jsxs(TableRow, { className: isSelected ? styles.selectedRow : undefined, "data-row-id": rowId, onClick: handleSingleRowClick, children: [hasCheckboxCol && (_jsx(TableCell, { className: styles.selectionCellWrapper, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: isSelected, onChange: (e, data) => {
+                            handleRowCheckboxChange(rowId, !!data.checked, rowIndex, lastMouseShiftRef.current);
+                        }, "aria-label": `Select row ${rowIndex + 1}` }) }) })), hasRowNumbersCol && (_jsx(TableCell, { className: styles.rowNumberCellWrapper, children: _jsx("div", { className: styles.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) })), visibleCols.map((col, colIdx) => (_jsx(TableCell, { "data-column-id": col.columnId, 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 { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels, pinning } = state;
-    const { flatColumns, visibleCols, totalColCount, hasCheckboxCol, hasRowNumbersCol, colOffset, rowIndexByRowId, 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 { activeCell, 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, columnOrder, onColumnOrderChange, columnReorder, virtualScroll, density = 'normal', pinnedColumns, currentPage = 1, pageSize: propPageSize = 25, } = props;
-    // Calculate row number offset for pagination
-    const rowNumberOffset = hasRowNumbersCol ? (currentPage - 1) * propPageSize : 0;
-    // Memoize header rows (recursive tree traversal)
-    const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
-    const hasGroupHeaders = headerRows.length > 1;
-    const fitToContent = layoutMode === 'content';
-    const { isDragging: isReorderDragging, dropIndicatorX, handleHeaderMouseDown } = useColumnReorder({
-        columns: visibleCols,
-        columnOrder,
-        onColumnOrderChange,
-        enabled: columnReorder === true,
-        pinnedColumns,
-        wrapperRef,
-    });
-    const virtualScrollEnabled = virtualScroll?.enabled === true;
-    const virtualRowHeight = virtualScroll?.rowHeight ?? 36;
-    const { visibleRange } = useVirtualScroll({
-        totalRows: items.length,
-        rowHeight: virtualRowHeight,
-        enabled: virtualScrollEnabled,
-        overscan: virtualScroll?.overscan,
-        containerRef: wrapperRef,
-    });
-    const columnSizingOptions = useMemo(() => {
-        const acc = {};
-        if (hasCheckboxCol) {
-            acc['__selection__'] = { minWidth: CHECKBOX_COLUMN_WIDTH, defaultWidth: CHECKBOX_COLUMN_WIDTH, idealWidth: CHECKBOX_COLUMN_WIDTH };
-        }
-        if (hasRowNumbersCol) {
-            acc['__row_number__'] = { minWidth: ROW_NUMBER_COLUMN_WIDTH, defaultWidth: ROW_NUMBER_COLUMN_WIDTH, idealWidth: ROW_NUMBER_COLUMN_WIDTH };
-        }
-        visibleCols.forEach((c) => {
-            const minW = c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-            const defaultW = c.defaultWidth ?? 120;
-            const base = c.idealWidth ?? Math.max(minW, defaultW);
-            const override = columnSizingOverrides[c.columnId];
-            const w = override ? Math.max(minW, override.widthPx) : base;
-            acc[c.columnId] = {
-                minWidth: minW,
-                defaultWidth: w,
-                idealWidth: w,
-            };
-        });
-        return acc;
-    }, [visibleCols, columnSizingOverrides, hasCheckboxCol, hasRowNumbersCol]);
-    const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
-    // Pre-compute column class maps (avoids per-cell .filter(Boolean).join(' '))
-    const { cellClassMap, headerClassMap } = useMemo(() => {
-        const cm = {};
-        const hm = {};
+    const o = useDataGridTableOrchestration({ props });
+    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, rowSelection, freezeRows, freezeCols, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, visibleColumns, columnOrder, columnReorder, density, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, totalColCount, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, columnSizingOverrides, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, headerMenu, } = o;
+    // 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';
+            const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
+            const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
+            const hasResizeOverride = !!columnSizingOverrides[col.columnId];
+            const isPinned = isPinnedLeft || isPinnedRight;
+            cellStyles[col.columnId] = {
+                minWidth: hasResizeOverride ? columnWidth : (col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH),
+                width: hasExplicitWidth ? columnWidth : undefined,
+                maxWidth: hasExplicitWidth ? columnWidth : undefined,
+                textAlign: col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : undefined,
+                // Fluent UI's TableCell injects atomic CSS `position: relative` which overrides the
+                // shared `.pinnedColLeft { position: sticky }` class. Inline style wins over atomic CSS.
+                ...(isPinned ? { position: 'sticky' } : undefined),
+                ...(isPinnedLeft && pinning.leftOffsets[col.columnId] != null ? { left: pinning.leftOffsets[col.columnId] } : undefined),
+                ...(isPinnedRight && pinning.rightOffsets[col.columnId] != null ? { right: pinning.rightOffsets[col.columnId] } : undefined),
+            };
+            hdrStyles[col.columnId] = {
+                minWidth: hasResizeOverride ? columnWidth : (col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH),
+                width: hasExplicitWidth ? columnWidth : undefined,
+                maxWidth: hasExplicitWidth ? columnWidth : undefined,
+                ...(isPinned ? { position: 'sticky' } : undefined),
+                ...(isPinnedLeft && pinning.leftOffsets[col.columnId] != null ? { left: pinning.leftOffsets[col.columnId] } : undefined),
+                ...(isPinnedRight && pinning.rightOffsets[col.columnId] != null ? { right: pinning.rightOffsets[col.columnId] } : undefined),
+            };
             const parts = [];
             if (isFreezeCol)
                 parts.push(styles.freezeCol);
             if (isFreezeCol && i === 0)
                 parts.push(styles.freezeColFirst);
-            if (isPinnedLeft) {
-                parts.push(styles.pinnedCell);
-                parts.push(styles.pinnedLeft);
-            }
-            if (isPinnedRight) {
-                parts.push(styles.pinnedCell);
-                parts.push(styles.pinnedRight);
-            }
-            cm[col.columnId] = parts.join(' ');
-            hm[col.columnId] = parts.join(' ');
+            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, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
+    // 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) });
         }
-        cm['__selection__'] = styles.selectionCellWrapper;
-        hm['__selection__'] = styles.selectionHeaderCellWrapper;
-        return { cellClassMap: cm, headerClassMap: hm };
-    }, [visibleCols, freezeCols]);
-    // Refs for volatile state (read inside fluentColumns render closures without adding to deps)
-    const cellDescriptorInputRef = useLatestRef(cellDescriptorInput);
-    const selectedRowIdsRef = useLatestRef(selectedRowIds);
-    const activeCellRef = useLatestRef(activeCell);
-    const pendingEditorValueRef = useLatestRef(pendingEditorValue);
-    const popoverAnchorElRef = useLatestRef(popoverAnchorEl);
-    const allSelectedRef = useLatestRef(allSelected);
-    const someSelectedRef = useLatestRef(someSelected);
-    // Callback refs — stabilize fluentColumns memo (these change identity on state updates
-    // but the columns structure doesn't need rebuilding for that)
-    const headerFilterInputRef = useLatestRef(headerFilterInput);
-    const commitCellEditRef = useLatestRef(commitCellEdit);
-    const cancelPopoverEditRef = useLatestRef(cancelPopoverEdit);
-    const handleCellMouseDownRef = useLatestRef(handleCellMouseDown);
-    const handleFillHandleMouseDownRef = useLatestRef(handleFillHandleMouseDown);
-    const handleCellContextMenuRef = useLatestRef(handleCellContextMenu);
-    const setActiveCellRef = useLatestRef(setActiveCell);
-    const setEditingCellRef = useLatestRef(setEditingCell);
-    const setPendingEditorValueRef = useLatestRef(setPendingEditorValue);
-    const handleSelectAllRef = useLatestRef(handleSelectAll);
-    const handleRowCheckboxChangeRef = useLatestRef(handleRowCheckboxChange);
-    const rowIndexByRowIdRef = useLatestRef(rowIndexByRowId);
-    const handleHeaderMouseDownRef = useLatestRef(handleHeaderMouseDown);
-    const isReorderDraggingRef = useLatestRef(isReorderDragging);
-    const fluentColumns = useMemo(() => {
-        const dataCols = visibleCols.map((col, colIdx) => createTableColumn({
-            columnId: col.columnId,
-            compare: col.compare ?? (() => 0),
-            renderHeaderCell: () => (_jsx("div", { "data-column-id": col.columnId, style: columnReorder ? { cursor: isReorderDraggingRef.current ? 'grabbing' : 'grab' } : undefined, onMouseDown: columnReorder ? (e) => handleHeaderMouseDownRef.current(col.columnId, e) : undefined, children: _jsxs("div", { className: styles.headerCellContent, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInputRef.current) }), _jsx("button", { className: styles.headerMenuTrigger, onClick: (e) => {
-                                e.stopPropagation();
-                                pinning.headerMenu.open(col.columnId, e.currentTarget);
-                            }, "aria-label": "Column options", title: "Column options", children: "\u22EE" })] }) })),
-            renderCell: (item) => {
-                const rowId = getRowId(item);
-                const rowIndex = rowIndexByRowIdRef.current.get(rowId) ?? -1;
-                const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
-                let cellContent;
-                if (descriptor.mode === 'editing-inline') {
-                    cellContent = _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, { commitCellEdit: commitCellEditRef.current, setEditingCell: setEditingCellRef.current }) });
-                }
-                else if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
-                    const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, { setPendingEditorValue: setPendingEditorValueRef.current, commitCellEdit: commitCellEditRef.current, cancelPopoverEdit: cancelPopoverEditRef.current });
-                    const CustomEditor = col.cellEditor;
-                    cellContent = (_jsxs(_Fragment, { children: [_jsx("div", { ref: (el) => { if (el)
-                                    setPopoverAnchorEl(el); }, style: POPOVER_ANCHOR_STYLE, "aria-hidden": true }), _jsx(Popover, { open: !!popoverAnchorElRef.current, onOpenChange: (_, data) => { if (!data.open)
-                                    cancelPopoverEditRef.current(); }, positioning: { target: popoverAnchorElRef.current ?? undefined }, children: _jsx(PopoverSurface, { children: _jsx(CustomEditor, { ...editorProps }) }) })] }));
-                }
-                else {
-                    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}` : ''}`;
-                    const colType = col.type;
-                    const interactionProps = getCellInteractionProps(descriptor, col.columnId, { handleCellMouseDown: handleCellMouseDownRef.current, setActiveCell: setActiveCellRef.current, setEditingCell: setEditingCellRef.current, handleCellContextMenu: handleCellContextMenuRef.current });
-                    // Select stable style constant by type + editability
-                    const computedStyle = descriptor.canEditAny
-                        ? (colType === 'numeric' ? EDITABLE_NUMERIC_STYLE : colType === 'boolean' ? EDITABLE_BOOLEAN_STYLE : CURSOR_CELL_STYLE)
-                        : (colType === 'numeric' ? NUMERIC_STYLE : colType === 'boolean' ? BOOLEAN_STYLE : undefined);
-                    cellContent = (_jsxs("div", { className: cellClassNames, ...interactionProps, style: computedStyle, children: [styledContent, descriptor.canEditAny && descriptor.isSelectionEndCell && (_jsx("div", { className: styles.fillHandle, onMouseDown: (e) => handleFillHandleMouseDownRef.current(e), "aria-label": "Fill handle" }))] }));
-                }
-                return (_jsx(CellErrorBoundary, { onError: onCellError, children: cellContent }, `${rowId}-${col.columnId}`));
-            },
-        }));
-        if (hasCheckboxCol) {
-            const checkboxCol = createTableColumn({
-                columnId: '__selection__',
-                compare: () => 0,
-                renderHeaderCell: () => (_jsx("div", { className: styles.selectionHeaderCell, children: _jsx(Checkbox, { checked: allSelectedRef.current ? true : someSelectedRef.current ? 'mixed' : false, onChange: (_, data) => handleSelectAllRef.current(!!data.checked), "aria-label": "Select all rows" }) })),
-                renderCell: (item) => {
-                    const rowId = getRowId(item);
-                    const rowIndex = rowIndexByRowIdRef.current.get(rowId) ?? -1;
-                    const isChecked = selectedRowIdsRef.current.has(rowId);
-                    const ac = activeCellRef.current;
-                    const isActive = ac?.rowIndex === rowIndex && ac?.columnIndex === 0;
-                    return (_jsx("div", { className: `${styles.selectionCell} ${isActive ? styles.activeCellContent : ''}`, "data-row-index": rowIndex, "data-col-index": 0, onClick: (e) => {
-                            e.stopPropagation();
-                            setActiveCellRef.current({ rowIndex, columnIndex: 0 });
-                        }, children: _jsx(Checkbox, { checked: isChecked, onChange: (e, data) => {
-                                handleRowCheckboxChangeRef.current(rowId, !!data.checked, rowIndex, e.nativeEvent.shiftKey);
-                            }, "aria-label": `Select row ${rowIndex + 1}` }) }));
-                },
-            });
-            const cols = [checkboxCol];
-            if (hasRowNumbersCol) {
-                const rowNumberCol = createTableColumn({
-                    columnId: '__row_number__',
-                    compare: () => 0,
-                    renderHeaderCell: () => (_jsx("div", { className: styles.rowNumberHeaderCell, children: "#" })),
-                    renderCell: (item) => {
-                        const rowId = getRowId(item);
-                        const rowIndex = rowIndexByRowIdRef.current.get(rowId) ?? -1;
-                        return (_jsx("div", { className: styles.rowNumberCell, children: rowNumberOffset + rowIndex + 1 }));
-                    },
-                });
-                cols.push(rowNumberCol);
-            }
-            return [...cols, ...dataCols];
+        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(_Fragment, { children: [_jsx("div", { ref: (el) => { if (el)
+                            setPopoverAnchorEl(el); }, style: POPOVER_ANCHOR_STYLE, "aria-hidden": true }), _jsx(Popover, { open: !!popoverAnchorElRef.current, onOpenChange: (_, data) => { if (!data.open)
+                            cancelPopoverEdit(); }, positioning: { target: popoverAnchorElRef.current ?? undefined }, children: _jsx(PopoverSurface, { children: _jsx(CustomEditor, { ...editorProps }) }) })] }));
         }
-        if (hasRowNumbersCol) {
-            const rowNumberCol = createTableColumn({
-                columnId: '__row_number__',
-                compare: () => 0,
-                renderHeaderCell: () => (_jsx("div", { className: styles.rowNumberHeaderCell, children: "#" })),
-                renderCell: (item) => {
-                    const rowId = getRowId(item);
-                    const rowIndex = rowIndexByRowIdRef.current.get(rowId) ?? -1;
-                    return (_jsx("div", { className: styles.rowNumberCell, children: rowNumberOffset + rowIndex + 1 }));
-                },
-            });
-            return [rowNumberCol, ...dataCols];
+        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 dataCols;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visibleCols, hasCheckboxCol, hasRowNumbersCol, getRowId, setPopoverAnchorEl, columnReorder, rowNumberOffset]); // All volatile state/callbacks read via refs
-    // Stable row-click handler
-    const handleSingleRowClick = useCallback((rowId) => {
-        if (rowSelection !== 'single')
-            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 getRowId wrapper for Fluent DataGrid
-    const fluentGetRowId = useCallback((item) => String(getRowId(item)), [getRowId]);
-    // Double-click to auto-fit column width
-    useEffect(() => {
-        const root = wrapperRef.current;
-        if (!root)
-            return;
-        const onDblClick = (e) => {
-            const target = e.target;
-            if (!target)
-                return;
-            if (!target.closest('.fui-TableResizeHandle'))
-                return;
-            const headerCell = target.closest('[role="columnheader"]');
-            if (!headerCell)
-                return;
-            const colId = headerCell.querySelector('[data-column-id]')?.getAttribute('data-column-id');
-            if (!colId)
-                return;
-            const label = headerCell.querySelector('[data-header-label]');
-            const labelWidth = label ? label.scrollWidth : 0;
-            const EXTRA_PX = 44;
-            const MAX_PX = 520;
-            const colDef = flatColumns.find((c) => c.columnId === colId);
-            const minW = colDef?.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-            const desired = Math.min(MAX_PX, Math.max(minW, Math.ceil(labelWidth + EXTRA_PX)));
-            setColumnSizingOverrides((prev) => ({
-                ...prev,
-                [colId]: { widthPx: desired },
-            }));
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        root.addEventListener('dblclick', onDblClick, true);
-        return () => root.removeEventListener('dblclick', onDblClick, true);
-    }, [flatColumns, setColumnSizingOverrides]);
-    // Sync Fluent's internal resize state back to our React state so that
-    // re-renders (e.g. on cell click) don't reset column widths.
-    const handleColumnResize = useCallback((_e, data) => {
-        setColumnSizingOverrides((prev) => ({
-            ...prev,
-            [String(data.columnId)]: { widthPx: data.width },
-        }));
-    }, [setColumnSizingOverrides]);
-    return (_jsxs("div", { style: gridRootStyle, children: [_jsxs("div", { ref: wrapperRef, tabIndex: 0, className: `${styles.tableWrapper} ${rowSelection !== 'none' ? styles.selectableGrid : ''} ${styles[`density-${density}`] || ''}`, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, "data-empty": showEmptyInGrid ? 'true' : undefined, "data-auto-fit": layoutMode === 'fill' && !allowOverflowX ? '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, style: {
+        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 : ''} ${styles[`density-${density}`] || ''}`, 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%',
-                }, onKeyDown: handleGridKeyDown, 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: [virtualScrollEnabled && visibleRange.offsetTop > 0 && (_jsx("div", { style: { height: visibleRange.offsetTop }, "aria-hidden": true })), _jsxs(DataGrid, { items: virtualScrollEnabled ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1) : items, columns: fluentColumns, resizableColumns: true, resizableColumnsOptions: { autoFitColumns: layoutMode === 'fill' && !allowOverflowX }, columnSizingOptions: columnSizingOptions, onColumnResize: handleColumnResize, getRowId: fluentGetRowId, focusMode: "composite", className: styles.dataGrid, children: [_jsxs(DataGridHeader, { className: styles.stickyHeader, children: [hasGroupHeaders && headerRows.slice(0, -1).map((row, rowIdx) => (_jsxs("tr", { className: styles.groupHeaderRow, children: [rowIdx === 0 && hasCheckboxCol && (_jsx("th", { rowSpan: headerRows.length - 1, style: { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH } })), rowIdx === 0 && hasRowNumbersCol && (_jsx("th", { rowSpan: headerRows.length - 1, style: { width: ROW_NUMBER_COLUMN_WIDTH, minWidth: ROW_NUMBER_COLUMN_WIDTH } })), row.map((cell, cellIdx) => {
-                                                                if (cell.isGroup) {
-                                                                    return (_jsx("th", { colSpan: cell.colSpan, className: styles.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx));
-                                                                }
-                                                                return (_jsx("th", { rowSpan: headerRows.length - rowIdx, className: styles.leafHeaderCellSpan, scope: "col", children: cell.columnDef?.name }, cellIdx));
-                                                            })] }, `group-${rowIdx}`))), _jsx(DataGridRow, { children: ({ renderHeaderCell, columnId }) => {
-                                                            const isSorted = props.sortBy === String(columnId);
+                    ['--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, { role: "grid", className: styles.dataTable, children: [_jsx(TableHeader, { className: styles.stickyHeader, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableHeaderCell, { className: styles.selectionHeaderCellWrapper, children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox, { checked: allSelected ? true : someSelected ? 'mixed' : false, onChange: (_, data) => handleSelectAll(!!data.checked), "aria-label": "Select all rows" }) }) }, "__selection__")), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__")), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableHeaderCell, { className: styles.rowNumberHeaderCellWrapper, children: _jsx("div", { className: styles.rowNumberHeaderCellInner, children: "#" }) }, "__row_number__")), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (_jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__")), 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;
+                                                            // Determine aria-sort value for sorted columns
+                                                            const isSorted = props.sortBy === col.columnId;
                                                             const ariaSort = isSorted
                                                                 ? (props.sortDirection === 'asc' ? 'ascending' : 'descending')
                                                                 : undefined;
-                                                            return (_jsx(DataGridHeaderCell, { className: headerClassMap[String(columnId)] || undefined, "aria-sort": ariaSort, children: renderHeaderCell() }));
-                                                        } })] }), _jsx(DataGridBody, { children: ({ item }) => {
-                                                    const rowId = getRowId(item);
-                                                    const rowIndex = rowIndexByRowId.get(rowId) ?? -1;
-                                                    return (_jsx(GridRow, { item: item, rowId: rowId, rowIndex: rowIndex, isSelected: selectedRowIds.has(rowId), hasCheckboxCol: hasCheckboxCol, cellClassMap: cellClassMap, handleSingleRowClick: handleSingleRowClick, selectionRange: selectionRange, activeCell: activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowId));
-                                                } })] }), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx("div", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })), isReorderDragging && dropIndicatorX != null && (_jsx("div", { className: styles.dropIndicator, style: { left: dropIndicatorX - (wrapperRef.current?.getBoundingClientRect().left ?? 0) } })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset, items: items, visibleColumns: visibleColumns, columnSizingOverrides: columnSizingOverrides, columnOrder: columnOrder }), 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 ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body), createPortal(_jsx(ColumnHeaderMenu, { isOpen: pinning.headerMenu.isOpen, anchorElement: pinning.headerMenu.anchorElement, onClose: pinning.headerMenu.close, onPinLeft: pinning.headerMenu.handlePinLeft, onPinRight: pinning.headerMenu.handlePinRight, onUnpin: pinning.headerMenu.handleUnpin, onSortAsc: pinning.headerMenu.handleSortAsc, onSortDesc: pinning.headerMenu.handleSortDesc, onClearSort: pinning.headerMenu.handleClearSort, onAutosizeThis: pinning.headerMenu.handleAutosizeThis, onAutosizeAll: pinning.headerMenu.handleAutosizeAll, canPinLeft: pinning.headerMenu.canPinLeft, canPinRight: pinning.headerMenu.canPinRight, canUnpin: pinning.headerMenu.canUnpin, currentSort: pinning.headerMenu.currentSort, isSortable: pinning.headerMenu.isSortable, isResizable: pinning.headerMenu.isResizable }), 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(Spinner, { size: "small" }), _jsx("span", { className: styles.loadingOverlayText, children: loadingMessage })] }) }))] }));
+                                                            return (_jsxs(TableHeaderCell, { "data-column-id": col.columnId, 
+                                                                // rowSpan not supported by TableHeaderCell, use native th for grouped headers
+                                                                className: columnMeta.hdrClasses[col.columnId] || undefined, style: {
+                                                                    ...columnMeta.hdrStyles[col.columnId],
+                                                                    ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : undefined),
+                                                                }, "aria-sort": ariaSort, onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : undefined, children: [_jsxs("div", { className: styles.headerCellContent, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("button", { className: styles.headerMenuTrigger, onClick: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    headerMenu.open(col.columnId, e.currentTarget);
+                                                                                }, "aria-label": "Column options", title: "Column options", children: "\u22EE" })] }), _jsx("div", { className: styles.resizeHandle, onMouseDown: (e) => {
+                                                                            // Clear cell selection/focus before resize so green outlines
+                                                                            // and blue :focus-visible rings don't persist during drag.
+                                                                            setActiveCell(null);
+                                                                            interaction.setSelectionRange(null);
+                                                                            // Move DOM focus to wrapper so no cell keeps :focus-visible
+                                                                            wrapperRef.current?.focus({ preventScroll: true });
+                                                                            handleResizeStart(e, col);
+                                                                        }, "aria-label": `Resize ${col.name}` })] }, col.columnId));
+                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsxs(TableBody, { children: [virtualScrollEnabled && visibleRange.offsetTop > 0 && (_jsx("tr", { style: { height: visibleRange.offsetTop }, "aria-hidden": true })), (virtualScrollEnabled
+                                                        ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1).map((item, i) => {
+                                                            const rowIndex = visibleRange.startIndex + i;
+                                                            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, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
+                                                        })
+                                                        : 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, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
+                                                        })), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true }))] }))] }), isReorderDragging && dropIndicatorX != null && (_jsx(DropIndicator, { dropIndicatorX: dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset, items: items, visibleColumns: visibleColumns, columnSizingOverrides: columnSizingOverrides, columnOrder: columnOrder }), showEmptyInGrid && emptyState && (_jsx(EmptyState, { emptyState: emptyState }))] }) }) }), 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: o.interaction.handleSelectAllCells, onClose: closeContextMenu }), wrapperRef.current?.closest('.fui-FluentProvider') ?? document.body), _jsx(ColumnHeaderMenu, { isOpen: headerMenu.isOpen, anchorElement: headerMenu.anchorElement, onClose: headerMenu.close, onPinLeft: headerMenu.handlePinLeft, onPinRight: headerMenu.handlePinRight, onUnpin: headerMenu.handleUnpin, onSortAsc: headerMenu.handleSortAsc, onSortDesc: headerMenu.handleSortDesc, onClearSort: headerMenu.handleClearSort, onAutosizeThis: headerMenu.handleAutosizeThis, onAutosizeAll: headerMenu.handleAutosizeAll, canPinLeft: headerMenu.canPinLeft, canPinRight: headerMenu.canPinRight, canUnpin: headerMenu.canUnpin, currentSort: headerMenu.currentSort, isSortable: headerMenu.isSortable, isResizable: headerMenu.isResizable })] }), 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(LoadingOverlay, { message: loadingMessage }))] }));
 }
 export const DataGridTable = React.memo(DataGridTableInner);