@alaarab/ogrid-react-fluent 2.0.0-beta

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Spinner, Avatar } from '@fluentui/react-components';
+import { SearchRegular, FilterRegular } from '@fluentui/react-icons';
+import styles from './ColumnHeaderFilter.module.css';
+export const PeopleFilterPopover = ({ selectedUser, searchText, onSearchChange, suggestions, isLoading, onUserSelect, onClearUser, onPopoverClick, inputRef, }) => (_jsxs(_Fragment, { children: [selectedUser && (_jsxs("div", { className: styles.selectedUserSection, onClick: onPopoverClick, children: [_jsx("div", { className: styles.selectedUserLabel, children: "Currently filtered by:" }), _jsxs("div", { className: styles.selectedUser, children: [_jsxs("div", { className: styles.userInfo, children: [_jsx(Avatar, { name: selectedUser.displayName, image: { src: selectedUser.photo }, size: 32 }), _jsxs("div", { className: styles.userText, children: [_jsx("div", { children: selectedUser.displayName }), _jsx("div", { className: styles.userSecondary, children: selectedUser.email })] })] }), _jsx("button", { type: "button", className: styles.removeUserButton, onClick: onClearUser, "aria-label": "Remove filter", children: _jsx(FilterRegular, {}) })] })] })), _jsx("div", { className: styles.popoverSearch, onClick: onPopoverClick, children: _jsxs("div", { className: styles.nativeInputWrapper, children: [_jsx(SearchRegular, { className: styles.nativeInputIcon }), _jsx("input", { ref: inputRef, type: "text", placeholder: "Search for a person...", value: searchText, onChange: (e) => onSearchChange(e.target.value), onFocus: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", className: styles.nativeInput })] }) }), _jsx("div", { className: styles.popoverOptions, onClick: onPopoverClick, children: isLoading && searchText.trim() ? (_jsx("div", { className: styles.loadingContainer, children: _jsx(Spinner, { size: "small", label: "Searching..." }) })) : suggestions.length === 0 && searchText.trim() ? (_jsx("div", { className: styles.noResults, children: "No results found" })) : searchText.trim() ? (suggestions.map((user) => (_jsx("div", { className: styles.personOption, onClick: (e) => {
+                    e.stopPropagation();
+                    onUserSelect(user);
+                }, children: _jsxs("div", { className: styles.userInfo, children: [_jsx(Avatar, { name: user.displayName, image: { src: user.photo }, size: 32 }), _jsxs("div", { className: styles.userText, children: [_jsx("div", { children: user.displayName }), _jsx("div", { className: styles.userSecondary, children: user.email })] })] }) }, user.id ?? user.email ?? user.displayName)))) : (_jsx("div", { className: styles.noResults, children: "Type to search..." })) }), selectedUser && (_jsx("div", { className: styles.popoverActions, onClick: onPopoverClick, children: _jsx("button", { type: "button", className: styles.clearButton, onClick: onClearUser, children: "Clear Filter" }) }))] }));
+PeopleFilterPopover.displayName = 'PeopleFilterPopover';

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Input } from '@fluentui/react-components';
+import { SearchRegular } from '@fluentui/react-icons';
+import styles from './ColumnHeaderFilter.module.css';
+export const TextFilterPopover = ({ value, onValueChange, onApply, onClear, onPopoverClick, onInputFocus, onInputMouseDown, onInputClick, onInputKeyDown, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverSearch, onClick: onPopoverClick, children: _jsx(Input, { placeholder: "Enter search term...", value: value, onChange: (e, data) => onValueChange(data.value ?? ''), onKeyDown: (e) => {
+                    onInputKeyDown(e);
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        onApply();
+                    }
+                }, onFocus: onInputFocus, onMouseDown: onInputMouseDown, onClick: onInputClick, autoComplete: "off", className: styles.searchInput, contentBefore: _jsx(SearchRegular, {}) }) }), _jsxs("div", { className: styles.popoverActions, onClick: onPopoverClick, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: onClear, disabled: !value, children: "Clear" }), _jsx("button", { type: "button", className: styles.applyButton, onClick: onApply, children: "Apply" })] })] }));
+TextFilterPopover.displayName = 'TextFilterPopover';

package/dist/esm/ColumnHeaderFilter/index.js

@@ -0,0 +1 @@
+export { ColumnHeaderFilter } from './ColumnHeaderFilter';

package/dist/esm/DataGridTable/DataGridTable.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useMemo, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { DataGrid, DataGridHeader, DataGridRow, DataGridHeaderCell, DataGridBody, DataGridCell, createTableColumn, Spinner, Checkbox, Popover, PopoverSurface, } from '@fluentui/react-components';
+import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
+import { InlineCellEditor } from './InlineCellEditor';
+import { StatusBar } from './StatusBar';
+import { GridContextMenu } from './GridContextMenu';
+import { useDataGridState, useLatestRef, getHeaderFilterConfig, getCellRenderDescriptor, buildHeaderRows, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } 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 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 } = state;
+    const { flatColumns, visibleCols, totalColCount, hasCheckboxCol, 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, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    // Memoize header rows (recursive tree traversal)
+    const headerRows = useMemo(() => buildHeaderRows(props.columns, props.visibleColumns), [props.columns, props.visibleColumns]);
+    const hasGroupHeaders = headerRows.length > 1;
+    const fitToContent = layoutMode === 'content';
+    const columnSizingOptions = useMemo(() => {
+        const acc = {};
+        if (hasCheckboxCol) {
+            acc['__selection__'] = { minWidth: CHECKBOX_COLUMN_WIDTH, defaultWidth: CHECKBOX_COLUMN_WIDTH, idealWidth: CHECKBOX_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]);
+    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 im = new Map();
+        for (let i = 0; i < visibleCols.length; i++) {
+            const col = visibleCols[i];
+            const isFreezeCol = freezeCols != null && freezeCols >= 1 && i < freezeCols;
+            const isPinnedLeft = col.pinned === 'left';
+            const isPinnedRight = col.pinned === 'right';
+            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(' ');
+            im.set(col.columnId, i);
+        }
+        cm['__selection__'] = styles.selectionCellWrapper;
+        hm['__selection__'] = styles.selectionHeaderCellWrapper;
+        return { cellClassMap: cm, headerClassMap: hm, colIndexMap: im };
+    }, [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 fluentColumns = useMemo(() => {
+        const dataCols = visibleCols.map((col, colIdx) => createTableColumn({
+            columnId: col.columnId,
+            compare: col.compare ?? (() => 0),
+            renderHeaderCell: () => (_jsx("div", { "data-column-id": col.columnId, children: _jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInputRef.current) }) })),
+            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}` }) }));
+                },
+            });
+            return [checkboxCol, ...dataCols];
+        }
+        return dataCols;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visibleCols, hasCheckboxCol, getRowId, setPopoverAnchorEl]); // 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 : ''}`, 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: {
+                    ['--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: [_jsxs(DataGrid, { items: 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 } })), 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 }) => (_jsx(DataGridHeaderCell, { className: headerClassMap[String(columnId)] || undefined, children: renderHeaderCell() })) })] }), _jsx(DataGridBody, { children: ({ item }) => {
+                                                    const rowId = getRowId(item);
+                                                    return (_jsx(GridRow, { item: item, rowId: rowId, rowIndex: rowIndexByRowId.get(rowId) ?? -1, 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));
+                                                } })] }), _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 ?? 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(Spinner, { size: "small" }), _jsx("span", { className: styles.loadingOverlayText, children: loadingMessage })] }) }))] }));
+}
+export const DataGridTable = React.memo(DataGridTableInner);