@coreui/react-data-grid 0.1.0-rc.0

package/dist/esm/CDataGrid.mjs

@@ -0,0 +1,901 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { evaluateColumnFilter } from '@coreui/data-grid/filters';
+import { useReactTable, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getFacetedUniqueValues, getFacetedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { forwardRef, useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { clampActiveCell, resolveNavigation } from './active-cell.mjs';
+import { CDataGridBody } from './CDataGridBody.mjs';
+import { CDataGridCellEditor } from './CDataGridCellEditor.mjs';
+import { CDataGridHeader } from './CDataGridHeader.mjs';
+import { CDataGridPagination } from './CDataGridPagination.mjs';
+import { CDataGridToolbar } from './CDataGridToolbar.mjs';
+import { visibleColumns } from './columns.mjs';
+import { DEFAULT_COLUMN_MENU_ICON, DEFAULT_FILTER_ICON, DEFAULT_HIDE_COLUMN_ICON, DEFAULT_MOVE_LEFT_ICON, DEFAULT_MOVE_RIGHT_ICON, DEFAULT_PIN_LEFT_ICON, DEFAULT_PIN_RIGHT_ICON, DEFAULT_SORT_ASCENDING_ICON, DEFAULT_SORT_DESCENDING_ICON, DEFAULT_SORT_NEUTRAL_ICON, DEFAULT_TOOLBAR_COLUMNS_ICON, DEFAULT_TOOLBAR_EXPORT_ICON, DEFAULT_TOOLBAR_REDO_ICON, DEFAULT_TOOLBAR_UNDO_ICON, DEFAULT_UNPIN_ICON } from './icons.mjs';
+import { DEFAULT_LABELS, interpolate } from '@coreui/data-grid/labels';
+import { resolveToolbar } from './toolbar.mjs';
+import { createTooltip } from './tooltip.mjs';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
+const STATE_STORAGE_PREFIX = 'coreui-data-grid:';
+const HISTORY_LIMIT = 100;
+const readPersistedState = (stateKey) => {
+    if (!stateKey) {
+        return null;
+    }
+    try {
+        const raw = window.localStorage.getItem(`${STATE_STORAGE_PREFIX}${stateKey}`);
+        return raw ? JSON.parse(raw) : null;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const FETCH_DEBOUNCE_MS = 100;
+// Module-level so an omitted `items` prop keeps a stable identity - a fresh
+// array per render would force TanStack to recompute row models every time.
+const EMPTY_ITEMS = [];
+const toTanStackFilterFn = (column) => {
+    const { filterFn } = column;
+    if (filterFn) {
+        return (row, columnId, filterValue) => filterFn(row.getValue(columnId), filterValue, row.original);
+    }
+    return (row, columnId, filterValue) => evaluateColumnFilter(row.getValue(columnId), filterValue, column.filterType);
+};
+const CDataGrid = forwardRef((props, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const { cellNavigation = false, className, columnFilters = false, columnMenu = false, columnMenuIcon = DEFAULT_COLUMN_MENU_ICON, columnOrder = false, columnPinning = false, columnSizing = false, columnVisibility = false, columns, dataProvider, editing = false, empty = 'No items found', filterIcon = DEFAULT_FILTER_ICON, globalFilter = false, hideColumnIcon = DEFAULT_HIDE_COLUMN_ICON, history = false, itemKey, items = EMPTY_ITEMS, labels, moveLeftIcon = DEFAULT_MOVE_LEFT_ICON, moveRightIcon = DEFAULT_MOVE_RIGHT_ICON, onDataError, onDataLoad, onEditCancel, onEditCommit, onEditStart, onFilterChange, onOrderChange, onPaginationChange, onPinningChange, onSelectionChange, onSizingChange, onSortingChange, onVisibilityChange, overscan = 10, pagination = false, pinLeftIcon = DEFAULT_PIN_LEFT_ICON, pinRightIcon = DEFAULT_PIN_RIGHT_ICON, rowHeight = 44, rowSelection = false, slots, sortAscendingIcon = DEFAULT_SORT_ASCENDING_ICON, sortDescendingIcon = DEFAULT_SORT_DESCENDING_ICON, sortNeutralIcon = DEFAULT_SORT_NEUTRAL_ICON, sorterVisibility, sorting = true, stateKey, tableRef, toolbar = false, toolbarColumnsIcon = DEFAULT_TOOLBAR_COLUMNS_ICON, toolbarExportIcon = DEFAULT_TOOLBAR_EXPORT_ICON, toolbarRedoIcon = DEFAULT_TOOLBAR_REDO_ICON, toolbarUndoIcon = DEFAULT_TOOLBAR_UNDO_ICON, unpinIcon = DEFAULT_UNPIN_ICON, virtualization = true, ...rest } = props;
+    const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+    const menuIcons = useMemo(() => ({
+        columnMenu: columnMenuIcon,
+        filter: filterIcon,
+        hideColumn: hideColumnIcon,
+        moveLeft: moveLeftIcon,
+        moveRight: moveRightIcon,
+        pinLeft: pinLeftIcon,
+        pinRight: pinRightIcon,
+        sortAscending: sortAscendingIcon,
+        sortDescending: sortDescendingIcon,
+        sortNeutral: sortNeutralIcon,
+        unpin: unpinIcon
+    }), [
+        columnMenuIcon,
+        filterIcon,
+        hideColumnIcon,
+        moveLeftIcon,
+        moveRightIcon,
+        pinLeftIcon,
+        pinRightIcon,
+        sortAscendingIcon,
+        sortDescendingIcon,
+        sortNeutralIcon,
+        unpinIcon
+    ]);
+    const menuBuilder = typeof columnMenu === 'function' ? columnMenu : null;
+    // Editing needs the active-cell substrate (Enter/F2 target the active cell).
+    const cellNavigationEnabled = cellNavigation || editing;
+    const sortingOptions = typeof sorting === 'object' ? sorting : {};
+    const sizingEnabled = Boolean(columnSizing);
+    const sizingOptions = typeof columnSizing === 'object' ? columnSizing : {};
+    const pinningEnabled = Boolean(columnPinning);
+    const widthsEnabled = sizingEnabled || pinningEnabled;
+    const selectionEnabled = Boolean(rowSelection);
+    const selectionOptions = typeof rowSelection === 'object' ? rowSelection : {};
+    const serverSide = Boolean(dataProvider);
+    // Server-side mode implies pagination — virtualized infinite scroll over a
+    // dataProvider is out of scope until 0.3.0.
+    const paginationEnabled = Boolean(pagination) || serverSide;
+    const paginationOptions = typeof pagination === 'object' ? pagination : {};
+    const virtualizationEnabled = virtualization && !paginationEnabled;
+    const resolvedToolbar = resolveToolbar({
+        columnVisibility: Boolean(columnVisibility),
+        globalFilter,
+        history,
+        toolbar
+    });
+    const isColumnSortable = (column) => Boolean(sorting) && column.sortable !== false;
+    const isColumnFilterable = (column) => columnFilters && column.filterable !== false;
+    const isColumnResizable = (column) => sizingEnabled && column.resizable !== false;
+    // A persisted view (stateKey) seeds the initial state - read once.
+    const persistedStateRef = useRef(undefined);
+    if (persistedStateRef.current === undefined) {
+        persistedStateRef.current = readPersistedState(stateKey);
+    }
+    const persisted = persistedStateRef.current;
+    const [sortingState, setSortingState] = useState((_a = persisted === null || persisted === void 0 ? void 0 : persisted.sorting) !== null && _a !== void 0 ? _a : []);
+    const [columnFiltersState, setColumnFiltersState] = useState((_b = persisted === null || persisted === void 0 ? void 0 : persisted.columnFilters) !== null && _b !== void 0 ? _b : []);
+    const [globalFilterState, setGlobalFilterState] = useState((persisted === null || persisted === void 0 ? void 0 : persisted.globalFilter) === undefined || persisted.globalFilter === '' ? undefined : persisted.globalFilter);
+    const [rowSelectionState, setRowSelectionState] = useState((_c = persisted === null || persisted === void 0 ? void 0 : persisted.rowSelection) !== null && _c !== void 0 ? _c : {});
+    const [columnSizingState, setColumnSizingState] = useState((_d = persisted === null || persisted === void 0 ? void 0 : persisted.columnSizing) !== null && _d !== void 0 ? _d : {});
+    const [columnPinningState, setColumnPinningState] = useState((_e = persisted === null || persisted === void 0 ? void 0 : persisted.columnPinning) !== null && _e !== void 0 ? _e : (typeof columnPinning === 'object' ? columnPinning : {}));
+    const [columnOrderState, setColumnOrderState] = useState((_f = persisted === null || persisted === void 0 ? void 0 : persisted.columnOrder) !== null && _f !== void 0 ? _f : (Array.isArray(columnOrder) ? columnOrder : []));
+    const [columnVisibilityState, setColumnVisibilityState] = useState((_g = persisted === null || persisted === void 0 ? void 0 : persisted.columnVisibility) !== null && _g !== void 0 ? _g : (typeof columnVisibility === 'object' ? columnVisibility : {}));
+    // The chooser's Reset restores the initial columnVisibility object, captured
+    // once (initial-value-only, like the state seed above).
+    const initialColumnVisibility = useRef(typeof columnVisibility === 'object' ? columnVisibility : {});
+    const [paginationState, setPaginationState] = useState({
+        pageIndex: (_j = (_h = persisted === null || persisted === void 0 ? void 0 : persisted.pagination) === null || _h === void 0 ? void 0 : _h.pageIndex) !== null && _j !== void 0 ? _j : 0,
+        pageSize: (_m = (_l = (_k = persisted === null || persisted === void 0 ? void 0 : persisted.pagination) === null || _k === void 0 ? void 0 : _k.pageSize) !== null && _l !== void 0 ? _l : paginationOptions.pageSize) !== null && _m !== void 0 ? _m : 10
+    });
+    const [activeCell, setActiveCell] = useState(null);
+    // A pending focus request survives renders until the target cell exists in
+    // the DOM (the body's focus pass consumes it) - focus is derived from
+    // state, never from what the recycler left behind.
+    const focusRequestRef = useRef(null);
+    const containsFocusRef = useRef(false);
+    const scrollToIndexRef = useRef(null);
+    // The ref mirrors the state so keydown/pointerdown handlers stay
+    // synchronous (start-then-stop in one handler must not race renders).
+    const [editingCell, setEditingCellState] = useState(null);
+    const editingCellRef = useRef(null);
+    const setEditingCell = (next) => {
+        editingCellRef.current = next;
+        setEditingCellState(next);
+    };
+    const [editorInvalid, setEditorInvalid] = useState(null);
+    const [editorPopupStyle, setEditorPopupStyle] = useState(null);
+    const editorHandleRef = useRef(null);
+    // The draft survives the editor's unmount (a recycled editing row) so the
+    // scroll-away commit still carries the value.
+    const editorDraftRef = useRef(null);
+    const editorFocusPendingRef = useRef(false);
+    const registerEditorHandle = (handle) => {
+        var _a;
+        if (handle === null && ((_a = editorHandleRef.current) === null || _a === void 0 ? void 0 : _a.getValue) && editingCellRef.current) {
+            editorDraftRef.current = { value: editorHandleRef.current.getValue() };
+        }
+        editorHandleRef.current = handle;
+        if (handle !== null) {
+            editorDraftRef.current = null;
+        }
+    };
+    const [serverItems, setServerItems] = useState([]);
+    const [serverTotalRows, setServerTotalRows] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [loadFailed, setLoadFailed] = useState(false);
+    const [announcement, setAnnouncement] = useState('');
+    const columnDefs = useMemo(() => columns.map(column => {
+        var _a;
+        const size = (_a = column.width) !== null && _a !== void 0 ? _a : null;
+        return {
+            accessorKey: column.key,
+            enableColumnFilter: column.filterable !== false,
+            enableHiding: column.hideable !== false,
+            enableResizing: column.resizable !== false,
+            enableSorting: column.sortable !== false,
+            filterFn: toTanStackFilterFn(column),
+            id: column.key,
+            meta: { label: column.label, formatter: column.formatter },
+            ...(widthsEnabled && size !== null && { size })
+        };
+    }), [columns, widthsEnabled]);
+    const table = useReactTable({
+        columns: columnDefs,
+        columnResizeMode: (_o = sizingOptions.mode) !== null && _o !== void 0 ? _o : 'onChange',
+        data: serverSide ? serverItems : items,
+        enableColumnFilters: columnFilters,
+        enableColumnPinning: pinningEnabled,
+        enableColumnResizing: sizingEnabled,
+        enableGlobalFilter: resolvedToolbar.search,
+        enableHiding: Boolean(columnVisibility),
+        enableMultiSort: sortingOptions.multiple !== false,
+        enableRowSelection: selectionEnabled,
+        enableSorting: Boolean(sorting),
+        enableSortingRemoval: Boolean(sortingOptions.resetable),
+        getCoreRowModel: getCoreRowModel(),
+        // Faceting powers custom filter UIs (column.getFacetedUniqueValues()).
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        globalFilterFn: 'includesString',
+        ...(serverSide && {
+            manualFiltering: true,
+            manualPagination: true,
+            manualSorting: true,
+            rowCount: serverTotalRows
+        }),
+        ...(paginationEnabled && { getPaginationRowModel: getPaginationRowModel() }),
+        ...(itemKey && { getRowId: itemKey }),
+        onColumnFiltersChange: setColumnFiltersState,
+        onColumnOrderChange: setColumnOrderState,
+        onColumnPinningChange: setColumnPinningState,
+        onColumnSizingChange: setColumnSizingState,
+        onColumnVisibilityChange: setColumnVisibilityState,
+        onGlobalFilterChange: setGlobalFilterState,
+        onPaginationChange: setPaginationState,
+        onRowSelectionChange: setRowSelectionState,
+        onSortingChange: setSortingState,
+        state: {
+            columnFilters: columnFiltersState,
+            columnOrder: columnOrderState,
+            columnPinning: columnPinningState,
+            columnSizing: columnSizingState,
+            columnVisibility: columnVisibilityState,
+            globalFilter: globalFilterState,
+            pagination: paginationState,
+            rowSelection: rowSelectionState,
+            sorting: sortingState
+        }
+    });
+    const rootRef = useRef(null);
+    // Stable across renders - an inline callback ref would be detached/reattached
+    // (null, node) on every render, hammering consumer callback refs.
+    const setRootRef = useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // The viewport element travels to the body as STATE, not a ref - the body's
+    // virtualizer reads it in a layout effect that runs before an ancestor ref
+    // would be attached, so a plain ref would still be null there on mount.
+    const [viewportElement, setViewportElement] = useState(null);
+    useEffect(() => {
+        if (!tableRef) {
+            return;
+        }
+        if (typeof tableRef === 'function') {
+            tableRef(table);
+            return () => {
+                tableRef(null);
+            };
+        }
+        tableRef.current = table;
+        return () => {
+            tableRef.current = null;
+        };
+    }, [table, tableRef]);
+    useEffect(() => {
+        if (!rootRef.current) {
+            return;
+        }
+        const tooltip = createTooltip(rootRef.current);
+        return () => tooltip.dispose();
+    }, []);
+    const requestIdRef = useRef(0);
+    const lastFilterKeyRef = useRef(null);
+    useEffect(() => {
+        if (!dataProvider) {
+            return;
+        }
+        const filterKey = JSON.stringify([sortingState, columnFiltersState, globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '']);
+        const filtersChanged = lastFilterKeyRef.current !== null && lastFilterKeyRef.current !== filterKey;
+        lastFilterKeyRef.current = filterKey;
+        if (filtersChanged && paginationState.pageIndex !== 0) {
+            // Back to page one first; the pagination change re-runs this effect and
+            // fetches exactly once.
+            setPaginationState(previous => ({ ...previous, pageIndex: 0 }));
+            return;
+        }
+        const id = ++requestIdRef.current;
+        const timeout = setTimeout(async () => {
+            setLoading(true);
+            try {
+                const response = await dataProvider({
+                    columnFilters: columnFiltersState,
+                    globalFilter: globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '',
+                    pagination: paginationState,
+                    sorting: sortingState
+                });
+                if (id !== requestIdRef.current) {
+                    return;
+                }
+                setServerItems(response.items);
+                setServerTotalRows(response.totalRows);
+                setLoadFailed(false);
+                setAnnouncement(interpolate(mergedLabels.resultsAnnouncement, { count: response.totalRows }));
+                onDataLoad === null || onDataLoad === void 0 ? void 0 : onDataLoad(response);
+            }
+            catch (error) {
+                if (id !== requestIdRef.current) {
+                    return;
+                }
+                setServerItems([]);
+                setServerTotalRows(0);
+                setLoadFailed(true);
+                onDataError === null || onDataError === void 0 ? void 0 : onDataError(error);
+            }
+            finally {
+                if (id === requestIdRef.current) {
+                    setLoading(false);
+                }
+            }
+        }, FETCH_DEBOUNCE_MS);
+        return () => clearTimeout(timeout);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dataProvider, sortingState, columnFiltersState, globalFilterState, paginationState]);
+    const mounted = useRef(false);
+    const totalRows = serverSide ? serverTotalRows : table.getFilteredRowModel().rows.length;
+    useEffect(() => {
+        if (mounted.current) {
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(sortingState);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sortingState]);
+    useEffect(() => {
+        if (mounted.current) {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(columnFiltersState, globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columnFiltersState, globalFilterState]);
+    useEffect(() => {
+        if (mounted.current) {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(rowSelectionState, table.getSelectedRowModel().rows.map(row => row.original));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowSelectionState]);
+    useEffect(() => {
+        if (mounted.current) {
+            onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(paginationState);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [paginationState]);
+    useEffect(() => {
+        if (mounted.current) {
+            onSizingChange === null || onSizingChange === void 0 ? void 0 : onSizingChange(columnSizingState);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columnSizingState]);
+    useEffect(() => {
+        if (mounted.current) {
+            onPinningChange === null || onPinningChange === void 0 ? void 0 : onPinningChange(columnPinningState);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columnPinningState]);
+    useEffect(() => {
+        if (mounted.current) {
+            onOrderChange === null || onOrderChange === void 0 ? void 0 : onOrderChange(columnOrderState);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columnOrderState]);
+    useEffect(() => {
+        if (mounted.current) {
+            onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(columnVisibilityState);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columnVisibilityState]);
+    useEffect(() => {
+        if (mounted.current && !serverSide) {
+            setAnnouncement(interpolate(mergedLabels.resultsAnnouncement, { count: totalRows }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columnFiltersState, globalFilterState]);
+    // Pagination joins by VALUE: a data replacement makes TanStack auto-reset
+    // the page index, which replaces the state object without changing it -
+    // identity alone would kill an edit right after its onEditCommit handler
+    // applied the change.
+    const rowSetSignatureRef = useRef(null);
+    useEffect(() => {
+        // The active cell indexes into the current row set; any transition that
+        // reshuffles rows would make it point at an arbitrary one. An in-flight
+        // edit stops (commit) first. A pending focus request marks an intentional
+        // navigation (PageUp/PageDown page flip) - keep the cell it just set.
+        const signature = JSON.stringify([
+            sortingState, columnFiltersState,
+            globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '',
+            paginationState.pageIndex, paginationState.pageSize
+        ]);
+        if (rowSetSignatureRef.current === signature) {
+            return;
+        }
+        rowSetSignatureRef.current = signature;
+        if (mounted.current) {
+            stopEditingRef.current({ commit: true, force: true });
+            if (!focusRequestRef.current) {
+                setActiveCell(null);
+            }
+        }
+    }, [sortingState, columnFiltersState, globalFilterState, paginationState]);
+    useEffect(() => {
+        mounted.current = true;
+        // Reset on unmount, or StrictMode's mount-unmount-remount cycle would fire
+        // every change callback once with the initial state.
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    const hasCustomFilterRow = columnFilters && columns.some(column => column.filter && column.filterable !== false);
+    const headerRowCount = hasCustomFilterRow ? 2 : 1;
+    const position = (_p = paginationOptions.position) !== null && _p !== void 0 ? _p : 'bottom';
+    const rowCount = table.getRowModel().rows.length;
+    const visibleColumnIds = visibleColumns(table, columns).map(column => column.key);
+    const activeCellContext = () => {
+        var _a;
+        return ({
+            columnIds: visibleColumnIds,
+            rowCount,
+            pageStep: paginationEnabled ?
+                paginationState.pageSize :
+                Math.max(1, Math.floor(((_a = viewportElement === null || viewportElement === void 0 ? void 0 : viewportElement.clientHeight) !== null && _a !== void 0 ? _a : 0) / rowHeight) || rowCount),
+            paginated: paginationEnabled
+        });
+    };
+    // Clamped for rendering only - the state stays as set and re-clamps as the
+    // column set or row count changes.
+    const effectiveActiveCell = cellNavigationEnabled ? clampActiveCell(activeCell, activeCellContext()) : null;
+    // With no active cell yet, the first data cell (or first header cell in an
+    // empty grid) is the grid's single tab stop.
+    const tabStop = cellNavigationEnabled ?
+        effectiveActiveCell !== null && effectiveActiveCell !== void 0 ? effectiveActiveCell : (visibleColumnIds.length > 0 ?
+            { rowIndex: rowCount > 0 ? 0 : -1, columnId: visibleColumnIds[0] } :
+            null) :
+        null;
+    // Maps an event target to the navigable cell that holds it: a data cell
+    // (rowIndex from data-coreui-index) or a header label-row cell (rowIndex
+    // -1). Selection cells, the filter row, and grid chrome map to null.
+    const navigableCellFromTarget = (target) => {
+        const cellElement = target.closest('td, th');
+        const tableElement = viewportElement === null || viewportElement === void 0 ? void 0 : viewportElement.querySelector('table');
+        if (!cellElement || !(tableElement === null || tableElement === void 0 ? void 0 : tableElement.contains(cellElement))) {
+            return null;
+        }
+        const columnId = cellElement.dataset.coreuiColumn;
+        if (!columnId) {
+            return null;
+        }
+        const rowElement = cellElement.closest('tr');
+        if (rowElement.closest('tbody')) {
+            const index = rowElement.dataset.coreuiIndex;
+            if (index === undefined) {
+                return null;
+            }
+            return { cellElement, cell: { rowIndex: Number(index), columnId } };
+        }
+        const headerElement = rowElement.closest('thead');
+        if (headerElement && rowElement === headerElement.querySelector('tr')) {
+            return { cellElement, cell: { rowIndex: -1, columnId } };
+        }
+        return null;
+    };
+    const requestActiveCell = (cell) => {
+        var _a;
+        focusRequestRef.current = cell;
+        setActiveCell(cell);
+        if (virtualizationEnabled && cell.rowIndex >= 0) {
+            // No-op when the row is already in view (align: auto); otherwise the
+            // focus request stays pending until the row renders.
+            (_a = scrollToIndexRef.current) === null || _a === void 0 ? void 0 : _a.call(scrollToIndexRef, cell.rowIndex);
+        }
+    };
+    const isColumnEditable = (column) => 
+    // Opt-IN, unlike the opt-out feature booleans - editing is invasive. A
+    // custom editor is itself the opt-in.
+    editing && (Boolean(column.editor) || column.editable === true || typeof column.editable === 'object');
+    const editingCellElement = (session) => {
+        var _a;
+        return (_a = viewportElement === null || viewportElement === void 0 ? void 0 : viewportElement.querySelector(`tbody tr[data-coreui-index="${session.rowIndex}"] td[data-coreui-column="${session.columnId}"]`)) !== null && _a !== void 0 ? _a : null;
+    };
+    // The edit scope: the editing cell, its popup layer, and anything the
+    // editor claims via contains() (portaled overlays).
+    const editScopeContains = (target) => {
+        var _a, _b, _c, _d, _e;
+        const session = editingCellRef.current;
+        if (!target || !session) {
+            return false;
+        }
+        if ((_b = (_a = editorHandleRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, target)) {
+            return true;
+        }
+        if ((_d = (_c = rootRef.current) === null || _c === void 0 ? void 0 : _c.querySelector('.data-grid-editor-popup')) === null || _d === void 0 ? void 0 : _d.contains(target)) {
+            return true;
+        }
+        return Boolean((_e = editingCellElement(session)) === null || _e === void 0 ? void 0 : _e.contains(target));
+    };
+    const finishEdit = (session) => {
+        editorHandleRef.current = null;
+        setEditingCell(null);
+        setEditorInvalid(null);
+        setEditorPopupStyle(null);
+        const cell = { rowIndex: session.rowIndex, columnId: session.columnId };
+        focusRequestRef.current = cell;
+        setActiveCell(cell);
+    };
+    const commitEdit = (value) => {
+        var _a;
+        const session = editingCellRef.current;
+        if (!session) {
+            return;
+        }
+        const validate = (_a = columns.find(column => column.key === session.columnId)) === null || _a === void 0 ? void 0 : _a.editValidate;
+        if (validate) {
+            const result = validate(value, session.item);
+            if (result !== true) {
+                setEditorInvalid(typeof result === 'string' ? result : '');
+                return;
+            }
+        }
+        finishEdit(session);
+        if (history) {
+            undoStackRef.current.push({
+                rowId: session.rowId, columnId: session.columnId, value, previousValue: session.previousValue
+            });
+            if (undoStackRef.current.length > HISTORY_LIMIT) {
+                undoStackRef.current.shift();
+            }
+            redoStackRef.current = [];
+            syncHistoryFlags();
+        }
+        // The grid never mutates items - the app applies the change and stays
+        // the single source of truth.
+        onEditCommit === null || onEditCommit === void 0 ? void 0 : onEditCommit({
+            item: session.item,
+            columnId: session.columnId,
+            value,
+            previousValue: session.previousValue
+        });
+    };
+    const cancelEdit = () => {
+        const session = editingCellRef.current;
+        if (!session) {
+            return;
+        }
+        finishEdit(session);
+        onEditCancel === null || onEditCancel === void 0 ? void 0 : onEditCancel(session.item, session.columnId);
+    };
+    const stopEditing = (options) => {
+        var _a;
+        const session = editingCellRef.current;
+        if (!session) {
+            return;
+        }
+        const getValue = (_a = editorHandleRef.current) === null || _a === void 0 ? void 0 : _a.getValue;
+        if (options.commit && (getValue || editorDraftRef.current)) {
+            commitEdit(getValue ? getValue() : editorDraftRef.current.value);
+            // An invalid value blocks the commit; when the edit cannot survive
+            // anyway (row recycled away, row set changed), drop the draft.
+            if (editingCellRef.current && options.force) {
+                cancelEdit();
+            }
+            return;
+        }
+        // A custom editor without getValue owns its commits - stopping from the
+        // outside can only cancel.
+        cancelEdit();
+    };
+    const stopEditingRef = useRef(stopEditing);
+    stopEditingRef.current = stopEditing;
+    const startEditing = (cell) => {
+        var _a;
+        const config = columns.find(column => column.key === cell.columnId);
+        if (!config || !isColumnEditable(config)) {
+            return;
+        }
+        stopEditing({ commit: true, force: true });
+        const row = table.getRowModel().rows[cell.rowIndex];
+        if (!row) {
+            return;
+        }
+        const session = {
+            rowId: row.id,
+            columnId: cell.columnId,
+            rowIndex: cell.rowIndex,
+            item: row.original,
+            previousValue: row.getValue(cell.columnId)
+        };
+        if (config.editorPopup) {
+            const cellElement = editingCellElement(session);
+            const rootRect = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const cellRect = cellElement === null || cellElement === void 0 ? void 0 : cellElement.getBoundingClientRect();
+            setEditorPopupStyle(cellRect && rootRect ?
+                { top: cellRect.top - rootRect.top, left: cellRect.left - rootRect.left, minWidth: cellRect.width } :
+                { top: 0, left: 0, minWidth: 0 });
+        }
+        editorFocusPendingRef.current = true;
+        setEditorInvalid(null);
+        setEditingCell(session);
+        onEditStart === null || onEditStart === void 0 ? void 0 : onEditStart(row.original, cell.columnId);
+    };
+    const moveEditing = (direction) => {
+        const session = editingCellRef.current;
+        if (!session) {
+            return;
+        }
+        const visible = visibleColumns(table, columns);
+        const currentIndex = visible.findIndex(column => column.key === session.columnId);
+        let next = null;
+        for (let index = currentIndex + direction; index >= 0 && index < visible.length; index += direction) {
+            if (isColumnEditable(visible[index])) {
+                next = visible[index];
+                break;
+            }
+        }
+        stopEditing({ commit: true });
+        if (editingCellRef.current) {
+            // An invalid value blocked the commit - stay.
+            return;
+        }
+        if (next) {
+            const cell = { rowIndex: session.rowIndex, columnId: next.key };
+            requestActiveCell(cell);
+            startEditing(cell);
+        }
+    };
+    const snapshotState = () => ({
+        columnFilters: columnFiltersState,
+        columnOrder: columnOrderState,
+        columnPinning: columnPinningState,
+        columnSizing: columnSizingState,
+        columnVisibility: columnVisibilityState,
+        globalFilter: globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '',
+        pagination: paginationState,
+        rowSelection: rowSelectionState,
+        sorting: sortingState
+    });
+    // stateKey persistence is automatic - every state change (debounced)
+    // rewrites the snapshot, so the view survives a reload.
+    const persistTimeoutRef = useRef(undefined);
+    useEffect(() => {
+        if (!stateKey || !mounted.current) {
+            return;
+        }
+        clearTimeout(persistTimeoutRef.current);
+        persistTimeoutRef.current = setTimeout(() => {
+            try {
+                window.localStorage.setItem(`${STATE_STORAGE_PREFIX}${stateKey}`, JSON.stringify(snapshotState()));
+            }
+            catch (_a) {
+                // Quota/privacy-mode failures degrade to a non-persistent grid.
+            }
+        }, 250);
+        return () => clearTimeout(persistTimeoutRef.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        sortingState,
+        columnFiltersState,
+        globalFilterState,
+        columnOrderState,
+        columnPinningState,
+        columnSizingState,
+        columnVisibilityState,
+        paginationState,
+        rowSelectionState,
+        stateKey
+    ]);
+    // Undo/redo of edit commits. Entries hold the ROW ID, not the item
+    // reference - an immutable app replaces the object on every commit, so
+    // undo/redo resolve the current item at emit time.
+    const undoStackRef = useRef([]);
+    const redoStackRef = useRef([]);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const syncHistoryFlags = () => {
+        setCanUndo(undoStackRef.current.length > 0);
+        setCanRedo(redoStackRef.current.length > 0);
+    };
+    const applyHistoryEntry = (from, to, inverted) => {
+        const entry = from.pop();
+        if (!entry) {
+            return;
+        }
+        // The row may be gone (data replaced without it) - drop the entry.
+        const row = table.getCoreRowModel().rowsById[entry.rowId];
+        if (!row) {
+            syncHistoryFlags();
+            return;
+        }
+        to.push(entry);
+        onEditCommit === null || onEditCommit === void 0 ? void 0 : onEditCommit({
+            item: row.original,
+            columnId: entry.columnId,
+            value: inverted ? entry.previousValue : entry.value,
+            previousValue: inverted ? entry.value : entry.previousValue
+        });
+        setAnnouncement(inverted ? mergedLabels.undoneAnnouncement : mergedLabels.redoneAnnouncement);
+        syncHistoryFlags();
+    };
+    const undo = () => applyHistoryEntry(undoStackRef.current, redoStackRef.current, true);
+    const redo = () => applyHistoryEntry(redoStackRef.current, undoStackRef.current, false);
+    // Commit on pointerdown outside the edit scope - blur alone cannot commit,
+    // picking a date in a calendar blurs the input mid-edit.
+    useEffect(() => {
+        if (!editingCell) {
+            return;
+        }
+        const handler = (event) => {
+            if (!editScopeContains(event.target)) {
+                stopEditingRef.current({ commit: true });
+            }
+        };
+        document.addEventListener('pointerdown', handler);
+        return () => document.removeEventListener('pointerdown', handler);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editingCell]);
+    // The editor mounts during the body render - focus it right after (the
+    // child effect registering the handle runs before this one).
+    useEffect(() => {
+        var _a, _b;
+        if (editingCell && editorFocusPendingRef.current) {
+            editorFocusPendingRef.current = false;
+            (_b = (_a = editorHandleRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+    }, [editingCell]);
+    const handleEditingDoubleClick = (event) => {
+        if (!editing) {
+            return;
+        }
+        const found = navigableCellFromTarget(event.target);
+        if (found && found.cell.rowIndex >= 0) {
+            setActiveCell(found.cell);
+            startEditing(found.cell);
+        }
+    };
+    const handleNavigationFocus = (event) => {
+        containsFocusRef.current = true;
+        if (!cellNavigationEnabled) {
+            return;
+        }
+        const found = navigableCellFromTarget(event.target);
+        if (found) {
+            // The browser already moved focus (click, descend) - only sync state.
+            setActiveCell(found.cell);
+        }
+    };
+    const handleNavigationBlur = (event) => {
+        var _a;
+        const related = event.relatedTarget;
+        if (!related || !((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(related))) {
+            containsFocusRef.current = false;
+        }
+    };
+    const handleNavigationKeydown = (event) => {
+        var _a, _b, _c, _d;
+        if (!cellNavigationEnabled) {
+            return;
+        }
+        const target = event.target;
+        // Ctrl/Cmd+Z / Ctrl+Shift+Z / Ctrl+Y - edit history (MUI/AG parity).
+        if (history &&
+            (event.ctrlKey || event.metaKey) &&
+            !editingCellRef.current &&
+            !target.matches('input, textarea, select')) {
+            const key = event.key.toLowerCase();
+            if (key === 'z' && !event.shiftKey) {
+                event.preventDefault();
+                undo();
+                return;
+            }
+            if ((key === 'z' && event.shiftKey) || key === 'y') {
+                event.preventDefault();
+                redo();
+                return;
+            }
+        }
+        if (editingCellRef.current && editScopeContains(target)) {
+            // A defaultPrevented key was consumed by the editor (a rich editor
+            // closing its own overlay on Escape, an autocomplete accepting on
+            // Enter) - one key, one layer.
+            if (event.key === 'Enter') {
+                if (!event.defaultPrevented) {
+                    event.preventDefault();
+                    stopEditing({ commit: true });
+                }
+                return;
+            }
+            if (event.key === 'Escape') {
+                if (!event.defaultPrevented) {
+                    cancelEdit();
+                }
+                return;
+            }
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                moveEditing(event.shiftKey ? -1 : 1);
+                return;
+            }
+            // Everything else (arrows, typing) stays native inside the editor.
+            return;
+        }
+        // Focus fell back to the viewport after the active row was recycled out
+        // of the window: any navigation key scrolls the active cell back in view
+        // and refocuses it.
+        if (target === viewportElement) {
+            if (effectiveActiveCell && event.key !== 'Tab') {
+                event.preventDefault();
+                requestActiveCell(effectiveActiveCell);
+            }
+            return;
+        }
+        const found = navigableCellFromTarget(target);
+        if (!found) {
+            return;
+        }
+        if (target !== found.cellElement) {
+            // Focus is descended into the cell's content; Escape ascends back.
+            if (event.key === 'Escape') {
+                found.cellElement.focus({ preventScroll: true });
+            }
+            return;
+        }
+        if (event.key === 'Enter' || event.key === 'F2') {
+            event.preventDefault();
+            const config = columns.find(column => column.key === found.cell.columnId);
+            if (found.cell.rowIndex === -1) {
+                if (event.key === 'Enter' && config && isColumnSortable(config)) {
+                    (_b = (_a = table.getColumn(found.cell.columnId)) === null || _a === void 0 ? void 0 : _a.getToggleSortingHandler()) === null || _b === void 0 ? void 0 : _b(event);
+                }
+                return;
+            }
+            if (config && isColumnEditable(config)) {
+                startEditing(found.cell);
+                return;
+            }
+            if (event.key === 'Enter') {
+                (_c = found.cellElement
+                    .querySelector('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]')) === null || _c === void 0 ? void 0 : _c.focus({ preventScroll: true });
+            }
+            return;
+        }
+        if (event.key === ' ') {
+            if (selectionEnabled && found.cell.rowIndex >= 0) {
+                event.preventDefault();
+                (_d = table.getRowModel().rows[found.cell.rowIndex]) === null || _d === void 0 ? void 0 : _d.toggleSelected();
+            }
+            return;
+        }
+        const result = resolveNavigation(event.key, event.ctrlKey || event.metaKey, found.cell, activeCellContext());
+        if (!result) {
+            return;
+        }
+        event.preventDefault();
+        if (result.pageDelta === 1 && table.getCanNextPage()) {
+            table.nextPage();
+        }
+        else if (result.pageDelta === -1 && table.getCanPreviousPage()) {
+            table.previousPage();
+        }
+        requestActiveCell(result.cell);
+    };
+    const ToolbarSlot = slots === null || slots === void 0 ? void 0 : slots.toolbar;
+    const PaginationSlot = slots === null || slots === void 0 ? void 0 : slots.pagination;
+    const EmptySlot = slots === null || slots === void 0 ? void 0 : slots.empty;
+    const paginationElement = (paginationPosition) => {
+        var _a, _b;
+        return PaginationSlot ?
+            (jsx(PaginationSlot, { table: table, labels: mergedLabels })) :
+            (jsx(CDataGridPagination, { info: (_a = paginationOptions.info) !== null && _a !== void 0 ? _a : true, labels: mergedLabels, pageSizeOptions: (_b = paginationOptions.pageSizeOptions) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE_OPTIONS, position: paginationPosition, table: table, totalRows: totalRows }));
+    };
+    const emptyContent = EmptySlot ?
+        jsx(EmptySlot, { table: table, labels: mergedLabels }) :
+        (loadFailed ? mergedLabels.loadError : empty);
+    const editingConfig = editingCell ?
+        (_q = columns.find(column => column.key === editingCell.columnId)) !== null && _q !== void 0 ? _q : null :
+        null;
+    const EditorComponent = (_r = editingConfig === null || editingConfig === void 0 ? void 0 : editingConfig.editor) !== null && _r !== void 0 ? _r : CDataGridCellEditor;
+    const editorSession = editingCell && editingConfig ?
+        {
+            rowId: editingCell.rowId,
+            columnId: editingCell.columnId,
+            rowIndex: editingCell.rowIndex,
+            popup: Boolean(editingConfig.editorPopup),
+            render: () => (jsx(EditorComponent, { cancel: cancelEdit, column: editingConfig, commit: commitEdit, handleRef: registerEditorHandle, invalid: editorInvalid, item: editingCell.item, labels: mergedLabels, value: editingCell.previousValue })),
+            // Blur commits (inline editors) unless focus moved within the edit
+            // scope - the outside-pointerdown listener covers pointer-only flows.
+            onBlur(event) {
+                const related = event.relatedTarget;
+                if (related && !editScopeContains(related)) {
+                    stopEditingRef.current({ commit: true });
+                }
+            },
+            onHidden: () => stopEditingRef.current({ commit: true, force: true })
+        } :
+        null;
+    return (jsxs("div", { className: `data-grid${sizingEnabled ? ' data-grid-resizable' : ''}${pinningEnabled ? ' data-grid-pinned' : ''}${className ? ` ${className}` : ''}`, "data-coreui-sorter-visibility": sorterVisibility || undefined, ref: setRootRef, ...rest, children: [jsx("div", { className: "visually-hidden", "aria-live": "polite", children: announcement }), ToolbarSlot ?
+                jsx(ToolbarSlot, { table: table, labels: mergedLabels }) :
+                (resolvedToolbar.columns || resolvedToolbar.export || resolvedToolbar.search || resolvedToolbar.history) && (jsx(CDataGridToolbar, { columns: columns, columnsIcon: toolbarColumnsIcon, container: rootRef, export: resolvedToolbar.export, exportIcon: toolbarExportIcon, exportOptions: resolvedToolbar.exportOptions, initialVisibility: initialColumnVisibility.current, labels: mergedLabels, canRedo: canRedo, canUndo: canUndo, onRedo: redo, onUndo: undo, redoIcon: toolbarRedoIcon, search: resolvedToolbar.search, searchValue: globalFilterState !== null && globalFilterState !== void 0 ? globalFilterState : '', showColumns: resolvedToolbar.columns, showHistory: resolvedToolbar.history, undoIcon: toolbarUndoIcon, table: table })), paginationEnabled && (position === 'top' || position === 'both') && paginationElement('top'), jsxs("div", { className: "data-grid-viewport", ref: setViewportElement, ...(serverSide && { 'aria-busy': loading }), ...(cellNavigationEnabled && {
+                    // Focus parks here when the focused row is recycled out of the
+                    // window; the keydown fallback then scrolls the active cell back.
+                    tabIndex: -1,
+                    onBlur: handleNavigationBlur,
+                    onFocus: handleNavigationFocus,
+                    onKeyDown: handleNavigationKeydown
+                }), ...(editing && { onDoubleClick: handleEditingDoubleClick }), children: [jsxs("table", { className: "table", "aria-rowcount": headerRowCount + totalRows, ...(cellNavigationEnabled && {
+                            role: 'grid',
+                            'aria-colcount': visibleColumnIds.length + (selectionEnabled ? 1 : 0)
+                        }), children: [jsx(CDataGridHeader, { cellNavigation: cellNavigationEnabled, columnFilters: columnFilters, columns: columns, draggable: Boolean(columnOrder), icons: menuIcons, isFilterable: isColumnFilterable, isResizable: isColumnResizable, isSortable: isColumnSortable, labels: mergedLabels, menu: Boolean(columnMenu), menuBuilder: menuBuilder, menuContainer: rootRef, pinning: pinningEnabled, resizable: sizingEnabled, selectAll: selectionEnabled && selectionOptions.selectAll !== false, selection: selectionEnabled, tabStop: tabStop, table: table, visibility: Boolean(columnVisibility) }), jsx(CDataGridBody, { cellNavigation: cellNavigationEnabled, columns: columns, containsFocusRef: containsFocusRef, editorSession: editorSession, empty: emptyContent, focusRequestRef: focusRequestRef, headerRowCount: headerRowCount, labels: mergedLabels, overscan: overscan, pinning: pinningEnabled, rowHeight: rowHeight, rowIndexOffset: paginationEnabled ? paginationState.pageIndex * paginationState.pageSize : 0, scrollElement: viewportElement, scrollToIndexRef: scrollToIndexRef, selection: selectionEnabled, tabStop: tabStop, table: table, virtualization: virtualizationEnabled })] }), serverSide && (jsx("div", { className: "data-grid-loading", hidden: !loading, children: jsx("div", { className: "spinner-border", role: "status", children: jsx("span", { className: "visually-hidden", children: mergedLabels.loading }) }) }))] }), (editorSession === null || editorSession === void 0 ? void 0 : editorSession.popup) && (jsx("div", { className: "data-grid-editor-popup", style: editorPopupStyle !== null && editorPopupStyle !== void 0 ? editorPopupStyle : undefined, onBlur: editorSession.onBlur, onKeyDown: handleNavigationKeydown, children: editorSession.render() })), paginationEnabled && (position === 'bottom' || position === 'both') && paginationElement('bottom')] }));
+});
+CDataGrid.displayName = 'CDataGrid';
+
+export { CDataGrid };
+//# sourceMappingURL=CDataGrid.mjs.map