@youp-grid/react 0.1.0

package/dist/YoupGrid.js

@@ -0,0 +1,1621 @@
+import { createRemoteCacheKey, createValueHistoryState, exportGridCsv, getFillHandleCells, getFillHandleTargetRange, getInfiniteScrollTrigger, getVirtualRange, getClipboardPasteCells, isCellInRange, isRowGroupNode, normalizeCellRange, parseClipboardText, pushValueHistoryEntry, redoValueHistory, serializeGridRange, undoValueHistory, } from "@youp-grid/core";
+import { createElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useYoupGrid } from "./useYoupGrid.js";
+const VALUE_HISTORY_LIMIT = 100;
+const DEFAULT_DENSITY = "standard";
+const DENSITY_ROW_HEIGHTS = {
+    compact: 30,
+    standard: 38,
+    comfortable: 46,
+};
+const SELECTION_COLUMN_WIDTH = 44;
+export function YoupGrid(props) {
+    const controller = useYoupGrid(props);
+    const rowModel = controller.rowModel;
+    const [internalDensity, setInternalDensity] = useState(props.defaultDensity ?? DEFAULT_DENSITY);
+    const density = props.density ?? internalDensity;
+    const rowHeight = props.rowHeight ?? DENSITY_ROW_HEIGHTS[density];
+    const viewportHeight = normalizeHeight(props.height) ?? 420;
+    const loading = props.loading ?? controller.state.remoteRequest?.status === "loading";
+    const infiniteScrollLoading = props.infiniteScrollLoading ?? loading;
+    const bodyRef = useRef(null);
+    const lastRowsEndReachedKeyRef = useRef();
+    const skipNextBlurCommitRef = useRef(false);
+    const valueHistoryRef = useRef(createValueHistoryState());
+    const [scrollTop, setScrollTop] = useState(0);
+    const [focusedRowIndex, setFocusedRowIndex] = useState(0);
+    const [focusedColumnIndex, setFocusedColumnIndex] = useState(0);
+    const [selectionRange, setSelectionRange] = useState();
+    const [fillRange, setFillRange] = useState();
+    const [editingCell, setEditingCell] = useState();
+    const [columnChooserOpen, setColumnChooserOpen] = useState(false);
+    const [columnMenuOpenId, setColumnMenuOpenId] = useState();
+    const showRowSelectionColumn = props.showRowSelectionColumn ?? false;
+    const displayRows = rowModel.displayRows;
+    const virtualRange = useMemo(() => {
+        return getVirtualRange({
+            itemCount: displayRows.length,
+            itemSize: rowHeight,
+            viewportSize: viewportHeight,
+            scrollOffset: scrollTop,
+            overscan: props.overscan,
+        });
+    }, [displayRows.length, props.overscan, rowHeight, scrollTop, viewportHeight]);
+    const lastVisibleRowIndex = useMemo(() => {
+        if (rowModel.visibleRows.length === 0) {
+            return -1;
+        }
+        return Math.min(rowModel.visibleRows.length - 1, Math.max(-1, Math.ceil((scrollTop + viewportHeight) / rowHeight) - 1));
+    }, [rowHeight, rowModel.visibleRows.length, scrollTop, viewportHeight]);
+    const infiniteScrollTrigger = useMemo(() => {
+        return getInfiniteScrollTrigger({
+            rowCount: rowModel.visibleRows.length,
+            lastVisibleRowIndex,
+            threshold: props.infiniteScrollThreshold,
+            hasMoreRows: props.hasMoreRows,
+            loading: infiniteScrollLoading,
+        });
+    }, [
+        infiniteScrollLoading,
+        props.hasMoreRows,
+        props.infiniteScrollThreshold,
+        lastVisibleRowIndex,
+        rowModel.visibleRows.length,
+    ]);
+    const infiniteScrollLoadKey = useMemo(() => {
+        return `${createRemoteCacheKey(controller.state)}:${infiniteScrollTrigger.rowCount}`;
+    }, [controller.state, infiniteScrollTrigger.rowCount]);
+    const currentSelectedRowIds = controller.state.selectedRowIds ?? [];
+    const selectedRowIds = new Set(currentSelectedRowIds);
+    const visibleRowIds = useMemo(() => rowModel.visibleRows.map((row) => row.id), [rowModel.visibleRows]);
+    const selectedVisibleRowCount = visibleRowIds.filter((rowId) => selectedRowIds.has(rowId)).length;
+    const allVisibleRowsSelected = visibleRowIds.length > 0 && selectedVisibleRowCount === visibleRowIds.length;
+    const someVisibleRowsSelected = selectedVisibleRowCount > 0 && !allVisibleRowsSelected;
+    const columnLayouts = useMemo(() => {
+        return getColumnLayouts(rowModel.visibleColumns, {
+            leftOffset: showRowSelectionColumn ? SELECTION_COLUMN_WIDTH : 0,
+        });
+    }, [rowModel.visibleColumns, showRowSelectionColumn]);
+    const visibleColumns = useMemo(() => columnLayouts.map((layout) => layout.column), [columnLayouts]);
+    const visibleRowIndexById = useMemo(() => {
+        return new Map(rowModel.visibleRows.map((row, index) => [row.id, index]));
+    }, [rowModel.visibleRows]);
+    const displayIndexByVisibleRowIndex = useMemo(() => {
+        const displayIndexByRowId = new Map();
+        displayRows.forEach((row, index) => {
+            if (!isRowGroupNode(row)) {
+                displayIndexByRowId.set(row.id, index);
+            }
+        });
+        return new Map(rowModel.visibleRows.map((row, index) => [
+            index,
+            displayIndexByRowId.get(row.id) ?? index,
+        ]));
+    }, [displayRows, rowModel.visibleRows]);
+    const headerGroupLayouts = useMemo(() => getHeaderGroupLayouts(columnLayouts), [columnLayouts]);
+    const hasHeaderGroups = headerGroupLayouts.some((layout) => layout.headerGroup);
+    const showAggregationFooter = (props.showAggregationFooter ?? true) && rowModel.aggregation.length > 0;
+    const focusedCell = {
+        rowIndex: focusedRowIndex,
+        columnIndex: focusedColumnIndex,
+    };
+    const gridStyle = {
+        ...props.style,
+    };
+    const renderedRows = virtualRange.items
+        .map((item) => {
+        const row = displayRows[item.index];
+        return row ? { row, displayIndex: item.index } : undefined;
+    })
+        .filter((item) => Boolean(item));
+    useEffect(() => {
+        if (focusedRowIndex >= rowModel.visibleRows.length) {
+            setFocusedRowIndex(Math.max(0, rowModel.visibleRows.length - 1));
+        }
+    }, [focusedRowIndex, rowModel.visibleRows.length]);
+    useEffect(() => {
+        if (focusedColumnIndex >= columnLayouts.length) {
+            setFocusedColumnIndex(Math.max(0, columnLayouts.length - 1));
+        }
+    }, [columnLayouts.length, focusedColumnIndex]);
+    useEffect(() => {
+        if (columnMenuOpenId && !visibleColumns.some((column) => column.id === columnMenuOpenId)) {
+            setColumnMenuOpenId(undefined);
+        }
+    }, [columnMenuOpenId, visibleColumns]);
+    useEffect(() => {
+        if (!props.infiniteScroll || !props.onRowsEndReached || !infiniteScrollTrigger.shouldLoadMore) {
+            return;
+        }
+        if (lastRowsEndReachedKeyRef.current === infiniteScrollLoadKey) {
+            return;
+        }
+        lastRowsEndReachedKeyRef.current = infiniteScrollLoadKey;
+        props.onRowsEndReached({
+            state: controller.state,
+            rowModel,
+            rowCount: infiniteScrollTrigger.rowCount,
+            lastVisibleRowIndex: infiniteScrollTrigger.lastVisibleRowIndex,
+            threshold: infiniteScrollTrigger.threshold,
+            remainingRows: infiniteScrollTrigger.remainingRows,
+        });
+    }, [
+        controller.state,
+        infiniteScrollLoadKey,
+        infiniteScrollTrigger,
+        props.infiniteScroll,
+        props.onRowsEndReached,
+        rowModel,
+    ]);
+    const startEditingCell = (cell) => {
+        skipNextBlurCommitRef.current = false;
+        setEditingCell(cell);
+    };
+    const cancelEditingCell = () => {
+        skipNextBlurCommitRef.current = true;
+        setEditingCell(undefined);
+    };
+    const applyCellValueChanges = (changes, source) => {
+        if (changes.length === 0) {
+            return;
+        }
+        if (source === "edit" || source === "paste" || source === "fill") {
+            valueHistoryRef.current = pushValueHistoryEntry(valueHistoryRef.current, {
+                changes: changes.map((change) => ({
+                    rowId: change.rowId,
+                    rowIndex: change.rowIndex,
+                    columnId: change.columnId,
+                    previousValue: change.previousValue,
+                    value: change.value,
+                })),
+            }, { maxEntries: VALUE_HISTORY_LIMIT });
+        }
+        for (const change of changes) {
+            props.onCellValueChange?.({
+                ...change,
+                source,
+            });
+        }
+    };
+    const applyValueHistoryEntry = (entry, source) => {
+        applyCellValueChanges(getHistoryEntryValueChanges({
+            entry,
+            rowModel,
+            source,
+        }), source);
+    };
+    const undoCellValueChange = () => {
+        const result = undoValueHistory(valueHistoryRef.current);
+        if (!result.entry) {
+            return false;
+        }
+        valueHistoryRef.current = result.state;
+        applyValueHistoryEntry(result.entry, "undo");
+        return true;
+    };
+    const redoCellValueChange = () => {
+        const result = redoValueHistory(valueHistoryRef.current);
+        if (!result.entry) {
+            return false;
+        }
+        valueHistoryRef.current = result.state;
+        applyValueHistoryEntry(result.entry, "redo");
+        return true;
+    };
+    const commitEditingValue = (cell, source = "keyboard") => {
+        if (source === "blur" && skipNextBlurCommitRef.current) {
+            skipNextBlurCommitRef.current = false;
+            return;
+        }
+        if (source === "keyboard") {
+            skipNextBlurCommitRef.current = true;
+        }
+        commitEditingCell({
+            cell,
+            rowModel,
+            applyCellValueChanges,
+        });
+        setEditingCell(undefined);
+    };
+    const setFocusedCell = (cell, extendSelection = false, selectionAnchor) => {
+        if (extendSelection) {
+            setSelectionRange({
+                anchor: selectionRange?.anchor ?? selectionAnchor ?? focusedCell,
+                focus: cell,
+            });
+        }
+        else {
+            setSelectionRange(undefined);
+        }
+        setFocusedRowIndex(cell.rowIndex);
+        setFocusedColumnIndex(cell.columnIndex);
+    };
+    const setDensity = (nextDensity) => {
+        if (props.density === undefined) {
+            setInternalDensity(nextDensity);
+        }
+        props.onDensityChange?.(nextDensity);
+    };
+    const setVisibleRowsSelected = (selected) => {
+        if (selected) {
+            controller.setSelectedRows([...new Set([...currentSelectedRowIds, ...visibleRowIds])]);
+            return;
+        }
+        const visibleRowIdSet = new Set(visibleRowIds);
+        controller.setSelectedRows(currentSelectedRowIds.filter((rowId) => !visibleRowIdSet.has(rowId)));
+    };
+    return createElement("div", {
+        className: ["youp-grid", `youp-grid--density-${density}`, props.className].filter(Boolean).join(" "),
+        style: gridStyle,
+    }, renderColumnToolbar({
+        showColumnChooser: props.showColumnChooser ?? true,
+        showCsvExport: props.showCsvExport ?? true,
+        showDensityControl: props.showDensityControl ?? true,
+        density,
+        open: columnChooserOpen,
+        columns: rowModel.columns,
+        toggleOpen: () => setColumnChooserOpen((current) => !current),
+        setDensity,
+        setColumnHidden: controller.setColumnHidden,
+        setColumnPinned: controller.setColumnPinned,
+        exportCsv: () => {
+            downloadTextFile({
+                fileName: props.csvFileName ?? "youp-grid.csv",
+                mimeType: "text/csv;charset=utf-8",
+                text: exportGridCsv({
+                    rows: rowModel.visibleRows,
+                    columns: visibleColumns,
+                }),
+            });
+        },
+    }), createElement("div", {
+        className: "youp-grid__viewport",
+        role: "grid",
+        "aria-rowcount": displayRows.length,
+        "aria-colcount": rowModel.visibleColumns.length + (showRowSelectionColumn ? 1 : 0),
+        "aria-busy": loading || undefined,
+        onCopy: (event) => {
+            if (editingCell) {
+                return;
+            }
+            handleGridCopy({
+                event,
+                focusedCell,
+                selectionRange,
+                rows: rowModel.visibleRows,
+                columns: visibleColumns,
+            });
+        },
+        onPaste: (event) => {
+            if (editingCell) {
+                return;
+            }
+            handleGridPaste({
+                event,
+                focusedCell,
+                selectionRange,
+                rows: rowModel.visibleRows,
+                columns: visibleColumns,
+                applyCellValueChanges,
+            });
+        },
+    }, createElement("div", { className: "youp-grid__header", role: "rowgroup" }, hasHeaderGroups
+        ? createElement("div", { className: "youp-grid__row youp-grid__row--header-group", role: "row" }, showRowSelectionColumn
+            ? renderSelectionHeaderGroupCell()
+            : undefined, headerGroupLayouts.map((layout) => renderHeaderGroupCell(layout)))
+        : undefined, createElement("div", { className: "youp-grid__row youp-grid__row--header", role: "row" }, showRowSelectionColumn
+        ? renderSelectionHeaderCell({
+            checked: allVisibleRowsSelected,
+            indeterminate: someVisibleRowsSelected,
+            disabled: visibleRowIds.length === 0,
+            toggleSelected: setVisibleRowsSelected,
+        })
+        : undefined, columnLayouts.map((layout) => {
+        const sorted = controller.state.sort?.find((rule) => rule.columnId === layout.column.id)?.direction;
+        return renderHeaderCell({
+            layout,
+            sorted,
+            toggleSort: () => controller.toggleSort(layout.column.id),
+            setSort: (direction) => controller.setSort(layout.column.id, direction),
+            clearSort: () => controller.clearSort(layout.column.id),
+            filterValue: getFilterValue(controller.state, layout.column.id),
+            showFilter: props.showFilters ?? true,
+            setFilter: (value) => {
+                if (value) {
+                    controller.setFilter(layout.column.id, value);
+                }
+                else {
+                    controller.clearFilter(layout.column.id);
+                }
+            },
+            resizeColumn: (width) => controller.setColumnWidth(layout.column.id, width),
+            showMenu: props.showColumnMenu ?? true,
+            menuOpen: columnMenuOpenId === layout.column.id,
+            toggleMenu: () => {
+                setColumnMenuOpenId((current) => current === layout.column.id ? undefined : layout.column.id);
+            },
+            closeMenu: () => setColumnMenuOpenId(undefined),
+            setColumnHidden: (hidden) => controller.setColumnHidden(layout.column.id, hidden),
+            setColumnPinned: (pinned) => controller.setColumnPinned(layout.column.id, pinned),
+            renderHeader: props.renderHeader,
+        });
+    }))), createElement("div", {
+        className: "youp-grid__body",
+        role: "rowgroup",
+        ref: bodyRef,
+        style: { height: viewportHeight },
+        onScroll: (event) => {
+            setScrollTop(event.currentTarget.scrollTop);
+        },
+    }, rowModel.visibleRows.length === 0 && !props.loading && !props.error
+        ? createElement("div", { className: "youp-grid__empty" }, props.emptyContent ?? "No rows")
+        : rowModel.visibleRows.length === 0
+            ? undefined
+            : createElement("div", {
+                className: "youp-grid__virtual-spacer",
+                style: { height: virtualRange.totalSize },
+            }, createElement("div", {
+                className: "youp-grid__virtual-window",
+                style: { transform: `translateY(${virtualRange.beforeSize}px)` },
+            }, renderedRows.map(({ row, displayIndex }) => {
+                if (isRowGroupNode(row)) {
+                    return renderGroupRow({
+                        row,
+                        columns: columnLayouts,
+                        showSelectionColumn: showRowSelectionColumn,
+                        rowHeight,
+                        toggleExpanded: controller.toggleRowGroupExpanded,
+                    });
+                }
+                const rowIndex = visibleRowIndexById.get(row.id) ?? displayIndex;
+                return renderRow({
+                    row,
+                    columns: columnLayouts,
+                    selected: selectedRowIds.has(row.id),
+                    showSelectionColumn: showRowSelectionColumn,
+                    displayIndex,
+                    rowIndex,
+                    rowHeight,
+                    focusedCell: {
+                        rowIndex: focusedRowIndex,
+                        columnIndex: focusedColumnIndex,
+                    },
+                    selectionRange,
+                    fillRange,
+                    editingCell,
+                    editable: props.editable ?? true,
+                    setRowSelected: (selected) => controller.setRowSelected(row.id, selected),
+                    setFocusedCell,
+                    startFillHandle: (event) => {
+                        const sourceRange = normalizeCellRange(selectionRange ?? {
+                            anchor: focusedCell,
+                            focus: focusedCell,
+                        });
+                        startFillHandleDrag({
+                            event,
+                            sourceRange,
+                            rowCount: rowModel.visibleRows.length,
+                            columnCount: columnLayouts.length,
+                            setFillRange,
+                            applyFillRange: (targetRange) => {
+                                applyFillHandleValues({
+                                    sourceRange,
+                                    targetRange,
+                                    rows: rowModel.visibleRows,
+                                    columns: visibleColumns,
+                                    applyCellValueChanges,
+                                });
+                                const nextSelectionRange = getFillSelectionRange(sourceRange, targetRange);
+                                setSelectionRange(nextSelectionRange);
+                                setFocusedRowIndex(nextSelectionRange.focus.rowIndex);
+                                setFocusedColumnIndex(nextSelectionRange.focus.columnIndex);
+                            },
+                        });
+                    },
+                    startEditing: startEditingCell,
+                    updateEditingDraft: (draftValue) => {
+                        setEditingCell((current) => current ? { ...current, draftValue } : current);
+                    },
+                    cancelEditing: cancelEditingCell,
+                    commitEditing: commitEditingValue,
+                    onRowClick: props.onRowClick,
+                    onRowDoubleClick: props.onRowDoubleClick,
+                    onCellKeyDown: (event, cell) => {
+                        handleCellKeyDown({
+                            event,
+                            cell,
+                            rowCount: rowModel.visibleRows.length,
+                            columnCount: columnLayouts.length,
+                            rowHeight,
+                            bodyElement: bodyRef.current,
+                            getDisplayRowIndex: (rowIndex) => displayIndexByVisibleRowIndex.get(rowIndex) ?? rowIndex,
+                            setFocusedCell,
+                            selectionRange,
+                            startEditing: startEditingCell,
+                            commitEditing: commitEditingValue,
+                            cancelEditing: cancelEditingCell,
+                            undoCellValueChange,
+                            redoCellValueChange,
+                            toggleSelected: () => controller.toggleRowSelected(row.id),
+                        });
+                    },
+                    renderCell: props.renderCell,
+                });
+            }))), renderGridOverlay({
+        loading,
+        loadingContent: props.loadingContent,
+        error: props.error,
+        errorContent: props.errorContent,
+    })), renderAggregationFooter({
+        enabled: showAggregationFooter,
+        aggregation: rowModel.aggregation,
+        columns: columnLayouts,
+        showSelectionColumn: showRowSelectionColumn,
+    })), renderPagination({
+        enabled: props.showPagination ?? true,
+        cursorPagination: controller.state.cursorPagination,
+        pageCount: rowModel.pageCount,
+        pagination: controller.state.pagination,
+        visibleRowCount: rowModel.visibleRowCount,
+        filteredRowCount: rowModel.filteredRowCount,
+        setCursorPage: controller.setCursorPage,
+        setCursorPageSize: controller.setCursorPageSize,
+        setPage: controller.setPage,
+        setPageSize: controller.setPageSize,
+    }));
+}
+function renderGridOverlay(context) {
+    if (context.error) {
+        return createElement("div", { className: "youp-grid__overlay youp-grid__overlay--error", role: "alert" }, createElement("div", { className: "youp-grid__overlay-content" }, context.errorContent ?? "Unable to load rows"));
+    }
+    if (context.loading) {
+        return createElement("div", { className: "youp-grid__overlay youp-grid__overlay--loading", role: "status", "aria-live": "polite" }, createElement("div", { className: "youp-grid__overlay-content" }, context.loadingContent ?? "Loading rows"));
+    }
+    return undefined;
+}
+function renderAggregationFooter(context) {
+    if (!context.enabled) {
+        return undefined;
+    }
+    const aggregationByColumn = groupAggregationByColumn(context.aggregation);
+    return createElement("div", { className: "youp-grid__aggregation", role: "rowgroup" }, createElement("div", { className: "youp-grid__row youp-grid__row--aggregation", role: "row" }, context.showSelectionColumn ? renderSelectionAggregationCell() : undefined, context.columns.map((layout) => {
+        const results = aggregationByColumn.get(layout.column.id) ?? [];
+        return createElement("div", {
+            key: layout.column.id,
+            className: getCellClassName("youp-grid__cell youp-grid__cell--aggregation", layout),
+            role: "gridcell",
+            style: getCellStyle(layout),
+        }, results.map(formatAggregationResult).join(" · "));
+    })));
+}
+function renderSelectionAggregationCell() {
+    return createElement("div", {
+        className: "youp-grid__selection-cell youp-grid__selection-cell--aggregation",
+        role: "gridcell",
+        style: getSelectionCellStyle(),
+        "aria-hidden": true,
+    });
+}
+function groupAggregationByColumn(results) {
+    const byColumn = new Map();
+    for (const result of results) {
+        const existing = byColumn.get(result.columnId) ?? [];
+        existing.push(result);
+        byColumn.set(result.columnId, existing);
+    }
+    return byColumn;
+}
+function formatAggregationResult(result) {
+    return `${result.label} ${formatAggregationValue(result.value)}`;
+}
+function formatAggregationValue(value) {
+    if (value === undefined) {
+        return "-";
+    }
+    if (Number.isInteger(value)) {
+        return String(value);
+    }
+    return value.toFixed(2);
+}
+function renderHeaderGroupCell(layout) {
+    return createElement("div", {
+        key: layout.id,
+        className: getHeaderGroupClassName(layout),
+        role: "columnheader",
+        "aria-colspan": layout.columnCount,
+        "aria-hidden": layout.headerGroup ? undefined : true,
+        style: getHeaderGroupStyle(layout),
+    }, layout.headerGroup ?? "");
+}
+function renderSelectionHeaderGroupCell() {
+    return createElement("div", {
+        key: "__selection-group",
+        className: "youp-grid__cell youp-grid__cell--header-group youp-grid__selection-cell youp-grid__selection-cell--header-group",
+        role: "columnheader",
+        "aria-hidden": true,
+        style: getSelectionCellStyle(),
+    });
+}
+function renderSelectionHeaderCell(context) {
+    return createElement("div", {
+        key: "__selection",
+        className: "youp-grid__cell youp-grid__cell--header youp-grid__selection-cell youp-grid__selection-cell--header",
+        role: "columnheader",
+        style: getSelectionCellStyle(),
+    }, createElement(SelectionHeaderCheckbox, context));
+}
+function SelectionHeaderCheckbox(context) {
+    const inputRef = useRef(null);
+    useLayoutEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = context.indeterminate;
+        }
+    }, [context.indeterminate]);
+    return createElement("input", {
+        className: "youp-grid__selection-checkbox",
+        type: "checkbox",
+        checked: context.checked,
+        disabled: context.disabled,
+        "aria-label": "Select visible rows",
+        "aria-checked": context.indeterminate ? "mixed" : context.checked,
+        ref: inputRef,
+        onChange: (event) => {
+            context.toggleSelected(event.currentTarget.checked);
+        },
+        onClick: (event) => {
+            event.stopPropagation();
+        },
+    });
+}
+function renderHeaderCell(context) {
+    const sortable = context.layout.column.sortable !== false;
+    return createElement("div", {
+        key: context.layout.column.id,
+        className: getCellClassName("youp-grid__cell youp-grid__cell--header", context.layout),
+        role: "columnheader",
+        style: getCellStyle(context.layout),
+        "aria-sort": context.sorted === "desc" ? "descending" : context.sorted === "asc" ? "ascending" : "none",
+    }, createElement("div", { className: "youp-grid__header-main" }, createElement("button", {
+        className: "youp-grid__sort-button",
+        type: "button",
+        disabled: !sortable,
+        onClick: sortable ? context.toggleSort : undefined,
+    }, context.renderHeader
+        ? context.renderHeader({
+            column: context.layout.column,
+            sorted: context.sorted,
+            toggleSort: context.toggleSort,
+        })
+        : createElement("span", { className: "youp-grid__header-label" }, context.layout.column.headerName, context.sorted ? ` ${context.sorted === "desc" ? "↓" : "↑"}` : "")), context.showMenu
+        ? createElement("button", {
+            className: "youp-grid__column-menu-button",
+            type: "button",
+            "aria-haspopup": "menu",
+            "aria-expanded": context.menuOpen,
+            "aria-label": `${context.layout.column.headerName} column menu`,
+            onClick: (event) => {
+                event.stopPropagation();
+                context.toggleMenu();
+            },
+        }, "⋯")
+        : undefined), context.menuOpen
+        ? renderColumnMenu({
+            column: context.layout.column,
+            sortable,
+            sorted: context.sorted,
+            filterValue: context.filterValue,
+            setSort: context.setSort,
+            clearSort: context.clearSort,
+            clearFilter: () => context.setFilter(""),
+            setColumnHidden: context.setColumnHidden,
+            setColumnPinned: context.setColumnPinned,
+            closeMenu: context.closeMenu,
+        })
+        : undefined, context.showFilter && context.layout.column.filterable !== false
+        ? createElement("input", {
+            className: "youp-grid__filter",
+            value: context.filterValue,
+            placeholder: "Filter",
+            "aria-label": `Filter ${context.layout.column.headerName}`,
+            onChange: (event) => {
+                context.setFilter(event.currentTarget.value);
+            },
+            onClick: (event) => event.stopPropagation(),
+        })
+        : undefined, createElement("span", {
+        className: "youp-grid__resize-handle",
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": `Resize ${context.layout.column.headerName}`,
+        onMouseDown: (event) => {
+            startColumnResize({
+                event,
+                column: context.layout.column,
+                resizeColumn: context.resizeColumn,
+            });
+        },
+    }));
+}
+function renderColumnMenu(context) {
+    const runAction = (action) => {
+        action();
+        context.closeMenu();
+    };
+    return createElement("div", { className: "youp-grid__column-menu", role: "menu" }, renderColumnMenuButton({
+        label: "Sort ascending",
+        disabled: !context.sortable || context.sorted === "asc",
+        onClick: () => runAction(() => context.setSort("asc")),
+    }), renderColumnMenuButton({
+        label: "Sort descending",
+        disabled: !context.sortable || context.sorted === "desc",
+        onClick: () => runAction(() => context.setSort("desc")),
+    }), renderColumnMenuButton({
+        label: "Clear sort",
+        disabled: !context.sorted,
+        onClick: () => runAction(context.clearSort),
+    }), createElement("div", { className: "youp-grid__column-menu-separator", role: "separator" }), renderColumnMenuButton({
+        label: "Pin left",
+        disabled: context.column.pinned === "left",
+        onClick: () => runAction(() => context.setColumnPinned("left")),
+    }), renderColumnMenuButton({
+        label: "Pin right",
+        disabled: context.column.pinned === "right",
+        onClick: () => runAction(() => context.setColumnPinned("right")),
+    }), renderColumnMenuButton({
+        label: "Unpin",
+        disabled: !context.column.pinned,
+        onClick: () => runAction(() => context.setColumnPinned(undefined)),
+    }), createElement("div", { className: "youp-grid__column-menu-separator", role: "separator" }), renderColumnMenuButton({
+        label: "Clear filter",
+        disabled: !context.filterValue,
+        onClick: () => runAction(context.clearFilter),
+    }), renderColumnMenuButton({
+        label: "Hide column",
+        onClick: () => runAction(() => context.setColumnHidden(true)),
+    }));
+}
+function renderColumnMenuButton(context) {
+    return createElement("button", {
+        className: "youp-grid__column-menu-item",
+        type: "button",
+        role: "menuitem",
+        disabled: context.disabled,
+        onClick: (event) => {
+            event.stopPropagation();
+            context.onClick();
+        },
+    }, context.label);
+}
+function renderGroupRow(context) {
+    const width = getColumnsWidth(context.columns);
+    return createElement("div", {
+        key: context.row.groupId,
+        className: "youp-grid__row youp-grid__row--group",
+        role: "row",
+        "aria-rowindex": context.row.index + 1,
+        style: { height: context.rowHeight },
+    }, context.showSelectionColumn ? renderSelectionGroupCell() : undefined, createElement("div", {
+        className: "youp-grid__cell youp-grid__cell--group",
+        role: "gridcell",
+        "aria-colspan": context.columns.length,
+        style: {
+            width,
+            flex: `0 0 ${width}px`,
+            paddingLeft: 12 + context.row.depth * 18,
+        },
+    }, createElement("button", {
+        className: "youp-grid__group-toggle",
+        type: "button",
+        "aria-expanded": context.row.expanded,
+        onClick: () => context.toggleExpanded(context.row.groupId),
+    }, createElement("span", { className: "youp-grid__group-caret", "aria-hidden": true }, context.row.expanded ? "v" : ">"), createElement("span", { className: "youp-grid__group-label" }, context.row.label), createElement("span", { className: "youp-grid__group-count" }, `${context.row.rowCount} rows`))));
+}
+function renderSelectionGroupCell() {
+    return createElement("div", {
+        className: "youp-grid__selection-cell youp-grid__selection-cell--group",
+        role: "gridcell",
+        style: getSelectionCellStyle(),
+        "aria-hidden": true,
+    });
+}
+function renderRow(context) {
+    return createElement("div", {
+        key: rowKey(context.row.id),
+        className: [
+            "youp-grid__row",
+            context.selected ? "youp-grid__row--selected" : "",
+        ]
+            .filter(Boolean)
+            .join(" "),
+        role: "row",
+        "aria-rowindex": context.displayIndex + 1,
+        "aria-selected": context.selected,
+        "data-youp-row-index": context.rowIndex,
+        style: { height: context.rowHeight },
+        onClick: (event) => {
+            if (!shouldIgnoreRowMouseEvent(event)) {
+                context.onRowClick?.(createRowEvent(context, event));
+            }
+        },
+        onDoubleClick: (event) => {
+            if (!shouldIgnoreRowMouseEvent(event)) {
+                context.onRowDoubleClick?.(createRowEvent(context, event));
+            }
+        },
+    }, context.showSelectionColumn
+        ? renderSelectionCell({
+            rowIndex: context.rowIndex,
+            selected: context.selected,
+            setSelected: context.setRowSelected,
+        })
+        : undefined, context.columns.map((layout, columnIndex) => {
+        const focused = context.focusedCell.rowIndex === context.rowIndex && context.focusedCell.columnIndex === columnIndex;
+        const editing = isEditingCell(context.editingCell, context.row, layout.column);
+        const activeRange = normalizeCellRange(context.selectionRange ?? {
+            anchor: context.focusedCell,
+            focus: context.focusedCell,
+        });
+        const selected = context.selectionRange
+            ? isCellInRange(context.rowIndex, columnIndex, context.selectionRange)
+            : false;
+        const fillTargeted = context.fillRange
+            ? isCellInNormalizedRange(context.rowIndex, columnIndex, context.fillRange)
+            : false;
+        const showFillHandle = !context.editingCell &&
+            context.rowIndex === activeRange.endRowIndex &&
+            columnIndex === activeRange.endColumnIndex;
+        return renderCell({
+            row: context.row,
+            layout,
+            rowIndex: context.rowIndex,
+            columnIndex,
+            ariaColumnOffset: context.showSelectionColumn ? 1 : 0,
+            focused,
+            selected,
+            fillTargeted,
+            showFillHandle,
+            editing,
+            editingCell: context.editingCell,
+            editable: context.editable,
+            setFocusedCell: context.setFocusedCell,
+            startFillHandle: context.startFillHandle,
+            startEditing: context.startEditing,
+            updateEditingDraft: context.updateEditingDraft,
+            cancelEditing: context.cancelEditing,
+            commitEditing: context.commitEditing,
+            onKeyDown: context.onCellKeyDown,
+            renderCell: context.renderCell,
+        });
+    }));
+}
+function renderSelectionCell(context) {
+    return createElement("div", {
+        className: "youp-grid__cell youp-grid__selection-cell",
+        role: "gridcell",
+        "aria-colindex": 1,
+        style: getSelectionCellStyle(),
+    }, createElement("input", {
+        className: "youp-grid__selection-checkbox",
+        type: "checkbox",
+        checked: context.selected,
+        "aria-label": `Select row ${context.rowIndex + 1}`,
+        onChange: (event) => {
+            context.setSelected(event.currentTarget.checked);
+        },
+        onClick: (event) => {
+            event.stopPropagation();
+        },
+    }));
+}
+function createRowEvent(context, event) {
+    return {
+        row: context.row.original,
+        rowNode: context.row,
+        rowId: context.row.id,
+        rowIndex: context.rowIndex,
+        event,
+    };
+}
+function shouldIgnoreRowMouseEvent(event) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    return Boolean(target.closest("button,input,select,textarea,a,[contenteditable='true']"));
+}
+function renderCell(context) {
+    const column = context.layout.column;
+    const value = column.accessor(context.row.original);
+    const editable = context.editable && column.editable !== false;
+    const cellContext = {
+        row: context.row,
+        column,
+        value,
+        editing: context.editing,
+        focused: context.focused,
+    };
+    const cellState = {
+        row: context.row,
+        rowIndex: context.rowIndex,
+        column,
+        columnIndex: context.columnIndex,
+        value,
+        editable,
+    };
+    const cellContent = context.renderCell
+        ? context.renderCell(cellContext)
+        : formatCellValue(column, context.row.original, value);
+    return createElement("div", {
+        key: column.id,
+        className: getCellClassName([
+            "youp-grid__cell",
+            context.focused ? "youp-grid__cell--focused" : "",
+            context.selected ? "youp-grid__cell--range-selected" : "",
+            context.fillTargeted ? "youp-grid__cell--fill-target" : "",
+            context.editing ? "youp-grid__cell--editing" : "",
+        ].filter(Boolean).join(" "), context.layout),
+        role: "gridcell",
+        tabIndex: context.focused && !context.editing ? 0 : -1,
+        "aria-colindex": context.columnIndex + context.ariaColumnOffset + 1,
+        "data-youp-row-index": context.rowIndex,
+        "data-youp-column-index": context.columnIndex,
+        "data-youp-column-id": column.id,
+        style: getCellStyle(context.layout),
+        onClick: (event) => {
+            event.currentTarget.focus({ preventScroll: true });
+            context.setFocusedCell({ rowIndex: context.rowIndex, columnIndex: context.columnIndex }, event.shiftKey);
+        },
+        onDoubleClick: () => {
+            if (editable) {
+                context.startEditing(createEditingCell(cellState, value));
+            }
+        },
+        onKeyDown: (event) => context.onKeyDown(event, cellState),
+    }, context.editing
+        ? createElement("input", {
+            className: "youp-grid__cell-editor",
+            value: context.editingCell?.draftValue ?? "",
+            autoFocus: true,
+            onChange: (event) => {
+                context.updateEditingDraft(event.currentTarget.value);
+            },
+            onBlur: (event) => {
+                context.commitEditing(createEditingCell(cellState, event.currentTarget.value), "blur");
+            },
+            onKeyDown: (event) => {
+                event.stopPropagation();
+                context.onKeyDown(event, cellState);
+            },
+        })
+        : cellContent, !context.editing && context.showFillHandle
+        ? createElement("span", {
+            className: "youp-grid__fill-handle",
+            role: "button",
+            "aria-label": "Fill selection",
+            onMouseDown: context.startFillHandle,
+        })
+        : undefined);
+}
+function renderColumnToolbar(context) {
+    if (!context.showColumnChooser && !context.showCsvExport && !context.showDensityControl) {
+        return undefined;
+    }
+    return createElement("div", { className: "youp-grid__toolbar" }, context.showColumnChooser
+        ? createElement("button", {
+            className: "youp-grid__toolbar-button",
+            type: "button",
+            "aria-expanded": context.open,
+            onClick: context.toggleOpen,
+        }, "Columns")
+        : undefined, context.showCsvExport
+        ? createElement("button", {
+            className: "youp-grid__toolbar-button",
+            type: "button",
+            onClick: context.exportCsv,
+        }, "Export CSV")
+        : undefined, context.showDensityControl
+        ? createElement("label", { className: "youp-grid__density-control" }, "Density", createElement("select", {
+            value: context.density,
+            onChange: (event) => {
+                context.setDensity(event.currentTarget.value);
+            },
+        }, renderDensityOption("compact", "Compact"), renderDensityOption("standard", "Standard"), renderDensityOption("comfortable", "Comfortable")))
+        : undefined, context.showColumnChooser && context.open
+        ? createElement("div", { className: "youp-grid__column-panel" }, context.columns.map((column) => {
+            return createElement("div", { key: column.id, className: "youp-grid__column-panel-row" }, createElement("label", { className: "youp-grid__column-toggle" }, createElement("input", {
+                type: "checkbox",
+                checked: !column.hidden,
+                onChange: (event) => {
+                    context.setColumnHidden(column.id, !event.currentTarget.checked);
+                },
+            }), column.headerName), createElement("div", { className: "youp-grid__pin-controls", role: "group", "aria-label": `Pin ${column.headerName}` }, renderPinButton(column, undefined, "None", context.setColumnPinned), renderPinButton(column, "left", "Left", context.setColumnPinned), renderPinButton(column, "right", "Right", context.setColumnPinned)));
+        }))
+        : undefined);
+}
+function renderDensityOption(value, label) {
+    return createElement("option", { key: value, value }, label);
+}
+function renderPinButton(column, pin, label, setColumnPinned) {
+    const active = column.pinned === pin || (!column.pinned && pin === undefined);
+    return createElement("button", {
+        className: ["youp-grid__pin-button", active ? "youp-grid__pin-button--active" : ""]
+            .filter(Boolean)
+            .join(" "),
+        type: "button",
+        "aria-pressed": active,
+        onClick: () => setColumnPinned(column.id, pin),
+    }, label);
+}
+function getColumnLayouts(columns, options = {}) {
+    const leftColumns = columns.filter((column) => column.pinned === "left");
+    const centerColumns = columns.filter((column) => !column.pinned);
+    const rightColumns = columns.filter((column) => column.pinned === "right");
+    const rightOffsets = getRightOffsets(rightColumns);
+    return [
+        ...leftColumns.map((column, index) => ({
+            column,
+            pinned: "left",
+            stickyOffset: getLeftOffset(leftColumns, index, options.leftOffset ?? 0),
+            pinnedEdge: index === leftColumns.length - 1 ? "left-last" : undefined,
+        })),
+        ...centerColumns.map((column) => ({ column })),
+        ...rightColumns.map((column, index) => ({
+            column,
+            pinned: "right",
+            stickyOffset: rightOffsets[index],
+            pinnedEdge: index === 0 ? "right-first" : undefined,
+        })),
+    ];
+}
+function getHeaderGroupLayouts(columns) {
+    const groups = [];
+    for (const layout of columns) {
+        const headerGroup = normalizeHeaderGroup(layout.column.headerGroup);
+        const previous = groups[groups.length - 1];
+        if (previous && previous.headerGroup === headerGroup && previous.pinned === layout.pinned) {
+            previous.columns.push(layout.column);
+            previous.columnCount += 1;
+            previous.width += getColumnWidth(layout.column);
+            if (layout.pinned === "right") {
+                previous.stickyOffset = layout.stickyOffset;
+            }
+            if (layout.pinnedEdge) {
+                previous.pinnedEdge = layout.pinnedEdge;
+            }
+            continue;
+        }
+        groups.push({
+            id: `${layout.pinned ?? "center"}:${headerGroup ?? "none"}:${groups.length}`,
+            headerGroup,
+            columns: [layout.column],
+            columnCount: 1,
+            width: getColumnWidth(layout.column),
+            pinned: layout.pinned,
+            stickyOffset: layout.stickyOffset,
+            pinnedEdge: layout.pinnedEdge,
+        });
+    }
+    return groups;
+}
+function normalizeHeaderGroup(headerGroup) {
+    const trimmed = headerGroup?.trim();
+    return trimmed ? trimmed : undefined;
+}
+function getLeftOffset(columns, index, baseOffset = 0) {
+    return columns.slice(0, index).reduce((sum, column) => sum + getColumnWidth(column), baseOffset);
+}
+function getRightOffsets(columns) {
+    const offsets = new Array(columns.length);
+    let offset = 0;
+    for (let index = columns.length - 1; index >= 0; index -= 1) {
+        offsets[index] = offset;
+        offset += getColumnWidth(columns[index]);
+    }
+    return offsets;
+}
+function getColumnWidth(column) {
+    return column.width ?? 160;
+}
+function getColumnsWidth(columns) {
+    return columns.reduce((sum, layout) => sum + getColumnWidth(layout.column), 0);
+}
+function getCellClassName(baseClassName, layout) {
+    return [
+        baseClassName,
+        layout.pinned ? `youp-grid__cell--pinned-${layout.pinned}` : "",
+        layout.pinnedEdge ? `youp-grid__cell--${layout.pinnedEdge}` : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+}
+function getHeaderGroupClassName(layout) {
+    return [
+        "youp-grid__cell youp-grid__cell--header-group",
+        layout.headerGroup ? "" : "youp-grid__cell--header-group-empty",
+        layout.pinned ? `youp-grid__cell--pinned-${layout.pinned}` : "",
+        layout.pinnedEdge ? `youp-grid__cell--${layout.pinnedEdge}` : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+}
+function getCellStyle(layout) {
+    const width = getColumnWidth(layout.column);
+    const style = {
+        width,
+        flex: `0 0 ${width}px`,
+    };
+    if (layout.pinned === "left") {
+        style.left = layout.stickyOffset ?? 0;
+    }
+    if (layout.pinned === "right") {
+        style.right = layout.stickyOffset ?? 0;
+    }
+    return style;
+}
+function getHeaderGroupStyle(layout) {
+    const style = {
+        width: layout.width,
+        flex: `0 0 ${layout.width}px`,
+    };
+    if (layout.pinned === "left") {
+        style.left = layout.stickyOffset ?? 0;
+    }
+    if (layout.pinned === "right") {
+        style.right = layout.stickyOffset ?? 0;
+    }
+    return style;
+}
+function getSelectionCellStyle() {
+    return {
+        left: 0,
+        width: SELECTION_COLUMN_WIDTH,
+        flex: `0 0 ${SELECTION_COLUMN_WIDTH}px`,
+    };
+}
+function rowKey(rowId) {
+    return String(rowId);
+}
+function renderPagination(context) {
+    if (!context.enabled) {
+        return undefined;
+    }
+    if (context.cursorPagination) {
+        return renderCursorPagination({
+            cursorPagination: context.cursorPagination,
+            visibleRowCount: context.visibleRowCount,
+            filteredRowCount: context.filteredRowCount,
+            setCursorPage: context.setCursorPage,
+            setCursorPageSize: context.setCursorPageSize,
+        });
+    }
+    if (!context.pagination || !context.pageCount) {
+        return undefined;
+    }
+    const currentPage = context.pagination.pageIndex + 1;
+    return createElement("div", { className: "youp-grid__pagination" }, createElement("button", {
+        type: "button",
+        disabled: context.pagination.pageIndex === 0,
+        onClick: () => context.setPage(context.pagination.pageIndex - 1),
+    }, "Previous"), createElement("span", { className: "youp-grid__page-status" }, `Page ${currentPage} of ${context.pageCount} · ${context.visibleRowCount} shown · ${context.filteredRowCount} matched`), createElement("button", {
+        type: "button",
+        disabled: currentPage >= context.pageCount,
+        onClick: () => context.setPage(context.pagination.pageIndex + 1),
+    }, "Next"), createElement("label", { className: "youp-grid__page-size" }, "Rows", createElement("select", {
+        value: context.pagination.pageSize,
+        onChange: (event) => {
+            context.setPageSize(Number(event.currentTarget.value));
+        },
+    }, [50, 100, 250, 500].map((pageSize) => {
+        return createElement("option", { key: pageSize, value: pageSize }, String(pageSize));
+    }))));
+}
+function renderCursorPagination(context) {
+    return createElement("div", { className: "youp-grid__pagination youp-grid__pagination--cursor" }, createElement("button", {
+        type: "button",
+        disabled: !context.cursorPagination.hasPreviousPage,
+        onClick: () => context.setCursorPage(context.cursorPagination.previousCursor),
+    }, "Previous"), createElement("span", { className: "youp-grid__page-status" }, `Cursor page · ${context.visibleRowCount} shown · ${context.filteredRowCount} matched`), createElement("button", {
+        type: "button",
+        disabled: !context.cursorPagination.hasNextPage,
+        onClick: () => context.setCursorPage(context.cursorPagination.nextCursor),
+    }, "Next"), createElement("label", { className: "youp-grid__page-size" }, "Rows", createElement("select", {
+        value: context.cursorPagination.pageSize,
+        onChange: (event) => {
+            context.setCursorPageSize(Number(event.currentTarget.value));
+        },
+    }, [50, 100, 250, 500].map((pageSize) => {
+        return createElement("option", { key: pageSize, value: pageSize }, String(pageSize));
+    }))));
+}
+function startColumnResize(context) {
+    context.event.preventDefault();
+    context.event.stopPropagation();
+    const startX = context.event.clientX;
+    const startWidth = context.column.width ?? 160;
+    const minWidth = context.column.minWidth ?? 64;
+    const maxWidth = context.column.maxWidth;
+    function handleMouseMove(event) {
+        const nextWidth = clamp(startWidth + event.clientX - startX, minWidth, maxWidth ?? Number.MAX_SAFE_INTEGER);
+        context.resizeColumn(nextWidth);
+    }
+    function handleMouseUp() {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    }
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+}
+function handleCellKeyDown(context) {
+    if (context.rowCount === 0 || context.columnCount === 0) {
+        return;
+    }
+    const editingCell = context.event.currentTarget.classList.contains("youp-grid__cell-editor")
+        ? createEditingCell(context.cell, context.event.currentTarget.value)
+        : undefined;
+    if (editingCell) {
+        if (context.event.key === "Escape") {
+            context.event.preventDefault();
+            context.cancelEditing();
+            focusCell(context.bodyElement, context.cell);
+            return;
+        }
+        if (context.event.key === "Enter") {
+            context.event.preventDefault();
+            context.commitEditing(editingCell);
+            moveFocusedCell({
+                ...context,
+                nextCell: {
+                    rowIndex: clamp(context.cell.rowIndex + 1, 0, context.rowCount - 1),
+                    columnIndex: context.cell.columnIndex,
+                },
+            });
+            return;
+        }
+        if (context.event.key === "Tab") {
+            context.event.preventDefault();
+            context.commitEditing(editingCell);
+            moveFocusedCell({
+                ...context,
+                nextCell: getNextTabCell(context.cell, context.rowCount, context.columnCount, context.event.shiftKey),
+            });
+            return;
+        }
+        return;
+    }
+    if (isUndoShortcut(context.event)) {
+        context.event.preventDefault();
+        context.undoCellValueChange();
+        return;
+    }
+    if (isRedoShortcut(context.event)) {
+        context.event.preventDefault();
+        context.redoCellValueChange();
+        return;
+    }
+    if (context.event.key === "Enter" || context.event.key === "F2") {
+        if (context.cell.editable) {
+            context.event.preventDefault();
+            context.startEditing(createEditingCell(context.cell, context.cell.value));
+        }
+        return;
+    }
+    if (context.event.key === " ") {
+        context.event.preventDefault();
+        if (context.event.shiftKey) {
+            context.setFocusedCell(context.cell, true);
+        }
+        else {
+            context.toggleSelected();
+        }
+        return;
+    }
+    if (isPrintableKey(context.event)) {
+        if (context.cell.editable) {
+            context.event.preventDefault();
+            context.startEditing(createEditingCell(context.cell, context.event.key));
+        }
+        return;
+    }
+    const nextCell = getNextNavigationCell(context);
+    if (!nextCell) {
+        return;
+    }
+    context.event.preventDefault();
+    moveFocusedCell({
+        ...context,
+        nextCell,
+        extendSelection: context.event.shiftKey,
+        selectionAnchor: {
+            rowIndex: context.cell.rowIndex,
+            columnIndex: context.cell.columnIndex,
+        },
+    });
+}
+function getNextNavigationCell(context) {
+    switch (context.event.key) {
+        case "ArrowDown":
+            return {
+                rowIndex: clamp(context.cell.rowIndex + 1, 0, context.rowCount - 1),
+                columnIndex: context.cell.columnIndex,
+            };
+        case "ArrowUp":
+            return {
+                rowIndex: clamp(context.cell.rowIndex - 1, 0, context.rowCount - 1),
+                columnIndex: context.cell.columnIndex,
+            };
+        case "ArrowRight":
+            return {
+                rowIndex: context.cell.rowIndex,
+                columnIndex: clamp(context.cell.columnIndex + 1, 0, context.columnCount - 1),
+            };
+        case "ArrowLeft":
+            return {
+                rowIndex: context.cell.rowIndex,
+                columnIndex: clamp(context.cell.columnIndex - 1, 0, context.columnCount - 1),
+            };
+        case "Home":
+            return {
+                rowIndex: context.cell.rowIndex,
+                columnIndex: 0,
+            };
+        case "End":
+            return {
+                rowIndex: context.cell.rowIndex,
+                columnIndex: context.columnCount - 1,
+            };
+        case "Tab":
+            return getNextTabCell(context.cell, context.rowCount, context.columnCount, context.event.shiftKey);
+    }
+    return undefined;
+}
+function getNextTabCell(cell, rowCount, columnCount, backwards) {
+    const delta = backwards ? -1 : 1;
+    const flatIndex = cell.rowIndex * columnCount + cell.columnIndex;
+    const nextFlatIndex = clamp(flatIndex + delta, 0, rowCount * columnCount - 1);
+    return {
+        rowIndex: Math.floor(nextFlatIndex / columnCount),
+        columnIndex: nextFlatIndex % columnCount,
+    };
+}
+function moveFocusedCell(context) {
+    context.setFocusedCell(context.nextCell, context.extendSelection, context.selectionAnchor);
+    if (!context.bodyElement) {
+        return;
+    }
+    ensureCellRowVisible({
+        bodyElement: context.bodyElement,
+        rowIndex: context.getDisplayRowIndex(context.nextCell.rowIndex),
+        rowHeight: context.rowHeight,
+    });
+    focusCellAfterRender({
+        bodyElement: context.bodyElement,
+        cell: context.nextCell,
+        attempts: 2,
+    });
+}
+function ensureCellRowVisible(context) {
+    const rowTop = context.rowIndex * context.rowHeight;
+    const rowBottom = rowTop + context.rowHeight;
+    const viewportTop = context.bodyElement.scrollTop;
+    const viewportBottom = viewportTop + context.bodyElement.clientHeight;
+    if (rowTop < viewportTop) {
+        context.bodyElement.scrollTop = rowTop;
+        return;
+    }
+    if (rowBottom > viewportBottom) {
+        context.bodyElement.scrollTop = rowBottom - context.bodyElement.clientHeight;
+    }
+}
+function ensureCellColumnVisible(bodyElement, cellElement) {
+    if (cellElement.classList.contains("youp-grid__cell--pinned-left")) {
+        return;
+    }
+    if (cellElement.classList.contains("youp-grid__cell--pinned-right")) {
+        return;
+    }
+    const leftPinnedWidth = getPinnedCellWidth(cellElement.parentElement, "left");
+    const rightPinnedWidth = getPinnedCellWidth(cellElement.parentElement, "right");
+    const cellLeft = cellElement.offsetLeft;
+    const cellRight = cellLeft + cellElement.offsetWidth;
+    const viewportLeft = bodyElement.scrollLeft + leftPinnedWidth;
+    const viewportRight = bodyElement.scrollLeft + bodyElement.clientWidth - rightPinnedWidth;
+    if (cellLeft < viewportLeft) {
+        bodyElement.scrollLeft = Math.max(0, cellLeft - leftPinnedWidth);
+        return;
+    }
+    if (cellRight > viewportRight) {
+        bodyElement.scrollLeft = cellRight - bodyElement.clientWidth + rightPinnedWidth;
+    }
+}
+function getPinnedCellWidth(rowElement, pin) {
+    if (!rowElement) {
+        return 0;
+    }
+    const selector = pin === "left"
+        ? ".youp-grid__selection-cell, .youp-grid__cell--pinned-left"
+        : ".youp-grid__cell--pinned-right";
+    return Array.from(rowElement.querySelectorAll(selector))
+        .reduce((width, cell) => width + cell.offsetWidth, 0);
+}
+function focusCell(bodyElement, cell) {
+    const cellElement = bodyElement?.querySelector(`[data-youp-row-index="${cell.rowIndex}"][data-youp-column-index="${cell.columnIndex}"]`);
+    cellElement?.focus({ preventScroll: true });
+    return cellElement ?? undefined;
+}
+function focusCellAfterRender(context) {
+    requestAnimationFrame(() => {
+        const cellElement = focusCell(context.bodyElement, context.cell);
+        if (cellElement && context.bodyElement) {
+            ensureCellColumnVisible(context.bodyElement, cellElement);
+            return;
+        }
+        if (context.attempts > 0) {
+            focusCellAfterRender({
+                ...context,
+                attempts: context.attempts - 1,
+            });
+        }
+    });
+}
+function createEditingCell(cell, value) {
+    return {
+        rowId: cell.row.id,
+        rowIndex: cell.rowIndex,
+        columnId: cell.column.id,
+        columnIndex: cell.columnIndex,
+        draftValue: String(value ?? ""),
+    };
+}
+function isEditingCell(editingCell, row, column) {
+    return editingCell?.rowId === row.id && editingCell.columnId === column.id;
+}
+function commitEditingCell(context) {
+    const row = context.rowModel.visibleRows[context.cell.rowIndex];
+    const column = context.rowModel.visibleColumns.find((item) => item.id === context.cell.columnId);
+    if (!row || !column) {
+        return;
+    }
+    const previousValue = column.accessor(row.original);
+    const value = column.valueParser
+        ? column.valueParser(context.cell.draftValue, row.original)
+        : context.cell.draftValue;
+    if (Object.is(value, previousValue)) {
+        return;
+    }
+    context.applyCellValueChanges([
+        {
+            row: row.original,
+            rowId: row.id,
+            rowIndex: context.cell.rowIndex,
+            column,
+            columnId: column.id,
+            value,
+            previousValue,
+        },
+    ], "edit");
+}
+function handleGridCopy(context) {
+    const range = context.selectionRange ?? {
+        anchor: context.focusedCell,
+        focus: context.focusedCell,
+    };
+    const text = serializeGridRange({
+        rows: context.rows,
+        columns: context.columns,
+        range,
+    });
+    context.event.preventDefault();
+    context.event.clipboardData.setData("text/plain", text);
+}
+function handleGridPaste(context) {
+    const values = parseClipboardText(context.event.clipboardData.getData("text/plain"));
+    if (values.length === 0) {
+        return;
+    }
+    const normalizedRange = context.selectionRange ? normalizeCellRange(context.selectionRange) : undefined;
+    const startCell = normalizedRange
+        ? {
+            rowIndex: normalizedRange.startRowIndex,
+            columnIndex: normalizedRange.startColumnIndex,
+        }
+        : context.focusedCell;
+    const fillRange = normalizedRange && values.length === 1 && values[0]?.length === 1
+        ? normalizedRange
+        : undefined;
+    context.event.preventDefault();
+    const changes = [];
+    for (const cell of getClipboardPasteCells({
+        values,
+        startCell,
+        rowCount: context.rows.length,
+        columnCount: context.columns.length,
+        fillRange,
+    })) {
+        const row = context.rows[cell.rowIndex];
+        const column = context.columns[cell.columnIndex];
+        if (!row || !column || column.editable === false) {
+            continue;
+        }
+        const previousValue = column.accessor(row.original);
+        const value = column.valueParser ? column.valueParser(cell.value, row.original) : cell.value;
+        if (Object.is(value, previousValue)) {
+            continue;
+        }
+        changes.push({
+            row: row.original,
+            rowId: row.id,
+            rowIndex: cell.rowIndex,
+            column,
+            columnId: column.id,
+            value,
+            previousValue,
+        });
+    }
+    context.applyCellValueChanges(changes, "paste");
+}
+function startFillHandleDrag(context) {
+    context.event.preventDefault();
+    context.event.stopPropagation();
+    let currentRange;
+    const updateRange = (event) => {
+        const targetCell = getCellCoordinateFromPoint(event.clientX, event.clientY);
+        currentRange = targetCell
+            ? getFillHandleTargetRange({
+                sourceRange: context.sourceRange,
+                targetCell,
+                rowCount: context.rowCount,
+                columnCount: context.columnCount,
+            })
+            : undefined;
+        context.setFillRange(currentRange);
+    };
+    const handleMouseMove = (event) => {
+        event.preventDefault();
+        updateRange(event);
+    };
+    const handleMouseUp = (event) => {
+        event.preventDefault();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        updateRange(event);
+        context.setFillRange(undefined);
+        if (currentRange) {
+            context.applyFillRange(currentRange);
+        }
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+}
+function applyFillHandleValues(context) {
+    const changes = [];
+    for (const cell of getFillHandleCells({
+        sourceRange: context.sourceRange,
+        targetRange: context.targetRange,
+        getValue: ({ rowIndex, columnIndex }) => {
+            const row = context.rows[rowIndex];
+            const column = context.columns[columnIndex];
+            return row && column ? column.accessor(row.original) : undefined;
+        },
+    })) {
+        const row = context.rows[cell.rowIndex];
+        const column = context.columns[cell.columnIndex];
+        if (!row || !column || column.editable === false) {
+            continue;
+        }
+        const previousValue = column.accessor(row.original);
+        if (Object.is(cell.value, previousValue)) {
+            continue;
+        }
+        changes.push({
+            row: row.original,
+            rowId: row.id,
+            rowIndex: cell.rowIndex,
+            column,
+            columnId: column.id,
+            value: cell.value,
+            previousValue,
+        });
+    }
+    context.applyCellValueChanges(changes, "fill");
+}
+function getFillSelectionRange(sourceRange, targetRange) {
+    return {
+        anchor: {
+            rowIndex: Math.min(sourceRange.startRowIndex, targetRange.startRowIndex),
+            columnIndex: Math.min(sourceRange.startColumnIndex, targetRange.startColumnIndex),
+        },
+        focus: {
+            rowIndex: Math.max(sourceRange.endRowIndex, targetRange.endRowIndex),
+            columnIndex: Math.max(sourceRange.endColumnIndex, targetRange.endColumnIndex),
+        },
+    };
+}
+function getCellCoordinateFromPoint(clientX, clientY) {
+    const element = document.elementFromPoint(clientX, clientY);
+    const cell = element?.closest('[role="gridcell"][data-youp-row-index][data-youp-column-index]');
+    if (!cell) {
+        return undefined;
+    }
+    const rowIndex = Number(cell.dataset.youpRowIndex);
+    const columnIndex = Number(cell.dataset.youpColumnIndex);
+    if (!Number.isInteger(rowIndex) || !Number.isInteger(columnIndex)) {
+        return undefined;
+    }
+    return { rowIndex, columnIndex };
+}
+function isCellInNormalizedRange(rowIndex, columnIndex, range) {
+    return (rowIndex >= range.startRowIndex &&
+        rowIndex <= range.endRowIndex &&
+        columnIndex >= range.startColumnIndex &&
+        columnIndex <= range.endColumnIndex);
+}
+function downloadTextFile(options) {
+    const blob = new Blob([options.text], { type: options.mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = options.fileName;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+}
+function getHistoryEntryValueChanges(context) {
+    const changes = [];
+    for (const historyChange of context.entry.changes) {
+        const row = context.rowModel.allRows.find((item) => item.id === historyChange.rowId) ??
+            context.rowModel.visibleRows[historyChange.rowIndex];
+        const column = context.rowModel.columns.find((item) => item.id === historyChange.columnId);
+        if (!row || !column) {
+            continue;
+        }
+        const value = context.source === "undo" ? historyChange.previousValue : historyChange.value;
+        const previousValue = column.accessor(row.original);
+        if (Object.is(value, previousValue)) {
+            continue;
+        }
+        const visibleRowIndex = context.rowModel.visibleRows.findIndex((item) => item.id === row.id);
+        changes.push({
+            row: row.original,
+            rowId: row.id,
+            rowIndex: visibleRowIndex >= 0 ? visibleRowIndex : row.index,
+            column,
+            columnId: column.id,
+            value,
+            previousValue,
+        });
+    }
+    return changes;
+}
+function formatCellValue(column, row, value) {
+    return column.valueFormatter ? column.valueFormatter(value, row) : String(value ?? "");
+}
+function isPrintableKey(event) {
+    return event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey;
+}
+function isUndoShortcut(event) {
+    return (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "z";
+}
+function isRedoShortcut(event) {
+    if (!(event.metaKey || event.ctrlKey) || event.altKey) {
+        return false;
+    }
+    const key = event.key.toLowerCase();
+    return key === "y" || (event.shiftKey && key === "z");
+}
+function getFilterValue(state, columnId) {
+    const value = state.filters?.find((filter) => filter.columnId === columnId)?.value;
+    return value == null ? "" : String(value);
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function normalizeHeight(height) {
+    if (typeof height === "number") {
+        return height;
+    }
+    if (typeof height === "string" && height.endsWith("px")) {
+        return Number.parseInt(height, 10);
+    }
+    return undefined;
+}