@progress/kendo-react-form - npm Package Compare versions

Comparing version 13.3.0 to 13.4.0-develop.1

Field.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FieldProps } from './interfaces/FieldProps.js';
+import * as React from 'react';
+/**
+ * Represents the Field component that is used inside the KendoReact Form component.
+ * It uses `name` property to access field value and meta information from Form state.
+ */
+export declare const Field: {
+    (props: FieldProps & {
+        [customProp: string]: any;
+    }): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    displayName: string;
+};

FieldArray.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FieldArrayProps } from './interfaces/FieldArrayProps.js';
+import * as React from 'react';
+/**
+ * Represents the FieldArray component that is used inside the KendoReact Form component.
+ * It provides methods via render props for common array manipulations.
+ */
+export declare const FieldArray: React.FunctionComponent<FieldArrayProps>;

FieldWrapper.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormClassStructure } from '@progress/kendo-react-common';
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
+import * as React from 'react';
+/**
+ * Represents the props of the KendoReact FieldWrapper component.
+ */
+export interface FieldWrapperProps {
+    /**
+     * @hidden
+     */
+    children: any;
+    /**
+     * The styles that are applied to the FieldWrapper.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets a class for the FieldWrapper DOM element.
+     */
+    className?: string;
+    /**
+     * Specifies the direction of the content.
+     */
+    dir?: string;
+    /**
+     * Defines the colspan for the form field element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * @hidden
+     */
+    unstyled?: FormClassStructure;
+}
+/**
+ * Represents the KendoReact FieldWrapper component.
+ * It's designed to wrap the field editor, Label, Hint and Error components.
+ * The FieldWrapper supports only single editor inside it.
+ */
+export declare const FieldWrapper: React.FunctionComponent<FieldWrapperProps>;

Form.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { FieldValidatorType } from './interfaces/FieldValidator.js';
+import { FormProps } from './interfaces/FormProps.js';
+import { KeyValue } from './interfaces/KeyValue.js';
+import * as React from 'react';
+/**
+ * Represents the [KendoReact Form component](https://www.telerik.com/kendo-react-ui/components/form).
+ *
+ * @example
+ * ```jsx
+ * export const FormInput = (fieldRenderProps) => {
+ *     const onValueChange = React.useCallback(
+ *         (event) => fieldRenderProps.onChange(event.target.value),
+ *         [fieldRenderProps.onChange]
+ *     );
+ *     return (
+ *         <input
+ *             className={'k-input'}
+ *             value={fieldRenderProps.value}
+ *             onChange={onValueChange}
+ *         />
+ *     );
+ * };
+ *
+ * export const App = () => {
+ *     const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem));
+ *     return (
+ *         <Form
+ *             initialValues={{title: ''}}
+ *             onSubmit={handleSubmit}
+ *             render={(formRenderProps) => (
+ *                 <div>
+ *                     <Field name={'title'} component={FormInput} />
+ *                     <Button
+ *                         disabled={!formRenderProps.allowSubmit}
+ *                         onClick={formRenderProps.onSubmit}
+ *                     >
+ *                         Submit
+ *                     </Button>
+ *                 </div>
+ *             )}
+ *         />
+ *     );
+ * };
+ * ```
+ */
+export declare class Form extends React.Component<FormProps, {}> {
+    /**
+     * @hidden
+     */
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        initialValues: PropTypes.Requireable<any>;
+        onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
+        onSubmitClick: PropTypes.Requireable<(...args: any[]) => any>;
+        render: PropTypes.Validator<(...args: any[]) => any>;
+        id: PropTypes.Requireable<string>;
+    };
+    private _key?;
+    private _touched;
+    private _visited;
+    private _modified;
+    private _validatorsByField;
+    private _values;
+    private _fields;
+    private _unmounted;
+    private _submitted;
+    private readonly showLicenseWatermark;
+    private readonly licenseMessage?;
+    /**
+     * @hidden
+     */
+    private _accumulatorTimeout;
+    /**
+     * @hidden
+     */
+    get touched(): KeyValue<boolean>;
+    /**
+     * @hidden
+     */
+    set touched(value: KeyValue<boolean>);
+    /**
+     * @hidden
+     */
+    get visited(): KeyValue<boolean>;
+    /**
+     * @hidden
+     */
+    set visited(value: KeyValue<boolean>);
+    /**
+     * @hidden
+     */
+    get modified(): KeyValue<boolean>;
+    /**
+     * @hidden
+     */
+    set modified(value: KeyValue<boolean>);
+    /**
+     * @hidden
+     */
+    get validatorsByField(): KeyValue<(FieldValidatorType | FieldValidatorType[] | undefined)[]>;
+    /**
+     * @hidden
+     */
+    set validatorsByField(value: KeyValue<(FieldValidatorType | FieldValidatorType[] | undefined)[]>);
+    /**
+     * @hidden
+     */
+    get values(): KeyValue<any>;
+    /**
+     * @hidden
+     */
+    set values(value: KeyValue<any>);
+    /**
+     * @hidden
+     */
+    get fields(): string[];
+    /**
+     * @hidden
+     */
+    get formErrors(): KeyValue<string> | undefined;
+    /**
+     * @hidden
+     */
+    get errors(): KeyValue<string>;
+    /**
+     * @hidden
+     */
+    constructor(props: FormProps);
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    isValid: () => boolean;
+    /**
+     * @hidden
+     */
+    accumulatedForceUpdate: () => void;
+    /**
+     * @hidden
+     */
+    resetForm: () => void;
+    /**
+     * Method for resetting the form state outside the form component.
+     *
+     * > Use `onReset` only if you cannot achieve the desired behavior through the Field component or by FormRenderProps.
+     */
+    onReset: () => void;
+    /**
+     * @hidden
+     */
+    addField: (field: string) => void;
+    /**
+     * @hidden
+     */
+    onSubmit: (event: React.SyntheticEvent<any>) => void;
+    /**
+     * Method for emiting changes to a specific field outside the form component.
+     *
+     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component by FormRenderProps.
+     */
+    onChange: (name: string, options: {
+        value: any;
+    }) => void;
+    /**
+     * @hidden
+     */
+    onFocus: (name: string, skipForceUpdate?: boolean) => void;
+    /**
+     * @hidden
+     */
+    onBlur: (name: string, skipForceUpdate?: boolean) => void;
+    /**
+     * @hidden
+     */
+    onFieldRegister: (name: string, validator: FieldValidatorType | FieldValidatorType[] | undefined) => () => void;
+    /**
+     * @hidden
+     */
+    isFormValid: (errors: KeyValue<any>) => boolean;
+    /**
+     * @hidden
+     */
+    isFormModified: (modified: KeyValue<boolean>, fields: string[]) => boolean;
+    /**
+     * @hidden
+     */
+    isFormHasNotTouched: (touched: KeyValue<boolean>, fields: string[]) => boolean;
+    /**
+     * @hidden
+     */
+    isFormTouched: (touched: KeyValue<boolean>, fields: string[]) => boolean;
+    /**
+     * @hidden
+     */
+    isFormVisited: (visited: KeyValue<boolean>, fields: string[]) => boolean;
+    /**
+     * @hidden
+     */
+    valueGetter: (fieldName: string) => any;
+    /**
+     * @hidden
+     */
+    valueSetter: (fieldName: string, value: any) => any;
+    /**
+     * @hidden
+     */
+    onArrayAction: (name: string) => void;
+    /**
+     * @hidden
+     */
+    onInsert: (name: string, options: {
+        value: any;
+        index: number;
+    }) => void;
+    /**
+     * @hidden
+     */
+    onUnshift: (name: string, options: {
+        value: any;
+    }) => void;
+    /**
+     * @hidden
+     */
+    onPush: (name: string, options: {
+        value: any;
+    }) => void;
+    /**
+     * @hidden
+     */
+    onPop: (name: string) => any;
+    /**
+     * @hidden
+     */
+    onRemove: (name: string, options: {
+        index: number;
+    }) => any;
+    /**
+     * @hidden
+     */
+    onReplace: (name: string, options: {
+        value: any;
+        index: number;
+    }) => void;
+    /**
+     * @hidden
+     */
+    onMove: (name: string, options: {
+        prevIndex: number;
+        nextIndex: number;
+    }) => void;
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+}
+/**
+ * Represent the `ref` of the Form component.
+ */
+export interface FormHandle extends Pick<Form, keyof Form> {
+}

FormContext.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FieldValidatorType } from './interfaces/FieldValidator.js';
+import * as React from 'react';
+/** @hidden */
+export type FormContextType = {
+    onSubmit: (event: React.SyntheticEvent<any>) => void;
+    onChange: (name: string, options: {
+        value: any;
+    }) => void;
+    onFocus: (name: string) => void;
+    onBlur: (name: string) => void;
+    onUnshift: (name: string, options: {
+        value: any;
+    }) => void;
+    onPush: (name: string, options: {
+        value: any;
+    }) => void;
+    onInsert: (name: string, options: {
+        index: number;
+        value: any;
+    }) => void;
+    onPop: (name: string) => any;
+    onRemove: (name: string, options: {
+        index: number;
+    }) => any;
+    onReplace: (name: string, options: {
+        index: number;
+        value: any;
+    }) => void;
+    onMove: (name: string, options: {
+        prevIndex: number;
+        nextIndex: number;
+    }) => void;
+    registerField: (name: string, validator: FieldValidatorType | FieldValidatorType[] | undefined) => void;
+    valueGetter: (name: string) => any;
+    errors: {
+        [name: string]: string;
+    };
+    touched: {
+        [name: string]: boolean;
+    };
+    visited: {
+        [name: string]: boolean;
+    };
+    modified: {
+        [name: string]: boolean;
+    };
+    id: string;
+};
+/** @hidden */
+export declare const FormContext: React.Context<FormContextType | null>;

FormElement.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormClassStructure } from '@progress/kendo-react-common';
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
+import { Gutters } from './interfaces/Gutters.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_FORM_GUTTERS: {
+    cols?: number | string | null;
+    rows?: number | string | null;
+};
+/**
+ * Represents the props of the KendoReact FormElement component.
+ */
+export interface FormElementProps {
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * The styles that are applied to the form DOM element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets a class for the form DOM element.
+     */
+    className?: string;
+    /**
+     * If set to `true` enable the horizontal layout of the form editors.
+     */
+    horizontal?: boolean;
+    /**
+     * Sets the id of the form DOM element. Takes priority over the Form's id.
+     */
+    id?: string;
+    /**
+     * Defines the number of columns in the form. Can be a number or an array of responsive breakpoints.
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the form. You can specify gutters for rows and columns. Number is equivalent to px.
+     */
+    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
+    /**
+     * @hidden
+     */
+    [customProp: string]: any;
+    /**
+     * Configures the `size` of the Form.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <FormElement size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     */
+    unstyled?: FormClassStructure;
+}
+/**
+ * Represent the `ref` of the FormElement component.
+ */
+export interface FormElementHandle {
+    /**
+     * Represents the props of the FormElement component.
+     */
+    props: FormElementProps;
+    /**
+     * Represents the element of the FormElement component.
+     */
+    element: HTMLFormElement | null;
+}
+/**
+ * Represents the KendoReact FormElement component.
+ * It's small wrapper around HTML form element which automatically attach the
+ * Form component's `onSubmit` render prop and Kendo CSS classes.
+ * Other props are passed to the DOM node.
+ */
+export declare const FormElement: React.FunctionComponent<FormElementProps>;

FormFieldSet.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
+import { Gutters } from './interfaces/Gutters.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_FIELDSET_GUTTERS: {
+    cols?: number | string | null;
+    rows?: number | string | null;
+};
+/**
+ * Represents the props of the KendoReact FormFieldSet component.
+ */
+export interface FormFieldSetProps {
+    /**
+     * Defines the number of columns of the fieldset. Can be a number or an array of responsive breakpoints.
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the colspan for the fieldset related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the fieldset. You can specify gutters for rows and columns. Number is equivalent to px.
+     */
+    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the legend for the fieldset.
+     */
+    legend?: string;
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * The styles that are applied to the form DOM element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets a class for the form DOM element.
+     */
+    className?: string;
+}
+/**
+ * Represent the `ref` of the FormFieldSet component.
+ */
+export interface FormFieldSetHandle {
+    /**
+     * Represents the props of the  FormFieldSet component.
+     */
+    props: FormFieldSetProps;
+    /**
+     * Represents the element of the FormFieldSet component.
+     */
+    element: HTMLFieldSetElement | null;
+}
+/**
+ * Represents the KendoReact FormFieldSet component.
+ */
+export declare const FormFieldSet: React.FunctionComponent<FormFieldSetProps>;

FormSeparator.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
+import * as React from 'react';
+/**
+ * Represents the props of the KendoReact FormSeparator component.
+ */
+export interface FormSeparatorProps {
+    /**
+     * Defines the colspan for the separator element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * The styles that are applied to the form DOM element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets a class for the form DOM element.
+     */
+    className?: string;
+}
+/**
+ * Represent the `ref` of the FormSeparator component.
+ */
+export interface FormSeparatorHandle {
+    /**
+     * Represents the props of the FormSeparator component.
+     */
+    props: FormSeparatorProps;
+    /**
+     * Represents the element of the FormSeparator component.
+     */
+    element: HTMLSpanElement | null;
+}
+/**
+ * Represents the KendoReact FormSeparator component.
+ */
+export declare const FormSeparator: React.FunctionComponent<FormSeparatorProps>;

interfaces/FieldArrayProps.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FieldValidatorType } from './FieldValidator.js';
+/**
+ * Contains the props for the FieldArray component that you use inside forms.
+ */
+export interface FieldArrayProps {
+    /**
+     * Sets the field name in the form state.
+     */
+    name: string;
+    /**
+     * Can be set to a React component.
+     * [`FieldArrayRenderProps`](https://www.telerik.com/kendo-react-ui/components/form/api/fieldarrayrenderprops).
+     */
+    component: React.ComponentType<any>;
+    /**
+     * Validates the field array and returns error messages.
+     * Only synchronous functions are supported.
+     */
+    validator?: FieldValidatorType | FieldValidatorType[];
+    /**
+     * Provides child elements that are passed to the rendered component.
+     */
+    children?: any;
+    /**
+     * @hidden
+     */
+    [customProp: string]: any;
+}

interfaces/FieldArrayRenderProps.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Contains props that are passed to components rendered inside FieldArray components.
+ */
+export interface FieldArrayRenderProps {
+    /**
+     * Represents the current value of the FieldArray
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/custom-components#toc-using-basic-properties)).
+     */
+    value: any;
+    /**
+     * Contains the error message from validation.
+     * The field is valid when this is empty.
+     */
+    validationMessage: string | null;
+    /**
+     * Shows whether the user has interacted with the field.
+     * Becomes true when the field loses focus.
+     */
+    touched: boolean;
+    /**
+     * Shows whether the field value has changed from its initial value.
+     * Becomes true when the field value changes for the first time.
+     */
+    modified: boolean;
+    /**
+     * Shows whether the user has focused on the field.
+     * Becomes true when the field receives focus.
+     */
+    visited: boolean;
+    /**
+     * Shows whether the field passes validation and has been touched.
+     */
+    valid: boolean;
+    /**
+     * Contains child elements that are passed to the FieldArray.
+     */
+    children: any;
+    /**
+     * Contains the field name in the form state.
+     */
+    name: string;
+    /**
+     * Adds a value to the beginning of the array.
+     */
+    onUnshift: (options: {
+        value: any;
+    }) => number;
+    /**
+     * Adds a value to the end of the array.
+     */
+    onPush: (options: {
+        value: any;
+    }) => void;
+    /**
+     * Inserts a value at a specific position in the array.
+     */
+    onInsert: (options: {
+        value: any;
+        index: number;
+    }) => void;
+    /**
+     * Removes and returns the last value from the array.
+     */
+    onPop: () => any;
+    /**
+     * Removes a value at a specific position in the array.
+     */
+    onRemove: (options: {
+        index: number;
+    }) => any;
+    /**
+     * Replaces a value at a specific position in the array.
+     */
+    onReplace: (options: {
+        value: any;
+        index: number;
+    }) => void;
+    /**
+     * Moves a value from one position to another in the array.
+     */
+    onMove: (options: {
+        prevIndex: number;
+        nextIndex: number;
+    }) => void;
+    /**
+     * @hidden
+     */
+    [customProp: string]: any;
+}

interfaces/FieldProps.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FieldValidatorType } from './FieldValidator.js';
+import { ResponsiveFormBreakPoint } from './ResponsiveFormBreakPoint.js';
+/**
+ * Contains the props for the Field component that you use inside forms.
+ */
+export interface FieldProps {
+    /**
+     * Sets the field name in the form state.
+     * You can use nested fields like `user.age` and `users[0].name`.
+     *
+     * @example
+     * ```jsx
+     * <Field name="user.age" component="input" />
+     * ```
+     */
+    name: string;
+    /**
+     * Can be set to a React component or to the name of an HTML element,
+     * for example, `input`, `select`, and `textarea`.
+     * The props that are passed to the component are the
+     * [`FieldRenderProps`](https://www.telerik.com/kendo-react-ui/components/form/api/fieldrenderprops).
+     *
+     * @example
+     * ```jsx
+     * <Field name="user.name" component="input" />
+     * ```
+     */
+    component: string | React.ComponentType<any>;
+    /**
+     * Validates the field value and returns error messages.
+     *
+     * Only synchronous functions are supported.
+     * Use `useMemo` to avoid infinite loops when using an array of validators.
+     *
+     * @example
+     * ```jsx
+     * const validator = value => value ? "" : "This field is required.";
+     * <Field name="user.email" component="input" validator={validator} />
+     * ```
+     */
+    validator?: FieldValidatorType | FieldValidatorType[];
+    /**
+     * Provides child elements that are passed to the rendered component.
+     *
+     * @example
+     * ```jsx
+     * <Field name="user.name" component="input">
+     *   <span>Additional content</span>
+     * </Field>
+     * ```
+     */
+    children?: any;
+    /**
+     * Sets how many columns the field spans in the form layout.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Handles changes to the field value.
+     *
+     * Use this to update related fields. The Form automatically updates its state when this fires.
+     *
+     * @example
+     * ```jsx
+     * const handleChange = event => console.log(event);
+     * <Field name="user.name" component="input" onChange={handleChange} />
+     * ```
+     */
+    onChange?: (event: any) => void;
+}

interfaces/FieldRenderProps.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FieldRenderPropsBase } from '@progress/kendo-react-common';
+/**
+ * Contains props that are passed to components rendered inside Field components.
+ */
+export interface FieldRenderProps extends FieldRenderPropsBase {
+}

interfaces/FieldValidator.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Validates a single field and returns an error message or success.
+ *
+ * * value - Contains the current field value
+ * * valueGetter - Gets values from other fields using field paths like 'user.name'
+ * * fieldProps - Contains the field's props, including the field name
+ *
+ * Returns a string for validation errors or undefined for successful validation.
+ */
+export type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
+    name: string;
+}) => string | undefined;

interfaces/FormProps.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormRenderProps } from './FormRenderProps.js';
+import { FormValidatorType } from './FormValidator.js';
+import { FormSubmitClickEvent } from './FormSubmitClickEvent.js';
+/**
+ * Contains the props for the KendoReact Form component.
+ */
+export interface FormProps {
+    /**
+     * Sets the starting values for form fields.
+     *
+     * Set initial values to prevent errors when switching from uncontrolled to controlled mode.
+     *
+     * @example
+     * ```jsx
+     * const initialValues = { user: { name: '', age: 0 } };
+     * <Form initialValues={initialValues} render={props => <form>form content</form>} />
+     * ```
+     */
+    initialValues?: {
+        [name: string]: any;
+    };
+    /**
+     * Validation errors that override field and form validators.
+     *
+     * Provides validation errors directly as an object, unlike the validator prop which expects a callback.
+     * When both validator and errors exist for a field, the errors prop takes precedence.
+     *
+     * @example
+     * ```jsx
+     * const [errors, setErrors] = useState({});
+     * const handleSubmit = async (data) => {
+     *     const response = await submitToServer(data);
+     *     if (response.errors) {
+     *         setErrors(response.errors);
+     *     }
+     * };
+     * <Form errors={errors} onSubmit={handleSubmit} render={props => <FormElement>form content</FormElement>} />
+     * ```
+     */
+    errors?: {
+        [name: string]: string;
+    };
+    /**
+     * Fires each time any field value changes.
+     *
+     * The third parameter `valueGetter` allows accessing other field values, useful for cross-field validation or clearing related errors.
+     *
+     * @example
+     * ```jsx
+     * const handleChange = (fieldName, value, valueGetter) => {
+     *     // For nested fields like 'user.name', access related fields like 'user.email'
+     *     if (fieldName === 'user.name') {
+     *         const email = valueGetter('user.email');
+     *         console.log('Name changed:', value, 'Email is:', email);
+     *     }
+     *     // Clear error for the changed field
+     *     if (formErrors[fieldName]) {
+     *         setFormErrors(prev => ({ ...prev, [fieldName]: '' }));
+     *     }
+     * };
+     * <Form errors={formErrors} onChange={handleChange} render={props => <FormElement>form content</FormElement>} />
+     * ```
+     */
+    onChange?: (fieldName: string, value: any, valueGetter: (name: string) => any) => void;
+    /**
+     * Validates the entire form and returns error messages.
+     *
+     * Return a key-value pair where the key is the field path and the value is the error message.
+     * You can validate nested fields like 'users[0].name'.
+     * Only synchronous functions are supported.
+     *
+     * @example
+     * ```jsx
+     * const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } });
+     * <Form validator={validator} render={props => <form> form content </form>} />
+     * ```
+     */
+    validator?: FormValidatorType;
+    /**
+     * Handles form submission when validation passes and fields are modified.
+     *
+     * Fires when at least one field is modified, the user clicks Submit, and validation passes.
+     *
+     * @example
+     * ```jsx
+     * const handleSubmit = (values, event) => console.log(values);
+     * <Form onSubmit={handleSubmit} render={props => <form> form content </form>} />
+     * ```
+     */
+    onSubmit?: (values: {
+        [name: string]: any;
+    }, event?: React.SyntheticEvent<any>) => void;
+    /**
+     * Handles every submit button click, even when the form is invalid or unchanged.
+     *
+     * Use this for advanced scenarios where you need to handle all submit events.
+     *
+     * @example
+     * ```jsx
+     * const handleSubmitClick = event => console.log(event);
+     * <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
+     * ```
+     */
+    onSubmitClick?: (event: FormSubmitClickEvent) => void;
+    /**
+     * Renders the form content using the provided render function.
+     *
+     * @example
+     * ```jsx
+     * const renderForm = props => <form> form content </form>;
+     * <Form render={renderForm} />
+     * ```
+     */
+    render: (props: FormRenderProps) => any;
+    /**
+     * Allows the form to submit even when no fields have been modified.
+     *
+     * @example
+     * ```jsx
+     * <Form ignoreModified={true} render={props => <form>form content </form>} />
+     * ```
+     */
+    ignoreModified?: boolean;
+    /**
+     * @hidden
+     * This prop comes from the `withId` HOC and is used internally by the Form.
+     * It replaces the previously used guid() function and generates an `id` of the Form.
+     */
+    id?: string;
+}

interfaces/FormRenderProps.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { KeyValue } from './KeyValue.js';
+/**
+ * Contains props that are passed to the form's render function.
+ */
+export interface FormRenderProps {
+    /**
+     * Submits the form when called.
+     * Use this with the onClick property of Submit buttons.
+     *
+     * @example
+     * ```jsx
+     * const handleSubmit = event => console.log("Form submitted");
+     * <Button onClick={props.onSubmit}>Submit</Button>
+     * ```
+     */
+    onSubmit: (event: React.SyntheticEvent<any>) => void;
+    /**
+     * A callback for emitting changes to a specific field without using the Field component
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-changing-the-field-value)).
+     *
+     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component.
+     *
+     * @example
+     * ```jsx
+     * props.onChange("user.name", { value: "John Doe" });
+     * ```
+     */
+    onChange: (name: string, options: {
+        value: any;
+    }) => void;
+    /**
+     * Resets the form to its initial state.
+     *
+     * @example
+     * ```jsx
+     * <Button onClick={props.onFormReset}>Reset</Button>
+     * ```
+     */
+    onFormReset: () => void;
+    /**
+     * Contains current validation errors organized by field path.
+     *
+     * @example
+     * ```jsx
+     * console.log(props.errors);
+     * ```
+     */
+    errors: KeyValue<string>;
+    /**
+     * Shows whether the form passes all validation rules.
+     * Becomes false if any field fails validation.
+     *
+     * @example
+     * ```jsx
+     * console.log(props.valid);
+     * ```
+     */
+    valid: boolean;
+    /**
+     * Shows whether the user has interacted with any field.
+     * Becomes true when any field loses focus or the user tries to submit.
+     *
+     * @example
+     * ```jsx
+     * console.log(props.touched);
+     * ```
+     */
+    touched: boolean;
+    /**
+     * Shows whether the user has focused on any field.
+     * Becomes true when any field receives focus or the user tries to submit.
+     *
+     * @example
+     * ```jsx
+     * console.log(props.visited);
+     * ```
+     */
+    visited: boolean;
+    /**
+     * Shows whether any field value has changed from its initial value.
+     * Becomes true when any field value changes for the first time.
+     *
+     * @example
+     * ```jsx
+     * console.log(props.modified);
+     * ```
+     */
+    modified: boolean;
+    /**
+     * Shows whether the form has been successfully submitted.
+     * Use this to detect if the user is leaving before saving changes.
+     *
+     * @example
+     * ```jsx
+     * console.log(props.submitted);
+     * ```
+     */
+    submitted: boolean;
+    /**
+     * Shows whether the form can be submitted.
+     * When true and form is valid, you can submit. When true and form is invalid, you can show all validation errors.
+     *
+     * Use this to control the disabled state of Submit buttons.
+     *
+     * @example
+     * ```jsx
+     * console.log(props.allowSubmit);
+     * ```
+     */
+    allowSubmit: boolean;
+    /**
+     * A callback for getting the value of a field without using the Field component
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-reading-the-field-state)).
+     * Useful for creating and modifying the UI based on the field values.
+     *
+     * @example
+     * ```jsx
+     * const value = props.valueGetter("user.name");
+     * console.log(value);
+     * ```
+     */
+    valueGetter: (name: string) => any;
+}

interfaces/FormSubmitClickEvent.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Contains data for the form submit click event.
+ */
+export interface FormSubmitClickEvent {
+    /**
+     * Provides the current values from all form fields.
+     */
+    values: {
+        [name: string]: any;
+    };
+    /**
+     * Contains the original browser event that triggered the submit.
+     */
+    event?: React.SyntheticEvent<any>;
+    /**
+     * Shows whether the form passes all validation rules.
+     */
+    isValid: boolean;
+    /**
+     * Shows whether any form fields have been changed from their initial values.
+     */
+    isModified: boolean;
+}

interfaces/FormValidator.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { KeyValue } from './KeyValue.js';
+/**
+ * Validates an entire form and returns error messages.
+ *
+ * * values - Contains the current values from all form fields
+ * * valueGetter - Gets field values using field paths like 'user.name'
+ *
+ * Returns a key-value pair where the key is the field path and the value is the error message.
+ */
+export type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;

interfaces/Gutters.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ResponsiveFormBreakPoint } from './ResponsiveFormBreakPoint.js';
+/**
+ * Represents the [gutters](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) configuration for a form layout.
+ * It allows defining the spacing between the columns and rows of the form.
+ * Each property can be a number or an array of responsive breakpoints.
+ */
+export interface Gutters {
+    /**
+     * Defines the gutters for the columns in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    cols?: string | number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the rows in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    rows?: string | number | ResponsiveFormBreakPoint[];
+}

interfaces/KeyValue.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents a key-value pair collection where keys are strings.
+ */
+export interface KeyValue<ValueType> {
+    [name: string]: ValueType;
+}

interfaces/ResponsiveFormBreakPoint.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Defines responsive breakpoints for form layouts.
+ * Each breakpoint sets minimum and maximum widths and values for columns or spacing at different screen sizes.
+ */
+export interface ResponsiveFormBreakPoint {
+    /**
+     * Sets the minimum screen width in pixels for this breakpoint.
+     */
+    minWidth?: number;
+    /**
+     * Sets the maximum screen width in pixels for this breakpoint.
+     */
+    maxWidth?: number;
+    /**
+     * Sets the number of columns or spacing for form controls at this screen size.
+     */
+    value: number | string;
+}

package-metadata.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

utils.d.ts

+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Gutters } from './interfaces/Gutters.js';
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
+/**
+ * @hidden
+ */
+export declare function innerWidth(element: HTMLElement): number;
+/**
+ * Returns the value for the current container width based on responsive breakpoints.
+ *
+ * @hidden
+ */
+export declare function processBreakpoints(breakpoints: ResponsiveFormBreakPoint[], containerWidth: number): number | string;
+/**
+ * @hidden
+ */
+export declare const processCssValue: (value: number | string) => string | null;
+/**
+ * @hidden
+ */
+export declare const calculateColumns: (cols: number | ResponsiveFormBreakPoint[] | undefined, containerWidth: number) => number | null;
+/**
+ * @hidden
+ *
+ * Generates CSS class names for columns
+ */
+export declare const generateColumnClass: (columnsNumber: number | null) => string;
+/**
+ * @hidden
+ *
+ * Calculates column span value based on responsive breakpoints or fixed number
+ */
+export declare const calculateColSpan: (colSpan: number | ResponsiveFormBreakPoint[], containerWidth: number) => number | null;
+/**
+ * @hidden
+ *
+ * Generates CSS class name for column span
+ */
+export declare const generateColSpanClass: (colSpan: number | null) => string;
+/**
+ * @hidden
+ *
+ * Calculates gutters for rows and columns based on responsive breakpoints or fixed values
+ */
+export declare const calculateGutters: (gutters: number | string | ResponsiveFormBreakPoint[] | Gutters | undefined, containerWidth: number) => {
+    cols: number | string | null;
+    rows: number | string | null;
+} | null;
+/**
+ * @hidden
+ *
+ * Generates CSS styles for gutters based on the provided gutters object.
+ */
+export declare const generateGuttersStyling: (gutters: {
+    cols?: number | string | null;
+    rows?: number | string | null;
+} | null, defaultGutters: {
+    cols?: number | string | null;
+    rows?: number | string | null;
+}) => string;

dist/cdn/js/kendo-react-form.js

@@ -15,2 +15,2 @@ /**
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactForm={},e.React,e.PropTypes,e.KendoReactCommon)}(this,(function(e,t,s,i){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),l=e=>{const{name:t,component:s,validator:i,children:o,onChange:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect((()=>u?u.registerField(t,i):void 0),[t,d,i]);const c=r.useCallback((e=>{const s=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);u.onChange(t,{value:s}),l&&l.call(void 0,e)}),[t,d,l]),h=r.useCallback((e=>u.onChange(t,{value:e.target.value})),[t,d]),m=r.useCallback((()=>u.onBlur(t)),[t,d]),f=r.useCallback((()=>u.onFocus(t)),[t,d]);if(!u)return null;const p=u.valueGetter(t);if("string"==typeof s)return r.createElement(s,{onChange:h,onBlur:m,onFocus:f,value:p,children:o,...a});const v={children:o,...a,onChange:c,onBlur:m,onFocus:f,value:p,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),name:t};return o||delete v.children,r.createElement(s,v)};l.displayName="KendoReactField";const a=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.3.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),u=class extends r.Component{constructor(e){super(e),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._values={},this._fields={},this._unmounted=!1,this._submitted=!1,this.showLicenseWatermark=!1,this.isValid=()=>this.isFormValid(this.errors),this.accumulatedForceUpdate=()=>{this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),this._accumulatorTimeout=window.setTimeout((()=>{this._accumulatorTimeout=void 0,this.forceUpdate()}),0)},this.resetForm=()=>{this.values=i.clone(this.props.initialValues),this._key=i.guid(),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._fields={},this._submitted=!1,this.forceUpdate()},this.onReset=()=>this.resetForm(),this.addField=e=>{this._fields[e]=!0},this.onSubmit=e=>{const t={},s=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),s.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const i=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,s);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:i,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,i,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:s}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,s),this.props.onChange&&this.props.onChange(e,s,this.valueGetter),this.forceUpdate()},this.onFocus=(e,t)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},t||this.forceUpdate())},this.onBlur=(e,t)=>{this.touched[e]||(this.onFocus(e,t),this.touched={...this.touched,[e]:!0},t||this.forceUpdate())},this.onFieldRegister=(e,t)=>{this.addField(e);const s=this.validatorsByField[e]||[],i=s.findIndex((e=>void 0===e)),o=[...s];i>=0?o[i]=t:o.push(t);const r=i>=0?i:o.length-1;return this.validatorsByField={...this.validatorsByField,[e]:o},this.accumulatedForceUpdate(),()=>{const t=[...this.validatorsByField[e]||[]],s=!!t[r];t[r]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&!this._unmounted&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some((t=>!!e[t])),this.isFormModified=(e,t)=>t.some((t=>e[t])),this.isFormHasNotTouched=(e,t)=>t.some((t=>!e[t])),this.isFormTouched=(e,t)=>t.some((t=>e[t])),this.isFormVisited=(e,t)=>t.some((t=>e[t])),this.valueGetter=e=>i.getter(e)(this.values),this.valueSetter=(e,t)=>i.setter(e)(this.values,t),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,0,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,s),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],s=t.pop();return this.valueSetter(e,t),this.forceUpdate(),s},this.onRemove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s.splice(t.index,1);return this.valueSetter(e,s),this.forceUpdate(),i},this.onReplace=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,1,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s[t.prevIndex];s.splice(t.prevIndex,1),s.splice(t.nextIndex,0,i),this.valueSetter(e,s),this.forceUpdate()},this.showLicenseWatermark=!i.validatePackage(a,{component:"Form"}),this.licenseMessage=i.getLicenseMessage(a),this.values=i.clone(e.initialValues)}get touched(){return this._touched}set touched(e){this._touched=e}get visited(){return this._visited}set visited(e){this._visited=e}get modified(){return this._modified}set modified(e){this._modified=e}get validatorsByField(){return this._validatorsByField}set validatorsByField(e){this._validatorsByField=e}get values(){return this._values}set values(e){this._values=e}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const e={},t=this.fields,s=this.validatorsByField;t.forEach((t=>{if(e[t]="",s[t]){const i=[];s[t].forEach((e=>{Array.isArray(e)?i.push(...e):i.push(e)})),i.find((s=>{if(s){const i=s(this.valueGetter(t),this.valueGetter,{name:t});if(i)return e[t]=i,!0}return!1}))}}));const o=this.formErrors;return o&&i.cloneObject(o,e),this.props.errors&&i.cloneObject(this.props.errors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,s=this.visited,o=this.modified,l=this.fields,a=this.errors,u=this.isFormValid(a),d=this.isFormModified(o,l),c=this.isFormTouched(t,l),h=this.isFormVisited(s,l),m=this.isFormHasNotTouched(t,l)&&!u||u&&(this.props.ignoreModified||d);return r.createElement(r.Fragment,null,r.createElement(n.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:a,modified:o,touched:t,visited:s,registerField:this.onFieldRegister,onSubmit:this.onSubmit,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onUnshift:this.onUnshift,onPush:this.onPush,onInsert:this.onInsert,onPop:this.onPop,onRemove:this.onRemove,onReplace:this.onReplace,onMove:this.onMove}},e({valid:u,modified:d,touched:c,visited:h,submitted:this._submitted,valueGetter:this.valueGetter,errors:a,allowSubmit:m,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&r.createElement(i.WatermarkOverlay,{message:this.licenseMessage}))}};u.displayName="KendoReactForm",u.propTypes={initialValues:s.any,onSubmit:s.func,onSubmitClick:s.func,render:s.func.isRequired,id:s.string};let d=u;const c=e=>{const{name:t,component:s,validator:i,type:o,children:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect((()=>u?u.registerField(t,i):void 0),[t,d,i]);const c=r.useCallback((e=>u.onUnshift(t,e)),[t,d]),h=r.useCallback((e=>u.onPush(t,e)),[t,d]),m=r.useCallback((e=>u.onInsert(t,e)),[t,d]),f=r.useCallback((()=>u.onPop(t)),[t,d]),p=r.useCallback((e=>u.onRemove(t,e)),[t,d]),v=r.useCallback((e=>u.onReplace(t,e)),[t,d]),y=r.useCallback((e=>u.onMove(t,e)),[t,d]);if(!u)return null;const F=u.valueGetter(t);return r.createElement(s,{value:F,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),onUnshift:c,onPush:h,onInsert:m,onPop:f,onRemove:p,onReplace:v,onMove:y,children:l,name:t,...a})};c.displayName="KendoReactFieldArray";function h(e){let t=e.clientWidth;const s=getComputedStyle(e);return t-=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.borderLeftWidth)||0),t-=(parseFloat(s.paddingRight)||0)+(parseFloat(s.borderRightWidth)||0),t}function m(e,t){var s,i;if(null==e||!e.length||null==t)return"";for(const[o,r]of e.entries()){const n=o>0&&void 0!==e[o-1].maxWidth?e[o-1].maxWidth:void 0,l=o<e.length-1&&void 0!==e[o+1].minWidth?e[o+1].minWidth:void 0,a=null!=(s=r.minWidth)?s:void 0!==n?n+1:0,u=null!=(i=r.maxWidth)?i:void 0!==l?l-1:1/0;if(t>=a&&t<=u)return r.value}return""}const f=e=>{if("number"==typeof e)return`${e}px`;if("string"==typeof e){const t=e.trim(),s=parseInt(t,10);return!isNaN(s)&&Number.isFinite(s)?s.toString()===t?`${s}px`:e:null}return null},p=(e,t)=>{if(!e)return null;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return"number"==typeof e?e:null},v=e=>e&&e>0?`k-grid-cols-${e}`:"",y=(e,t)=>{if(!e)return null;if("number"==typeof e)return e;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return null},F=e=>e?`k-col-span-${e}`:"",g=(e,t)=>{if(!e)return null;if("number"==typeof e)return{cols:e,rows:e};if("string"==typeof e){if(!e.includes(" "))return{cols:e,rows:e};const t=e.split(" ");return{cols:t[1],rows:t[0]}}if(Array.isArray(e)){const s=m(e,t)||null;return null!==s?{cols:s,rows:s}:null}if("object"==typeof e){const s=e,i={rows:null,cols:null};return void 0!==s.cols&&null!==s.cols?"number"==typeof s.cols||"string"==typeof s.cols?i.cols=s.cols:Array.isArray(s.cols)&&(i.cols=m(s.cols,t)||null):i.cols=null,void 0!==s.rows?"number"==typeof s.rows||"string"==typeof s.rows?i.rows=s.rows:Array.isArray(s.rows)&&(i.rows=m(s.rows,t)||null):i.rows=null,i}return null},b=(e,t)=>{var s,i,o,r;return`${f(null!=(i=null!=(s=null==e?void 0:e.rows)?s:t.rows)?i:"0px")} ${f(null!=(r=null!=(o=null==e?void 0:e.cols)?o:t.cols)?r:"32px")}`},w=e=>{const{className:t,style:s,dir:o,colSpan:n,children:l}=e,a=r.useRef(null),u=i.useUnstyled(),d=e.unstyled||u,c=d&&d.uForm,[m,f]=r.useState(void 0),p=r.useRef(null);r.useEffect((()=>{a.current&&(p.current=a.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=null==p?void 0:p.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==n){const t=y(n,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}}),[n]);const v=r.useMemo((()=>i.classNames(i.uForm.field({c:c,isRtl:"rtl"===o}),m,t)),[c,t,o,m]);return r.createElement("div",{ref:a,className:v,style:s},l)};w.displayName="KendoReactFieldWrapper";const R={rows:"0px",cols:"32px"},C=r.forwardRef(((e,t)=>{const s={size:"medium",...e},o=r.useRef(null),l=r.useRef(null);r.useImperativeHandle(l,(()=>({element:o.current,props:s}))),r.useImperativeHandle(t,(()=>l.current));const a=r.useContext(n),{className:u,style:d,horizontal:c,size:m,cols:f,gutters:y=R,...F}=s,w=i.useUnstyled(),C=w&&w.uForm,[S,_]=r.useState(void 0),[E,N]=r.useState(void 0),k=r.useMemo((()=>c?"horizontal":!1===c?"vertical":void 0),[c]),A=r.useMemo((()=>i.classNames(i.uForm.form({c:C,size:m,orientation:k}),u)),[u,C,k,m]);return r.useEffect((()=>{if(!f&&!y)return void _(void 0);if(!y)return void N(void 0);const e=()=>{let e=0;if(o.current?e=h(o.current):"undefined"!=typeof window&&(e=window.innerWidth),f){const t=p(f,e);_(v(t))}if(y){const t=g(y,e);N(t?{gap:b(t,R)}:{gap:b(R,R)})}};let t;e();const s=o.current;return s&&"undefined"!=typeof window&&"ResizeObserver"in window&&(t=new ResizeObserver(e),t.observe(s)),()=>{t&&s&&t.unobserve(s)}}),[f,y]),r.createElement("form",{ref:o,...F,id:e.id||(a?a.id:void 0),style:e.style,className:A,onSubmit:a?a.onSubmit:void 0},f?r.createElement("div",{className:i.classNames(i.uForm.formLayout({c:C}),S),style:E},e.children):e.children)}));C.displayName="KendoReactFormElement";const S=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current,props:e}))),r.useImperativeHandle(t,(()=>o.current));const{className:n,style:l,colSpan:a,...u}=e,d=i.useUnstyled(),c=d&&d.uForm,[m,f]=r.useState(void 0),p=r.useRef(null);r.useEffect((()=>{s.current&&(p.current=s.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=p.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==a){const t=y(a,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}}),[a]);const v=r.useMemo((()=>i.classNames(i.uForm.separator({c:c}),m,n)),[n,c,m]);return r.createElement("span",{ref:s,...u,style:e.style,className:v})}));S.displayName="KendoReactFormSeparator";const _={rows:"0px",cols:"16px"},E=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current,props:e}))),r.useImperativeHandle(t,(()=>o.current));const{className:n,style:l,cols:a,colSpan:u,gutters:d=_,legend:c,...m}=e,f=i.useUnstyled(),w=f&&f.uForm,[R,C]=r.useState(void 0),[S,E]=r.useState(void 0),[N,k]=r.useState(void 0),A=r.useMemo((()=>i.classNames(i.uForm.fieldset({c:w}),S,n)),[n,w,S]),x=r.useMemo((()=>i.classNames(i.uForm.formLayout({c:w}),R)),[w,R]),U=r.useMemo((()=>i.classNames(i.uForm.legend({c:w}))),[w]),O=r.useRef(null);return r.useEffect((()=>{s.current&&(O.current=s.current.closest("form"))}),[]),r.useEffect((()=>{if(!a)return void C(void 0);if(!d)return void k(void 0);const e=null==O?void 0:O.current,t=()=>{let t=0;e?t=h(e):"undefined"!=typeof window&&(t=window.innerWidth);const s=p(a,t);if(C(v(s)),void 0!==u){const e=y(u,t);E(F(e))}else E(void 0);if(d){const e=g(d,t);k(e?{gap:b(e,_)}:{gap:b(_,_)})}};let s;return t(),e&&"undefined"!=typeof window&&"ResizeObserver"in window&&(s=new ResizeObserver(t),s.observe(e)),()=>{s&&e&&s.unobserve(e)}}),[a,u,d]),r.createElement("fieldset",{ref:s,...m,style:e.style,className:A},c&&r.createElement("legend",{className:U},c),a?r.createElement("div",{className:x,style:N},e.children):e.children)}));E.displayName="KendoReactFormFieldSet";const N=i.withIdHOC(d);N.displayName="KendoReactForm",e.Field=l,e.FieldArray=c,e.FieldWrapper=w,e.Form=N,e.FormClassComponent=d,e.FormElement=C,e.FormFieldSet=E,e.FormSeparator=S}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactForm={},e.React,e.PropTypes,e.KendoReactCommon)}(this,function(e,t,s,i){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(s){if("default"!==s){var i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:function(){return e[s]}})}}),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),l=e=>{const{name:t,component:s,validator:i,children:o,onChange:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect(()=>u?u.registerField(t,i):void 0,[t,d,i]);const c=r.useCallback(e=>{const s=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);u.onChange(t,{value:s}),l&&l.call(void 0,e)},[t,d,l]),h=r.useCallback(e=>u.onChange(t,{value:e.target.value}),[t,d]),m=r.useCallback(()=>u.onBlur(t),[t,d]),f=r.useCallback(()=>u.onFocus(t),[t,d]);if(!u)return null;const p=u.valueGetter(t);if("string"==typeof s)return r.createElement(s,{onChange:h,onBlur:m,onFocus:f,value:p,children:o,...a});const v={children:o,...a,onChange:c,onBlur:m,onFocus:f,value:p,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),name:t};return o||delete v.children,r.createElement(s,v)};l.displayName="KendoReactField";const a=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.4.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),u=class extends r.Component{constructor(e){super(e),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._values={},this._fields={},this._unmounted=!1,this._submitted=!1,this.showLicenseWatermark=!1,this.isValid=()=>this.isFormValid(this.errors),this.accumulatedForceUpdate=()=>{this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),this._accumulatorTimeout=window.setTimeout(()=>{this._accumulatorTimeout=void 0,this.forceUpdate()},0)},this.resetForm=()=>{this.values=i.clone(this.props.initialValues),this._key=i.guid(),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._fields={},this._submitted=!1,this.forceUpdate()},this.onReset=()=>this.resetForm(),this.addField=e=>{this._fields[e]=!0},this.onSubmit=e=>{const t={},s=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),s.forEach(e=>{t[e]=!0}),this.visited={...t},this.touched={...t};const i=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,s);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:i,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,i,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:s}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,s),this.props.onChange&&this.props.onChange(e,s,this.valueGetter),this.forceUpdate()},this.onFocus=(e,t)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},t||this.forceUpdate())},this.onBlur=(e,t)=>{this.touched[e]||(this.onFocus(e,t),this.touched={...this.touched,[e]:!0},t||this.forceUpdate())},this.onFieldRegister=(e,t)=>{this.addField(e);const s=this.validatorsByField[e]||[],i=s.findIndex(e=>void 0===e),o=[...s];i>=0?o[i]=t:o.push(t);const r=i>=0?i:o.length-1;return this.validatorsByField={...this.validatorsByField,[e]:o},this.accumulatedForceUpdate(),()=>{const t=[...this.validatorsByField[e]||[]],s=!!t[r];t[r]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&!this._unmounted&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some(t=>!!e[t]),this.isFormModified=(e,t)=>t.some(t=>e[t]),this.isFormHasNotTouched=(e,t)=>t.some(t=>!e[t]),this.isFormTouched=(e,t)=>t.some(t=>e[t]),this.isFormVisited=(e,t)=>t.some(t=>e[t]),this.valueGetter=e=>i.getter(e)(this.values),this.valueSetter=(e,t)=>i.setter(e)(this.values,t),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,0,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,s),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],s=t.pop();return this.valueSetter(e,t),this.forceUpdate(),s},this.onRemove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s.splice(t.index,1);return this.valueSetter(e,s),this.forceUpdate(),i},this.onReplace=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,1,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s[t.prevIndex];s.splice(t.prevIndex,1),s.splice(t.nextIndex,0,i),this.valueSetter(e,s),this.forceUpdate()},this.showLicenseWatermark=!i.validatePackage(a,{component:"Form"}),this.licenseMessage=i.getLicenseMessage(a),this.values=i.clone(e.initialValues)}get touched(){return this._touched}set touched(e){this._touched=e}get visited(){return this._visited}set visited(e){this._visited=e}get modified(){return this._modified}set modified(e){this._modified=e}get validatorsByField(){return this._validatorsByField}set validatorsByField(e){this._validatorsByField=e}get values(){return this._values}set values(e){this._values=e}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const e={},t=this.fields,s=this.validatorsByField;t.forEach(t=>{if(e[t]="",s[t]){const i=[];s[t].forEach(e=>{Array.isArray(e)?i.push(...e):i.push(e)}),i.find(s=>{if(s){const i=s(this.valueGetter(t),this.valueGetter,{name:t});if(i)return e[t]=i,!0}return!1})}});const o=this.formErrors;return o&&i.cloneObject(o,e),this.props.errors&&i.cloneObject(this.props.errors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,s=this.visited,o=this.modified,l=this.fields,a=this.errors,u=this.isFormValid(a),d=this.isFormModified(o,l),c=this.isFormTouched(t,l),h=this.isFormVisited(s,l),m=this.isFormHasNotTouched(t,l)&&!u||u&&(this.props.ignoreModified||d);return r.createElement(r.Fragment,null,r.createElement(n.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:a,modified:o,touched:t,visited:s,registerField:this.onFieldRegister,onSubmit:this.onSubmit,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onUnshift:this.onUnshift,onPush:this.onPush,onInsert:this.onInsert,onPop:this.onPop,onRemove:this.onRemove,onReplace:this.onReplace,onMove:this.onMove}},e({valid:u,modified:d,touched:c,visited:h,submitted:this._submitted,valueGetter:this.valueGetter,errors:a,allowSubmit:m,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&r.createElement(i.WatermarkOverlay,{message:this.licenseMessage}))}};u.displayName="KendoReactForm",u.propTypes={initialValues:s.any,onSubmit:s.func,onSubmitClick:s.func,render:s.func.isRequired,id:s.string};let d=u;const c=e=>{const{name:t,component:s,validator:i,type:o,children:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect(()=>u?u.registerField(t,i):void 0,[t,d,i]);const c=r.useCallback(e=>u.onUnshift(t,e),[t,d]),h=r.useCallback(e=>u.onPush(t,e),[t,d]),m=r.useCallback(e=>u.onInsert(t,e),[t,d]),f=r.useCallback(()=>u.onPop(t),[t,d]),p=r.useCallback(e=>u.onRemove(t,e),[t,d]),v=r.useCallback(e=>u.onReplace(t,e),[t,d]),y=r.useCallback(e=>u.onMove(t,e),[t,d]);if(!u)return null;const F=u.valueGetter(t);return r.createElement(s,{value:F,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),onUnshift:c,onPush:h,onInsert:m,onPop:f,onRemove:p,onReplace:v,onMove:y,children:l,name:t,...a})};function h(e){let t=e.clientWidth;const s=getComputedStyle(e);return t-=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.borderLeftWidth)||0),t-=(parseFloat(s.paddingRight)||0)+(parseFloat(s.borderRightWidth)||0),t}function m(e,t){var s,i;if(null==e||!e.length||null==t)return"";for(const[o,r]of e.entries()){const n=o>0&&void 0!==e[o-1].maxWidth?e[o-1].maxWidth:void 0,l=o<e.length-1&&void 0!==e[o+1].minWidth?e[o+1].minWidth:void 0,a=null!=(s=r.minWidth)?s:void 0!==n?n+1:0,u=null!=(i=r.maxWidth)?i:void 0!==l?l-1:1/0;if(t>=a&&t<=u)return r.value}return""}c.displayName="KendoReactFieldArray";const f=e=>{if("number"==typeof e)return`${e}px`;if("string"==typeof e){const t=e.trim(),s=parseInt(t,10);return!isNaN(s)&&Number.isFinite(s)?s.toString()===t?`${s}px`:e:null}return null},p=(e,t)=>{if(!e)return null;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return"number"==typeof e?e:null},v=e=>e&&e>0?`k-grid-cols-${e}`:"",y=(e,t)=>{if(!e)return null;if("number"==typeof e)return e;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return null},F=e=>e?`k-col-span-${e}`:"",g=(e,t)=>{if(!e)return null;if("number"==typeof e)return{cols:e,rows:e};if("string"==typeof e){if(!e.includes(" "))return{cols:e,rows:e};const t=e.split(" ");return{cols:t[1],rows:t[0]}}if(Array.isArray(e)){const s=m(e,t)||null;return null!==s?{cols:s,rows:s}:null}if("object"==typeof e){const s=e,i={rows:null,cols:null};return void 0!==s.cols&&null!==s.cols?"number"==typeof s.cols||"string"==typeof s.cols?i.cols=s.cols:Array.isArray(s.cols)&&(i.cols=m(s.cols,t)||null):i.cols=null,void 0!==s.rows?"number"==typeof s.rows||"string"==typeof s.rows?i.rows=s.rows:Array.isArray(s.rows)&&(i.rows=m(s.rows,t)||null):i.rows=null,i}return null},b=(e,t)=>{var s,i,o,r;return`${f(null!=(i=null!=(s=null==e?void 0:e.rows)?s:t.rows)?i:"0px")} ${f(null!=(r=null!=(o=null==e?void 0:e.cols)?o:t.cols)?r:"32px")}`},w=e=>{const{className:t,style:s,dir:o,colSpan:n,children:l}=e,a=r.useRef(null),u=i.useUnstyled(),d=e.unstyled||u,c=d&&d.uForm,[m,f]=r.useState(void 0),p=r.useRef(null);r.useEffect(()=>{a.current&&(p.current=a.current.closest("form"))},[]),r.useEffect(()=>{let e;const t=null==p?void 0:p.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==n){const t=y(n,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}},[n]);const v=r.useMemo(()=>i.classNames(i.uForm.field({c:c,isRtl:"rtl"===o}),m,t),[c,t,o,m]);return r.createElement("div",{ref:a,className:v,style:s},l)};w.displayName="KendoReactFieldWrapper";const R={rows:"0px",cols:"32px"},C=r.forwardRef((e,t)=>{const s={size:void 0,...e},o=r.useRef(null),l=r.useRef(null);r.useImperativeHandle(l,()=>({element:o.current,props:s})),r.useImperativeHandle(t,()=>l.current);const a=r.useContext(n),{className:u,style:d,horizontal:c,size:m,cols:f,gutters:y=R,...F}=s,w=i.useUnstyled(),C=w&&w.uForm,[S,_]=r.useState(void 0),[E,N]=r.useState(void 0),k=r.useMemo(()=>c?"horizontal":!1===c?"vertical":void 0,[c]),A=r.useMemo(()=>i.classNames(i.uForm.form({c:C,size:m,orientation:k}),u),[u,C,k,m]);return r.useEffect(()=>{if(!f&&!y)return void _(void 0);if(!y)return void N(void 0);const e=()=>{let e=0;if(o.current?e=h(o.current):"undefined"!=typeof window&&(e=window.innerWidth),f){const t=p(f,e);_(v(t))}if(y){const t=g(y,e);N(t?{gap:b(t,R)}:{gap:b(R,R)})}};let t;e();const s=o.current;return s&&"undefined"!=typeof window&&"ResizeObserver"in window&&(t=new ResizeObserver(e),t.observe(s)),()=>{t&&s&&t.unobserve(s)}},[f,y]),r.createElement("form",{ref:o,...F,id:e.id||(a?a.id:void 0),style:e.style,className:A,onSubmit:a?a.onSubmit:void 0},f?r.createElement("div",{className:i.classNames(i.uForm.formLayout({c:C}),S),style:E},e.children):e.children)});C.displayName="KendoReactFormElement";const S=r.forwardRef((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,()=>({element:s.current,props:e})),r.useImperativeHandle(t,()=>o.current);const{className:n,style:l,colSpan:a,...u}=e,d=i.useUnstyled(),c=d&&d.uForm,[m,f]=r.useState(void 0),p=r.useRef(null);r.useEffect(()=>{s.current&&(p.current=s.current.closest("form"))},[]),r.useEffect(()=>{let e;const t=p.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==a){const t=y(a,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}},[a]);const v=r.useMemo(()=>i.classNames(i.uForm.separator({c:c}),m,n),[n,c,m]);return r.createElement("span",{ref:s,...u,style:e.style,className:v})});S.displayName="KendoReactFormSeparator";const _={rows:"0px",cols:"16px"},E=r.forwardRef((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,()=>({element:s.current,props:e})),r.useImperativeHandle(t,()=>o.current);const{className:n,style:l,cols:a,colSpan:u,gutters:d=_,legend:c,...m}=e,f=i.useUnstyled(),w=f&&f.uForm,[R,C]=r.useState(void 0),[S,E]=r.useState(void 0),[N,k]=r.useState(void 0),A=r.useMemo(()=>i.classNames(i.uForm.fieldset({c:w}),S,n),[n,w,S]),x=r.useMemo(()=>i.classNames(i.uForm.formLayout({c:w}),R),[w,R]),U=r.useMemo(()=>i.classNames(i.uForm.legend({c:w})),[w]),O=r.useRef(null);return r.useEffect(()=>{s.current&&(O.current=s.current.closest("form"))},[]),r.useEffect(()=>{if(!a)return void C(void 0);if(!d)return void k(void 0);const e=null==O?void 0:O.current,t=()=>{let t=0;e?t=h(e):"undefined"!=typeof window&&(t=window.innerWidth);const s=p(a,t);if(C(v(s)),void 0!==u){const e=y(u,t);E(F(e))}else E(void 0);if(d){const e=g(d,t);k(e?{gap:b(e,_)}:{gap:b(_,_)})}};let s;return t(),e&&"undefined"!=typeof window&&"ResizeObserver"in window&&(s=new ResizeObserver(t),s.observe(e)),()=>{s&&e&&s.unobserve(e)}},[a,u,d]),r.createElement("fieldset",{ref:s,...m,style:e.style,className:A},c&&r.createElement("legend",{className:U},c),a?r.createElement("div",{className:x,style:N},e.children):e.children)});E.displayName="KendoReactFormFieldSet";const N=i.withIdHOC(d);N.displayName="KendoReactForm",e.Field=l,e.FieldArray=c,e.FieldWrapper=w,e.Form=N,e.FormClassComponent=d,e.FormElement=C,e.FormFieldSet=E,e.FormSeparator=S});

FormElement.js

@@ -8,2 +8,2 @@ /**
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),u=require("@progress/kendo-react-common"),_=require("./FormContext.js"),s=require("./utils.js");function M(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(o,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return o.default=t,Object.freeze(o)}const e=M(G),a={rows:"0px",cols:"32px"},N=e.forwardRef((t,o)=>{const r={size:"medium",...t},n=e.useRef(null),S=e.useRef(null);e.useImperativeHandle(S,()=>({element:n.current,props:r})),e.useImperativeHandle(o,()=>S.current);const c=e.useContext(_.FormContext),{className:F,style:j,horizontal:g,size:R,cols:l,gutters:i=a,...O}=r,p=u.useUnstyled(),v=p&&p.uForm,[h,w]=e.useState(void 0),[T,b]=e.useState(void 0),C=e.useMemo(()=>{if(g)return"horizontal";if(g===!1)return"vertical"},[g]),z=e.useMemo(()=>u.classNames(u.uForm.form({c:v,size:R,orientation:C}),F),[F,v,C,R]);return e.useEffect(()=>{if(!l&&!i){w(void 0);return}if(!i){b(void 0);return}const E=()=>{let f=0;if(n.current?f=s.innerWidth(n.current):typeof window!="undefined"&&(f=window.innerWidth),l){const y=s.calculateColumns(l,f);w(s.generateColumnClass(y))}if(i){const y=s.calculateGutters(i,f);b(y?{gap:s.generateGuttersStyling(y,a)}:{gap:s.generateGuttersStyling(a,a)})}};E();let m;const d=n.current;return d&&typeof window!="undefined"&&"ResizeObserver"in window&&(m=new ResizeObserver(E),m.observe(d)),()=>{m&&d&&m.unobserve(d)}},[l,i]),e.createElement("form",{ref:n,...O,id:t.id||(c?c.id:void 0),style:t.style,className:z,onSubmit:c?c.onSubmit:void 0},l?e.createElement("div",{className:u.classNames(u.uForm.formLayout({c:v}),h),style:T},t.children):t.children)});N.displayName="KendoReactFormElement";exports.DEFAULT_FORM_GUTTERS=a;exports.FormElement=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),a=require("@progress/kendo-react-common"),_=require("./FormContext.js"),o=require("./utils.js");function M(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(s,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return s.default=t,Object.freeze(s)}const e=M(G),c={rows:"0px",cols:"32px"},N=e.forwardRef((t,s)=>{const r={size:void 0,...t},n=e.useRef(null),S=e.useRef(null);e.useImperativeHandle(S,()=>({element:n.current,props:r})),e.useImperativeHandle(s,()=>S.current);const u=e.useContext(_.FormContext),{className:F,style:j,horizontal:v,size:R,cols:l,gutters:i=c,...O}=r,p=a.useUnstyled(),g=p&&p.uForm,[h,w]=e.useState(void 0),[T,b]=e.useState(void 0),C=e.useMemo(()=>{if(v)return"horizontal";if(v===!1)return"vertical"},[v]),z=e.useMemo(()=>a.classNames(a.uForm.form({c:g,size:R,orientation:C}),F),[F,g,C,R]);return e.useEffect(()=>{if(!l&&!i){w(void 0);return}if(!i){b(void 0);return}const E=()=>{let f=0;if(n.current?f=o.innerWidth(n.current):typeof window!="undefined"&&(f=window.innerWidth),l){const y=o.calculateColumns(l,f);w(o.generateColumnClass(y))}if(i){const y=o.calculateGutters(i,f);b(y?{gap:o.generateGuttersStyling(y,c)}:{gap:o.generateGuttersStyling(c,c)})}};E();let m;const d=n.current;return d&&typeof window!="undefined"&&"ResizeObserver"in window&&(m=new ResizeObserver(E),m.observe(d)),()=>{m&&d&&m.unobserve(d)}},[l,i]),e.createElement("form",{ref:n,...O,id:t.id||(u?u.id:void 0),style:t.style,className:z,onSubmit:u?u.onSubmit:void 0},l?e.createElement("div",{className:a.classNames(a.uForm.formLayout({c:g}),h),style:T},t.children):t.children)});N.displayName="KendoReactFormElement";exports.DEFAULT_FORM_GUTTERS=c;exports.FormElement=N;

FormElement.mjs

@@ -12,17 +12,17 @@ /**
 import { innerWidth as O, calculateColumns as T, generateColumnClass as U, calculateGutters as W, generateGuttersStyling as E } from "./utils.mjs";
-const m = {
+const c = {
   rows: "0px",
   cols: "32px"
 }, A = e.forwardRef((t, F) => {
-  const y = {
-    size: "medium",
+  const v = {
+    size: void 0,
     ...t
-  }, s = e.useRef(null), v = e.useRef(null);
-  e.useImperativeHandle(v, () => ({ element: s.current, props: y })), e.useImperativeHandle(F, () => v.current);
-  const n = e.useContext(M), { className: w, style: H, horizontal: c, size: p, cols: r, gutters: o = m, ...N } = y, C = L(), d = C && C.uForm, [z, R] = e.useState(void 0), [x, f] = e.useState(void 0), S = e.useMemo(() => {
-    if (c)
+  }, s = e.useRef(null), y = e.useRef(null);
+  e.useImperativeHandle(y, () => ({ element: s.current, props: v })), e.useImperativeHandle(F, () => y.current);
+  const n = e.useContext(M), { className: w, style: H, horizontal: m, size: p, cols: o, gutters: r = c, ...N } = v, C = L(), d = C && C.uForm, [z, R] = e.useState(void 0), [x, f] = e.useState(void 0), S = e.useMemo(() => {
+    if (m)
       return "horizontal";
-    if (c === !1)
+    if (m === !1)
       return "vertical";
-  }, [c]), G = e.useMemo(
+  }, [m]), G = e.useMemo(
     () => g(
@@ -39,7 +39,7 @@ h.form({
   return e.useEffect(() => {
-    if (!r && !o) {
+    if (!o && !r) {
       R(void 0);
       return;
     }
-    if (!o) {
+    if (!r) {
       f(void 0);
@@ -50,9 +50,9 @@ return;
       let a = 0;
-      if (s.current ? a = O(s.current) : typeof window != "undefined" && (a = window.innerWidth), r) {
-        const u = T(r, a);
+      if (s.current ? a = O(s.current) : typeof window != "undefined" && (a = window.innerWidth), o) {
+        const u = T(o, a);
         R(U(u));
       }
-      if (o) {
-        const u = W(o, a);
-        f(u ? { gap: E(u, m) } : { gap: E(m, m) });
+      if (r) {
+        const u = W(r, a);
+        f(u ? { gap: E(u, c) } : { gap: E(c, c) });
       }
@@ -66,3 +66,3 @@ };
     };
-  }, [r, o]), /* @__PURE__ */ e.createElement(
+  }, [o, r]), /* @__PURE__ */ e.createElement(
     "form",
@@ -77,3 +77,3 @@ {
     },
-    r ? /* @__PURE__ */ e.createElement(
+    o ? /* @__PURE__ */ e.createElement(
       "div",
@@ -95,4 +95,4 @@ {
 export {
-  m as DEFAULT_FORM_GUTTERS,
+  c as DEFAULT_FORM_GUTTERS,
   A as FormElement
 };

index.d.mts

@@ -8,1035 +8,23 @@ /**
  */
-import { default as default_2 } from 'prop-types';
-import { FieldRenderPropsBase } from '@progress/kendo-react-common';
-import { FormClassStructure } from '@progress/kendo-react-common';
-import { ForwardRefExoticComponent } from 'react';
-import { JSX } from 'react/jsx-runtime';
-import * as React_2 from 'react';
-import { RefAttributes } from 'react';
-
-/**
- * Represents the Field component that is used inside the KendoReact Form component.
- * It uses `name` property to access field value and meta information from Form state.
- */
-export declare const Field: {
-    (props: FieldProps & {
-        [customProp: string]: any;
-    }): React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | null;
-    displayName: string;
-};
-
-/**
- * Represents the FieldArray component that is used inside the KendoReact Form component.
- * It provides methods via render props for common array manipulations.
- */
-export declare const FieldArray: React_2.FunctionComponent<FieldArrayProps>;
-
-/**
- * Contains the props for the FieldArray component that you use inside forms.
- */
-export declare interface FieldArrayProps {
-    /**
-     * Sets the field name in the form state.
-     */
-    name: string;
-    /**
-     * Can be set to a React component.
-     * [`FieldArrayRenderProps`](https://www.telerik.com/kendo-react-ui/components/form/api/fieldarrayrenderprops).
-     */
-    component: React.ComponentType<any>;
-    /**
-     * Validates the field array and returns error messages.
-     * Only synchronous functions are supported.
-     */
-    validator?: FieldValidatorType | FieldValidatorType[];
-    /**
-     * Provides child elements that are passed to the rendered component.
-     */
-    children?: any;
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-}
-
-/**
- * Contains props that are passed to components rendered inside FieldArray components.
- */
-export declare interface FieldArrayRenderProps {
-    /**
-     * Represents the current value of the FieldArray
-     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/custom-components#toc-using-basic-properties)).
-     */
-    value: any;
-    /**
-     * Contains the error message from validation.
-     * The field is valid when this is empty.
-     */
-    validationMessage: string | null;
-    /**
-     * Shows whether the user has interacted with the field.
-     * Becomes true when the field loses focus.
-     */
-    touched: boolean;
-    /**
-     * Shows whether the field value has changed from its initial value.
-     * Becomes true when the field value changes for the first time.
-     */
-    modified: boolean;
-    /**
-     * Shows whether the user has focused on the field.
-     * Becomes true when the field receives focus.
-     */
-    visited: boolean;
-    /**
-     * Shows whether the field passes validation and has been touched.
-     */
-    valid: boolean;
-    /**
-     * Contains child elements that are passed to the FieldArray.
-     */
-    children: any;
-    /**
-     * Contains the field name in the form state.
-     */
-    name: string;
-    /**
-     * Adds a value to the beginning of the array.
-     */
-    onUnshift: (options: {
-        value: any;
-    }) => number;
-    /**
-     * Adds a value to the end of the array.
-     */
-    onPush: (options: {
-        value: any;
-    }) => void;
-    /**
-     * Inserts a value at a specific position in the array.
-     */
-    onInsert: (options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * Removes and returns the last value from the array.
-     */
-    onPop: () => any;
-    /**
-     * Removes a value at a specific position in the array.
-     */
-    onRemove: (options: {
-        index: number;
-    }) => any;
-    /**
-     * Replaces a value at a specific position in the array.
-     */
-    onReplace: (options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * Moves a value from one position to another in the array.
-     */
-    onMove: (options: {
-        prevIndex: number;
-        nextIndex: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-}
-
-/**
- * Contains the props for the Field component that you use inside forms.
- */
-export declare interface FieldProps {
-    /**
-     * Sets the field name in the form state.
-     * You can use nested fields like `user.age` and `users[0].name`.
-     *
-     * @example
-     * ```jsx
-     * <Field name="user.age" component="input" />
-     * ```
-     */
-    name: string;
-    /**
-     * Can be set to a React component or to the name of an HTML element,
-     * for example, `input`, `select`, and `textarea`.
-     * The props that are passed to the component are the
-     * [`FieldRenderProps`](https://www.telerik.com/kendo-react-ui/components/form/api/fieldrenderprops).
-     *
-     * @example
-     * ```jsx
-     * <Field name="user.name" component="input" />
-     * ```
-     */
-    component: string | React.ComponentType<any>;
-    /**
-     * Validates the field value and returns error messages.
-     *
-     * Only synchronous functions are supported.
-     * Use `useMemo` to avoid infinite loops when using an array of validators.
-     *
-     * @example
-     * ```jsx
-     * const validator = value => value ? "" : "This field is required.";
-     * <Field name="user.email" component="input" validator={validator} />
-     * ```
-     */
-    validator?: FieldValidatorType | FieldValidatorType[];
-    /**
-     * Provides child elements that are passed to the rendered component.
-     *
-     * @example
-     * ```jsx
-     * <Field name="user.name" component="input">
-     *   <span>Additional content</span>
-     * </Field>
-     * ```
-     */
-    children?: any;
-    /**
-     * Sets how many columns the field spans in the form layout.
-     */
-    colSpan?: number | ResponsiveFormBreakPoint[];
-    /**
-     * Handles changes to the field value.
-     *
-     * Use this to update related fields. The Form automatically updates its state when this fires.
-     *
-     * @example
-     * ```jsx
-     * const handleChange = event => console.log(event);
-     * <Field name="user.name" component="input" onChange={handleChange} />
-     * ```
-     */
-    onChange?: (event: any) => void;
-}
-
-/**
- * Contains props that are passed to components rendered inside Field components.
- */
-export declare interface FieldRenderProps extends FieldRenderPropsBase {
-}
-
-/**
- * Validates a single field and returns an error message or success.
- *
- * * value - Contains the current field value
- * * valueGetter - Gets values from other fields using field paths like 'user.name'
- * * fieldProps - Contains the field's props, including the field name
- *
- * Returns a string for validation errors or undefined for successful validation.
- */
-export declare type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
-    name: string;
-}) => string | undefined;
-
-/**
- * Represents the KendoReact FieldWrapper component.
- * It's designed to wrap the field editor, Label, Hint and Error components.
- * The FieldWrapper supports only single editor inside it.
- */
-export declare const FieldWrapper: React_2.FunctionComponent<FieldWrapperProps>;
-
-/**
- * Represents the props of the KendoReact FieldWrapper component.
- */
-export declare interface FieldWrapperProps {
-    /**
-     * @hidden
-     */
-    children: any;
-    /**
-     * The styles that are applied to the FieldWrapper.
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Sets a class for the FieldWrapper DOM element.
-     */
-    className?: string;
-    /**
-     * Specifies the direction of the content.
-     */
-    dir?: string;
-    /**
-     * Defines the colspan for the form field element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
-     */
-    colSpan?: number | ResponsiveFormBreakPoint[];
-    /**
-     * @hidden
-     */
-    unstyled?: FormClassStructure;
-}
-
+import { FieldProps } from './interfaces/FieldProps.js';
+import { FieldRenderProps } from './interfaces/FieldRenderProps.js';
+import { FormProps } from './interfaces/FormProps.js';
+import { FormRenderProps } from './interfaces/FormRenderProps.js';
+import { Field } from './Field.js';
+import { Form as FormClassComponent, FormHandle } from './Form.js';
+import { FormValidatorType } from './interfaces/FormValidator.js';
+import { FieldValidatorType } from './interfaces/FieldValidator.js';
+import { FieldArray } from './FieldArray.js';
+import { FieldArrayProps } from './interfaces/FieldArrayProps.js';
+import { FieldArrayRenderProps } from './interfaces/FieldArrayRenderProps.js';
+import { KeyValue } from './interfaces/KeyValue.js';
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper.js';
+import { FormElement, FormElementProps, FormElementHandle } from './FormElement.js';
+import { FormSubmitClickEvent } from './interfaces/FormSubmitClickEvent.js';
+import { FormSeparator, FormSeparatorProps, FormSeparatorHandle } from './FormSeparator.js';
+import { FormFieldSet, FormFieldSetProps, FormFieldSetHandle } from './FormFieldSet.js';
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
+import { Gutters } from './interfaces/Gutters.js';
 /** @hidden */
-export declare const Form: ForwardRefExoticComponent<FormProps & RefAttributes<any>>;
-
-/**
- * Represents the [KendoReact Form component](https://www.telerik.com/kendo-react-ui/components/form).
- *
- * @example
- * ```jsx
- * export const FormInput = (fieldRenderProps) => {
- *     const onValueChange = React.useCallback(
- *         (event) => fieldRenderProps.onChange(event.target.value),
- *         [fieldRenderProps.onChange]
- *     );
- *     return (
- *         <input
- *             className={'k-input'}
- *             value={fieldRenderProps.value}
- *             onChange={onValueChange}
- *         />
- *     );
- * };
- *
- * export const App = () => {
- *     const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem));
- *     return (
- *         <Form
- *             initialValues={{title: ''}}
- *             onSubmit={handleSubmit}
- *             render={(formRenderProps) => (
- *                 <div>
- *                     <Field name={'title'} component={FormInput} />
- *                     <Button
- *                         disabled={!formRenderProps.allowSubmit}
- *                         onClick={formRenderProps.onSubmit}
- *                     >
- *                         Submit
- *                     </Button>
- *                 </div>
- *             )}
- *         />
- *     );
- * };
- * ```
- */
-export declare class FormClassComponent extends React_2.Component<FormProps, {}> {
-    /**
-     * @hidden
-     */
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        initialValues: default_2.Requireable<any>;
-        onSubmit: default_2.Requireable<(...args: any[]) => any>;
-        onSubmitClick: default_2.Requireable<(...args: any[]) => any>;
-        render: default_2.Validator<(...args: any[]) => any>;
-        id: default_2.Requireable<string>;
-    };
-    private _key?;
-    private _touched;
-    private _visited;
-    private _modified;
-    private _validatorsByField;
-    private _values;
-    private _fields;
-    private _unmounted;
-    private _submitted;
-    private readonly showLicenseWatermark;
-    private readonly licenseMessage?;
-    /**
-     * @hidden
-     */
-    private _accumulatorTimeout;
-    /**
-     * @hidden
-     */
-    get touched(): KeyValue<boolean>;
-    /**
-     * @hidden
-     */
-    set touched(value: KeyValue<boolean>);
-    /**
-     * @hidden
-     */
-    get visited(): KeyValue<boolean>;
-    /**
-     * @hidden
-     */
-    set visited(value: KeyValue<boolean>);
-    /**
-     * @hidden
-     */
-    get modified(): KeyValue<boolean>;
-    /**
-     * @hidden
-     */
-    set modified(value: KeyValue<boolean>);
-    /**
-     * @hidden
-     */
-    get validatorsByField(): KeyValue<(FieldValidatorType | FieldValidatorType[] | undefined)[]>;
-    /**
-     * @hidden
-     */
-    set validatorsByField(value: KeyValue<(FieldValidatorType | FieldValidatorType[] | undefined)[]>);
-    /**
-     * @hidden
-     */
-    get values(): KeyValue<any>;
-    /**
-     * @hidden
-     */
-    set values(value: KeyValue<any>);
-    /**
-     * @hidden
-     */
-    get fields(): string[];
-    /**
-     * @hidden
-     */
-    get formErrors(): KeyValue<string> | undefined;
-    /**
-     * @hidden
-     */
-    get errors(): KeyValue<string>;
-    /**
-     * @hidden
-     */
-    constructor(props: FormProps);
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    isValid: () => boolean;
-    /**
-     * @hidden
-     */
-    accumulatedForceUpdate: () => void;
-    /**
-     * @hidden
-     */
-    resetForm: () => void;
-    /**
-     * Method for resetting the form state outside the form component.
-     *
-     * > Use `onReset` only if you cannot achieve the desired behavior through the Field component or by FormRenderProps.
-     */
-    onReset: () => void;
-    /**
-     * @hidden
-     */
-    addField: (field: string) => void;
-    /**
-     * @hidden
-     */
-    onSubmit: (event: React_2.SyntheticEvent<any>) => void;
-    /**
-     * Method for emiting changes to a specific field outside the form component.
-     *
-     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component by FormRenderProps.
-     */
-    onChange: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onFocus: (name: string, skipForceUpdate?: boolean) => void;
-    /**
-     * @hidden
-     */
-    onBlur: (name: string, skipForceUpdate?: boolean) => void;
-    /**
-     * @hidden
-     */
-    onFieldRegister: (name: string, validator: FieldValidatorType | FieldValidatorType[] | undefined) => () => void;
-    /**
-     * @hidden
-     */
-    isFormValid: (errors: KeyValue<any>) => boolean;
-    /**
-     * @hidden
-     */
-    isFormModified: (modified: KeyValue<boolean>, fields: string[]) => boolean;
-    /**
-     * @hidden
-     */
-    isFormHasNotTouched: (touched: KeyValue<boolean>, fields: string[]) => boolean;
-    /**
-     * @hidden
-     */
-    isFormTouched: (touched: KeyValue<boolean>, fields: string[]) => boolean;
-    /**
-     * @hidden
-     */
-    isFormVisited: (visited: KeyValue<boolean>, fields: string[]) => boolean;
-    /**
-     * @hidden
-     */
-    valueGetter: (fieldName: string) => any;
-    /**
-     * @hidden
-     */
-    valueSetter: (fieldName: string, value: any) => any;
-    /**
-     * @hidden
-     */
-    onArrayAction: (name: string) => void;
-    /**
-     * @hidden
-     */
-    onInsert: (name: string, options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onUnshift: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onPush: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onPop: (name: string) => any;
-    /**
-     * @hidden
-     */
-    onRemove: (name: string, options: {
-        index: number;
-    }) => any;
-    /**
-     * @hidden
-     */
-    onReplace: (name: string, options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onMove: (name: string, options: {
-        prevIndex: number;
-        nextIndex: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-}
-
-/**
- * Represents the KendoReact FormElement component.
- * It's small wrapper around HTML form element which automatically attach the
- * Form component's `onSubmit` render prop and Kendo CSS classes.
- * Other props are passed to the DOM node.
- */
-export declare const FormElement: React_2.FunctionComponent<FormElementProps>;
-
-/**
- * Represent the `ref` of the FormElement component.
- */
-export declare interface FormElementHandle {
-    /**
-     * Represents the props of the FormElement component.
-     */
-    props: FormElementProps;
-    /**
-     * Represents the element of the FormElement component.
-     */
-    element: HTMLFormElement | null;
-}
-
-/**
- * Represents the props of the KendoReact FormElement component.
- */
-export declare interface FormElementProps {
-    /**
-     * @hidden
-     */
-    children?: any;
-    /**
-     * The styles that are applied to the form DOM element.
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Sets a class for the form DOM element.
-     */
-    className?: string;
-    /**
-     * If set to `true` enable the horizontal layout of the form editors.
-     */
-    horizontal?: boolean;
-    /**
-     * Sets the id of the form DOM element. Takes priority over the Form's id.
-     */
-    id?: string;
-    /**
-     * Defines the number of columns in the form. Can be a number or an array of responsive breakpoints.
-     */
-    cols?: number | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the gutters for the form. You can specify gutters for rows and columns. Number is equivalent to px.
-     */
-    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-    /**
-     * Configures the `size` of the Form.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * @hidden
-     */
-    unstyled?: FormClassStructure;
-}
-
-/**
- * Represents the KendoReact FormFieldSet component.
- */
-export declare const FormFieldSet: React_2.FunctionComponent<FormFieldSetProps>;
-
-/**
- * Represent the `ref` of the FormFieldSet component.
- */
-export declare interface FormFieldSetHandle {
-    /**
-     * Represents the props of the  FormFieldSet component.
-     */
-    props: FormFieldSetProps;
-    /**
-     * Represents the element of the FormFieldSet component.
-     */
-    element: HTMLFieldSetElement | null;
-}
-
-/**
- * Represents the props of the KendoReact FormFieldSet component.
- */
-export declare interface FormFieldSetProps {
-    /**
-     * Defines the number of columns of the fieldset. Can be a number or an array of responsive breakpoints.
-     */
-    cols?: number | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the colspan for the fieldset related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
-     */
-    colSpan?: number | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the gutters for the fieldset. You can specify gutters for rows and columns. Number is equivalent to px.
-     */
-    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the legend for the fieldset.
-     */
-    legend?: string;
-    /**
-     * @hidden
-     */
-    children?: any;
-    /**
-     * The styles that are applied to the form DOM element.
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Sets a class for the form DOM element.
-     */
-    className?: string;
-}
-
-/**
- * Represent the `ref` of the Form component.
- */
-export declare interface FormHandle extends Pick<FormClassComponent, keyof FormClassComponent> {
-}
-
-/**
- * Contains the props for the KendoReact Form component.
- */
-export declare interface FormProps {
-    /**
-     * Sets the starting values for form fields.
-     *
-     * Set initial values to prevent errors when switching from uncontrolled to controlled mode.
-     *
-     * @example
-     * ```jsx
-     * const initialValues = { user: { name: '', age: 0 } };
-     * <Form initialValues={initialValues} render={props => <form>form content</form>} />
-     * ```
-     */
-    initialValues?: {
-        [name: string]: any;
-    };
-    /**
-     * Validation errors that override field and form validators.
-     *
-     * Provides validation errors directly as an object, unlike the validator prop which expects a callback.
-     * When both validator and errors exist for a field, the errors prop takes precedence.
-     *
-     * @example
-     * ```jsx
-     * const [errors, setErrors] = useState({});
-     * const handleSubmit = async (data) => {
-     *     const response = await submitToServer(data);
-     *     if (response.errors) {
-     *         setErrors(response.errors);
-     *     }
-     * };
-     * <Form errors={errors} onSubmit={handleSubmit} render={props => <FormElement>form content</FormElement>} />
-     * ```
-     */
-    errors?: {
-        [name: string]: string;
-    };
-    /**
-     * Fires each time any field value changes.
-     *
-     * The third parameter `valueGetter` allows accessing other field values, useful for cross-field validation or clearing related errors.
-     *
-     * @example
-     * ```jsx
-     * const handleChange = (fieldName, value, valueGetter) => {
-     *     // For nested fields like 'user.name', access related fields like 'user.email'
-     *     if (fieldName === 'user.name') {
-     *         const email = valueGetter('user.email');
-     *         console.log('Name changed:', value, 'Email is:', email);
-     *     }
-     *     // Clear error for the changed field
-     *     if (formErrors[fieldName]) {
-     *         setFormErrors(prev => ({ ...prev, [fieldName]: '' }));
-     *     }
-     * };
-     * <Form errors={formErrors} onChange={handleChange} render={props => <FormElement>form content</FormElement>} />
-     * ```
-     */
-    onChange?: (fieldName: string, value: any, valueGetter: (name: string) => any) => void;
-    /**
-     * Validates the entire form and returns error messages.
-     *
-     * Return a key-value pair where the key is the field path and the value is the error message.
-     * You can validate nested fields like 'users[0].name'.
-     * Only synchronous functions are supported.
-     *
-     * @example
-     * ```jsx
-     * const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } });
-     * <Form validator={validator} render={props => <form> form content </form>} />
-     * ```
-     */
-    validator?: FormValidatorType;
-    /**
-     * Handles form submission when validation passes and fields are modified.
-     *
-     * Fires when at least one field is modified, the user clicks Submit, and validation passes.
-     *
-     * @example
-     * ```jsx
-     * const handleSubmit = (values, event) => console.log(values);
-     * <Form onSubmit={handleSubmit} render={props => <form> form content </form>} />
-     * ```
-     */
-    onSubmit?: (values: {
-        [name: string]: any;
-    }, event?: React.SyntheticEvent<any>) => void;
-    /**
-     * Handles every submit button click, even when the form is invalid or unchanged.
-     *
-     * Use this for advanced scenarios where you need to handle all submit events.
-     *
-     * @example
-     * ```jsx
-     * const handleSubmitClick = event => console.log(event);
-     * <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
-     * ```
-     */
-    onSubmitClick?: (event: FormSubmitClickEvent) => void;
-    /**
-     * Renders the form content using the provided render function.
-     *
-     * @example
-     * ```jsx
-     * const renderForm = props => <form> form content </form>;
-     * <Form render={renderForm} />
-     * ```
-     */
-    render: (props: FormRenderProps) => any;
-    /**
-     * Allows the form to submit even when no fields have been modified.
-     *
-     * @example
-     * ```jsx
-     * <Form ignoreModified={true} render={props => <form>form content </form>} />
-     * ```
-     */
-    ignoreModified?: boolean;
-    /**
-     * @hidden
-     * This prop comes from the `withId` HOC and is used internally by the Form.
-     * It replaces the previously used guid() function and generates an `id` of the Form.
-     */
-    id?: string;
-}
-
-/**
- * Contains props that are passed to the form's render function.
- */
-export declare interface FormRenderProps {
-    /**
-     * Submits the form when called.
-     * Use this with the onClick property of Submit buttons.
-     *
-     * @example
-     * ```jsx
-     * const handleSubmit = event => console.log("Form submitted");
-     * <Button onClick={props.onSubmit}>Submit</Button>
-     * ```
-     */
-    onSubmit: (event: React.SyntheticEvent<any>) => void;
-    /**
-     * A callback for emitting changes to a specific field without using the Field component
-     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-changing-the-field-value)).
-     *
-     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component.
-     *
-     * @example
-     * ```jsx
-     * props.onChange("user.name", { value: "John Doe" });
-     * ```
-     */
-    onChange: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * Resets the form to its initial state.
-     *
-     * @example
-     * ```jsx
-     * <Button onClick={props.onFormReset}>Reset</Button>
-     * ```
-     */
-    onFormReset: () => void;
-    /**
-     * Contains current validation errors organized by field path.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.errors);
-     * ```
-     */
-    errors: KeyValue<string>;
-    /**
-     * Shows whether the form passes all validation rules.
-     * Becomes false if any field fails validation.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.valid);
-     * ```
-     */
-    valid: boolean;
-    /**
-     * Shows whether the user has interacted with any field.
-     * Becomes true when any field loses focus or the user tries to submit.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.touched);
-     * ```
-     */
-    touched: boolean;
-    /**
-     * Shows whether the user has focused on any field.
-     * Becomes true when any field receives focus or the user tries to submit.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.visited);
-     * ```
-     */
-    visited: boolean;
-    /**
-     * Shows whether any field value has changed from its initial value.
-     * Becomes true when any field value changes for the first time.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.modified);
-     * ```
-     */
-    modified: boolean;
-    /**
-     * Shows whether the form has been successfully submitted.
-     * Use this to detect if the user is leaving before saving changes.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.submitted);
-     * ```
-     */
-    submitted: boolean;
-    /**
-     * Shows whether the form can be submitted.
-     * When true and form is valid, you can submit. When true and form is invalid, you can show all validation errors.
-     *
-     * Use this to control the disabled state of Submit buttons.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.allowSubmit);
-     * ```
-     */
-    allowSubmit: boolean;
-    /**
-     * A callback for getting the value of a field without using the Field component
-     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-reading-the-field-state)).
-     * Useful for creating and modifying the UI based on the field values.
-     *
-     * @example
-     * ```jsx
-     * const value = props.valueGetter("user.name");
-     * console.log(value);
-     * ```
-     */
-    valueGetter: (name: string) => any;
-}
-
-/**
- * Represents the KendoReact FormSeparator component.
- */
-export declare const FormSeparator: React_2.FunctionComponent<FormSeparatorProps>;
-
-/**
- * Represent the `ref` of the FormSeparator component.
- */
-export declare interface FormSeparatorHandle {
-    /**
-     * Represents the props of the FormSeparator component.
-     */
-    props: FormSeparatorProps;
-    /**
-     * Represents the element of the FormSeparator component.
-     */
-    element: HTMLSpanElement | null;
-}
-
-/**
- * Represents the props of the KendoReact FormSeparator component.
- */
-export declare interface FormSeparatorProps {
-    /**
-     * Defines the colspan for the separator element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
-     */
-    colSpan?: number | ResponsiveFormBreakPoint[];
-    /**
-     * @hidden
-     */
-    children?: any;
-    /**
-     * The styles that are applied to the form DOM element.
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Sets a class for the form DOM element.
-     */
-    className?: string;
-}
-
-/**
- * Contains data for the form submit click event.
- */
-export declare interface FormSubmitClickEvent {
-    /**
-     * Provides the current values from all form fields.
-     */
-    values: {
-        [name: string]: any;
-    };
-    /**
-     * Contains the original browser event that triggered the submit.
-     */
-    event?: React.SyntheticEvent<any>;
-    /**
-     * Shows whether the form passes all validation rules.
-     */
-    isValid: boolean;
-    /**
-     * Shows whether any form fields have been changed from their initial values.
-     */
-    isModified: boolean;
-}
-
-/**
- * Validates an entire form and returns error messages.
- *
- * * values - Contains the current values from all form fields
- * * valueGetter - Gets field values using field paths like 'user.name'
- *
- * Returns a key-value pair where the key is the field path and the value is the error message.
- */
-export declare type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;
-
-/**
- * Represents the [gutters](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) configuration for a form layout.
- * It allows defining the spacing between the columns and rows of the form.
- * Each property can be a number or an array of responsive breakpoints.
- */
-export declare interface Gutters {
-    /**
-     * Defines the gutters for the columns in the form.
-     * Can be a number or an array of responsive breakpoints.
-     */
-    cols?: string | number | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the gutters for the rows in the form.
-     * Can be a number or an array of responsive breakpoints.
-     */
-    rows?: string | number | ResponsiveFormBreakPoint[];
-}
-
-/**
- * Represents a key-value pair collection where keys are strings.
- */
-export declare interface KeyValue<ValueType> {
-    [name: string]: ValueType;
-}
-
-/**
- * Defines responsive breakpoints for form layouts.
- * Each breakpoint sets minimum and maximum widths and values for columns or spacing at different screen sizes.
- */
-export declare interface ResponsiveFormBreakPoint {
-    /**
-     * Sets the minimum screen width in pixels for this breakpoint.
-     */
-    minWidth?: number;
-    /**
-     * Sets the maximum screen width in pixels for this breakpoint.
-     */
-    maxWidth?: number;
-    /**
-     * Sets the number of columns or spacing for form controls at this screen size.
-     */
-    value: number | string;
-}
-
-export { }
+declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<any>>;
+export { FieldArray, FieldArrayProps, FieldArrayRenderProps, Field, FieldProps, FieldRenderProps, Form, FormClassComponent, FormHandle, FormProps, FormRenderProps, FormValidatorType, FieldValidatorType, KeyValue, FieldWrapper, FieldWrapperProps, FormElement, FormElementHandle, FormElementProps, FormSubmitClickEvent, FormSeparator, FormSeparatorProps, FormSeparatorHandle, FormFieldSet, FormFieldSetProps, FormFieldSetHandle, ResponsiveFormBreakPoint, Gutters };

index.d.ts

@@ -8,1035 +8,23 @@ /**
  */
-import { default as default_2 } from 'prop-types';
-import { FieldRenderPropsBase } from '@progress/kendo-react-common';
-import { FormClassStructure } from '@progress/kendo-react-common';
-import { ForwardRefExoticComponent } from 'react';
-import { JSX } from 'react/jsx-runtime';
-import * as React_2 from 'react';
-import { RefAttributes } from 'react';
-
-/**
- * Represents the Field component that is used inside the KendoReact Form component.
- * It uses `name` property to access field value and meta information from Form state.
- */
-export declare const Field: {
-    (props: FieldProps & {
-        [customProp: string]: any;
-    }): React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | null;
-    displayName: string;
-};
-
-/**
- * Represents the FieldArray component that is used inside the KendoReact Form component.
- * It provides methods via render props for common array manipulations.
- */
-export declare const FieldArray: React_2.FunctionComponent<FieldArrayProps>;
-
-/**
- * Contains the props for the FieldArray component that you use inside forms.
- */
-export declare interface FieldArrayProps {
-    /**
-     * Sets the field name in the form state.
-     */
-    name: string;
-    /**
-     * Can be set to a React component.
-     * [`FieldArrayRenderProps`](https://www.telerik.com/kendo-react-ui/components/form/api/fieldarrayrenderprops).
-     */
-    component: React.ComponentType<any>;
-    /**
-     * Validates the field array and returns error messages.
-     * Only synchronous functions are supported.
-     */
-    validator?: FieldValidatorType | FieldValidatorType[];
-    /**
-     * Provides child elements that are passed to the rendered component.
-     */
-    children?: any;
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-}
-
-/**
- * Contains props that are passed to components rendered inside FieldArray components.
- */
-export declare interface FieldArrayRenderProps {
-    /**
-     * Represents the current value of the FieldArray
-     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/custom-components#toc-using-basic-properties)).
-     */
-    value: any;
-    /**
-     * Contains the error message from validation.
-     * The field is valid when this is empty.
-     */
-    validationMessage: string | null;
-    /**
-     * Shows whether the user has interacted with the field.
-     * Becomes true when the field loses focus.
-     */
-    touched: boolean;
-    /**
-     * Shows whether the field value has changed from its initial value.
-     * Becomes true when the field value changes for the first time.
-     */
-    modified: boolean;
-    /**
-     * Shows whether the user has focused on the field.
-     * Becomes true when the field receives focus.
-     */
-    visited: boolean;
-    /**
-     * Shows whether the field passes validation and has been touched.
-     */
-    valid: boolean;
-    /**
-     * Contains child elements that are passed to the FieldArray.
-     */
-    children: any;
-    /**
-     * Contains the field name in the form state.
-     */
-    name: string;
-    /**
-     * Adds a value to the beginning of the array.
-     */
-    onUnshift: (options: {
-        value: any;
-    }) => number;
-    /**
-     * Adds a value to the end of the array.
-     */
-    onPush: (options: {
-        value: any;
-    }) => void;
-    /**
-     * Inserts a value at a specific position in the array.
-     */
-    onInsert: (options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * Removes and returns the last value from the array.
-     */
-    onPop: () => any;
-    /**
-     * Removes a value at a specific position in the array.
-     */
-    onRemove: (options: {
-        index: number;
-    }) => any;
-    /**
-     * Replaces a value at a specific position in the array.
-     */
-    onReplace: (options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * Moves a value from one position to another in the array.
-     */
-    onMove: (options: {
-        prevIndex: number;
-        nextIndex: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-}
-
-/**
- * Contains the props for the Field component that you use inside forms.
- */
-export declare interface FieldProps {
-    /**
-     * Sets the field name in the form state.
-     * You can use nested fields like `user.age` and `users[0].name`.
-     *
-     * @example
-     * ```jsx
-     * <Field name="user.age" component="input" />
-     * ```
-     */
-    name: string;
-    /**
-     * Can be set to a React component or to the name of an HTML element,
-     * for example, `input`, `select`, and `textarea`.
-     * The props that are passed to the component are the
-     * [`FieldRenderProps`](https://www.telerik.com/kendo-react-ui/components/form/api/fieldrenderprops).
-     *
-     * @example
-     * ```jsx
-     * <Field name="user.name" component="input" />
-     * ```
-     */
-    component: string | React.ComponentType<any>;
-    /**
-     * Validates the field value and returns error messages.
-     *
-     * Only synchronous functions are supported.
-     * Use `useMemo` to avoid infinite loops when using an array of validators.
-     *
-     * @example
-     * ```jsx
-     * const validator = value => value ? "" : "This field is required.";
-     * <Field name="user.email" component="input" validator={validator} />
-     * ```
-     */
-    validator?: FieldValidatorType | FieldValidatorType[];
-    /**
-     * Provides child elements that are passed to the rendered component.
-     *
-     * @example
-     * ```jsx
-     * <Field name="user.name" component="input">
-     *   <span>Additional content</span>
-     * </Field>
-     * ```
-     */
-    children?: any;
-    /**
-     * Sets how many columns the field spans in the form layout.
-     */
-    colSpan?: number | ResponsiveFormBreakPoint[];
-    /**
-     * Handles changes to the field value.
-     *
-     * Use this to update related fields. The Form automatically updates its state when this fires.
-     *
-     * @example
-     * ```jsx
-     * const handleChange = event => console.log(event);
-     * <Field name="user.name" component="input" onChange={handleChange} />
-     * ```
-     */
-    onChange?: (event: any) => void;
-}
-
-/**
- * Contains props that are passed to components rendered inside Field components.
- */
-export declare interface FieldRenderProps extends FieldRenderPropsBase {
-}
-
-/**
- * Validates a single field and returns an error message or success.
- *
- * * value - Contains the current field value
- * * valueGetter - Gets values from other fields using field paths like 'user.name'
- * * fieldProps - Contains the field's props, including the field name
- *
- * Returns a string for validation errors or undefined for successful validation.
- */
-export declare type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
-    name: string;
-}) => string | undefined;
-
-/**
- * Represents the KendoReact FieldWrapper component.
- * It's designed to wrap the field editor, Label, Hint and Error components.
- * The FieldWrapper supports only single editor inside it.
- */
-export declare const FieldWrapper: React_2.FunctionComponent<FieldWrapperProps>;
-
-/**
- * Represents the props of the KendoReact FieldWrapper component.
- */
-export declare interface FieldWrapperProps {
-    /**
-     * @hidden
-     */
-    children: any;
-    /**
-     * The styles that are applied to the FieldWrapper.
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Sets a class for the FieldWrapper DOM element.
-     */
-    className?: string;
-    /**
-     * Specifies the direction of the content.
-     */
-    dir?: string;
-    /**
-     * Defines the colspan for the form field element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
-     */
-    colSpan?: number | ResponsiveFormBreakPoint[];
-    /**
-     * @hidden
-     */
-    unstyled?: FormClassStructure;
-}
-
+import { FieldProps } from './interfaces/FieldProps.js';
+import { FieldRenderProps } from './interfaces/FieldRenderProps.js';
+import { FormProps } from './interfaces/FormProps.js';
+import { FormRenderProps } from './interfaces/FormRenderProps.js';
+import { Field } from './Field.js';
+import { Form as FormClassComponent, FormHandle } from './Form.js';
+import { FormValidatorType } from './interfaces/FormValidator.js';
+import { FieldValidatorType } from './interfaces/FieldValidator.js';
+import { FieldArray } from './FieldArray.js';
+import { FieldArrayProps } from './interfaces/FieldArrayProps.js';
+import { FieldArrayRenderProps } from './interfaces/FieldArrayRenderProps.js';
+import { KeyValue } from './interfaces/KeyValue.js';
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper.js';
+import { FormElement, FormElementProps, FormElementHandle } from './FormElement.js';
+import { FormSubmitClickEvent } from './interfaces/FormSubmitClickEvent.js';
+import { FormSeparator, FormSeparatorProps, FormSeparatorHandle } from './FormSeparator.js';
+import { FormFieldSet, FormFieldSetProps, FormFieldSetHandle } from './FormFieldSet.js';
+import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
+import { Gutters } from './interfaces/Gutters.js';
 /** @hidden */
-export declare const Form: ForwardRefExoticComponent<FormProps & RefAttributes<any>>;
-
-/**
- * Represents the [KendoReact Form component](https://www.telerik.com/kendo-react-ui/components/form).
- *
- * @example
- * ```jsx
- * export const FormInput = (fieldRenderProps) => {
- *     const onValueChange = React.useCallback(
- *         (event) => fieldRenderProps.onChange(event.target.value),
- *         [fieldRenderProps.onChange]
- *     );
- *     return (
- *         <input
- *             className={'k-input'}
- *             value={fieldRenderProps.value}
- *             onChange={onValueChange}
- *         />
- *     );
- * };
- *
- * export const App = () => {
- *     const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem));
- *     return (
- *         <Form
- *             initialValues={{title: ''}}
- *             onSubmit={handleSubmit}
- *             render={(formRenderProps) => (
- *                 <div>
- *                     <Field name={'title'} component={FormInput} />
- *                     <Button
- *                         disabled={!formRenderProps.allowSubmit}
- *                         onClick={formRenderProps.onSubmit}
- *                     >
- *                         Submit
- *                     </Button>
- *                 </div>
- *             )}
- *         />
- *     );
- * };
- * ```
- */
-export declare class FormClassComponent extends React_2.Component<FormProps, {}> {
-    /**
-     * @hidden
-     */
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        initialValues: default_2.Requireable<any>;
-        onSubmit: default_2.Requireable<(...args: any[]) => any>;
-        onSubmitClick: default_2.Requireable<(...args: any[]) => any>;
-        render: default_2.Validator<(...args: any[]) => any>;
-        id: default_2.Requireable<string>;
-    };
-    private _key?;
-    private _touched;
-    private _visited;
-    private _modified;
-    private _validatorsByField;
-    private _values;
-    private _fields;
-    private _unmounted;
-    private _submitted;
-    private readonly showLicenseWatermark;
-    private readonly licenseMessage?;
-    /**
-     * @hidden
-     */
-    private _accumulatorTimeout;
-    /**
-     * @hidden
-     */
-    get touched(): KeyValue<boolean>;
-    /**
-     * @hidden
-     */
-    set touched(value: KeyValue<boolean>);
-    /**
-     * @hidden
-     */
-    get visited(): KeyValue<boolean>;
-    /**
-     * @hidden
-     */
-    set visited(value: KeyValue<boolean>);
-    /**
-     * @hidden
-     */
-    get modified(): KeyValue<boolean>;
-    /**
-     * @hidden
-     */
-    set modified(value: KeyValue<boolean>);
-    /**
-     * @hidden
-     */
-    get validatorsByField(): KeyValue<(FieldValidatorType | FieldValidatorType[] | undefined)[]>;
-    /**
-     * @hidden
-     */
-    set validatorsByField(value: KeyValue<(FieldValidatorType | FieldValidatorType[] | undefined)[]>);
-    /**
-     * @hidden
-     */
-    get values(): KeyValue<any>;
-    /**
-     * @hidden
-     */
-    set values(value: KeyValue<any>);
-    /**
-     * @hidden
-     */
-    get fields(): string[];
-    /**
-     * @hidden
-     */
-    get formErrors(): KeyValue<string> | undefined;
-    /**
-     * @hidden
-     */
-    get errors(): KeyValue<string>;
-    /**
-     * @hidden
-     */
-    constructor(props: FormProps);
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    isValid: () => boolean;
-    /**
-     * @hidden
-     */
-    accumulatedForceUpdate: () => void;
-    /**
-     * @hidden
-     */
-    resetForm: () => void;
-    /**
-     * Method for resetting the form state outside the form component.
-     *
-     * > Use `onReset` only if you cannot achieve the desired behavior through the Field component or by FormRenderProps.
-     */
-    onReset: () => void;
-    /**
-     * @hidden
-     */
-    addField: (field: string) => void;
-    /**
-     * @hidden
-     */
-    onSubmit: (event: React_2.SyntheticEvent<any>) => void;
-    /**
-     * Method for emiting changes to a specific field outside the form component.
-     *
-     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component by FormRenderProps.
-     */
-    onChange: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onFocus: (name: string, skipForceUpdate?: boolean) => void;
-    /**
-     * @hidden
-     */
-    onBlur: (name: string, skipForceUpdate?: boolean) => void;
-    /**
-     * @hidden
-     */
-    onFieldRegister: (name: string, validator: FieldValidatorType | FieldValidatorType[] | undefined) => () => void;
-    /**
-     * @hidden
-     */
-    isFormValid: (errors: KeyValue<any>) => boolean;
-    /**
-     * @hidden
-     */
-    isFormModified: (modified: KeyValue<boolean>, fields: string[]) => boolean;
-    /**
-     * @hidden
-     */
-    isFormHasNotTouched: (touched: KeyValue<boolean>, fields: string[]) => boolean;
-    /**
-     * @hidden
-     */
-    isFormTouched: (touched: KeyValue<boolean>, fields: string[]) => boolean;
-    /**
-     * @hidden
-     */
-    isFormVisited: (visited: KeyValue<boolean>, fields: string[]) => boolean;
-    /**
-     * @hidden
-     */
-    valueGetter: (fieldName: string) => any;
-    /**
-     * @hidden
-     */
-    valueSetter: (fieldName: string, value: any) => any;
-    /**
-     * @hidden
-     */
-    onArrayAction: (name: string) => void;
-    /**
-     * @hidden
-     */
-    onInsert: (name: string, options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onUnshift: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onPush: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onPop: (name: string) => any;
-    /**
-     * @hidden
-     */
-    onRemove: (name: string, options: {
-        index: number;
-    }) => any;
-    /**
-     * @hidden
-     */
-    onReplace: (name: string, options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    onMove: (name: string, options: {
-        prevIndex: number;
-        nextIndex: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-}
-
-/**
- * Represents the KendoReact FormElement component.
- * It's small wrapper around HTML form element which automatically attach the
- * Form component's `onSubmit` render prop and Kendo CSS classes.
- * Other props are passed to the DOM node.
- */
-export declare const FormElement: React_2.FunctionComponent<FormElementProps>;
-
-/**
- * Represent the `ref` of the FormElement component.
- */
-export declare interface FormElementHandle {
-    /**
-     * Represents the props of the FormElement component.
-     */
-    props: FormElementProps;
-    /**
-     * Represents the element of the FormElement component.
-     */
-    element: HTMLFormElement | null;
-}
-
-/**
- * Represents the props of the KendoReact FormElement component.
- */
-export declare interface FormElementProps {
-    /**
-     * @hidden
-     */
-    children?: any;
-    /**
-     * The styles that are applied to the form DOM element.
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Sets a class for the form DOM element.
-     */
-    className?: string;
-    /**
-     * If set to `true` enable the horizontal layout of the form editors.
-     */
-    horizontal?: boolean;
-    /**
-     * Sets the id of the form DOM element. Takes priority over the Form's id.
-     */
-    id?: string;
-    /**
-     * Defines the number of columns in the form. Can be a number or an array of responsive breakpoints.
-     */
-    cols?: number | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the gutters for the form. You can specify gutters for rows and columns. Number is equivalent to px.
-     */
-    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-    /**
-     * Configures the `size` of the Form.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * @hidden
-     */
-    unstyled?: FormClassStructure;
-}
-
-/**
- * Represents the KendoReact FormFieldSet component.
- */
-export declare const FormFieldSet: React_2.FunctionComponent<FormFieldSetProps>;
-
-/**
- * Represent the `ref` of the FormFieldSet component.
- */
-export declare interface FormFieldSetHandle {
-    /**
-     * Represents the props of the  FormFieldSet component.
-     */
-    props: FormFieldSetProps;
-    /**
-     * Represents the element of the FormFieldSet component.
-     */
-    element: HTMLFieldSetElement | null;
-}
-
-/**
- * Represents the props of the KendoReact FormFieldSet component.
- */
-export declare interface FormFieldSetProps {
-    /**
-     * Defines the number of columns of the fieldset. Can be a number or an array of responsive breakpoints.
-     */
-    cols?: number | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the colspan for the fieldset related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
-     */
-    colSpan?: number | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the gutters for the fieldset. You can specify gutters for rows and columns. Number is equivalent to px.
-     */
-    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the legend for the fieldset.
-     */
-    legend?: string;
-    /**
-     * @hidden
-     */
-    children?: any;
-    /**
-     * The styles that are applied to the form DOM element.
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Sets a class for the form DOM element.
-     */
-    className?: string;
-}
-
-/**
- * Represent the `ref` of the Form component.
- */
-export declare interface FormHandle extends Pick<FormClassComponent, keyof FormClassComponent> {
-}
-
-/**
- * Contains the props for the KendoReact Form component.
- */
-export declare interface FormProps {
-    /**
-     * Sets the starting values for form fields.
-     *
-     * Set initial values to prevent errors when switching from uncontrolled to controlled mode.
-     *
-     * @example
-     * ```jsx
-     * const initialValues = { user: { name: '', age: 0 } };
-     * <Form initialValues={initialValues} render={props => <form>form content</form>} />
-     * ```
-     */
-    initialValues?: {
-        [name: string]: any;
-    };
-    /**
-     * Validation errors that override field and form validators.
-     *
-     * Provides validation errors directly as an object, unlike the validator prop which expects a callback.
-     * When both validator and errors exist for a field, the errors prop takes precedence.
-     *
-     * @example
-     * ```jsx
-     * const [errors, setErrors] = useState({});
-     * const handleSubmit = async (data) => {
-     *     const response = await submitToServer(data);
-     *     if (response.errors) {
-     *         setErrors(response.errors);
-     *     }
-     * };
-     * <Form errors={errors} onSubmit={handleSubmit} render={props => <FormElement>form content</FormElement>} />
-     * ```
-     */
-    errors?: {
-        [name: string]: string;
-    };
-    /**
-     * Fires each time any field value changes.
-     *
-     * The third parameter `valueGetter` allows accessing other field values, useful for cross-field validation or clearing related errors.
-     *
-     * @example
-     * ```jsx
-     * const handleChange = (fieldName, value, valueGetter) => {
-     *     // For nested fields like 'user.name', access related fields like 'user.email'
-     *     if (fieldName === 'user.name') {
-     *         const email = valueGetter('user.email');
-     *         console.log('Name changed:', value, 'Email is:', email);
-     *     }
-     *     // Clear error for the changed field
-     *     if (formErrors[fieldName]) {
-     *         setFormErrors(prev => ({ ...prev, [fieldName]: '' }));
-     *     }
-     * };
-     * <Form errors={formErrors} onChange={handleChange} render={props => <FormElement>form content</FormElement>} />
-     * ```
-     */
-    onChange?: (fieldName: string, value: any, valueGetter: (name: string) => any) => void;
-    /**
-     * Validates the entire form and returns error messages.
-     *
-     * Return a key-value pair where the key is the field path and the value is the error message.
-     * You can validate nested fields like 'users[0].name'.
-     * Only synchronous functions are supported.
-     *
-     * @example
-     * ```jsx
-     * const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } });
-     * <Form validator={validator} render={props => <form> form content </form>} />
-     * ```
-     */
-    validator?: FormValidatorType;
-    /**
-     * Handles form submission when validation passes and fields are modified.
-     *
-     * Fires when at least one field is modified, the user clicks Submit, and validation passes.
-     *
-     * @example
-     * ```jsx
-     * const handleSubmit = (values, event) => console.log(values);
-     * <Form onSubmit={handleSubmit} render={props => <form> form content </form>} />
-     * ```
-     */
-    onSubmit?: (values: {
-        [name: string]: any;
-    }, event?: React.SyntheticEvent<any>) => void;
-    /**
-     * Handles every submit button click, even when the form is invalid or unchanged.
-     *
-     * Use this for advanced scenarios where you need to handle all submit events.
-     *
-     * @example
-     * ```jsx
-     * const handleSubmitClick = event => console.log(event);
-     * <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
-     * ```
-     */
-    onSubmitClick?: (event: FormSubmitClickEvent) => void;
-    /**
-     * Renders the form content using the provided render function.
-     *
-     * @example
-     * ```jsx
-     * const renderForm = props => <form> form content </form>;
-     * <Form render={renderForm} />
-     * ```
-     */
-    render: (props: FormRenderProps) => any;
-    /**
-     * Allows the form to submit even when no fields have been modified.
-     *
-     * @example
-     * ```jsx
-     * <Form ignoreModified={true} render={props => <form>form content </form>} />
-     * ```
-     */
-    ignoreModified?: boolean;
-    /**
-     * @hidden
-     * This prop comes from the `withId` HOC and is used internally by the Form.
-     * It replaces the previously used guid() function and generates an `id` of the Form.
-     */
-    id?: string;
-}
-
-/**
- * Contains props that are passed to the form's render function.
- */
-export declare interface FormRenderProps {
-    /**
-     * Submits the form when called.
-     * Use this with the onClick property of Submit buttons.
-     *
-     * @example
-     * ```jsx
-     * const handleSubmit = event => console.log("Form submitted");
-     * <Button onClick={props.onSubmit}>Submit</Button>
-     * ```
-     */
-    onSubmit: (event: React.SyntheticEvent<any>) => void;
-    /**
-     * A callback for emitting changes to a specific field without using the Field component
-     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-changing-the-field-value)).
-     *
-     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component.
-     *
-     * @example
-     * ```jsx
-     * props.onChange("user.name", { value: "John Doe" });
-     * ```
-     */
-    onChange: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * Resets the form to its initial state.
-     *
-     * @example
-     * ```jsx
-     * <Button onClick={props.onFormReset}>Reset</Button>
-     * ```
-     */
-    onFormReset: () => void;
-    /**
-     * Contains current validation errors organized by field path.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.errors);
-     * ```
-     */
-    errors: KeyValue<string>;
-    /**
-     * Shows whether the form passes all validation rules.
-     * Becomes false if any field fails validation.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.valid);
-     * ```
-     */
-    valid: boolean;
-    /**
-     * Shows whether the user has interacted with any field.
-     * Becomes true when any field loses focus or the user tries to submit.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.touched);
-     * ```
-     */
-    touched: boolean;
-    /**
-     * Shows whether the user has focused on any field.
-     * Becomes true when any field receives focus or the user tries to submit.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.visited);
-     * ```
-     */
-    visited: boolean;
-    /**
-     * Shows whether any field value has changed from its initial value.
-     * Becomes true when any field value changes for the first time.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.modified);
-     * ```
-     */
-    modified: boolean;
-    /**
-     * Shows whether the form has been successfully submitted.
-     * Use this to detect if the user is leaving before saving changes.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.submitted);
-     * ```
-     */
-    submitted: boolean;
-    /**
-     * Shows whether the form can be submitted.
-     * When true and form is valid, you can submit. When true and form is invalid, you can show all validation errors.
-     *
-     * Use this to control the disabled state of Submit buttons.
-     *
-     * @example
-     * ```jsx
-     * console.log(props.allowSubmit);
-     * ```
-     */
-    allowSubmit: boolean;
-    /**
-     * A callback for getting the value of a field without using the Field component
-     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-reading-the-field-state)).
-     * Useful for creating and modifying the UI based on the field values.
-     *
-     * @example
-     * ```jsx
-     * const value = props.valueGetter("user.name");
-     * console.log(value);
-     * ```
-     */
-    valueGetter: (name: string) => any;
-}
-
-/**
- * Represents the KendoReact FormSeparator component.
- */
-export declare const FormSeparator: React_2.FunctionComponent<FormSeparatorProps>;
-
-/**
- * Represent the `ref` of the FormSeparator component.
- */
-export declare interface FormSeparatorHandle {
-    /**
-     * Represents the props of the FormSeparator component.
-     */
-    props: FormSeparatorProps;
-    /**
-     * Represents the element of the FormSeparator component.
-     */
-    element: HTMLSpanElement | null;
-}
-
-/**
- * Represents the props of the KendoReact FormSeparator component.
- */
-export declare interface FormSeparatorProps {
-    /**
-     * Defines the colspan for the separator element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
-     */
-    colSpan?: number | ResponsiveFormBreakPoint[];
-    /**
-     * @hidden
-     */
-    children?: any;
-    /**
-     * The styles that are applied to the form DOM element.
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * Sets a class for the form DOM element.
-     */
-    className?: string;
-}
-
-/**
- * Contains data for the form submit click event.
- */
-export declare interface FormSubmitClickEvent {
-    /**
-     * Provides the current values from all form fields.
-     */
-    values: {
-        [name: string]: any;
-    };
-    /**
-     * Contains the original browser event that triggered the submit.
-     */
-    event?: React.SyntheticEvent<any>;
-    /**
-     * Shows whether the form passes all validation rules.
-     */
-    isValid: boolean;
-    /**
-     * Shows whether any form fields have been changed from their initial values.
-     */
-    isModified: boolean;
-}
-
-/**
- * Validates an entire form and returns error messages.
- *
- * * values - Contains the current values from all form fields
- * * valueGetter - Gets field values using field paths like 'user.name'
- *
- * Returns a key-value pair where the key is the field path and the value is the error message.
- */
-export declare type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;
-
-/**
- * Represents the [gutters](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) configuration for a form layout.
- * It allows defining the spacing between the columns and rows of the form.
- * Each property can be a number or an array of responsive breakpoints.
- */
-export declare interface Gutters {
-    /**
-     * Defines the gutters for the columns in the form.
-     * Can be a number or an array of responsive breakpoints.
-     */
-    cols?: string | number | ResponsiveFormBreakPoint[];
-    /**
-     * Defines the gutters for the rows in the form.
-     * Can be a number or an array of responsive breakpoints.
-     */
-    rows?: string | number | ResponsiveFormBreakPoint[];
-}
-
-/**
- * Represents a key-value pair collection where keys are strings.
- */
-export declare interface KeyValue<ValueType> {
-    [name: string]: ValueType;
-}
-
-/**
- * Defines responsive breakpoints for form layouts.
- * Each breakpoint sets minimum and maximum widths and values for columns or spacing at different screen sizes.
- */
-export declare interface ResponsiveFormBreakPoint {
-    /**
-     * Sets the minimum screen width in pixels for this breakpoint.
-     */
-    minWidth?: number;
-    /**
-     * Sets the maximum screen width in pixels for this breakpoint.
-     */
-    maxWidth?: number;
-    /**
-     * Sets the number of columns or spacing for form controls at this screen size.
-     */
-    value: number | string;
-}
-
-export { }
+declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<any>>;
+export { FieldArray, FieldArrayProps, FieldArrayRenderProps, Field, FieldProps, FieldRenderProps, Form, FormClassComponent, FormHandle, FormProps, FormRenderProps, FormValidatorType, FieldValidatorType, KeyValue, FieldWrapper, FieldWrapperProps, FormElement, FormElementHandle, FormElementProps, FormSubmitClickEvent, FormSeparator, FormSeparatorProps, FormSeparatorHandle, FormFieldSet, FormFieldSetProps, FormFieldSetHandle, ResponsiveFormBreakPoint, Gutters };

package-metadata.js

@@ -8,2 +8,2 @@ /**
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1768550020,version:"13.3.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1770218860,version:"13.4.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package-metadata.mjs

@@ -0,19 +1,13 @@
+// Generated file. DO NOT EDIT.
 /**
- * @license
- *-------------------------------------------------------------------------------------------
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
- * Licensed under commercial license. See LICENSE.md in the package root for more information
- *-------------------------------------------------------------------------------------------
+ * @hidden
  */
-const e = Object.freeze({
-  name: "@progress/kendo-react-form",
-  productName: "KendoReact",
-  productCode: "KENDOUIREACT",
-  productCodes: ["KENDOUIREACT"],
-  publishDate: 1768550020,
-  version: "13.3.0",
-  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
+export const packageMetadata = Object.freeze({
+    name: '@progress/kendo-react-form',
+    productName: 'KendoReact',
+    productCode: 'KENDOUIREACT',
+    productCodes: ['KENDOUIREACT'],
+    publishDate: 0,
+    version: '13.4.0-develop.1',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });
-export {
-  e as packageMetadata
-};

package.json

 {
   "name": "@progress/kendo-react-form",
-  "version": "13.3.0",
+  "version": "13.4.0-develop.1",
   "description": "React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package",
@@ -29,3 +29,3 @@ "author": "Progress",
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-common": "13.3.0",
+    "@progress/kendo-react-common": "13.4.0-develop.1",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
@@ -55,3 +55,3 @@ "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       "productCode": "KENDOUIREACT",
-      "publishDate": 1768550020,
+      "publishDate": 1770218860,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
@@ -58,0 +58,0 @@ }

utils.mjs

@@ -8,4 +8,3 @@ /**
  */
-const f = " ";
-function p(r) {
+function a(r) {
   let e = r.clientWidth;
@@ -20,4 +19,4 @@ const n = getComputedStyle(r);
   for (const [o, s] of r.entries()) {
-    const t = o > 0 && r[o - 1].maxWidth !== void 0 ? r[o - 1].maxWidth : void 0, i = o < r.length - 1 && r[o + 1].minWidth !== void 0 ? r[o + 1].minWidth : void 0, d = (n = s.minWidth) != null ? n : t !== void 0 ? t + 1 : 0, a = (l = s.maxWidth) != null ? l : i !== void 0 ? i - 1 : 1 / 0;
-    if (e >= d && e <= a)
+    const t = o > 0 && r[o - 1].maxWidth !== void 0 ? r[o - 1].maxWidth : void 0, i = o < r.length - 1 && r[o + 1].minWidth !== void 0 ? r[o + 1].minWidth : void 0, u = (n = s.minWidth) != null ? n : t !== void 0 ? t + 1 : 0, d = (l = s.maxWidth) != null ? l : i !== void 0 ? i - 1 : 1 / 0;
+    if (e >= u && e <= d)
       return s.value;
@@ -27,3 +26,3 @@ }
 }
-const u = (r) => {
+const f = (r) => {
   if (typeof r == "number")
@@ -36,3 +35,3 @@ return `${r}px`;
   return null;
-}, y = (r, e) => {
+}, p = (r, e) => {
   if (!r)
@@ -46,3 +45,3 @@ return null;
   return null;
-}, w = (r) => r && r > 0 ? `k-grid-cols-${r}` : "", h = (r, e) => {
+}, y = (r) => r && r > 0 ? `k-grid-cols-${r}` : "", A = (r, e) => {
   if (!r)
@@ -57,3 +56,3 @@ return null;
   return null;
-}, m = (r) => r ? `k-col-span-${r}` : "", A = (r, e) => {
+}, C = (r) => r ? `k-col-span-${r}` : "", w = (r, e) => {
   if (!r)
@@ -64,5 +63,5 @@ return null;
   if (typeof r == "string") {
-    if (!r.includes(f))
+    if (!r.includes(" "))
       return { cols: r, rows: r };
-    const n = r.split(f);
+    const n = r.split(" ");
     return { cols: n[1], rows: n[0] };
@@ -77,17 +76,17 @@ } else if (Array.isArray(r)) {
   return null;
-}, C = (r, e) => {
+}, h = (r, e) => {
   var o, s, t, i;
-  const n = u((s = (o = r == null ? void 0 : r.rows) != null ? o : e.rows) != null ? s : "0px"), l = u((i = (t = r == null ? void 0 : r.cols) != null ? t : e.cols) != null ? i : "32px");
+  const n = f((s = (o = r == null ? void 0 : r.rows) != null ? o : e.rows) != null ? s : "0px"), l = f((i = (t = r == null ? void 0 : r.cols) != null ? t : e.cols) != null ? i : "32px");
   return `${n} ${l}`;
 };
 export {
-  h as calculateColSpan,
-  y as calculateColumns,
-  A as calculateGutters,
-  m as generateColSpanClass,
-  w as generateColumnClass,
-  C as generateGuttersStyling,
-  p as innerWidth,
+  A as calculateColSpan,
+  p as calculateColumns,
+  w as calculateGutters,
+  C as generateColSpanClass,
+  y as generateColumnClass,
+  h as generateGuttersStyling,
+  a as innerWidth,
   c as processBreakpoints,
-  u as processCssValue
+  f as processCssValue
 };

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Number of package files

51

75.86%

Lines of code

2327

16.12%

Number of low supply chain risk alerts

2

-77.78%

Worsened metrics

Total package byte prevSize

149454

-9.12%

Number of low quality alerts

10

11.11%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes