cx 26.0.1 → 26.0.3

package/build/widgets/grid/Grid.js

@@ -0,0 +1,2756 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Binding } from "../../data/Binding";
+import { getAccessor } from "../../data/getAccessor";
+import { getSelector } from "../../data/getSelector";
+import { isSelector } from "../../data/isSelector";
+import { ArrayAdapter } from "../../ui/adapter/ArrayAdapter";
+import { GroupAdapter } from "../../ui/adapter/GroupAdapter";
+import { batchUpdates } from "../../ui/batchUpdates";
+import { ContainerBase } from "../../ui/Container";
+import { Cx } from "../../ui/Cx";
+import { FocusManager, offFocusOut, oneFocusOut, unfocusElement } from "../../ui/FocusManager";
+import { Format } from "../../ui/Format";
+import { InstanceCache } from "../../ui/Instance";
+import { Localization } from "../../ui/Localization";
+import { PureContainer, PureContainerBase } from "../../ui/PureContainer";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { Selection } from "../../ui/selection/Selection";
+import { StaticText } from "../../ui/StaticText";
+import { getContent, VDOM, Widget } from "../../ui/Widget";
+import { Console } from "../../util/Console";
+import { debounce } from "../../util/debounce";
+import { closest, findFirstChild } from "../../util/DOM";
+import { findScrollableParent } from "../../util/findScrollableParent";
+import { getActiveElement } from "../../util/getActiveElement";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { isArray } from "../../util/isArray";
+import { isDefined } from "../../util/isDefined";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { isNumber } from "../../util/isNumber";
+import { isObject } from "../../util/isObject";
+import { isString } from "../../util/isString";
+import { isTextInputElement } from "../../util/isTextInputElement";
+import { KeyCode } from "../../util/KeyCode";
+import { parseStyle } from "../../util/parseStyle";
+import { scrollElementIntoView } from "../../util/scrollElementIntoView";
+import { shallowEquals } from "../../util/shallowEquals";
+import { SubscriberList } from "../../util/SubscriberList";
+import { ddDetect, ddMouseDown, initiateDragDrop, registerDropZone, } from "../drag-drop/ops";
+import { HtmlElement } from "../HtmlElement";
+import DropDownIcon from "../icons/sort-asc";
+import { captureMouse2, getCursorPos } from "../overlay/captureMouse";
+import { tooltipMouseLeave, tooltipMouseMove } from "../overlay/tooltip-ops";
+import { createGridCellEditor } from "./createGridCellEditor";
+import { GridRow, GridRowComponent } from "./GridRow";
+export class Grid extends ContainerBase {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        let selection = this.selection.configureWidget(this);
+        super.declareData(...args, {
+            records: undefined,
+            sorters: undefined,
+            preSorters: undefined,
+            scrollable: undefined,
+            sortField: undefined,
+            sortDirection: undefined,
+            emptyText: undefined,
+            dragSource: { structured: true },
+            dropZone: { structured: true },
+            filterParams: { structured: true },
+            groupingParams: { structured: true },
+            scrollResetParams: { structured: true },
+            page: undefined,
+            totalRecordCount: undefined,
+            tabIndex: undefined,
+            columnParams: { structured: true },
+        }, selection);
+    }
+    init() {
+        if (this.recordAlias)
+            this.recordName = this.recordAlias;
+        if (this.indexAlias)
+            this.indexName = this.indexAlias;
+        if (this.infinite) {
+            this.buffered = true;
+            this.remoteSort = true;
+        }
+        if (this.buffered)
+            this.scrollable = true;
+        this.recordsAccessor = getAccessor(this.records);
+        this.selection = Selection.create(this.selection, {
+            records: this.records,
+        });
+        if (!this.selection.isDummy || this.onRowClick || this.onRowDoubleClick)
+            this.selectable = true;
+        if (this.focusable == null)
+            this.focusable = !this.selection.isDummy || this.cellEditable;
+        super.init();
+    }
+    initState(context, instance) {
+        instance.state = {
+            colWidth: {},
+            lockedColWidth: {},
+            dimensionsVersion: 0,
+            disableDefaultSort: false,
+        };
+        instance.v = 0;
+        if (this.infinite)
+            instance.buffer = {
+                records: [],
+                totalRecordCount: 0,
+                page: 1,
+            };
+    }
+    applyParentStore(instance) {
+        super.applyParentStore(instance);
+        // force prepareData to execute again and propagate the store change to the records
+        if (instance.cached)
+            delete instance.cached.rawData;
+    }
+    createRowTemplate(context, columnParams, instance, groupingData) {
+        var row = this.row || {};
+        let columns = this.columns;
+        if (this.onGetColumns) {
+            let result = instance.invoke("onGetColumns", columnParams, instance);
+            if (isArray(result))
+                columns = result;
+            else
+                row = result;
+        }
+        if (columns)
+            row.line1 = {
+                columns,
+            };
+        row.hasSortableColumns = false;
+        row.hasResizableColumns = false;
+        row.hasMergedCells = false;
+        row.mergedColumns = [];
+        let aggregates = {};
+        let showFooter = false;
+        let lines = [];
+        for (let i = 0; i < 10; i++) {
+            let l = row["line" + i];
+            if (l) {
+                if (isArray(l.columns))
+                    for (let c = 0; c < l.columns.length; c++)
+                        l.columns[c].uniqueColumnId = `l${i}-${l.columns[c].key || c}`;
+                lines.push(l);
+            }
+        }
+        row.header = PureContainer.create({
+            items: GridColumnHeaderLine.create(lines),
+        });
+        row.header.items.forEach((line) => {
+            line.items.forEach((c, index) => {
+                if (c.sortable)
+                    row.hasSortableColumns = true;
+                if (c.mergeCells) {
+                    if (row.header.items.length > 1)
+                        Console.warn("Merged columns are only supported in grids in which rows have only one line of cells.");
+                    else {
+                        row.hasMergedCells = true;
+                        row.mergedColumns.push({ uniqueColumnId: c.uniqueColumnId, index, mode: c.mergeCells });
+                    }
+                }
+                if (c.resizable ||
+                    (c.header && c.header.resizable) ||
+                    (c.header1 && c.header1.resizable) ||
+                    (c.header2 && c.header2.resizable) ||
+                    (c.header3 && c.header3.resizable))
+                    row.hasResizableColumns = true;
+                if (c.aggregate && c.aggregateAlias && (c.aggregateField || isDefined(c.aggregateValue))) {
+                    aggregates[c.aggregateAlias] = {
+                        value: isDefined(c.aggregateValue)
+                            ? c.aggregateValue
+                            : isDefined(c.value)
+                                ? c.value
+                                : c.aggregateField
+                                    ? { bind: this.recordName + "." + c.aggregateField }
+                                    : null,
+                        weight: c.weight != null
+                            ? c.weight
+                            : c.weightField && {
+                                bind: this.recordName + "." + c.weightField,
+                            },
+                        type: c.aggregate,
+                    };
+                }
+                else if (c.footer && !showFooter) {
+                    showFooter = true;
+                }
+            });
+        });
+        //add default footer if some columns have aggregates and grouping is not defined
+        if (!groupingData && (Object.keys(aggregates).length > 0 || this.fixedFooter || showFooter))
+            groupingData = [
+                {
+                    key: {},
+                    showFooter: true,
+                },
+            ];
+        let { grouping, showHeader } = this.resolveGrouping(groupingData);
+        this.showHeader = showHeader;
+        if (this.fixedFooter && isNonEmptyArray(grouping)) {
+            grouping[0].showFooter = true;
+            if (grouping[0].key && Object.keys(grouping[0].key).length > 0)
+                Console.warn("First grouping level in grids with a fixed footer must group all data. The key field should be omitted.");
+        }
+        instance.dataAdapter =
+            this.dataAdapter instanceof ArrayAdapter
+                ? this.dataAdapter
+                : GroupAdapter.create({
+                    recordsAccessor: this.recordsAccessor,
+                    keyField: this.keyField,
+                    aggregates: aggregates,
+                    recordName: this.recordName,
+                    indexName: this.indexName,
+                    sortOptions: this.sortOptions,
+                    groupings: grouping,
+                    preserveOrder: this.preserveGroupOrder,
+                }, this.dataAdapter);
+        instance.dataAdapter.initInstance(context, instance);
+        return Widget.create(GridRow, {
+            class: this.CSS.element(this.baseClass, "data"),
+            className: this.rowClass,
+            style: this.rowStyle,
+            recordName: this.recordName,
+            hoverId: this.rowHoverId,
+            ...row,
+        });
+    }
+    prepareData(context, instance) {
+        let { data, state, cached, row } = instance;
+        let grouping = this.grouping;
+        if (this.onGetGrouping) {
+            if (!cached.data || cached.data.groupingParams !== data.groupingParams)
+                grouping = instance.invoke("onGetGrouping", data.groupingParams, instance);
+            else
+                grouping = cached.grouping;
+        }
+        let groupingChanged = instance.cache("grouping", grouping);
+        if (instance.cache("columnParams", data.columnParams) || groupingChanged || !row) {
+            row = instance.row = this.createRowTemplate(context, data.columnParams, instance, grouping);
+        }
+        data.version = instance.v++;
+        if (!this.infinite)
+            data.totalRecordCount = isArray(data.records) ? data.records.length : 0;
+        else {
+            if (isNumber(data.totalRecordCount))
+                instance.buffer.totalRecordCount = data.totalRecordCount;
+            else
+                data.totalRecordCount = instance.buffer.totalRecordCount;
+            if (isDefined(data.records))
+                instance.buffer.records = data.records;
+            else
+                data.records = instance.buffer.records;
+            if (isNumber(data.page))
+                instance.buffer.page = data.page;
+            else
+                data.page = instance.buffer.page;
+            data.offset = (data.page - 1) * this.pageSize;
+        }
+        if (!isArray(data.records))
+            data.records = [];
+        if (state.sorters && !isDefined(this.sorters))
+            data.sorters = state.sorters;
+        let sortField = null;
+        if (isDefined(this.sortField) && isDefined(this.sortDirection)) {
+            let sorter = {
+                field: data.sortField,
+                direction: data.sortDirection,
+            };
+            sortField = data.sortField;
+            data.sorters = [sorter];
+        }
+        let skipDefaultSorting = this.clearableSort && instance.state.disableDefaultSort;
+        if (!skipDefaultSorting && !isNonEmptyArray(data.sorters) && this.defaultSortField) {
+            let sorter = {
+                field: this.defaultSortField,
+                direction: this.defaultSortDirection || "ASC",
+            };
+            sortField = this.defaultSortField;
+            data.sorters = [sorter];
+        }
+        if (sortField) {
+            for (let l = 1; l < 10; l++) {
+                let line = instance.row[`line${l}`];
+                let sortColumn = line && line.columns && line.columns.find((c) => c.field == sortField);
+                if (sortColumn) {
+                    data.sorters[0].value = sortColumn.sortValue || sortColumn.value;
+                    data.sorters[0].comparer = sortColumn.comparer;
+                    data.sorters[0].sortOptions = sortColumn.sortOptions;
+                    break;
+                }
+            }
+        }
+        let headerMode = this.headerMode;
+        if (this.headerMode == null) {
+            if (this.scrollable || row.hasSortableColumns || row.hasResizableColumns)
+                headerMode = "default";
+            else
+                headerMode = "plain";
+        }
+        let border = this.border;
+        if (this.showBorder || (border == null && this.scrollable))
+            border = true;
+        let dragMode = false;
+        if (data.dragSource)
+            dragMode = data.dragSource.mode || "move";
+        let dropMode = data.dropZone && data.dropZone.mode;
+        if (this.onDrop && !dropMode)
+            dropMode = "preview";
+        data.dropMode = dropMode;
+        data.stateMods = {
+            selectable: this.selectable,
+            "cell-editable": this.cellEditable,
+            scrollable: data.scrollable,
+            buffered: this.buffered,
+            ["header-" + headerMode]: true,
+            border: border,
+            vlines: this.vlines,
+            ["drag-" + dragMode]: dragMode,
+            ["drop-" + dropMode]: dropMode,
+            resizable: row.hasResizableColumns,
+        };
+        super.prepareData(context, instance);
+        instance.records = this.mapRecords(context, instance);
+        //tree adapters can have additional (child) records, filtering also affects actual record count
+        if (instance.records && !this.infinite) {
+            //apply record count after filtering
+            data.totalRecordCount = instance.records.length;
+            //recheck if there are any actual records
+            //when grouping is enabled group header/footer are always in
+            if (instance.records.length < 5) {
+                data.empty = true;
+                for (let i = 0; i < instance.records.length; i++)
+                    if (instance.records[i].type == "data") {
+                        data.empty = false;
+                        break;
+                    }
+            }
+            else
+                data.empty = data.totalRecordCount == 0;
+        }
+        else
+            data.empty = data.totalRecordCount == 0;
+        if (this.onCreateIsRecordSelectable) {
+            instance.isRecordSelectable = instance.invoke("onCreateIsRecordSelectable", null, instance);
+        }
+        if (this.onCreateIsRecordDraggable) {
+            instance.isRecordDraggable = instance.invoke("onCreateIsRecordDraggable", null, instance);
+        }
+        if (this.onTrackMappedRecords) {
+            instance.invoke("onTrackMappedRecords", instance.records, instance);
+        }
+    }
+    initInstance(context, instance) {
+        instance.fixedHeaderResizeEvent = new SubscriberList();
+        super.initInstance(context, instance);
+    }
+    explore(context, instance) {
+        context.push("parentPositionChangeEvent", instance.fixedHeaderResizeEvent);
+        instance.hoverSync = context.hoverSync;
+        super.explore(context, instance);
+        instance.header = instance.getChild(context, instance.row.header, "header");
+        instance.header.scheduleExploreIfVisible(context);
+        let { store } = instance;
+        instance.isSelected = this.selection.getIsSelectedDelegate(store);
+        //do not process rows in buffered mode or cached mode if nothing has changed;
+        if (!this.buffered && (!this.cached || instance.shouldUpdate)) {
+            for (let i = 0; i < instance.records.length; i++) {
+                let record = instance.records[i];
+                if (record.type == "data") {
+                    let row = (record.row = instance.getChild(context, instance.row, record.key, record.store));
+                    row.selected = instance.isSelected(record.data, record.index);
+                    let changed = false;
+                    if (row.cache("selected", row.selected))
+                        changed = true;
+                    if (row.cache("recordData", record.data))
+                        changed = true;
+                    if (this.cached && !changed && !row.childStateDirty)
+                        row.shouldUpdate = false;
+                    else
+                        row.scheduleExploreIfVisible(context);
+                }
+            }
+        }
+    }
+    exploreCleanup(context, instance) {
+        context.pop("parentPositionChangeEvent");
+        let fixedColumnCount = 0, visibleColumns = [];
+        instance.header.children.forEach((line) => {
+            line.children.forEach((col) => {
+                if (col.data.fixed)
+                    fixedColumnCount++;
+                visibleColumns.push(col.widget);
+            });
+        });
+        instance.visibleColumns = visibleColumns;
+        instance.hasFixedColumns = fixedColumnCount > 0;
+        instance.fixedColumnCount = fixedColumnCount;
+        if (fixedColumnCount > 0) {
+            instance.data.classNames += ` ${instance.widget.CSS.state("fixed-columns")}`;
+        }
+    }
+    resolveGrouping(grouping) {
+        if (grouping) {
+            if (!isArray(grouping)) {
+                if (isString(grouping) || isObject(grouping))
+                    grouping = [grouping];
+                else
+                    throw new Error("Dynamic grouping should be an array of grouping objects.");
+            }
+            grouping = grouping.map((g, i) => {
+                let group;
+                if (isString(g))
+                    group = {
+                        key: {
+                            [g]: {
+                                bind: this.recordName + "." + g,
+                            },
+                        },
+                        showHeader: !this.scrollable && i == grouping.length - 1,
+                        showFooter: true,
+                        caption: { bind: `$group.${g}` },
+                        text: { bind: `${this.recordName}.${g}` },
+                    };
+                else
+                    group = {
+                        ...g,
+                    };
+                if (group.caption)
+                    group.caption = getSelector(group.caption);
+                return group;
+            });
+        }
+        let showHeader = !isArray(grouping) || !grouping.some((g) => g.showHeader);
+        return { showHeader, grouping };
+    }
+    groupBy(groupingData, options) {
+        let { grouping, showHeader } = this.resolveGrouping(groupingData);
+        this.grouping = grouping;
+        if (options?.autoConfigure)
+            this.showHeader = showHeader;
+        this.update();
+    }
+    render(context, instance, key) {
+        let { data, hasFixedColumns } = instance;
+        let fixedHeader = data.scrollable && this.showHeader && this.renderHeader(context, instance, "header", true, false);
+        let fixedColumnsFixedHeader = data.scrollable &&
+            this.showHeader &&
+            hasFixedColumns &&
+            this.renderHeader(context, instance, "header", true, true);
+        if (!this.buffered)
+            this.renderRows(context, instance);
+        if (this.fixedFooter)
+            this.renderFixedFooter(context, instance);
+        let header = this.showHeader && this.renderHeader(context, instance, "header", false, false);
+        let fixedColumnsHeader = this.showHeader && hasFixedColumns && this.renderHeader(context, instance, "header", false, true);
+        return (_jsx(GridComponent, { instance: instance, data: instance.data, shouldUpdate: instance.shouldUpdate, header: header, fixedColumnsHeader: fixedColumnsHeader, fixedColumnsFixedHeader: fixedColumnsFixedHeader, fixedHeader: fixedHeader, fixedFooter: instance.fixedFooterVDOM, fixedColumnsFixedFooter: instance.fixedColumnsFixedFooterVDOM, children: this.renderChildren(context, instance) }, key));
+    }
+    renderResizer(instance, hdinst, header, colIndex, forPreviousColumn) {
+        let { widget } = instance;
+        let { CSS, baseClass } = widget;
+        let hdwidget = hdinst.widget;
+        let resizerClassName = "col-resizer";
+        if (forPreviousColumn)
+            resizerClassName += "-prev-col";
+        return (_jsx("div", { className: CSS.element(baseClass, resizerClassName), onClick: (e) => {
+                e.stopPropagation();
+            }, "data-unique-col-id": hdwidget.uniqueColumnId, onMouseDown: (e) => {
+                if (e.buttons != 1)
+                    return;
+                let resizeOverlayEl = document.createElement("div");
+                let gridEl = e.target.parentElement.parentElement.parentElement.parentElement
+                    .parentElement.parentElement;
+                let uniqueColId = e.currentTarget.dataset.uniqueColId;
+                // if we use fixed columns, rhs resizer of the last fixed column is within regular columns header tbody
+                let headerCell = findFirstChild(gridEl, (el) => el.tagName == "TH" &&
+                    el.dataset &&
+                    el.dataset.uniqueColId == uniqueColId);
+                let initialWidth = headerCell.offsetWidth;
+                let initialPosition = getCursorPos(e);
+                resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
+                resizeOverlayEl.style.width = `${initialWidth}px`;
+                resizeOverlayEl.style.left = `${headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left}px`;
+                gridEl.appendChild(resizeOverlayEl);
+                captureMouse2(e, {
+                    onMouseMove: (e) => {
+                        let cursor = getCursorPos(e);
+                        let width = Math.max(30, Math.round(initialWidth + cursor.clientX - initialPosition.clientX));
+                        resizeOverlayEl.style.width = `${width}px`;
+                    },
+                    onMouseUp: (e) => {
+                        if (!resizeOverlayEl)
+                            return; //dblclick
+                        let width = resizeOverlayEl.offsetWidth;
+                        hdinst.assignedWidth = width;
+                        gridEl.removeChild(resizeOverlayEl);
+                        resizeOverlayEl = null;
+                        if (widget.onColumnResize)
+                            instance.invoke("onColumnResize", { width, column: hdwidget }, hdinst);
+                        header.set("width", width);
+                        instance.setState({
+                            dimensionsVersion: instance.state.dimensionsVersion + 1,
+                            colWidth: {
+                                ...instance.state.colWidth,
+                                [hdwidget.uniqueColumnId]: width,
+                            },
+                        });
+                    },
+                    onDblClick: () => {
+                        let table = gridEl.querySelector("table");
+                        let parentEl = table.parentElement;
+                        let tableClone = table.cloneNode(true);
+                        tableClone.childNodes.forEach((tbody) => {
+                            tbody.childNodes.forEach((tr) => {
+                                tr.childNodes.forEach((td, index) => {
+                                    if (index == colIndex) {
+                                        td.style.maxWidth = null;
+                                        td.style.minWidth = null;
+                                        td.style.width = "auto";
+                                    }
+                                    else {
+                                        td.style.display = "none";
+                                    }
+                                });
+                            });
+                        });
+                        tableClone.style.position = "absolute";
+                        tableClone.style.visibility = "hidden";
+                        tableClone.style.top = "0";
+                        tableClone.style.left = "0";
+                        tableClone.style.width = "auto";
+                        parentEl.appendChild(tableClone);
+                        let width = tableClone.offsetWidth;
+                        parentEl.removeChild(tableClone);
+                        header.set("width", width);
+                        instance.setState({
+                            dimensionsVersion: instance.state.dimensionsVersion + 1,
+                            colWidth: {
+                                ...instance.state.colWidth,
+                                [hdwidget.uniqueColumnId]: width,
+                            },
+                        });
+                    },
+                });
+            } }));
+    }
+    renderHeader(context, instance, key, fixed, fixedColumns) {
+        let { data, widget, header } = instance;
+        let { CSS, baseClass } = widget;
+        let headerRows = [];
+        if (!header)
+            return null;
+        let skip = {};
+        let lineIndex = 0;
+        header.children.forEach((line) => {
+            let empty = [true, true, true];
+            let result = [[], [], []];
+            line.children.forEach((hdinst, colIndex) => {
+                let hdwidget = hdinst.widget;
+                for (let l = 0; l < 3; l++) {
+                    let colKey = `${lineIndex + l}-${colIndex}`;
+                    if (skip[colKey])
+                        continue;
+                    if (Boolean(hdinst.data.fixed) != fixedColumns)
+                        continue;
+                    let header = hdinst.components[`header${l + 1}`];
+                    let colSpan, rowSpan, style, cls, mods = [], content, sortIcon, tool;
+                    let resizer = null, prevColumnResizer = null;
+                    if (header) {
+                        empty[l] = false;
+                        if (header.widget.align)
+                            mods.push("aligned-" + header.widget.align);
+                        else if (hdwidget.align)
+                            mods.push("aligned-" + hdwidget.align);
+                        if (hdwidget.sortable && header.widget.allowSorting) {
+                            mods.push("sortable");
+                            if (data.sorters && data.sorters[0].field == (hdwidget.sortField || hdwidget.field)) {
+                                mods.push("sorted-" + data.sorters[0].direction.toLowerCase());
+                                sortIcon = _jsx(DropDownIcon, { className: CSS.element(baseClass, "column-sort-icon") });
+                            }
+                        }
+                        let uniqueColumnId = header.data.colSpan > 1 ? null : hdwidget.uniqueColumnId;
+                        style = header.data.style;
+                        let customWidth = header.data.width ||
+                            instance.state.colWidth[uniqueColumnId] ||
+                            header.data.defaultWidth ||
+                            instance.state.lockedColWidth[uniqueColumnId];
+                        if (customWidth) {
+                            if (instance.state.colWidth[uniqueColumnId] != customWidth)
+                                instance.state.colWidth[uniqueColumnId] = customWidth;
+                            let s = `${customWidth}px`;
+                            style = {
+                                ...style,
+                                width: s,
+                                minWidth: s,
+                                maxWidth: s,
+                            };
+                        }
+                        if (header.data.classNames)
+                            cls = header.data.classNames;
+                        content = header.render(context);
+                        if (header.components && header.components.tool) {
+                            tool = (_jsx("div", { className: CSS.element(baseClass, "col-header-tool"), children: getContent(header.components.tool.render(context)) }));
+                            mods.push("tool");
+                        }
+                        if (header.data.colSpan > 1 || header.data.rowSpan > 1) {
+                            colSpan = header.data.colSpan;
+                            rowSpan = header.data.rowSpan;
+                            for (let r = 0; r < header.data.rowSpan; r++)
+                                for (let c = 0; c < header.data.colSpan; c++)
+                                    skip[`${lineIndex + l + r}-${colIndex + c}`] = true;
+                        }
+                        if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
+                            resizer = this.renderResizer(instance, hdinst, header, colIndex);
+                        }
+                        if (colIndex > 0) {
+                            let hdinstPrev = line.children[colIndex - 1];
+                            let prevLine = 3;
+                            let headerPrev;
+                            while (!headerPrev && prevLine >= 0) {
+                                headerPrev = hdinstPrev.components[`header${prevLine + 1}`];
+                                prevLine--;
+                            }
+                            if ((hdinstPrev.widget.resizable || headerPrev?.data?.resizable) &&
+                                headerPrev?.data?.colSpan < 2) {
+                                prevColumnResizer = this.renderResizer(instance, hdinstPrev, headerPrev, colIndex - 1, true);
+                            }
+                        }
+                    }
+                    cls = CSS.element(baseClass, "col-header", mods) + (cls ? " " + cls : "");
+                    let onContextMenu;
+                    if (this.onColumnContextMenu)
+                        onContextMenu = (e) => instance.invoke("onColumnContextMenu", e, hdinst);
+                    result[l].push(_jsxs("th", { colSpan: colSpan, rowSpan: rowSpan, className: cls, style: style, onMouseDown: ddMouseDown, onMouseMove: (e) => this.onHeaderMouseMove(e, hdwidget, hdinst, instance, l), onMouseLeave: (e) => this.onHeaderMouseLeave(e, hdinst, l), onClick: (e) => this.onHeaderClick(e, hdwidget, instance, l), onContextMenu: onContextMenu, "data-unique-col-id": colSpan > 1 ? null : hdwidget.uniqueColumnId, children: [getContent(content), sortIcon, tool, prevColumnResizer, resizer] }, colIndex));
+                }
+            });
+            result = result.filter((_, i) => !empty[i]);
+            lineIndex += result.length;
+            if (result[0]) {
+                if (fixed && !fixedColumns) {
+                    result[0].push(_jsx("th", { rowSpan: result.length, className: CSS.element(baseClass, "col-header") }, "dummy"));
+                }
+                headerRows.push(...result.map((h, i) => _jsx("tr", { children: h }, `${lineIndex}-${i}`)));
+            }
+        });
+        if (headerRows.length == 0)
+            return null;
+        return (_jsx("tbody", { className: CSS.element(baseClass, "header"), children: headerRows }, "h" + key));
+    }
+    onHeaderMouseMove(e, column, columnInstance, gridInstance, headerLine) {
+        let { baseClass, CSS } = gridInstance.widget;
+        if (columnInstance.data.fixed)
+            return;
+        let headerInstance = columnInstance.components[`header${headerLine + 1}`];
+        if (!headerInstance)
+            return;
+        let { store, data } = headerInstance;
+        if (headerInstance.widget?.tooltip) {
+            tooltipMouseMove(e, headerInstance, headerInstance.widget.tooltip);
+        }
+        if (data.draggable && !data.fixed && ddDetect(e) && e.buttons == 1) {
+            initiateDragDrop(e, {
+                sourceEl: e.currentTarget,
+                source: {
+                    type: "grid-column",
+                    store,
+                    column,
+                    columnInstance,
+                    headerInstance,
+                    gridInstance,
+                    headerLine,
+                },
+                clone: {
+                    store: store,
+                    matchCursorOffset: true,
+                    matchWidth: true,
+                    widget: () => _jsx("div", { className: CSS.element(baseClass, "col-header-drag-clone"), children: data.text }),
+                },
+            }, () => { });
+        }
+    }
+    onHeaderMouseLeave(e, columnInstance, headerLine) {
+        let headerInstance = columnInstance.components[`header${headerLine + 1}`];
+        if (!headerInstance)
+            return;
+        if (headerInstance.widget?.tooltip) {
+            tooltipMouseLeave(e, headerInstance, headerInstance.widget.tooltip);
+        }
+    }
+    onHeaderClick(e, column, instance, headerLine) {
+        e.preventDefault();
+        e.stopPropagation();
+        let { data } = instance;
+        let header = column.components[`header${headerLine + 1}`];
+        let field = column.sortField || column.field;
+        let value = column.sortValue || column.value;
+        let comparer = column.comparer;
+        let sortOptions = column.sortOptions;
+        if (header && header.allowSorting && column.sortable && (field || value || data.sortField)) {
+            let direction = column.primarySortDirection ?? "ASC";
+            if (isNonEmptyArray(data.sorters) &&
+                ((!!data.sorters[0].field && data.sorters[0].field == (field || data.sortField)) ||
+                    (!!value && data.sorters[0].value == value))) {
+                if (data.sorters[0].direction == "ASC" && (!this.clearableSort || direction == "ASC"))
+                    direction = "DESC";
+                else if (data.sorters[0].direction == "DESC" && (!this.clearableSort || direction == "DESC"))
+                    direction = "ASC";
+                else {
+                    direction = null;
+                    instance.state.disableDefaultSort = true;
+                }
+            }
+            let sorters = direction
+                ? [
+                    {
+                        field,
+                        direction,
+                        value,
+                        comparer,
+                        sortOptions,
+                    },
+                ]
+                : null;
+            if (sorters == null)
+                field = null;
+            instance.set("sorters", sorters);
+            instance.set("sortField", field);
+            instance.set("sortDirection", direction);
+            if (!this.remoteSort || this.infinite)
+                instance.setState({ sorters });
+        }
+    }
+    renderGroupHeader(context, instance, g, level, group, i, store, fixedColumns) {
+        let { CSS, baseClass } = this;
+        let data = store.getData();
+        if (g.caption) {
+            let caption = g.caption(data);
+            return (_jsx("tbody", { className: CSS.element(baseClass, "group-caption", ["level-" + level]), "data-group-key": group.$key, "data-group-element": `group-caption-${level}`, children: _jsx("tr", { children: _jsx("td", { colSpan: 1000, children: caption }) }) }, `g-${level}-${group.$key}`));
+        }
+        else if (g.showCaption) {
+            let skip = 0;
+            let { header } = instance;
+            let lines = [];
+            header.children.forEach((line, lineIndex) => {
+                let empty = true;
+                let cells = line.children.map((ci, i) => {
+                    if (--skip >= 0)
+                        return null;
+                    if (Boolean(ci.data.fixed) != fixedColumns)
+                        return null;
+                    let v, c = ci.widget, colSpan, pad, cls = "", style = null;
+                    if (c.caption) {
+                        if (c.caption.children)
+                            v = _jsx(Cx, { widget: c.caption.children, store: store, parentInstance: instance, subscribe: true });
+                        else {
+                            v = c.caption.value(data);
+                            let fmt = c.caption.format(data);
+                            if (fmt)
+                                v = Format.value(v, fmt);
+                        }
+                        pad = c.caption.pad;
+                        colSpan = c.caption.colSpan;
+                        empty = false;
+                        cls = CSS.expand(c.caption.class(data)) || "";
+                        style = parseStyle(c.caption.style(data));
+                        if (c.caption.expand) {
+                            colSpan = 1;
+                            for (let ind = i + 1; ind < line.children.length &&
+                                !line.children[ind].widget.caption &&
+                                !line.children[ind].widget.aggregate; ind++)
+                                colSpan++;
+                        }
+                        if (colSpan > 1)
+                            skip = colSpan - 1;
+                    }
+                    else if (c.aggregate && c.aggregateAliasGetter && c.caption !== false) {
+                        empty = false;
+                        v = c.aggregateAliasGetter(group);
+                        if (isString(ci.data.format))
+                            v = Format.value(v, ci.data.format);
+                    }
+                    if (cls)
+                        cls += " ";
+                    if (c.align)
+                        cls += CSS.state("aligned-" + c.align);
+                    if (pad !== false)
+                        cls += (cls ? " " : "") + CSS.state("pad");
+                    return (_jsx("td", { className: cls, colSpan: colSpan, style: style, children: v }, i));
+                });
+                if (empty)
+                    return;
+                lines.push(_jsx("tr", { children: cells }, lineIndex));
+            });
+            if (lines.length == 0)
+                return null;
+            return (_jsx("tbody", { className: CSS.element(baseClass, "group-caption", ["level-" + level]), "data-group-key": group.$key, "data-group-element": `group-caption-${level}`, children: lines }, "c" + group.$key));
+        }
+    }
+    renderGroupFooter(context, instance, g, level, group, i, store, fixed, fixedColumns) {
+        let { CSS, baseClass } = this;
+        let data = store.getData();
+        let skip = 0;
+        let { header, state } = instance;
+        let rowStyle = {};
+        let lines = [];
+        header.children.forEach((line, lineIndex) => {
+            let empty = true;
+            let cells = line.children.map((ci, i) => {
+                if (--skip >= 0)
+                    return null;
+                if (Boolean(ci.data.fixed) != fixedColumns)
+                    return null;
+                let v, c = ci.widget, colSpan = 1, pad, cls = "", style = null;
+                if (c.footer) {
+                    v = c.footer.value(data);
+                    let fmt = c.footer.format(data);
+                    if (fmt)
+                        v = Format.value(v, fmt);
+                    pad = c.footer.pad;
+                    colSpan = c.footer.colSpan;
+                    empty = false;
+                    cls = CSS.expand(c.footer.class(data)) || "";
+                    style = parseStyle(c.footer.style(data));
+                    if (c.footer.expand) {
+                        colSpan = 1;
+                        for (let ind = i + 1; ind < line.children.length &&
+                            !line.children[ind].widget.footer &&
+                            !line.children[ind].widget.aggregate; ind++)
+                            colSpan++;
+                    }
+                    if (colSpan > 1)
+                        skip = colSpan - 1;
+                }
+                else if (c.aggregate && c.aggregateAliasGetter && c.footer !== false) {
+                    empty = false;
+                    v = c.aggregateAliasGetter(group);
+                    if (isString(ci.data.format))
+                        v = Format.value(v, ci.data.format);
+                }
+                if (cls)
+                    cls += " ";
+                if (c.align)
+                    cls += CSS.state("aligned-" + c.align);
+                if (pad !== false)
+                    cls += (cls ? " " : "") + CSS.state("pad");
+                // apply column width to footers too, but only if colSpan == 1,
+                //  otherwise set 1px so that the footer is not participating in the layout
+                let maxWidth = 1;
+                if (colSpan == 1)
+                    maxWidth = state.colWidth[c.uniqueColumnId];
+                style = {
+                    ...style,
+                    maxWidth,
+                };
+                return (_jsx("td", { className: cls, colSpan: colSpan, style: style, children: v }, i));
+            });
+            if (empty)
+                return;
+            if (fixed && !fixedColumns)
+                cells.push(_jsx("td", { className: CSS.element(baseClass, "fixed-footer-corner") }, "dummy"));
+            lines.push(_jsx("tr", { children: cells }, lineIndex));
+        });
+        if (lines.length == 0)
+            return null;
+        return (_jsx("tbody", { style: rowStyle, className: CSS.element(baseClass, "group-footer", ["level-" + level]), "data-group-key": group.$key, "data-group-element": `group-footer-${level}`, children: lines }, "f" + i));
+    }
+    renderRows(context, instance) {
+        let { records, hasFixedColumns } = instance;
+        if (!isArray(records))
+            return null;
+        let record, g;
+        for (let i = 0; i < records.length; i++) {
+            record = records[i];
+            if (record.type == "data")
+                record.vdom = record.row.render(context);
+            if (record.type == "group-header") {
+                record.vdom = [];
+                record.fixedVdom = [];
+                g = record.grouping;
+                if (g.caption || g.showCaption)
+                    record.vdom.push(this.renderGroupHeader(context, instance, g, record.level, record.group, record.key + "-caption", record.store, false));
+                if (hasFixedColumns)
+                    record.fixedVdom.push(this.renderGroupHeader(context, instance, g, record.level, record.group, record.key + "-caption", record.store, true));
+                if (g.showHeader) {
+                    record.vdom.push(this.renderHeader(context, instance, record.key + "-header", false, false));
+                    if (hasFixedColumns)
+                        record.fixedVdom.push(this.renderHeader(context, instance, record.key + "-header", false, true));
+                }
+            }
+            if (record.type == "group-footer") {
+                g = record.grouping;
+                if (g.showFooter) {
+                    record.vdom = this.renderGroupFooter(context, instance, g, record.level, record.group, record.key + "-footer", record.store, false, false);
+                    if (hasFixedColumns)
+                        record.fixedVdom = this.renderGroupFooter(context, instance, g, record.level, record.group, record.key + "-footer", record.store, false, true);
+                }
+            }
+        }
+    }
+    renderFixedFooter(context, instance) {
+        let { records, hasFixedColumns, data } = instance;
+        instance.fixedFooterVDOM = null;
+        instance.fixedColumnsFixedFooterVDOM = null;
+        if (data.empty || !isNonEmptyArray(records))
+            return;
+        //all type of records are allowed here because the footer can be based on pre-computed data
+        //it doesn't make sense to show the footer if the grid is empty though
+        let record = records[records.length - 1];
+        instance.fixedFooterOverlap = true;
+        instance.fixedFooterIsGroupFooter = record.type == "group-footer";
+        instance.fixedFooterVDOM = this.renderGroupFooter(context, instance, record.grouping, record.level || 1, record.group || { $key: "fixed-footer" }, record.key + "-footer", record.store, true, false);
+        if (hasFixedColumns)
+            instance.fixedColumnsFixedFooterVDOM = this.renderGroupFooter(context, instance, record.grouping, record.level, record.group || { $key: "fixed-footer" }, record.key + "-footer", record.store, true, true);
+    }
+    mapRecords(context, instance) {
+        let { data, store, dataAdapter } = instance;
+        let filter = null;
+        if (this.onCreateFilter)
+            filter = instance.invoke("onCreateFilter", data.filterParams, instance);
+        let sorters = !this.remoteSort && data.sorters;
+        //apply pre-sorters only if some sorting is applied
+        if (isNonEmptyArray(data.sorters) && isNonEmptyArray(data.preSorters)) {
+            sorters = [...data.preSorters, ...data.sorters];
+        }
+        dataAdapter.setFilter(filter);
+        dataAdapter.sort(sorters);
+        //if no filtering or sorting applied, let the component maps records on demand
+        if (this.buffered &&
+            !this.fixedFooter &&
+            !filter &&
+            !isNonEmptyArray(sorters) &&
+            !dataAdapter.isTreeAdapter &&
+            !instance.dataAdapter.groupings)
+            return undefined;
+        return dataAdapter.getRecords(context, instance, data.records, store);
+    }
+    mapRecord(context, instance, data, index) {
+        return instance.dataAdapter.mapRecord(context, instance, data, instance.store, this.recordsAccessor, index);
+    }
+}
+Grid.prototype.baseClass = "grid";
+Grid.prototype.showHeader = true;
+Grid.prototype.showFooter = false;
+Grid.prototype.recordName = "$record";
+Grid.prototype.indexName = "$index";
+Grid.prototype.remoteSort = false;
+Grid.prototype.lockColumnWidths = false;
+Grid.prototype.lockColumnWidthsRequiredRowCount = 3;
+Grid.prototype.focused = false;
+Grid.prototype.emptyText = false;
+Grid.prototype.showBorder = false; // show border override for material theme
+Grid.prototype.cached = false;
+Grid.prototype.buffered = false;
+Grid.prototype.bufferStep = 15;
+Grid.prototype.bufferSize = 60;
+Grid.prototype.pageSize = 100;
+Grid.prototype.infinite = false;
+Grid.prototype.styled = true;
+Grid.prototype.scrollSelectionIntoView = false;
+Grid.prototype.clearableSort = false;
+Grid.prototype.cellEditable = false;
+Grid.prototype.preciseMeasurements = false;
+Grid.prototype.hoverChannel = "default";
+Grid.prototype.focusable = null; // automatically resolved
+Grid.prototype.allowsFileDrops = false;
+Grid.prototype.preserveGroupOrder = false;
+Widget.alias("grid", Grid);
+Localization.registerPrototype("cx/widgets/Grid", Grid);
+class GridComponent extends VDOM.Component {
+    dom;
+    syncBuffering = false;
+    scrollerRef;
+    fixedScrollerRef;
+    gridRef;
+    offResize;
+    unregisterDropZone;
+    constructor(props) {
+        super(props);
+        this.dom = {};
+        let { widget } = props.instance;
+        let end = Math.min(widget.bufferSize, props.data.totalRecordCount);
+        this.state = {
+            cursor: widget.focused && widget.selectable ? 0 : -1,
+            cursorCellIndex: 0,
+            focused: widget.focused,
+            dropInsertionIndex: null,
+            dropNextToTheRowAbove: null,
+            start: 0,
+            end: end,
+        };
+        this.syncBuffering = false;
+        if (widget.infinite) {
+            this.start = 0;
+            this.end = end;
+            this.loadingStartPage = 0;
+            this.loadingEndPage = 0;
+        }
+        this.scrollerRef = (el) => {
+            this.dom.scroller = el;
+        };
+        this.fixedScrollerRef = (el) => {
+            this.dom.fixedScroller = el;
+        };
+        this.gridRef = (el) => {
+            this.dom.el = el;
+        };
+    }
+    getBufferStartEnd() {
+        return this.syncBuffering ? { start: this.start, end: this.end } : this.state;
+    }
+    renderCellEditor(key, CSS, baseClass, instance, column) {
+        //add an inner div with fixed height in order to help IE absolutely position the contents inside
+        let editor = createGridCellEditor(CSS.element(baseClass, "cell-editor-wrap"), this.rowHeight != null && this.rowHeight > 0
+            ? {
+                height: this.rowHeight + 1,
+            }
+            : null, {
+            get: () => this.cellEditorValid ?? false,
+            set: (value) => {
+                this.cellEditorValid = value;
+                return true;
+            },
+        }, column.editor);
+        return (_jsx("td", { className: CSS.element(baseClass, "cell-editor"), children: _jsx(Cx, { parentInstance: instance, subscribe: true, widget: editor }) }, key));
+    }
+    createRowRenderer(cellWrap) {
+        let { instance, data } = this.props;
+        let { widget, isRecordSelectable, visibleColumns, isRecordDraggable, row } = instance;
+        let { CSS, baseClass } = widget;
+        let { dragSource } = data;
+        let { dragged, cursor, cursorCellIndex, cellEdit, dropInsertionIndex, dropTarget } = this.state;
+        let { colWidth, dimensionsVersion } = instance.state;
+        let { hasMergedCells } = row;
+        return (record, index, standalone, fixed) => {
+            let { store, key, row } = record;
+            let isDragged = dragged && (row?.selected || record == dragged);
+            let mod = {
+                selected: row?.selected,
+                dragged: isDragged,
+                cursor: widget.selectable && index == cursor,
+                over: dropTarget == "row" && dropInsertionIndex === index,
+                alternate: index % 2 == 1,
+            };
+            if (isRecordSelectable) {
+                let selectable = isRecordSelectable(record.data, {});
+                mod["selectable"] = selectable;
+                mod["non-selectable"] = !selectable;
+            }
+            let draggable = dragSource &&
+                !isNonEmptyArray(row.dragHandles) &&
+                (!isRecordDraggable || isRecordDraggable(record.data));
+            mod["draggable"] = draggable;
+            mod["non-draggable"] = !draggable;
+            let wrap = (children) => {
+                let skipCells = {};
+                return (_jsx(GridRowComponent, { className: CSS.state(mod), store: store, dragSource: dragSource, instance: row, grid: instance, record: record, parent: this, cursorIndex: index, selected: row?.selected, isBeingDragged: dragged, isDraggedOver: mod.over, cursor: mod.cursor, cursorCellIndex: index == cursor && cursorCellIndex, cellEdit: index == cursor && cursorCellIndex != null && cellEdit, shouldUpdate: row?.shouldUpdate, dimensionsVersion: dimensionsVersion, fixed: fixed, useTrTag: hasMergedCells, children: children.content.map(({ key, data, content }, line) => {
+                        let cells = content.map(({ key, data, content, uniqueColumnId, merged, mergeRowSpan }, cellIndex) => {
+                            if (Boolean(data.fixed) !== fixed)
+                                return null;
+                            if (merged)
+                                return null;
+                            let cellected = index == cursor && cellIndex == cursorCellIndex && widget.cellEditable && line == 0;
+                            let className = cellected
+                                ? CSS.expand(data.classNames, CSS.state("cellected"))
+                                : data.classNames;
+                            if (cellected && cellEdit) {
+                                let column = visibleColumns[cursorCellIndex];
+                                if (column && column.editor && data.editable)
+                                    return this.renderCellEditor(key, CSS, baseClass, row, column);
+                            }
+                            let width = colWidth[uniqueColumnId];
+                            let style = data.style;
+                            if (width) {
+                                style = {
+                                    ...style,
+                                    maxWidth: `${width}px`,
+                                };
+                            }
+                            if (skipCells[`${line}-${cellIndex}`])
+                                return null;
+                            if (data.colSpan > 1 || data.rowSpan > 1) {
+                                for (let r = line; r < line + (data.rowSpan ?? 1); r++)
+                                    for (let c = cellIndex; c < cellIndex + (data.colSpan ?? 1); c++)
+                                        skipCells[`${r}-${c}`] = true;
+                            }
+                            if (cellWrap)
+                                content = cellWrap(content);
+                            return (_jsx("td", { className: className, style: style, colSpan: data.colSpan, rowSpan: mergeRowSpan ?? data.rowSpan, children: content }, key));
+                        });
+                        if (hasMergedCells)
+                            return cells;
+                        return (_jsx("tr", { className: data.classNames, style: data.style, children: cells }, key));
+                    }) }, key));
+            };
+            if (!standalone)
+                return wrap(record.vdom);
+            return (_jsx(Cx, { instance: record.row, parentInstance: instance, options: { name: "grid-row" }, contentFactory: (x) => wrap({
+                    content: Array.isArray(x.children) ? x.children : x.children != null ? [x.children] : [],
+                    data: {},
+                }), params: {
+                    ...mod,
+                    dimensionsVersion: dimensionsVersion,
+                    cursorIndex: index,
+                    data: record.data,
+                    cursorCellIndex: index == cursor && cursorCellIndex,
+                    cellEdit: index == cursor && cursorCellIndex != null && cellEdit,
+                } }, key));
+        };
+    }
+    render() {
+        let { instance, data, fixedFooter, fixedColumnsFixedFooter } = this.props;
+        let { widget, hasFixedColumns } = instance;
+        let { CSS, baseClass } = widget;
+        let { start, end } = this.getBufferStartEnd();
+        let cellWrap = false;
+        if (widget.cellEditable && (widget.hasResizableColumns || hasFixedColumns)) {
+            cellWrap = (children) => _jsx("div", { className: "cxe-grid-cell-clip", children: children });
+        }
+        let children = [], fixedChildren = [];
+        let renderRow = this.createRowRenderer(cellWrap);
+        let addRow = (record, index, standalone) => {
+            children.push(renderRow(record, index, standalone, false));
+            if (hasFixedColumns)
+                fixedChildren.push(renderRow(record, index, standalone, true));
+            //avoid re-rendering on cursor change
+            record.row.shouldUpdate = false;
+        };
+        if (widget.buffered) {
+            let context = new RenderingContext();
+            let dummyDataClass = CSS.element(baseClass, "data", { dummy: true });
+            if (!instance.recordInstanceCache)
+                instance.recordInstanceCache = new InstanceCache(instance);
+            instance.recordInstanceCache.mark();
+            this.getRecordsSlice(start, end).forEach((r, i) => {
+                if (r == null) {
+                    addRow({
+                        key: "dummy-" + start + i,
+                        row: {
+                            data: { classNames: dummyDataClass },
+                            widget: instance.row,
+                        },
+                        vdom: {
+                            content: [
+                                {
+                                    key: 0,
+                                    data: {},
+                                    content: [
+                                        {
+                                            key: 0,
+                                            data: {
+                                                colSpan: 1000,
+                                                style: {
+                                                    height: `${this.rowHeight}px`,
+                                                },
+                                            },
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    }, start + i);
+                }
+                else {
+                    let record = instance.records
+                        ? r
+                        : widget.mapRecord(context, instance, r, widget.infinite ? start + i - data.offset : start + i);
+                    let row = (record.row = instance.recordInstanceCache.getChild(instance.row, record.store, record.key));
+                    instance.recordInstanceCache.addChild(row);
+                    row.detached = true;
+                    row.selected = instance.isSelected(record.data, record.index);
+                    if (record.type == "data") {
+                        addRow(record, start + i, true);
+                    }
+                    else if (record.type == "group-header") {
+                        let g = record.grouping;
+                        if (g.caption || g.showCaption) {
+                            children.push(widget.renderGroupHeader(null, instance, g, record.level, record.group, record.key + "-caption", record.store, false));
+                            if (hasFixedColumns)
+                                fixedChildren.push(widget.renderGroupHeader(null, instance, g, record.level, record.group, record.key + "-caption", record.store, true));
+                        }
+                    }
+                    else if (record.type == "group-footer") {
+                        let g = record.grouping;
+                        if (g.showFooter && (!widget.fixedFooter || start + i != instance.records.length - 1)) {
+                            children.push(widget.renderGroupFooter(null, instance, g, record.level, record.group, record.key + "-footer", record.store, false, false));
+                            if (hasFixedColumns)
+                                fixedChildren.push(widget.renderGroupFooter(null, instance, g, record.level, record.group, record.key + "-footer", record.store, false, true));
+                        }
+                    }
+                }
+            });
+            instance.recordInstanceCache.sweep();
+        }
+        else {
+            let { row } = instance;
+            let { hasMergedCells, mergedColumns } = row;
+            if (hasMergedCells) {
+                // merge adjacent cells with the same value in columns that are marked as merged
+                let rowSpan = {};
+                let getCellRenderInfo = (vdom, cellIndex) => vdom.content[0]?.content[cellIndex];
+                for (let index = instance.records.length - 1; index >= 0; index--) {
+                    let row = instance.records[index];
+                    let prevRow = instance.records[index - 1];
+                    if (row.type == "data") {
+                        let stopMerge = false;
+                        for (let mi = 0; mi < mergedColumns.length; mi++) {
+                            let mergedCol = mergedColumns[mi];
+                            let cellInfo = getCellRenderInfo(row.vdom, mergedCol.index);
+                            cellInfo.merged = false;
+                            delete cellInfo.mergeRowSpan;
+                            if (prevRow?.type == "data") {
+                                let shouldMerge = false;
+                                switch (mergedCol.mode) {
+                                    case "always":
+                                        shouldMerge = true;
+                                        break;
+                                    case "same-value":
+                                        let prevCellInfo = getCellRenderInfo(prevRow.vdom, mergedCol.index);
+                                        shouldMerge = !stopMerge && cellInfo.data.value === prevCellInfo.data.value;
+                                        break;
+                                }
+                                if (shouldMerge) {
+                                    cellInfo.merged = true;
+                                    rowSpan[mergedCol.uniqueColumnId] = (rowSpan[mergedCol.uniqueColumnId] ?? 1) + 1;
+                                }
+                                else {
+                                    if (mergedCol.mode == "same-value")
+                                        stopMerge = true;
+                                }
+                            }
+                            if (!cellInfo.merged && rowSpan[mergedCol.uniqueColumnId] > 1) {
+                                cellInfo.mergeRowSpan = rowSpan[mergedCol.uniqueColumnId];
+                                rowSpan[mergedCol.uniqueColumnId] = 1;
+                            }
+                        }
+                    }
+                    else
+                        rowSpan = {};
+                }
+            }
+            instance.records.forEach((record, i) => {
+                if (record.type == "data")
+                    addRow(record, i, false);
+                else {
+                    children.push(record.vdom);
+                    if (hasFixedColumns)
+                        fixedChildren.push(record.fixedVdom);
+                }
+            });
+        }
+        if (this.state.dropTarget == "grid" && this.state.dropInsertionIndex != null) {
+            let dragInsertionRow = (_jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: CSS.element(baseClass, "dropzone"), colSpan: 1000, style: {
+                            height: data.dropMode == "insertion" ? 0 : this.state.dropItemHeight,
+                        } }) }) }, "dropzone"));
+            let dataRecordClass = CSS.element(baseClass, "data");
+            let isDataRecord = widget.buffered
+                ? (item) => item?.props?.instance?.data?.class == dataRecordClass
+                : (item) => item?.props?.record?.type;
+            let index = 0;
+            while (index < children.length && !isDataRecord(children[index]))
+                index++;
+            let count = 0;
+            while (index < children.length && count < this.state.dropInsertionIndex) {
+                if (isDataRecord(children[index]))
+                    count++;
+                index++;
+            }
+            let savedIndexPos = index;
+            if (!this.state.dropNextToTheRowAbove)
+                while (index < children.length && !isDataRecord(children[index]))
+                    index++;
+            // do not allow insertion after the last group footer
+            if (savedIndexPos < index && index == children.length)
+                index = savedIndexPos;
+            children.splice(index, 0, dragInsertionRow);
+        }
+        let content = [], fixedColumnsContent = [];
+        //instance.records holds the record count after filtering
+        if (data.emptyText && data.empty) {
+            children = [
+                _jsx("tbody", { className: CSS.element(baseClass, "empty-text"), children: _jsx("tr", { children: _jsx("td", { colSpan: 1000, children: data.emptyText }) }) }, "empty"),
+            ];
+        }
+        else if (widget.fixedFooter && (widget.buffered || !instance.fixedFooterIsGroupFooter)) {
+            //add fixed footer content for buffered grids
+            if (fixedFooter || fixedColumnsFixedFooter) {
+                children.push(fixedFooter);
+                if (hasFixedColumns)
+                    fixedChildren.push(fixedColumnsFixedFooter);
+            }
+        }
+        let shouldRenderFixedFooter = widget.scrollable && (fixedFooter || fixedColumnsFixedFooter);
+        if (hasFixedColumns) {
+            fixedColumnsContent.push(_jsx("div", { ref: this.fixedScrollerRef, className: CSS.element(baseClass, "fixed-scroll-area", {
+                    "fixed-header": !!this.props.header,
+                    "fixed-footer": shouldRenderFixedFooter,
+                }), children: _jsx("div", { className: CSS.element(baseClass, "fixed-table-wrapper"), children: _jsxs("table", { ref: (el) => {
+                            this.dom.fixedTable = el;
+                        }, children: [this.props.fixedColumnsHeader, fixedChildren] }) }) }, "fixedscroller"));
+        }
+        content.push(_jsx("div", { ref: this.scrollerRef, onScroll: this.onScroll.bind(this), className: CSS.element(baseClass, "scroll-area", {
+                "fixed-header": !!this.props.header,
+                "fixed-footer": shouldRenderFixedFooter,
+            }), children: _jsx("div", { className: CSS.element(baseClass, "table-wrapper"), children: _jsxs("table", { ref: (el) => {
+                        this.dom.table = el;
+                        if (this.props.instance.widget.onRef)
+                            this.props.instance.invoke("onRef", el, this.props.instance);
+                    }, children: [this.props.header, children] }) }) }, "scroller"));
+        if (this.props.fixedHeader)
+            content.push(_jsx("div", { ref: (el) => {
+                    this.dom.fixedHeader = el;
+                }, className: CSS.element(baseClass, "fixed-header"), style: {
+                    display: this.scrollWidth > 0 ? "block" : "none",
+                }, children: _jsx("table", { children: this.props.fixedHeader }) }, "fh"));
+        if (this.props.fixedColumnsFixedHeader)
+            fixedColumnsContent.push(_jsx("div", { ref: (el) => {
+                    this.dom.fixedColumnsFixedHeader = el;
+                }, className: CSS.element(baseClass, "fixed-fixed-header"), style: {
+                    display: this.scrollWidth > 0 ? "block" : "none",
+                }, children: _jsx("table", { children: this.props.fixedColumnsFixedHeader }) }, "fcfh"));
+        if (shouldRenderFixedFooter) {
+            content.push(_jsx("div", { ref: (el) => {
+                    this.dom.fixedFooter = el;
+                }, className: CSS.element(baseClass, "fixed-footer"), children: _jsx("table", { children: fixedFooter }) }, "ff"));
+            if (hasFixedColumns)
+                fixedColumnsContent.push(_jsx("div", { ref: (el) => {
+                        this.dom.fixedColumnsFixedFooter = el;
+                    }, className: CSS.element(baseClass, "fixed-fixed-footer"), children: _jsx("table", { children: fixedColumnsFixedFooter }) }, "fcff"));
+        }
+        let columnInsertionMarker = null;
+        if (this.state.dropTarget == "column") {
+            columnInsertionMarker = (_jsx("div", { className: CSS.element(baseClass, "col-insertion-marker"), style: {
+                    left: this.state.colDropInsertionLeft,
+                } }));
+        }
+        return (_jsxs("div", { className: data.classNames, style: { ...data.style, counterReset: `cx-row-number ${start}` }, tabIndex: widget.focusable ? data.tabIndex || 0 : null, ref: this.gridRef, onKeyDown: this.handleKeyDown.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), onDragEnter: this.onFileDragEnter.bind(this), onDragOver: this.onFileDragOver.bind(this), onDragLeave: this.onFileDragLeave.bind(this), onDrop: this.onFileDrop.bind(this), children: [fixedColumnsContent, content, columnInsertionMarker, this.props.children] }));
+    }
+    getRecordsSlice(start, end) {
+        let { data, instance } = this.props;
+        let { widget } = instance;
+        if (!widget.infinite) {
+            let source = instance.records || data.records;
+            return source.slice(start, end);
+        }
+        let { offset, records } = data;
+        let result = [];
+        for (let i = start; i < Math.min(end, data.totalRecordCount); i++) {
+            if (i >= offset && i < offset + records.length)
+                result.push(records[i - offset]);
+            else
+                result.push(null);
+        }
+        return result;
+    }
+    ensureData(visibleStart, visibleEnd) {
+        if (this.loading)
+            return;
+        let { instance } = this.props;
+        let { widget } = instance;
+        let { pageSize } = widget;
+        let startPage = Math.trunc(visibleStart / pageSize) + 1, endPage = Math.trunc((visibleEnd - 1) / pageSize) + 1;
+        //debouncing restricts excessive page loading on fast scrolling as rendering data is
+        //useless because visible region is scrolled away before data appears
+        //the user should spent some time on the page before loading it
+        if (!this.loadPageRange)
+            this.loadPageRange = debounce((startPage, endPage) => {
+                let { data } = this.props;
+                let { records, offset } = data;
+                let promises = [];
+                for (let page = startPage; page <= endPage; page++) {
+                    let s = (page - 1) * pageSize, e = s + pageSize;
+                    if (s >= offset && e <= offset + records.length) {
+                        promises.push(Promise.resolve(records.slice(s - offset, e - offset)));
+                    }
+                    else {
+                        let result = instance.invoke("onFetchRecords", {
+                            page,
+                            pageSize,
+                            sorters: data.sorters,
+                            sortField: data.sortField,
+                            sortDirection: data.sortDirection,
+                            filterParams: data.filterParams,
+                            state: this.prevFetchRecordsState,
+                        }, instance);
+                        promises.push(Promise.resolve(result));
+                    }
+                }
+                this.loading = true;
+                Promise.all(promises)
+                    .then((pageRecords) => {
+                    this.loading = false;
+                    let records = [];
+                    let totalRecordCount;
+                    let lastPage;
+                    pageRecords.forEach((page) => {
+                        if (Array.isArray(page)) {
+                            records.push(...page);
+                        }
+                        else {
+                            if (!Array.isArray(page.records))
+                                throw new Error("onFetchRecords should return an array of records or an object with results inside records property.");
+                            totalRecordCount = page.totalRecordCount;
+                            lastPage = page.lastPage;
+                            this.prevFetchRecordsState = page.state;
+                            records.push(...page.records);
+                        }
+                    });
+                    let { data } = this.props;
+                    if (!isNumber(totalRecordCount)) {
+                        totalRecordCount = (startPage - 1) * pageSize + records.length;
+                        if (!lastPage && records.length == (endPage - startPage + 1) * pageSize)
+                            totalRecordCount++;
+                        if (data.totalRecordCount > totalRecordCount)
+                            totalRecordCount = data.totalRecordCount;
+                    }
+                    instance.buffer.totalRecordCount = data.totalRecordCount = totalRecordCount;
+                    instance.buffer.records = data.records = records;
+                    instance.buffer.page = data.page = startPage;
+                    data.offset = (startPage - 1) * pageSize;
+                    instance.store.silently(() => {
+                        instance.set("records", records);
+                        instance.set("page", startPage);
+                        instance.set("totalRecordCount", totalRecordCount);
+                    });
+                    let stateChanges = {
+                        startPage,
+                        endPage,
+                    };
+                    if (this.state.end == 0)
+                        stateChanges.end = Math.min(widget.bufferSize, totalRecordCount);
+                    this.setState(stateChanges, () => {
+                        this.loadingStartPage = startPage;
+                        this.loadingEndPage = endPage;
+                        this.onScroll();
+                    });
+                })
+                    .catch((error) => {
+                    this.loading = false;
+                    if (widget.onLoadingError)
+                        instance.invoke(error, "onLoadingError", instance);
+                });
+            }, 30);
+        if (startPage < this.loadingStartPage || endPage > this.loadingEndPage) {
+            this.loadingStartPage = startPage;
+            this.loadingEndPage = endPage;
+            this.loadPageRange(startPage, endPage);
+        }
+    }
+    onScroll() {
+        //check if unmounted
+        if (!this.dom.scroller)
+            return;
+        if (this.dom.fixedHeader) {
+            this.dom.fixedHeader.scrollLeft = this.dom.scroller.scrollLeft;
+        }
+        if (this.dom.fixedFooter) {
+            this.dom.fixedFooter.scrollLeft = this.dom.scroller.scrollLeft;
+        }
+        if (this.dom.fixedScroller) {
+            this.dom.fixedScroller.scrollTop = this.dom.scroller.scrollTop;
+        }
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        if (widget.buffered && !this.pending) {
+            let start = 0;
+            if (widget.measureRowHeights && instance.records)
+                start = Math.max(0, this.estimateStart(instance.records, this.dom.scroller.scrollTop) - widget.bufferStep);
+            else if (this.rowHeight > 0)
+                start = Math.round(this.dom.scroller.scrollTop / this.rowHeight - widget.bufferStep);
+            start = Math.round(start / widget.bufferStep) * widget.bufferStep;
+            start = Math.max(0, Math.min(start, data.totalRecordCount - widget.bufferSize));
+            let end = Math.min(data.totalRecordCount, start + widget.bufferSize);
+            if (widget.infinite) {
+                this.ensureData(start, end);
+            }
+            if (this.syncBuffering) {
+                this.start = start;
+                this.end = end;
+            }
+            else if (this.state.end != end) {
+                this.pending = true;
+                this.setState({ start, end }, () => {
+                    this.pending = false;
+                });
+            }
+        }
+    }
+    onFixedColumnsWheel(e) {
+        this.dom.scroller.scrollTop += e.deltaY;
+        e.preventDefault();
+    }
+    shouldComponentUpdate(props, state) {
+        return props.shouldUpdate !== false || state !== this.state;
+    }
+    componentDidMount() {
+        this.componentDidUpdate();
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.scrollable) {
+            //update fixed header/footer on resize
+            this.offResize = ResizeManager.trackElement(this.dom.scroller, () => {
+                requestAnimationFrame(() => {
+                    //ignore changes if the element is not visible on the page
+                    if (!this.dom.scroller?.offsetWidth)
+                        return;
+                    this.componentDidUpdate();
+                    instance.setState({
+                        dimensionsVersion: instance.state.dimensionsVersion + 1,
+                        lockedColWidth: {},
+                    });
+                });
+            });
+        }
+        if (widget.pipeKeyDown)
+            instance.invoke("pipeKeyDown", this.handleKeyDown.bind(this), instance);
+        this.unregisterDropZone = registerDropZone(this);
+        if (widget.infinite)
+            this.ensureData(0, 0);
+        if (this.dom.fixedScroller) {
+            this.onFixedColumnsWheel = this.onFixedColumnsWheel.bind(this);
+            this.dom.fixedScroller.addEventListener("wheel", this.onFixedColumnsWheel, { passive: false });
+        }
+    }
+    onDragStart(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.onDragStart)
+            instance.invoke("onDragStart", e, instance);
+    }
+    onDrop(e) {
+        try {
+            let { instance } = this.props;
+            let { widget } = instance;
+            let { start } = this.getBufferStartEnd();
+            let { dropInsertionIndex, dropTarget, dropNextToTheRowAbove } = this.state;
+            if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
+                let gridEvent = e;
+                gridEvent.target = {
+                    insertionIndex: start + dropInsertionIndex,
+                    recordBefore: this.getDataRecordAt(start + dropInsertionIndex - 1),
+                    recordAfter: this.getDataRecordAt(start + dropInsertionIndex),
+                    totalRecordCount: instance.records.length,
+                    dropNextToTheRowAbove,
+                };
+                instance.invoke("onDrop", gridEvent, instance);
+            }
+            else if (dropTarget == "row") {
+                let rowEvent = e;
+                rowEvent.target = {
+                    index: start + dropInsertionIndex,
+                    record: this.getDataRecordAt(start + dropInsertionIndex),
+                };
+                instance.invoke("onRowDrop", rowEvent, instance);
+            }
+            else if (dropTarget == "column" && widget.onColumnDrop) {
+                let colEvent = e;
+                colEvent.target = {
+                    index: this.state.colDropInsertionIndex,
+                    grid: widget,
+                    instance,
+                };
+                instance.invoke("onColumnDrop", colEvent, instance);
+            }
+        }
+        catch (err) {
+            console.error("Grid drop operation failed. Please fix this error:", err);
+        }
+        //in some cases drop operation is not followed by leave
+        this.onDragLeave(e);
+    }
+    onDropTest(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        let grid = widget.onDropTest && instance.invoke("onDropTest", e, instance);
+        let row = widget.onRowDropTest && instance.invoke("onRowDropTest", e, instance);
+        let column = widget.onColumnDropTest && instance.invoke("onColumnDropTest", e, instance);
+        return (grid || row || column) && { grid, row, column };
+    }
+    onDragEnd(e) {
+        this.setState({
+            dropTarget: null,
+            dropInsertionIndex: null,
+            colDropInsertionIndex: undefined,
+            colDropInsertionLeft: undefined,
+        });
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.onDragEnd)
+            instance.invoke("onDragEnd", e, instance);
+    }
+    onDragMeasure(e, { test: { grid, row, column } }) {
+        //columns can be dropped anywhere, while rows only in the scrollable area
+        let r = getTopLevelBoundingClientRect(column ? this.dom.el : this.dom.scroller);
+        let { clientX, clientY } = e.cursor;
+        if (clientX < r.left || clientX >= r.right || clientY < r.top || clientY >= r.bottom)
+            return false;
+        return {
+            over: 1000,
+            near: false,
+        };
+    }
+    onColumnDragOver(ev) {
+        let headerTBody = this.dom.table.firstChild;
+        let positions = [];
+        let bounds;
+        let exists = {};
+        for (let r = 0; r < headerTBody.children.length; r++) {
+            let cells = headerTBody.children[r].children;
+            for (let c = 0; c < cells.length; c++) {
+                bounds = cells[c].getBoundingClientRect();
+                let key = bounds.left.toFixed(0);
+                if (exists[key])
+                    continue;
+                positions.push(bounds.left);
+                exists[key] = true;
+            }
+            if (r == 0)
+                positions.push(bounds.right);
+        }
+        //due to the order of enumeration it's possible that positions are out of order
+        positions.sort((a, b) => a - b);
+        let index = 0;
+        while (index + 1 < positions.length && ev.cursor.clientX > positions[index + 1])
+            index++;
+        let { fixedColumnCount } = this.props.instance;
+        this.setState({
+            colDropInsertionIndex: fixedColumnCount + index,
+            colDropInsertionLeft: positions[index] - positions[0] - this.dom.scroller.scrollLeft + this.dom.scroller.offsetLeft,
+            dropTarget: "column",
+        });
+    }
+    onDragOver(ev, { test: { grid, row, column } }) {
+        if (column)
+            this.onColumnDragOver(ev);
+        if (!grid && !row)
+            return;
+        let { instance } = this.props;
+        let { widget, data } = instance;
+        let { CSS, baseClass } = widget;
+        let rowClass = CSS.element(baseClass, "data");
+        let nodes = Array.from(this.dom.table.children).filter((node) => node.className && node.className.indexOf(rowClass) != -1);
+        let { start } = this.getBufferStartEnd();
+        let s = 0, e = nodes.length, m, b;
+        let parentOffset = getParentFrameBoundingClientRect(this.dom.scroller);
+        let cy = ev.cursor.clientY - parentOffset.top;
+        let rowOverIndex = null;
+        let nextToTheRowAbove = false;
+        while (s < e) {
+            m = Math.floor((s + e) / 2);
+            b = nodes[m].getBoundingClientRect();
+            //dragged items might be invisible and have no client bounds
+            if (b.top == 0 && b.bottom == 0) {
+                //it's important to go all the way in one direction otherwise infinite loop might occur
+                while (m > s && b.top == 0 && b.bottom == 0) {
+                    m--;
+                    b = nodes[m].getBoundingClientRect();
+                }
+                while (m + 1 < e && b.top == 0 && b.bottom == 0) {
+                    m = m + 1;
+                    b = nodes[m].getBoundingClientRect();
+                }
+                if (b.top == 0 && b.bottom == 0) {
+                    s = e = m;
+                    break;
+                }
+            }
+            if (cy < b.top)
+                e = m;
+            else if (cy > b.bottom)
+                s = m + 1;
+            else {
+                //hovering over a row here
+                if (row) {
+                    let confirmed = !grid;
+                    if (!confirmed) {
+                        let insertionZone = (b.bottom - b.top) / 4;
+                        confirmed = cy > b.top + insertionZone && cy < b.bottom - insertionZone;
+                    }
+                    if (confirmed) {
+                        rowOverIndex = m;
+                        break;
+                    }
+                }
+                if (cy > (b.bottom + b.top) / 2) {
+                    s = e = m + 1;
+                    nextToTheRowAbove = true;
+                }
+                else
+                    s = e = m;
+            }
+        }
+        let cancel = false;
+        if (rowOverIndex != null) {
+            let evt = {
+                ...ev,
+                target: {
+                    record: this.getRecordAt(rowOverIndex),
+                    index: start + rowOverIndex,
+                },
+            };
+            if (widget.onRowDragOver && instance.invoke("onRowDragOver", evt, instance) === false)
+                cancel = true;
+            else if (rowOverIndex != this.state.dropInsertionIndex || this.state.dropTarget != "row") {
+                this.setState({
+                    dropInsertionIndex: rowOverIndex,
+                    dropNextToTheRowAbove: false,
+                    dropItemHeight: ev.source.height - 1,
+                    dropTarget: "row",
+                });
+            }
+        }
+        else if (grid) {
+            let evt = {
+                ...ev,
+                target: {
+                    recordBefore: this.getRecordAt(s - 1),
+                    recordAfter: this.getRecordAt(s),
+                    insertionIndex: start + s,
+                    totalRecordCount: data.totalRecordCount,
+                },
+            };
+            if (widget.onDragOver && instance.invoke("onDragOver", evt, instance) === false)
+                cancel = true;
+            else if (s != this.state.dropInsertionIndex || this.state.dropTarget != "grid") {
+                this.setState({
+                    dropInsertionIndex: s,
+                    dropNextToTheRowAbove: nextToTheRowAbove,
+                    dropItemHeight: ev.source.height - 1,
+                    dropTarget: "grid",
+                });
+            }
+        }
+        if (cancel) {
+            this.setState({
+                dropInsertionIndex: null,
+                dropNextToTheRowAbove: null,
+                dropTarget: null,
+            });
+        }
+    }
+    onDragLeave(e) {
+        this.setState({
+            dropInsertionIndex: null,
+            dropNextToTheRowAbove: null,
+            dropTarget: null,
+        });
+    }
+    onGetHScrollParent() {
+        let { widget } = this.props.instance;
+        if (widget.scrollable)
+            return this.dom.scroller;
+        return findScrollableParent(this.dom.table, true);
+    }
+    onGetVScrollParent({ test: { grid, row, column } }) {
+        if (column && !grid && !row)
+            return null;
+        let { widget } = this.props.instance;
+        if (widget.scrollable)
+            return this.dom.scroller;
+        return findScrollableParent(this.dom.table);
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let { data, widget } = props.instance;
+        if (this.state.cursor >= data.totalRecordCount)
+            this.setState({
+                cursor: data.totalRecordCount - 1,
+            });
+        else if (widget.selectable && this.state.focused && this.state.cursor < 0)
+            this.setState({
+                cursor: 0,
+            });
+    }
+    componentWillUnmount() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (this.offResize)
+            this.offResize();
+        offFocusOut(this);
+        if (this.unregisterDropZone)
+            this.unregisterDropZone();
+        if (widget.pipeKeyDown)
+            instance.invoke("pipeKeyDown", null, instance);
+        if (this.dom.fixedScroller) {
+            this.dom.fixedScroller.removeEventListener("wheel", this.onFixedColumnsWheel);
+        }
+    }
+    estimateHeight(records, start, end, breakCondition) {
+        let avgDataRowHeight = this.heightStats.estimate("data") ?? 0;
+        let totalHeight = 0;
+        for (let i = start; i < end; i++) {
+            let record = records[i];
+            switch (record.type) {
+                case "data":
+                    if (record.key in this.rowHeights)
+                        totalHeight += this.rowHeights[record.key];
+                    else
+                        totalHeight += avgDataRowHeight;
+                    break;
+                case "group-header":
+                    if (record.grouping.showCaption) {
+                        let captionKey = "group-caption-" + record.level;
+                        if (`${captionKey}-${record.group.$key}` in this.rowHeights)
+                            totalHeight += this.rowHeights[`${captionKey}-${record.group.$key}`];
+                        else
+                            totalHeight += this.heightStats.estimate(captionKey) ?? avgDataRowHeight;
+                    }
+                    break;
+                case "group-footer":
+                    if (record.grouping.showFooter) {
+                        let captionKey = "group-footer-" + record.level;
+                        if (`${captionKey}-${record.group.$key}` in this.rowHeights)
+                            totalHeight += this.rowHeights[`${captionKey}-${record.group.$key}`];
+                        else
+                            totalHeight += this.heightStats.estimate(captionKey) ?? avgDataRowHeight;
+                    }
+                    break;
+                default:
+                    Console.warn("UNPROCESSED RECORD TYPE", record);
+                    break;
+            }
+            if (breakCondition && breakCondition(i, totalHeight) === false)
+                break;
+        }
+        return totalHeight;
+    }
+    estimateStart(records, height) {
+        let start = 0;
+        if (height == 0)
+            return 0;
+        this.estimateHeight(records, 0, records.length, (index, h) => {
+            start = index;
+            return h < height;
+        });
+        return start;
+    }
+    componentDidUpdate() {
+        let { instance, data } = this.props;
+        let { widget, fixedFooterOverlap } = instance;
+        if (widget.lockColumnWidths &&
+            isArray(data.records) &&
+            data.records.length >= widget.lockColumnWidthsRequiredRowCount) {
+            let headerTBody = this.dom.table.firstChild;
+            for (let r = 0; r < headerTBody.children.length; r++) {
+                let sr = headerTBody.children[r];
+                for (let c = 0; c < sr.children.length; c++) {
+                    let cell = sr.children[c];
+                    cell.style.width =
+                        cell.style.minWidth =
+                            cell.style.maxWidth =
+                                `${sr.children[c].offsetWidth}px`;
+                    cell.style.boxSizing = "border-box";
+                    if (cell.dataset.uniqueColId)
+                        instance.state.lockedColWidth[cell.dataset.uniqueColId] = sr.children[c].offsetWidth;
+                }
+            }
+        }
+        if (widget.scrollable) {
+            this.scrollWidth = this.dom.scroller.offsetWidth - this.dom.scroller.clientWidth;
+            let resized = false, headerHeight = 0, footerHeight = 0, rowHeight = 0;
+            if (this.dom.fixedTable)
+                syncHeaderHeights(this.dom.table.firstChild, this.dom.fixedTable.firstChild);
+            if (this.dom.fixedHeader) {
+                let fixedHeaderTBody = this.dom.fixedHeader.firstChild.firstChild;
+                resized = widget.preciseMeasurements
+                    ? copyCellSizePrecise(this.dom.table.firstChild, fixedHeaderTBody)
+                    : copyCellSize(this.dom.table.firstChild, fixedHeaderTBody);
+                let scrollColumnEl = fixedHeaderTBody?.firstChild?.lastChild;
+                if (scrollColumnEl)
+                    scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
+                this.dom.fixedHeader.style.display = "block";
+                headerHeight = this.dom.fixedHeader.offsetHeight;
+                this.dom.scroller.style.marginTop = `${headerHeight}px`;
+                if (this.dom.fixedScroller)
+                    this.dom.fixedScroller.style.marginTop = `${headerHeight}px`;
+                else if (this.dom.fixedHeader.style.left != null)
+                    this.dom.fixedHeader.style.removeProperty("left");
+            }
+            else {
+                this.dom.scroller.style.removeProperty("marginTop");
+                if (this.dom.fixedScroller)
+                    this.dom.fixedScroller.style.removeProperty("marginTop");
+            }
+            if (this.dom.fixedColumnsFixedHeader) {
+                let fixedColumnsWidth = `${this.dom.fixedScroller.offsetWidth}px`;
+                this.dom.fixedColumnsFixedHeader.style.right = "auto";
+                this.dom.fixedColumnsFixedHeader.style.width = fixedColumnsWidth;
+                if (this.dom.fixedHeader)
+                    this.dom.fixedHeader.style.left = fixedColumnsWidth;
+                this.dom.fixedColumnsFixedHeader.style.display = "block";
+                let fixedHeaderTBody = this.dom.fixedColumnsFixedHeader.firstElementChild
+                    ?.firstElementChild;
+                if (this.dom.fixedTable.firstChild) {
+                    resized = copyCellSize(this.dom.fixedTable.firstElementChild, fixedHeaderTBody);
+                }
+            }
+            if (this.dom.fixedFooter || this.dom.fixedColumnsFixedFooter) {
+                if (this.dom.fixedColumnsFixedFooter) {
+                    let fixedColumnsWidth = `${this.dom.fixedScroller.offsetWidth}px`;
+                    this.dom.fixedColumnsFixedFooter.style.right = "auto";
+                    this.dom.fixedColumnsFixedFooter.style.width = fixedColumnsWidth;
+                    let dstTableBody = this.dom.fixedColumnsFixedFooter.firstElementChild
+                        ?.firstElementChild;
+                    if (dstTableBody) {
+                        let srcTableBody = this.dom.fixedTable.lastElementChild;
+                        copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
+                        this.dom.fixedColumnsFixedFooter.style.display = "block";
+                        footerHeight = this.dom.fixedFooter.offsetHeight;
+                    }
+                }
+                if (this.dom.fixedFooter) {
+                    let dstTableBody = this.dom.fixedFooter.firstElementChild?.firstElementChild;
+                    if (dstTableBody) {
+                        let srcTableBody = this.dom.table.lastElementChild;
+                        copyCellSize(srcTableBody, dstTableBody, fixedFooterOverlap);
+                        let scrollColumnEl = dstTableBody.firstElementChild?.firstElementChild;
+                        if (scrollColumnEl)
+                            scrollColumnEl.style.minWidth = scrollColumnEl.style.maxWidth = this.scrollWidth + "px";
+                        this.dom.fixedFooter.style.display = "block";
+                        footerHeight = this.dom.fixedFooter.offsetHeight;
+                    }
+                    if (this.dom.fixedScroller)
+                        this.dom.fixedFooter.style.left = `${this.dom.fixedScroller.offsetWidth}px`;
+                    else if (this.dom.fixedFooter.style.left != null)
+                        this.dom.fixedFooter.style.removeProperty("left");
+                }
+                this.dom.scroller.style.marginBottom = `${footerHeight}px`;
+                if (this.dom.fixedScroller)
+                    this.dom.fixedScroller.style.marginBottom = `${footerHeight}px`;
+            }
+            else {
+                this.dom.scroller.style.marginBottom = "0";
+                if (this.dom.fixedScroller)
+                    this.dom.fixedScroller.style.marginBottom = "0";
+            }
+            let scrollOverlap = fixedFooterOverlap ? footerHeight : 0;
+            if (widget.buffered) {
+                let { start, end } = this.getBufferStartEnd();
+                let remaining = 0, count = Math.min(data.totalRecordCount, end - start);
+                if (widget.measureRowHeights) {
+                    if (!this.rowHeights)
+                        this.rowHeights = {};
+                    if (!this.heightStats)
+                        this.heightStats = new AvgHeight();
+                    for (let i = 0; i < this.dom.table.children.length; i++) {
+                        let body = this.dom.table.children[i];
+                        if (body.dataset.recordKey != null) {
+                            if (!(body.dataset.recordKey in this.rowHeights))
+                                this.heightStats.add("data", body.offsetHeight);
+                            this.rowHeights[body.dataset.recordKey] = body.offsetHeight;
+                        }
+                        else if (body.dataset.groupKey) {
+                            let key = body.dataset.groupElement + "-" + body.dataset.groupKey;
+                            this.rowHeights[key] = body.offsetHeight;
+                            if (!(body.dataset.recordKey in this.rowHeights))
+                                this.heightStats.add(body.dataset.groupElement, body.offsetHeight);
+                        }
+                    }
+                }
+                if (count > 0) {
+                    //do not change row height while a drag-drop operation is in place
+                    rowHeight = this.state.dragged
+                        ? this.rowHeight
+                        : Math.round((this.dom.table.offsetHeight - headerHeight) / count);
+                    // if (this.rowHeight && this.rowHeight != rowHeight) {
+                    //    console.warn("ROW-HEIGHT-CHANGE", this.rowHeight, rowHeight);
+                    // }
+                    remaining = Math.max(0, data.totalRecordCount - end);
+                }
+                let upperMargin = 0, lowerMargin = 0;
+                if (widget.measureRowHeights && instance.records) {
+                    upperMargin = this.estimateHeight(instance.records, 0, start);
+                    lowerMargin = this.estimateHeight(instance.records, end, instance.records.length);
+                }
+                else {
+                    upperMargin = start * rowHeight;
+                    lowerMargin = remaining * rowHeight;
+                }
+                //console.log(upperMargin, start * rowHeight, this.rowHeights, this.heightStats);
+                this.dom.table.style.marginTop = `${(-headerHeight + upperMargin).toFixed(0)}px`;
+                this.dom.table.style.marginBottom = `${(lowerMargin - scrollOverlap).toFixed(0)}px`;
+            }
+            else {
+                this.dom.table.style.marginTop = `${-headerHeight}px`;
+                this.dom.table.style.marginBottom = `${-scrollOverlap}px`;
+            }
+            if (this.dom.fixedTable) {
+                this.dom.fixedTable.style.marginTop = this.dom.table.style.marginTop;
+                this.dom.fixedTable.style.marginBottom = this.dom.table.style.marginBottom;
+            }
+            this.rowHeight = rowHeight;
+            let sortersChanged = widget.infinite && !shallowEquals(data.sorters, this.lastSorters);
+            if (data.empty && !widget.infinite) {
+                this.dom.scroller.scrollTop = 0;
+            }
+            if (sortersChanged ||
+                data.filterParams !== this.lastScrollFilterParams ||
+                data.scrollResetParams !== this.lastScrollResetParams) {
+                this.dom.scroller.scrollTop = 0;
+                this.lastScrollFilterParams = data.filterParams;
+                this.lastScrollResetParams = data.scrollResetParams;
+                this.lastSorters = data.sorters;
+                if (widget.infinite) {
+                    this.loadingStartPage = 0;
+                    this.loadingEndPage = 0;
+                    instance.buffer.records = data.records = [];
+                    instance.buffer.totalRecordCount = 0;
+                    instance.buffer.page = 1;
+                    this.prevFetchRecordsState = null;
+                    this.loading = false;
+                }
+            }
+            if (widget.scrollSelectionIntoView && !widget.buffered) {
+                let { CSS, baseClass } = widget;
+                let selectedRowSelector = `.${CSS.element(baseClass, "data")}.${CSS.state("selected")}`;
+                let firstSelectedRow = this.dom.table.querySelector(selectedRowSelector);
+                if (firstSelectedRow != this.selectedEl) {
+                    firstSelectedRow && scrollElementIntoView(firstSelectedRow);
+                    this.selectedEl = firstSelectedRow;
+                }
+            }
+            setTimeout(this.onScroll.bind(this), 0);
+            if (resized)
+                instance.fixedHeaderResizeEvent.notify();
+        }
+    }
+    moveCursor(index, { focused, hover, scrollIntoView, select, selectRange, selectOptions, cellIndex, cellEdit, cancelEdit, } = {}) {
+        let { widget, visibleColumns } = this.props.instance;
+        if (!widget.selectable && !widget.cellEditable)
+            return;
+        let newState = {};
+        if (cellEdit != null && cellEdit != this.state.cellEdit) {
+            newState.cellEdit = cellEdit;
+            if (cellEdit &&
+                (!visibleColumns[this.state.cursorCellIndex] || !visibleColumns[this.state.cursorCellIndex].editor))
+                newState.cellEdit = false;
+        }
+        if (cellIndex != null && cellIndex != this.state.cursorCellIndex) {
+            newState.cursorCellIndex = cellIndex;
+            newState.cellEdit = false;
+        }
+        if (widget.focused)
+            focused = true;
+        if (focused != null && this.state.focused != focused) {
+            newState.focused = focused;
+            newState.cellEdit = false;
+        }
+        if (index != this.state.cursor) {
+            newState.cursor = index;
+            newState.cellEdit = false;
+        }
+        batchUpdates(() => {
+            if (select) {
+                let start = selectRange && this.state.selectionStart != null && this.state.selectionStart >= 0
+                    ? this.state.selectionStart
+                    : index;
+                if (start < 0)
+                    start = index;
+                this.selectRange(start, index, selectOptions);
+                if (!selectRange)
+                    newState.selectionStart = index;
+            }
+            if (Object.keys(newState).length > 0) {
+                let prevState = this.state;
+                let wasCellEditing = prevState.focused && prevState.cellEdit;
+                let futureState = { ...this.state, ...newState };
+                if (!futureState.cellEdit && wasCellEditing) {
+                    // If cell editing is in progress, moving the cursor may cause that the cell editor to unmount before
+                    // the blur event which may cause data loss for components which do not have reactOn=change set, e.g. NumberField.
+                    unfocusElement(null, false);
+                    let record = this.getRecordAt(prevState.cursor);
+                    if ((!this.cellEditorValid || cancelEdit) && this.cellEditUndoData)
+                        record.store.set(widget.recordName, this.cellEditUndoData);
+                    else {
+                        let newData = record.store.get(widget.recordName); //record.data might be stale at this point
+                        if (widget.onCellEdited && newData != this.cellEditUndoData) {
+                            this.props.instance.invoke("onCellEdited", {
+                                column: visibleColumns[prevState.cursorCellIndex],
+                                newData,
+                                oldData: this.cellEditUndoData,
+                                field: visibleColumns[prevState.cursorCellIndex].field,
+                            }, record);
+                            this.cellEditUndoData = newData;
+                        }
+                    }
+                }
+                if (futureState.cellEdit && !wasCellEditing) {
+                    let record = this.getRecordAt(futureState.cursor);
+                    let cellEditUndoData = record.data;
+                    if (widget.onBeforeCellEdit &&
+                        this.props.instance.invoke("onBeforeCellEdit", {
+                            column: visibleColumns[futureState.cursorCellIndex],
+                            data: cellEditUndoData,
+                            field: visibleColumns[futureState.cursorCellIndex].field,
+                        }, record) === false)
+                        return;
+                    this.cellEditUndoData = cellEditUndoData;
+                }
+                this.setState(newState, () => {
+                    if (this.state.focused && !this.state.cellEdit && wasCellEditing)
+                        FocusManager.focus(this.dom.el);
+                    if (scrollIntoView) {
+                        let record = this.getRecordAt(index);
+                        let item = record && this.dom.table.querySelector(`tbody[data-record-key="${record.key}"]`);
+                        let hscroll = false;
+                        if (item) {
+                            if (widget.cellEditable)
+                                if (this.state.cursorCellIndex >= this.props.instance.fixedColumnCount) {
+                                    hscroll = true;
+                                    item = item.firstChild.children[this.state.cursorCellIndex - this.props.instance.fixedColumnCount];
+                                }
+                                else {
+                                    let fixedItem = this.dom.fixedTable.querySelector(`tbody[data-record-key="${record.key}"]`);
+                                    let cell = fixedItem && fixedItem.firstChild.children[this.state.cursorCellIndex];
+                                    if (cell)
+                                        scrollElementIntoView(cell, false, true, 10);
+                                }
+                            scrollElementIntoView(item, true, hscroll, widget.cellEditable ? 10 : 0);
+                        }
+                    }
+                });
+            }
+        });
+    }
+    showCursor(focused) {
+        let { records, isSelected } = this.props.instance;
+        let cursor = this.state.cursor;
+        if (cursor == -1) {
+            if (records) {
+                cursor = records.findIndex((x) => isSelected(x.data, x.index));
+                //if there are no selected records, find the first data record (skip group header)
+                if (cursor == -1)
+                    cursor = records.findIndex((x) => x.type == "data");
+            }
+            else
+                cursor = 0;
+        }
+        this.moveCursor(cursor, { focused: true, scrollIntoView: false });
+    }
+    onFocus() {
+        FocusManager.nudge();
+        //focus moved within the grid
+        if (this.state.focused) {
+            if (this.state.cellEdit && this.dom.el == getActiveElement())
+                this.moveCursor(this.state.cursor, {
+                    cellEdit: false,
+                });
+            return;
+        }
+        let { widget } = this.props.instance;
+        //the cursor will be set if focus in originating from a mouse event
+        setTimeout(() => {
+            this.showCursor(true);
+        }, 0);
+        if (!widget.focused) {
+            if (this.dom.el) {
+                //if an inner element is focused first (autoFocus), this.dom.el! might be undefined
+                oneFocusOut(this, this.dom.el, () => {
+                    this.moveCursor(-1, { focused: false });
+                });
+            }
+        }
+        this.setState({
+            focused: true,
+        });
+    }
+    onBlur() {
+        FocusManager.nudge();
+    }
+    selectRange(from, to, options) {
+        let { instance, data } = this.props;
+        let { records, widget } = instance;
+        if (from > to) {
+            let tmp = from;
+            from = to;
+            to = tmp;
+        }
+        options = {
+            ...options,
+            range: from < to,
+        };
+        let selection = [], indexes = [];
+        for (let cursor = from; cursor <= to; cursor++) {
+            let record;
+            if (records)
+                record = records[cursor];
+            else {
+                let offset = widget.infinite ? data.offset : 0;
+                let r = data.records[cursor - offset];
+                if (r)
+                    record = widget.mapRecord(null, instance, r, cursor - offset);
+            }
+            if (record && record.type == "data") {
+                if (instance.isRecordSelectable && !instance.isRecordSelectable(record.data, options))
+                    continue;
+                selection.push(record.data);
+                indexes.push(record.index);
+            }
+        }
+        widget.selection.selectMultiple(instance.store, selection, indexes, options);
+    }
+    getDataRecordAt(index) {
+        let { records } = this.props.instance;
+        if (!records)
+            return this.getRecordAt(index);
+        let dataRecords = records.filter((r) => r.type == "data");
+        return dataRecords[index];
+    }
+    getRecordAt(cursor) {
+        let { instance, data } = this.props;
+        let { records, widget } = instance;
+        if (records)
+            return records[cursor];
+        let offset = widget.infinite ? data.offset : 0;
+        let r = data.records[cursor - offset];
+        if (r)
+            return widget.mapRecord(null, instance, r, cursor - offset);
+        return undefined;
+    }
+    getRecordInstanceAt(cursor) {
+        let record = this.getRecordAt(cursor);
+        if (!record)
+            return null;
+        let { instance } = this.props;
+        if (instance.recordInstanceCache)
+            return instance.recordInstanceCache.getChild(instance.row, record.store, record.key);
+        //different signature
+        return instance.getChild(null, instance.row, record.key, record.store);
+    }
+    handleKeyDown(e) {
+        let { instance, data } = this.props;
+        let { widget } = instance;
+        if (widget.onKeyDown && instance.invoke("onKeyDown", e, instance) === false)
+            return;
+        let recordInstance = this.getRecordInstanceAt(this.state.cursor);
+        if (recordInstance && widget.onRowKeyDown && instance.invoke("onRowKeyDown", e, recordInstance) === false)
+            return;
+        if (widget.onCellKeyDown && widget.cellEditable && this.state.cursorCellIndex != -1) {
+            if (instance.invoke("onCellKeyDown", e, instance, {
+                cellIndex: this.state.cursorCellIndex,
+                record: recordInstance,
+            }) === false)
+                return;
+        }
+        switch (e.keyCode) {
+            case KeyCode.enter:
+                this.moveCursor(this.state.cursor, {
+                    select: true,
+                    selectOptions: {
+                        toggle: e.ctrlKey && !e.shiftKey,
+                        add: e.ctrlKey && e.shiftKey,
+                    },
+                    selectRange: e.shiftKey,
+                    cellEdit: widget.cellEditable && !this.state.cellEdit,
+                    focused: true,
+                });
+                e.stopPropagation();
+                e.preventDefault();
+                break;
+            case KeyCode.esc:
+                if (this.state.cellEdit) {
+                    this.moveCursor(this.state.cursor, {
+                        cellEdit: false,
+                        focused: true,
+                        cancelEdit: true,
+                    });
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+                break;
+            case KeyCode.tab:
+                if (widget.cellEditable) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let direction = e.shiftKey ? -1 : +1;
+                    let cursor = this.state.cursor;
+                    let cellIndex = (this.state.cursorCellIndex + direction) % instance.row.line1.columns.length;
+                    if (cellIndex == -1) {
+                        cellIndex += instance.row.line1.columns.length;
+                        cursor--;
+                    }
+                    else if (cellIndex == 0 && direction > 0)
+                        cursor++;
+                    for (;; cursor += direction) {
+                        let record = this.getRecordAt(cursor);
+                        if (!record)
+                            break;
+                        if (record.type != "data")
+                            continue;
+                        this.moveCursor(cursor, {
+                            focused: true,
+                            cellIndex,
+                            scrollIntoView: true,
+                            cellEdit: false,
+                        });
+                        break;
+                    }
+                }
+                break;
+            case KeyCode.down:
+                for (let cursor = this.state.cursor + 1;; cursor++) {
+                    let record = this.getRecordAt(cursor);
+                    if (!record)
+                        break;
+                    if (record.type != "data")
+                        continue;
+                    this.moveCursor(cursor, {
+                        focused: true,
+                        scrollIntoView: true,
+                        select: e.shiftKey,
+                        selectRange: e.shiftKey,
+                    });
+                    break;
+                }
+                e.stopPropagation();
+                e.preventDefault();
+                break;
+            case KeyCode.up:
+                for (let cursor = this.state.cursor - 1; cursor >= 0; cursor--) {
+                    let record = this.getRecordAt(cursor);
+                    if (!record)
+                        break;
+                    if (record.type != "data")
+                        continue;
+                    this.moveCursor(cursor, {
+                        focused: true,
+                        scrollIntoView: true,
+                        select: e.shiftKey,
+                        selectRange: e.shiftKey,
+                    });
+                    break;
+                }
+                e.stopPropagation();
+                e.preventDefault();
+                break;
+            case KeyCode.right:
+                if (widget.cellEditable) {
+                    if (this.state.cursorCellIndex + 1 < instance.row.line1.columns.length) {
+                        this.moveCursor(this.state.cursor, {
+                            focused: true,
+                            cellIndex: this.state.cursorCellIndex + 1,
+                            scrollIntoView: true,
+                        });
+                    }
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+                break;
+            case KeyCode.left:
+                if (widget.cellEditable) {
+                    if (this.state.cursorCellIndex > 0) {
+                        this.moveCursor(this.state.cursor, {
+                            focused: true,
+                            cellIndex: this.state.cursorCellIndex - 1,
+                            scrollIntoView: true,
+                        });
+                    }
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+                break;
+            case KeyCode.a:
+                if (!e.ctrlKey || !widget.selection.multiple)
+                    return;
+                if (isTextInputElement(e.target))
+                    return;
+                this.selectRange(0, data.totalRecordCount);
+                e.stopPropagation();
+                e.preventDefault();
+                break;
+        }
+    }
+    beginDragDrop(e, record) {
+        let { instance, data } = this.props;
+        let { widget, store } = instance;
+        let { isRecordDraggable } = instance;
+        if (isRecordDraggable && !isRecordDraggable(record.data))
+            return;
+        //get a fresh isSelected delegate
+        let isSelected = widget.selection.getIsSelectedDelegate(store);
+        let selected = [];
+        let add = (rec, data, index, force) => {
+            if (!data || !(force || isSelected(data, index)) || (isRecordDraggable && !isRecordDraggable(data)))
+                return;
+            let mappedRecord = rec ? { ...rec } : widget.mapRecord(null, instance, data, index);
+            let row = (mappedRecord.row = instance.getDetachedChild(instance.row, "DD:" + mappedRecord.key, mappedRecord.store));
+            row.selected = true;
+            selected.push(mappedRecord);
+        };
+        if (!record.row?.selected) {
+            if (instance.records)
+                instance.records.forEach((r) => add(r, r.data, r.index));
+            else
+                this.getRecordsSlice(0, data.totalRecordCount).forEach((r, index) => add(null, r, index));
+        }
+        if (selected.length == 0)
+            add(record, record.data, record.index, true);
+        let renderRow = this.createRowRenderer(false);
+        let contents = selected.map((record, i) => ({
+            type: StaticText,
+            text: renderRow(record, i, true, false),
+        }));
+        initiateDragDrop(e, {
+            sourceEl: closest(e.currentTarget, (a) => a.tagName == "TBODY"),
+            source: {
+                data: data.dragSource.data,
+                store: store,
+                record: record,
+                records: selected,
+            },
+            clone: {
+                store: record.store,
+                matchCursorOffset: true,
+                matchWidth: true,
+                widget: {
+                    type: HtmlElement,
+                    tag: "div",
+                    className: data.classNames,
+                    children: [
+                        {
+                            type: HtmlElement,
+                            tag: "table",
+                            children: contents,
+                        },
+                    ],
+                },
+            },
+        }, () => {
+            this.setState({
+                dragged: false,
+            });
+        });
+        this.setState({
+            dragged: record,
+        });
+    }
+    onFileDragEnter(ev) {
+        if (!this.props.instance.widget.allowsFileDrops)
+            return;
+        let event = getDragDropEvent(ev, this.props.instance.store, "dragmove");
+        var test = this.onDropTest(event);
+        if (test) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.onDragStart(event);
+        }
+    }
+    onFileDragOver(ev) {
+        if (!this.props.instance.widget.allowsFileDrops)
+            return;
+        let event = getDragDropEvent(ev, this.props.instance.store, "dragmove");
+        var test = this.onDropTest(event);
+        if (test) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.onDragOver(event, { test });
+        }
+    }
+    onFileDragLeave(ev) {
+        if (!this.props.instance.widget.allowsFileDrops)
+            return;
+        if (ev.target != this.dom.el) {
+            //The dragleave event fires when the cursor leave any of the child elements.
+            //We need to be sure that the cursor left the top element too.
+            let el = document.elementFromPoint(ev.clientX, ev.clientY);
+            if (el == this.dom.el || this.dom.el.contains(el))
+                return;
+        }
+        let event = getDragDropEvent(ev, this.props.instance.store, "dragmove");
+        var test = this.onDropTest(event);
+        if (test) {
+            this.onDragLeave(event);
+        }
+    }
+    onFileDrop(ev) {
+        if (!this.props.instance.widget.allowsFileDrops)
+            return;
+        let event = getDragDropEvent(ev, this.props.instance.store, "dragdrop");
+        var test = this.onDropTest(event);
+        if (test) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.onDrop(event);
+        }
+    }
+}
+class GridColumnHeaderLine extends PureContainerBase {
+    declareData() {
+        return super.declareData(...arguments, {
+            showHeader: undefined,
+        });
+    }
+    init() {
+        this.items = Widget.create(GridColumnHeader, this.columns || []);
+        this.visible = this.showHeader;
+        this.style = this.headerStyle;
+        this.className = this.headerClass;
+        this.class = null;
+        super.init();
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        return (_jsx("tr", { className: data.classNames, style: data.style, children: this.renderChildren(context, instance) }, key));
+    }
+}
+GridColumnHeaderLine.prototype.isPureContainer = false;
+GridColumnHeaderLine.prototype.styled = true;
+GridColumnHeaderLine.prototype.showHeader = true;
+GridColumnHeaderLine.autoInit = true;
+class GridColumnHeader extends Widget {
+    declareData() {
+        return super.declareData(...arguments, {
+            format: undefined,
+            width: undefined,
+            defaultWidth: undefined,
+            fixed: undefined,
+        });
+    }
+    init() {
+        delete this.style;
+        delete this.className;
+        delete this.class;
+        if (this.header)
+            this.header1 = this.header;
+        if (this.header1 || this.resizable || this.width || this.defaultWidth || this.sortable || this.draggable) {
+            if (!isObject(this.header1))
+                this.header1 = {
+                    text: this.header1 || "",
+                };
+            if (this.resizable)
+                this.header1.resizable = this.resizable;
+            if (this.width)
+                this.header1.width = this.width;
+            if (this.defaultWidth)
+                this.header1.defaultWidth = this.defaultWidth;
+            if (this.draggable)
+                this.header1.draggable = this.draggable;
+        }
+        if (this.header2 && isSelector(this.header2))
+            this.header2 = {
+                text: this.header2,
+            };
+        if (this.header3 && isSelector(this.header3))
+            this.header3 = {
+                text: this.header3,
+            };
+        if (!this.aggregateField && this.field)
+            this.aggregateField = this.field;
+        if (!this.aggregateAlias)
+            this.aggregateAlias = this.aggregateField;
+        if (this.aggregateAlias)
+            this.aggregateAliasGetter = Binding.get(this.aggregateAlias).value;
+        if (this.footer && isSelector(this.footer))
+            this.footer = {
+                value: this.footer,
+                pad: this.pad,
+                colSpan: this.colSpan,
+            };
+        if (this.footer) {
+            this.footer.value = getSelector(this.footer.value);
+            this.footer.class = getSelector(this.footer.class);
+            this.footer.style = getSelector(this.footer.style);
+            this.footer.format = getSelector(this.footer.format);
+        }
+        if (this.caption && isSelector(this.caption))
+            this.caption = {
+                value: this.caption,
+                pad: this.pad,
+                format: this.format,
+            };
+        if (this.caption) {
+            let children = this.caption.children || this.caption.items;
+            if (children) {
+                delete this.caption.items;
+                this.caption.children = Widget.create(children);
+            }
+            else {
+                this.caption.value = getSelector(this.caption.value);
+                this.caption.format = getSelector(this.caption.format);
+            }
+            this.caption.class = getSelector(this.caption.class);
+            this.caption.style = getSelector(this.caption.style);
+        }
+        super.init();
+    }
+    initComponents() {
+        return super.initComponents({
+            header1: this.header1 && GridColumnHeaderCell.create(this.header1),
+            header2: this.header2 && GridColumnHeaderCell.create(this.header2),
+            header3: this.header3 && GridColumnHeaderCell.create(this.header3),
+        });
+    }
+    render() {
+        return null;
+    }
+}
+GridColumnHeader.autoInit = true;
+class GridColumnHeaderCell extends PureContainerBase {
+    declareData() {
+        return super.declareData(...arguments, {
+            text: undefined,
+            colSpan: undefined,
+            rowSpan: undefined,
+            width: undefined,
+            defaultWidth: undefined,
+            resizable: undefined,
+            fixed: undefined,
+            draggable: undefined,
+        });
+    }
+    initComponents() {
+        return super.initComponents(...arguments, {
+            tool: this.tool && Widget.create(this.tool),
+        });
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        return data.text || super.render(context, instance, key);
+    }
+}
+GridColumnHeaderCell.prototype.colSpan = 1;
+GridColumnHeaderCell.prototype.rowSpan = 1;
+GridColumnHeaderCell.prototype.allowSorting = true;
+GridColumnHeaderCell.prototype.styled = true;
+GridColumnHeaderCell.prototype.fixed = false;
+// function initGrouping(grouping) {
+//    grouping.forEach((g) => {
+//       if (g.caption) g.caption = getSelector(g.caption);
+//    });
+// }
+function copyCellSize(srcTableBody, dstTableBody, applyHeight = true) {
+    if (!srcTableBody || !dstTableBody)
+        return false;
+    let changed = false;
+    for (let r = 0; r < dstTableBody.children.length && r < srcTableBody.children.length; r++) {
+        let sr = srcTableBody.children[r];
+        let dr = dstTableBody.children[r];
+        for (let c = 0; c < dr.children.length && c < sr.children.length; c++) {
+            let dc = dr.children[c];
+            let sc = sr.children[c];
+            let ws = `${sc.offsetWidth}px`;
+            if (!changed && dc.style.width != ws)
+                changed = true;
+            dc.style.width = dc.style.minWidth = dc.style.maxWidth = ws;
+            if (applyHeight)
+                dc.style.height = `${sc.offsetHeight}px`;
+        }
+    }
+    return changed;
+}
+function copyCellSizePrecise(srcTableBody, dstTableBody, applyHeight = true) {
+    if (!srcTableBody || !dstTableBody)
+        return false;
+    let changed = false;
+    for (let r = 0; r < dstTableBody.children.length && r < srcTableBody.children.length; r++) {
+        let sr = srcTableBody.children[r];
+        let dr = dstTableBody.children[r];
+        for (let c = 0; c < dr.children.length && c < sr.children.length; c++) {
+            let dc = dr.children[c];
+            let sc = sr.children[c];
+            let bounds = sc.getBoundingClientRect();
+            let ws = `${bounds.width}px`;
+            if (!changed && dc.style.width != ws)
+                changed = true;
+            dc.style.width = dc.style.minWidth = dc.style.maxWidth = ws;
+            if (applyHeight)
+                dc.style.height = `${bounds.height}px`;
+        }
+    }
+    return changed;
+}
+function syncHeaderHeights(header1, header2) {
+    /**
+     * In the first pass measure all row heights.
+     * In the second pass apply those heights.
+     * Use getBoundingClientRect() for sub-pixel accuracy.
+     */
+    if (!header1 || !header2)
+        return;
+    const rowCount = Math.max(header1.children.length, header2.children.length);
+    let rowHeight = [];
+    for (let r = 0; r < rowCount; r++) {
+        rowHeight.push(0);
+        let tr1 = header1.children[r];
+        let tr2 = header2.children[r];
+        if (tr1) {
+            for (let i = 0; i < tr1.children.length; i++) {
+                let td = tr1.children[i];
+                let h = td.getBoundingClientRect().height;
+                if (td.rowSpan == 1 && h > rowHeight[r]) {
+                    rowHeight[r] = h;
+                    break;
+                }
+            }
+        }
+        if (tr2) {
+            for (let i = 0; i < tr2.children.length; i++) {
+                let td = tr2.children[i];
+                let h = td.getBoundingClientRect().height;
+                if (td.rowSpan == 1 && h > rowHeight[r]) {
+                    rowHeight[r] = h;
+                    break;
+                }
+            }
+        }
+    }
+    for (let r = 0; r < rowCount; r++) {
+        let tr1 = header1.children[r];
+        let tr2 = header2.children[r];
+        if (tr1) {
+            for (let i = 0; i < tr1.children.length; i++) {
+                let td = tr1.children[i];
+                let h = 0;
+                for (let x = 0; x < td.rowSpan; x++)
+                    h += rowHeight[r + x];
+                td.style.height = `${h}px`;
+            }
+        }
+        if (tr2) {
+            for (let i = 0; i < tr2.children.length; i++) {
+                let td = tr2.children[i];
+                let h = 0;
+                for (let x = 0; x < td.rowSpan; x++)
+                    h += rowHeight[r + x];
+                td.style.height = `${h}px`;
+            }
+        }
+    }
+}
+class AvgHeight {
+    constructor() {
+        this.groups = {};
+    }
+    add(group, height) {
+        let g = this.groups[group];
+        if (!g)
+            g = this.groups[group] = { sum: 0, count: 0 };
+        g.sum += height;
+        g.count++;
+    }
+    estimate(group) {
+        let g = this.groups[group];
+        if (!g || g.count == 0)
+            return null;
+        return Math.round(g.sum / g.count);
+    }
+}
+function getDragDropEvent(ev, store, type) {
+    return {
+        type,
+        event: ev,
+        cursor: getCursorPos(ev),
+        dataTransfer: ev.dataTransfer,
+        source: {
+            width: 32,
+            height: 32,
+            margin: [],
+            store,
+        },
+    };
+}