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

package/package.json

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

package/src/EditSession.js

@@ -16,6 +16,9 @@ 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;
@@ -45,22 +48,42 @@ 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";
@@ -78,22 +101,6 @@ 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;
@@ -101,6 +108,13 @@ 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;
     }
@@ -222,14 +236,20 @@ class EditSession extends EventEmitter {
         this.emit("newRow", newRowState);
     }
     async deleteSelectedRows() {
-        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;
+        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;
+        }
     }
     async addRow(rowData = {}) {
         const addRow = this.dataSource?.addRow;
@@ -239,50 +259,54 @@ 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)) this.addCount = 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);
+        return this.#rowEdits.has(key) || this.#deletedRows.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, action) {
+    async undoRowChange(key) {
         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 (void 0 === response) return;
-        if (isRpcError(response)) return response;
-        const oldState = this.editState;
+        if (isRpcError(response)) return;
         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) 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 (!(latestRevision > undoRevision)) {
+                    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.#editCount -= removedValidCount;
-            this.#invalidCount -= removedInvalidCount;
+            this.#refreshEditCounts();
             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--;
-        this.#emitEditStateChange(oldState);
-        return response;
+        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;
     }
     #clearEdits() {
         const oldState = this.editState;
@@ -295,6 +319,8 @@ class EditSession extends EventEmitter {
                     columnName
                 ]));
         this.#rowEdits.clear();
+        this.#deletedRows.clear();
+        this.#rowDeleteRevisions.clear();
         this.#cellCommitRevisions.clear();
         this.#editCount = 0;
         this.#deleteCount = 0;
@@ -437,24 +463,9 @@ class EditSession extends EventEmitter {
             editedValue,
             isValid
         };
-        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 (isValid && cellEdit.originalValue === editedValue) cellEdits.delete(column);
+        else cellEdits.set(column, cellEdit);
+        this.#refreshEditCounts();
         if (wasEdited !== this.isCellEdited(key, column)) this.emit("cellEditChanged", key, column);
         return cellEdit;
     }
@@ -477,10 +488,6 @@ class EditSession extends EventEmitter {
             const cellEdit = this.#storeCellEdit(key, cellEdits, columnName, originalValue, typedValue, isValid);
             if (this.dataSource?.editCell) {
                 const response = await this.dataSource.editCell(key, columnName, typedValue);
-                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, dataRow.vuuAction),
+            onClick: ()=>editSession?.undoRowChange(dataRow.key),
             style: {
                 height: "100%",
                 width: "100%"

package/src/useEditableTable.js

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

package/types/DataEditingProvider.d.ts

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

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-runtime").JSX.Element;
+export declare const EditButtons: ({ canCancel, canSave, confirmCancel, confirmSave, editSession, hasSelection, onCancel, onDelete, onSave, saveLabel, }: EditButtonProps) => import("react").JSX.Element;

package/types/EditModeProvider.d.ts

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

package/types/EditSession.d.ts

@@ -1,13 +1,12 @@
-import type { CopyOption, DataSource, DeleteRowMode, SessionType } from "@vuu-ui/vuu-data-types";
+import type { CopyOption, DataSource, DeleteRowMode, EditApi, 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;
+    dataSource: EditApi;
     /** @default "soft" */
     deleteMode?: DeleteRowMode;
     /** @default "createSessionDataSource" */
@@ -54,9 +53,13 @@ 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 newRowState(): NewRowState;
     isNewRow(key: string): key is "__vuu_new_row__";
@@ -65,18 +68,19 @@ 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<RpcResult>;
+    deleteSelectedRows(): Promise<void>;
     addRow(rowData?: Record<string, VuuRowDataItemType>): Promise<RpcResult>;
+    restoreRows(keys: string[]): void;
     hasRowChanges(key: string): boolean;
     isCellEdited(key: string, columnName: string): boolean;
-    undoRowChange(key: string, action: EditActionType): Promise<RpcResult | undefined>;
+    undoRowChange(key: string): Promise<void>;
     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 dataSource(): EditApi<import("@vuu-ui/vuu-data-types").DataSourceRow<VuuRowDataItemType>> | undefined;
     get sessionDataSource(): DataSource | undefined;
     end(saveChanges?: boolean, force?: boolean): Promise<void>;
     get lifecycle(): EditLifecycle;

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-runtime").JSX.Element | null;
+export declare const UndoCellRenderer: ({ column, dataRow, }: TableCellRendererProps) => import("react").JSX.Element | null;

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-runtime").JSX.Element | undefined;
+export declare const getVuuEditMessage: (dataRow: DataRow, column: RuntimeColumnDescriptor, originalValue: string) => string | import("react").JSX.Element | undefined;

package/types/editActionRowClassNameGenerator.d.ts

@@ -1,3 +1,3 @@
 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-inserted" | "vuuTableRow-deleted" | undefined;
+export declare const editActionRowClassNameGenerator: (dataRow: DataRow) => "vuuTableRow-deleted" | "vuuTableRow-inserted" | undefined;

package/types/index.d.ts

@@ -3,7 +3,7 @@ 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 { 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";

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 EditActionType, type EditLifecycle, type EditSessionApi, type RowDefaultDataItemValues } from "./EditSession";
+import { EditSession, 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, action: EditActionType) => undefined;
+    onUndoRowChange: (key: string) => undefined;
     rowClassNameGenerators: string[] | undefined;
     sessionDataSource: import("@vuu-ui/vuu-data-types").DataSourceBase<import("@vuu-ui/vuu-data-types").DataSourceRowWithBigint> | undefined;
     sourceDataSource: DataSource;