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

package/README.md

@@ -2,4 +2,367 @@
 
 Shared data editing APIs, state management, and React components for VUU UI.
 
-See [DESIGN.md](./DESIGN.md) for the package design and file responsibilities.
+This package coordinates edit-session state with editable data sources (both in-memory and remote Vuu session tables) and provides React hooks and UI controls for table editing.
+
+---
+
+## Table of Contents
+
+- [Overview & Architecture](#overview--architecture)
+- [EditSession](#editsession)
+  - [Lifecycle State Machine](#lifecycle-state-machine)
+  - [Transition Queue](#transition-queue)
+  - [EditState & Counters](#editstate--counters)
+  - [Internal Edit Tracking](#internal-edit-tracking)
+- [Editing Operations & Flows](#editing-operations--flows)
+  - [Cell Editing (`commit` / `cancel`)](#cell-editing-commit--cancel)
+  - [New Row Flow (`addNewRow` / `addRow`)](#new-row-flow-addnewrow--addrow)
+  - [Row Deletions (`deleteSelectedRows`)](#row-deletions-deleteselectedrows)
+  - [Undo Flow (`undoRowChange`)](#undo-flow-undorowchange)
+  - [Session Completion (`end`) & Stale Handling](#session-completion-end--stale-handling)
+- [Direct Editing (`DirectEditSession`)](#direct-editing-directeditsession)
+- [React Hooks & Context](#react-hooks--context)
+  - [`useEditableTable`](#useeditabletable)
+  - [`DataEditingProvider` & `useEditSession`](#dataeditingprovider--useeditsession)
+  - [`useCellEdited`](#usecellEdited)
+  - [`useEditMode` & `EditModeProvider`](#useeditmode--editmodeprovider)
+- [UI Components & Helpers](#ui-components--helpers)
+  - [`EditButtons`](#editbuttons)
+  - [`UndoCellRenderer`](#undocellrenderer)
+  - [`editActionRowClassNameGenerator`](#editactionrowclassnamegenerator)
+  - [`isRowSelectable` / `isEditRowReadOnly`](#isrowselectable--iseditrowreadonly)
+- [Standard Integration Pattern](#standard-integration-pattern)
+
+---
+
+## Overview & Architecture
+
+VUU editing operates primarily through **staged edit sessions**:
+1. When entering edit mode, a server-side (or mock) **session table** is created as a sandbox copy of the source table.
+2. User edits (cell edits, row insertions, soft deletes) are applied to the session table and tracked locally by `EditSession`.
+3. When saved, changes are committed from the session table to the source table. When cancelled, the session table is discarded without affecting the source table.
+
+```
+Source DataSource ──begin()──> Session Table Created ──> Live Session DataSource
+       │                                                        │
+       │                                                 Edits & Deletes
+       │                                                        │
+       └──────────────end(save=true/false)──────────────────────┘
+```
+
+For backends that do not use session tables and accept cell edits directly against the live table, `DirectEditSession` is used instead.
+
+---
+
+## EditSession
+
+`EditSession` is the core stateful orchestrator class extending `EventEmitter`. It tracks:
+- Local cell edits per row and column
+- Added row keys
+- Edit, invalid, delete, and add counts
+- Edit session lifecycle state
+
+### Lifecycle State Machine
+
+`EditSession.lifecycle` is a discriminated union on `status`:
+
+```typescript
+type EditLifecycle =
+  | { status: "idle" }
+  | { status: "starting" }
+  | { status: "active"; sessionDataSource: DataSource }
+  | { status: "ending"; sessionDataSource: DataSource }
+  | { status: "error"; operation: "begin" | "end"; error: Error; sessionDataSource?: DataSource };
+```
+
+```
+idle ──begin()──> starting ──> active ──end()──> ending ──> idle
+                     │                             │
+                     └── error { op: "begin" }     └── error { op: "end" }
+```
+
+- `inEditMode`: Getter returning `true` when status is `"active"`, `"ending"`, or `error { operation: "end" }`.
+- `dataSource`: Getter returning `#sessionDataSource` when active/ending, falling back to `#sourceTableDataSource`.
+
+### Transition Queue
+
+All `begin()` and `end()` calls are serialized through `#transitionQueue` (a chained Promise). This prevents overlapping transitions, race conditions, and corrupted lifecycle states when rapid toggles occur.
+
+### EditState & Counters
+
+`editSession.editState` is a derived property reflecting the overall dirtiness and validity of the session:
+
+```typescript
+type EditState = "clean" | "dirty" | "invalid" | "stale";
+```
+
+Priority order (highest to lowest):
+1. **`"invalid"`**: When `invalidCount > 0` (validation failure in at least one cell).
+2. **`"stale"`**: When a save was rejected by the server due to concurrent updates (`StaleUpdateError`).
+3. **`"dirty"`**: When `editCount > 0 || deleteCount > 0 || addCount > 0`.
+4. **`"clean"`**: When no edits, deletes, or added rows exist.
+
+Driven by four independent counters:
+- `editCount`: Number of valid cell edits differing from their original values.
+- `invalidCount`: Number of cell edits with validation errors.
+- `deleteCount`: Number of rows marked for deletion.
+- `addCount`: Number of newly inserted rows currently in the session.
+
+All counter setters enforce non-negative values via `Math.max(0, val)`.
+
+### Internal Edit Tracking
+
+`EditSession` manages four primary collections:
+
+```typescript
+#rowEdits = new Map<string, RowEditDetails>();       // rowKey => { cellEdits: Map<column, CellEdit> }
+#addedRowKeys = new Set<string>();                  // Set of added row keys
+#cellCommitRevisions = new Map<string, Map<string, number>>(); // (key, col) => revision
+#transitionQueue = Promise.resolve();               // Serialized transition queue
+```
+
+`CellEdit` holds:
+```typescript
+type CellEdit = {
+  originalValue: EditSessionValue;
+  editedValue: EditSessionValue;
+  isValid: boolean;
+};
+```
+A cell is considered edited only when `originalValue !== editedValue && isValid === true`. If edited back to the original value, the entry is automatically pruned.
+
+---
+
+## Editing Operations & Flows
+
+### Cell Editing (`commit` / `cancel`)
+
+- **`commit(key, columnName, originalValue, typedValue, isValid, options)`**:
+  - Increments cell revision to guard against out-of-order RPC responses.
+  - Updates `#rowEdits`, adjusting `editCount` and `invalidCount`.
+  - Dispatches `editCell` RPC to the active DataSource if `syncToDataSource !== false`.
+  - Emits `"cellEditChanged"` and `"editState"`.
+- **`cancel(key, columnName, restoredValue)`**:
+  - Discards an in-progress invalid edit, restoring the cell to its original valid state. Uncommitted typed values are discarded client-side without sending an RPC.
+
+### 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()`.
+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`.
+   - Increments `addCount`.
+   - Resets new-row form draft and increments `draftRevision`.
+
+### Row Deletions (`deleteSelectedRows`)
+
+- Captures `selectedRowsCount` before deleting.
+- Exits early if `selectedRowsCount === 0`.
+- Calls `dataSource.deleteSelectedRows(deleteMode)`.
+- On success:
+  - Increments `deleteCount` by `selectedRowsCount`.
+  - **Clears selection**: Dispatches `dataSource.select({ type: "DESELECT_ALL" })` so deleted rows are immediately deselected, preventing accidental double-deletion and disabling the Delete button.
+
+### Undo Flow (`undoRowChange`)
+
+Invoked when the user clicks the Undo button on a row (`UndoCellRenderer`):
+
+```typescript
+editSession.undoRowChange(key, action);
+```
+
+1. **Reverts cell edits**: Clears recorded cell edits for `key`, restores previous values, and adjusts `editCount` / `invalidCount`.
+2. **Reverts deletions**: If `action === "deleteRow"`, decrements `deleteCount`.
+3. **Reverts insertions**: If the row was an inserted row:
+   - `action === "addRow"` OR
+   - Row key exists in private `#addedRowKeys`
+   - Decrements `addCount` and removes `key` from `#addedRowKeys`.
+
+> **Robust Add-Delete-Undo**: Even if a row was added, then soft-deleted (`action` became `"deleteRow"`), and the server purges the row on undo without returning any special flag, `EditSession` identifies the row via `#addedRowKeys` and decrements **both** `deleteCount` and `addCount`, returning `editState` cleanly to `"clean"`.
+
+### Session Completion (`end`) & Stale Handling
+
+- **`end(saveChanges = false, force = false)`**:
+  - Transitions lifecycle to `"ending"`.
+  - Calls `dataSource.endEditSession(saveChanges, force)`.
+  - On success: clears all edits, resets counters, unsubscribes session DataSource, transitions to `"idle"`.
+  - **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)`.
+
+---
+
+## Direct Editing (`DirectEditSession`)
+
+Implements `TableEditSession` for tables that support in-place cell editing without a session table or lifecycle state machine:
+- Does not create session tables or track `editCount`.
+- Each `commit()` forwards directly to `dataSource.editCell()`.
+- `inEditMode` is always `false`.
+
+---
+
+## React Hooks & Context
+
+### `useEditableTable`
+
+The primary orchestrator hook for table components:
+
+```typescript
+const {
+  canCancel,              // boolean: safe to show/enable Cancel button
+  canSave,                // boolean: active, dirty/stale, invalidCount === 0
+  dataSource,             // Active DataSource (session DS in edit mode, else source DS)
+  sourceDataSource,       // Always the source DataSource
+  sessionDataSource,      // Session DataSource (when active)
+  editSession,            // EditSession instance
+  lifecycle,              // Current EditLifecycle
+  hasSelection,           // boolean: whether rows are selected (controls Delete button)
+  isEditMode,             // boolean: current edit mode flag
+  isEditSessionReady,     // boolean: gates rendering the editable Table
+  isRowSelectable,        // (dataRow) => boolean: blocks selection of soft-deleted rows
+  rowClassNameGenerators, // [vuu-edit-actions] in edit mode, else undefined
+  onCancel,               // async handler: ends session and calls props.onCancel
+  onDelete,               // async handler: deletes selected rows
+  onSave,                 // async handler: ends session (with optional force) and calls props.onSave
+  onUndoRowChange,        // (key, action) => void
+} = useEditableTable(props);
+```
+
+### `DataEditingProvider` & `useEditSession`
+
+Distributes `EditSession` through React Context to descendant cells and controls:
+
+```tsx
+<DataEditingProvider editSession={editSession}>
+  {/* Table and EditButtons subtree */}
+</DataEditingProvider>
+```
+
+- `useEditSession()`: Returns `EditSession | undefined`.
+- `useEditSession(true)`: Returns `EditSession`, throws if unmounted.
+- `useTableEditSession()`: Returns generic `TableEditSession` (works with both `EditSession` and `DirectEditSession`).
+
+### `useCellEdited`
+
+Uses `useSyncExternalStore` for zero-lag cell edit detection. Returns `true` if `(rowKey, columnName)` has an uncommitted edit:
+
+```typescript
+const isEdited = useCellEdited(editSession, rowKey, columnName);
+```
+
+### `useEditMode` & `EditModeProvider`
+
+Optional context for coordinating a boolean edit/view mode toggle across independent toolbar and table components:
+
+```tsx
+const { isEditMode, setEditMode } = useEditMode();
+```
+
+---
+
+## UI Components & Helpers
+
+### `EditButtons`
+
+Pre-built action buttons wired to `EditSession`:
+- **Delete**: Enabled only when `hasSelection === true`.
+- **Save**: Enabled when `canSave === true`. Displays `"Save (force)"` when `editState === "stale"`.
+- **Cancel**: Enabled when `canCancel === true`.
+
+```tsx
+<EditButtons
+  canCancel={canCancel}
+  canSave={canSave}
+  editSession={editSession}
+  hasSelection={hasSelection}
+  onCancel={onCancel}
+  onDelete={onDelete}
+  onSave={onSave}
+/>
+```
+
+### `UndoCellRenderer`
+
+Registered as `"vuu.undo-cell"`. Renders an Undo button in the row's action column:
+- Dispatches `editSession.undoRowChange(key, action)` on click.
+- Tooltip dynamically reflects action: `"Undo insert row"`, `"Undo delete row"`, or `"Undo row edits"`.
+
+### `editActionRowClassNameGenerator`
+
+Registered as `"vuu-edit-actions"`. Applies row CSS classes based on `dataRow.vuuAction`:
+- `"addRow"` → `.vuuTableRow-inserted`
+- `"deleteRow"` → `.vuuTableRow-deleted`
+
+### `isRowSelectable` / `isEditRowReadOnly`
+
+- `isEditRowReadOnly(dataRow)`: Returns `true` if `dataRow.vuuAction === "deleteRow"`.
+- `isRowSelectable`: Exported from `useEditableTable` as `(dataRow) => !isEditRowReadOnly(dataRow)`. Pass to `<Table isRowSelectable={isRowSelectable} />` to prevent users from selecting soft-deleted rows.
+
+---
+
+## Standard Integration Pattern
+
+```tsx
+import React, { useCallback, useState } from "react";
+import { Table } from "@vuu-ui/vuu-table";
+import {
+  DataEditingProvider,
+  EditButtons,
+  useEditableTable,
+} from "@vuu-ui/vuu-data-editing";
+
+export const EditableTableFeature = ({ sourceDataSource, tableConfig }) => {
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  const {
+    canCancel,
+    canSave,
+    dataSource,
+    editSession,
+    hasSelection,
+    isEditSessionReady,
+    isRowSelectable,
+    onCancel,
+    onDelete,
+    onSave,
+    rowClassNameGenerators,
+  } = useEditableTable({
+    dataSource: sourceDataSource,
+    isEditMode,
+    onCancel: () => setIsEditMode(false),
+    onSave: () => setIsEditMode(false),
+  });
+
+  return (
+    <DataEditingProvider editSession={editSession}>
+      <div className="table-container">
+        {(!isEditMode || isEditSessionReady) && (
+          <Table
+            config={tableConfig}
+            dataSource={dataSource}
+            isRowSelectable={isRowSelectable}
+            rowClassNameGenerators={rowClassNameGenerators}
+          />
+        )}
+      </div>
+
+      <div className="toolbar">
+        {!isEditMode ? (
+          <button onClick={() => setIsEditMode(true)}>Edit</button>
+        ) : (
+          <EditButtons
+            canCancel={canCancel}
+            canSave={canSave}
+            editSession={editSession}
+            hasSelection={hasSelection}
+            onCancel={onCancel}
+            onDelete={onDelete}
+            onSave={onSave}
+          />
+        )}
+      </div>
+    </DataEditingProvider>
+  );
+};
+```
+

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.31",
   "description": "Shared data editing APIs and React components for VUU UI",
   "main": "./src/index.js",
   "author": "heswell",
@@ -11,14 +11,14 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "dependencies": {
-    "@salt-ds/core": "1.67.0",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.3",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.3"
+    "@salt-ds/core": "1.72.0",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.31",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.31"
   },
   "devDependencies": {
-    "@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"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.31",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.31",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.31"
   },
   "peerDependencies": {
     "react": "^19.2.3"
@@ -31,8 +31,9 @@
   ],
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./src/index.js",
-      "types": "./types/index.d.ts"
+      "default": "./src/index.js"
     }
   },
   "module": "./src/index.js",

package/src/DataEditingProvider.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+import { EditSession } from "./EditSession.js";
 const DataEditingContext = /*#__PURE__*/ createContext(void 0);
 const DataEditingProvider = ({ children, editSession })=>/*#__PURE__*/ jsx(DataEditingContext.Provider, {
         value: editSession,
@@ -7,7 +8,8 @@ const DataEditingProvider = ({ children, editSession })=>/*#__PURE__*/ jsx(DataE
     });
 function useEditSession(throwIfUnavailable = false) {
     const editSession = useContext(DataEditingContext);
-    if (void 0 !== editSession) return editSession;
-    if (throwIfUnavailable) throw Error("[useEditSession] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider");
+    if (editSession instanceof EditSession) return editSession;
+    if (throwIfUnavailable) throw Error(void 0 === editSession ? "[useEditSession] no DataEditingContext in scope. You need to enclose editable component(s) with DataEditingProvider" : "[useEditSession] DataEditingProvider does not provide an EditSession");
 }
-export { DataEditingProvider, useEditSession };
+const useTableEditSession = ()=>useContext(DataEditingContext);
+export { DataEditingProvider, useEditSession, useTableEditSession };

package/src/DirectEditSession.js

@@ -0,0 +1,35 @@
+import { EventEmitter } from "@vuu-ui/vuu-utils";
+class DirectEditSession extends EventEmitter {
+    #dataSource;
+    constructor({ dataSource }){
+        super();
+        this.#dataSource = dataSource;
+    }
+    get dataSource() {
+        return this.#dataSource;
+    }
+    get inEditMode() {
+        return false;
+    }
+    isCellEdited(_key, _columnName) {
+        return false;
+    }
+    async cancel(_key, _columnName, _restoredValue) {
+        return {
+            data: void 0,
+            type: "SUCCESS_RESULT"
+        };
+    }
+    async commit(key, columnName, _originalValue, typedValue, isValid) {
+        if (!isValid) return {
+            errorMessage: "Invalid value",
+            type: "ERROR_RESULT"
+        };
+        const editCell = this.#dataSource.editCell;
+        if (void 0 === editCell) throw Error("[DirectEditSession] datasource does not support editCell");
+        const response = await editCell.call(this.#dataSource, key, columnName, typedValue);
+        if (void 0 === response) throw Error("[DirectEditSession] datasource returned no response from editCell");
+        return response;
+    }
+}
+export { DirectEditSession };

package/src/EditButtons.js

@@ -1,8 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@salt-ds/core";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
+import { useEditState } from "./useEditState.js";
 const EditButtons = ({ canCancel, canSave: _canSave, confirmCancel, confirmSave, editSession, hasSelection = false, onCancel, onDelete, onSave, saveLabel = "Save" })=>{
-    const [editState, setEditState] = useState(()=>editSession?.editState ?? "clean");
+    const editState = useEditState(editSession);
+    const isDirty = editSession?.isDirty ?? false;
     const handleSave = useCallback(async ()=>{
         if (confirmSave) {
             const confirmed = await confirmSave();
@@ -15,24 +17,16 @@ const EditButtons = ({ canCancel, canSave: _canSave, confirmCancel, confirmSave,
         onSave
     ]);
     const handleCancel = useCallback(async ()=>{
-        if (confirmCancel) {
+        if (confirmCancel && isDirty) {
             const confirmed = await confirmCancel();
             if (!confirmed) return;
         }
         onCancel?.();
     }, [
         confirmCancel,
+        isDirty,
         onCancel
     ]);
-    useEffect(()=>{
-        if (editSession) {
-            setEditState(editSession.editState);
-            editSession.on("editState", setEditState);
-            return ()=>editSession.removeListener("editState", setEditState);
-        }
-    }, [
-        editSession
-    ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             onDelete && /*#__PURE__*/ jsx(Button, {

package/src/EditModeProvider.js

@@ -1,11 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 const EditModeContext = /*#__PURE__*/ createContext({
     isEditMode: false,
     setEditMode: ()=>"EditModeProvider in place"
 });
-const EditModeProvider = ({ children })=>{
-    const [isEditMode, setEditMode] = useState(false);
+const EditModeProvider = ({ children, isEditMode: isEditModeProp = false })=>{
+    const [isEditMode, setEditMode] = useState(isEditModeProp);
+    useEffect(()=>{
+        setEditMode(isEditModeProp);
+    }, [
+        isEditModeProp
+    ]);
     return /*#__PURE__*/ jsx(EditModeContext.Provider, {
         value: {
             isEditMode,

package/src/EditSession.js

@@ -16,6 +16,7 @@ class SupersededEditError extends Error {
 class EditSession extends EventEmitter {
     static newRowKey = "__vuu_new_row__";
     #rowEdits = new Map();
+    #addedRowKeys = new Set();
     #editCount = 0;
     #deleteCount = 0;
     #addCount = 0;
@@ -66,6 +67,9 @@ class EditSession extends EventEmitter {
         if (this.#isStale) return "stale";
         return 0 === this.#editCount && 0 === this.#deleteCount && 0 === this.#addCount ? "clean" : "dirty";
     }
+    get isDirty() {
+        return "clean" !== this.editState;
+    }
     get canCancel() {
         return "active" === this.lifecycle.status || "error" === this.lifecycle.status && "end" === this.lifecycle.operation;
     }
@@ -85,19 +89,21 @@ class EditSession extends EventEmitter {
         }
     }
     #setDeleteCount(val) {
-        if (val !== this.#deleteCount) {
+        const newCount = Math.max(0, val);
+        if (newCount !== this.#deleteCount) {
             const oldState = this.editState;
             const oldCount = this.#deleteCount;
-            this.#deleteCount = val;
-            this.#emitEditStateChange(oldState, 0 === oldCount || 0 === val);
+            this.#deleteCount = newCount;
+            this.#emitEditStateChange(oldState, 0 === oldCount || 0 === newCount);
         }
     }
     #setAddCount(val) {
-        if (val !== this.#addCount) {
+        const newCount = Math.max(0, val);
+        if (newCount !== this.#addCount) {
             const oldState = this.editState;
             const oldCount = this.#addCount;
-            this.#addCount = val;
-            this.#emitEditStateChange(oldState, 0 === oldCount || 0 === val);
+            this.#addCount = newCount;
+            this.#emitEditStateChange(oldState, 0 === oldCount || 0 === newCount);
         }
     }
     #setStale(isStale) {
@@ -231,10 +237,17 @@ class EditSession extends EventEmitter {
         const deleteSelectedRows = this.dataSource?.deleteSelectedRows;
         if (void 0 === deleteSelectedRows) throw Error("[EditSession] datasource does not support deleting rows");
         const selectedRowsCount = this.dataSource?.selectedRowsCount ?? 0;
+        if (0 === selectedRowsCount) return {
+            data: void 0,
+            type: "SUCCESS_RESULT"
+        };
         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);
+        await this.dataSource?.select?.({
+            type: "DESELECT_ALL"
+        });
         return response;
     }
     async addRow(rowData = {}) {
@@ -245,7 +258,11 @@ class EditSession extends EventEmitter {
             ...rowData
         });
         if (void 0 === response) throw Error("[EditSession] datasource returned no response when adding row");
-        if (!isRpcError(response)) this.#setAddCount(this.#addCount + 1);
+        if (!isRpcError(response)) {
+            const key = response.data?.key;
+            if (null != key) this.#addedRowKeys.add(String(key));
+            this.#setAddCount(this.#addCount + 1);
+        }
         return response;
     }
     hasRowChanges(key) {
@@ -284,9 +301,12 @@ class EditSession extends EventEmitter {
             this.#invalidCount -= removedInvalidCount;
             for (const columnName of changedColumns)this.emit("cellEditChanged", key, columnName);
         }
-        if ("deleteRow" === action) this.#deleteCount--;
-        const wasInsertedRow = "addRow" === action || response?.data?.wasInsertedRow === true;
-        if (wasInsertedRow) this.#addCount--;
+        if ("deleteRow" === action) this.#deleteCount = Math.max(0, this.#deleteCount - 1);
+        const wasInsertedRow = "addRow" === action || this.#addedRowKeys.has(key);
+        if (wasInsertedRow) {
+            this.#addedRowKeys.delete(key);
+            this.#addCount = Math.max(0, this.#addCount - 1);
+        }
         this.#emitEditStateChange(oldState);
         return response;
     }
@@ -301,6 +321,7 @@ class EditSession extends EventEmitter {
                     columnName
                 ]));
         this.#rowEdits.clear();
+        this.#addedRowKeys.clear();
         this.#cellCommitRevisions.clear();
         this.#editCount = 0;
         this.#deleteCount = 0;
@@ -399,8 +420,10 @@ class EditSession extends EventEmitter {
                 sessionDataSource
             });
             try {
-                const response = await this.dataSource?.endEditSession?.(saveChanges, force);
-                if (isRpcError(response)) throw new Error(response.errorMessage);
+                if ("unsubscribed" !== sessionDataSource.status || saveChanges) {
+                    const response = await this.dataSource?.endEditSession?.(saveChanges, force);
+                    if (isRpcError(response)) throw new Error(response.errorMessage);
+                }
                 this.#clearEdits();
                 this.#sessionDataSource = void 0;
                 this.#setLifecycle({
@@ -475,6 +498,15 @@ class EditSession extends EventEmitter {
     #isLatestCellCommit(key, columnName, revision) {
         return this.#cellCommitRevisions.get(key)?.get(columnName) === revision;
     }
+    async cancel(key, columnName, restoredValue) {
+        const cellEdits = this.#rowEdits.get(key)?.cellEdits;
+        const cellEdit = cellEdits?.get(columnName);
+        if (this.inEditMode && cellEdits && cellEdit && !cellEdit.isValid) this.#storeCellEdit(key, cellEdits, columnName, cellEdit.originalValue, restoredValue, true);
+        return {
+            data: void 0,
+            type: "SUCCESS_RESULT"
+        };
+    }
     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);

package/src/edit-field/EditField.css.js

@@ -0,0 +1,13 @@
+const css = `
+.vuuEditField {
+  & .saltDropdown {
+    --vuu-icon-height: 15px;
+    --vuu-icon-left: calc(100% - var(--salt-spacing-300));
+    --vuu-icon-size: 8px;
+    --vuu-icon-top: -3px;
+  }
+}
+
+
+`;
+export default css;