@progress/kendo-react-form 13.3.0 → 13.4.0-develop.1

package/interfaces/FieldArrayProps.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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;
+}

package/interfaces/FieldArrayRenderProps.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @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;
+}

package/interfaces/FieldProps.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @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;
+}

package/interfaces/FieldRenderProps.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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 {
+}

package/interfaces/FieldValidator.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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;

package/interfaces/FormProps.d.ts

@@ -0,0 +1,137 @@
+/**
+ * @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;
+}

package/interfaces/FormRenderProps.d.ts

@@ -0,0 +1,130 @@
+/**
+ * @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;
+}

package/interfaces/FormSubmitClickEvent.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @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;
+}

package/interfaces/FormValidator.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @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;

package/interfaces/Gutters.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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[];
+}

package/interfaces/KeyValue.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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;
+}

package/interfaces/ResponsiveFormBreakPoint.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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/package-metadata.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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;

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"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/package-metadata.mjs

@@ -1,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
-};