reactaform 1.8.8 → 1.8.91

package/README.full.md

@@ -276,11 +276,36 @@ ReactaForm supports both field-level and form-level validation.
 ---
 
 ## Submission Handler
-Since ReactaForm is a dynamic form system, it provides a submission handler mechanism that allows you to define and plug in custom submission logic, such as validation, data processing, or API calls.
+
+ReactaForm provide two ways for submission process:
+
+- Direct submission callback in ReactaForm props
+- Since ReactaForm is a dynamic form system, it provides a registration submission mechanism that allows you to define and plug in custom submission logic. This can provide you flexible submission process for different submission logics.
+
+Note: In bubmission proces, onSubmit callback will be used if it is provided. Otherwise if submissionHandler in defintion is spcified, the registration handler will be invoked.
 
 **How It Works**
 
-Submission handling is configured in two steps:
+### Direct submission callback
+
+```ts
+async function submitFunction(definition, instanceName, valuesMap, t) => {
+  // send valuesMap to your API
+  const res = await fetch('/api/save', { method: 'POST', body: JSON.stringify(valuesMap), headers: { 'Content-Type': 'application/json' } });
+  if (!res.ok) return [t('Server error while submitting form')];
+  return undefined; // returning undefined (or falsy) means success
+});
+```
+
+Then in your app, when call ReactaForm, pass submitFunction to onSubmit:
+```ts
+  <ReactaForm
+    definition={userDefintion}
+    onSubmit= {submitFunction}
+  />
+```
+
+### Submission registration handling is configured in two steps:
 
 1. Define and Register a Submission Handler
 
@@ -346,30 +371,21 @@ Status Legend:
 - 🔵 Logical operators (AND / OR / NOT)
 - 🔵 Multi-field conditions
 - 🔵 Expression-based rules
-- 🔵 Nested condition groups
-- 🔵 Cross-group conditional logic
-- 🔵 Conditional validation rules
-- 🔵 Conditional default values
 
 ### Layout & Structure
+- 🟢 Collapsible sections - Group
 - 🔵 Multi-step / wizard forms
 - 🔵 Tabbed layouts
 - 🔵 Navigation sections / anchors
-- 🔵 Collapsible sections
-- 🔵 Reusable layout templates
-- 🔵 Responsive layout rules
 - 🔵 Grid & column layouts
-- 🟡 Layout-aware conditional logic
 
 ### Visual Builders
 - 🟢 Drag-and-drop form builder
 - 🔵 Advanced conditional logic editor
 - 🔵 Validation rule designer
 - 🔵 Submission workflow editor
-- 🔵 Layout editor (tabs, steps, groups)
-- 🔵 Live schema diff & change preview
+- 🔵 Layout editor (nav, tabs, steps, groups)
 - 🔵 Schema version history & rollback
-- 🔵 Import / export schema packs
 - 🟡 Builder extensibility API
 
 ### Theme System
@@ -378,11 +394,8 @@ Status Legend:
 - 🟢 Per-form theme customization
 - 🔵 Visual theme builder
 - 🔵 CSS variable editor
-- 🔵 Light / dark theme generator
-- 🔵 Live theme preview across field types
 - 🔵 Exportable & versioned theme packages
 - 🔵 Tailwind-compatible themes
-- 🟡 Theme inheritance & overrides
 
 ### Plugin System
 - 🟢 Component registry
@@ -392,10 +405,6 @@ Status Legend:
 - 🔵 Custom field plugin builder
 - 🔵 Validator plugin builder
 - 🔵 Submission handler plugins
-- 🔵 Plugin metadata & versioning
-- 🔵 Plugin dependency management
-- 🟡 One-click plugin export
-- 🟡 Plugin compatibility checks
 
 Internationalization (i18n)
 
@@ -406,7 +415,6 @@ Current: built-in i18n with per-form dictionaries
 - 🔵 Translation key discovery
 - 🔵 Missing translation detection
 - 🔵 Locale fallback strategies
-- 🟡 RTL layout support
 - 🟡 Async translation loaders
 
 ### Ecosystem & Marketplace

package/dist/components/ReactaForm.d.ts

@@ -10,6 +10,7 @@ import type { ReactaFormProps } from "../core/reactaFormTypes";
  * @param {string} [props.theme] - Theme name ('light' or 'dark')
  * @param {React.CSSProperties} [props.style] - Inline styles
  * @param {FieldValidationMode} [props.fieldValidationMode] - Validation timing mode ('realTime' or 'onSubmission')
+ * @param {boolean} [props.displayInstanceName] - Whether to display the instance name
  */
 declare const ReactaForm: React.FC<ReactaFormProps>;
 export default ReactaForm;

package/dist/components/ReactaFormProvider.d.ts

@@ -11,7 +11,8 @@ import '../core/reactaform.css';
  * @param {string} [props.defaultLocalizeName] - Name of custom localization file
  * @param {FieldValidationMode} [props.defaultFieldValidationMode='realTime'] - Validation timing mode
  * @param {string} [props.className='reactaform-container'] - CSS class name for the container
+ * @param {boolean} [props.displayInstanceName] - Whether to display the instance name
  */
-export declare const ReactaFormProvider: ({ children, definitionName, defaultStyle, defaultLanguage, defaultTheme, defaultLocalizeName, defaultFieldValidationMode, className, }: ReactaFormProviderProps & {
+export declare const ReactaFormProvider: ({ children, definitionName, defaultStyle, defaultLanguage, defaultTheme, defaultLocalizeName, defaultFieldValidationMode, className, defaultDisplayInstanceName }: ReactaFormProviderProps & {
     defaultFieldValidationMode?: FieldValidationMode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ReactaFormRenderer.d.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
-import type { ReactaDefinition, ReactaInstance } from "../core/reactaFormTypes";
+import type { ReactaDefinition, ReactaInstance, FormSubmissionHandler, FormValidationHandler } from "../core/reactaFormTypes";
 export interface ReactaFormRendererProps {
     definition: ReactaDefinition;
     instance: ReactaInstance;
+    onSubmit?: FormSubmissionHandler;
+    onValidation?: FormValidationHandler;
     chunkSize?: number;
     chunkDelay?: number;
 }

package/dist/core/reactaFormTypes.d.ts

@@ -71,13 +71,16 @@ export interface ReactaFormProps {
     theme?: string;
     style?: React.CSSProperties;
     fieldValidationMode?: FieldValidationMode;
+    displayInstanceName?: boolean;
+    onSubmit?: FormSubmissionHandler;
+    onValidation?: FormValidationHandler;
 }
 export type TranslationFunction = (text: string, ...args: unknown[]) => string;
 /** Validation mode controls where validation is performed. */
 export type FieldValidationMode = 'realTime' | 'onSubmission';
 export type FieldCustomValidationHandler = (fieldName: string, value: FieldValueType | unknown, t: TranslationFunction) => string | undefined;
 export type FieldTypeValidationHandler = (field: DefinitionPropertyField, input: FieldValueType, t: TranslationFunction) => string | null;
-export type FormValidationHandler = (valuesMap: Record<string, FieldValueType | unknown>, t: TranslationFunction) => string[] | Promise<string[] | undefined>;
+export type FormValidationHandler = (valuesMap: Record<string, FieldValueType | unknown>, t: TranslationFunction) => string[] | Promise<string[] | undefined> | undefined;
 export type FormSubmissionHandler = (definition: ReactaDefinition, instanceName: string | null, valuesMap: Record<string, FieldValueType | unknown>, t: TranslationFunction) => string[] | undefined | Promise<string[] | undefined>;
 export type InputOnChange<T> = (value: T | string) => void;
 export interface BaseInputProps<TValue = unknown, TField extends DefinitionPropertyField = DefinitionPropertyField> {
@@ -99,6 +102,7 @@ export type ReactaFormContextType = {
     fieldStyle: Record<string, unknown>;
     t: TranslationFunction;
     fieldValidationMode?: FieldValidationMode;
+    displayInstanceName?: boolean;
 };
 export type ReactaFormProviderProps = {
     children: ReactNode;
@@ -109,6 +113,7 @@ export type ReactaFormProviderProps = {
     defaultLocalizeName?: string;
     defaultFieldValidationMode?: FieldValidationMode;
     className?: string;
+    defaultDisplayInstanceName?: boolean;
 };
 export type TranslationMap = Record<string, string>;
 export type TranslationCache = Map<string, TranslationMap>;

package/dist/core/submitForm.d.ts

@@ -1,9 +1,9 @@
-import type { ReactaDefinition, FieldValueType, ReactaInstance, TranslationFunction } from "./reactaFormTypes";
+import type { ReactaDefinition, FieldValueType, ReactaInstance, TranslationFunction, FormSubmissionHandler, FormValidationHandler } from "./reactaFormTypes";
 export interface SubmitResult {
     success: boolean;
     message: string;
     data?: Record<string, unknown>;
     errors?: string[];
 }
-export declare function submitForm(definition: ReactaDefinition, instance: ReactaInstance | null, valuesMap: Record<string, FieldValueType | unknown>, t: TranslationFunction, errors: Record<string, string>): Promise<SubmitResult>;
+export declare function submitForm(definition: ReactaDefinition, instance: ReactaInstance | null, valuesMap: Record<string, FieldValueType | unknown>, t: TranslationFunction, errors: Record<string, string>, onSubmit?: FormSubmissionHandler | undefined, onValidation?: FormValidationHandler | undefined): Promise<SubmitResult>;
 export default submitForm;