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

React hook form alternative.

import type { AriaAttributes } from 'react';
import type { ComponentType } from 'react';
import { Context } from 'react';
import type { CSSObject } from '@emotion/react';
import type { CSSObject as CSSObject_2 } from '@emotion/serialize';
import type { CSSProperties } from 'react';
import { DetailedHTMLProps } from 'react';
import { EmotionCache } from '@emotion/cache';
import { FluentBundle } from '@fluent/bundle';
import type { FluentVariable } from '@fluent/bundle/esm/bundle';
import { FluentVariable as FluentVariable_2 } from '@fluent/bundle';
import type { ForwardedRef } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { ForwardRefRenderFunction } from 'react';
import { HTMLAttributes } from 'react';
import { JSX } from '@emotion/react/jsx-runtime';
import { PropsWithoutRef } from 'react';
import { Provider } from 'react';
import type { ReactNode } from 'react';
import { Ref } from 'react';
import { RefAttributes } from 'react';
import type { SyntheticEvent } from 'react';

/**
 * Action Storage.
 * Used for add a new action, store information about it.
 */
export 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.
 */
export 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.
 */
export declare class ActionEventArgs {
    #private;
    readonly type: string;
    readonly sender: ComponentData;
    readonly store: Store;
    readonly args: any[];
    readonly renderedProps: Record<string, any>;
    /**
     * 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.
     */
    constructor(type: string, sender: ComponentData, store: Store, args: any[], renderedProps: 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>;
}

/**
 * Description of the event argument type for the code editor.
 */
export declare const ActionEventArgsDeclaration = "\n/**\n * Arguments passed to the event handler.\n */\ndeclare class ActionEventArgs {\n\n  /**\n   * The event type.\n   */\n  readonly type: string\n\n  /**\n   * The component that triggered the event.\n   */\n  readonly sender: ComponentData\n  \n  /**\n   * The component properties that were used to render the sender component.\n   */\n  readonly renderedProps: Record<string, any>\n\n  /**\n   * The index of the component in the array, if the component is in the array.\n   */\n  readonly index?: number\n\n  /**\n   * Sets current props of component.\n   */\n  readonly setUserDefinedProps: (props: Record<string, any>) => void\n\n  /**\n   * The form viewer settings.\n   */\n  readonly store: Store\n\n  /**\n   * The event arguments.\n   */\n  readonly args: any[]\n\n  /**\n   * @returns the event handled by the event handler.\n   */\n  get event(): SyntheticEvent | null\n\n  /**\n   * @returns the first element of the event argument array, which is treated as a value.\n   */\n  get value(): any\n  \n  /**\n   * @returns the object for reading and changing form data.\n   */\n  get data(): Record<string, unknown>\n  \n  /**\n   * @returns the object to read and modify parent data (available for array elements).\n   */\n  get parentData(): Record<string, unknown> | undefined\n\n  /**\n   * @returns the object to read and modify root form data.\n   */\n  get rootData(): Record<string, unknown>\n}\n";

/**
 * Event handler function type.
 * @param e the action arguments.
 */
export 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.
 */
export declare type ActionHandler<T> = (e: ActionEventArgs, params: {
    [k in keyof T]: any;
}) => void | Promise<void>;

/**
 * Represents a set of action parameters.
 */
export 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.
 */
export declare type ActionsInitializer = (props: ComponentStore['props'], def: DefineActionHelper) => Record<EventName, ActionEventHandler | ActionDefinition>;

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

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

/**
 * Basic metadata class for a React component property for the form builder.
 */
export declare class Annotation {
    /**
     * The component property key.
     */
    readonly key: string;
    /**
     * The component property name.
     */
    readonly name: string;
    /**
     * The name of the component's property editor.
     */
    readonly editor: EditorType;
    /**
     * The hint for the component property.
     */
    readonly hint?: ReactNode;
    /**
     * True if the property value can be localized, false otherwise.
     */
    readonly localizable: boolean;
    /**
     * True if the property value is bound to form data, false otherwise.
     */
    readonly valued: boolean;
    /**
     * The type of component data binding.
     */
    readonly dataBindingType: DataBindingType;
    /**
     * True if the property value controls a read-only flag, false otherwise.
     */
    readonly readOnly: boolean;
    /**
     * True if the property value controls a disabled flag, false otherwise.
     */
    readonly disabled: boolean;
    /**
     * Additional properties for the component property editor.
     */
    readonly editorProps?: any;
    /**
     * The default property value.
     */
    readonly default?: any;
    /**
     * The property value for the uncontrolled state.
     */
    readonly uncontrolledValue?: unknown;
    /**
     * The data type for the value of the property.
     */
    readonly type?: SchemaType;
    /**
     * True if the component property is required, false otherwise.
     */
    readonly required: boolean;
    /**
     * The function for validating the property value.
     */
    readonly validator?: RuleValidator;
    /**
     * Message and/or error code for the validation function.
     */
    readonly errorMap?: ErrorMap;
    /**
     * True if the property value can be a calculated property, false otherwise.
     */
    readonly calculable: boolean;
    /**
     * A function that returns a string containing the source code of the function to bind child components.
     * @param props the properties of the component, which are available only inside Form Builder Designer.
     */
    readonly slotConditionBuilder?: (props: any) => string;
    /**
     *  The component property binding type.
     */
    readonly bindingType?: ComponentPropertyBindType;
    /**
     * Creates metadata for a React component property.
     * @param key the property name.
     * @param name the human-readable property name.
     */
    constructor(key: string, name: string);
    /**
     * @returns the metadata clone.
     */
    clone(): any;
}

/**
 * The builder class to define the metadata property of the form builder component.
 * @template T the property type.
 */
export declare class AnnotationBuilder<T> extends BaseBuilder<T> {
    /**
     * Creates a component property metadata builder.
     * @param editor the property editor type.
     * @template T the property type.
     */
    constructor(editor: EditorType);
    /**
     * Creates a component property metadata builder.
     * @param editor the property editor type.
     * @template T the property type.
     * @returns the component property metadata builder.
     */
    static create: <T_1>(editor: EditorType) => AnnotationBuilder<T_1>;
    /**
     * Sets the property as a "array" property.
     * @returns the instance of the metadata property builder.
     */
    get array(): ArrayBuilder<T[] | undefined>;
    /**
     * Sets the field type for the component property.
     * @param type the field type.
     * @returns the instance of the metadata property builder.
     */
    typed<T extends SchemaType>(type: T): TypedBuilder<SchemaTypeMap[T] | undefined>;
    /**
     * Sets the property as a "single select" property.
     * @param values the possible values for the property.
     * @returns the instance of the metadata property builder.
     */
    oneOf<U extends string | number>(...values: U[]): OneOfBuilder<U>;
    /**
     * Sets the property as a "multiple select" property.
     * @param values the possible values for the property.
     * @returns the instance of the metadata property builder.
     */
    someOf<U extends string | number>(...values: U[]): SomeOfBuilder<U>;
}

/**
 * The type-safe description of the component's metadata property builders.
 * @template T the component property name type.
 */
export declare type Annotations<T extends object> = {
    [key in keyof T]: BaseBuilder<T[key]> | undefined;
};

/**
 * Type of component property description in the form builder.
 */
export declare type AnnotationType = 'Property' | 'Container' | 'Event' | 'Module' | 'Style';

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

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

/**
 * The record with 'aria' attributes.
 */
export declare type AriaAttributesIds = Record<keyof Pick<AriaAttributes, 'aria-labelledby' | 'aria-errormessage'>, string>;

/**
 * Represents the options for ARIA attributes configurations.
 */
export declare type AriaAttributesOptions = {
    /**
     * Indicates whether an item, element, or entity is marked or tagged with a label.
     */
    labeled: boolean;
};

/**
 * The annotation builder for a component property with type 'Array'.
 */
export declare const array: ArrayBuilder<unknown[] | undefined>;

/**
 * The builder class to define the metadata property of the form builder component.
 * Used for properties where the property value is an array.
 * @template T the property type.
 */
export declare class ArrayBuilder<T> extends TypedBuilder<T> {
    subType?: SchemaType;
    /**
     * Sets the component's value type to an array of strings.
     * @returns the modified instance of the builder.
     */
    get ofString(): ArrayBuilder<string[] | undefined>;
    /**
     * Sets the component's value type to an array of objects.
     * @returns the modified instance of the builder.
     */
    get ofObject(): ArrayBuilder<object[] | undefined>;
}

/**
 * Asynchronous function constructor.
 */
export declare const AsyncFunction: Function;

/**
 * The base builder class to define the metadata property of the form builder component.
 * @template T the property type.
 */
export declare class BaseBuilder<T> {
    /**
     * Partial metadata for a component property.
     */
    annotation: PreAnnotation;
    /**
     * Options for building an annotation.
     */
    options: BuilderOptions;
    /**
     * @returns the main component property that is used as form data and for validation rules.
     */
    get valued(): this;
    /**
     * @returns the main property of the component that uses the form data as data (one-way data binding).
     */
    get dataBound(): this;
    /**
     * Sets the value for the property that prevents uncontrolled state.
     * @param uncontrolledValue the value for the uncontrolled state.
     * @returns the modified instance of the builder.
     */
    uncontrolledValue(uncontrolledValue: unknown): this;
    /**
     * @returns the component property that can be localized.
     */
    get localize(): this;
    /**
     * @returns the non-localizable component property.
     */
    get notLocalize(): this;
    /**
     * Specifies the name of the component property.
     * @param name the property name.
     * @returns the modified instance of the builder.
     */
    named(name: string): this;
    /**
     * Adds the hint to the property name of the component.
     * @param hint the hint.
     * @returns the modified instance of the builder.
     */
    hinted(hint: ReactNode): this;
    /**
     * Marks the component property as calculable.
     * @param calculable true if the property is calculable.
     * @returns the modified instance of the builder.
     */
    calculable(calculable: boolean): this;
    /**
     * Modifies the component property metadata builder with custom options.
     * @param options the custom options.
     * @returns the modified instance of the builder.
     */
    setup(options: BuilderSetup): this;
    /**
     * Clones the instance of the builder.
     * @returns the cloned instance of the builder.
     */
    clone(): this;
    /**
     * Creates component property metadata for the form builder.
     * @param key the unique key of the component property.
     * @returns the instance of the component property metadata for the form builder.
     */
    build(key: string): Annotation;
    /**
     * Sets custom properties for the component's property editor.
     * @param props the custom properties
     * @returns the modified instance of the builder.
     */
    withEditorProps(props: any): this;
    /**
     * Hides the component property editor.
     * @returns the modified instance of the builder.
     */
    hideEditor(): this;
    /**
     * Returns the annotation name.
     * @param key the property name
     * @returns the annotation name.
     */
    protected getName(key: string): string;
}

/**
 * The result of compiling of anything. **Internal use only.**
 */
export declare interface BaseCompilationResult {
    /**
     * Flag if true - compilation failed, false otherwise.
     */
    error: boolean;
    /**
     * The array of compilation errors.
     */
    exceptions?: Error[];
}

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

/**
 * The annotation builder for a component property with type 'boolean'.
 */
export declare const boolean: TypedBuilder<boolean | undefined>;

/**
 * Value validation rules.
 */
export 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[];
};

/**
 * Description of the React component that connects to the form builder.
 * Contains metadata for the form builder and metadata for the form viewer.
 */
export declare interface BuilderComponent {
    /**
     * The component metadata for the form builder.
     */
    readonly meta: Meta;
    /**
     * The component metadata for the form viewer.
     */
    readonly model: Model;
    /**
     * The name of the component category in the designer.
     */
    readonly category?: string;
}

/**
 * Form builder mode. Builder or viewer.
 */
export declare type BuilderMode = 'builder' | 'viewer';

/**
 * The BuilderMode context provider.
 */
export declare const 
/**
* @returns the {@link BuilderMode} builder mode value.
*/
/**
 * The BuilderMode context provider.
 */
BuilderModeProvider: Provider<BuilderMode>;

/**
 * Options for building an annotation.
 */
export declare class BuilderOptions {
    /**
     * Type of component property description in the form builder.
     */
    annotationType: AnnotationType;
    /**
     * Flag if true, the property name will be automatically converted in the designer from a camel case string to a human-readable string.
     */
    autoName: boolean;
}

/**
 * The type representing custom options for the component's property metadata builder.
 */
export declare type BuilderSetup = Partial<PreAnnotation & BuilderOptions>;

/**
 * Represents all the metadata of the form builder components.
 */
export declare class BuilderView extends View {
    #private;
    builderComponents: BuilderComponent[];
    /**
     * Returns the component metadata for the specified component type name.
     * @param type the component type name.
     * @returns the component metadata for the specified component type name.
     */
    getMeta(type: string): Meta;
    /**
     * Adds the component metadata to the form builder.
     * @param component the component metadata.
     */
    addComponent(component: BuilderComponent): void;
    /**
     * Removes the component metadata from the form builder.
     * @param name the component type name.
     */
    removeComponent(name: string): void;
    /**
     * Returns the component metadata for the specified component type name or undefined.
     * @param type the component type name.
     * @returns the component metadata for the specified component type name or undefined.
     */
    findMeta(type: string): Meta | undefined;
    /**
     * Returns the array of metadata properties of the tooltip component.
     * @param name the name of the tooltip component type.
     * @returns the array of metadata properties of the tooltip component.
     */
    getTooltipAnnotations(name: string): Annotation[] | undefined;
    /**
     * Returns the array of metadata properties of the error component.
     * @param name the name of the error component type.
     * @returns the array of metadata properties of the error component.
     */
    getErrorAnnotations(name: string): Annotation[] | undefined;
    /**
     * @returns the array of strings with the names of the component types of the tooltip.
     */
    get tooltips(): string[];
    /**
     * @returns the array of strings with the names of the component types of the error.
     */
    get errors(): string[];
    /**
     * Sets the metadata of the component that displays the form's tooltips.
     * @param builderComponent the metadata of the component that displays the form's tooltips.
     * @returns the instance of the {@link BuilderView} class.
     */
    withTooltipMeta(builderComponent: BuilderComponent): this;
    /**
     * Sets the metadata of the component that displays form's errors.
     * @param builderComponent the metadata of the component that displays the form's errors.
     * @returns the instance of the {@link BuilderView} class.
     */
    withErrorMeta(builderComponent: BuilderComponent): this;
    /**
     * Creates metadata for the form builder for templates from the specified template names.
     * @param templates the array of template names.
     * @returns the instance of the {@link BuilderView} class.
     */
    withTemplates(templates: string[]): this;
    /**
     * Creates an instance of BuilderComponent for the specified template name.
     * @param name the template name
     * @returns the BuilderComponent instance.
     */
    static createTemplateComponent(name: string): BuilderComponent;
    /**
     * Creates metadata for form builder components.
     * @param builderComponents the array of metadata of form builder components.
     */
    constructor(builderComponents: BuilderComponent[]);
}

/**
 * Creates and returns a new form JSON builder instance.
 * @param options the optional configuration options for the form.
 * @returns the instance of {@link IFormJsonBuilder} to start building the form.
 */
export declare function buildForm(options?: FormOptions): IFormJsonBuilder;

/**
 * Calculable result.
 */
export declare class CalculableResult {
    readonly error: boolean;
    readonly result?: any;
    readonly exceptions?: Error[] | undefined;
    readonly warning?: boolean | undefined;
    /**
     * Constructor.
     * @param error the error.
     * @param result the result.
     * @param exceptions the exceptions.
     * @param warning the warning.
     */
    constructor(error?: boolean, result?: any, exceptions?: Error[] | undefined, warning?: boolean | undefined);
    /**
     * Creates a new instance of the CalculableResult class with a successful result.
     * @param result the calculable result.
     * @returns the new instance of CalculableResult class.
     */
    static success(result: any): CalculableResult;
    /**
     * Creates a new instance of CalculableResult class with an error.
     * @param exceptions the exception array.
     * @returns the new instance of CalculableResult class.
     */
    static error(exceptions: Error[]): CalculableResult;
    /**
     * Creates a new instance of the CalculableResult class with a warning result.
     * @param result the calculable result.
     * @returns the new instance of CalculableResult class.
     */
    static warning(result: any): CalculableResult;
}

/* Excluded from this release type: calculatePropertyValue */

/**
 * A component feature that indicates that the component is a preset.
 */
export declare const cfComponentIsPreset = "component-is-preset";

/**
 * Enabling this component feature will hide the component's additional properties editor.
 */
export declare const cfDisableAdditionalProperties = "disable-additional-properties";

/**
 * Enabling this component feature will hide the main component's property editors, except for the key property and additional properties.
 */
export declare const cfDisableMainComponentProperties = "disable-main-component-properties";

/**
 * Enabling this component feature will hide the properties editor on the styles tab.
 */
export declare const cfDisableStyleProperties = "disable-style-properties";

/**
 * Enabling this component feature will hide the 'Styles for className' editor.
 */
export declare const cfDisableStylesForClassNameEditor = "disable-styles-for-classname-editor";

/**
 * Enabling this component feature will hide the component tooltip properties editor.
 */
export declare const cfDisableTooltipProperties = "disable-tooltip-properties";

/**
 * Enabling this component feature will show the 'Inline styles' editor.
 */
export declare const cfEnableInlineStylesEditor = "enable-inline-styles-editor";

/**
 * Performs the function of checking if the child component can be bound. **Internal use only.**
 * @param childStore the child component settings.
 * @param parentProps the parent component properties.
 * @returns true, if the child component can be bound, false otherwise.
 */
export declare function checkSlotCondition(childStore: ComponentStore, parentProps: any): any;

/**
 * The annotation builder for the component property containing the CSS class name.
 */
export declare const className: Annotation;

/**
 * The annotation builder for a component property with type 'color' (e.g. rgba(71, 167, 122, 0.72)).
 */
export declare const color: TypedBuilder<string | undefined>;

/**
 * The annotations for generic CSS properties of a component.
 */
export declare const commonStyles: {
    width: AnnotationBuilder<unknown>;
    height: AnnotationBuilder<unknown>;
    marginTop: AnnotationBuilder<unknown>;
    marginRight: AnnotationBuilder<unknown>;
    marginBottom: AnnotationBuilder<unknown>;
    marginLeft: AnnotationBuilder<unknown>;
    color: AnnotationBuilder<unknown>;
    backgroundColor: AnnotationBuilder<unknown>;
};

/**
 * This tree of elements contains the data required to display the component. It is synchronized with the ComponentStore tree.
 */
export 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.
     */
    getInitialData?: () => unknown;
    /**
     * 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;
    /**
     * @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 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 all the form data that is of the FluentVariable type.
     * Additionally, the keys of the returned object are converted to the snake case.
     */
    get fluentData(): Record<string, FluentVariable_2>;
    /**
     * @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(): void;
    /**
     * @inheritDoc
     */
    clear(): 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;
}

/**
 * Represents a class that holds events related to component data.
 */
export 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;
}

/**
 * Context provider for the useComponentData hook. **Internal use only.**
 */
export declare const 
/**
* @returns the instance of the ComponentData of the currently rendered component.
*/
/**
 * Context provider for the useComponentData hook. **Internal use only.**
 */
ComponentDataProvider: Provider<ComponentData>;

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

/**
 * A component feature defining a component's characteristic.
 */
export declare type ComponentFeature = {
    /**
     * The component feature name.
     */
    name: string;
    /**
     * Flag, if true the feature can contain multiple values, false otherwise.
     */
    allowMultiple: boolean;
};

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

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

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

/**
 * Represents the event argument for the event when the component key changes.
 */
export 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.
 */
export declare type ComponentKind = 'container' | 'component' | 'template' | 'repeater' | DeprecatedSlotComponentKind | DeprecatedPresetComponentKind;

/**
 * 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.
 */
export declare type ComponentLocalizer = (componentStore: ComponentStore, language: Language) => Record<string, any>;

/**
 * Component metadata event listeners.
 */
export declare interface ComponentMetadataEventListeners {
    /**
     * The callback function that is called when the component is selected.
     * @param node the selected component data.
     * @param self the component data.
     */
    onSelectNode?: (node: ComponentData, self: ComponentData) => void;
}

/**
 * The component properties context type.
 */
export declare type ComponentPropertiesContext = {
    /**
     * The value property.
     */
    readonly valueProperty?: ReactProperty;
};

/**
 * The value of the component property.
 * @template T the value type.
 */
export 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.
 */
export declare type ComponentPropertyBindType = 'single' | 'array';

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

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

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

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

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

/**
 * Calculates all the properties of the form view component.
 */
export declare class ComponentState implements IComponentState {
    readonly data: ComponentData;
    readonly store: Store;
    readonly localizer: ComponentStoreLocalizer;
    readonly computeChildren: ComputeChildren;
    /**
     * The context for working with component properties.
     */
    readonly context: ComponentPropertiesContext;
    /**
     * Creates an instance 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 localizer the function to localize the properties of a component, returns a Record with localized properties.
     * @param computeChildren the function that calculates all child properties of a component.
     */
    constructor(data: ComponentData, store: Store, localizer: ComponentStoreLocalizer, computeChildren: ComputeChildren);
    /**
     * @inheritDoc
     */
    get get(): Record<string, any>;
    /**
     * @inheritDoc
     */
    get ownProps(): {
        className: string;
    };
    /**
     * @inheritDoc
     */
    get propsWithoutChildren(): Record<string, any>;
    /**
     * @returns the component's field value data, if the component can have a field value.
     */
    get value(): {
        [x: string]: unknown;
    } | undefined;
    /**
     * @returns the read-only property of a component if the component has a read-only flag.
     */
    get readOnly(): {
        [x: string]: any;
    } | undefined;
    /**
     * @inheritDoc
     */
    get isReadOnly(): any;
    /**
     * @returns the disabled property of a component if the component has a disabled flag.
     */
    get disabled(): {
        [x: string]: any;
    } | undefined;
    /**
     * @inheritDoc
     */
    get isDisabled(): any;
    /**
     * @returns the values for all properties of the component, calculates the values of the calculated properties.
     */
    get calculatedProps(): Record<string, any>;
    /**
     * @returns component localized properties.
     */
    get localizedProps(): Record<string, any>;
    /**
     * @returns the component event handlers that send events to the event bus.
     */
    get events(): Record<string, Function>;
    /**
     * Calculates and returns className property.
     * @returns the Record that contains the className property for the component.
     */
    get className(): {
        className: string;
    };
    /**
     * @inheritDoc
     */
    get wrapperClassName(): string;
    /**
     * @returns the Record that contains the style property for the component.
     */
    get style(): {
        style: any;
    } | undefined;
    /**
     * @inheritDoc
     */
    get wrapperStyle(): {
        style: any;
    } | undefined;
    /**
     * @returns all arbitrary HTML attributes of the component.
     */
    get htmlAttributes(): HtmlAttribute | undefined;
    /**
     * Calculates and returns all child components.
     * @param props the React component properties.
     * @returns the Record that contains the child components of a component.
     */
    children(props: any): Record<string, any>;
    /**
     * @inheritDoc
     */
    onDidMount(): void;
    /**
     * @inheritDoc
     */
    onWillUnmount(): void;
    private executeLifecycleEvent;
    private getStyleFromStylePart;
    private getClassNameFromCssPart;
    private get selfProps();
}

/**
 * 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.
 * @returns the component property calculator.
 */
export declare type ComponentStateFactory = (data: ComponentData, store: Store) => IComponentState;

/**
 * Component settings for serialization in JSON.
 */
export 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 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;
}

/**
 * Represents a function that localizes components based on the supplied component store.
 */
export declare type ComponentStoreLocalizer = (componentStore: ComponentStore) => Record<string, any>;

/**
 * The type for the style property of a React component.
 */
export 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 React component that displays an array of ComponentData. **Internal use only.**
 * @param props the React component properties.
 * @param props.data the array of child elements of the tree.
 * @param props.componentDataViewer the component displaying an item.
 * @returns the React element.
 */
export declare const ComponentTree: ({ data, componentDataViewer }: ComponentTreeProps) => JSX.Element;

/**
 * Properties of a form component tree element.
 */
export declare interface ComponentTreeProps {
    /**
     * An array of child elements of the tree.
     */
    data: ComponentData[];
    /**
     * The component displaying an item.
     */
    componentDataViewer?: ComponentType;
}

/**
 * Function that calculates all child properties of a component. **Internal use only.**
 * @param componentData the data required to display a component.
 * @param componentProps the calculated properties of the component.
 * @returns the Record with calculated child properties.
 */
export declare type ComputeChildren = (componentData: ComponentData, componentProps: Record<string, any>) => Record<string, any>;

/**
 * Metadata for the component container property for the form builder.
 * The Container property of a component can contain other React components.
 */
export declare class ContainerAnnotation extends Annotation {
    /**
     * The function that checks whether a child component can be inserted into a parent component.
     */
    insertPredicate?: (self: ComponentData, child: ComponentData) => boolean;
    /**
     * The default editor.
     */
    defaultEditor?: NodeEditorType;
    /**
     * Returns the node editor type for the component property.
     * @param componentProperty the component property.
     * @returns the node editor type for the component property.
     */
    getNodeEditorType(componentProperty?: ComponentProperty): NodeEditorType;
}

/**
 * The annotations for generic CSS properties of a container component.
 */
export declare const containerStyles: {
    flexDirection: OneOfBuilder<"column" | "row" | "column-reverse" | "row-reverse">;
    gap: TypedBuilder<string | undefined>;
    alignItems: OneOfBuilder<"center" | "start" | "baseline" | "end" | "stretch">;
    justifyContent: OneOfBuilder<"center" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "left" | "right">;
    flexWrap: OneOfBuilder<"wrap" | "nowrap" | "wrap-reverse">;
};

/**
 * Converts the input object to an ActionValues object. **Internal use only.**
 * @param obj the input object.
 * @returns the converted ActionValues object.
 */
export declare const createActionValuesFromObject: (obj: any) => ActionValues;

export declare const createAnnotation: <T>(editor: string) => AnnotationBuilder<T>;

/**
 * Creates non-nullable React context. **Internal use only.**
 * @param name the context name.
 * @param defaultValue the optional default value.
 * @returns the tuple [hook, provider, and common context] for interactions with a non-nullable context.
 */
export declare function createNonNullableContext<T>(name: string, defaultValue?: T | null): [() => T, Provider<T>, Context<T | null>];

/**
 * Creates an instance of the builder class to define the property's metadata.
 * @param editor editor type for editing the property.
 * @returns the instance of the builder class to define the property's metadata.
 */
export declare function createProperty(editor: FirstParameter<typeof createAnnotation>): AnnotationBuilder<unknown>;

export declare const createView: typeof View.create;

/**
 * The type for the CSS property of a React component.
 */
export 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.
 */
export declare type CssLoaderType = BiDi | 'common';

/**
 * The part of the CSS properties of a component.
 */
export declare type CssPart = 'css' | 'wrapperCss';

/**
 * The annotation builder for a component property containing a CSS dimension.
 */
export declare const cssSize: AnnotationBuilder<unknown>;

/**
 * Custom