@vuu-ui/vuu-data-editing 4.0.0-alpha.20 → 4.0.0-alpha.22

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.20",
+  "version": "4.0.0-alpha.22",
   "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.20",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.20"
+    "@salt-ds/core": "1.72.0",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.22"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.20"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.22"
   },
   "peerDependencies": {
     "react": "^19.2.3"

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;
@@ -88,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) {
@@ -234,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 = {}) {
@@ -248,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) {
@@ -287,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;
     }
@@ -304,6 +321,7 @@ class EditSession extends EventEmitter {
                     columnName
                 ]));
         this.#rowEdits.clear();
+        this.#addedRowKeys.clear();
         this.#cellCommitRevisions.clear();
         this.#editCount = 0;
         this.#deleteCount = 0;
@@ -402,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({

package/src/useEditableTable.js

@@ -2,6 +2,7 @@ import { useData, useLayoutEffectSkipFirst } from "@vuu-ui/vuu-utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { EditSession } from "./EditSession.js";
 import { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR } from "./editActionRowClassNameGenerator.js";
+import { isEditRowReadOnly } from "./edit-utils.js";
 const EDIT_ACTION_ROW_CLASS_NAME_GENERATORS = [
     EDIT_ACTION_ROW_CLASS_NAME_GENERATOR
 ];
@@ -148,6 +149,7 @@ const useEditableTable = ({ columns, dataSource: dataSourceProp, deleteMode = "s
         onDelete: handleDelete,
         onSave: handleSave,
         onUndoRowChange: handleUndoRowChange,
+        isRowSelectable: isEditMode ? (dataRow)=>!isEditRowReadOnly(dataRow) : void 0,
         rowClassNameGenerators: isEditMode ? EDIT_ACTION_ROW_CLASS_NAME_GENERATORS : void 0,
         sessionDataSource,
         sourceDataSource

package/types/DataEditingProvider.d.ts

@@ -4,7 +4,7 @@ import type { TableEditSession } from "./TableEditSession";
 export declare const DataEditingProvider: ({ children, editSession, }: {
     children: ReactNode;
     editSession: TableEditSession;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * Returns the EditSession provided by an enclosing DataEditingProvider. If the
  * provider holds some other TableEditSession (e.g. DirectEditSession), there is

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: _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-runtime").JSX.Element;

package/types/EditModeProvider.d.ts

@@ -10,5 +10,5 @@ export interface EditModeContextProps {
 export declare const EditModeProvider: ({ children, isEditMode: isEditModeProp, }: {
     children: ReactNode;
     isEditMode?: boolean;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useEditMode: () => EditModeContextProps;

package/types/EditSession.d.ts

@@ -21,6 +21,9 @@ export type EditSessionConstructorProps = {
     /** Default column values merged into every addRow call for absent columns. Pass a stable reference. */
     rowDefaults?: RowDefaultDataItemValues;
 };
+export type AddRowResultData = {
+    key?: string | number;
+};
 export type NewRowState = {
     columns: readonly string[];
     requiredColumns?: readonly string[];

package/types/UndoCellRenderer.d.ts

@@ -9,4 +9,4 @@ export declare const getUndoButtonContent: (componentProps?: UndoCellRendererCom
     text: string | undefined;
 };
 export declare const getUndoTooltipContent: (action: unknown) => "Undo delete row" | "Undo insert row" | "Undo row edits" | undefined;
-export declare const UndoCellRenderer: ({ column, dataRow, }: TableCellRendererProps) => import("react").JSX.Element | null;
+export declare const UndoCellRenderer: ({ column, dataRow, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -18,4 +18,4 @@ export interface DropdownEditFieldProps extends EditFieldProps {
     optionMap: OptionMap;
     table: VuuTable;
 }
-export declare const EditField: ({ dataRow, deferNewRow, label, name, readOnly, required, type, ...options }: EditFieldProps | DropdownEditFieldProps) => import("react").JSX.Element;
+export declare const EditField: ({ dataRow, deferNewRow, label, name, readOnly, required, type, ...options }: EditFieldProps | DropdownEditFieldProps) => import("react/jsx-runtime").JSX.Element;

package/types/edit-utils.d.ts

@@ -2,4 +2,4 @@ import type { DataRow, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
 export { isInlineEditingSession } from "@vuu-ui/vuu-utils";
 export declare const isEditRowReadOnly: (dataRow: DataRow) => boolean;
 export declare const withDataRowEditErrors: <T extends DataRow>(dataRow: T, errors: Record<string, string>) => T;
-export declare const getVuuEditMessage: (dataRow: DataRow, column: RuntimeColumnDescriptor, originalValue: string) => string | import("react").JSX.Element | undefined;
+export declare const getVuuEditMessage: (dataRow: DataRow, column: RuntimeColumnDescriptor, originalValue: string) => string | import("react/jsx-runtime").JSX.Element | undefined;

package/types/index.d.ts

@@ -8,7 +8,7 @@ export { EditButtons, type EditButtonProps } from "./EditButtons";
 export { EditField, type DropdownEditFieldProps, type EditFieldProps, type EditFieldType, type TextFieldType, } from "./edit-field/EditField";
 export { useEditField, type EditFieldHookProps, } from "./edit-field/useEditField";
 export { EditModeProvider, useEditMode, type EditModeContextProps, } from "./EditModeProvider";
-export { EditError, EditSession, SupersededEditError, type EditActionType, type EditCommitOptions, type EditLifecycle, type EditSessionConstructorProps, type EditSessionValue, type NewRowState, type EditState, type RowDefaultDataItemValues, } from "./EditSession";
+export { EditError, EditSession, SupersededEditError, type AddRowResultData, type EditActionType, type EditCommitOptions, type EditLifecycle, type EditSessionConstructorProps, type EditSessionValue, type NewRowState, type EditState, type RowDefaultDataItemValues, } from "./EditSession";
 export { StaleUpdateError } from "@vuu-ui/vuu-utils";
 export { lookupOptionsFromRows, useLookupValues, type LookupOption, type LookupValuedHookProps, type OptionMap, } from "./lookup-values/useLookupValues";
 export { useEditable, type EditableHookProps } from "./useEditable";

package/types/useEditableTable.d.ts

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

package/types/src/DataEditingProvider.d.ts

@@ -1,8 +0,0 @@
-import { type ReactNode } from "react";
-import type { EditSession } from "./EditSession";
-export declare const DataEditingProvider: ({ children, editSession, }: {
-    children: ReactNode;
-    editSession: EditSession;
-}) => import("react").JSX.Element;
-export declare function useEditSession(throwIfUnavailable?: false): EditSession | undefined;
-export declare function useEditSession(throwIfUnavailable: true): EditSession;

package/types/src/EditButtons.d.ts

@@ -1,14 +0,0 @@
-import type { EditSession } from "./EditSession";
-export interface EditButtonProps {
-    canCancel: boolean;
-    canSave: boolean;
-    editSession?: EditSession;
-    hasSelection?: boolean;
-    onCancel?: () => void;
-    onDelete?: () => void;
-    onSave: (force?: boolean) => void;
-    saveLabel?: string;
-    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;

package/types/src/EditModeProvider.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-export interface EditModeContextProps {
-    isEditMode: boolean;
-    setEditMode: (inEditMode: boolean) => void;
-}
-/**
- * Implemented as a standalone Provider so that EditMode cna be implemented
- * at higher level than individual edit controls.
- */
-export declare const EditModeProvider: ({ children }: {
-    children: ReactNode;
-}) => import("react").JSX.Element;
-export declare const useEditMode: () => EditModeContextProps;

package/types/src/EditSession.d.ts

@@ -1,86 +0,0 @@
-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";
-/** 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: DataSource;
-    /** @default "soft" */
-    deleteMode?: DeleteRowMode;
-    /** @default "createSessionDataSource" */
-    editSessionApi?: EditSessionApi;
-    /** Default column values merged into every addRow call for absent columns. Pass a stable reference. */
-    rowDefaults?: RowDefaultDataItemValues;
-};
-export type NewRowState = {
-    columns: readonly string[];
-    requiredColumns?: readonly string[];
-    draftRevision: number;
-    errors: Readonly<Record<string, string>>;
-    submitting: boolean;
-    values: Readonly<Record<string, VuuRowDataItemType>>;
-};
-export type EditLifecycle = {
-    status: "idle";
-} | {
-    status: "starting";
-} | {
-    status: "active";
-    sessionDataSource: DataSource;
-} | {
-    status: "ending";
-    sessionDataSource: DataSource;
-} | {
-    status: "error";
-    operation: "begin" | "end";
-    error: Error;
-    sessionDataSource?: DataSource;
-};
-export declare class EditError extends Error {
-}
-export declare class SupersededEditError extends Error {
-}
-type EditSessionEvents = {
-    cellEditChanged: (key: string, columnName: string) => void;
-    editState: (editState: EditState) => void;
-    lifecycle: (lifecycle: EditLifecycle) => void;
-    newRow: (newRowState: NewRowState) => void;
-};
-export declare class EditSession extends EventEmitter<EditSessionEvents> {
-    #private;
-    static readonly newRowKey = "__vuu_new_row__";
-    constructor({ dataSource, deleteMode, editSessionApi, rowDefaults, }: EditSessionConstructorProps);
-    get editCount(): number;
-    get invalidCount(): number;
-    get deleteCount(): number;
-    get addCount(): number;
-    get editState(): EditState;
-    get newRowState(): NewRowState;
-    isNewRow(key: string): key is "__vuu_new_row__";
-    isNewRowFinalColumn(columnName: string): boolean;
-    isNewRowComplete(): boolean;
-    configureNewRow(columns: readonly string[], requiredColumns?: readonly string[]): void;
-    setNewRowValue(column: string, value: VuuRowDataItemType): void;
-    addNewRow(): Promise<RpcResult>;
-    deleteSelectedRows(): Promise<RpcResult>;
-    addRow(rowData?: Record<string, VuuRowDataItemType>): Promise<RpcResult>;
-    hasRowChanges(key: string): boolean;
-    isCellEdited(key: string, columnName: string): boolean;
-    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(): 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>;
-}
-export {};

package/types/src/UndoCellRenderer.d.ts

@@ -1,12 +0,0 @@
-import type { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const UNDO_CELL_RENDERER = "vuu.undo-cell";
-export interface UndoCellRendererComponentProps {
-    icon?: string;
-    text?: string | false;
-}
-export declare const getUndoButtonContent: (componentProps?: UndoCellRendererComponentProps) => {
-    icon: string | undefined;
-    text: string | undefined;
-};
-export declare const getUndoTooltipContent: (action: unknown) => "Undo delete row" | "Undo insert row" | "Undo row edits" | undefined;
-export declare const UndoCellRenderer: ({ column, dataRow, }: TableCellRendererProps) => import("react").JSX.Element | null;

package/types/src/edit-utils.d.ts

@@ -1,5 +0,0 @@
-import type { DataRow, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
-export { isInlineEditingSession } from "@vuu-ui/vuu-utils";
-export declare const isEditRowReadOnly: (dataRow: DataRow) => boolean;
-export declare const withDataRowEditErrors: <T extends DataRow>(dataRow: T, errors: Record<string, string>) => T;
-export declare const getVuuEditMessage: (dataRow: DataRow, column: RuntimeColumnDescriptor, originalValue: string) => string | import("react").JSX.Element | undefined;

package/types/src/editActionRowClassNameGenerator.d.ts

@@ -1,3 +0,0 @@
-import type { DataRow } from "@vuu-ui/vuu-table-types";
-export declare const EDIT_ACTION_ROW_CLASS_NAME_GENERATOR = "vuu-edit-actions";
-export declare const editActionRowClassNameGenerator: (dataRow: DataRow) => "vuuTableRow-deleted" | "vuuTableRow-inserted" | undefined;

package/types/src/index.d.ts

@@ -1,10 +0,0 @@
-export { DataEditingProvider, useEditSession } from "./DataEditingProvider";
-export { useCellEdited } from "./useCellEdited";
-export { getVuuEditMessage, isInlineEditingSession, isEditRowReadOnly, withDataRowEditErrors, } from "./edit-utils";
-export { EditButtons, type EditButtonProps } from "./EditButtons";
-export { EditModeProvider, useEditMode, type EditModeContextProps, } from "./EditModeProvider";
-export { EditError, EditSession, SupersededEditError, type EditActionType, 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";

package/types/src/useCellEdited.d.ts

@@ -1,2 +0,0 @@
-import type { EditSession } from "./EditSession";
-export declare const useCellEdited: (editSession: EditSession | undefined, key: string, columnName: string) => boolean;

package/types/src/useEditableTable.d.ts

@@ -1,44 +0,0 @@
-import type { CopyOption, DataSource, DeleteRowMode } from "@vuu-ui/vuu-data-types";
-import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import { EditSession, type EditActionType, type EditLifecycle, type EditSessionApi, type RowDefaultDataItemValues } from "./EditSession";
-export type EditMode = "edit" | "view";
-export interface EditableTableHookProps {
-    /**
-     * columns to be included in subscription. If not provided,
-     * default will be '*'. Ignored if dataSource prop present.
-     */
-    columns?: string[];
-    dataSource?: DataSource;
-    addRowsCount?: number;
-    deleteMode?: DeleteRowMode;
-    editSessionApi?: EditSessionApi;
-    copyOption?: CopyOption;
-    isEditMode: boolean;
-    onCancel: () => void;
-    onSave: () => void;
-    /** Default column values applied to every addRow call. Pass a stable reference — a new object triggers EditSession recreation. */
-    rowDefaults?: RowDefaultDataItemValues;
-    /**
-     * If dataSource not provided, new DataSource
-     * will be created using table and columns
-     */
-    table?: VuuTable;
-}
-export declare const useEditableTable: ({ columns, dataSource: dataSourceProp, deleteMode, editSessionApi, copyOption, isEditMode, onCancel, onSave, rowDefaults, table, }: EditableTableHookProps) => {
-    canCancel: boolean;
-    canSave: boolean;
-    columnsDiverge: boolean;
-    dataSource: DataSource;
-    editSchema: import("@vuu-ui/vuu-data-types").TableSchema | undefined;
-    editSession: EditSession;
-    lifecycle: EditLifecycle;
-    hasSelection: boolean;
-    isEditSessionReady: boolean;
-    onCancel: () => Promise<void>;
-    onDelete: () => Promise<void>;
-    onSave: (force?: boolean) => Promise<void>;
-    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;
-};