@react-form-builder/core/dist/index-lite.d.ts

React JSON Schema Form Builder to create complex, validated, reusable forms with no deep React knowledge required

import { ComponentType } from 'react';
import { CSSProperties } from 'react';
import { ForwardedRef } from 'react';
import { JSX } from '@emotion/react/jsx-runtime';
import { ReactNode } from 'react';
import { SyntheticEvent } from 'react';

/**
 * Action Storage.
 * Used for add a new action, store information about it.
 */
declare type ActionData = {
    /**
     * The unique action key.
     */
    [KeySymbol]?: string;
    /**
     * The action name.
     */
    name: string;
    /**
     * The action type.
     */
    type: ActionType;
    /**
     * The action arguments.
     */
    args?: Arguments;
};

/**
 * Represents the definition of an action.
 */
declare class ActionDefinition {
    readonly func: Func;
    readonly body?: string | undefined;
    readonly params: ActionParameters;
    /**
     * Creates a new instance of the ActionDefinition class.
     * @param func the function of an action.
     * @param body the source code of the Action.
     * @param params the parameters of the Action.
     */
    constructor(func: Func, body?: string | undefined, params?: ActionParameters);
    /**
     * Creates an action from the function.
     * @param func the function of an action.
     * @param params the parameters of the Action.
     * @returns the new instance of the ActionDefinition class.
     */
    static functionalAction(func: Func, params?: ActionParameters): ActionDefinition;
    /**
     * Creates an action from the source code.
     * @param body the source code of the Action.
     * @param params the parameters of the Action.
     * @returns the new instance of the ActionDefinition class.
     */
    static sourceAction(body: string, params?: ActionParameters): ActionDefinition;
    /**
     * Correctly creates the {@link ActionDefinition} from deserialized data.
     * @param value the deserialized data.
     * @returns the ActionDefinition instance.
     */
    static createFromObject(value: any): ActionDefinition;
}

/**
 * Arguments passed to the event handler.
 */
declare class ActionEventArgs {
    #private;
    readonly type: string;
    readonly sender: ComponentData;
    readonly store: Store;
    readonly args: any[];
    readonly renderedProps: Record<string, any>;
    readonly cellInfo?: CellInfo | undefined;
    /**
     * The index of the component in the array, if the component is in the array.
     */
    readonly index?: number;
    /**
     * Creates arguments for the event handler.
     * @param type the event type.
     * @param sender the component that triggered the event.
     * @param store the form viewer settings.
     * @param args the event arguments.
     * @param renderedProps the component properties that were used to render the sender component.
     * @param cellInfo the information about the current table cell.
     */
    constructor(type: string, sender: ComponentData, store: Store, args: any[], renderedProps: Record<string, any>, cellInfo?: CellInfo | undefined);
    /**
     * @returns user-defined properties for the React component that override other properties of the component.
     */
    get userDefinedProps(): Record<string, any>;
    /**
     * Sets user-defined properties for the React component that override other properties of the component.
     * @param props the component properties.
     */
    setUserDefinedProps: (props?: Record<string, any>) => void;
    /**
     * @returns the event handled by the event handler.
     */
    get event(): SyntheticEvent | null;
    /**
     * @returns the first element of the event argument array, which is treated as a value.
     */
    get value(): any;
    /**
     * @returns the object for reading and changing form data.
     */
    get data(): Record<string, unknown>;
    /**
     * @returns the object to read and modify parent data (available for array elements).
     */
    get parentData(): Record<string, unknown> | undefined;
    /**
     * @returns the object to read and modify root form data.
     */
    get rootData(): Record<string, unknown>;
}

/**
 * Event handler function type.
 * @param e the action arguments.
 */
declare type ActionEventHandler = (e: ActionEventArgs) => void | Promise<void>;

/**
 * Action function type.
 * @param e the action arguments.
 * @param params the action parameters arguments.
 * @template T the type of action parameters.
 */
declare type ActionHandler<T> = (e: ActionEventArgs, params: {
    [k in keyof T]: any;
}) => void | Promise<void>;

/**
 * Represents a set of action parameters.
 */
declare type ActionParameters = Record<ParameterName, ParameterType>;

/**
 * The type of function that initializes an actions on a component. **Internal use only.**
 * @param props the component's property settings.
 * @param def the helper to create an action event handler.
 * @returns the Record with action event handlers.
 */
declare type ActionsInitializer = (props: ComponentStore['props'], def: DefineActionHelper) => Record<EventName, ActionEventHandler | ActionDefinition>;

/**
 * Action type.
 */
declare type ActionType = 'common' | 'code' | 'custom';

/**
 * Represents a set of action definitions.
 */
declare type ActionValues = Record<string, ActionDefinition>;

/**
 * It will be transformed in arguments before passing in action.
 */
declare type Arguments = Record<ParameterName, ArgumentValue>;

/**
 * The type of the argument value of the function.
 */
declare type ArgumentValue = PrimitiveArgumentValue | FunctionArgumentValue;

/**
 * The enumeration of bidirectional text layout types.
 */
declare enum BiDi {
    /**
     * Left to right.
     */
    LTR = "ltr",
    /**
     * Right to left.
     */
    RTL = "rtl"
}

/**
 * Value validation rules.
 */
declare type BoundValueSchema = {
    /**
     * Flag, if true then automatic validation of the value works, false otherwise.
     */
    autoValidate?: boolean;
    /**
     * The array of validation rule settings.
     */
    validations?: ValidationRuleSettings[];
};

/**
 * The information about a cell.
 */
declare type CellInfo = {
    /**
     * The data key.
     */
    dataKey?: DataKeyType;
    /**
     * The row index.
     */
    rowIndex?: number;
    /**
     * The row data.
     */
    rowData?: Record<DataKeyType, unknown>;
};

/**
 * This tree of elements contains the data required to display the component. It is synchronized with the ComponentStore tree.
 */
declare class ComponentData implements IFormData {
    #private;
    private _state;
    /**
     * The unique identifier.
     */
    readonly id: string;
    /**
     * The component settings.
     */
    readonly store: ComponentStore;
    /**
     * The component metadata.
     */
    readonly model: Model;
    /**
     * The field with the form data.
     */
    field?: Field;
    /**
     * The parent node in the component data tree.
     */
    parent?: ComponentData;
    /**
     * The child nodes in the component data tree.
     */
    children: ComponentData[];
    /**
     * User defined properties of the React component.
     */
    userDefinedProps?: Record<string, any>;
    /**
     * If true, then validation is in progress.
     */
    validating: boolean;
    /**
     * Specifies the root component for the data in the component tree. **Internal use only.**
     */
    dataRootProvider?: IDataRootProvider;
    /**
     * Specifies the index in the array if the component is in the component array.
     * This is not an index in a parent-child structure.
     */
    index?: number;
    /**
     * The state of the component. **Internal use only.
     */
    componentState: IComponentState;
    /**
     * The function for getting initial data. **Internal use only.**
     */
    getInitialData?: () => unknown;
    /**
     * The function for updating initial data. **Internal use only.**
     */
    setInitialData?: SetInitialDataFn;
    /**
     * Constructor.
     * @param componentStore the component settings.
     * @param model the component metadata for the form viewer.
     * @param childFactory the factory function that creates {@link ComponentData} instance.
     * @param getFormValidationResult the function that returns a form validation results.
     */
    constructor(componentStore: ComponentStore, model: Model, childFactory: (componentStore: ComponentStore) => ComponentData, getFormValidationResult?: () => Promise<Record<string, string>[]>);
    /**
     * Sets the new parent for this node.
     * @param newParent the new parent.
     */
    setParent(newParent: ComponentData): void;
    /**
     * Inserts the given node after this node.
     * @param inserted the node to insert.
     */
    insertAfterMe(inserted: ComponentData): void;
    /**
     * Inserts the given node before this node.
     * @param inserted the node to insert.
     */
    insertBeforeMe(inserted: ComponentData): void;
    /**
     * @inheritDoc
     */
    get state(): Record<string, unknown>;
    /**
     * @returns the root component for the data in the component tree.
     */
    get dataRoot(): ComponentData;
    /**
     * @returns the initial data.
     */
    get initialData(): unknown;
    /**
     * Updates the initial data. **Internal use only.**
     * @param key the initial data key.
     * @param value the initial data value.
     */
    updateInitialData(key: string | number, value: unknown): void;
    /**
     * @returns the key of this node (same as the key of the ComponentStore).
     */
    get key(): string;
    /**
     * @returns the ComponentDataEvents object.
     */
    get events(): ComponentDataEvents;
    /**
     * Find the node with the given key.
     * @param key the key to find.
     * @returns the node or undefined if not found.
     */
    findByKey(key: string): ComponentData | undefined;
    /**
     * Assigns unique keys to the items in the tree.
     * @param root the root of the tree to unify keys. Defaults to the root of this tree.
     * @returns the map of new keys to old keys.
     */
    unifyKeys(root: ComponentData): Map<string, string>;
    /**
     * Assigns unique keys to the items in the tree.
     */
    unifyTree(): void;
    /**
     * @returns all the fields in the tree as a map. Starts from this node.
     */
    get fields(): Map<string, Field>;
    /**
     * @returns an array of all component fields, including non-unique data keys.
     */
    get allComponentFields(): ComponentField[];
    /**
     * @returns an array of all fields, including non-unique data keys.
     */
    get allFields(): Field[];
    /**
     * @returns an array of all children components.
     */
    get allChildren(): ComponentData[];
    /**
     * Deletes this node from the tree.
     */
    delete(): void;
    /**
     * @inheritDoc
     */
    get data(): Record<string, unknown>;
    /**
     * @returns the generated form data.
     */
    generatedData(): Record<string, unknown>;
    /**
     * @returns the object to read and modify parent data (available for array elements).
     */
    get parentData(): Record<string, unknown> | undefined;
    /**
     * @returns the object to read and modify root form data.
     */
    get rootData(): Record<string, unknown>;
    /**
     * @inheritDoc
     */
    get errors(): Record<string, unknown>;
    /**
     * @inheritDoc
     */
    set errors(errors: Record<string, unknown>);
    /**
     * @inheritDoc
     */
    get hasErrors(): boolean;
    /**
     * @inheritDoc
     */
    setAllErrors(message?: string): void;
    /**
     * @inheritDoc
     */
    validate(): Promise<ValidationMessages>;
    /**
     * @inheritDoc
     */
    getValidationResult(): Promise<undefined>;
    /**
     * @inheritDoc
     */
    get isValidating(): boolean;
    /**
     * @inheritDoc
     */
    reset(clearInitialData?: boolean): void;
    /**
     * @inheritDoc
     */
    clear(clearInitialData?: boolean): void;
    /**
     * Dispose method that releases resources used by the object.
     * It disposes the field and all the children objects.
     */
    dispose(): void;
    /**
     * @returns true if it has no parent {@link ComponentData}, false otherwise.
     */
    get isRoot(): boolean;
    /**
     * @returns the root of the component tree.
     */
    get root(): ComponentData;
    /**
     * @returns the index in the array if the component is in the component array
     * (looks for the nearest index in the component hierarchy).
     */
    get nearestIndex(): number | undefined;
    private validateForm;
    private insert;
    /**
     * Disposes the nodes by calling the disposers, disposing the field,
     * and resetting the parent and children properties to undefined and an empty array, respectively.
     * @param nodes the array of ComponentData objects representing the nodes to dispose.
     */
    private disposeNodes;
    private collectAllNodesAsArray;
    private collectAllFields;
    private collectAllChildren;
    private addChild;
    private removeChild;
    private invokeOnAfterKeyChanged;
    private invokeOnBeforeDeleted;
    private clearInitialData;
}

/**
 * Represents a class that holds events related to component data.
 */
declare class ComponentDataEvents {
    /**
     * An event that occurs after a component key change.
     */
    readonly onAfterKeyChanged: SyncEvent<ComponentData, ComponentKeyChangedEventArgs>;
    /**
     * An event that occurs before a component is removed from the component tree.
     */
    readonly onBeforeDelete: SyncEvent<ComponentData, undefined>;
    /**
     * Unsubscribe from all events.
     */
    dispose(): void;
}

/**
 * Styles for a device.
 */
declare type ComponentDeviceStyle = {
    /**
     * The CSS string.
     */
    string?: string;
};

/**
 * The component features.
 */
declare type ComponentFeatures = Record<string, unknown>;

/**
 * Describes the field of the component.
 */
declare interface ComponentField {
    /**
     * The component data key.
     */
    dataKey: string;
    /**
     * The component field.
     */
    field: Field;
}

/**
 * The component key.
 */
declare type ComponentKey = string;

/**
 * Represents the event argument for the event when the component key changes.
 */
declare class ComponentKeyChangedEventArgs {
    readonly oldKey: string;
    readonly newKey: string;
    /**
     * Constructs a new instance of the ComponentKeyChangedEventArgs class.
     * @param oldKey the old key.
     * @param newKey the new key.
     */
    constructor(oldKey: string, newKey: string);
}

/**
 * The component kind type.
 */
declare type ComponentKind = 'container' | 'component' | 'template' | 'repeater';

/**
 * The function to localize the properties of a component.
 * @param componentStore the component settings.
 * @param language the language selected in the form viewer.
 * @returns the Record with the localized properties of a component.
 */
declare type ComponentLocalizer = (componentStore: ComponentStore, language: Language) => Record<string, any>;

/**
 * The component properties context type.
 */
declare type ComponentPropertiesContext = {
    /**
     * The event handlers.
     */
    readonly eventHandlers?: Record<EventName, ActionEventHandler>;
    /**
     * The value property.
     */
    readonly valueProperty?: ReactProperty;
    /**
     * The information about the cell.
     */
    readonly cellInfo?: CellInfo;
};

/**
 * The value of the component property.
 * @template T the value type.
 */
declare interface ComponentProperty<T = any> {
    /**
     * The simple value of a component property.
     */
    value?: T;
    /**
     * Source code of the function for calculating the value of a component property.
     */
    fnSource?: string;
    /**
     * Type of the component's calculated property. If not specified - the value from value is used.
     */
    computeType?: ComponentPropertyComputeType;
    /**
     * The component property editor type, only used in Designer mode.
     */
    editorType?: string;
}

/**
 *  The component property binding type.
 */
declare type ComponentPropertyBindType = 'single' | 'array';

/**
 * The component property value type.
 */
declare type ComponentPropertyComputeType = 'function' | 'localization';

/**
 * The component property name.
 */
declare type ComponentPropertyName = string;

/**
 * A record containing localizations for the component properties.
 */
declare type ComponentPropsLocalization = Record<ComponentPropertyName, string>;

/**
 * The role of a component, such as a label, tooltip, etc.
 */
declare type ComponentRole = 'label' | 'tooltip' | 'error-message' | 'modal' | string;

/**
 * A record containing localizations grouped by component key.
 */
declare type ComponentsLocalization = Record<ComponentKey, TypedLocalization>;

/**
 * The component state factory that calculates the properties of the form viewer component.
 * @param data the data needed to display the component.
 * @param store the form viewer settings.
 * @param context the context for working with component properties.
 * @returns the component property calculator.
 */
declare type ComponentStateFactory = (data: ComponentData, store: Store, context?: ComponentPropertiesContext) => IComponentState;

/**
 * Component settings for serialization in JSON.
 */
declare class ComponentStore {
    /**
     * The React component key.
     */
    key: string;
    /**
     * The component data key.
     */
    dataKey?: string;
    /**
     * The component type of the form viewer.
     */
    type: string;
    /**
     * The component properties.
     */
    props: Record<string, ComponentProperty>;
    /**
     * The component CSS styles.
     */
    css?: Css;
    /**
     * The component wrapper CSS styles.
     */
    wrapperCss?: Css;
    /**
     * The component styles for the `style` attribute.
     */
    style?: ComponentStyle;
    /**
     * The component wrapper styles for the `style` attribute.
     */
    wrapperStyle?: ComponentStyle;
    /**
     * The set of event handlers.
     */
    events?: Record<EventName, ActionData[]>;
    /**
     * The array of child components.
     */
    children?: ComponentStore[];
    /**
     * The component value validation settings.
     */
    schema?: BoundValueSchema;
    /**
     * The set of arbitrary HTML attributes added to the component.
     */
    htmlAttributes?: HtmlAttribute[];
    /**
     * The tooltip settings.
     */
    tooltipProps?: Record<string, ComponentProperty>;
    /**
     * The modal settings.
     */
    modal?: ModalComponentStore;
    /**
     * The name of the occupied component property in the parent component.
     */
    slot?: string;
    /**
     * The condition for binding a child element to a parent element.
     */
    slotCondition?: string;
    /**
     * The expression or function to conditionally render a component.
     */
    renderWhen?: ComponentProperty;
    /**
     * Disables data binding for the component.
     */
    disableDataBinding?: ComponentProperty<boolean>;
    /**
     * Creates the component settings.
     * @param key the React component key.
     * @param type the component type of the form viewer.
     */
    constructor(key: string, type: string);
    /**
     * Correctly creates the {@link ComponentStore} from deserialized data.
     * @param value the deserialized data.
     * @returns the component Store.
     */
    static createFromObject(value: any): any;
    /**
     * Adds the event handler for component.
     * @param store the target {@link ComponentStore}.
     * @param eventName the target event name.
     * @param data the {@link ActionData}.
     */
    static addEventHandler(store: ComponentStore, eventName: string, data: ActionData): void;
    /**
     * Returns a clone of the specified component settings.
     * @param store the component settings.
     * @returns the clone of the specified component settings.
     */
    static clone(store: ComponentStore): ComponentStore;
}

/**
 * The type for the style property of a React component.
 */
declare type ComponentStyle = {
    /**
     * Styles for an arbitrary device.
     */
    any?: ComponentDeviceStyle;
    /**
     * Styles for mobile devices.
     */
    mobile?: ComponentDeviceStyle;
    /**
     * Styles for tablet devices.
     */
    tablet?: ComponentDeviceStyle;
    /**
     * Styles for desktop devices.
     */
    desktop?: ComponentDeviceStyle;
};

/**
 * The type for the CSS property of a React component.
 */
declare type Css = {
    /**
     * CSS styles for arbitrary device.
     */
    any?: DeviceStyle;
    /**
     * CSS styles for mobile devices.
     */
    mobile?: DeviceStyle;
    /**
     * CSS styles for tablet devices.
     */
    tablet?: DeviceStyle;
    /**
     * CSS styles for desktop devices.
     */
    desktop?: DeviceStyle;
};

/**
 * Represents the type of CSS loader. Can be either BiDi or common for both BiDi.
 */
declare type CssLoaderType = BiDi | 'common';

/**
 * Custom actions for the form viewer.
 */
declare type CustomActions = Record<string, ActionDefinition | ActionEventHandler>;

/**
 * A set of metadata of custom validation rules, grouped by rule name.
 */
declare type CustomValidationRules = Record<string, CustomValidationRuleSettings>;

/**
 * Custom validation rule settings.
 */
declare type CustomValidationRuleSettings = {
    /**
     * Metadata of validation rule parameters.
     */
    params?: ValidationRuleParameter[];
    /**
     * The function that validates the value.
     */
    validate: RuleValidator;
};

/**
 * The type of component data binding.
 */
declare type DataBindingType = 'oneWay' | 'twoWay' | 'none';

/**
 * The data key type.
 */
declare type DataKeyType = string | number | symbol;

/**
 * The defineAction helper type. **Internal use only.**
 * @param name the action name.
 * @param func the action handler.
 * @param params the definition of action parameters.
 * @param description the action description.
 * @template T the type of action parameter.
 * @returns the definition of an action.
 */
declare type DefineActionHelper = <T>(name: string, func: ActionHandler<T>, params?: ParameterDefinition<T>[], description?: string) => ActionDefinition;

/**
 * CSS styles for a device.
 */
declare type DeviceStyle = {
    /**
     * CSS styles defined in the general style settings.
     */
    object?: any;
    /**
     * CSS styles defined in the style code editor.
     */
    string?: string;
};

/**
 * The embedded form component properties.
 */
declare interface EmbeddedFormProps {
    /**
     * If false, nested form data show as nested object, true otherwise.
     */
    storeDataInParentForm?: boolean;
    /**
     * The form name ({@link FormViewerProps.formName}).
     */
    formName?: string;
    /**
     * The additional options for loading the embedded form ({@link FormViewerProps.formOptions}).
     */
    options?: any;
    /**
     * If true, the embedded form is disabled.
     */
    disabled?: boolean;
    /**
     * If true, the embedded form is read-only.
     */
    readOnly?: boolean;
}

/**
 * Properties of the React component that wraps the form view component and displays validation errors.
 */
declare interface ErrorWrapperProps {
    /**
     * The error text.
     */
    error?: string;
    /**
     * The wrapped component.
     */
    children?: ReactNode;
    /**
     * The CSS class name.
     */
    className?: string;
}

/**
 * The type for the event name.
 */
declare type EventName = string;

/**
 * Field with the form data.
 */
declare interface Field {
    /**
     * The field type.
     */
    fieldType: FieldType;
    /**
     * Flag, false if nested form data show as nested object, true otherwise.
     */
    storeDataInParentForm?: boolean;
    /**
     * Contains a field validation error if the field data is not valid.
     */
    error?: string;
    /**
     * Sets the error value.
     * @param error The error value to be set.
     */
    setError: (error: unknown) => void;
    /**
     * Contains a field validation errors if the field provides multiple errors (i.e. field is template).
     * Contains an array of field validation errors if the field contains an array of components.
     */
    errors?: Record<string, unknown> | Array<Record<string, unknown>>;
    /**
     * Flag, true, if the field is marked as touched.
     */
    touched: boolean;
    /**
     * Value of the field.
     */
    value: unknown;
    /**
     * The name of the component property that contains the field value.
     */
    valued: string;
    /**
     * Sets the value of the field.
     * @param value the value.
     */
    setValue: (value: unknown) => void;
    /**
     * Marks the field as touched.
     */
    setTouched: () => void;
    /**
     * Validates the field value.
     */
    validate: () => Promise<void>;
    /**
     * Returns the validation results without triggering an events and changing the state of the form.
     * @returns the {@link ValidationMessages} validation results.
     */
    getValidationResult: () => Promise<ValidationMessages | ValidationMessages[]>;
    /**
     * Sets the field to its default value.
     */
    reset: () => void;
    /**
     * Clears the data in the field.
     */
    clear: () => void;
    /**
     * Releases allocated resources, must be used when destroying an object instance.
     */
    dispose: () => void;
    /**
     * Initializes the value of the field.
     */
    init: () => void;
}

/**
 * The field type.
 */
declare type FieldType = 'simple' | 'template' | 'repeater';

/**
 * Represents a form that is rendered in Viewer or edited in Builder.
 */
declare class Form implements IForm {
    /**
     * Root component of the form.
     */
    readonly componentTree: ComponentData;
    /**
     * @inheritDoc
     */
    readonly localization: LocalizationStore;
    /**
     * Localization languages of the form.
     */
    readonly languages: Language[];
    /**
     * The set of action definitions.
     */
    readonly actions: ActionValues;
    /**
     * Properties of the component displaying the error.
     */
    errorProps: any;
    /**
     * The type name of the component displaying the tooltip.
     */
    tooltipType?: string;
    /**
     * The type name of the component displaying the error.
     */
    errorType?: string;
    /**
     * The type name of the component displaying the modal.
     */
    modalType?: string;
    /**
     * @inheritDoc
     */
    defaultLanguage: Language;
    /**
     * The form validator.
     */
    formValidator?: string;
    /**
     * Creates a new instance of Form.
     * @param componentTree the root component of the form.
     * @param localization the localization of the form.
     * @param actions the form custom actions.
     * @param languages the localization languages of the form.
     * @param defaultLanguage the default localization language of the form.
     */
    constructor(componentTree: ComponentData, localization: LocalizationStore, actions: ActionValues, languages: Language[], defaultLanguage: Language);
    /**
     * @returns the actions names array.
     */
    get actionNames(): string[];
    /**
     * @returns the form validator function.
     */
    get formValidatorFunction(): FormValidator | undefined;
    /**
     * Initializes form fields.
     */
    initFields(): void;
    /**
     * Disposes the form. Disposes all the components and localization.
     */
    dispose(): void;
    /**
     * Removes the action from the form.
     * @param name the action name to remove.
     */
    removeAction(name: string): void;
    /**
     * Changes the existing action to the new one, adds the action if the existing action is not found.
     * @param oldActionName the existing action name.
     * @param newAction the new named action.
     */
    updateOrAddAction(oldActionName: string, newAction: NamedActionDefinition): void;
    /**
     * Clones the action.
     * @param namedAction the named action to clone.
     */
    cloneAction(namedAction: NamedActionDefinition): void;
    private rebindActionData;
    private rebindActionHandlers;
    private removeCodeActionBinding;
    private onComponentDataBeforeDelete;
    private onComponentDataAfterKeyChanged;
}

/**
 * Represents a function that validate the form data.
 * @param data the form data.
 * @returns the Record with form field errors.
 */
declare type FormValidator = (data: Record<string, unknown>) => Promise<Record<string, string> | undefined>;

/**
 * Represents an array of functions that validate the form data.
 */
declare type FormValidators = FormValidator[];

export declare const FormViewerLite: (props: FormViewerProps) => JSX.Element;

/**
 * Form viewer React component properties.
 */
export declare interface FormViewerProps {
    /**
     * Loads the form.
     * @param name the form name.
     * @param options the form options.
     * @returns the string or Promise with the form.
     */
    getForm?: (name?: string, options?: any) => string | Promise<string>;
    /**
     * The form name.
     * Updating the value triggers the {@link FormViewerProps.getForm} function.
     */
    formName?: string;
    /**
     * The form options. Used to transfer any options to the {@link FormViewerProps.getForm} function.
     * Updating the value triggers the {@link FormViewerProps.getForm} function.
     */
    formOptions?: any;
    /**
     * All the metadata of the components of the form viewer.
     */
    view: View;
    /**
     * Custom actions for the form viewer.
     */
    actions?: CustomActions;
    /**
     * The set of functions that validate the form data.
     */
    formValidators?: FormValidators;
    /**
     * The initial data of the form.
     */
    initialData?: Record<string, unknown>;
    /**
     * The form validation errors.
     */
    errors?: Record<string, unknown>;
    /**
     * The React component that wraps every component in a form. **Internal use only.**
     */
    componentWrapper?: ComponentType<any>;
    /**
     * The default error wrapper used when errorType is not specified in the form.
     */
    errorWrapper?: ComponentType<ErrorWrapperProps>;
    /**
     * Display resolution type.
     */
    viewMode?: ViewMode;
    /**
     * The language of the form, e.g. 'en-US'.
     */
    language?: LanguageFullCode;
    /**
     * The function to localize the properties of a component.
     */
    localize?: ComponentLocalizer;
    /**
     * The set of metadata of validation rules, grouped by the type of value being validated.
     */
    validators?: Validators;
    /**
     * The reference to {@link IFormViewer}.
     */
    viewerRef?: ForwardedRef<IFormViewer>;
    /**
     * The event is called whenever a form data changes.
     * @param data the {@link IFormData} with all the form data.
     */
    onFormDataChange?: (data: IFormData) => void;
    /**
     * If true, the form is read-only.
     */
    readOnly?: boolean;
    /**
     * If true, the form is disabled.
     */
    disabled?: boolean;
    /**
     * If true, all validation errors will be displayed.
     */
    showAllValidationErrors?: boolean;
    /**
     * The arbitrary user context.
     */
    context?: any;
    /**
     * The localization engine used by the viewer.
     */
    localizationEngine?: ILocalizationEngine;
}

/**
 * Represents the props passed to the FormViewer Store. **Internal use only.**
 */
declare class FormViewerPropsStore {
    /**
     * The metadata of the form viewer components.
     */
    view: View;
    /**
     * The initial form data.
     */
    initialData: Record<string, unknown>;
    /**
     * The set of metadata of validation rules, grouped by the type of value being validated.
     */
    validators?: Validators;
    /**
     * The set of functions that validate the form data.
     */
    formValidators?: FormValidators;
    /**
     * The function to localize the properties of a component.
     */
    localizer?: ComponentLocalizer;
    /**
     * Custom actions for the form viewer.
     */
    actions?: ActionValues;
    /**
     * The full language code passed in the FormViewer properties, e.g. 'en-US'.
     */
    propsLanguage?: LanguageFullCode;
    /**
     * The default error wrapper used when errorType is not specified in the form.
     */
    errorWrapper?: ComponentType<ErrorWrapperProps>;
    /**
     * If true, the form is read-only.
     */
    readOnly?: boolean;
    /**
     * If true, the form is disabled.
     */
    disabled?: boolean;
    /**
     * If true, all validation errors will be displayed.
     */
    showAllValidationErrors?: boolean;
    /**
     * The arbitrary user context.
     */
    context?: any;
    /**
     * The localization engine provided via FormViewer props.
     */
    localizationEngine?: ILocalizationEngine;
    /**
     * Constructs a new FormViewerPropsStore from the given FormViewerProps.
     * @param formViewerProps the FormViewer props.
     * @returns the FormViewerPropsStore.
     */
    constructor(formViewerProps?: FormViewerProps);
    /**
     * Applies the given FormViewerProps.
     * @param formViewerProps the properties to apply.
     */
    applyProps(formViewerProps: FormViewerProps): void;
    /**
     * Returns the clone of the FormViewerPropsStore object.
     * @returns the clone of the FormViewerPropsStore object.
     */
    clone(): FormViewerPropsStore;
}

/**
 * Validation rules for FormViewer.
 */
declare type FormViewerValidationRules = {
    /**
     * The set of custom validators.
     */
    custom?: CustomValidationRules;
    /**
     * The set of internal validators.
     */
    internal: ValidationRuleSet;
};

/**
 * Represents a form viewer Wrapper component.
 */
declare type FormViewerWrapper = ComponentType<FormViewerWrapperComponentProps>;

/**
 * Represents the props for the WrapperComponent. WrapperComponent is a component that wraps the form viewer. Can be added externally.
 */
declare interface FormViewerWrapperComponentProps {
    /**
     * The FormViewer language.
     */
    language: Language;
    /**
     * The React child node.
     */
    children: ReactNode;
}

/**
 * The type of arbitrary function that returns void or Promise&lt;void&gt;.
 */
declare type Func = (...arg: any[]) => void | Promise<void>;

/**
 * Function argument value type.
 */
declare type FunctionArgumentValue = {
    /**
     * Argument type for function type.
     */
    type: 'fn';
    /**
     * The source code of the function for use in design mode.
     */
    body?: string;
};

/**
 * Returns the initial data for the field.
 */
declare type GetInitialDataFn = () => unknown;

/**
 * The arbitrary HTML attributes for the component.
 */
declare type HtmlAttribute = Record<string, string>;

/**
 * The factory for creating ComponentData instances. **Internal use only.**
 */
declare interface IComponentDataFactory {
    /**
     * Creates the element for the component tree. **Internal use only.**
     * @param componentStore the component settings.
     * @param deferFieldCalculation if true, then the calculated field must be explicitly initialized.
     * @returns the element for the component tree.
     */
    createComponentData(componentStore: ComponentStore, deferFieldCalculation: boolean): ComponentData;
}

/**
 * Calculates all the properties of the form view component.
 */
declare interface IComponentState {
    /**
     * @returns combined in order of priority component properties.
     */
    get get(): Record<string, any>;
    /**
     * Calculates and returns wrapper className property.
     * @returns the className for the wrapper of component.
     */
    get wrapperClassName(): string;
    /**
     * @returns the Record that contains the style property for the wrapper of component.
     */
    get wrapperStyle(): {
        style: CSSProperties;
    } | undefined;
    /**
     * @returns combined component properties in order of priority, excluding child components, the className property
     * does not contain styles additionally defined for the component.
     */
    get propsWithoutChildren(): Record<string, any>;
    /**
     * @returns combined in order of priority component properties without children props.
     */
    get ownProps(): Record<string, any>;
    /**
     * The method that is called when the component is mounted.
     */
    onDidMount(): void;
    /**
     * The method that is called when the component is unmounted.
     */
    onWillUnmount(): void;
    /**
     * @returns true if the component has a read-only property and this property is true, false otherwise.
     */
    get isReadOnly(): boolean;
    /**
     * @returns true if the component has a disabled property and this property is true, false otherwise.
     */
    get isDisabled(): boolean;
}

/**
 * Provides the root component for the data in the component tree.
 */
declare interface IDataRootProvider {
    /**
     * @returns the root component for the data in the component tree.
     */
    get dataRoot(): ComponentData;
}

/**
 * A form.
 */
declare interface IForm {
    /**
     * Localization of the form.
     */
    readonly localization: ILocalizationStore;
    /**
     * Default localization language of the form.
     */
    readonly defaultLanguage: Language;
}

/**
 * The interface for accessing the form data.
 */
declare interface IFormData {
    /**
     * @returns the Record with all the form data.
     */
    get data(): Record<string, unknown>;
    /**
     * @returns the object to read and modify parent data (available for array elements).
     */
    get parentData(): Record<string, unknown> | undefined;
    /**
     * @returns the object to read and modify root form data.
     */
    get rootData(): Record<string, unknown>;
    /**
     * @returns the Record with all validation error messages.
     */
    get errors(): Record<string, unknown>;
    /**
     * Sets the form error messages.
     */
    set errors(errors: Record<string, unknown>);
    /**
     * true if the form contains errors, otherwise false.
     */
    get hasErrors(): boolean;
    /**
     * @returns A user-defined key-value observable storage. Utilize it to store and share any custom data.
     */
    get state(): Record<string, unknown>;
    /**
     * Sets the validation error message for all form data fields.
     * @param message the validation error message.
     */
    setAllErrors: (message?: string) => void;
    /**
     * Validates the data in the form.
     * @returns the {@link ValidationMessages} validation results.
     */
    validate: () => Promise<ValidationMessages>;
    /**
     * Returns the validation results without triggering an events and changing the state of the form.
     * @returns the {@link ValidationMessages} validation results.
     */
    getValidationResult: () => Promise<ValidationMessages>;
    /**
     * If true, then validation is in progress.
     */
    get isValidating(): boolean;
    /**
     * Sets the form to its default value.
     * @param clearInitialData if true, then also clear the initial data.
     * @default true
     */
    reset: (clearInitialData?: boolean) => void;
    /**
     * Clears the form data.
     * @param clearInitialData if true, then also clear the initial data.
     * @default true
     */
    clear: (clearInitialData?: boolean) => void;
    /**
     * @returns the index in the array if the component is in the component array.
     */
    index?: number;
}

/**
 * The form viewer settings interface.
 */
export declare interface IFormViewer {
    /**
     * @returns the {@link IFormData} with all the form data.
     */
    get formData(): IFormData;
}

/**
 * The form localization engine.
 */
declare interface ILocalizationEngine {
    /**
     * The current language.
     */
    language: LanguageFullCode;
    /**
     * Adds messages to the localization engine.
     * @param locale the locale for the messages.
     * @param messages the messages to add.
     * @returns the array of any localization errors that occurred.
     */
    addMessages(locale: string, messages: Record<string, string>): Array<LocalizationError>;
    /**
     * Gets a compatible ID for localization engine.
     * @param rawId the raw ID to make compatible.
     * @returns the compatible ID.
     */
    getCompatibleId(rawId: string): string;
    /**
     * Localizes properties for a component.
     * @param form the form containing localization data.
     * @param formData the form data for variable substitution.
     * @param language the target language for localization.
     * @param componentStore the component store to localize.
     * @param type the type of localization (default: 'component').
     * @returns the object with localized property values.
     */
    localizeProperties(form: IForm, formData: IFormData, language: Language, componentStore: ComponentStore, type?: LocalizationType): Record<string, any>;
    /**
     * Localizes error messages for validation rules.
     * @param form the form containing localization data.
     * @param formData the form data for variable substitution.
     * @param language the target language for localization.
     * @param componentStore the component store to localize.
     * @param ruleKey the validation rule key.
     * @returns the localized error message or undefined.
     */
    localizeErrorMessage(form: IForm, formData: IFormData, language: Language, componentStore: ComponentStore, ruleKey: string): string | undefined;
    /**
     * Tests localization by formatting a message with given data.
     * @param localization the localization string to test.
     * @param localizationStringId the ID of the localization string.
     * @param language the language for the test.
     * @param formData the data to use for variable substitution.
     * @returns the array of errors or the formatted result string.
     */
    testLocalization?: (localization: string, localizationStringId: string, language: Language, formData: IFormData) => Array<LocalizationError> | string;
}

/**
 * Localization of the form.
 */
declare interface ILocalizationStore {
    /**
     * Returns all localization items provided by engine.
     * @param languageFullCode the full code (en-US, en-GB etc.).
     * @returns all localization items.
     */
    getItems(languageFullCode: LanguageFullCode): Record<string, string> | null;
}

/**
 * React component properties that display an internal form view error. **Internal use only.**
 */
declare interface InternalErrorProps {
    /**
     * The internal error.
     */
    error: any;
}

/**
 * The form viewer settings interface.
 */
declare interface IStore {
    /**
     * The displayed form.
     */
    form: Form;
    /**
     * @returns the slice of the initial data in accordance with the Store hierarchy. **Internal use only.**
     */
    get initialDataSlice(): unknown;
    /**
     * @returns true if all validation errors are to be displayed, false otherwise.
     */
    get showAllValidationErrors(): boolean | undefined;
    /**
     * Performs the callback function on each element of the component tree, accumulates the return values.
     * @param callback the function that calculates the value for the accumulator.
     * @param initialValue the initial value for the accumulator.
     * @template T the return value type.
     * @returns the accumulated value.
     */
    reduceScreen: <T>(callback: (accumulator: T, current: ComponentData) => T, initialValue: T) => T;
    /**
     * The function to localize the validation error message.
     * @param formData the form data.
     * @param componentStore the component settings.
     * @param validationResults the results of the validation.
     * @returns the result of localization or undefined.
     */
    localizeErrorMessages(formData: IFormData, componentStore: ComponentStore, validationResults?: ValidationResult[]): string[] | undefined;
    /**
     * Localizes a component store based on the given localization type. If a custom localizer is available, it will be used.
     * @param type the type of localization.
     * @param formData the form data.
     * @param componentStore the component settings.
     * @returns the Record with the localized properties.
     */
    localizeComponent(type: LocalizationType, formData: IFormData, componentStore: ComponentStore): Record<string, unknown>;
    /**
     * Correctly clears allocated resources, the function must be called when destroying an instance of the class.
     */
    dispose: () => void;
}

/**
 * The unique Symbol for the key property.
 */
declare const KeySymbol: unique symbol;

/**
 * The language to localize the form builder.
 */
declare class Language {
    readonly code: string;
    readonly dialect: string;
    readonly name: string;
    readonly description: string;
    readonly bidi: BiDi;
    /**
     * Creates a localization language for the form builder.
     * @param code the language code, for example, 'en'.
     * @param dialect the dialect code, for example, 'US'.
     * @param name the name of the language, for example 'English'.
     * @param description the description of the language, for example 'American English'.
     * @param bidi the type of text layout, for example, BiDi.LTR.
     */
    constructor(code: string, dialect: string, name: string, description: string, bidi?: BiDi);
    /**
     * @returns the full code of the Language i.e. en-US, en-GB etc.
     */
    get fullCode(): LanguageFullCode;
    /**
     * Clones an existing instance of the language.
     * @param source the cloning object.
     * @returns the object clone.
     */
    static clone(source: Language): Language;
}

/**
 * The full language code, e.g. 'en-US'.
 */
declare type LanguageFullCode = `${string}-${string}`;

/**
 * Localization error class.
 */
declare class LocalizationError extends Error {
    /**
     * Creates a new LocalizationError.
     * @param name the error name.
     * @param message the error message.
     */
    constructor(name: string, message: string);
}

/**
 * Observable storage of localization. **Internal use only.**
 */
declare class LocalizationStore implements ILocalizationStore {
    readonly value: LocalizationValue;
    readonly engine: ILocalizationEngine;
    private localizationCache;
    /**
     * Creates a new LocalizationStore instance.
     * @param value the initial localization value.
     * @param engine the localization engine to use.
     */
    constructor(value: LocalizationValue | undefined, engine: ILocalizationEngine);
    /**
     * Returns value of localization constant.
     * @param languageFullCode the full code (en-US, en-GB etc.) of the language we are looking to localize.
     * @param componentKey the component we are looking to localize.
     * @param propertyName the property name we are looking to localize.
     * @param type the type of localization.
     * @returns the value of localization constant.
     */
    getLocalization(languageFullCode: LanguageFullCode, componentKey: string, propertyName: string, type: LocalizationType): string | undefined;
    /**
     * Sets localization for component property.
     * @param languageFullCode the full code (en-US, en-GB etc.) of the language in which localization will be set.
     * @param componentKey the component key that requires localization.
     * @param propertyName the component's property name to be localized.
     * @param type the type of localization.
     * @param value the localization value.
     */
    setLocalization(languageFullCode: LanguageFullCode, componentKey: string, propertyName: string, type: LocalizationType, value: string): void;
    /**
     * Removes localization for component.
     * @param componentKey the component key that requires localization removal.
     */
    removeLocalization(componentKey: string): void;
    /**
     * Removes localization for component with specified type.
     * @param componentKey the component key that requires localization removal.
     * @param type the localization type.
     */
    removeLocalizationForType(componentKey: string, type: LocalizationType): void;
    /**
     * Checks that the specified language exists in the localization.
     * @param languageFullCode The full code (en-US, en