@vuu-ui/vuu-data-editing 4.0.0-alpha.18 → 4.0.0-alpha.19

package/package.json

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

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/EditSession.js

@@ -478,6 +478,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.js

@@ -56,7 +56,7 @@ const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false
         name,
         serverDataType: "string"
     };
-    const { editing, inputProps, onDropdownSelectionChange, onKeyDown, previousValue = "", value, warningMessage, ...editProps } = useEditField({
+    const { inputProps, onChange, onDropdownSelectionChange, onKeyDown, value } = useEditField({
         column,
         textType: "checkbox" !== type && "dropdown" !== type ? type : void 0,
         onEdit,
@@ -90,8 +90,11 @@ const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false
                         children: listOption.label
                     }, listOption.value))
             }) : /*#__PURE__*/ jsx(Input, {
-                ...editProps,
                 bordered: true,
+                inputProps: {
+                    ...inputProps,
+                    onChange
+                },
                 onKeyDown: onKeyDown,
                 readOnly: readOnly,
                 value: value

package/src/edit-field/useEditField.js

@@ -147,12 +147,7 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
     ]);
     const handleBlur = useCallback(async ()=>{
         if (editState.editing) {
-            if (isDirtyRef.current) {
-                const commitSuccessful = await commit();
-                console.log({
-                    commitSuccessful
-                });
-            }
+            if (isDirtyRef.current) await commit();
             setEditState((editState)=>({
                     ...editState,
                     editing: false

package/src/edit-utils.js

@@ -4,7 +4,7 @@ const timeFormatter = formatDate({
     time: "hh:mm:ss"
 });
 const dataRowEditErrors = Symbol("vuuDataRowEditErrors");
-const isEditRowReadOnly = (dataRow)=>"deleteRow" === dataRow.vuuAction;
+const isEditRowReadOnly = (dataRow)=>dataRow.hasColumn("vuuAction") && "deleteRow" === dataRow.vuuAction;
 const withDataRowEditErrors = (dataRow, errors)=>{
     Object.defineProperty(dataRow, dataRowEditErrors, {
         configurable: true,

package/src/index.js

@@ -1,15 +1,16 @@
-export { StaleUpdateError } from "@vuu-ui/vuu-utils";
-export { DataEditingProvider, useEditSession } from "./DataEditingProvider.js";
-export { EditField } from "./edit-field/EditField.js";
-export { useEditField } from "./edit-field/useEditField.js";
-export { lookupOptionsFromRows, useLookupValues } from "./lookup-values/useLookupValues.js";
+export { DataEditingProvider, useEditSession, useTableEditSession } from "./DataEditingProvider.js";
+export { DirectEditSession } from "./DirectEditSession.js";
+export { useCellEdited } from "./useCellEdited.js";
+export { useEditState } from "./useEditState.js";
 export { getVuuEditMessage, isEditRowReadOnly, isInlineEditingSession, withDataRowEditErrors } from "./edit-utils.js";
-export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator } from "./editActionRowClassNameGenerator.js";
 export { EditButtons } from "./EditButtons.js";
+export { EditField } from "./edit-field/EditField.js";
+export { useEditField } from "./edit-field/useEditField.js";
 export { EditModeProvider, useEditMode } from "./EditModeProvider.js";
 export { EditError, EditSession, SupersededEditError } from "./EditSession.js";
-export { UNDO_CELL_RENDERER, UndoCellRenderer, getUndoButtonContent, getUndoTooltipContent } from "./UndoCellRenderer.js";
-export { useCellEdited } from "./useCellEdited.js";
+export { StaleUpdateError } from "@vuu-ui/vuu-utils";
+export { lookupOptionsFromRows, useLookupValues } from "./lookup-values/useLookupValues.js";
 export { useEditable } from "./useEditable.js";
+export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator } from "./editActionRowClassNameGenerator.js";
+export { UNDO_CELL_RENDERER, UndoCellRenderer, getUndoButtonContent, getUndoTooltipContent } from "./UndoCellRenderer.js";
 export { useEditableTable } from "./useEditableTable.js";
-export { useEditState } from "./useEditState.js";

package/src/useEditable.js

@@ -1,4 +1,5 @@
-import { EditSession, useEditMode } from "./index.js";
+import { EditSession } from "./EditSession.js";
+import { useEditMode } from "./EditModeProvider.js";
 import { useCallback, useEffect, useMemo } from "react";
 const useEditable = ({ copyOption = "Selected", dataSource, onCancel, onSave })=>{
     const { isEditMode } = useEditMode();
@@ -12,7 +13,7 @@ const useEditable = ({ copyOption = "Selected", dataSource, onCancel, onSave })=
             await editSession.end();
             onCancel();
         } catch (error) {
-            console.error("[useEditableTable] cancel edit session failed", error);
+            console.error("[useEditable] cancel edit session failed", error);
         }
     }, [
         editSession,
@@ -23,7 +24,7 @@ const useEditable = ({ copyOption = "Selected", dataSource, onCancel, onSave })=
             await editSession.end(true, force);
             onSave();
         } catch (error) {
-            console.error("[useEditableTable] save edit session failed", error);
+            console.error("[useEditable] save edit session failed", error);
         }
     }, [
         editSession,
@@ -33,9 +34,9 @@ const useEditable = ({ copyOption = "Selected", dataSource, onCancel, onSave })=
         const transition = isEditMode ? editSession.begin(copyOption) : editSession.end();
         transition.catch((error)=>{
             if (isEditMode) {
-                console.error("[useEditableTable] begin edit session failed", error);
+                console.error("[useEditable] begin edit session failed", error);
                 handleCancel();
-            } else console.error("[useEditableTable] end edit session failed", error);
+            } else console.error("[useEditable] end edit session failed", error);
         });
     }, [
         copyOption,

package/types/DataEditingProvider.d.ts

@@ -1,8 +1,20 @@
 import { type ReactNode } from "react";
-import type { EditSession } from "./EditSession";
+import { EditSession } from "./EditSession";
+import type { TableEditSession } from "./TableEditSession";
 export declare const DataEditingProvider: ({ children, editSession, }: {
     children: ReactNode;
-    editSession: EditSession;
+    editSession: TableEditSession;
 }) => import("react").JSX.Element;
+/**
+ * Returns the EditSession provided by an enclosing DataEditingProvider. If the
+ * provider holds some other TableEditSession (e.g. DirectEditSession), there is
+ * no EditSession in scope and undefined is returned.
+ */
 export declare function useEditSession(throwIfUnavailable?: false): EditSession | undefined;
 export declare function useEditSession(throwIfUnavailable: true): EditSession;
+/**
+ * Returns whichever TableEditSession is provided by an enclosing
+ * DataEditingProvider. Intended for use by Table cells, which commit and
+ * cancel edits regardless of the type of session.
+ */
+export declare const useTableEditSession: () => TableEditSession | undefined;

package/types/DirectEditSession.d.ts

@@ -0,0 +1,22 @@
+import type { DataSource } from "@vuu-ui/vuu-data-types";
+import type { RpcResult, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { EventEmitter } from "@vuu-ui/vuu-utils";
+import type { TableEditSession, TableEditSessionEvents } from "./TableEditSession";
+export type DirectEditSessionConstructorProps = {
+    dataSource: DataSource;
+};
+/**
+ * A lightweight edit session for services that allow cells to be edited
+ * directly on the source table. There is no begin/end lifecycle, no session
+ * table and no local tracking of edits - each committed edit is sent
+ * immediately via the dataSource editCell RPC.
+ */
+export declare class DirectEditSession extends EventEmitter<TableEditSessionEvents> implements TableEditSession {
+    #private;
+    constructor({ dataSource }: DirectEditSessionConstructorProps);
+    get dataSource(): DataSource;
+    get inEditMode(): boolean;
+    isCellEdited(_key: string, _columnName: string): boolean;
+    cancel(_key: string, _columnName: string, _restoredValue: VuuRowDataItemType): Promise<RpcResult>;
+    commit(key: string, columnName: string, _originalValue: VuuRowDataItemType, typedValue: string | number | boolean, isValid: boolean): Promise<RpcResult>;
+}

package/types/EditSession.d.ts

@@ -1,6 +1,7 @@
 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";
+import type { TableEditSession } from "./TableEditSession";
 export type EditState = "clean" | "dirty" | "invalid" | "stale";
 export type EditActionType = "deleteRow" | "addRow" | "editCell";
 export type EditSessionValue = VuuRowDataItemType | object;
@@ -54,7 +55,7 @@ type EditSessionEvents = {
     lifecycle: (lifecycle: EditLifecycle) => void;
     newRow: (newRowState: NewRowState) => void;
 };
-export declare class EditSession extends EventEmitter<EditSessionEvents> {
+export declare class EditSession extends EventEmitter<EditSessionEvents> implements TableEditSession {
     #private;
     static readonly newRowKey = "__vuu_new_row__";
     constructor({ dataSource, deleteMode, editSessionApi, rowDefaults, }: EditSessionConstructorProps);
@@ -89,6 +90,7 @@ export declare class EditSession extends EventEmitter<EditSessionEvents> {
     end(saveChanges?: boolean, force?: boolean): Promise<void>;
     get lifecycle(): EditLifecycle;
     get inEditMode(): boolean;
+    cancel(key: string, columnName: string, restoredValue: VuuRowDataItemType): Promise<RpcResult>;
     commit(key: string, columnName: string, originalValue: EditSessionValue, typedValue: EditSessionValue, isValid: boolean, { dataSourceValue, syncToDataSource }?: EditCommitOptions): Promise<RpcResult>;
 }
 export {};

package/types/TableEditSession.d.ts

@@ -0,0 +1,28 @@
+import type { RpcResult, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+export type TableEditSessionEvents = {
+    cellEditChanged: (key: string, columnName: string) => void;
+};
+/**
+ * The subset of edit session behaviour consumed by Table and its cells.
+ * Implemented by EditSession (edits staged in a session table, committed or
+ * discarded at end of session) and DirectEditSession (edits applied directly
+ * to the source table).
+ */
+export interface TableEditSession {
+    /**
+     * True while a staged edit session is in progress. Always false for
+     * DirectEditSession.
+     */
+    readonly inEditMode: boolean;
+    commit(key: string, columnName: string, originalValue: VuuRowDataItemType, typedValue: string | number | boolean, isValid: boolean): Promise<RpcResult>;
+    /**
+     * Invoked when user abandons an in-progress cell edit, restoring the value
+     * the cell held before editing began. Values that have only been typed, not
+     * committed, have never been sent to the server, so nothing is sent here.
+     * Any invalid edit previously recorded for the cell is discarded.
+     */
+    cancel(key: string, columnName: string, restoredValue: VuuRowDataItemType): Promise<RpcResult>;
+    isCellEdited(key: string, columnName: string): boolean;
+    on<E extends keyof TableEditSessionEvents>(event: E, listener: TableEditSessionEvents[E]): void;
+    removeListener<E extends keyof TableEditSessionEvents>(event: E, listener: TableEditSessionEvents[E]): void;
+}

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

@@ -21,6 +21,6 @@ export declare const useEditField: <T extends string | number | boolean = string
     previousValue: string | undefined;
     value: string;
     warningMessage: string | undefined;
-    onChange: ChangeEventHandler;
+    onChange: ChangeEventHandler<HTMLInputElement>;
     onDropdownSelectionChange: (_evt: SyntheticEvent, [selectedOption]: LookupOption[]) => void;
 };

package/types/index.d.ts

@@ -1,15 +1,17 @@
-export { StaleUpdateError } from "@vuu-ui/vuu-utils";
-export { DataEditingProvider, useEditSession } from "./DataEditingProvider";
-export { EditField } from './edit-field/EditField';
-export { useEditField } from './edit-field/useEditField';
-export { lookupOptionsFromRows, useLookupValues, type LookupOption, type LookupValuedHookProps, type OptionMap, } from "./lookup-values/useLookupValues";
-export { getVuuEditMessage, isEditRowReadOnly, isInlineEditingSession, withDataRowEditErrors } from "./edit-utils";
-export { EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, editActionRowClassNameGenerator } from "./editActionRowClassNameGenerator";
-export { EditButtons, type EditButtonProps } from "./EditButtons";
-export { EditModeProvider, useEditMode, type EditModeContextProps } from "./EditModeProvider";
-export { EditError, EditSession, SupersededEditError, type EditActionType, type EditLifecycle, type EditSessionConstructorProps, type EditState, type NewRowState, type RowDefaultDataItemValues } from "./EditSession";
-export { getUndoButtonContent, getUndoTooltipContent, UNDO_CELL_RENDERER, UndoCellRenderer, type UndoCellRendererComponentProps } from "./UndoCellRenderer";
+export { DataEditingProvider, useEditSession, useTableEditSession, } from "./DataEditingProvider";
+export { DirectEditSession, type DirectEditSessionConstructorProps, } from "./DirectEditSession";
+export type { TableEditSession, TableEditSessionEvents, } from "./TableEditSession";
 export { useCellEdited } from "./useCellEdited";
-export { useEditable } from './useEditable';
-export { useEditableTable, type EditableTableHookProps, type EditMode } from "./useEditableTable";
 export { useEditState } from "./useEditState";
+export { getVuuEditMessage, isInlineEditingSession, isEditRowReadOnly, withDataRowEditErrors, } from "./edit-utils";
+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 { 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";
+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/useCellEdited.d.ts

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

package/types/useEditable.d.ts

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