devextreme-react/cjs/form.d.ts

DevExtreme React UI and Visualization Components

/*!
 * devextreme-react
 * Version: 24.2.6
 * Build date: Mon Mar 17 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-react
 */

import * as React from "react";
import { Ref, ReactElement } from "react";
import dxForm, { Properties } from "devextreme/ui/form";
import { IHtmlOptions, NestedComponentMeta } from "./core/component";
import type { ContentReadyEvent, DisposingEvent, EditorEnterKeyEvent, InitializedEvent, FormItemType, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem, FormItemComponent, LabelLocation } from "devextreme/ui/form";
import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, ClickEvent, OptionChangedEvent } from "devextreme/ui/button";
import type { ContentReadyEvent as TabPanelContentReadyEvent, DisposingEvent as TabPanelDisposingEvent, InitializedEvent as TabPanelInitializedEvent, OptionChangedEvent as TabPanelOptionChangedEvent, dxTabPanelOptions, dxTabPanelItem, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel";
import type { ValidationRuleType, HorizontalAlignment, VerticalAlignment, ButtonStyle, template, ButtonType, ComparisonOperator, TabsIconPosition, TabsStyle, Position } from "devextreme/common";
import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base";
import type { DataSourceOptions } from "devextreme/data/data_source";
import type { Store } from "devextreme/data/store";
import type DataSource from "devextreme/data/data_source";
import type * as CommonTypes from "devextreme/common";
type ReplaceFieldTypes<TSource, TReplacement> = {
    [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
};
type IFormOptionsNarrowedEvents = {
    onContentReady?: ((e: ContentReadyEvent) => void);
    onDisposing?: ((e: DisposingEvent) => void);
    onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
    onInitialized?: ((e: InitializedEvent) => void);
};
type IFormOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IFormOptionsNarrowedEvents> & IHtmlOptions & {
    defaultFormData?: any;
    onFormDataChange?: (value: any) => void;
}>;
interface FormRef {
    instance: () => dxForm;
}
declare const Form: (props: React.PropsWithChildren<IFormOptions> & {
    ref?: Ref<FormRef>;
}) => ReactElement | null;
type IAsyncRuleProps = React.PropsWithChildren<{
    ignoreEmptyValue?: boolean;
    message?: string;
    reevaluate?: boolean;
    type?: ValidationRuleType;
    validationCallback?: ((options: {
        column: Record<string, any>;
        data: Record<string, any>;
        formItem: Record<string, any>;
        rule: Record<string, any>;
        validator: Record<string, any>;
        value: string | number;
    }) => any);
}>;
declare const AsyncRule: ((props: IAsyncRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    ignoreEmptyValue?: boolean | undefined;
    message?: string | undefined;
    reevaluate?: boolean | undefined;
    type?: ValidationRuleType | undefined;
    validationCallback?: ((options: {
        column: Record<string, any>;
        data: Record<string, any>;
        formItem: Record<string, any>;
        rule: Record<string, any>;
        validator: Record<string, any>;
        value: string | number;
    }) => any) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IButtonItemProps = React.PropsWithChildren<{
    buttonOptions?: dxButtonOptions | undefined;
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    horizontalAlignment?: HorizontalAlignment;
    itemType?: FormItemType;
    name?: string | undefined;
    verticalAlignment?: VerticalAlignment;
    visible?: boolean;
    visibleIndex?: number | undefined;
}>;
declare const ButtonItem: ((props: IButtonItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    buttonOptions?: dxButtonOptions | undefined;
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    horizontalAlignment?: HorizontalAlignment | undefined;
    itemType?: FormItemType | undefined;
    name?: string | undefined;
    verticalAlignment?: VerticalAlignment | undefined;
    visible?: boolean | undefined;
    visibleIndex?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IButtonOptionsProps = React.PropsWithChildren<{
    accessKey?: string | undefined;
    activeStateEnabled?: boolean;
    bindingOptions?: Record<string, any>;
    disabled?: boolean;
    elementAttr?: Record<string, any>;
    focusStateEnabled?: boolean;
    height?: (() => number | string) | number | string | undefined;
    hint?: string | undefined;
    hoverStateEnabled?: boolean;
    icon?: string;
    onClick?: ((e: ClickEvent) => void);
    onContentReady?: ((e: ButtonContentReadyEvent) => void);
    onDisposing?: ((e: ButtonDisposingEvent) => void);
    onInitialized?: ((e: ButtonInitializedEvent) => void);
    onOptionChanged?: ((e: OptionChangedEvent) => void);
    rtlEnabled?: boolean;
    stylingMode?: ButtonStyle;
    tabIndex?: number;
    template?: ((buttonData: {
        icon: string;
        text: string;
    }, contentElement: any) => string | any) | template;
    text?: string;
    type?: ButtonType | string;
    useSubmitBehavior?: boolean;
    validationGroup?: string | undefined;
    visible?: boolean;
    width?: (() => number | string) | number | string | undefined;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
}>;
declare const ButtonOptions: ((props: IButtonOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    accessKey?: string | undefined;
    activeStateEnabled?: boolean | undefined;
    bindingOptions?: Record<string, any> | undefined;
    disabled?: boolean | undefined;
    elementAttr?: Record<string, any> | undefined;
    focusStateEnabled?: boolean | undefined;
    height?: (() => number | string) | number | string | undefined;
    hint?: string | undefined;
    hoverStateEnabled?: boolean | undefined;
    icon?: string | undefined;
    onClick?: ((e: ClickEvent) => void) | undefined;
    onContentReady?: ((e: ButtonContentReadyEvent) => void) | undefined;
    onDisposing?: ((e: ButtonDisposingEvent) => void) | undefined;
    onInitialized?: ((e: ButtonInitializedEvent) => void) | undefined;
    onOptionChanged?: ((e: OptionChangedEvent) => void) | undefined;
    rtlEnabled?: boolean | undefined;
    stylingMode?: ButtonStyle | undefined;
    tabIndex?: number | undefined;
    template?: template | ((buttonData: {
        icon: string;
        text: string;
    }, contentElement: any) => string | any) | undefined;
    text?: string | undefined;
    type?: string | undefined;
    useSubmitBehavior?: boolean | undefined;
    validationGroup?: string | undefined;
    visible?: boolean | undefined;
    width?: (() => number | string) | number | string | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IColCountByScreenProps = React.PropsWithChildren<{
    lg?: number | undefined;
    md?: number | undefined;
    sm?: number | undefined;
    xs?: number | undefined;
}>;
declare const ColCountByScreen: ((props: IColCountByScreenProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    lg?: number | undefined;
    md?: number | undefined;
    sm?: number | undefined;
    xs?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICompareRuleProps = React.PropsWithChildren<{
    comparisonTarget?: (() => any);
    comparisonType?: ComparisonOperator;
    ignoreEmptyValue?: boolean;
    message?: string;
    type?: ValidationRuleType;
}>;
declare const CompareRule: ((props: ICompareRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    comparisonTarget?: (() => any) | undefined;
    comparisonType?: ComparisonOperator | undefined;
    ignoreEmptyValue?: boolean | undefined;
    message?: string | undefined;
    type?: ValidationRuleType | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICustomRuleProps = React.PropsWithChildren<{
    ignoreEmptyValue?: boolean;
    message?: string;
    reevaluate?: boolean;
    type?: ValidationRuleType;
    validationCallback?: ((options: {
        column: Record<string, any>;
        data: Record<string, any>;
        formItem: Record<string, any>;
        rule: Record<string, any>;
        validator: Record<string, any>;
        value: string | number;
    }) => boolean);
}>;
declare const CustomRule: ((props: ICustomRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    ignoreEmptyValue?: boolean | undefined;
    message?: string | undefined;
    reevaluate?: boolean | undefined;
    type?: ValidationRuleType | undefined;
    validationCallback?: ((options: {
        column: Record<string, any>;
        data: Record<string, any>;
        formItem: Record<string, any>;
        rule: Record<string, any>;
        validator: Record<string, any>;
        value: string | number;
    }) => boolean) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IEmailRuleProps = React.PropsWithChildren<{
    ignoreEmptyValue?: boolean;
    message?: string;
    type?: ValidationRuleType;
}>;
declare const EmailRule: ((props: IEmailRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    ignoreEmptyValue?: boolean | undefined;
    message?: string | undefined;
    type?: ValidationRuleType | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IEmptyItemProps = React.PropsWithChildren<{
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    itemType?: FormItemType;
    name?: string | undefined;
    visible?: boolean;
    visibleIndex?: number | undefined;
}>;
declare const EmptyItem: ((props: IEmptyItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    itemType?: FormItemType | undefined;
    name?: string | undefined;
    visible?: boolean | undefined;
    visibleIndex?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IGroupItemProps = React.PropsWithChildren<{
    alignItemLabels?: boolean;
    caption?: string | undefined;
    captionTemplate?: ((data: {
        caption: string;
        component: dxForm;
        name: string;
    }, itemElement: any) => string | any) | template;
    colCount?: number;
    colCountByScreen?: Record<string, any> | {
        lg?: number | undefined;
        md?: number | undefined;
        sm?: number | undefined;
        xs?: number | undefined;
    };
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
    itemType?: FormItemType;
    name?: string | undefined;
    template?: ((data: {
        component: dxForm;
        formData: Record<string, any>;
    }, itemElement: any) => string | any) | template;
    visible?: boolean;
    visibleIndex?: number | undefined;
    captionRender?: (...params: any) => React.ReactNode;
    captionComponent?: React.ComponentType<any>;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
}>;
declare const GroupItem: ((props: IGroupItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    alignItemLabels?: boolean | undefined;
    caption?: string | undefined;
    captionTemplate?: template | ((data: {
        caption: string;
        component: dxForm;
        name: string;
    }, itemElement: any) => string | any) | undefined;
    colCount?: number | undefined;
    colCountByScreen?: Record<string, any> | {
        lg?: number | undefined;
        md?: number | undefined;
        sm?: number | undefined;
        xs?: number | undefined;
    } | undefined;
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
    itemType?: FormItemType | undefined;
    name?: string | undefined;
    template?: template | ((data: {
        component: dxForm;
        formData: Record<string, any>;
    }, itemElement: any) => string | any) | undefined;
    visible?: boolean | undefined;
    visibleIndex?: number | undefined;
    captionRender?: ((...params: any) => React.ReactNode) | undefined;
    captionComponent?: React.ComponentType<any> | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IItemProps = React.PropsWithChildren<{
    badge?: string;
    disabled?: boolean;
    html?: string;
    icon?: string;
    tabTemplate?: (() => string | any) | template;
    template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
    text?: string;
    title?: string;
    visible?: boolean;
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    dataField?: string | undefined;
    editorOptions?: any | undefined;
    editorType?: FormItemComponent;
    helpText?: string | undefined;
    isRequired?: boolean | undefined;
    itemType?: FormItemType;
    label?: Record<string, any> | {
        alignment?: HorizontalAlignment;
        location?: LabelLocation;
        showColon?: boolean;
        template?: ((itemData: {
            component: dxForm;
            dataField: string;
            editorOptions: any;
            editorType: string;
            name: string;
            text: string;
        }, itemElement: any) => string | any) | template;
        text?: string | undefined;
        visible?: boolean;
    };
    name?: string | undefined;
    validationRules?: Array<CommonTypes.ValidationRule>;
    visibleIndex?: number | undefined;
    alignItemLabels?: boolean;
    caption?: string | undefined;
    captionTemplate?: ((data: {
        caption: string;
        component: dxForm;
        name: string;
    }, itemElement: any) => string | any) | template;
    colCount?: number;
    colCountByScreen?: Record<string, any> | {
        lg?: number | undefined;
        md?: number | undefined;
        sm?: number | undefined;
        xs?: number | undefined;
    };
    items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
    tabPanelOptions?: dxTabPanelOptions | undefined;
    tabs?: Array<Record<string, any>> | {
        alignItemLabels?: boolean;
        badge?: string | undefined;
        colCount?: number;
        colCountByScreen?: Record<string, any> | {
            lg?: number | undefined;
            md?: number | undefined;
            sm?: number | undefined;
            xs?: number | undefined;
        };
        disabled?: boolean;
        icon?: string | undefined;
        items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
        tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined;
        template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined;
        title?: string | undefined;
    }[];
    buttonOptions?: dxButtonOptions | undefined;
    horizontalAlignment?: HorizontalAlignment;
    verticalAlignment?: VerticalAlignment;
    tabRender?: (...params: any) => React.ReactNode;
    tabComponent?: React.ComponentType<any>;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
    captionRender?: (...params: any) => React.ReactNode;
    captionComponent?: React.ComponentType<any>;
}>;
declare const Item: ((props: IItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    badge?: string | undefined;
    disabled?: boolean | undefined;
    html?: string | undefined;
    icon?: string | undefined;
    tabTemplate?: template | (() => string | any) | undefined;
    template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined;
    text?: string | undefined;
    title?: string | undefined;
    visible?: boolean | undefined;
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    dataField?: string | undefined;
    editorOptions?: any | undefined;
    editorType?: FormItemComponent | undefined;
    helpText?: string | undefined;
    isRequired?: boolean | undefined;
    itemType?: FormItemType | undefined;
    label?: Record<string, any> | {
        alignment?: HorizontalAlignment | undefined;
        location?: LabelLocation | undefined;
        showColon?: boolean | undefined;
        template?: template | ((itemData: {
            component: dxForm;
            dataField: string;
            editorOptions: any;
            editorType: string;
            name: string;
            text: string;
        }, itemElement: any) => string | any) | undefined;
        text?: string | undefined;
        visible?: boolean | undefined;
    } | undefined;
    name?: string | undefined;
    validationRules?: CommonTypes.ValidationRule[] | undefined;
    visibleIndex?: number | undefined;
    alignItemLabels?: boolean | undefined;
    caption?: string | undefined;
    captionTemplate?: template | ((data: {
        caption: string;
        component: dxForm;
        name: string;
    }, itemElement: any) => string | any) | undefined;
    colCount?: number | undefined;
    colCountByScreen?: Record<string, any> | {
        lg?: number | undefined;
        md?: number | undefined;
        sm?: number | undefined;
        xs?: number | undefined;
    } | undefined;
    items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
    tabPanelOptions?: dxTabPanelOptions | undefined;
    tabs?: Record<string, any>[] | {
        alignItemLabels?: boolean | undefined;
        badge?: string | undefined;
        colCount?: number | undefined;
        colCountByScreen?: Record<string, any> | {
            lg?: number | undefined;
            md?: number | undefined;
            sm?: number | undefined;
            xs?: number | undefined;
        } | undefined;
        disabled?: boolean | undefined;
        icon?: string | undefined;
        items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
        tabTemplate?: template | ((tabData: any, tabIndex: number, tabElement: any) => any) | undefined;
        template?: template | ((tabData: any, tabIndex: number, tabElement: any) => any) | undefined;
        title?: string | undefined;
    }[] | undefined;
    buttonOptions?: dxButtonOptions | undefined;
    horizontalAlignment?: HorizontalAlignment | undefined;
    verticalAlignment?: VerticalAlignment | undefined;
    tabRender?: ((...params: any) => React.ReactNode) | undefined;
    tabComponent?: React.ComponentType<any> | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
    captionRender?: ((...params: any) => React.ReactNode) | undefined;
    captionComponent?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ILabelProps = React.PropsWithChildren<{
    alignment?: HorizontalAlignment;
    location?: LabelLocation;
    showColon?: boolean;
    template?: ((itemData: {
        component: dxForm;
        dataField: string;
        editorOptions: any;
        editorType: string;
        name: string;
        text: string;
    }, itemElement: any) => string | any) | template;
    text?: string | undefined;
    visible?: boolean;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
}>;
declare const Label: ((props: ILabelProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    alignment?: HorizontalAlignment | undefined;
    location?: LabelLocation | undefined;
    showColon?: boolean | undefined;
    template?: template | ((itemData: {
        component: dxForm;
        dataField: string;
        editorOptions: any;
        editorType: string;
        name: string;
        text: string;
    }, itemElement: any) => string | any) | undefined;
    text?: string | undefined;
    visible?: boolean | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type INumericRuleProps = React.PropsWithChildren<{
    ignoreEmptyValue?: boolean;
    message?: string;
    type?: ValidationRuleType;
}>;
declare const NumericRule: ((props: INumericRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    ignoreEmptyValue?: boolean | undefined;
    message?: string | undefined;
    type?: ValidationRuleType | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IPatternRuleProps = React.PropsWithChildren<{
    ignoreEmptyValue?: boolean;
    message?: string;
    pattern?: RegExp | string;
    type?: ValidationRuleType;
}>;
declare const PatternRule: ((props: IPatternRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    ignoreEmptyValue?: boolean | undefined;
    message?: string | undefined;
    pattern?: string | RegExp | undefined;
    type?: ValidationRuleType | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IRangeRuleProps = React.PropsWithChildren<{
    ignoreEmptyValue?: boolean;
    max?: Date | number | string;
    message?: string;
    min?: Date | number | string;
    reevaluate?: boolean;
    type?: ValidationRuleType;
}>;
declare const RangeRule: ((props: IRangeRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    ignoreEmptyValue?: boolean | undefined;
    max?: string | number | Date | undefined;
    message?: string | undefined;
    min?: string | number | Date | undefined;
    reevaluate?: boolean | undefined;
    type?: ValidationRuleType | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IRequiredRuleProps = React.PropsWithChildren<{
    message?: string;
    trim?: boolean;
    type?: ValidationRuleType;
}>;
declare const RequiredRule: ((props: IRequiredRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    message?: string | undefined;
    trim?: boolean | undefined;
    type?: ValidationRuleType | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ISimpleItemProps = React.PropsWithChildren<{
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    dataField?: string | undefined;
    editorOptions?: any | undefined;
    editorType?: FormItemComponent;
    helpText?: string | undefined;
    isRequired?: boolean | undefined;
    itemType?: FormItemType;
    label?: Record<string, any> | {
        alignment?: HorizontalAlignment;
        location?: LabelLocation;
        showColon?: boolean;
        template?: ((itemData: {
            component: dxForm;
            dataField: string;
            editorOptions: any;
            editorType: string;
            name: string;
            text: string;
        }, itemElement: any) => string | any) | template;
        text?: string | undefined;
        visible?: boolean;
    };
    name?: string | undefined;
    template?: ((data: {
        component: dxForm;
        dataField: string;
        editorOptions: Record<string, any>;
        editorType: string;
        name: string;
    }, itemElement: any) => string | any) | template;
    validationRules?: Array<CommonTypes.ValidationRule>;
    visible?: boolean;
    visibleIndex?: number | undefined;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
}>;
declare const SimpleItem: ((props: ISimpleItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    dataField?: string | undefined;
    editorOptions?: any | undefined;
    editorType?: FormItemComponent | undefined;
    helpText?: string | undefined;
    isRequired?: boolean | undefined;
    itemType?: FormItemType | undefined;
    label?: Record<string, any> | {
        alignment?: HorizontalAlignment | undefined;
        location?: LabelLocation | undefined;
        showColon?: boolean | undefined;
        template?: template | ((itemData: {
            component: dxForm;
            dataField: string;
            editorOptions: any;
            editorType: string;
            name: string;
            text: string;
        }, itemElement: any) => string | any) | undefined;
        text?: string | undefined;
        visible?: boolean | undefined;
    } | undefined;
    name?: string | undefined;
    template?: template | ((data: {
        component: dxForm;
        dataField: string;
        editorOptions: Record<string, any>;
        editorType: string;
        name: string;
    }, itemElement: any) => string | any) | undefined;
    validationRules?: CommonTypes.ValidationRule[] | undefined;
    visible?: boolean | undefined;
    visibleIndex?: number | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IStringLengthRuleProps = React.PropsWithChildren<{
    ignoreEmptyValue?: boolean;
    max?: number;
    message?: string;
    min?: number;
    trim?: boolean;
    type?: ValidationRuleType;
}>;
declare const StringLengthRule: ((props: IStringLengthRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    ignoreEmptyValue?: boolean | undefined;
    max?: number | undefined;
    message?: string | undefined;
    min?: number | undefined;
    trim?: boolean | undefined;
    type?: ValidationRuleType | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITabProps = React.PropsWithChildren<{
    alignItemLabels?: boolean;
    badge?: string | undefined;
    colCount?: number;
    colCountByScreen?: Record<string, any> | {
        lg?: number | undefined;
        md?: number | undefined;
        sm?: number | undefined;
        xs?: number | undefined;
    };
    disabled?: boolean;
    icon?: string | undefined;
    items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
    tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined;
    template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined;
    title?: string | undefined;
    tabRender?: (...params: any) => React.ReactNode;
    tabComponent?: React.ComponentType<any>;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
}>;
declare const Tab: ((props: ITabProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    alignItemLabels?: boolean | undefined;
    badge?: string | undefined;
    colCount?: number | undefined;
    colCountByScreen?: Record<string, any> | {
        lg?: number | undefined;
        md?: number | undefined;
        sm?: number | undefined;
        xs?: number | undefined;
    } | undefined;
    disabled?: boolean | undefined;
    icon?: string | undefined;
    items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
    tabTemplate?: template | ((tabData: any, tabIndex: number, tabElement: any) => any) | undefined;
    template?: template | ((tabData: any, tabIndex: number, tabElement: any) => any) | undefined;
    title?: string | undefined;
    tabRender?: ((...params: any) => React.ReactNode) | undefined;
    tabComponent?: React.ComponentType<any> | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITabbedItemProps = React.PropsWithChildren<{
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    itemType?: FormItemType;
    name?: string | undefined;
    tabPanelOptions?: dxTabPanelOptions | undefined;
    tabs?: Array<Record<string, any>> | {
        alignItemLabels?: boolean;
        badge?: string | undefined;
        colCount?: number;
        colCountByScreen?: Record<string, any> | {
            lg?: number | undefined;
            md?: number | undefined;
            sm?: number | undefined;
            xs?: number | undefined;
        };
        disabled?: boolean;
        icon?: string | undefined;
        items?: Array<dxFormButtonItem | dxFormEmptyItem | dxFormGroupItem | dxFormSimpleItem | dxFormTabbedItem>;
        tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined;
        template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined;
        title?: string | undefined;
    }[];
    visible?: boolean;
    visibleIndex?: number | undefined;
}>;
declare const TabbedItem: ((props: ITabbedItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    colSpan?: number | undefined;
    cssClass?: string | undefined;
    itemType?: FormItemType | undefined;
    name?: string | undefined;
    tabPanelOptions?: dxTabPanelOptions | undefined;
    tabs?: Record<string, any>[] | {
        alignItemLabels?: boolean | undefined;
        badge?: string | undefined;
        colCount?: number | undefined;
        colCountByScreen?: Record<string, any> | {
            lg?: number | undefined;
            md?: number | undefined;
            sm?: number | undefined;
            xs?: number | undefined;
        } | undefined;
        disabled?: boolean | undefined;
        icon?: string | undefined;
        items?: (dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem)[] | undefined;
        tabTemplate?: template | ((tabData: any, tabIndex: number, tabElement: any) => any) | undefined;
        template?: template | ((tabData: any, tabIndex: number, tabElement: any) => any) | undefined;
        title?: string | undefined;
    }[] | undefined;
    visible?: boolean | undefined;
    visibleIndex?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITabPanelOptionsProps = React.PropsWithChildren<{
    accessKey?: string | undefined;
    activeStateEnabled?: boolean;
    animationEnabled?: boolean;
    bindingOptions?: Record<string, any>;
    dataSource?: Array<any | dxTabPanelItem | string> | DataSource | DataSourceOptions | null | Store | string;
    deferRendering?: boolean;
    disabled?: boolean;
    elementAttr?: Record<string, any>;
    focusStateEnabled?: boolean;
    height?: (() => number | string) | number | string | undefined;
    hint?: string | undefined;
    hoverStateEnabled?: boolean;
    iconPosition?: TabsIconPosition;
    itemHoldTimeout?: number;
    items?: Array<any | dxTabPanelItem | string>;
    itemTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
    itemTitleTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
    loop?: boolean;
    noDataText?: string;
    onContentReady?: ((e: TabPanelContentReadyEvent) => void);
    onDisposing?: ((e: TabPanelDisposingEvent) => void);
    onInitialized?: ((e: TabPanelInitializedEvent) => void);
    onItemClick?: ((e: ItemClickEvent) => void);
    onItemContextMenu?: ((e: ItemContextMenuEvent) => void);
    onItemHold?: ((e: ItemHoldEvent) => void);
    onItemRendered?: ((e: ItemRenderedEvent) => void);
    onOptionChanged?: ((e: TabPanelOptionChangedEvent) => void);
    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
    onSelectionChanging?: ((e: SelectionChangingEvent) => void);
    onTitleClick?: ((e: TitleClickEvent) => void);
    onTitleHold?: ((e: TitleHoldEvent) => void);
    onTitleRendered?: ((e: TitleRenderedEvent) => void);
    repaintChangesOnly?: boolean;
    rtlEnabled?: boolean;
    scrollByContent?: boolean;
    scrollingEnabled?: boolean;
    selectedIndex?: number;
    selectedItem?: any;
    showNavButtons?: boolean;
    stylingMode?: TabsStyle;
    swipeEnabled?: boolean;
    tabIndex?: number;
    tabsPosition?: Position;
    visible?: boolean;
    width?: (() => number | string) | number | string | undefined;
    defaultItems?: Array<any | dxTabPanelItem | string>;
    onItemsChange?: (value: Array<any | dxTabPanelItem | string>) => void;
    defaultSelectedIndex?: number;
    onSelectedIndexChange?: (value: number) => void;
    defaultSelectedItem?: any;
    onSelectedItemChange?: (value: any) => void;
    itemRender?: (...params: any) => React.ReactNode;
    itemComponent?: React.ComponentType<any>;
    itemTitleRender?: (...params: any) => React.ReactNode;
    itemTitleComponent?: React.ComponentType<any>;
}>;
declare const TabPanelOptions: ((props: ITabPanelOptionsProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    accessKey?: string | undefined;
    activeStateEnabled?: boolean | undefined;
    animationEnabled?: boolean | undefined;
    bindingOptions?: Record<string, any> | undefined;
    dataSource?: string | any[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined;
    deferRendering?: boolean | undefined;
    disabled?: boolean | undefined;
    elementAttr?: Record<string, any> | undefined;
    focusStateEnabled?: boolean | undefined;
    height?: (() => number | string) | number | string | undefined;
    hint?: string | undefined;
    hoverStateEnabled?: boolean | undefined;
    iconPosition?: TabsIconPosition | undefined;
    itemHoldTimeout?: number | undefined;
    items?: any[] | undefined;
    itemTemplate?: template | ((itemData: any, itemIndex: number, itemElement: any) => string | any) | undefined;
    itemTitleTemplate?: template | ((itemData: any, itemIndex: number, itemElement: any) => string | any) | undefined;
    loop?: boolean | undefined;
    noDataText?: string | undefined;
    onContentReady?: ((e: TabPanelContentReadyEvent) => void) | undefined;
    onDisposing?: ((e: TabPanelDisposingEvent) => void) | undefined;
    onInitialized?: ((e: TabPanelInitializedEvent) => void) | undefined;
    onItemClick?: ((e: ItemClickEvent) => void) | undefined;
    onItemContextMenu?: ((e: ItemContextMenuEvent) => void) | undefined;
    onItemHold?: ((e: ItemHoldEvent) => void) | undefined;
    onItemRendered?: ((e: ItemRenderedEvent) => void) | undefined;
    onOptionChanged?: ((e: TabPanelOptionChangedEvent) => void) | undefined;
    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
    onSelectionChanging?: ((e: SelectionChangingEvent) => void) | undefined;
    onTitleClick?: ((e: TitleClickEvent) => void) | undefined;
    onTitleHold?: ((e: TitleHoldEvent) => void) | undefined;
    onTitleRendered?: ((e: TitleRenderedEvent) => void) | undefined;
    repaintChangesOnly?: boolean | undefined;
    rtlEnabled?: boolean | undefined;
    scrollByContent?: boolean | undefined;
    scrollingEnabled?: boolean | undefined;
    selectedIndex?: number | undefined;
    selectedItem?: any;
    showNavButtons?: boolean | undefined;
    stylingMode?: TabsStyle | undefined;
    swipeEnabled?: boolean | undefined;
    tabIndex?: number | undefined;
    tabsPosition?: Position | undefined;
    visible?: boolean | undefined;
    width?: (() => number | string) | number | string | undefined;
    defaultItems?: any[] | undefined;
    onItemsChange?: ((value: Array<any | dxTabPanelItem | string>) => void) | undefined;
    defaultSelectedIndex?: number | undefined;
    onSelectedIndexChange?: ((value: number) => void) | undefined;
    defaultSelectedItem?: any;
    onSelectedItemChange?: ((value: any) => void) | undefined;
    itemRender?: ((...params: any) => React.ReactNode) | undefined;
    itemComponent?: React.ComponentType<any> | undefined;
    itemTitleRender?: ((...params: any) => React.ReactNode) | undefined;
    itemTitleComponent?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITabPanelOptionsItemProps = React.PropsWithChildren<{
    badge?: string;
    disabled?: boolean;
    html?: string;
    icon?: string;
    tabTemplate?: (() => string | any) | template;
    template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
    text?: string;
    title?: string;
    visible?: boolean;
    tabRender?: (...params: any) => React.ReactNode;
    tabComponent?: React.ComponentType<any>;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
}>;
declare const TabPanelOptionsItem: ((props: ITabPanelOptionsItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    badge?: string | undefined;
    disabled?: boolean | undefined;
    html?: string | undefined;
    icon?: string | undefined;
    tabTemplate?: template | (() => string | any) | undefined;
    template?: template | ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | undefined;
    text?: string | undefined;
    title?: string | undefined;
    visible?: boolean | undefined;
    tabRender?: ((...params: any) => React.ReactNode) | undefined;
    tabComponent?: React.ComponentType<any> | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IValidationRuleProps = React.PropsWithChildren<{
    message?: string;
    trim?: boolean;
    type?: ValidationRuleType;
    ignoreEmptyValue?: boolean;
    max?: Date | number | string;
    min?: Date | number | string;
    reevaluate?: boolean;
    validationCallback?: ((options: {
        column: Record<string, any>;
        data: Record<string, any>;
        formItem: Record<string, any>;
        rule: Record<string, any>;
        validator: Record<string, any>;
        value: string | number;
    }) => boolean);
    comparisonTarget?: (() => any);
    comparisonType?: ComparisonOperator;
    pattern?: RegExp | string;
}>;
declare const ValidationRule: ((props: IValidationRuleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    message?: string | undefined;
    trim?: boolean | undefined;
    type?: ValidationRuleType | undefined;
    ignoreEmptyValue?: boolean | undefined;
    max?: string | number | Date | undefined;
    min?: string | number | Date | undefined;
    reevaluate?: boolean | undefined;
    validationCallback?: ((options: {
        column: Record<string, any>;
        data: Record<string, any>;
        formItem: Record<string, any>;
        rule: Record<string, any>;
        validator: Record<string, any>;
        value: string | number;
    }) => boolean) | undefined;
    comparisonTarget?: (() => any) | undefined;
    comparisonType?: ComparisonOperator | undefined;
    pattern?: string | RegExp | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
export default Form;
export { Form, IFormOptions, FormRef, AsyncRule, IAsyncRuleProps, ButtonItem, IButtonItemProps, ButtonOptions, IButtonOptionsProps, ColCountByScreen, IColCountByScreenProps, CompareRule, ICompareRuleProps, CustomRule, ICustomRuleProps, EmailRule, IEmailRuleProps, EmptyItem, IEmptyItemProps, GroupItem, IGroupItemProps, Item, IItemProps, Label, ILabelProps, NumericRule, INumericRuleProps, PatternRule, IPatternRuleProps, RangeRule, IRangeRuleProps, RequiredRule, IRequiredRuleProps, SimpleItem, ISimpleItemProps, StringLengthRule, IStringLengthRuleProps, Tab, ITabProps, TabbedItem, ITabbedItemProps, TabPanelOptions, ITabPanelOptionsProps, TabPanelOptionsItem, ITabPanelOptionsItemProps, ValidationRule, IValidationRuleProps };
import type * as FormTypes from 'devextreme/ui/form_types';
export { FormTypes };