@bolttech/form-engine 3.1.2-beta.4 → 3.2.0-beta.0

package/README.md

@@ -422,33 +422,40 @@ After configuring the provider, `<Form />` components lets you render a form
 
 ### Props
 
-| Prop                                | Type                                                                               | Description                                                                                                                                 |
-| ----------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| [DEPRECIATED] disable               | boolean                                                                            | Disable all form inputs. It will use the default htm disable attribute                                                                      |
+| Prop                                | Type                                                                               | Description |
+| ----------------------------------- | ---------------------------------------------------------------------------------- | ------------ |
+| [DEPRECIATED] disable               | boolean                                                                            | Disable all form inputs. It will use the default htm disable attribute |
 | [DEPRECIATED] group                 | string                                                                             | Form group identifier. Used be able to group several forms and then get data with useGroupForm. One will be generated as default if omitted |
-| index                               | string                                                                             | Form identified. One will be generated as default if omitted                                                                                |
-| [DEPRECIATED] hooks                 | THooks                                                                             | Provide functions to run on certain life-cycle events                                                                                       |
-| iVars                               | Object                                                                             | One object with internal variables to be used in form with data binding                                                                     |
-| initialValues                       | Object                                                                             | Object with form initial values that will map to a field.                                                                                   |
-| Schema                              | TSchema                                                                            | Form Schema                                                                                                                                 |
-| [DEPRECIATED] autoComplete          | string                                                                             | HTML autocomplete                                                                                                                           |
-| className                           | string                                                                             | Allow to style form                                                                                                                         |
-| onSubmit                            | callback(TFormValues)                                                              | Will be called when there is a submit action in the form                                                                                    |
-| onData                              | callback(TFormData)                                                                | Will be called when any field data change. The arguments will let you know which field changed and the field configuration                  |
-| onBlur                              | callback(TFieldEvent)                                                              | Will be called when any field blured. The arguments will let you know which field blured and the field configuration                        |
-| onFocus                             | callback(TFieldEvent)                                                              | Will be called when any field focused change. The arguments will let you know which field focused and the field configuration               |
-| onMount                             | callback(TFormValues,TComponent, TField)                                           | Will be called when some field mounted. Its called with the field that information that mounted.                                            |
-| [DEPRECIATED] onStep                | callback(TFormValues)                                                              | Called when a form step changed                                                                                                             |
-| [DEPRECIATED] onLog                 | callback(TLoggingEvent)                                                            | Called on each log, if the logging is enabled                                                                                               |
-| [DEPRECIATED] onScopeChange         | onScopeChange?(scope: TScope, namespace: string, key: string): void;               | Called everything scope change with the changing information (namespace and key) and the changed scope                                      |
-| onClick                             | onClick(TFieldEvent)                                                               | Callback function that runs on each component click                                                                                         |
-| onApiResponse                       | onApiResponse(TFieldEvent)                                                         | Callback function that runs on each component after api call.                                                                               |
-| [DEPRECIATED] onFieldRehydrate      | onFieldRehydrate?(values: TFormValues, component: TComponent, field: TField): void | This callback is called whenever some form field was rehydrated                                                                             |
-| [DEPRECIATED] renderLoading         | renderLoading?(): ReactElement;                                                    | Component to render while the schema has not rendered                                                                                       |
-| [DEPRECIATED] onFormMount           | onFormMount?(values: TFormValues): void;                                           | Called when the form finished mounted                                                                                                       |
-| [DEPRECIATED] formattedDataDefaults | Object                                                                             | Some default data to fields when they are undefined                                                                                         |
-| [DEPRECIATED] submitOnValidOnly     | boolean                                                                            | Boolean indicating if form can be submitted even if it is invalid                                                                           |
-| [DEPRECIATED] renderFieldWrapper    | renderFieldWrapper(component: TComponent, children: ReactElement[])                | Function that allows to insert a wrapper in place of a component or wrapping the component                                                  |
+| index                               | string                                                                             | Form identified. One will be generated as default if omitted |
+| [DEPRECIATED] hooks                 | THooks                                                                             | Provide functions to run on certain life-cycle events |
+| iVars                               | Object                                                                             | One object with internal variables to be used in form with data binding |
+| initialValues                       | Object                                                                             | Object with form initial values that will map to a field. |
+| Schema                              | TSchema                                                                            | Form Schema |
+| [DEPRECIATED] autoComplete          | string                                                                             | HTML autocomplete |
+| className                           | string                                                                             | Allow to style form |
+| onSubmit                            | callback(TFormValues)                                                              | Will be called when there is a submit action in the form |
+| onData                              | callback(TFormData)                                                                | Will be called when any field data change. The arguments will let you know which field changed and the field configuration |
+| onBlur                              | callback(TFieldEvent)                                                              | Will be called when any field blured. The arguments will let you know which field blured and the field configuration |
+| onFocus                             | callback(TFieldEvent)                                                              | Will be called when any field focused change. The arguments will let you know which field focused and the field configuration |
+| onMount                             | callback(TFormValues,TComponent, TField)                                           | Will be called when some field mounted. Its called with the field that information that mounted. |
+| [DEPRECIATED] onStep                | callback(TFormValues)                                                              | Called when a form step changed |
+| [DEPRECIATED] onLog                 | callback(TLoggingEvent)                                                            | Called on each log, if the logging is enabled |
+| [DEPRECIATED] onScopeChange         | onScopeChange?(scope: TScope, namespace: string, key: string): void;               | Called everything scope change with the changing information (namespace and key) and the changed scope |
+| onClick                             | onClick(TFieldEvent)                                                               | Callback function that runs on each component click |
+| onApiResponse                       | onApiResponse(TFieldEvent)                                                         | Callback function that runs on each component after api call. |
+| [DEPRECIATED] onFieldRehydrate      | onFieldRehydrate?(values: TFormValues, component: TComponent, field: TField): void | This callback is called whenever some form field was rehydrated |
+| [DEPRECIATED] renderLoading         | renderLoading?(): ReactElement;                                                    | Component to render while the schema has not rendered |
+| [DEPRECIATED] onFormMount           | onFormMount?(values: TFormValues): void;                                           | Called when the form finished mounted |
+| [DEPRECIATED] formattedDataDefaults | Object                                                                             | Some default data to fields when they are undefined |
+| [DEPRECIATED] submitOnValidOnly     | boolean                                                                            | Boolean indicating if form can be submitted even if it is invalid |
+| [DEPRECIATED] renderFieldWrapper    | renderFieldWrapper(component: TComponent, children: ReactElement[])                | Function that allows to insert a wrapper in place of a component or wrapping the component |
+| onApiRequest                       | onApiRequest(TFieldEvent)                                                           | Callback function that runs when an api call starts |
+| onChange                       | onFieldChange(TFieldEvent)                                                              | Callback function that runs on each component value changes
+| onKeyDown                       | onKeyDown(TFieldEvent)                                                                 | Callback function that runs on each key down event |
+| onKeyUp                       | onKeyUp(TFieldEvent)                                                                     | Callback function that runs on each key up event |
+| onCleared                       | onCleared(TFieldEvent)                                                                 | Callback function that runs on a value that has been changed by resetValues event |
+| onUnmount                       | onUnmount(TFieldEvent)                                                                 | Callback function that runs when a field is unmounted or hidden by a visibility condition rule (use with caution) |
+
 
 ### Example
 
@@ -914,7 +921,7 @@ resetValues lets you change input values with the same rules as validations
 | events                                                                                        | Partial<TEvents>[]   | events that will trigger the validation                                            |
 | resettledValue                                                                                | unknown[] or unknown | value or values to be set on the specified fields                                  |
 
-If the event occurs and all the validations returns `true` the resettled value will trigger and the `fields` specified will be filled with the `resettledValue` values
+if the event occurs and all the validations returns `true` the resettled value will trigger and the `fields` specified will be filled with the `resettledValue` values, also, the event ON_FIELD_CLEARED is triggered on the fields that gets the resettled value instead of ON_FIELD_CHANGE.
 
 ### from v2 to v3
 
@@ -1134,9 +1141,12 @@ The avalialbe callback methods are:
 | onFocus       | TFieldEvent            | same as above                                                        |
 | onKeyDown     | TFieldEvent            | same as above                                                        |
 | onKeyUp       | TFieldEvent            | same as above                                                        |
-| onMount       | TFieldEvent            | same as above                                                        |
-| onApiResponse | TFieldEvent            | same as above                                                        |
 | onClick       | TFieldEvent            | same as above                                                        |
+| onApiResponse | TFieldEvent            | event occuring when a api response is ready                          |
+| onApiRequest  | TFieldEvent            | event occuring when a api resquest is started                        |
+| onMount       | TFieldEvent            | event occuring when a field is mounted or set visible                |
+| onUnmount     | TFieldEvent            | event occuring when a field is unmounted or hidden                   |
+| onCleared     | TFieldEvent            | event occuring when the field value is set with resetValues          |
 | onFormMount   | TFormValues<T>         | event occuring on form mount                                         |
 | onData        | TFormData<T>           | event occuring when a value is changing via input or logic           |
 | onSubmit      | TFormValues<T>         | event occuring when pressing the submit button defined on the form   |

package/index.esm.js

@@ -2111,7 +2111,8 @@ const eventsMapping = {
   ON_API_FIELD_REQUEST: 'onApiRequest',
   ON_API_FIELD_RESPONSE: 'onApiResponse',
   ON_FIELD_CLICK: 'onClick',
-  ON_FIELD_CLEARED: 'onFieldCleared'
+  ON_FIELD_CLEARED: 'onCleared',
+  ON_FIELD_UNMOUNT: 'onUnmount'
 };
 const uniqueIdGen = () => {
   const timestamp = +new Date();
@@ -2129,15 +2130,56 @@ const uniqueIdGen = () => {
 function useForm(_a, deps) {
   var {
       id,
+      index,
       onData,
       onSubmit,
       onFormMount,
-      onValid
+      onValid,
+      iVars,
+      initialValues,
+      stopEventsOnSubmit
     } = _a,
-    rest = __rest(_a, ["id", "onData", "onSubmit", "onFormMount", "onValid"]);
+    rest = __rest(_a, ["id", "index", "onData", "onSubmit", "onFormMount", "onValid", "iVars", "initialValues", "stopEventsOnSubmit"]);
   const {
     formGroupInstance
   } = useFormGroupContext({});
+  const useFormIndex = index || id;
+  if (!useFormIndex) {
+    throw new Error('useForm hook must have an id or an index');
+  }
+  useEffect(() => {
+    if (!formGroupInstance.forms.has(useFormIndex)) {
+      console.log('failed to set stopEventsOnSubmit due to no form instance');
+      return;
+    }
+    if (typeof stopEventsOnSubmit === 'boolean') {
+      formGroupInstance.getForm({
+        key: useFormIndex
+      }).stopEventsOnSubmit = stopEventsOnSubmit;
+    }
+  }, []);
+  /**
+   * iVars change tracker to update iVars onto form instance
+   */
+  useEffect(() => {
+    if (!formGroupInstance.forms.has(useFormIndex)) {
+      console.log('failed to add iVars due to no form instance');
+      return;
+    }
+    if (iVars) formGroupInstance.forms.get(useFormIndex).iVars = iVars;
+    // if (iVars) formInstance.current.iVars = iVars;
+  }, [iVars]);
+  /**
+   * initialValues setter for async initialValues
+   */
+  useEffect(() => {
+    if (!formGroupInstance.forms.has(useFormIndex)) {
+      console.log('failed to add initialValues due to no form instance');
+      return;
+    }
+    if (initialValues) formGroupInstance.forms.get(useFormIndex).initialValues = initialValues;
+    // if (initialValues) formInstance.current.initialValues = initialValues;
+  }, [initialValues]);
   /**
    * reference to store all updated callback functions rerendered by props change
    */
@@ -2174,7 +2216,7 @@ function useForm(_a, deps) {
       }
     };
     const sub = (_a = formGroupInstance.getForm({
-      key: id
+      key: useFormIndex
     })) === null || _a === void 0 ? void 0 : _a.subscribeFieldEvent({
       callback
     });
@@ -2185,7 +2227,7 @@ function useForm(_a, deps) {
       }
     };
     const mountSub = (_b = formGroupInstance.getForm({
-      key: id
+      key: useFormIndex
     })) === null || _b === void 0 ? void 0 : _b.subscribeOnMount(mountCallback);
     const dataCallback = payload => {
       var _a, _b;
@@ -2194,7 +2236,7 @@ function useForm(_a, deps) {
       }
     };
     const dataSub = (_c = formGroupInstance.getForm({
-      key: id
+      key: useFormIndex
     })) === null || _c === void 0 ? void 0 : _c.subscribeData(dataCallback);
     const validationCallback = payload => {
       if (formValuesCallbackRefs.current.onValid) {
@@ -2202,7 +2244,7 @@ function useForm(_a, deps) {
       }
     };
     const validSub = (_d = formGroupInstance.getForm({
-      key: id
+      key: useFormIndex
     })) === null || _d === void 0 ? void 0 : _d.subscribeFormValidation(validationCallback);
     const submitCallback = payload => {
       var _a, _b;
@@ -2211,7 +2253,7 @@ function useForm(_a, deps) {
       }
     };
     const submitSub = (_e = formGroupInstance.getForm({
-      key: id
+      key: useFormIndex
     })) === null || _e === void 0 ? void 0 : _e.subscribeOnSubmit(submitCallback);
     return () => {
       sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
@@ -2249,6 +2291,7 @@ function Form({
   onKeyUp,
   onMount,
   onValid,
+  stopEventsOnSubmit,
   children
 }) {
   const {
@@ -2264,13 +2307,13 @@ function Form({
    * effect to create the form instance and notify the recursive generated fields of it's mounted status
    */
   useEffect(() => {
-    if (mountedRef.current) return;
+    if (mountedRef.current || formGroupInstance.getForm({
+      key: schemaIndex
+    })) return;
     formGroupInstance.addForm({
       key: schemaIndex,
       params: {
         schema,
-        initialValues: initialValues || (schema === null || schema === void 0 ? void 0 : schema.initialValues),
-        iVars: iVars || (schema === null || schema === void 0 ? void 0 : schema.iVars),
         action: action || (schema === null || schema === void 0 ? void 0 : schema.action),
         method: method || (schema === null || schema === void 0 ? void 0 : schema.method),
         index: schemaIndex,
@@ -2282,33 +2325,14 @@ function Form({
     mountedRef.current = true;
     // }
   }, []);
-  /**
-   * iVars change tracker to update iVars onto form instance
-   */
-  useEffect(() => {
-    if (!formGroupInstance.forms.has(schemaIndex)) {
-      console.log('failed to add iVars due to no form instance');
-      return;
-    }
-    if (iVars && mounted) formGroupInstance.forms.get(schemaIndex).iVars = iVars;
-    // if (iVars) formInstance.current.iVars = iVars;
-  }, [iVars, mounted]);
-  /**
-   * initialValues setter for async initialValues
-   */
-  useEffect(() => {
-    if (!formGroupInstance.forms.has(schemaIndex)) {
-      console.log('failed to add initialValues due to no form instance');
-      return;
-    }
-    if (initialValues && mounted) formGroupInstance.forms.get(schemaIndex).initialValues = initialValues;
-    // if (initialValues) formInstance.current.initialValues = initialValues;
-  }, [initialValues, mounted]);
   /**
    * hook usage to keep event bindings updated on callback functions passed as props
    */
   useForm({
-    id: schemaIndex,
+    index: schemaIndex,
+    initialValues,
+    iVars,
+    stopEventsOnSubmit,
     onApiResponse,
     onBlur,
     onChange,
@@ -2436,7 +2460,7 @@ const FieldWrapper = ({
   visibility,
   component
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const localContext = useFormGroupContext({});
   const fieldMapper = mapper || ((_a = localContext.mappers) === null || _a === void 0 ? void 0 : _a.find(mapper => mapper.componentName === component));
   /**
@@ -2550,24 +2574,12 @@ const FieldWrapper = ({
           margin: '0px'
         },
         children: ["name:", name]
-      }), jsxs("b", {
-        style: {
-          padding: '0px',
-          margin: '0px'
-        },
-        children: ["order:", (_c = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.originalSchema) === null || _c === void 0 ? void 0 : _c.order]
-      }), jsxs("b", {
-        style: {
-          padding: '0px',
-          margin: '0px'
-        },
-        children: ["path:", fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.path]
       }), jsx("br", {}), jsx("hr", {})]
     }), jsx(FieldWrapperComponentRender, {
       props: Object.assign(Object.assign(Object.assign(Object.assign({}, mapProps), state.props), state.errors), valueState),
       fieldInstance: fieldInstance,
       mapper: fieldMapper,
-      children: children ? children : ((_d = state === null || state === void 0 ? void 0 : state.props) === null || _d === void 0 ? void 0 : _d.children) ? state === null || state === void 0 ? void 0 : state.props.children : null
+      children: children ? children : ((_c = state === null || state === void 0 ? void 0 : state.props) === null || _c === void 0 ? void 0 : _c.children) ? state === null || state === void 0 ? void 0 : state.props.children : null
     })]
   }) : jsx(Fragment, {});
 };
@@ -2808,7 +2820,6 @@ function useFormGroup({
   return;
 }
 
-const REPEATER_FOOTER_ID = 'repeaterFooter';
 /**
  * Adapter do manage repeated list elements on form
  *
@@ -2832,6 +2843,7 @@ const AsFormFieldRepeater = ({
   const [elements, setElements] = useState(typeof existingElements === 'object' && existingElements !== null ? Object.keys(existingElements).map(() => uniqueIdGen()) : typeof initialElements === 'number' ? Array.from(Array(initialElements), () => uniqueIdGen()) : []);
   const mountedRef = useRef(false);
   const prevElements = useRef(0);
+  const REPEATER_FOOTER_ID = useMemo(() => uniqueIdGen(), []);
   const listeningElements = useMemo(() => {
     return [...elements, REPEATER_FOOTER_ID];
   }, [elements]);

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.1.2-beta.4",
+  "version": "3.2.0-beta.0",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "1.0.2-beta.2",
+    "@bolttech/form-engine-core": "1.1.0-beta.0",
+    "@storybook/blocks": "7.6.20",
     "react": "18.2.0"
   },
   "peerDependencies": {}

package/src/components/AsFormField/AsFormField.type.d.ts

@@ -3,7 +3,7 @@ import { ElementType, PropsWithChildren } from 'react';
 /**
  * AsFormField props, inherits all schema field implementation except the children
  * property and has mappers property to pass a custom component, that will be a ReactNode
- * @see {@link IComponentSchemaWithMapper}
+ * @see {@link IComponentSchemaAsFormField}
  */
 type TAsFormFieldProps = PropsWithChildren<Omit<IComponentSchemaAsFormField<ElementType>, 'children'>>;
 export type { TAsFormFieldProps };

package/src/components/AsFormFieldBuilder/AsFormFieldBuilder.type.d.ts

@@ -12,9 +12,9 @@ import { OneOf } from '@bolttech/form-engine-core/src/types/utility';
  * @see {@link TMapper}
  * @see {@link IComponentSchema}
  * @see {@link TFieldWrapper}
+ * @interface
  */
 type TAsFormFieldBuilderProps = PropsWithChildren<Omit<IComponentSchema, 'component' | 'children' | 'name'> & Required<TFieldWrapper> & {
-    visibility?: boolean;
     onSelected?: (data: TFieldEvent) => void;
     formMounted?: boolean;
 } & OneOf<{

package/src/components/Form/Form.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { TFormProps } from './Form.type';
 /**
  *
  * @param {TFormProps} param form properties initializor
  * @returns {ReactElement}
  */
-declare function Form<T>({ schema, index, initialValues, iVars, action, method, config, onSubmit, onFormMount, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, onValid, children, }: TFormProps<T>): ReactElement;
+declare function Form<T>({ schema, index, initialValues, iVars, action, method, config, onSubmit, onFormMount, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, onValid, stopEventsOnSubmit, children, }: PropsWithChildren<TFormProps<T>>): ReactElement;
 export default Form;

package/src/components/Form/Form.type.d.ts

@@ -1,11 +1,11 @@
 import { TFormEntry } from '@bolttech/form-engine-core';
-import { PropsWithChildren } from 'react';
 import { TEventsCallbackProps } from '../../types';
 /**
  * Form props, inherits the form instance constructor implementation except the mapper
  * along with all event callback register props shared with other implementations
  * @see {@link TFormEntry}
  * @see {@link TEventsCallbackProps}
+ * @interface
  */
-type TFormProps<T> = PropsWithChildren<Omit<TFormEntry, 'mappers'> & TEventsCallbackProps<T>>;
+type TFormProps<T> = Omit<TFormEntry, 'mappers' | 'dataSubject$' | 'formValidSubject$' | 'submitSubject$'> & TEventsCallbackProps<T>;
 export type { TFormProps };

package/src/context/FormGroupContext.type.d.ts

@@ -12,7 +12,27 @@ import { ElementType } from 'react';
  * @property {function(): void} printFormGroupInstance - Prints the form group instance.
  * @property {function(string[]): TFormValues} submitMultipleFormsByIndex - Submits multiple forms by their indexes and returns the form values.
  * @property {boolean} debugMode - Indicates if debug mode is active.
- * @property {boolean} active - Indicates if the form context is active.
+ * @property {boolean} active - Indicates if the form context is active (if the context provider is defined above).
+ *
+ * @example
+ * ```typescript
+ * import React from 'react';
+ * import { useFormGroupContext } from '@bolttech/form-engine';
+ *
+ * const FormComponent = (): React.ReactElement => {
+ *   const {
+ *     addForm,
+ *     removeForm,
+ *     getForm,
+ *     printFormGroupInstance,
+ *     submitMultipleFormsByIndex,
+ *     debugMode
+ *   } = useFormGroupContext();
+ *
+ *   // (...)
+ * };
+ * ```
+ *
  */
 type TFormContext = {
     addFormWithIndex: (index: string) => void;
@@ -39,6 +59,16 @@ type TFormContext = {
  *
  * @property {TMapper<ElementType>[]} [mappers] - Optional array of mappers for elements.
  * @property {boolean} [debugMode] - Optional flag indicating if debug mode should be enabled.
+ * @property {TSchemaFormConfig} config - Optional config settings for debounce times and client logging
+ *
+ * * @example
+ * ```tsx
+ * import { FormGroupContextProvider } from '@bolttech/form-engine';
+ *
+ * <FormGroupContextProvider mappers={mappers} debugMode={true}>
+ *   {children}
+ * </FormGroupContextProvider>
+ * ```
  */
 type TFormContextProvider = {
     mappers?: TMapper<ElementType>[];

package/src/helpers/helpers.d.ts

@@ -1,5 +1,4 @@
-import { TEvents } from '@bolttech/form-engine-core';
-import { TEventProps } from '../types';
+import { TEventProps, TEvents } from '@bolttech/form-engine-core';
 /**
  * events mapping to aid function callback binding
  */

package/src/hooks/useForm/useForm.d.ts

@@ -3,5 +3,5 @@ import { TUseFormProps } from './useForm.type';
 /**
  * Hook to register events callback functions
  */
-declare function useForm<T>({ id, onData, onSubmit, onFormMount, onValid, ...rest }: TUseFormProps<T>, deps?: React.DependencyList): void;
+declare function useForm<T>({ id, index, onData, onSubmit, onFormMount, onValid, iVars, initialValues, stopEventsOnSubmit, ...rest }: TUseFormProps<T>, deps?: React.DependencyList): void;
 export default useForm;

package/src/hooks/useForm/useForm.type.d.ts

@@ -1,12 +1,17 @@
+import { TFormEntry } from '@bolttech/form-engine-core';
 import { TEventsCallbackProps } from '../../types';
+import { OneOf } from '@bolttech/form-engine-core/src/types/utility';
 /**
  * Represents the properties for the useForm hook, including an ID and event callback properties.
  *
- * @property {string} id - The unique identifier for the form.
+ * @property {string} id - The unique identifier for the form. Deprecated, use 'index' instead
+ * @property {string} index - The unique identifier for the form.
  *
  * @see {@link TEventsCallbackProps}
+ * @interface
  */
-type TUseFormProps<T> = {
+type TUseFormProps<T> = Pick<TFormEntry, 'index' | 'initialValues' | 'iVars' | 'stopEventsOnSubmit'> & TEventsCallbackProps<T> & OneOf<{
     id: string;
-} & TEventsCallbackProps<T>;
+    index: string;
+}>;
 export type { TUseFormProps };

package/src/types/index.d.ts

@@ -1,4 +1,4 @@
-import { TFieldEvent, TFormValidationPayload, TFormValues } from '@bolttech/form-engine-core';
+import { TEventProps, TFieldEvent, TFormValidationPayload, TFormValues, TEventDataProps } from '@bolttech/form-engine-core';
 /**
  * Represents a field wrapper containing the name of the field and its index in the form.
  *
@@ -9,10 +9,6 @@ type TFieldWrapper = {
     name: string;
     formIndex: string;
 };
-/**
- * Represents the possible event properties for form fields callbacks.
- */
-type TEventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onApiRequest' | 'onClick' | 'onFieldCleared';
 /**
  * Represents the content inside onData payload action.
  */
@@ -21,12 +17,16 @@ type TFormData<T> = {
     data: TFormValues<T>;
 };
 /**
- * Represents a mapping of event properties to their corresponding callback functions.
+ *
+ * @property {(payload: TFormValues<T>) => void} onFormMount - triggered when form mounts
+ * @property {(payload: TFormValues<T>) => void} onData - triggered when any field change value
+ * @property {(payload: TFormValues<T>) => void} onSubmit - triggered when submit button is pressed
+ * @property {(payload: TFormValues<T>) => void} onValid - triggered when form valid status changes
+ * @interface
+ *
  */
-type TEventsCallbackProps<T> = Partial<Record<TEventProps, ((payload: TFieldEvent) => void) | null | undefined>> & {
-    onFormMount?: (payload: TFormValues<T>) => void;
-    onData?: (payload: TFormData<T>) => void;
-    onSubmit?: (payload: TFormValues<T>) => void;
-    onValid?: (payload: TFormValidationPayload) => void;
-};
-export { TFieldWrapper, TEventProps, TEventsCallbackProps, TFormData };
+type TEventsCallbackProps<T> = Partial<Record<TEventProps, ((payload: TFieldEvent) => void) | null | undefined>> & Partial<Record<Extract<TEventDataProps, 'onFormMount' | 'onSubmit'>, (payload: TFormValues<T>) => void>> & Partial<Record<Extract<TEventDataProps, 'onData'>, (payload: {
+    field: string;
+    data: TFormValues<T>;
+}) => void>> & Partial<Record<Extract<TEventDataProps, 'onValid'>, (payload: TFormValidationPayload) => void>>;
+export { TFieldWrapper, TEventsCallbackProps, TFormData };