@vuu-ui/vuu-data-editing 4.0.0-alpha.1 → 4.0.0-alpha.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.3",
   "description": "Shared data editing APIs and React components for VUU UI",
   "main": "./src/index.js",
   "author": "heswell",
@@ -12,13 +12,13 @@
   },
   "dependencies": {
     "@salt-ds/core": "1.67.0",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.1"
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.3"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.1",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.1"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.3",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^19.2.3"

package/src/EditButtons.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@salt-ds/core";
 import { useCallback, useEffect, useState } from "react";
-const EditButtons = ({ canCancel, canSave, confirmCancel, confirmSave, editSession, hasSelection = false, onCancel, onDelete, onSave, saveLabel = "Save" })=>{
+const EditButtons = ({ canCancel, canSave: _canSave, confirmCancel, confirmSave, editSession, hasSelection = false, onCancel, onDelete, onSave, saveLabel = "Save" })=>{
     const [editState, setEditState] = useState(()=>editSession?.editState ?? "clean");
     const handleSave = useCallback(async ()=>{
         if (confirmSave) {
@@ -42,7 +42,7 @@ const EditButtons = ({ canCancel, canSave, confirmCancel, confirmSave, editSessi
                 children: "Delete"
             }),
             /*#__PURE__*/ jsx(Button, {
-                disabled: !canSave,
+                disabled: !editSession?.canSave,
                 onClick: handleSave,
                 sentiment: "accented",
                 children: "stale" === editState ? `${saveLabel} (force)` : saveLabel

package/src/EditSession.js

@@ -16,9 +16,6 @@ class SupersededEditError extends Error {
 class EditSession extends EventEmitter {
     static newRowKey = "__vuu_new_row__";
     #rowEdits = new Map();
-    #deletedRows = new Set();
-    #deleteRevision = 0;
-    #rowDeleteRevisions = new Map();
     #editCount = 0;
     #deleteCount = 0;
     #addCount = 0;
@@ -48,47 +45,33 @@ class EditSession extends EventEmitter {
         this.#sourceTableDataSource = dataSource;
         this.#deleteMode = deleteMode;
         this.#editSessionApi = editSessionApi;
-        this.#rowDefaults = rowDefaults;
+        this.#rowDefaults = {
+            ...rowDefaults
+        };
     }
     get editCount() {
         return this.#editCount;
     }
-    set editCount(val) {
-        this.#setEditCounts(val, this.#invalidCount);
-    }
     get invalidCount() {
         return this.#invalidCount;
     }
-    set invalidCount(val) {
-        this.#setEditCounts(this.#editCount, val);
-    }
     get deleteCount() {
         return this.#deleteCount;
     }
-    set deleteCount(val) {
-        if (val !== this.#deleteCount) {
-            const oldState = this.editState;
-            const oldCount = this.#deleteCount;
-            this.#deleteCount = val;
-            this.#emitEditStateChange(oldState, 0 === oldCount || 0 === val);
-        }
-    }
     get addCount() {
         return this.#addCount;
     }
-    set addCount(val) {
-        if (val !== this.#addCount) {
-            const oldState = this.editState;
-            const oldCount = this.#addCount;
-            this.#addCount = val;
-            this.#emitEditStateChange(oldState, 0 === oldCount || 0 === val);
-        }
-    }
     get editState() {
         if (this.#invalidCount > 0) return "invalid";
         if (this.#isStale) return "stale";
         return 0 === this.#editCount && 0 === this.#deleteCount && 0 === this.#addCount ? "clean" : "dirty";
     }
+    get canCancel() {
+        return "active" === this.lifecycle.status || "error" === this.lifecycle.status && "end" === this.lifecycle.operation;
+    }
+    get canSave() {
+        return this.canCancel && ("dirty" === this.editState || "stale" === this.editState) && 0 === this.invalidCount;
+    }
     #emitEditStateChange(oldState, force = false) {
         const newState = this.editState;
         if (force || newState !== oldState) this.emit("editState", newState);
@@ -101,6 +84,22 @@ class EditSession extends EventEmitter {
             this.#emitEditStateChange(oldState);
         }
     }
+    #setDeleteCount(val) {
+        if (val !== this.#deleteCount) {
+            const oldState = this.editState;
+            const oldCount = this.#deleteCount;
+            this.#deleteCount = val;
+            this.#emitEditStateChange(oldState, 0 === oldCount || 0 === val);
+        }
+    }
+    #setAddCount(val) {
+        if (val !== this.#addCount) {
+            const oldState = this.editState;
+            const oldCount = this.#addCount;
+            this.#addCount = val;
+            this.#emitEditStateChange(oldState, 0 === oldCount || 0 === val);
+        }
+    }
     #setStale(isStale) {
         if (isStale !== this.#isStale) {
             const oldState = this.editState;
@@ -108,13 +107,6 @@ class EditSession extends EventEmitter {
             this.#emitEditStateChange(oldState);
         }
     }
-    #refreshEditCounts() {
-        let editCount = 0;
-        let invalidCount = 0;
-        for (const { cellEdits } of this.#rowEdits.values())for (const cellEdit of cellEdits.values())if (cellEdit.isValid) editCount++;
-        else invalidCount++;
-        this.#setEditCounts(editCount, invalidCount);
-    }
     get newRowState() {
         return this.#newRowState;
     }
@@ -236,20 +228,14 @@ class EditSession extends EventEmitter {
         this.emit("newRow", newRowState);
     }
     async deleteSelectedRows() {
-        const response = await this.dataSource?.deleteSelectedRows?.(this.#deleteMode);
-        if (isRpcError(response)) return;
-        const deletedKeys = response?.data?.deletedKeys;
-        if (deletedKeys && deletedKeys.length > 0) {
-            let newCount = 0;
-            for (const key of deletedKeys){
-                this.#rowDeleteRevisions.set(key, ++this.#deleteRevision);
-                if (!this.#deletedRows.has(key)) {
-                    this.#deletedRows.add(key);
-                    newCount++;
-                }
-            }
-            if (newCount > 0) this.deleteCount = this.#deleteCount + newCount;
-        }
+        const deleteSelectedRows = this.dataSource?.deleteSelectedRows;
+        if (void 0 === deleteSelectedRows) throw Error("[EditSession] datasource does not support deleting rows");
+        const selectedRowsCount = this.dataSource?.selectedRowsCount ?? 0;
+        const response = await deleteSelectedRows.call(this.dataSource, this.#deleteMode);
+        if (void 0 === response) throw Error("[EditSession] datasource returned no response when deleting rows");
+        if (isRpcError(response)) return response;
+        if (selectedRowsCount > 0) this.#setDeleteCount(this.#deleteCount + selectedRowsCount);
+        return response;
     }
     async addRow(rowData = {}) {
         const addRow = this.dataSource?.addRow;
@@ -259,54 +245,50 @@ class EditSession extends EventEmitter {
             ...rowData
         });
         if (void 0 === response) throw Error("[EditSession] datasource returned no response when adding row");
-        if (!isRpcError(response)) this.addCount = this.#addCount + 1;
+        if (!isRpcError(response)) this.#setAddCount(this.#addCount + 1);
         return response;
     }
-    restoreRows(keys) {
-        for (const key of keys)if (this.#deletedRows.has(key)) {
-            this.#deletedRows.delete(key);
-            this.#rowDeleteRevisions.delete(key);
-            this.deleteCount = this.#deleteCount - 1;
-        }
-    }
     hasRowChanges(key) {
-        return this.#rowEdits.has(key) || this.#deletedRows.has(key);
+        return this.#rowEdits.has(key);
     }
     isCellEdited(key, columnName) {
         const cellEdit = this.#rowEdits.get(key)?.cellEdits.get(columnName);
         return cellEdit?.isValid === true && cellEdit.originalValue !== cellEdit.editedValue;
     }
-    async undoRowChange(key) {
+    async undoRowChange(key, action) {
         if (!this.inEditMode) return;
         const undoRevision = this.#commitRevision;
-        const deleteRevisionAtRequest = this.#rowDeleteRevisions.get(key);
         const rowEditsAtRequest = this.#rowEdits.get(key);
         const columnsAtRequest = new Set(rowEditsAtRequest?.cellEdits.keys());
-        const wasDeleted = this.#deletedRows.has(key);
         const response = await this.dataSource?.undoRowChange?.(key);
-        if (isRpcError(response)) return;
+        if (void 0 === response) return;
+        if (isRpcError(response)) return response;
+        const oldState = this.editState;
         const rowEdits = this.#rowEdits.get(key);
         if (rowEdits) {
             const changedColumns = [];
+            let removedValidCount = 0;
+            let removedInvalidCount = 0;
             for (const columnName of columnsAtRequest){
                 const latestRevision = this.#cellCommitRevisions.get(key)?.get(columnName) ?? 0;
-                if (!(latestRevision > undoRevision)) {
-                    if (this.isCellEdited(key, columnName)) changedColumns.push(columnName);
-                    rowEdits.cellEdits.delete(columnName);
-                    this.#setCellCommitRevision(key, columnName);
-                }
+                if (latestRevision > undoRevision) continue;
+                const existing = rowEdits.cellEdits.get(columnName);
+                if (existing) if (existing.isValid) removedValidCount++;
+                else removedInvalidCount++;
+                if (this.isCellEdited(key, columnName)) changedColumns.push(columnName);
+                rowEdits.cellEdits.delete(columnName);
+                this.#setCellCommitRevision(key, columnName);
             }
             if (0 === rowEdits.cellEdits.size) this.#rowEdits.delete(key);
-            this.#refreshEditCounts();
+            this.#editCount -= removedValidCount;
+            this.#invalidCount -= removedInvalidCount;
             for (const columnName of changedColumns)this.emit("cellEditChanged", key, columnName);
         }
-        if (wasDeleted && this.#deletedRows.has(key) && this.#rowDeleteRevisions.get(key) === deleteRevisionAtRequest) {
-            this.#deletedRows.delete(key);
-            this.#rowDeleteRevisions.delete(key);
-            this.deleteCount = this.#deleteCount - 1;
-        }
-        const wasInsertedRow = response?.data?.wasInsertedRow === true;
-        if (wasInsertedRow) this.addCount = this.#addCount - 1;
+        if ("deleteRow" === action) this.#deleteCount--;
+        const wasInsertedRow = "addRow" === action || response?.data?.wasInsertedRow === true;
+        if (wasInsertedRow) this.#addCount--;
+        this.#emitEditStateChange(oldState);
+        return response;
     }
     #clearEdits() {
         const oldState = this.editState;
@@ -319,8 +301,6 @@ class EditSession extends EventEmitter {
                     columnName
                 ]));
         this.#rowEdits.clear();
-        this.#deletedRows.clear();
-        this.#rowDeleteRevisions.clear();
         this.#cellCommitRevisions.clear();
         this.#editCount = 0;
         this.#deleteCount = 0;
@@ -419,7 +399,8 @@ class EditSession extends EventEmitter {
                 sessionDataSource
             });
             try {
-                await this.dataSource?.endEditSession?.(saveChanges, force);
+                const response = await this.dataSource?.endEditSession?.(saveChanges, force);
+                if (isRpcError(response)) throw new Error(response.errorMessage);
                 this.#clearEdits();
                 this.#sessionDataSource = void 0;
                 this.#setLifecycle({
@@ -463,9 +444,24 @@ class EditSession extends EventEmitter {
             editedValue,
             isValid
         };
-        if (isValid && cellEdit.originalValue === editedValue) cellEdits.delete(column);
-        else cellEdits.set(column, cellEdit);
-        this.#refreshEditCounts();
+        let prevValidCount = 0;
+        let prevInvalidCount = 0;
+        if (existingCellEdit) if (existingCellEdit.isValid) prevValidCount = 1;
+        else prevInvalidCount = 1;
+        let nextValidCount = 0;
+        let nextInvalidCount = 0;
+        const isRevertedToOriginal = isValid && cellEdit.originalValue === editedValue;
+        if (isRevertedToOriginal) {
+            cellEdits.delete(column);
+            if (0 === cellEdits.size) this.#rowEdits.delete(key);
+        } else {
+            cellEdits.set(column, cellEdit);
+            if (isValid) nextValidCount = 1;
+            else nextInvalidCount = 1;
+        }
+        const editCountDiff = nextValidCount - prevValidCount;
+        const invalidCountDiff = nextInvalidCount - prevInvalidCount;
+        if (0 !== editCountDiff || 0 !== invalidCountDiff) this.#setEditCounts(this.#editCount + editCountDiff, this.#invalidCount + invalidCountDiff);
         if (wasEdited !== this.isCellEdited(key, column)) this.emit("cellEditChanged", key, column);
         return cellEdit;
     }
@@ -479,15 +475,21 @@ class EditSession extends EventEmitter {
     #isLatestCellCommit(key, columnName, revision) {
         return this.#cellCommitRevisions.get(key)?.get(columnName) === revision;
     }
-    async commit(key, columnName, originalValue, typedValue, isValid) {
+    async commit(key, columnName, originalValue, typedValue, isValid, { dataSourceValue, syncToDataSource = true } = {}) {
         if ("active" !== this.#lifecycle.status && !("error" === this.#lifecycle.status && "end" === this.#lifecycle.operation)) throw new Error("No edit session in progress");
         const revision = this.#setCellCommitRevision(key, columnName);
         const rowEditDetails = this.#getOrCreateRowEdits(key);
         const { cellEdits } = rowEditDetails;
         if (isValid) {
             const cellEdit = this.#storeCellEdit(key, cellEdits, columnName, originalValue, typedValue, isValid);
-            if (this.dataSource?.editCell) {
-                const response = await this.dataSource.editCell(key, columnName, typedValue);
+            if (syncToDataSource && this.dataSource?.editCell) {
+                const valueForDataSource = dataSourceValue ?? typedValue;
+                if ("object" == typeof valueForDataSource && null !== valueForDataSource) throw new Error("Custom edit values require a scalar dataSourceValue.");
+                const response = await this.dataSource.editCell(key, columnName, valueForDataSource);
+                if (!this.inEditMode) return {
+                    data: void 0,
+                    type: "SUCCESS_RESULT"
+                };
                 if (!this.#isLatestCellCommit(key, columnName, revision)) throw new SupersededEditError(`Edit response superseded for ${key}:${columnName}`);
                 const currentCellEdits = this.#getOrCreateRowEdits(key).cellEdits;
                 if (isRpcError(response)) this.#storeCellEdit(key, currentCellEdits, columnName, cellEdit.originalValue, typedValue, false);

package/src/UndoCellRenderer.js

@@ -20,7 +20,7 @@ const UndoCellRenderer = ({ column, dataRow })=>{
         children: /*#__PURE__*/ jsxs(Button, {
             appearance: "transparent",
             "aria-label": tooltipContent,
-            onClick: ()=>editSession?.undoRowChange(dataRow.key),
+            onClick: ()=>editSession?.undoRowChange(dataRow.key, dataRow.vuuAction),
             style: {
                 height: "100%",
                 width: "100%"

package/src/edit-field/EditField.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, FormField, FormFieldLabel, Input } from "@salt-ds/core";
+import { useCallback } from "react";
+import { useEditField } from "./useEditField.js";
+import { useEditSession } from "../DataEditingProvider.js";
+import { dataDescriptorTypeToVuuRowDataItemType } from "@vuu-ui/vuu-utils/src/data-utils";
+import { useEditMode } from "../EditModeProvider.js";
+const EditField = ({ dataRow, label, name, readOnly = false, required, type })=>{
+    const editSession = useEditSession();
+    const { isEditMode } = useEditMode();
+    const onEdit = useCallback(async (editState, editPhase)=>{
+        const { isValid = true, previousValue = "", value } = editState;
+        if ("commit" === editPhase && editSession) {
+            if (editSession.isNewRow(dataRow.key)) {
+                const isEmptyValue = "string" == typeof value && "" === value.trim();
+                if (!isValid && !isEmptyValue) return {
+                    errorMessage: "Invalid value",
+                    type: "ERROR_RESULT"
+                };
+                editSession.setNewRowValue(name, value);
+                if (editSession.isNewRowFinalColumn(name) || editSession.isNewRowComplete()) return editSession.addNewRow();
+                return {
+                    data: void 0,
+                    type: "SUCCESS_RESULT"
+                };
+            }
+            return editSession.commit(dataRow.key, name, previousValue, value, isValid);
+        }
+    }, [
+        dataRow,
+        editSession,
+        name
+    ]);
+    const onCommit = useCallback(()=>{
+        console.log("onCommit");
+    }, []);
+    const necessity = required ? "asterisk" : void 0;
+    const dataValue = dataRow?.[name] ?? "";
+    const column = {
+        label,
+        name,
+        serverDataType: "string"
+    };
+    const { editing, inputProps, warningMessage, previousValue = "", ...editProps } = useEditField({
+        column,
+        textType: "checkbox" !== type ? type : void 0,
+        onEdit,
+        type: dataDescriptorTypeToVuuRowDataItemType(column),
+        value: dataValue
+    });
+    return /*#__PURE__*/ jsxs(FormField, {
+        "data-field": name,
+        necessity: necessity,
+        children: [
+            /*#__PURE__*/ jsx(FormFieldLabel, {
+                children: label
+            }),
+            false === isEditMode ? /*#__PURE__*/ jsx(Input, {
+                bordered: true,
+                inputProps: {
+                    readOnly: true
+                },
+                value: String(dataValue)
+            }) : "checkbox" === type ? /*#__PURE__*/ jsx(Checkbox, {
+                checked: Boolean(dataValue),
+                onChange: onCommit
+            }) : /*#__PURE__*/ jsx(Input, {
+                ...editProps,
+                bordered: true,
+                readOnly: readOnly
+            })
+        ]
+    });
+};
+export { EditField };

package/src/edit-field/useEditField.js

@@ -0,0 +1,203 @@
+import { DataValidationError, dispatchCustomEvent, getTypedValue, isRpcError, isRpcSuccess } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+const stringValueOf = (value)=>value?.toString() ?? "";
+const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
+    const [editState, setEditState] = useState({
+        editing: false,
+        value: stringValueOf(value)
+    });
+    const initialValueRef = useRef(value?.toString() ?? "");
+    const isDirtyRef = useRef(false);
+    useEffect(()=>{
+        const nextValue = stringValueOf(value);
+        if (initialValueRef.current !== nextValue) {
+            initialValueRef.current = nextValue;
+            isDirtyRef.current = false;
+            setEditState((editState)=>({
+                    ...editState,
+                    message: void 0,
+                    value: nextValue
+                }));
+        }
+    }, [
+        value
+    ]);
+    const commit = useCallback(async ()=>{
+        const { value } = editState;
+        const result = column.clientSideEditValidationCheck?.(value, "*");
+        if (result?.ok === false) setEditState((state)=>({
+                ...state,
+                message: result?.messages?.join(",")
+            }));
+        else {
+            const { current: initialValue } = initialValueRef;
+            const previousValue = getTypedValue(initialValue, type);
+            try {
+                const typedValue = getTypedValue(value, type, true);
+                const response = await onEdit?.({
+                    editType: "commit",
+                    isValid: true,
+                    previousValue,
+                    value: typedValue
+                }, "commit");
+                if (isRpcSuccess(response)) {
+                    isDirtyRef.current = false;
+                    setEditState(({ previousValue, value })=>({
+                            editing: false,
+                            previousValue: previousValue === value ? void 0 : void 0 === previousValue ? initialValue : previousValue,
+                            value
+                        }));
+                } else if (isRpcError(response)) {
+                    setEditState((state)=>({
+                            ...state,
+                            message: response.errorMessage
+                        }));
+                    return false;
+                }
+                initialValueRef.current = value;
+                return true;
+            } catch (e) {
+                if (e instanceof DataValidationError) {
+                    const { actualType, expectedType, message } = e;
+                    if (column) {
+                        const { name, label = name } = column;
+                        const message = `${label} is a ${expectedType} value, data entered is ${actualType} `;
+                        setEditState((state)=>({
+                                ...state,
+                                message
+                            }));
+                        onEdit?.({
+                            editType: "commit",
+                            isValid: false,
+                            previousValue,
+                            value
+                        }, "commit");
+                    } else setEditState((state)=>({
+                            ...state,
+                            message
+                        }));
+                }
+            }
+        }
+        return false;
+    }, [
+        column,
+        editState,
+        onEdit,
+        type
+    ]);
+    const toggleActivation = useCallback(async (input, cancel = false)=>{
+        if (editState.editing) if (isDirtyRef.current) if (cancel) {
+            const { value: previousValue } = editState;
+            isDirtyRef.current = false;
+            setEditState({
+                editing: false,
+                value: initialValueRef.current,
+                message: void 0
+            });
+            onEdit?.({
+                editType: "cancel",
+                isValid: true,
+                previousValue,
+                value: getTypedValue(initialValueRef.current, type, true)
+            }, "commit");
+        } else {
+            const commitSuccessful = await commit();
+            if (commitSuccessful) {
+                setEditState((editState)=>({
+                        ...editState,
+                        editing: false
+                    }));
+                dispatchCustomEvent(input, "vuu-commit");
+            }
+        }
+        else setEditState((editState)=>({
+                ...editState,
+                editing: false
+            }));
+        else if (!cancel) {
+            setEditState((editState)=>({
+                    ...editState,
+                    editing: true
+                }));
+            input.select();
+        }
+    }, [
+        commit,
+        editState,
+        onEdit,
+        type
+    ]);
+    const handleKeyDown = useCallback(async (evt)=>{
+        const { key, target } = evt;
+        const input = target;
+        if ("Enter" === key) toggleActivation(input);
+        else if ("ArrowRight" === key || "ArrowLeft" === key || "ArrowUp" === key || "ArrowDown" === key) {
+            if (editState.editing) evt.stopPropagation();
+        } else if ("Escape" === evt.key) toggleActivation(input, true);
+    }, [
+        editState,
+        toggleActivation
+    ]);
+    const handleFocus = useCallback((e)=>{
+        const input = e.target;
+        const source = e.relatedTarget;
+        if (source?.classList.contains("vuuTableCell") && source.contains(input)) toggleActivation(input);
+    }, [
+        toggleActivation
+    ]);
+    const handleBlur = useCallback(async ()=>{
+        if (editState.editing) {
+            if (isDirtyRef.current) {
+                const commitSuccessful = await commit();
+                console.log({
+                    commitSuccessful
+                });
+            }
+            setEditState((editState)=>({
+                    ...editState,
+                    editing: false
+                }));
+        }
+    }, [
+        commit,
+        editState
+    ]);
+    const handleChange = useCallback((evt)=>{
+        const { value } = evt.target;
+        isDirtyRef.current = value !== initialValueRef.current;
+        const result = column.clientSideEditValidationCheck?.(value, "change");
+        setEditState({
+            editing: true,
+            value
+        });
+        onEdit?.({
+            editType: "change",
+            isValid: result?.ok !== false,
+            previousValue: initialValueRef.current,
+            value
+        }, "change");
+        if (result?.ok === false) setEditState({
+            editing: true,
+            value,
+            message: result.messages?.join(",")
+        });
+    }, [
+        column,
+        onEdit
+    ]);
+    return {
+        editing: editState.editing,
+        inputProps: {
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            type: textType
+        },
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        previousValue: editState.previousValue,
+        value: editState.value,
+        warningMessage: editState.message
+    };
+};
+export { useEditField };

package/src/index.js

@@ -1,10 +1,13 @@
+export { StaleUpdateError } from "@vuu-ui/vuu-utils";
 export { DataEditingProvider, useEditSession } from "./DataEditingProvider.js";
-export { useCellEdited } from "./useCellEdited.js";
 export { getVuuEditMessage, isEditRowReadOnly, isInlineEditingSession, withDataRowEditErrors } from "./edit-utils.js";
+export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator } from "./editActionRowClassNameGenerator.js";
 export { EditButtons } from "./EditButtons.js";
+export { EditField } from "./edit-field/EditField.js";
+export { useEditField } from "./edit-field/useEditField.js";
 export { EditModeProvider, useEditMode } from "./EditModeProvider.js";
 export { EditError, EditSession, SupersededEditError } from "./EditSession.js";
-export { StaleUpdateError } from "@vuu-ui/vuu-utils";
-export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator } from "./editActionRowClassNameGenerator.js";
 export { UNDO_CELL_RENDERER, UndoCellRenderer, getUndoButtonContent, getUndoTooltipContent } from "./UndoCellRenderer.js";
+export { useCellEdited } from "./useCellEdited.js";
+export { useEditable } from "./useEditable.js";
 export { useEditableTable } from "./useEditableTable.js";

package/src/useEditable.js

@@ -0,0 +1,52 @@
+import { EditSession, useEditMode } from "./index.js";
+import { useCallback, useEffect, useMemo } from "react";
+const useEditable = ({ copyOption = "Selected", dataSource, onCancel, onSave })=>{
+    const { isEditMode } = useEditMode();
+    const editSession = useMemo(()=>new EditSession({
+            dataSource
+        }), [
+        dataSource
+    ]);
+    const handleCancel = useCallback(async ()=>{
+        try {
+            await editSession.end();
+            onCancel();
+        } catch (error) {
+            console.error("[useEditableTable] cancel edit session failed", error);
+        }
+    }, [
+        editSession,
+        onCancel
+    ]);
+    const handleSave = useCallback(async (force = false)=>{
+        try {
+            await editSession.end(true, force);
+            onSave();
+        } catch (error) {
+            console.error("[useEditableTable] save edit session failed", error);
+        }
+    }, [
+        editSession,
+        onSave
+    ]);
+    useEffect(()=>{
+        const transition = isEditMode ? editSession.begin(copyOption) : editSession.end();
+        transition.catch((error)=>{
+            if (isEditMode) {
+                console.error("[useEditableTable] begin edit session failed", error);
+                handleCancel();
+            } else console.error("[useEditableTable] end edit session failed", error);
+        });
+    }, [
+        copyOption,
+        editSession,
+        isEditMode,
+        handleCancel
+    ]);
+    return {
+        editSession,
+        onCancel: handleCancel,
+        onSave: handleSave
+    };
+};
+export { useEditable };

package/src/useEditableTable.js

@@ -74,7 +74,7 @@ const useEditableTable = ({ columns, dataSource: dataSourceProp, deleteMode = "s
     }, [
         editSession
     ]);
-    const handleUndoRowChange = useCallback((key)=>void editSession.undoRowChange(key), [
+    const handleUndoRowChange = useCallback((key, action)=>void editSession.undoRowChange(key, action), [
         editSession
     ]);
     useEffect(()=>{

package/types/EditButtons.d.ts

@@ -11,4 +11,4 @@ export interface EditButtonProps {
     confirmSave?: () => boolean | Promise<boolean>;
     confirmCancel?: () => boolean | Promise<boolean>;
 }
-export declare const EditButtons: ({ canCancel, canSave, confirmCancel, confirmSave, editSession, hasSelection, onCancel, onDelete, onSave, saveLabel, }: EditButtonProps) => import("react").JSX.Element;
+export declare const EditButtons: ({ canCancel, canSave: _canSave, confirmCancel, confirmSave, editSession, hasSelection, onCancel, onDelete, onSave, saveLabel, }: EditButtonProps) => import("react").JSX.Element;

package/types/EditModeProvider.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export interface EditModeContextProps {
     isEditMode: boolean;
     setEditMode: (inEditMode: boolean) => void;

package/types/EditSession.d.ts

@@ -1,12 +1,18 @@
-import type { CopyOption, DataSource, DeleteRowMode, EditApi, SessionType } from "@vuu-ui/vuu-data-types";
+import type { CopyOption, DataSource, DeleteRowMode, SessionType } from "@vuu-ui/vuu-data-types";
 import type { RpcResult, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
 import { EventEmitter } from "@vuu-ui/vuu-utils";
 export type EditState = "clean" | "dirty" | "invalid" | "stale";
+export type EditActionType = "deleteRow" | "addRow" | "editCell";
+export type EditSessionValue = VuuRowDataItemType | object;
+export type EditCommitOptions = {
+    dataSourceValue?: VuuRowDataItemType;
+    syncToDataSource?: boolean;
+};
 /** Column name to default value mapping applied to every addRow call when a column is absent from the row data. */
 export type RowDefaultDataItemValues = Record<string, VuuRowDataItemType>;
 export type EditSessionApi = "createSessionDataSource" | "beginEditSession";
 export type EditSessionConstructorProps = {
-    dataSource: EditApi;
+    dataSource: DataSource;
     /** @default "soft" */
     deleteMode?: DeleteRowMode;
     /** @default "createSessionDataSource" */
@@ -53,14 +59,12 @@ export declare class EditSession extends EventEmitter<EditSessionEvents> {
     static readonly newRowKey = "__vuu_new_row__";
     constructor({ dataSource, deleteMode, editSessionApi, rowDefaults, }: EditSessionConstructorProps);
     get editCount(): number;
-    set editCount(val: number);
     get invalidCount(): number;
-    set invalidCount(val: number);
     get deleteCount(): number;
-    set deleteCount(val: number);
     get addCount(): number;
-    set addCount(val: number);
     get editState(): EditState;
+    get canCancel(): boolean;
+    get canSave(): boolean;
     get newRowState(): NewRowState;
     isNewRow(key: string): key is "__vuu_new_row__";
     isNewRowFinalColumn(columnName: string): boolean;
@@ -68,23 +72,22 @@ export declare class EditSession extends EventEmitter<EditSessionEvents> {
     configureNewRow(columns: readonly string[], requiredColumns?: readonly string[]): void;
     setNewRowValue(column: string, value: VuuRowDataItemType): void;
     addNewRow(): Promise<RpcResult>;
-    deleteSelectedRows(): Promise<void>;
+    deleteSelectedRows(): Promise<RpcResult>;
     addRow(rowData?: Record<string, VuuRowDataItemType>): Promise<RpcResult>;
-    restoreRows(keys: string[]): void;
     hasRowChanges(key: string): boolean;
     isCellEdited(key: string, columnName: string): boolean;
-    undoRowChange(key: string): Promise<void>;
+    undoRowChange(key: string, action: EditActionType): Promise<RpcResult | undefined>;
     begin(copyOption?: CopyOption, sessionType?: SessionType): Promise<DataSource>;
     /**
      * Safe to call repeatedly - schema of a remote session table typically arrives
      * after begin() resolves, so callers re-invoke this once 'subscribed' fires.
      */
     reconcileWithSessionSchema(): void;
-    get dataSource(): EditApi<import("@vuu-ui/vuu-data-types").DataSourceRow<VuuRowDataItemType>> | undefined;
+    get dataSource(): import("@vuu-ui/vuu-data-types").DataSourceBase<import("@vuu-ui/vuu-data-types").DataSourceRowWithBigint> | undefined;
     get sessionDataSource(): DataSource | undefined;
     end(saveChanges?: boolean, force?: boolean): Promise<void>;
     get lifecycle(): EditLifecycle;
     get inEditMode(): boolean;
-    commit(key: string, columnName: string, originalValue: VuuRowDataItemType, typedValue: string | number | boolean, isValid: boolean): Promise<RpcResult>;
+    commit(key: string, columnName: string, originalValue: EditSessionValue, typedValue: EditSessionValue, isValid: boolean, { dataSourceValue, syncToDataSource }?: EditCommitOptions): Promise<RpcResult>;
 }
 export {};

package/types/edit-field/EditField.d.ts

@@ -0,0 +1,12 @@
+import type { DataRow } from "@vuu-ui/vuu-table-types";
+export type TextFieldType = "email" | "password";
+export type EditFieldType = "checkbox" | TextFieldType;
+export interface EditFieldProps {
+    dataRow: DataRow;
+    label: string;
+    name: string;
+    readOnly?: boolean;
+    required?: boolean;
+    type?: EditFieldType;
+}
+export declare const EditField: ({ dataRow, label, name, readOnly, required, type, }: EditFieldProps) => import("react").JSX.Element;

package/types/edit-field/useEditField.d.ts

@@ -0,0 +1,24 @@
+import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import type { RuntimeColumnDescriptor, TableCellEditHandler } from "@vuu-ui/vuu-table-types";
+import { type ChangeEventHandler, type FocusEventHandler, type KeyboardEvent } from "react";
+import type { TextFieldType } from "./EditField";
+export interface EditFieldHookProps<T extends VuuRowDataItemType = VuuRowDataItemType> {
+    column: Pick<RuntimeColumnDescriptor, "clientSideEditValidationCheck" | "label" | "name">;
+    value?: T;
+    onEdit?: TableCellEditHandler;
+    textType?: TextFieldType;
+    type?: "string" | "number" | "boolean";
+}
+export declare const useEditField: <T extends string | number | boolean = string>({ column, value, onEdit, textType, type, }: EditFieldHookProps<T>) => {
+    editing: boolean;
+    inputProps: {
+        onBlur: FocusEventHandler<HTMLElement>;
+        onFocus: FocusEventHandler<HTMLElement>;
+        type: TextFieldType | undefined;
+    };
+    onChange: ChangeEventHandler;
+    onKeyDown: (evt: KeyboardEvent<HTMLElement>) => Promise<void>;
+    previousValue: string | undefined;
+    value: string;
+    warningMessage: string | undefined;
+};

package/types/index.d.ts

@@ -1,10 +1,13 @@
+export { StaleUpdateError } from "@vuu-ui/vuu-utils";
 export { DataEditingProvider, useEditSession } from "./DataEditingProvider";
-export { useCellEdited } from "./useCellEdited";
-export { getVuuEditMessage, isInlineEditingSession, isEditRowReadOnly, withDataRowEditErrors, } from "./edit-utils";
+export { getVuuEditMessage, isEditRowReadOnly, isInlineEditingSession, withDataRowEditErrors } from "./edit-utils";
+export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator } from "./editActionRowClassNameGenerator";
 export { EditButtons, type EditButtonProps } from "./EditButtons";
-export { EditModeProvider, useEditMode, type EditModeContextProps, } from "./EditModeProvider";
-export { EditError, EditSession, SupersededEditError, type EditLifecycle, type EditSessionConstructorProps, type NewRowState, type EditState, type RowDefaultDataItemValues, } from "./EditSession";
-export { StaleUpdateError } from "@vuu-ui/vuu-utils";
-export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator, } from "./editActionRowClassNameGenerator";
-export { getUndoButtonContent, getUndoTooltipContent, UNDO_CELL_RENDERER, UndoCellRenderer, type UndoCellRendererComponentProps, } from "./UndoCellRenderer";
-export { useEditableTable, type EditableTableHookProps, type EditMode, } from "./useEditableTable";
+export { EditField } from './edit-field/EditField';
+export { useEditField } from './edit-field/useEditField';
+export { EditModeProvider, useEditMode, type EditModeContextProps } from "./EditModeProvider";
+export { EditError, EditSession, SupersededEditError, type EditActionType, type EditLifecycle, type EditSessionConstructorProps, type EditState, type NewRowState, type RowDefaultDataItemValues } from "./EditSession";
+export { getUndoButtonContent, getUndoTooltipContent, UNDO_CELL_RENDERER, UndoCellRenderer, type UndoCellRendererComponentProps } from "./UndoCellRenderer";
+export { useCellEdited } from "./useCellEdited";
+export { useEditable } from './useEditable';
+export { useEditableTable, type EditableTableHookProps, type EditMode } from "./useEditableTable";

package/types/useEditState.d.ts

@@ -0,0 +1,2 @@
+import type { EditSession, EditState } from "./EditSession";
+export declare function useEditState(editSession: EditSession | undefined): EditState;

package/types/useEditable.d.ts

@@ -0,0 +1,13 @@
+import type { CopyOption, DataSource } from "@vuu-ui/vuu-data-types";
+import { EditSession } from ".";
+export interface EditableHookProps {
+    copyOption?: CopyOption;
+    dataSource: DataSource;
+    onCancel: () => void;
+    onSave: () => void;
+}
+export declare const useEditable: ({ copyOption, dataSource, onCancel, onSave }: EditableHookProps) => {
+    editSession: EditSession;
+    onCancel: () => Promise<void>;
+    onSave: (force?: boolean) => Promise<void>;
+};

package/types/useEditableTable.d.ts

@@ -1,6 +1,6 @@
 import type { CopyOption, DataSource, DeleteRowMode } from "@vuu-ui/vuu-data-types";
 import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import { EditSession, type EditLifecycle, type EditSessionApi, type RowDefaultDataItemValues } from "./EditSession";
+import { EditSession, type EditActionType, type EditLifecycle, type EditSessionApi, type RowDefaultDataItemValues } from "./EditSession";
 export type EditMode = "edit" | "view";
 export interface EditableTableHookProps {
     /**
@@ -37,7 +37,7 @@ export declare const useEditableTable: ({ columns, dataSource: dataSourceProp, d
     onCancel: () => Promise<void>;
     onDelete: () => Promise<void>;
     onSave: (force?: boolean) => Promise<void>;
-    onUndoRowChange: (key: string) => undefined;
+    onUndoRowChange: (key: string, action: EditActionType) => undefined;
     rowClassNameGenerators: string[] | undefined;
     sessionDataSource: import("@vuu-ui/vuu-data-types").DataSourceBase<import("@vuu-ui/vuu-data-types").DataSourceRowWithBigint> | undefined;
     sourceDataSource: DataSource;