@vuu-ui/vuu-data-editing 5.0.0-alpha.2 → 5.0.0-alpha.4

package/README.md

@@ -4,6 +4,41 @@ Shared data editing APIs, state management, and React components for VUU UI.
 
 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.
 
+## Quick start
+
+Most applications don't need to assemble the pieces in this package by hand.
+`@vuu-ui/vuu-table-extras` provides ready-made patterns built on it:
+
+```tsx
+import { EditableTable } from "@vuu-ui/vuu-table-extras";
+
+// Edit options live on the column descriptors, e.g. { name: "ric", editable: false }
+<EditableTable
+  allowDelete
+  config={{ columns }}
+  dataSource={dataSource}
+  showInlineAddRow
+/>
+
+// The selected row in a generated form beside the table
+<EditableTable config={{ columns }} dataSource={dataSource} editStrategy="form" />
+```
+
+See the Data Editing guides in the showcase (_Docs / DataEditing_, source in
+[`showcase/src/examples/Docs/DataEditing`](../../showcase/src/examples/Docs/DataEditing/)), starting
+with [Getting started](../../showcase/src/examples/Docs/DataEditing/01-GettingStarted.mdx), and the
+_DataEditing_ examples in the showcase.
+
+## Layers
+
+| Layer | Use it when | APIs |
+| ----- | ----------- | ---- |
+| Pattern components (`@vuu-ui/vuu-table-extras`) | A standard editing UI fits. | `EditableTable` (inline or form editing), `useBulkEditDialog` |
+| Composable hooks and components (this package) | You need your own layout or behaviour. | `useEditableTable`, `useEditableColumns`, `useEditForm`, `EditForm`, `CreateRowForm`, `EditButtons`, `useConfirmDiscard`, `useEditSessionState`, `useLookupOptions` |
+| Primitives (this package) | You are building a new pattern. | `EditSession`, `DirectEditSession`, `DataEditingProvider`, `EditModeProvider` |
+
+The rest of this document describes the primitives and how they work.
+
 ---
 
 ## Table of Contents
@@ -148,13 +183,14 @@ A cell is considered edited only when `originalValue !== editedValue && isValid
 ### New Row Flow (`addNewRow` / `addRow`)
 
 1. **Configure**: `editSession.configureNewRow(columns, requiredColumns)` defines the expected column inputs.
-2. **Draft**: `editSession.setNewRowValue(column, value)` updates `#newRowState.values`.
-3. **Submit**: `editSession.addNewRow()` validates required columns and delegates to `addRow()`.
+2. **Draft**: `editSession.setNewRowValue(column, value)` updates `#newRowState.values` (or removes the column entry if cleared to `undefined`/`""`) and clears any recorded error for `column`. `editSession.setNewRowError(column, errorMessage)` records a validation error in `#newRowState.errors` and `editSession.clearNewRowError(column)` clears it on cancel.
+3. **Submit**: `editSession.addNewRow()` validates required columns and checks that `#newRowState.errors` is empty before delegating to `addRow()`.
 4. **`addRow(rowData)`**:
    - Calls `dataSource.addRow(rowData)` with `#rowDefaults` merged in.
    - On success, extracts the row key directly from the response map (`response.data.key`) and records it in `#addedRowKeys`.
    - Increments `addCount`.
    - Resets new-row form draft and increments `draftRevision`.
+5. **Rejection**: if the server rejects the row, the draft is kept and the message is stored in `errors` under `rowErrorColumn` (the final column, where an inline add row shows it). Forms show it in their error banner. The next change to the draft clears it.
 
 ### Row Deletions (`deleteSelectedRows`)
 
@@ -190,8 +226,9 @@ editSession.undoRowChange(key, action);
 
 - **`end(saveChanges = false, force = false)`**:
   - Transitions lifecycle to `"ending"`.
-  - Calls `dataSource.endEditSession(saveChanges, force)`.
+  - Calls `dataSource.endEditSession(saveChanges, force)` (skipped when discarding an already-unsubscribed session DataSource).
   - On success: clears all edits, resets counters, unsubscribes session DataSource, transitions to `"idle"`.
+  - **Session Disconnection / Unsubscribe**: When a WebSocket disconnects, `ServerProxy` drops session-table viewports and posts `subscribe-failed`. The session DataSource emits `"unsubscribed"`, `EditSession` automatically ends the session locally (`end(false)`) without issuing `endEditSession`, and `useEditableTable` invokes `onCancel` to exit edit mode back to view mode.
   - **Stale Updates (`StaleUpdateError`)**: If the server rejects the commit due to concurrent edits, lifecycle transitions to `error { operation: "end" }` and `editState` becomes `"stale"`. The user can force-save with `end(true, true)`.
 
 ---

package/package.json

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

package/src/DirectEditSession.js

@@ -1,9 +1,11 @@
 import { EventEmitter } from "@vuu-ui/vuu-utils";
 class DirectEditSession extends EventEmitter {
     #dataSource;
-    constructor({ dataSource }){
+    #validate;
+    constructor({ dataSource, validate }){
         super();
         this.#dataSource = dataSource;
+        this.#validate = validate;
     }
     get dataSource() {
         return this.#dataSource;
@@ -25,6 +27,11 @@ class DirectEditSession extends EventEmitter {
             errorMessage: "Invalid value",
             type: "ERROR_RESULT"
         };
+        const errorMessage = this.#validate?.(key, columnName, typedValue);
+        if (errorMessage) return {
+            errorMessage,
+            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);

package/src/EditButtons.js

@@ -1,10 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@salt-ds/core";
 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 = useEditState(editSession);
-    const isDirty = editSession?.isDirty ?? false;
+import { useEditSessionState } from "./useEditSessionState.js";
+const EditButtons = ({ canCancel: canCancelProp, canSave: canSaveProp, confirmCancel, confirmSave, editSession, hasSelection = false, onCancel, onDelete, onSave, saveLabel = "Save" })=>{
+    const { canCancel: sessionCanCancel, canSave: sessionCanSave, editState, isDirty } = useEditSessionState(editSession);
+    const canSave = false !== canSaveProp && sessionCanSave;
+    const canCancel = canCancelProp ?? sessionCanCancel;
     const handleSave = useCallback(async ()=>{
         if (confirmSave) {
             const confirmed = await confirmSave();
@@ -36,7 +37,7 @@ const EditButtons = ({ canCancel, canSave: _canSave, confirmCancel, confirmSave,
                 children: "Delete"
             }),
             /*#__PURE__*/ jsx(Button, {
-                disabled: !editSession?.canSave,
+                disabled: !canSave,
                 onClick: handleSave,
                 sentiment: "accented",
                 children: "stale" === editState ? `${saveLabel} (force)` : saveLabel

package/src/EditModeProvider.js

@@ -1,8 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+let warnedMissingProvider = false;
 const EditModeContext = /*#__PURE__*/ createContext({
     isEditMode: false,
-    setEditMode: ()=>"EditModeProvider in place"
+    setEditMode: ()=>{
+        if ("production" !== process.env.NODE_ENV && !warnedMissingProvider) {
+            warnedMissingProvider = true;
+            console.warn("[useEditMode] setEditMode called with no EditModeProvider in scope, edit mode will not change");
+        }
+    }
 });
 const EditModeProvider = ({ children, isEditMode: isEditModeProp = false })=>{
     const [isEditMode, setEditMode] = useState(isEditModeProp);
@@ -11,11 +17,14 @@ const EditModeProvider = ({ children, isEditMode: isEditModeProp = false })=>{
     }, [
         isEditModeProp
     ]);
-    return /*#__PURE__*/ jsx(EditModeContext.Provider, {
-        value: {
+    const value = useMemo(()=>({
             isEditMode,
             setEditMode
-        },
+        }), [
+        isEditMode
+    ]);
+    return /*#__PURE__*/ jsx(EditModeContext.Provider, {
+        value: value,
         children: children
     });
 };

package/src/EditSession.js

@@ -123,6 +123,8 @@ class EditSession extends EventEmitter {
         return this.#newRowState.columns.at(-1) === columnName;
     }
     isNewRowComplete() {
+        const { errors, rowErrorColumn } = this.#newRowState;
+        if (Object.keys(errors).some((column)=>column !== rowErrorColumn)) return false;
         const requiredColumns = this.#newRowState.requiredColumns ?? this.#newRowState.columns;
         return requiredColumns.every((column)=>{
             const value = this.#newRowState.values[column];
@@ -145,17 +147,61 @@ class EditSession extends EventEmitter {
         });
     }
     setNewRowValue(column, value) {
+        const { rowErrorColumn, ...newRowState } = this.#newRowState;
+        const errors = {
+            ...newRowState.errors
+        };
+        delete errors[column];
+        if (void 0 !== rowErrorColumn) delete errors[rowErrorColumn];
+        const values = {
+            ...newRowState.values
+        };
+        if (void 0 === value || "string" == typeof value && "" === value.trim()) delete values[column];
+        else values[column] = value;
+        this.#setNewRowState({
+            ...newRowState,
+            errors,
+            values
+        });
+    }
+    setNewRowError(column, errorMessage = "Invalid value") {
+        const { rowErrorColumn, ...newRowState } = this.#newRowState;
+        const errors = {
+            ...newRowState.errors
+        };
+        if (void 0 !== rowErrorColumn) delete errors[rowErrorColumn];
+        const values = {
+            ...newRowState.values
+        };
+        delete values[column];
+        this.#setNewRowState({
+            ...newRowState,
+            errors: {
+                ...errors,
+                [column]: errorMessage
+            },
+            values
+        });
+    }
+    clearNewRowError(column) {
+        if (!(column in this.#newRowState.errors)) return;
         const errors = {
             ...this.#newRowState.errors
         };
         delete errors[column];
         this.#setNewRowState({
             ...this.#newRowState,
-            errors,
-            values: {
-                ...this.#newRowState.values,
-                [column]: value
-            }
+            errors
+        });
+    }
+    clearNewRow() {
+        this.#setNewRowState({
+            columns: this.#newRowState.columns,
+            draftRevision: this.#newRowState.draftRevision + 1,
+            errors: {},
+            requiredColumns: this.#newRowState.requiredColumns,
+            submitting: false,
+            values: {}
         });
     }
     async addNewRow() {
@@ -167,8 +213,13 @@ class EditSession extends EventEmitter {
                 column,
                 "Value required"
             ]));
-        const errors = {
-            ...this.#newRowState.errors,
+        const { rowErrorColumn, ...newRowState } = this.#newRowState;
+        const { [rowErrorColumn ?? ""]: _serverError, ...fieldErrors } = newRowState.errors;
+        const errors = void 0 === rowErrorColumn ? {
+            ...newRowState.errors,
+            ...missingErrors
+        } : {
+            ...fieldErrors,
             ...missingErrors
         };
         if (Object.keys(errors).length > 0) {
@@ -186,7 +237,8 @@ class EditSession extends EventEmitter {
             type: "SUCCESS_RESULT"
         };
         this.#setNewRowState({
-            ...this.#newRowState,
+            ...newRowState,
+            errors,
             submitting: true
         });
         try {
@@ -200,6 +252,7 @@ class EditSession extends EventEmitter {
                     errors: finalColumn ? {
                         [finalColumn]: response.errorMessage
                     } : this.#newRowState.errors,
+                    rowErrorColumn: finalColumn,
                     submitting: false
                 });
                 return response;
@@ -221,6 +274,7 @@ class EditSession extends EventEmitter {
                 errors: finalColumn ? {
                     [finalColumn]: errorMessage
                 } : this.#newRowState.errors,
+                rowErrorColumn: finalColumn,
                 submitting: false
             });
             return {
@@ -282,6 +336,14 @@ class EditSession extends EventEmitter {
     hasRowChanges(key) {
         return this.#rowEdits.has(key);
     }
+    getEditedValues(key) {
+        const cellEdits = this.#rowEdits.get(key)?.cellEdits;
+        if (!cellEdits) return {};
+        return Object.fromEntries(Array.from(cellEdits, ([column, { editedValue }])=>[
+                column,
+                editedValue
+            ]));
+    }
     isCellEdited(key, columnName) {
         const cellEdit = this.#rowEdits.get(key)?.cellEdits.get(columnName);
         return cellEdit?.isValid === true && cellEdit.originalValue !== cellEdit.editedValue;
@@ -364,6 +426,9 @@ class EditSession extends EventEmitter {
         this.#lifecycle = lifecycle;
         this.emit("lifecycle", lifecycle);
     }
+    #handleSessionUnsubscribed = ()=>{
+        if (this.canCancel) this.end(false);
+    };
     #enqueue(operation) {
         const result = this.#transitionQueue.then(operation);
         this.#transitionQueue = result.then(()=>void 0, ()=>void 0);
@@ -388,6 +453,7 @@ class EditSession extends EventEmitter {
                 const sessionDataSource = "beginEditSession" === this.#editSessionApi ? await sourceDataSource?.beginEditSession?.(toEditSessionMode(copyOption)) : await sourceDataSource?.createSessionDataSource?.(copyOption, sessionType);
                 if (!sessionDataSource) throw new Error(`[EditSession] datasource does not support ${this.#editSessionApi}`);
                 this.#sessionDataSource = sessionDataSource;
+                sessionDataSource.on?.("unsubscribed", this.#handleSessionUnsubscribed);
                 this.#setStale(false);
                 this.#setLifecycle({
                     status: "active",
@@ -424,6 +490,9 @@ class EditSession extends EventEmitter {
     get dataSource() {
         return this.#sessionDataSource ?? this.#sourceTableDataSource;
     }
+    get sourceDataSource() {
+        return this.#sourceTableDataSource;
+    }
     get sessionDataSource() {
         return this.#sessionDataSource;
     }
@@ -446,6 +515,7 @@ class EditSession extends EventEmitter {
                     const response = await this.dataSource?.endEditSession?.(saveChanges, force);
                     if (isRpcError(response)) throw new Error(response.errorMessage);
                 }
+                sessionDataSource.removeListener?.("unsubscribed", this.#handleSessionUnsubscribed);
                 this.#clearEdits();
                 this.#sessionDataSource = void 0;
                 this.#setLifecycle({

package/src/edit-control/EditControlCheckbox.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@salt-ds/core";
+import { useCallback, useEffect, useState } from "react";
+const isChecked = (value)=>true === value || "true" === value;
+const EditControlCheckbox = ({ className, onCommit, value })=>{
+    const [checked, setChecked] = useState(isChecked(value));
+    useEffect(()=>{
+        setChecked(isChecked(value));
+    }, [
+        value
+    ]);
+    const handleChange = useCallback((evt)=>{
+        setChecked(evt.target.checked);
+        onCommit(evt, evt.target.checked);
+    }, [
+        onCommit
+    ]);
+    return /*#__PURE__*/ jsx(Checkbox, {
+        checked: checked,
+        className: className,
+        "data-edit-control": true,
+        onChange: handleChange
+    });
+};
+export { EditControlCheckbox };

package/src/edit-control/EditControlDropdown.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Dropdown, Option } from "@salt-ds/core";
+import { useCallback } from "react";
+const toOption = (value)=>"string" == typeof value ? {
+        label: value,
+        value
+    } : value;
+const EditControlDropdown = ({ className, onCommit, value, values })=>{
+    const options = values.map(toOption);
+    const selectedValue = void 0 === value ? "" : String(value);
+    const selected = options.find((option)=>option.value === selectedValue);
+    const handleSelectionChange = useCallback((evt, [option])=>{
+        if (option) onCommit(evt, option.value);
+    }, [
+        onCommit
+    ]);
+    return /*#__PURE__*/ jsx(Dropdown, {
+        bordered: true,
+        className: className,
+        "data-edit-control": true,
+        "data-icon": "triangle-down",
+        onSelectionChange: handleSelectionChange,
+        placeholder: "Please select value",
+        selected: selected ? [
+            selected
+        ] : [],
+        value: selected?.label ?? selectedValue,
+        children: options.map((option)=>/*#__PURE__*/ jsx(Option, {
+                value: option,
+                children: option.label
+            }, option.value))
+    });
+};
+export { EditControlDropdown };

package/src/edit-control/EditControlLookupDropdown.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useLookupValues } from "../lookup-values/useLookupValues.js";
+import { EditControlDropdown } from "./EditControlDropdown.js";
+const EditControlLookupDropdown = ({ className, lookup: { labelColumn, table, valueColumn }, onCommit, value })=>{
+    const optionMap = useMemo(()=>({
+            label: labelColumn,
+            value: valueColumn
+        }), [
+        labelColumn,
+        valueColumn
+    ]);
+    const lookupValues = useLookupValues({
+        enabled: true,
+        optionMap,
+        table
+    });
+    const values = useMemo(()=>lookupValues.map(({ label, value })=>({
+                label,
+                value: String(value)
+            })), [
+        lookupValues
+    ]);
+    return /*#__PURE__*/ jsx(EditControlDropdown, {
+        className: className,
+        onCommit: onCommit,
+        value: value,
+        values: values
+    });
+};
+export { EditControlLookupDropdown };

package/src/edit-control/get-data-item-edit-control.js

@@ -0,0 +1,139 @@
+import { jsx } from "react/jsx-runtime";
+import { VuuDatePicker, VuuInput, VuuTimePicker, VuuTypeaheadInput } from "@vuu-ui/vuu-ui-controls";
+import { EpochTimestamp, getTemporalInfo, isDataValueEditable, isTimeDataValueWithMilliseconds, isValidTimeString, isValidTimeStringMillis, parseTemporalInput } from "@vuu-ui/vuu-utils";
+import { EditControlCheckbox } from "./EditControlCheckbox.js";
+import { EditControlDropdown } from "./EditControlDropdown.js";
+import { EditControlLookupDropdown } from "./EditControlLookupDropdown.js";
+const VARIANT_MIN_CHARACTER_COUNT = {
+    default: void 0,
+    pick: 0,
+    search: 1
+};
+const isTypeaheadEditor = (editor)=>editor?.name === "typeahead";
+const isValueListEditor = (editor)=>Array.isArray(editor?.values);
+const isLookupEditor = (editor)=>editor?.lookup !== void 0;
+const isCheckboxEditor = (editor)=>editor?.name === "checkbox-cell" || editor?.name === "toggle-cell";
+const timeOfDayPattern = /^\d{2}:\d{2}(:\d{2}(\.\d{1,9})?)?$/;
+const toEpochTimestamp = (value, { encoding })=>{
+    if (("string" == typeof value || "number" == typeof value) && !timeOfDayPattern.test(`${value}`)) return EpochTimestamp.fromWire(value, encoding);
+};
+const pad = (n)=>`${n}`.padStart(2, "0");
+function toTimeString(value, timestamp, { timeZone }, milliseconds = false) {
+    if (timestamp) {
+        const { hour, minute, second, millisecond } = timestamp.getFields(timeZone);
+        const timeString = `${pad(hour)}:${pad(minute)}:${pad(second)}`;
+        return milliseconds ? `${timeString}.${`${millisecond}`.padStart(3, "0")}` : timeString;
+    }
+    if ("string" == typeof value) if (milliseconds) {
+        const timeString = 8 === value.length ? `${value}.000` : value.slice(0, 12);
+        if (isValidTimeStringMillis(timeString)) return timeString;
+    } else {
+        const timeString = value.slice(0, 8);
+        if (isValidTimeString(timeString)) return timeString;
+    }
+}
+const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation = "update", errorMessage, onCommit, purpose = "edit", table, variant })=>{
+    const { editor } = dataDescriptor;
+    const temporalInfo = getTemporalInfo(dataDescriptor);
+    const value = InputProps?.value ?? InputProps?.inputProps?.value;
+    if (!isDataValueEditable(dataDescriptor, editOperation, true)) return /*#__PURE__*/ jsx(VuuInput, {
+        variant: "secondary",
+        ...InputProps,
+        onCommit: onCommit,
+        readOnly: true,
+        "data-edit-control": true
+    });
+    if (temporalInfo?.kind === "time") {
+        const { value, onChange } = InputProps?.inputProps ?? {};
+        const baseValue = toEpochTimestamp(value, temporalInfo);
+        const handleCommitTime = (evt, timeString)=>{
+            if (baseValue) {
+                const timestamp = parseTemporalInput(timeString, temporalInfo, baseValue);
+                onCommit(evt, timestamp ? `${timestamp.toWire(temporalInfo.encoding)}` : "");
+            } else onCommit(evt, timeString);
+        };
+        return isTimeDataValueWithMilliseconds(dataDescriptor) ? /*#__PURE__*/ jsx(VuuTimePicker, {
+            className: className,
+            milliseconds: true,
+            value: "" === value ? "" : toTimeString(value, baseValue, temporalInfo, true),
+            onChange: onChange,
+            onCommit: handleCommitTime,
+            "data-edit-control": true
+        }) : /*#__PURE__*/ jsx(VuuTimePicker, {
+            className: className,
+            value: "" === value ? "" : toTimeString(value, baseValue, temporalInfo),
+            onChange: onChange,
+            onCommit: handleCommitTime,
+            "data-edit-control": true
+        });
+    }
+    if (temporalInfo) {
+        const baseValue = toEpochTimestamp(InputProps?.inputProps?.value, temporalInfo);
+        const handleCommitDate = (evt, startOfDayMillis)=>{
+            let timestamp = EpochTimestamp.fromMillis(startOfDayMillis);
+            if (baseValue && "datetime" === temporalInfo.kind) {
+                const { year, month, day } = timestamp.getFields(temporalInfo.timeZone);
+                const { hour, minute, second, millisecond } = baseValue.getFields(temporalInfo.timeZone);
+                timestamp = EpochTimestamp.fromFields({
+                    year,
+                    month,
+                    day,
+                    hour,
+                    minute,
+                    second,
+                    millisecond
+                }, temporalInfo.timeZone, baseValue.subMilliNanos);
+            }
+            onCommit(evt, `${timestamp.toWire(temporalInfo.encoding)}`);
+        };
+        return /*#__PURE__*/ jsx(VuuDatePicker, {
+            className: className,
+            onCommit: handleCommitDate,
+            timeZone: temporalInfo.timeZone,
+            value: baseValue,
+            "data-edit-control": true
+        });
+    }
+    if ("edit" === purpose && (isCheckboxEditor(editor) || void 0 === editor && "boolean" === dataDescriptor.serverDataType)) return /*#__PURE__*/ jsx(EditControlCheckbox, {
+        className: className,
+        onCommit: onCommit,
+        value: value
+    });
+    if (isLookupEditor(editor)) return /*#__PURE__*/ jsx(EditControlLookupDropdown, {
+        className: className,
+        lookup: editor.lookup,
+        onCommit: onCommit,
+        value: value
+    });
+    else if (isValueListEditor(editor)) return /*#__PURE__*/ jsx(EditControlDropdown, {
+        className: className,
+        onCommit: onCommit,
+        value: value,
+        values: editor.values
+    });
+    else if (table && (isTypeaheadEditor(editor) || "filter" === purpose && "string" === dataDescriptor.serverDataType)) {
+        const minCharacterCountToTriggerSuggestions = TypeaheadProps?.minCharacterCountToTriggerSuggestions ?? (isTypeaheadEditor(editor) ? editor.minCharacterCountToTriggerSuggestions : void 0) ?? VARIANT_MIN_CHARACTER_COUNT[variant ?? "default"];
+        return /*#__PURE__*/ jsx(VuuTypeaheadInput, {
+            ...InputProps,
+            ...TypeaheadProps,
+            className: className,
+            column: dataDescriptor.name,
+            "data-edit-control": true,
+            "data-variant": variant,
+            minCharacterCountToTriggerSuggestions: minCharacterCountToTriggerSuggestions,
+            onCommit: onCommit,
+            table: table
+        });
+    }
+    return /*#__PURE__*/ jsx(VuuInput, {
+        variant: "secondary",
+        ...InputProps,
+        className: className,
+        commitOnBlur: commitOnBlur,
+        commitWhenCleared: commitWhenCleared,
+        onCommit: onCommit,
+        errorMessage: errorMessage,
+        "data-edit-control": true
+    });
+};
+export { getDataItemEditControl };

package/src/edit-control/index.js

@@ -0,0 +1,4 @@
+export * from "./EditControlCheckbox.js";
+export * from "./EditControlDropdown.js";
+export * from "./EditControlLookupDropdown.js";
+export * from "./get-data-item-edit-control.js";

package/src/edit-errors.js

@@ -0,0 +1,7 @@
+const toError = (cause)=>cause instanceof Error ? cause : new Error(String(cause));
+const reportEditError = (source, onError, cause, operation)=>{
+    const error = toError(cause);
+    if (onError) onError(error, operation);
+    else console.error("[%s] %s edit session failed", source, operation, error);
+};
+export { reportEditError, toError };