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

package/src/edit-field/EditField.js

@@ -1,13 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox, FormField, FormFieldLabel, Input } from "@salt-ds/core";
+import { Checkbox, Dropdown, FormField, FormFieldLabel, Input, Option } from "@salt-ds/core";
 import { useCallback } from "react";
 import { useEditField } from "./useEditField.js";
 import { useEditSession } from "../DataEditingProvider.js";
 import { dataDescriptorTypeToVuuRowDataItemType } from "@vuu-ui/vuu-utils";
 import { useEditMode } from "../EditModeProvider.js";
-const EditField = ({ dataRow, label, name, readOnly = false, required, type })=>{
+import { useLookupValues } from "../lookup-values/useLookupValues.js";
+import "./EditField.css";
+const classBase = "vuuEditField";
+const EditField = ({ dataRow, deferNewRow = false, label, name, readOnly = false, required, type, ...options })=>{
     const editSession = useEditSession();
     const { isEditMode } = useEditMode();
+    const lookupValues = useLookupValues({
+        enabled: "dropdown" === type,
+        ...options
+    });
     const onEdit = useCallback(async (editState, editPhase)=>{
         const { isValid = true, previousValue = "", value } = editState;
         if ("commit" === editPhase && editSession) {
@@ -18,7 +25,7 @@ const EditField = ({ dataRow, label, name, readOnly = false, required, type })=>
                     type: "ERROR_RESULT"
                 };
                 editSession.setNewRowValue(name, value);
-                if (editSession.isNewRowFinalColumn(name) || editSession.isNewRowComplete()) return editSession.addNewRow();
+                if (!deferNewRow && (editSession.isNewRowFinalColumn(name) || editSession.isNewRowComplete())) return editSession.addNewRow();
                 return {
                     data: void 0,
                     type: "SUCCESS_RESULT"
@@ -26,8 +33,16 @@ const EditField = ({ dataRow, label, name, readOnly = false, required, type })=>
             }
             return editSession.commit(dataRow.key, name, previousValue, value, isValid);
         }
+        if ("change" === editPhase && deferNewRow && editSession?.isNewRow(dataRow.key)) {
+            editSession.setNewRowValue(name, value);
+            return {
+                data: void 0,
+                type: "SUCCESS_RESULT"
+            };
+        }
     }, [
         dataRow,
+        deferNewRow,
         editSession,
         name
     ]);
@@ -41,14 +56,15 @@ const EditField = ({ dataRow, label, name, readOnly = false, required, type })=>
         name,
         serverDataType: "string"
     };
-    const { editing, inputProps, warningMessage, previousValue = "", ...editProps } = useEditField({
+    const { inputProps, onChange, onDropdownSelectionChange, onKeyDown, value } = useEditField({
         column,
-        textType: "checkbox" !== type ? type : void 0,
+        textType: "checkbox" !== type && "dropdown" !== type ? type : void 0,
         onEdit,
         type: dataDescriptorTypeToVuuRowDataItemType(column),
         value: dataValue
     });
     return /*#__PURE__*/ jsxs(FormField, {
+        className: classBase,
         "data-field": name,
         necessity: necessity,
         children: [
@@ -64,10 +80,24 @@ const EditField = ({ dataRow, label, name, readOnly = false, required, type })=>
             }) : "checkbox" === type ? /*#__PURE__*/ jsx(Checkbox, {
                 checked: Boolean(dataValue),
                 onChange: onCommit
+            }) : "dropdown" === type ? /*#__PURE__*/ jsx(Dropdown, {
+                "data-icon": "triangle-down",
+                onSelectionChange: onDropdownSelectionChange,
+                placeholder: "Please select value",
+                value: value,
+                children: lookupValues.map((listOption)=>/*#__PURE__*/ jsx(Option, {
+                        value: listOption,
+                        children: listOption.label
+                    }, listOption.value))
             }) : /*#__PURE__*/ jsx(Input, {
-                ...editProps,
                 bordered: true,
-                readOnly: readOnly
+                inputProps: {
+                    ...inputProps,
+                    onChange
+                },
+                onKeyDown: onKeyDown,
+                readOnly: readOnly,
+                value: value
             })
         ]
     });

package/src/edit-field/useEditField.js

@@ -22,8 +22,7 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
     }, [
         value
     ]);
-    const commit = useCallback(async ()=>{
-        const { value } = editState;
+    const commit = useCallback(async (value = editState.value)=>{
         const result = column.clientSideEditValidationCheck?.(value, "*");
         if (result?.ok === false) setEditState((state)=>({
                 ...state,
@@ -42,9 +41,9 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
                 }, "commit");
                 if (isRpcSuccess(response)) {
                     isDirtyRef.current = false;
-                    setEditState(({ previousValue, value })=>({
+                    setEditState((state)=>({
                             editing: false,
-                            previousValue: previousValue === value ? void 0 : void 0 === previousValue ? initialValue : previousValue,
+                            previousValue: state.previousValue === value ? void 0 : void 0 === state.previousValue ? initialValue : state.previousValue,
                             value
                         }));
                 } else if (isRpcError(response)) {
@@ -148,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
@@ -186,6 +180,26 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
         column,
         onEdit
     ]);
+    const handleDropdownSelectionChange = useCallback((_evt, [selectedOption])=>{
+        if (!selectedOption) return;
+        const value = String(selectedOption.value);
+        isDirtyRef.current = value !== initialValueRef.current;
+        setEditState((state)=>({
+                ...state,
+                editing: true,
+                message: void 0,
+                value
+            }));
+        commit(value).then((committed)=>{
+            if (committed) setEditState((state)=>({
+                    ...state,
+                    editing: false,
+                    value
+                }));
+        });
+    }, [
+        commit
+    ]);
     return {
         editing: editState.editing,
         inputProps: {
@@ -193,11 +207,12 @@ const useEditField = ({ column, value, onEdit, textType, type = "string" })=>{
             onFocus: handleFocus,
             type: textType
         },
-        onChange: handleChange,
         onKeyDown: handleKeyDown,
         previousValue: editState.previousValue,
         value: editState.value,
-        warningMessage: editState.message
+        warningMessage: editState.message,
+        onChange: handleChange,
+        onDropdownSelectionChange: handleDropdownSelectionChange
     };
 };
 export { useEditField };

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,13 +1,16 @@
-export { StaleUpdateError } from "@vuu-ui/vuu-utils";
-export { DataEditingProvider, useEditSession } from "./DataEditingProvider.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";

package/src/lookup-values/useLookupValues.js

@@ -0,0 +1,78 @@
+import { Range, useData } from "@vuu-ui/vuu-utils";
+import { useEffect, useMemo, useState } from "react";
+const DATA_ROW_COLUMN_OFFSET = 10;
+const lookupOptionsFromRows = (columns, rows, optionMap)=>{
+    const requestedColumns = [
+        optionMap.value,
+        optionMap.label,
+        ...optionMap.additionalFields ?? []
+    ];
+    const missingColumns = requestedColumns.filter((column)=>!columns.includes(column));
+    if (missingColumns.length > 0) throw Error(`[useLookupValues] lookup columns not found: ${requestedColumns.join(", ")}`);
+    return rows.map((row)=>{
+        const metadata = Object.fromEntries((optionMap.additionalFields ?? []).map((field)=>[
+                field,
+                String(row[columns.indexOf(field) + DATA_ROW_COLUMN_OFFSET])
+            ]));
+        return {
+            value: String(row[columns.indexOf(optionMap.value) + DATA_ROW_COLUMN_OFFSET]),
+            label: String(row[columns.indexOf(optionMap.label) + DATA_ROW_COLUMN_OFFSET]),
+            ...Object.keys(metadata).length > 0 ? {
+                metadata
+            } : {}
+        };
+    });
+};
+const useLookupValues = ({ enabled, optionMap, table })=>{
+    if (enabled && (void 0 === optionMap || void 0 === table)) throw Error("[useLookupValues] optionsMap and Table must be provided");
+    const { VuuDataSource } = useData();
+    const [options, setOptions] = useState([]);
+    const lookupColumns = useMemo(()=>optionMap ? [
+            optionMap.value,
+            optionMap.label,
+            ...optionMap.additionalFields ?? []
+        ] : [], [
+        optionMap
+    ]);
+    const dataSource = useMemo(()=>enabled && optionMap && table ? new VuuDataSource({
+            columns: lookupColumns,
+            table
+        }) : void 0, [
+        VuuDataSource,
+        enabled,
+        lookupColumns,
+        optionMap,
+        table
+    ]);
+    useEffect(()=>{
+        setOptions([]);
+        if (!dataSource || !optionMap) return;
+        let active = true;
+        let columns;
+        const subscribe = (message)=>{
+            if (!active) return;
+            if ("subscribed" === message.type) {
+                const schemaColumns = new Set(message.tableSchema.columns.map(({ name })=>name));
+                if (!lookupColumns.every((column)=>message.columns.includes(column) && schemaColumns.has(column))) throw Error(`[useLookupValues] lookup columns not found: ${lookupColumns.join(", ")}`);
+                columns = message.columns;
+            } else if ("viewport-update" === message.type && columns) setOptions(lookupOptionsFromRows(columns, message.rows ?? [], optionMap));
+            else if ("subscribe-failed" === message.type) console.error(`Lookup table ${table?.table} subscription failed: ${message.msg}`);
+        };
+        dataSource.subscribe({
+            range: Range(0, 100)
+        }, subscribe).catch((cause)=>{
+            if (active) console.error("Role client dropdown subscription failed:", cause);
+        });
+        return ()=>{
+            active = false;
+            dataSource.unsubscribe();
+        };
+    }, [
+        dataSource,
+        lookupColumns,
+        optionMap,
+        table
+    ]);
+    return options;
+};
+export { lookupOptionsFromRows, useLookupValues };

package/src/useEditState.js

@@ -0,0 +1,15 @@
+import { useCallback, useSyncExternalStore } from "react";
+function useEditState(editSession) {
+    const subscribe = useCallback((onStoreChange)=>{
+        if (!editSession) return ()=>void 0;
+        editSession.on("editState", onStoreChange);
+        return ()=>editSession.removeListener("editState", onStoreChange);
+    }, [
+        editSession
+    ]);
+    const getSnapshot = useCallback(()=>editSession?.editState ?? "clean", [
+        editSession
+    ]);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+export { useEditState };

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/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

@@ -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;
-}) => import("react").JSX.Element;
+    editSession: TableEditSession;
+}) => 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
+ * 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/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, confirmCancel, confirmSave, editSession, hasSelection, onCancel, onDelete, onSave, saveLabel, }: EditButtonProps) => import("react/jsx-runtime").JSX.Element;

package/types/EditModeProvider.d.ts

@@ -7,7 +7,8 @@ export interface EditModeContextProps {
  * Implemented as a standalone Provider so that EditMode cna be implemented
  * at higher level than individual edit controls.
  */
-export declare const EditModeProvider: ({ children }: {
+export declare const EditModeProvider: ({ children, isEditMode: isEditModeProp, }: {
     children: ReactNode;
-}) => import("react").JSX.Element;
+    isEditMode?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useEditMode: () => EditModeContextProps;

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;
@@ -20,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[];
@@ -54,7 +58,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);
@@ -63,6 +67,7 @@ export declare class EditSession extends EventEmitter<EditSessionEvents> {
     get deleteCount(): number;
     get addCount(): number;
     get editState(): EditState;
+    get isDirty(): boolean;
     get canCancel(): boolean;
     get canSave(): boolean;
     get newRowState(): NewRowState;
@@ -88,6 +93,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/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

@@ -1,12 +1,21 @@
 import type { DataRow } from "@vuu-ui/vuu-table-types";
+import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { type OptionMap } from "../lookup-values/useLookupValues";
+import "./EditField.css";
 export type TextFieldType = "email" | "password";
-export type EditFieldType = "checkbox" | TextFieldType;
+export type EditFieldType = "checkbox" | "dropdown" | TextFieldType;
 export interface EditFieldProps {
     dataRow: DataRow;
+    deferNewRow?: boolean;
     label: string;
     name: string;
     readOnly?: boolean;
     required?: boolean;
     type?: EditFieldType;
 }
-export declare const EditField: ({ dataRow, label, name, readOnly, required, type, }: EditFieldProps) => import("react").JSX.Element;
+export interface DropdownEditFieldProps extends EditFieldProps {
+    type: "dropdown";
+    optionMap: OptionMap;
+    table: VuuTable;
+}
+export declare const EditField: ({ dataRow, deferNewRow, label, name, readOnly, required, type, ...options }: EditFieldProps | DropdownEditFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
 import type { RuntimeColumnDescriptor, TableCellEditHandler } from "@vuu-ui/vuu-table-types";
-import { type ChangeEventHandler, type FocusEventHandler, type KeyboardEvent } from "react";
+import { type ChangeEventHandler, type FocusEventHandler, type KeyboardEvent, type SyntheticEvent } from "react";
+import type { LookupOption } from "../lookup-values/useLookupValues";
 import type { TextFieldType } from "./EditField";
 export interface EditFieldHookProps<T extends VuuRowDataItemType = VuuRowDataItemType> {
     column: Pick<RuntimeColumnDescriptor, "clientSideEditValidationCheck" | "label" | "name">;
@@ -16,9 +17,10 @@ export declare const useEditField: <T extends string | number | boolean = string
         onFocus: FocusEventHandler<HTMLElement>;
         type: TextFieldType | undefined;
     };
-    onChange: ChangeEventHandler;
     onKeyDown: (evt: KeyboardEvent<HTMLElement>) => Promise<void>;
     previousValue: string | undefined;
     value: string;
     warningMessage: string | undefined;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    onDropdownSelectionChange: (_evt: SyntheticEvent, [selectedOption]: LookupOption[]) => void;
 };

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

@@ -1,13 +1,17 @@
-export { StaleUpdateError } from "@vuu-ui/vuu-utils";
-export { DataEditingProvider, useEditSession } from "./DataEditingProvider";
-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 { EditField } from './edit-field/EditField';
-export { useEditField } from './edit-field/useEditField';
-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 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";
+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/lookup-values/useLookupValues.d.ts

@@ -0,0 +1,19 @@
+import type { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+export type LookupOption = {
+    label: string;
+    metadata?: Record<string, string>;
+    value: number | string;
+};
+export type OptionMap = {
+    additionalFields?: readonly string[];
+    label: string;
+    value: string;
+};
+export interface LookupValuedHookProps {
+    enabled: boolean;
+    optionMap?: OptionMap;
+    table?: VuuTable;
+}
+export declare const lookupOptionsFromRows: (columns: string[], rows: DataSourceRow[], optionMap: OptionMap) => LookupOption[];
+export declare const useLookupValues: ({ enabled, optionMap, table, }: LookupValuedHookProps) => LookupOption[];

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>;

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;