@vuu-ui/vuu-data-react 3.0.0 → 3.1.0-beta.2

package/package.json

@@ -1,23 +1,30 @@
 {
-  "version": "3.0.0",
+  "version": "3.1.0-beta.2",
+  "main": "src/index.ts",
   "author": "heswell",
   "license": "Apache-2.0",
+  "scripts": {
+    "build:dev": "node ../../scripts/run-build.mjs",
+    "build": "node ../../scripts/run-build-rslib.ts",
+    "test": "vitest run",
+    "type-defs": "node ../../scripts/build-type-defs.mjs"
+  },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.0.0",
-    "@vuu-ui/vuu-filter-types": "3.0.0",
-    "@vuu-ui/vuu-protocol-types": "3.0.0",
-    "@vuu-ui/vuu-table-types": "3.0.0"
+    "@vuu-ui/vuu-data-types": "3.1.0-beta.2",
+    "@vuu-ui/vuu-filter-types": "3.1.0-beta.2",
+    "@vuu-ui/vuu-protocol-types": "3.1.0-beta.2",
+    "@vuu-ui/vuu-table-types": "3.1.0-beta.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.0.0",
-    "@vuu-ui/vuu-data-remote": "3.0.0",
-    "@vuu-ui/vuu-filter-parser": "3.0.0",
-    "@vuu-ui/vuu-filters": "3.0.0",
-    "@vuu-ui/vuu-layout": "3.0.0",
-    "@vuu-ui/vuu-notifications": "3.0.0",
-    "@vuu-ui/vuu-ui-controls": "3.0.0",
-    "@vuu-ui/vuu-utils": "3.0.0",
-    "@vuu-ui/vuu-table": "3.0.0",
+    "@vuu-ui/vuu-context-menu": "3.1.0-beta.2",
+    "@vuu-ui/vuu-data-remote": "3.1.0-beta.2",
+    "@vuu-ui/vuu-filter-parser": "3.1.0-beta.2",
+    "@vuu-ui/vuu-filters": "3.1.0-beta.2",
+    "@vuu-ui/vuu-layout": "3.1.0-beta.2",
+    "@vuu-ui/vuu-notifications": "3.1.0-beta.2",
+    "@vuu-ui/vuu-ui-controls": "3.1.0-beta.2",
+    "@vuu-ui/vuu-utils": "3.1.0-beta.2",
+    "@vuu-ui/vuu-table": "3.1.0-beta.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"
@@ -29,19 +36,16 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-data-react",
   "type": "module",
   "types": "types/index.d.ts"

package/src/data-editing/EditForm.css.js

@@ -0,0 +1,53 @@
+const css = `
+.EditForm {
+  gap: var(--salt-spacing-400);
+  height: 100%;
+  padding: var(--salt-spacing-200) var(--salt-spacing-200)
+    var(--salt-spacing-200) var(--salt-spacing-400);
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.EditForm-form-fields {
+  gap: var(--salt-spacing-400);
+  flex-direction: column;
+  display: flex;
+}
+
+.EditForm-buttons {
+  align-items: center;
+  gap: var(--salt-spacing-200);
+  justify-content: flex-end;
+  display: flex;
+}
+
+.EditForm-field {
+  display: flex;
+
+  & .saltFormField {
+    flex: auto;
+  }
+
+  & .EditForm-edit-indicator {
+    flex: 0 0 14px;
+    position: relative;
+  }
+
+  &[data-edited="true"] {
+    & .EditForm-edit-indicator:after {
+      background-color: var(--salt-content-secondary-foreground);
+      content: "";
+      border-radius: 5px;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      top: 50%;
+      right: -3px;
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/data-editing/EditForm.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, FormField, FormFieldLabel } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { registerRules } from "./edit-validation-rules.js";
+import { useEditForm } from "./useEditForm.js";
+import EditForm from "./EditForm.css";
+import { getDataItemEditControl } from "./get-data-item-edit-control.js";
+const classBase = "EditForm";
+registerRules();
+const EditForm_EditForm = ({ className, dataSource, formFieldDescriptors, onSubmit: onSubmitProp, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-edit-form",
+        css: EditForm,
+        window: targetWindow
+    });
+    const { editedFields, editEntity, errorMessages, formFieldsContainerRef, isClean, ok, onCancel, onChange, onCommit, onFocus, onSubmit } = useEditForm({
+        dataSource,
+        formFieldDescriptors,
+        onSubmit: onSubmitProp
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        onFocus: onFocus,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-form-fields`,
+                ref: formFieldsContainerRef,
+                children: formFieldDescriptors.map((dataDescriptor)=>{
+                    const { name, label = name } = dataDescriptor;
+                    const errorMessage = errorMessages[name];
+                    const isEdited = !isClean && editedFields.includes(name);
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: `${classBase}-field`,
+                        "data-edited": isEdited,
+                        children: [
+                            /*#__PURE__*/ jsxs(FormField, {
+                                "data-field": name,
+                                children: [
+                                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                                        children: label
+                                    }),
+                                    getDataItemEditControl({
+                                        InputProps: {
+                                            onChange,
+                                            value: editEntity?.[name]?.toString() ?? ""
+                                        },
+                                        dataDescriptor,
+                                        errorMessage,
+                                        onCommit
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: `${classBase}-edit-indicator`
+                            })
+                        ]
+                    }, name);
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-buttons`,
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        disabled: isClean,
+                        onClick: onCancel,
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        onClick: onSubmit,
+                        disabled: !ok || isClean,
+                        children: "Save"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { EditForm_EditForm as EditForm };

package/src/data-editing/UnsavedChangesReport.css.js

@@ -0,0 +1,27 @@
+const css = `
+.vuuUnsavedChanges-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.vuuUnsavedChanges-row {
+  box-sizing: content-box;
+  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);
+  height: 32px;
+
+  & td {
+    padding: 0 var(--salt-spacing-200);
+  }
+}
+
+.vuuUnsavedChanges-fieldName {
+  text-transform: capitalize;
+}
+
+.vuuUnsavedChanges-new {
+  font-weight: bold;
+}
+
+
+`;
+export default css;

package/src/data-editing/UnsavedChangesReport.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { buildFormEditState } from "./form-edit-state.js";
+import UnsavedChangesReport from "./UnsavedChangesReport.css";
+const classBase = "vuuUnsavedChanges";
+const UnsavedChangesReport_UnsavedChangesReport = ({ entity, editedEntity })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-unsaved-changes-report",
+        css: UnsavedChangesReport,
+        window: targetWindow
+    });
+    const { editedFields } = buildFormEditState(entity, editedEntity);
+    return /*#__PURE__*/ jsx("div", {
+        className: classBase,
+        children: /*#__PURE__*/ jsx("table", {
+            className: `${classBase}-table`,
+            children: /*#__PURE__*/ jsx("tbody", {
+                children: editedFields.map((fieldName, i)=>/*#__PURE__*/ jsxs("tr", {
+                        className: `${classBase}-row`,
+                        children: [
+                            /*#__PURE__*/ jsx("td", {
+                                className: `${classBase}-fieldName`,
+                                children: fieldName
+                            }),
+                            /*#__PURE__*/ jsx("td", {
+                                className: `${classBase}-old`,
+                                children: entity[fieldName]
+                            }),
+                            /*#__PURE__*/ jsx("td", {
+                                className: `${classBase}-new`,
+                                children: editedEntity[fieldName]
+                            })
+                        ]
+                    }, i))
+            })
+        })
+    });
+};
+export { UnsavedChangesReport_UnsavedChangesReport as UnsavedChangesReport };

package/src/data-editing/edit-rule-validation-checker.js

@@ -0,0 +1,30 @@
+import { getEditRuleValidator, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+const OK = {
+    ok: true
+};
+const NO_VALIDATION_RULES = [];
+function getEditValidationRules(descriptor, editPhase) {
+    if (isTypeDescriptor(descriptor.type)) return "*" === editPhase ? descriptor.type.rules ?? [] : descriptor.type.rules?.filter(({ phase: a = "commit" })=>a === editPhase) ?? NO_VALIDATION_RULES;
+    return NO_VALIDATION_RULES;
+}
+const buildValidationChecker = (rules)=>(value, editPhase)=>applyRules(rules, value, editPhase);
+function applyRules(rules, value, editPhase = "commit") {
+    const result = {
+        ok: true
+    };
+    for (const rule of rules){
+        const { phase = "commit" } = rule;
+        if ("*" === editPhase || phase === editPhase) {
+            const applyRuleToValue = getEditRuleValidator(rule.name);
+            if (applyRuleToValue) {
+                const res = applyRuleToValue(rule, value);
+                if (!res.ok) {
+                    result.ok = false;
+                    (result.messages ?? (result.messages = [])).push(res.message);
+                }
+            } else throw Error(`editable-utils applyRules, no validator registered for rule '${rule.name}'`);
+        }
+    }
+    return result;
+}
+export { OK, buildValidationChecker, getEditValidationRules };

package/src/data-editing/edit-validation-rules.js

@@ -0,0 +1,33 @@
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { OK } from "./edit-rule-validation-checker.js";
+const isString = (value)=>"string" == typeof value;
+const NUMERIC = /^(?:[0-9]|\.)+$/;
+const CharValidatorNumeric = (rule, value)=>{
+    if (isString(value)) {
+        if ("" === value.trim()) return OK;
+        else if (value.match(NUMERIC)) return OK;
+    }
+    return {
+        ok: false,
+        message: "only numeric characters are permitted"
+    };
+};
+const ValueValidatorInteger = (rule, value)=>{
+    if (isString(value)) if ("" === value.trim()) return OK;
+    else {
+        if (!value.match(NUMERIC)) return {
+            ok: false,
+            message: "value must be an integer, invalid character"
+        };
+        if (parseFloat(value) === parseInt(value)) return OK;
+    }
+    return {
+        ok: false,
+        message: "must be an integer value"
+    };
+};
+const registerRules = ()=>{
+    registerComponent("char-numeric", CharValidatorNumeric, "data-edit-validator", {});
+    registerComponent("value-integer", ValueValidatorInteger, "data-edit-validator", {});
+};
+export { registerRules };

package/src/data-editing/form-edit-state.js

@@ -0,0 +1,16 @@
+const CLEAN_FORM = {
+    isClean: true,
+    editedFields: []
+};
+const buildFormEditState = (entity, newEntity)=>{
+    if (void 0 === entity) return CLEAN_FORM;
+    {
+        const editedFields = [];
+        for (const [fieldName, value] of Object.entries(entity))if (value !== newEntity[fieldName]) editedFields.push(fieldName);
+        return {
+            isClean: 0 === editedFields.length,
+            editedFields
+        };
+    }
+};
+export { CLEAN_FORM, buildFormEditState };

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

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { VuuDatePicker, VuuInput, VuuTimePicker, VuuTypeaheadInput } from "@vuu-ui/vuu-ui-controls";
+import { asTimeString, isDataValueEditable, isDateTimeDataValue, isTimeDataValue } from "@vuu-ui/vuu-utils";
+import { ToggleFilter } from "@vuu-ui/vuu-filters";
+const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation = "update", errorMessage, onCommit, table, values, variant })=>{
+    const handleCommitNumber = (evt, value)=>{
+        onCommit(evt, value.toString());
+    };
+    const dataVariant = variant && "toggle" !== variant ? variant : void 0;
+    if (!isDataValueEditable(dataDescriptor, editOperation, true)) return /*#__PURE__*/ jsx(VuuInput, {
+        variant: "secondary",
+        ...InputProps,
+        onCommit: onCommit,
+        readOnly: true,
+        "data-edit-control": true
+    });
+    if (isTimeDataValue(dataDescriptor)) {
+        if (InputProps?.inputProps) {
+            const { value, onChange } = InputProps.inputProps;
+            return /*#__PURE__*/ jsx(VuuTimePicker, {
+                className: className,
+                value: asTimeString(value, true),
+                onChange: onChange,
+                onCommit: onCommit,
+                "data-edit-control": true
+            });
+        }
+    } else if (isDateTimeDataValue(dataDescriptor)) return /*#__PURE__*/ jsx(VuuDatePicker, {
+        className: className,
+        onCommit: handleCommitNumber,
+        "data-edit-control": true
+    });
+    else if ("string" === dataDescriptor.serverDataType && table) if ("toggle" === variant && values?.length) return /*#__PURE__*/ jsx(ToggleFilter, {
+        className: className,
+        column: dataDescriptor.name,
+        "data-edit-control": true,
+        onCommit: onCommit,
+        table: table,
+        values: values,
+        value: InputProps?.inputProps?.value ?? "all"
+    });
+    else return /*#__PURE__*/ jsx(VuuTypeaheadInput, {
+        ...InputProps,
+        ...TypeaheadProps,
+        className: className,
+        column: dataDescriptor.name,
+        "data-edit-control": true,
+        "data-variant": dataVariant,
+        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/data-editing/index.js

@@ -0,0 +1,6 @@
+export * from "./get-data-item-edit-control.js";
+export * from "./EditForm.js";
+export * from "./edit-rule-validation-checker.js";
+export * from "./UnsavedChangesReport.js";
+export * from "./useEditForm.js";
+export * from "./form-edit-state.js";

package/src/data-editing/useEditForm.js

@@ -0,0 +1,253 @@
+import { jsx } from "react/jsx-runtime";
+import { Range, buildColumnMap, dataSourceRowToEntity, messageHasDataRows, queryClosest } from "@vuu-ui/vuu-utils";
+import { Button } from "@salt-ds/core";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { UnsavedChangesReport } from "./UnsavedChangesReport.js";
+import { buildValidationChecker, getEditValidationRules } from "./edit-rule-validation-checker.js";
+import { CLEAN_FORM, buildFormEditState } from "./form-edit-state.js";
+import { useModal } from "@vuu-ui/vuu-ui-controls";
+const CLEAN_VALIDATION = {
+    ok: true,
+    messages: {}
+};
+const getValidationChecker = (descriptor, editPhase)=>{
+    const rules = getEditValidationRules(descriptor, editPhase) ?? [];
+    return buildValidationChecker(rules);
+};
+const nextValidationState = (state, dataDescriptor, value)=>{
+    const check = getValidationChecker(dataDescriptor, "change");
+    const result = check(value, "change");
+    const { name } = dataDescriptor;
+    const { ok: wasOk, messages: existingMessages } = state;
+    if (!result.ok) return {
+        ok: false,
+        messages: {
+            ...existingMessages,
+            [name]: result.messages.join("\n")
+        }
+    };
+    if (!wasOk) {
+        const fieldsInError = Object.keys(existingMessages);
+        if (fieldsInError.includes(name)) if (1 === fieldsInError.length) return {
+            ok: true,
+            messages: {}
+        };
+        else {
+            const messages = {
+                ...existingMessages
+            };
+            delete messages[name];
+            return {
+                ok: false,
+                messages
+            };
+        }
+    }
+    return state;
+};
+function find(descriptors, fieldname) {
+    const d = descriptors.find(({ name })=>name === fieldname);
+    if (d) return d;
+    throw Error(`DataValueDescriptor not found for field ${fieldname}`);
+}
+const getField = (target)=>{
+    const fieldElement = queryClosest(target, "[data-field]");
+    if (fieldElement) return fieldElement.dataset.field;
+    throw Error("no field ");
+};
+const useEditForm = ({ dataSource, formFieldDescriptors, onSubmit })=>{
+    const { showDialog, closeDialog } = useModal();
+    const currentDataSource = useRef(void 0);
+    const formFieldsContainerRef = useRef(null);
+    const entityRef = useRef(void 0);
+    const focusedFieldRef = useRef("");
+    const originalEntityRef = useRef(void 0);
+    const formEditStateRef = useRef(CLEAN_FORM);
+    const validationStateRef = useRef({
+        ok: true,
+        messages: {}
+    });
+    const [entity, _setEntity] = useState();
+    const [, forceUpdate] = useState({});
+    const setFormEditState = useCallback((newState)=>{
+        formEditStateRef.current = newState;
+    }, []);
+    const setEntity = useCallback((newEntity)=>{
+        setFormEditState(buildFormEditState(originalEntityRef.current, newEntity));
+        entityRef.current = newEntity;
+        _setEntity(newEntity);
+    }, [
+        setFormEditState
+    ]);
+    const submitChanges = useCallback(async ()=>{
+        const rpcResponse = await currentDataSource.current?.rpcRequest?.({
+            params: {},
+            rpcName: "VP_BULK_EDIT_SUBMIT_RPC",
+            type: "RPC_REQUEST"
+        });
+        console.log({
+            rpcResponse
+        });
+    }, []);
+    const showSaveOrDiscardPrompt = useCallback(async ()=>{
+        const { current: currentEntity } = entityRef;
+        const { current: originalEntity } = originalEntityRef;
+        let resolver;
+        const save = async ()=>{
+            await submitChanges();
+            closeDialog();
+            resolver?.("saved");
+        };
+        const discard = ()=>{
+            closeDialog();
+            resolver?.("discarded");
+        };
+        requestAnimationFrame(()=>{
+            showDialog(/*#__PURE__*/ jsx(UnsavedChangesReport, {
+                entity: originalEntity,
+                editedEntity: currentEntity
+            }), "Unsaved Changes", [
+                /*#__PURE__*/ jsx(Button, {
+                    onClick: discard,
+                    children: "Discard Changes"
+                }, "cancel"),
+                /*#__PURE__*/ jsx(Button, {
+                    onClick: save,
+                    children: "Save Changes"
+                }, "submit")
+            ], true);
+        });
+        return new Promise((resolve)=>{
+            resolver = resolve;
+        });
+    }, [
+        closeDialog,
+        showDialog,
+        submitChanges
+    ]);
+    useMemo(async ()=>{
+        if (dataSource) {
+            if (false === formEditStateRef.current.isClean) await showSaveOrDiscardPrompt();
+            currentDataSource.current = dataSource;
+            originalEntityRef.current = void 0;
+            const columnMap = buildColumnMap(dataSource.columns);
+            dataSource?.subscribe({
+                range: Range(0, 1)
+            }, (message)=>{
+                if (messageHasDataRows(message)) {
+                    const [row] = message.rows;
+                    if (row) {
+                        const entity = dataSourceRowToEntity(row, columnMap);
+                        if (void 0 === originalEntityRef.current) {
+                            originalEntityRef.current = entity;
+                            setEntity(entity);
+                        }
+                        const { editedFields } = buildFormEditState(entityRef.current, entity);
+                        if (1 === editedFields.length) setEntity(entity);
+                    }
+                }
+            });
+        }
+    }, [
+        dataSource,
+        setEntity,
+        showSaveOrDiscardPrompt
+    ]);
+    const setValidationState = useCallback((state)=>{
+        validationStateRef.current = state;
+        forceUpdate({});
+    }, []);
+    const handleFieldCommit = useCallback(async (_, value)=>{
+        const { current: fieldName } = focusedFieldRef;
+        const dataDescriptor = find(formFieldDescriptors, fieldName);
+        const { current: state } = validationStateRef;
+        const newState = nextValidationState(state, dataDescriptor, value);
+        if (newState !== state) setValidationState(newState);
+        if (newState.ok && dataSource?.tableSchema) {
+            const { key } = dataSource.tableSchema;
+            const keyValue = entity?.[key];
+            const response = await dataSource.rpcRequest?.({
+                params: {
+                    column: fieldName,
+                    data: value,
+                    key: keyValue
+                },
+                rpcName: "editCell",
+                type: "RPC_REQUEST"
+            });
+            console.log({
+                response
+            });
+        }
+    }, [
+        dataSource,
+        entity,
+        formFieldDescriptors,
+        setValidationState
+    ]);
+    const handleFieldChange = useCallback((evt)=>{
+        const { current: fieldName } = focusedFieldRef;
+        if (fieldName) {
+            const input = queryClosest(evt.target, "input", true);
+            const dataDescriptor = find(formFieldDescriptors, fieldName);
+            const value = input.value;
+            const { current: state } = validationStateRef;
+            const newState = nextValidationState(state, dataDescriptor, value);
+            if (newState !== state) setValidationState(newState);
+            setEntity({
+                ...entity,
+                [fieldName]: value
+            });
+        }
+    }, [
+        entity,
+        formFieldDescriptors,
+        setEntity,
+        setValidationState
+    ]);
+    const handleFormSubmit = useCallback(async ()=>{
+        submitChanges();
+        setFormEditState(CLEAN_FORM);
+        originalEntityRef.current = entity;
+        onSubmit?.();
+        forceUpdate({});
+    }, [
+        entity,
+        onSubmit,
+        setFormEditState,
+        submitChanges
+    ]);
+    const handleFormCancel = useCallback(async ()=>{
+        setFormEditState(CLEAN_FORM);
+        setValidationState(CLEAN_VALIDATION);
+        setEntity(originalEntityRef.current);
+    }, [
+        setEntity,
+        setFormEditState,
+        setValidationState
+    ]);
+    const handleFocus = useCallback((evt)=>{
+        if (formFieldsContainerRef.current?.contains(evt.target)) {
+            const fieldName = getField(evt.target);
+            if (fieldName) {
+                if (fieldName) focusedFieldRef.current = fieldName;
+            }
+        }
+    }, []);
+    const { current: { ok, messages: errorMessages } } = validationStateRef;
+    const { current: { isClean, editedFields } } = formEditStateRef;
+    return {
+        editedFields,
+        editEntity: entity,
+        errorMessages,
+        formFieldsContainerRef,
+        isClean,
+        ok,
+        onCancel: handleFormCancel,
+        onChange: handleFieldChange,
+        onCommit: handleFieldCommit,
+        onFocus: handleFocus,
+        onSubmit: handleFormSubmit
+    };
+};
+export { useEditForm };