@affino/datagrid-vue 0.3.2 → 0.3.4

package/dist/app/useDataGridAppFill.js

@@ -0,0 +1,97 @@
+import { buildDataGridFillMatrix, canToggleDataGridFillBehavior, resolveDataGridDefaultFillBehavior, } from "../composables/dataGridFillBehavior";
+import {} from "../advanced";
+export function useDataGridAppFill(options) {
+    const applyFillRange = (baseRange, previewRange, behaviorOverride) => {
+        if (options.rangesEqual(baseRange, previewRange)) {
+            return false;
+        }
+        const sourceMatrix = options.buildFillMatrixFromRange(baseRange);
+        if (!sourceMatrix.length) {
+            return false;
+        }
+        const behavior = behaviorOverride
+            ?? options.activeFillBehavior.value
+            ?? resolveDataGridDefaultFillBehavior({
+                baseRange,
+                previewRange,
+                sourceMatrix,
+            });
+        const matrix = buildDataGridFillMatrix({
+            baseRange,
+            previewRange,
+            sourceMatrix,
+            behavior,
+        });
+        const appliedRows = options.applyClipboardEdits(previewRange, matrix);
+        if (appliedRows > 0) {
+            options.setLastAppliedFillSession({
+                baseRange: { ...baseRange },
+                previewRange: { ...previewRange },
+                behavior,
+                allowBehaviorToggle: canToggleDataGridFillBehavior({
+                    baseRange,
+                    previewRange,
+                    sourceMatrix,
+                }),
+            });
+            options.syncViewport();
+            return true;
+        }
+        return false;
+    };
+    const applyFillPreview = (behavior) => {
+        const baseRange = options.fillBaseRange.value;
+        const previewRange = options.fillPreviewRange.value;
+        if (!baseRange || !previewRange) {
+            return false;
+        }
+        return applyFillRange(baseRange, previewRange, behavior);
+    };
+    const isCellInFillPreview = (rowOffset, columnIndex) => {
+        if (options.mode.value !== "base") {
+            return false;
+        }
+        const preview = options.fillPreviewRange.value;
+        if (!preview) {
+            return false;
+        }
+        const rowIndex = options.viewportRowStart.value + rowOffset;
+        const inPreview = (rowIndex >= preview.startRow
+            && rowIndex <= preview.endRow
+            && columnIndex >= preview.startColumn
+            && columnIndex <= preview.endColumn);
+        if (!inPreview) {
+            return false;
+        }
+        const base = options.fillBaseRange.value;
+        if (!base) {
+            return true;
+        }
+        const inBase = (rowIndex >= base.startRow
+            && rowIndex <= base.endRow
+            && columnIndex >= base.startColumn
+            && columnIndex <= base.endColumn);
+        return !inBase;
+    };
+    const isFillHandleCell = (rowOffset, columnIndex) => {
+        if (options.mode.value !== "base") {
+            return false;
+        }
+        const range = options.isFillDragging.value && options.fillPreviewRange.value
+            ? options.fillPreviewRange.value
+            : options.resolveSelectionRange();
+        if (!range) {
+            return false;
+        }
+        const rowIndex = options.viewportRowStart.value + rowOffset;
+        return rowIndex === range.endRow
+            && columnIndex === range.endColumn
+            && options.isCellEditableAt(rowIndex, columnIndex);
+    };
+    return {
+        applyFillPreview,
+        applyFillRange,
+        isCellInFillPreview,
+        isFillHandleCell,
+    };
+}

package/dist/app/useDataGridAppHeaderResize.d.ts

@@ -0,0 +1,29 @@
+import { type Ref } from "vue";
+import type { DataGridColumnSnapshot } from "@affino/datagrid-core";
+export interface UseDataGridAppHeaderResizeOptions<TRow> {
+    visibleColumns: Ref<readonly DataGridColumnSnapshot[]>;
+    rows: Ref<readonly TRow[]>;
+    persistColumnWidth?: (columnKey: string, width: number) => void;
+    defaultColumnWidth?: number;
+    minColumnWidth?: number;
+    autoSizeSampleLimit?: number;
+    autoSizeCharWidth?: number;
+    autoSizeHorizontalPadding?: number;
+    autoSizeMaxWidth?: number;
+    isFillDragging: () => boolean;
+    stopFillSelection: () => void;
+    isDragSelecting: () => boolean;
+    stopDragSelection: () => void;
+    readCellText: (row: TRow, columnKey: string) => string;
+}
+export interface UseDataGridAppHeaderResizeResult {
+    isColumnResizing: Ref<boolean>;
+    startResize: (event: MouseEvent, key: string) => void;
+    handleResizeDoubleClick: (event: MouseEvent, key: string) => void;
+    applyColumnResizeFromPointer: (clientX: number) => void;
+    stopColumnResize: () => void;
+    resolveColumnRenderWidth: (columnKey: string) => number;
+    dispose: () => void;
+}
+export declare function useDataGridAppHeaderResize<TRow>(options: UseDataGridAppHeaderResizeOptions<TRow>): UseDataGridAppHeaderResizeResult;
+//# sourceMappingURL=useDataGridAppHeaderResize.d.ts.map

package/dist/app/useDataGridAppHeaderResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridAppHeaderResize.d.ts","sourceRoot":"","sources":["../../src/app/useDataGridAppHeaderResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAGnE,MAAM,WAAW,iCAAiC,CAAC,IAAI;IACrD,cAAc,EAAE,GAAG,CAAC,SAAS,sBAAsB,EAAE,CAAC,CAAA;IACtD,IAAI,EAAE,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC,CAAA;IAC1B,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yBAAyB,CAAC,EAAE,MAAM,CAAA;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,OAAO,CAAA;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,eAAe,EAAE,MAAM,OAAO,CAAA;IAC9B,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,YAAY,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;CACvD;AAED,MAAM,WAAW,gCAAgC;IAC/C,gBAAgB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD,uBAAuB,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACjE,4BAA4B,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IACvD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,0BAA0B,CAAC,IAAI,EAC7C,OAAO,EAAE,iCAAiC,CAAC,IAAI,CAAC,GAC/C,gCAAgC,CA2DlC"}

package/dist/app/useDataGridAppHeaderResize.js

@@ -0,0 +1,57 @@
+import {} from "vue";
+import { useDataGridHeaderResizeOrchestration } from "../advanced";
+export function useDataGridAppHeaderResize(options) {
+    const defaultColumnWidth = options.defaultColumnWidth ?? 140;
+    const minColumnWidth = options.minColumnWidth ?? 80;
+    const headerResize = useDataGridHeaderResizeOrchestration({
+        resolveColumnBaseWidth: (columnKey) => {
+            const snapshot = options.visibleColumns.value.find(column => column.key === columnKey);
+            return snapshot?.width ?? defaultColumnWidth;
+        },
+        resolveColumnLabel: (columnKey) => {
+            return options.visibleColumns.value.find(column => column.key === columnKey)?.column.label ?? columnKey;
+        },
+        resolveRowsForAutoSize: () => options.rows.value,
+        resolveCellText: (row, columnKey) => options.readCellText(row, columnKey),
+        resolveColumnWidthOverride: (columnKey) => {
+            return options.visibleColumns.value.find(column => column.key === columnKey)?.width ?? null;
+        },
+        resolveColumnMinWidth: () => minColumnWidth,
+        applyColumnWidth: (columnKey, width) => {
+            options.persistColumnWidth?.(columnKey, width);
+        },
+        isColumnResizable: (columnKey) => options.visibleColumns.value.some(column => column.key === columnKey),
+        isFillDragging: () => options.isFillDragging(),
+        stopFillSelection: () => {
+            options.stopFillSelection();
+        },
+        isDragSelecting: () => options.isDragSelecting(),
+        stopDragSelection: () => {
+            options.stopDragSelection();
+        },
+        setLastAction: () => undefined,
+        autoSizeSampleLimit: options.autoSizeSampleLimit ?? 400,
+        autoSizeCharWidth: options.autoSizeCharWidth ?? 7.2,
+        autoSizeHorizontalPadding: options.autoSizeHorizontalPadding ?? 42,
+        autoSizeMaxWidth: options.autoSizeMaxWidth ?? 640,
+        resizeApplyMode: "sync",
+    });
+    const startResize = (event, key) => {
+        headerResize.onHeaderResizeHandleMouseDown(key, event);
+    };
+    const handleResizeDoubleClick = (event, key) => {
+        headerResize.onHeaderResizeHandleDoubleClick(key, event);
+    };
+    const resolveColumnRenderWidth = (columnKey) => {
+        return options.visibleColumns.value.find(column => column.key === columnKey)?.width ?? defaultColumnWidth;
+    };
+    return {
+        isColumnResizing: headerResize.isColumnResizing,
+        startResize,
+        handleResizeDoubleClick,
+        applyColumnResizeFromPointer: headerResize.applyColumnResizeFromPointer,
+        stopColumnResize: headerResize.stopColumnResize,
+        resolveColumnRenderWidth,
+        dispose: headerResize.dispose,
+    };
+}

package/dist/app/useDataGridAppInlineEditing.d.ts

@@ -0,0 +1,47 @@
+import { type Ref } from "vue";
+import { type DataGridColumnSnapshot, type DataGridRowNode } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeResult } from "../composables/useDataGridRuntime";
+import type { DataGridAppMode } from "./useDataGridAppControls";
+interface DataGridAppEditingCell {
+    rowId: string | number;
+    columnKey: string;
+}
+interface DataGridAppEditingCoord {
+    rowIndex: number;
+    columnIndex: number;
+    rowId: string | number;
+}
+type DataGridAppInlineEditCommitTarget = "stay" | "next" | "previous" | "below" | "above";
+interface DataGridAppInlineEditStartOptions {
+    draftValue?: string;
+    openOnMount?: boolean;
+}
+export interface UseDataGridAppInlineEditingOptions<TRow, TSnapshot> {
+    mode: Ref<DataGridAppMode>;
+    bodyViewportRef: Ref<HTMLElement | null>;
+    visibleColumns: Ref<readonly DataGridColumnSnapshot[]>;
+    totalRows: Ref<number>;
+    runtime: Pick<UseDataGridRuntimeResult<TRow>, "api" | "getBodyRowAtIndex">;
+    readCell: (row: DataGridRowNode<TRow>, columnKey: string) => string;
+    resolveBodyRowIndexById?: (rowId: string | number) => number;
+    resolveRowIndexById?: (rowId: string | number) => number;
+    applyCellSelection: (coord: DataGridAppEditingCoord) => void;
+    ensureActiveCellVisible: (rowIndex: number, columnIndex: number) => void;
+    isCellEditable: (row: DataGridRowNode<TRow>, rowIndex: number, columnKey: string, columnIndex: number) => boolean;
+    captureRowsSnapshot: () => TSnapshot;
+    recordEditTransaction: (beforeSnapshot: TSnapshot) => void;
+}
+export interface UseDataGridAppInlineEditingResult<TRow> {
+    editingCell: Ref<DataGridAppEditingCell | null>;
+    editingCellValue: Ref<string>;
+    editingCellInitialFilter: Ref<string>;
+    editingCellOpenOnMount: Ref<boolean>;
+    isEditingCell: (row: DataGridRowNode<TRow>, columnKey: string) => boolean;
+    startInlineEdit: (row: DataGridRowNode<TRow>, columnKey: string, options?: DataGridAppInlineEditStartOptions) => void;
+    commitInlineEdit: (targetOrEvent?: DataGridAppInlineEditCommitTarget | boolean | FocusEvent) => void;
+    cancelInlineEdit: () => void;
+    handleEditorKeydown: (event: KeyboardEvent) => void;
+}
+export declare function useDataGridAppInlineEditing<TRow, TSnapshot>(options: UseDataGridAppInlineEditingOptions<TRow, TSnapshot>): UseDataGridAppInlineEditingResult<TRow>;
+export {};
+//# sourceMappingURL=useDataGridAppInlineEditing.d.ts.map

package/dist/app/useDataGridAppInlineEditing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridAppInlineEditing.d.ts","sourceRoot":"","sources":["../../src/app/useDataGridAppInlineEditing.ts"],"names":[],"mappings":"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"}

package/dist/app/useDataGridAppInlineEditing.js

@@ -0,0 +1,301 @@
+import { nextTick, ref } from "vue";
+import { buildDataGridCellRenderModel, parseDataGridCellDraftValue, } from "@affino/datagrid-core";
+export function useDataGridAppInlineEditing(options) {
+    const editingCell = ref(null);
+    const editingCellValue = ref("");
+    const editingCellInitialFilter = ref("");
+    const editingCellOpenOnMount = ref(false);
+    const resolveBodyRowIndexById = options.resolveBodyRowIndexById ?? options.resolveRowIndexById ?? (() => -1);
+    const getBodyRowAtIndex = (rowIndex) => {
+        const runtime = options.runtime;
+        return runtime.getBodyRowAtIndex?.(rowIndex) ?? options.runtime.api.rows.get(rowIndex) ?? null;
+    };
+    const readEditorSourceValue = (row, column) => {
+        if (row.kind === "group") {
+            return undefined;
+        }
+        if (typeof column.column.accessor === "function") {
+            return column.column.accessor(row.data);
+        }
+        if (typeof column.column.valueGetter === "function") {
+            return column.column.valueGetter(row.data);
+        }
+        const field = typeof column.column.field === "string" && column.column.field.length > 0
+            ? column.column.field
+            : column.key;
+        return row.data[field];
+    };
+    const padDateEditorPart = (value) => String(value).padStart(2, "0");
+    const formatLocalDateTimeDraft = (date) => {
+        const year = date.getFullYear();
+        const month = padDateEditorPart(date.getMonth() + 1);
+        const day = padDateEditorPart(date.getDate());
+        const hours = padDateEditorPart(date.getHours());
+        const minutes = padDateEditorPart(date.getMinutes());
+        return `${year}-${month}-${day}T${hours}:${minutes}`;
+    };
+    const normalizeTemporalEditorDraft = (value, includeTime) => {
+        if (value == null || value === "") {
+            return "";
+        }
+        if (value instanceof Date) {
+            if (!Number.isFinite(value.getTime())) {
+                return "";
+            }
+            return includeTime ? formatLocalDateTimeDraft(value) : value.toISOString().slice(0, 10);
+        }
+        const stringValue = String(value).trim();
+        if (stringValue.length === 0) {
+            return "";
+        }
+        if (!includeTime && /^\d{4}-\d{2}-\d{2}$/.test(stringValue)) {
+            return stringValue;
+        }
+        if (includeTime && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(stringValue)) {
+            return stringValue;
+        }
+        const timestamp = Date.parse(stringValue);
+        if (!Number.isFinite(timestamp)) {
+            return "";
+        }
+        const date = new Date(timestamp);
+        return includeTime ? formatLocalDateTimeDraft(date) : date.toISOString().slice(0, 10);
+    };
+    const tryShowNativePicker = (editor) => {
+        if (typeof editor.showPicker !== "function") {
+            return;
+        }
+        try {
+            editor.showPicker();
+        }
+        catch {
+            // Browsers can require a direct user gesture for showPicker; focus should still succeed.
+        }
+    };
+    const focusInlineEditor = () => {
+        void nextTick(() => {
+            const applyFocus = () => {
+                const editor = options.bodyViewportRef.value?.querySelector(".cell-editor-control");
+                if (!editor) {
+                    return;
+                }
+                editor.focus({ preventScroll: true });
+                if (editor instanceof HTMLInputElement) {
+                    if (editor.type === "date" || editor.type === "datetime-local") {
+                        tryShowNativePicker(editor);
+                        return;
+                    }
+                    const caretPosition = editor.value.length;
+                    editor.setSelectionRange(caretPosition, caretPosition);
+                    return;
+                }
+                if (editor instanceof HTMLSelectElement) {
+                    tryShowNativePicker(editor);
+                }
+            };
+            applyFocus();
+            if (typeof window !== "undefined") {
+                window.requestAnimationFrame(() => {
+                    applyFocus();
+                });
+            }
+        });
+    };
+    const clearInlineEdit = () => {
+        editingCell.value = null;
+        editingCellValue.value = "";
+        editingCellInitialFilter.value = "";
+        editingCellOpenOnMount.value = false;
+    };
+    const focusAfterInlineEdit = (rowId, columnKey, target) => {
+        const columnIndex = options.visibleColumns.value.findIndex(column => column.key === columnKey);
+        if (columnIndex < 0) {
+            return;
+        }
+        const currentRowIndex = resolveBodyRowIndexById(rowId);
+        if (currentRowIndex < 0) {
+            return;
+        }
+        const resolveAdjacentEditableCoord = (direction) => {
+            const columnCount = options.visibleColumns.value.length;
+            if (columnCount === 0) {
+                return null;
+            }
+            if (direction > 0) {
+                for (let rowIndex = currentRowIndex; rowIndex < options.totalRows.value; rowIndex += 1) {
+                    const startColumnIndex = rowIndex === currentRowIndex ? columnIndex + 1 : 0;
+                    const row = getBodyRowAtIndex(rowIndex);
+                    if (!row) {
+                        continue;
+                    }
+                    for (let candidateColumnIndex = startColumnIndex; candidateColumnIndex < columnCount; candidateColumnIndex += 1) {
+                        const candidateColumnKey = options.visibleColumns.value[candidateColumnIndex]?.key;
+                        if (candidateColumnKey
+                            && options.isCellEditable(row, rowIndex, candidateColumnKey, candidateColumnIndex)) {
+                            return {
+                                rowIndex,
+                                columnIndex: candidateColumnIndex,
+                                rowId: row.rowId,
+                            };
+                        }
+                    }
+                }
+                return null;
+            }
+            for (let rowIndex = currentRowIndex; rowIndex >= 0; rowIndex -= 1) {
+                const startColumnIndex = rowIndex === currentRowIndex ? columnIndex - 1 : columnCount - 1;
+                const row = getBodyRowAtIndex(rowIndex);
+                if (!row) {
+                    continue;
+                }
+                for (let candidateColumnIndex = startColumnIndex; candidateColumnIndex >= 0; candidateColumnIndex -= 1) {
+                    const candidateColumnKey = options.visibleColumns.value[candidateColumnIndex]?.key;
+                    if (candidateColumnKey
+                        && options.isCellEditable(row, rowIndex, candidateColumnKey, candidateColumnIndex)) {
+                        return {
+                            rowIndex,
+                            columnIndex: candidateColumnIndex,
+                            rowId: row.rowId,
+                        };
+                    }
+                }
+            }
+            return null;
+        };
+        const maxRowIndex = Math.max(0, options.totalRows.value - 1);
+        const nextCoord = target === "next"
+            ? resolveAdjacentEditableCoord(1)
+            : target === "previous"
+                ? resolveAdjacentEditableCoord(-1)
+                : target === "below"
+                    ? {
+                        rowIndex: Math.min(maxRowIndex, currentRowIndex + 1),
+                        columnIndex,
+                        rowId: getBodyRowAtIndex(Math.min(maxRowIndex, currentRowIndex + 1))?.rowId ?? rowId,
+                    }
+                    : target === "above"
+                        ? {
+                            rowIndex: Math.max(0, currentRowIndex - 1),
+                            columnIndex,
+                            rowId: getBodyRowAtIndex(Math.max(0, currentRowIndex - 1))?.rowId ?? rowId,
+                        }
+                        : {
+                            rowIndex: currentRowIndex,
+                            columnIndex,
+                            rowId,
+                        };
+        if (nextCoord?.rowId == null) {
+            return;
+        }
+        options.applyCellSelection({
+            rowIndex: nextCoord.rowIndex,
+            columnIndex: nextCoord.columnIndex,
+            rowId: nextCoord.rowId,
+        });
+        void nextTick(() => {
+            options.ensureActiveCellVisible(nextCoord.rowIndex, nextCoord.columnIndex);
+        });
+    };
+    const startInlineEdit = (row, columnKey, startOptions = {}) => {
+        if (options.mode.value !== "base" || row.kind === "group" || row.rowId == null) {
+            return;
+        }
+        const rowIndex = resolveBodyRowIndexById(row.rowId);
+        const columnIndex = options.visibleColumns.value.findIndex(column => column.key === columnKey);
+        if (rowIndex < 0 || columnIndex < 0 || !options.isCellEditable(row, rowIndex, columnKey, columnIndex)) {
+            return;
+        }
+        const columnSnapshot = options.visibleColumns.value[columnIndex];
+        const editorMode = columnSnapshot
+            ? buildDataGridCellRenderModel({
+                column: columnSnapshot.column,
+                row: row.data,
+                editable: true,
+            }).editorMode
+            : "text";
+        const initialDraftValue = (editorMode === "date" || editorMode === "datetime") && columnSnapshot
+            ? normalizeTemporalEditorDraft(readEditorSourceValue(row, columnSnapshot), editorMode === "datetime")
+            : (startOptions.draftValue ?? options.readCell(row, columnKey));
+        editingCell.value = {
+            rowId: row.rowId,
+            columnKey,
+        };
+        editingCellValue.value = initialDraftValue;
+        editingCellInitialFilter.value = editorMode === "date" || editorMode === "datetime"
+            ? ""
+            : (startOptions.draftValue ?? "");
+        editingCellOpenOnMount.value = startOptions.openOnMount === true;
+        focusInlineEditor();
+    };
+    const commitInlineEdit = (targetOrEvent = "stay") => {
+        const currentEditingCell = editingCell.value;
+        if (!currentEditingCell) {
+            return;
+        }
+        const target = typeof targetOrEvent === "string"
+            ? targetOrEvent
+            : typeof targetOrEvent === "boolean"
+                ? (targetOrEvent ? "next" : "stay")
+                : "stay";
+        const beforeSnapshot = options.captureRowsSnapshot();
+        const rowIndex = resolveBodyRowIndexById(currentEditingCell.rowId);
+        const rowNode = rowIndex >= 0 ? getBodyRowAtIndex(rowIndex) : null;
+        const columnSnapshot = options.visibleColumns.value.find(column => column.key === currentEditingCell.columnKey);
+        const parsedValue = columnSnapshot
+            ? parseDataGridCellDraftValue({
+                column: columnSnapshot.column,
+                row: rowNode && rowNode.kind !== "group" ? rowNode.data : undefined,
+                draft: editingCellValue.value,
+            })
+            : editingCellValue.value;
+        options.runtime.api.rows.applyEdits([
+            {
+                rowId: currentEditingCell.rowId,
+                data: {
+                    [currentEditingCell.columnKey]: parsedValue,
+                },
+            },
+        ]);
+        options.recordEditTransaction(beforeSnapshot);
+        clearInlineEdit();
+        focusAfterInlineEdit(currentEditingCell.rowId, currentEditingCell.columnKey, target);
+    };
+    const cancelInlineEdit = () => {
+        const currentEditingCell = editingCell.value;
+        clearInlineEdit();
+        if (!currentEditingCell) {
+            return;
+        }
+        focusAfterInlineEdit(currentEditingCell.rowId, currentEditingCell.columnKey, "stay");
+    };
+    const handleEditorKeydown = (event) => {
+        if (event.key === "Tab") {
+            event.preventDefault();
+            commitInlineEdit(event.shiftKey ? "previous" : "next");
+            return;
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            commitInlineEdit(event.shiftKey ? "above" : "below");
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            cancelInlineEdit();
+        }
+    };
+    const isEditingCell = (row, columnKey) => {
+        return editingCell.value?.rowId === row.rowId && editingCell.value?.columnKey === columnKey;
+    };
+    return {
+        editingCell,
+        editingCellValue,
+        editingCellInitialFilter,
+        editingCellOpenOnMount,
+        isEditingCell,
+        startInlineEdit,
+        commitInlineEdit,
+        cancelInlineEdit,
+        handleEditorKeydown,
+    };
+}

package/dist/app/useDataGridAppIntentHistory.d.ts

@@ -0,0 +1,23 @@
+import { useDataGridIntentHistory } from "../advanced";
+import type { UseDataGridRuntimeResult } from "../composables/useDataGridRuntime";
+export interface DataGridAppRowSnapshot<TRow> {
+    rows: Array<{
+        rowId: string | number;
+        row: TRow;
+    }>;
+}
+export interface UseDataGridAppIntentHistoryOptions<TRow> {
+    runtime: Pick<UseDataGridRuntimeResult<TRow>, "api">;
+    cloneRowData: (row: TRow) => TRow;
+    syncViewport: () => void;
+}
+export interface UseDataGridAppIntentHistoryResult<TRow> {
+    captureRowsSnapshot: () => DataGridAppRowSnapshot<TRow>;
+    canUndo: ReturnType<typeof useDataGridIntentHistory<DataGridAppRowSnapshot<TRow>>>["canUndo"];
+    canRedo: ReturnType<typeof useDataGridIntentHistory<DataGridAppRowSnapshot<TRow>>>["canRedo"];
+    runHistoryAction: ReturnType<typeof useDataGridIntentHistory<DataGridAppRowSnapshot<TRow>>>["runHistoryAction"];
+    recordIntentTransaction: ReturnType<typeof useDataGridIntentHistory<DataGridAppRowSnapshot<TRow>>>["recordIntentTransaction"];
+    dispose: ReturnType<typeof useDataGridIntentHistory<DataGridAppRowSnapshot<TRow>>>["dispose"];
+}
+export declare function useDataGridAppIntentHistory<TRow>(options: UseDataGridAppIntentHistoryOptions<TRow>): UseDataGridAppIntentHistoryResult<TRow>;
+//# sourceMappingURL=useDataGridAppIntentHistory.d.ts.map

package/dist/app/useDataGridAppIntentHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataGridAppIntentHistory.d.ts","sourceRoot":"","sources":["../../src/app/useDataGridAppIntentHistory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AACtD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAA;AAEjF,MAAM,WAAW,sBAAsB,CAAC,IAAI;IAC1C,IAAI,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,GAAG,EAAE,IAAI,CAAA;KAAE,CAAC,CAAA;CACnD;AAED,MAAM,WAAW,kCAAkC,CAAC,IAAI;IACtD,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAA;IACpD,YAAY,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAA;IACjC,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,MAAM,WAAW,iCAAiC,CAAC,IAAI;IACrD,mBAAmB,EAAE,MAAM,sBAAsB,CAAC,IAAI,CAAC,CAAA;IACvD,OAAO,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7F,OAAO,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7F,gBAAgB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;IAC/G,uBAAuB,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAA;IAC7H,OAAO,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;CAC9F;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAC9C,OAAO,EAAE,kCAAkC,CAAC,IAAI,CAAC,GAChD,iCAAiC,CAAC,IAAI,CAAC,CAqCzC"}

package/dist/app/useDataGridAppIntentHistory.js

@@ -0,0 +1,37 @@
+import { useDataGridIntentHistory } from "../advanced";
+export function useDataGridAppIntentHistory(options) {
+    const captureRowsSnapshot = () => {
+        const count = options.runtime.api.rows.getCount();
+        const snapshotRows = [];
+        for (let rowIndex = 0; rowIndex < count; rowIndex += 1) {
+            const node = options.runtime.api.rows.get(rowIndex);
+            if (!node || node.rowId == null || node.kind === "group") {
+                continue;
+            }
+            snapshotRows.push({
+                rowId: node.rowId,
+                row: options.cloneRowData(node.data),
+            });
+        }
+        return { rows: snapshotRows };
+    };
+    const intentHistory = useDataGridIntentHistory({
+        captureSnapshot: captureRowsSnapshot,
+        applySnapshot: snapshot => {
+            options.runtime.api.rows.setData(snapshot.rows.map((entry, index) => ({
+                rowId: entry.rowId,
+                originalIndex: index,
+                row: options.cloneRowData(entry.row),
+            })));
+            options.syncViewport();
+        },
+    });
+    return {
+        captureRowsSnapshot,
+        canUndo: intentHistory.canUndo,
+        canRedo: intentHistory.canRedo,
+        runHistoryAction: intentHistory.runHistoryAction,
+        recordIntentTransaction: intentHistory.recordIntentTransaction,
+        dispose: intentHistory.dispose,
+    };
+}