@vuu-ui/vuu-data-editing 4.1.1 → 4.2.0

package/README.md

@@ -148,8 +148,8 @@ A cell is considered edited only when `originalValue !== editedValue && isValid
 ### New Row Flow (`addNewRow` / `addRow`)
 
 1. **Configure**: `editSession.configureNewRow(columns, requiredColumns)` defines the expected column inputs.
-2. **Draft**: `editSession.setNewRowValue(column, value)` updates `#newRowState.values`.
-3. **Submit**: `editSession.addNewRow()` validates required columns and delegates to `addRow()`.
+2. **Draft**: `editSession.setNewRowValue(column, value)` updates `#newRowState.values` (or removes the column entry if cleared to `undefined`/`""`) and clears any recorded error for `column`. `editSession.setNewRowError(column, errorMessage)` records a validation error in `#newRowState.errors` and `editSession.clearNewRowError(column)` clears it on cancel.
+3. **Submit**: `editSession.addNewRow()` validates required columns and checks that `#newRowState.errors` is empty before delegating to `addRow()`.
 4. **`addRow(rowData)`**:
    - Calls `dataSource.addRow(rowData)` with `#rowDefaults` merged in.
    - On success, extracts the row key directly from the response map (`response.data.key`) and records it in `#addedRowKeys`.
@@ -190,8 +190,9 @@ editSession.undoRowChange(key, action);
 
 - **`end(saveChanges = false, force = false)`**:
   - Transitions lifecycle to `"ending"`.
-  - Calls `dataSource.endEditSession(saveChanges, force)`.
+  - Calls `dataSource.endEditSession(saveChanges, force)` (skipped when discarding an already-unsubscribed session DataSource).
   - On success: clears all edits, resets counters, unsubscribes session DataSource, transitions to `"idle"`.
+  - **Session Disconnection / Unsubscribe**: When a WebSocket disconnects, `ServerProxy` drops session-table viewports and posts `subscribe-failed`. The session DataSource emits `"unsubscribed"`, `EditSession` automatically ends the session locally (`end(false)`) without issuing `endEditSession`, and `useEditableTable` invokes `onCancel` to exit edit mode back to view mode.
   - **Stale Updates (`StaleUpdateError`)**: If the server rejects the commit due to concurrent edits, lifecycle transitions to `error { operation: "end" }` and `editState` becomes `"stale"`. The user can force-save with `end(true, true)`.
 
 ---

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.1.1",
+  "version": "4.2.0",
   "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.74.0",
-    "@vuu-ui/vuu-ui-controls": "4.1.1",
-    "@vuu-ui/vuu-utils": "4.1.1"
+    "@vuu-ui/vuu-ui-controls": "4.2.0",
+    "@vuu-ui/vuu-utils": "4.2.0"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.1.1",
-    "@vuu-ui/vuu-protocol-types": "4.1.1",
-    "@vuu-ui/vuu-table-types": "4.1.1"
+    "@vuu-ui/vuu-data-types": "4.2.0",
+    "@vuu-ui/vuu-protocol-types": "4.2.0",
+    "@vuu-ui/vuu-table-types": "4.2.0"
   },
   "peerDependencies": {
     "react": "^19.2.3"

package/src/EditSession.js

@@ -123,6 +123,7 @@ class EditSession extends EventEmitter {
         return this.#newRowState.columns.at(-1) === columnName;
     }
     isNewRowComplete() {
+        if (Object.keys(this.#newRowState.errors).length > 0) return false;
         const requiredColumns = this.#newRowState.requiredColumns ?? this.#newRowState.columns;
         return requiredColumns.every((column)=>{
             const value = this.#newRowState.values[column];
@@ -149,13 +150,40 @@ class EditSession extends EventEmitter {
             ...this.#newRowState.errors
         };
         delete errors[column];
+        const values = {
+            ...this.#newRowState.values
+        };
+        if (void 0 === value || "string" == typeof value && "" === value.trim()) delete values[column];
+        else values[column] = value;
         this.#setNewRowState({
             ...this.#newRowState,
             errors,
-            values: {
-                ...this.#newRowState.values,
-                [column]: value
-            }
+            values
+        });
+    }
+    setNewRowError(column, errorMessage = "Invalid value") {
+        const values = {
+            ...this.#newRowState.values
+        };
+        delete values[column];
+        this.#setNewRowState({
+            ...this.#newRowState,
+            errors: {
+                ...this.#newRowState.errors,
+                [column]: errorMessage
+            },
+            values
+        });
+    }
+    clearNewRowError(column) {
+        if (!(column in this.#newRowState.errors)) return;
+        const errors = {
+            ...this.#newRowState.errors
+        };
+        delete errors[column];
+        this.#setNewRowState({
+            ...this.#newRowState,
+            errors
         });
     }
     async addNewRow() {
@@ -364,6 +392,9 @@ class EditSession extends EventEmitter {
         this.#lifecycle = lifecycle;
         this.emit("lifecycle", lifecycle);
     }
+    #handleSessionUnsubscribed = ()=>{
+        if (this.canCancel) this.end(false);
+    };
     #enqueue(operation) {
         const result = this.#transitionQueue.then(operation);
         this.#transitionQueue = result.then(()=>void 0, ()=>void 0);
@@ -388,6 +419,7 @@ class EditSession extends EventEmitter {
                 const sessionDataSource = "beginEditSession" === this.#editSessionApi ? await sourceDataSource?.beginEditSession?.(toEditSessionMode(copyOption)) : await sourceDataSource?.createSessionDataSource?.(copyOption, sessionType);
                 if (!sessionDataSource) throw new Error(`[EditSession] datasource does not support ${this.#editSessionApi}`);
                 this.#sessionDataSource = sessionDataSource;
+                sessionDataSource.on?.("unsubscribed", this.#handleSessionUnsubscribed);
                 this.#setStale(false);
                 this.#setLifecycle({
                     status: "active",
@@ -443,6 +475,7 @@ class EditSession extends EventEmitter {
             });
             try {
                 if ("unsubscribed" !== sessionDataSource.status || saveChanges) await this.dataSource?.endEditSession?.(saveChanges, force);
+                sessionDataSource.removeListener?.("unsubscribed", this.#handleSessionUnsubscribed);
                 this.#clearEdits();
                 this.#sessionDataSource = void 0;
                 this.#setLifecycle({

package/src/edit-field/EditField.js

@@ -16,15 +16,25 @@ const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false
         ...options
     });
     const onEdit = useCallback(async (editState, editPhase)=>{
-        const { isValid = true, previousValue = "", value } = editState;
+        const { editType, isValid = true, previousValue = "", value } = editState;
         if ("commit" === editPhase && editSession) {
             if (editSession.isNewRow(dataRow.key)) {
+                if ("cancel" === editType) {
+                    editSession.clearNewRowError(name);
+                    return {
+                        data: void 0,
+                        type: "SUCCESS_RESULT"
+                    };
+                }
                 const isEmptyValue = "string" == typeof value && "" === value.trim();
-                if (!isValid && !isEmptyValue) return {
-                    errorMessage: "Invalid value",
-                    type: "ERROR_RESULT"
-                };
-                editSession.setNewRowValue(name, value);
+                if (!isValid && !isEmptyValue) {
+                    editSession.setNewRowError(name);
+                    return {
+                        errorMessage: "Invalid value",
+                        type: "ERROR_RESULT"
+                    };
+                }
+                editSession.setNewRowValue(name, isEmptyValue ? void 0 : value);
                 if (!deferNewRow && (editSession.isNewRowFinalColumn(name) || editSession.isNewRowComplete())) return editSession.addNewRow();
                 return {
                     data: void 0,
@@ -54,6 +64,7 @@ const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false
     const column = {
         label,
         name,
+        required,
         serverDataType: "string"
     };
     const { inputProps, onChange, onDropdownSelectionChange, onKeyDown, value } = useEditField({

package/src/edit-field/useEditField.js

@@ -8,11 +8,13 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
     });
     const initialValueRef = useRef(value?.toString() ?? "");
     const isDirtyRef = useRef(false);
+    const hasUnresolvedErrorRef = useRef(false);
     useEffect(()=>{
         const nextValue = stringValueOf(value);
         if (initialValueRef.current !== nextValue) {
             initialValueRef.current = nextValue;
             isDirtyRef.current = false;
+            hasUnresolvedErrorRef.current = false;
             setEditState((editState)=>({
                     ...editState,
                     message: void 0,
@@ -23,59 +25,69 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
         value
     ]);
     const commit = useCallback(async (value = editState.value)=>{
-        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((state)=>({
-                            editing: false,
-                            previousValue: state.previousValue === value ? void 0 : void 0 === state.previousValue ? initialValue : state.previousValue,
-                            value
-                        }));
-                } else if (isRpcError(response)) {
+        const { current: initialValue } = initialValueRef;
+        const previousValue = getTypedValue(initialValue, type);
+        const isEmptyOptional = column?.required === false && "" === value.trim();
+        const result = isEmptyOptional ? void 0 : column.clientSideEditValidationCheck?.(value, "*");
+        if (result?.ok === false) {
+            hasUnresolvedErrorRef.current = true;
+            setEditState((state)=>({
+                    ...state,
+                    message: result?.messages?.join(",")
+                }));
+            await onEdit?.({
+                editType: "commit",
+                isValid: false,
+                previousValue,
+                value
+            }, "commit");
+        } else try {
+            const typedValue = isEmptyOptional ? "" : getTypedValue(value, type, true);
+            const response = await onEdit?.({
+                editType: "commit",
+                isValid: true,
+                previousValue,
+                value: typedValue
+            }, "commit");
+            if (isRpcSuccess(response)) {
+                isDirtyRef.current = false;
+                hasUnresolvedErrorRef.current = false;
+                setEditState((state)=>({
+                        editing: false,
+                        previousValue: state.previousValue === value ? void 0 : void 0 === state.previousValue ? initialValue : state.previousValue,
+                        value
+                    }));
+            } else if (isRpcError(response)) {
+                hasUnresolvedErrorRef.current = true;
+                setEditState((state)=>({
+                        ...state,
+                        message: response.errorMessage
+                    }));
+                return false;
+            }
+            initialValueRef.current = value;
+            return true;
+        } catch (e) {
+            if (e instanceof DataValidationError) {
+                hasUnresolvedErrorRef.current = true;
+                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: 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
                         }));
-                }
+                    await onEdit?.({
+                        editType: "commit",
+                        isValid: false,
+                        previousValue,
+                        value
+                    }, "commit");
+                } else setEditState((state)=>({
+                        ...state,
+                        message
+                    }));
             }
         }
         return false;
@@ -86,9 +98,10 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
         type
     ]);
     const toggleActivation = useCallback(async (input, cancel = false)=>{
-        if (editState.editing) if (isDirtyRef.current) if (cancel) {
+        if (editState.editing) if (isDirtyRef.current || hasUnresolvedErrorRef.current) if (cancel) {
             const { value: previousValue } = editState;
             isDirtyRef.current = false;
+            hasUnresolvedErrorRef.current = false;
             setEditState({
                 editing: false,
                 value: initialValueRef.current,
@@ -98,7 +111,7 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
                 editType: "cancel",
                 isValid: true,
                 previousValue,
-                value: getTypedValue(initialValueRef.current, type, true)
+                value: getTypedValue(initialValueRef.current, type) ?? initialValueRef.current
             }, "commit");
         } else {
             const commitSuccessful = await commit();
@@ -147,7 +160,7 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
     ]);
     const handleBlur = useCallback(async ()=>{
         if (editState.editing) {
-            if (isDirtyRef.current) await commit();
+            if (isDirtyRef.current || hasUnresolvedErrorRef.current) await commit();
             setEditState((editState)=>({
                     ...editState,
                     editing: false

package/src/useEditableTable.js

@@ -90,10 +90,20 @@ const useEditableTable = ({ columns, dataSource: dataSourceProp, deleteMode = "s
             editSession.reconcileWithSessionSchema();
             setSubscribedSessionDataSource(sessionDataSource);
         };
+        const handleUnsubscribed = ()=>{
+            if (editSession.canCancel) editSession.end().then(()=>{
+                setSelectionCount(0);
+                onCancelRef.current();
+            });
+        };
         setSubscribedSessionDataSource(void 0);
         sessionDataSource.on("subscribed", handleSubscribed);
+        sessionDataSource.on("unsubscribed", handleUnsubscribed);
         if ("subscribed" === sessionDataSource.status && sessionDataSource.tableSchema) handleSubscribed();
-        return ()=>sessionDataSource.removeListener("subscribed", handleSubscribed);
+        return ()=>{
+            sessionDataSource.removeListener("subscribed", handleSubscribed);
+            sessionDataSource.removeListener("unsubscribed", handleUnsubscribed);
+        };
     }, [
         editSession,
         sessionDataSource

package/types/EditSession.d.ts

@@ -78,7 +78,9 @@ export declare class EditSession extends EventEmitter<EditSessionEvents> impleme
     isNewRowFinalColumn(columnName: string): boolean;
     isNewRowComplete(): boolean;
     configureNewRow(columns: readonly string[], requiredColumns?: readonly string[]): void;
-    setNewRowValue(column: string, value: VuuRowDataItemType): void;
+    setNewRowValue(column: string, value: VuuRowDataItemType | undefined): void;
+    setNewRowError(column: string, errorMessage?: string): void;
+    clearNewRowError(column: string): void;
     addNewRow(): Promise<RpcResult>;
     deleteSelectedRows(): Promise<RpcResult>;
     addRow(rowData?: Record<string, VuuRowDataItemType>): Promise<RpcResult>;

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

@@ -4,7 +4,7 @@ import { type ChangeEventHandler, type FocusEventHandler, type KeyboardEvent, ty
 import type { LookupOption } from "../lookup-values/useLookupValues";
 import type { TextFieldType } from "./EditField";
 export interface EditFieldHookProps<T extends VuuRowDataItemType = VuuRowDataItemType> {
-    column: Pick<RuntimeColumnDescriptor, "clientSideEditValidationCheck" | "label" | "name">;
+    column: Pick<RuntimeColumnDescriptor, "clientSideEditValidationCheck" | "label" | "name" | "required">;
     value?: T;
     onEdit?: TableCellEditHandler;
     textType?: TextFieldType;