@progress/kendo-react-form 6.1.1 → 7.0.0-develop.2

package/dist/es/interfaces/FieldArrayRenderProps.d.ts

@@ -1,89 +0,0 @@
-/**
- * Represents the props that are passed to the component which is rendered by FieldArray.
- */
-export interface FieldArrayRenderProps {
-    /**
-     * Represents the current value of the FieldArray
-     * ([see example]({% slug custom_components_form %}#toc-using-basic-properties)).
-     */
-    value: any;
-    /**
-     * Represents the error message that is returned by the validator.
-     * The FieldArray is considered valid if the `validationMessage` field is empty.
-     */
-    validationMessage: string | null;
-    /**
-     * Indicates if the field is touched.
-     * The touched state is set to `true` when the `onBlur` callback is called.
-     */
-    touched: boolean;
-    /**
-     * Indicates if the field is modified.
-     * The modified state is set to `true` when the `onChange` callback for the current field is called for first time.
-     */
-    modified: boolean;
-    /**
-     * Indicates if the field is visited.
-     * The visited state is set to `true` when the `onFocus` callback is called.
-     */
-    visited: boolean;
-    /**
-     * A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
-     */
-    valid: boolean;
-    /**
-     * Represents the children that are passed to the FieldArray.
-     */
-    children: any;
-    /**
-     * The name of the field in the Form state.
-     */
-    name: string;
-    /**
-     * A callback to add a value to the beginning of the array.
-     */
-    onUnshift: (options: {
-        value: any;
-    }) => number;
-    /**
-     * A callback to add a value to the end of the array.
-     */
-    onPush: (options: {
-        value: any;
-    }) => void;
-    /**
-     * A callback to insert value at given index of the array.
-     */
-    onInsert: (options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * A callback to remove a value from the end of the array. The value is returned.
-     */
-    onPop: () => any;
-    /**
-     * A callback to remove a value from given index of the array.
-     */
-    onRemove: (options: {
-        index: number;
-    }) => any;
-    /**
-     * A callback to replace value at given index of the array.
-     */
-    onReplace: (options: {
-        value: any;
-        index: number;
-    }) => void;
-    /**
-     * A callback to move a value from one index to another. Useful for drag and drop reordering.
-     */
-    onMove: (options: {
-        prevIndex: number;
-        nextIndex: number;
-    }) => void;
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-}

package/dist/es/interfaces/FieldArrayRenderProps.js

@@ -1 +0,0 @@
-export {};

package/dist/es/interfaces/FieldProps.d.ts

@@ -1,40 +0,0 @@
-/// <reference types="react" />
-import { FieldValidatorType } from './FieldValidator';
-/**
- * Represents the props of the Field component that is used inside the KendoReact Form component.
- */
-export interface FieldProps {
-    /**
-     * The name of the field in the Form state.
-     * Supports nested fields in the `user.age` and `users[index].name` formats.
-     */
-    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 component are the
-     * [`FieldRenderProps`]({% slug api_form_fieldrenderprops %}).
-     */
-    component: string | React.ComponentType<any>;
-    /**
-     * The validation functions for the Field level.
-     * Currently, `validator` supports only synchronous functions.
-     * Using the array overload with inline array will cause an infinite loop - in this case use a `useMemo` hook to memoize the array.
-     */
-    validator?: FieldValidatorType | FieldValidatorType[];
-    /**
-     * The React elements that are passed as children to the rendered component.
-     */
-    children?: any;
-    /**
-     * Called when underlying editor triggers it's `onChange` event and the Form update it's internal state.
-     * Useful for updating related fields.
-     * > The `Form` listens to this editor event and automatically keeps it's internal state up to date.
-     * That why this event should be used only for executing custom logic.
-     */
-    onChange?: (event: any) => void;
-    /**
-     * @hidden
-     */
-    [customProp: string]: any;
-}

package/dist/es/interfaces/FieldProps.js

@@ -1 +0,0 @@
-export {};

package/dist/es/interfaces/FieldRenderProps.js

@@ -1 +0,0 @@
-export {};

package/dist/es/interfaces/FieldValidator.js

@@ -1 +0,0 @@
-export {};

package/dist/es/interfaces/FormProps.js

@@ -1 +0,0 @@
-export {};

package/dist/es/interfaces/FormRenderProps.d.ts

@@ -1,75 +0,0 @@
-/// <reference types="react" />
-import { KeyValue } from './KeyValue';
-/**
- * Represents the props that are passed to the `render` option component of the Form.
- */
-export interface FormRenderProps {
-    /**
-     * A callback for submitting the Form.
-     * Can be passed to the `onClick` property of the **Submit** button.
-     */
-    onSubmit: (event: React.SyntheticEvent<any>) => void;
-    /**
-     * A callback for emiting changes to a specific field without using the Field component
-     * ([see example]({% slug common_scenarios_form %}#toc-changing-the-field-value)).
-     *
-     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component.
-     */
-    onChange: (name: string, options: {
-        value: any;
-    }) => void;
-    /**
-     * A callback for resetting the Form.
-     */
-    onFormReset: () => void;
-    /**
-     * The key-value pair containing the current errors by field path, combined from both field and form level validators.
-     */
-    errors: KeyValue<string>;
-    /**
-     * Indicates if the Form is valid.
-     * If any field is invalid, `valid` is set to `false`.
-     */
-    valid: boolean;
-    /**
-     * Indicates if the Form is touched.
-     * If any field is touched, `touched` is set to `true`.
-     * The touched state of field is set to `true` when the `onBlur`
-     * callback of the Field component is called or when the user tries to submit the form.
-     */
-    touched: boolean;
-    /**
-     * Indicates if the Form is visited.
-     * If any field is visited, `visited` is set to `true`.
-     * The visited state of field is set to `true` when the `onFocus`
-     * callback of the Field component is called or when the user tries to submit the form.
-     */
-    visited: boolean;
-    /**
-     * Indicates if the Form is modified.
-     * If any field is modified, `modified` is set to `true`.
-     * The modified state of field is set to `true` when the `onChange`
-     * callback of the Field component is called for first time.
-     */
-    modified: boolean;
-    /**
-     * Indicates if the Form is successfuly submitted.
-     * Useful for detecting if user is leaving the form before saving changes.
-     */
-    submitted: boolean;
-    /**
-     * Indicates if the Form is ready to be submitted.
-     * * If `allowSubmit` is set to `true` and the Form is valid, the user will be able to submit the form.
-     * * If `allowSubmit` is set to `true` and the Form is not valid, the user will be able to set the `touched` and `visited` state of all fields to `true`.
-     * `touched` and `visited` state to true.
-     *
-     * Useful for toggling the disabled state of the **Submit** button.
-     */
-    allowSubmit: boolean;
-    /**
-     * A callback for getting the value of a field without using the Field component
-     * ([see example]({% slug common_scenarios_form %}#toc-reading-the-field-state)).
-     * Useful for creating and modifying the UI based on the field values.
-     */
-    valueGetter: (name: string) => any;
-}

package/dist/es/interfaces/FormRenderProps.js

@@ -1 +0,0 @@
-export {};

package/dist/es/interfaces/FormSubmitClickEvent.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-/**
- * The FormSubmitClick event.
- */
-export interface FormSubmitClickEvent {
-    /**
-     * Contains the current values of the form.
-     */
-    values: {
-        [name: string]: any;
-    };
-    /**
-     * The native event.
-     */
-    event?: React.SyntheticEvent<any>;
-    /**
-     * Represents the validity state of the form.
-     */
-    isValid: boolean;
-    /**
-     * Represents the modified state of the form.
-     */
-    isModified: boolean;
-}

package/dist/es/interfaces/FormSubmitClickEvent.js

@@ -1 +0,0 @@
-export {};

package/dist/es/interfaces/FormValidator.d.ts

@@ -1,10 +0,0 @@
-import { KeyValue } from './KeyValue';
-/**
- * The validator function for the Form component.
- *
- * * values - The current values of the form.
- * * valueGetter - Function which can be used to get field value. Supports field paths.
- *
- * Returns key-value pair with errors if such are present. The key is the field path, where the value is the error message.
- */
-export declare type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;

package/dist/es/interfaces/FormValidator.js

@@ -1 +0,0 @@
-export {};

package/dist/es/interfaces/KeyValue.d.ts

@@ -1,6 +0,0 @@
-/**
- *
- */
-export interface KeyValue<ValueType> {
-    [name: string]: ValueType;
-}

package/dist/es/interfaces/KeyValue.js

@@ -1 +0,0 @@
-export {};

package/dist/es/main.d.ts

@@ -1,16 +0,0 @@
-import { FieldProps } from './interfaces/FieldProps';
-import { FieldRenderProps } from './interfaces/FieldRenderProps';
-import { FormProps } from './interfaces/FormProps';
-import { FormRenderProps } from './interfaces/FormRenderProps';
-import { Field } from './Field';
-import { Form } from './Form';
-import { FormValidatorType } from './interfaces/FormValidator';
-import { FieldValidatorType } from './interfaces/FieldValidator';
-import { FieldArray } from './FieldArray';
-import { FieldArrayProps } from './interfaces/FieldArrayProps';
-import { FieldArrayRenderProps } from './interfaces/FieldArrayRenderProps';
-import { KeyValue } from './interfaces/KeyValue';
-import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
-import { FormElement, FormElementProps, FormElementHandle } from './FormElement';
-import { FormSubmitClickEvent } from './interfaces/FormSubmitClickEvent';
-export { FieldArray, FieldArrayProps, FieldArrayRenderProps, Field, FieldProps, FieldRenderProps, Form, FormProps, FormRenderProps, FormValidatorType, FieldValidatorType, KeyValue, FieldWrapper, FieldWrapperProps, FormElement, FormElementHandle, FormElementProps, FormSubmitClickEvent };

package/dist/es/main.js

@@ -1,6 +0,0 @@
-import { Field } from './Field';
-import { Form } from './Form';
-import { FieldArray } from './FieldArray';
-import { FieldWrapper } from './FieldWrapper';
-import { FormElement } from './FormElement';
-export { FieldArray, Field, Form, FieldWrapper, FormElement };

package/dist/es/package-metadata.d.ts

@@ -1,5 +0,0 @@
-import { PackageMetadata } from '@progress/kendo-licensing';
-/**
- * @hidden
- */
-export declare const packageMetadata: PackageMetadata;

package/dist/es/package-metadata.js

@@ -1,11 +0,0 @@
-/**
- * @hidden
- */
-export var packageMetadata = {
-    name: '@progress/kendo-react-form',
-    productName: 'KendoReact',
-    productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1700063972,
-    version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
-};

package/dist/npm/Field.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { FieldProps } from './interfaces/FieldProps';
-/**
- * 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): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-    displayName: string;
-};

package/dist/npm/Field.js

@@ -1,96 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Field = void 0;
-var React = require("react");
-var FormContext_1 = require("./FormContext");
-/**
- * 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.
- */
-var Field = function (props) {
-    var name = props.name, component = props.component, validator = props.validator, children = props.children, onChange = props.onChange, others = __rest(props, ["name", "component", "validator", "children", "onChange"]);
-    var form = React.useContext(FormContext_1.FormContext);
-    var formId = form ? form.id : '';
-    React.useEffect(function () {
-        if (!form) {
-            return;
-        }
-        var unregisterField = form.registerField(name, validator);
-        return unregisterField;
-    }, [name, formId, validator]);
-    var handleOnChange = React.useCallback(function (event) {
-        // Adding a name here slows down the performance.
-        // However, the other apprach taken by Formik is to search for the `name` attribute
-        // on `event.target.value` which does not work for all KendoReact components.
-        // If Formik uses custom components like the KendoReact ones, it would take the same approach.
-        // On the other hand, ReactFinal Form performs better in both cases due to its
-        // subscribtion-based model - the fields are subscribed for changes to a given field,
-        // which prevents unnececery rerenders. Note that this might be fragile in future React versions -
-        // the current performance testing accunts for a slight lag after 300 native HTML inputs in the 120ms-200ms range.
-        var newValue = event
-            ? (event.value !== undefined
-                ? event.value
-                : (event.target
-                    ? event.target.value
-                    : event.target))
-            : event;
-        form.onChange(name, { value: newValue });
-        if (onChange) {
-            onChange.call(undefined, event);
-        }
-    }, [name, formId, onChange]);
-    var onNativeComponentChange = React.useCallback(function (event) { return form.onChange(name, { value: event.target.value }); }, [name, formId]);
-    var handleOnBlur = React.useCallback(function () { return form.onBlur(name); }, [name, formId]);
-    var handleOnFocus = React.useCallback(function () { return form.onFocus(name); }, [name, formId]);
-    if (!form) {
-        // TODO: For future versions - warn for missing form in dev mode
-        // if (__process.env.NODE_ENV !== 'production') { // or __DEV__
-        //     throw new Error('Field must be used inside of a <Form> component');
-        // }
-        return null;
-    }
-    var value = form.valueGetter(name);
-    // TODO: For future versions as it's better to have render prop
-    // if (typeof children === 'function') {
-    //     return children({ ...field, children: undefined, ...others });
-    // }
-    if (typeof component === 'string') {
-        // ignore meta, combine input with any other props
-        return React.createElement(component, __assign({ onChange: onNativeComponentChange, onBlur: handleOnBlur, onFocus: handleOnFocus, value: value, children: children }, others));
-    }
-    return React.createElement(component, __assign(__assign({ children: children }, others), { 
-        // input
-        onChange: handleOnChange, onBlur: handleOnBlur, onFocus: handleOnFocus, value: value, 
-        // meta
-        validationMessage: form.errors[name], touched: form.touched[name], modified: form.modified[name], visited: form.visited[name], 
-        // Our `valid` implementation requires double submit to show html5 validation errors,
-        // however it's NOT recommended to show html5 validation errors at all as:
-        // - There is no standard way to change validation look and feel with CSS.
-        // - Look different in each browser / OS
-        // - You can have a page in one language but an error message displayed in another language (not localizable)
-        valid: !(Boolean(form.errors[name]) && form.touched[name]), name: name }));
-};
-exports.Field = Field;
-exports.Field.displayName = 'KendoReactField';

package/dist/npm/FieldArray.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { FieldArrayProps } from './interfaces/FieldArrayProps';
-/**
- * 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>;

package/dist/npm/FieldArray.js

@@ -1,76 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldArray = void 0;
-var React = require("react");
-var FormContext_1 = require("./FormContext");
-/**
- * Represents the FieldArray component that is used inside the KendoReact Form component.
- * It provides methods via render props for common array manipulations.
- */
-var FieldArray = function (props) {
-    var name = props.name, component = props.component, validator = props.validator, type = props.type, children = props.children, others = __rest(props, ["name", "component", "validator", "type", "children"]);
-    var form = React.useContext(FormContext_1.FormContext);
-    var formId = form ? form.id : '';
-    React.useEffect(function () {
-        if (!form) {
-            return;
-        }
-        var unregisterField = form.registerField(name, validator);
-        return unregisterField;
-    }, [name, formId, validator]);
-    var onUnshift = React.useCallback(function (event) { return form.onUnshift(name, event); }, [name, formId]);
-    var onPush = React.useCallback(function (event) { return form.onPush(name, event); }, [name, formId]);
-    var onInsert = React.useCallback(function (event) { return form.onInsert(name, event); }, [name, formId]);
-    var onPop = React.useCallback(function () { return form.onPop(name); }, [name, formId]);
-    var onRemove = React.useCallback(function (event) { return form.onRemove(name, event); }, [name, formId]);
-    var onReplace = React.useCallback(function (event) { return form.onReplace(name, event); }, [name, formId]);
-    var onMove = React.useCallback(function (event) { return form.onMove(name, event); }, [name, formId]);
-    if (!form) {
-        // TODO: For future versions - warn for missing form in dev mode
-        // if (__process.env.NODE_ENV !== 'production') { // or __DEV__
-        //     throw new Error('Field must be used inside of a <Form> component');
-        // }
-        return null;
-    }
-    // TODO: remove this and pass down  getter to allow users optimize when to refresh the data?
-    var value = form.valueGetter(name);
-    // TODO: For future versions as it's better to have render prop
-    // if (typeof children === 'function') {
-    //     return children({ ...field, children: undefined, ...others });
-    // }
-    return React.createElement(component, __assign({ 
-        // input
-        value: value, 
-        // meta
-        validationMessage: form.errors[name], touched: form.touched[name], modified: form.modified[name], visited: form.visited[name], 
-        // Our `valid` implementation requires double submit to show html5 validation errors,
-        // however it's NOT recommended to show html5 validation errors at all as:
-        // - There is no standard way to change validation look and feel with CSS.
-        // - Look different in each browser / OS
-        // - You can have a page in one language but an error message displayed in another language (not localizable)
-        valid: !(Boolean(form.errors[name]) && form.touched[name]), onUnshift: onUnshift, onPush: onPush, onInsert: onInsert, onPop: onPop, onRemove: onRemove, onReplace: onReplace, onMove: onMove, children: children, name: name }, others));
-};
-exports.FieldArray = FieldArray;
-exports.FieldArray.displayName = 'KendoReactFieldArray';

package/dist/npm/FieldWrapper.d.ts

@@ -1,28 +0,0 @@
-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 of the FieldWrapper DOM element.
-     */
-    className?: string;
-    /**
-     * Specifies the direction of the content.
-     */
-    dir?: string;
-}
-/**
- * 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>;

package/dist/npm/FieldWrapper.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldWrapper = void 0;
-var React = require("react");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-/**
- * 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.
- */
-var FieldWrapper = function (props) {
-    var fieldClassName = (0, kendo_react_common_1.classNames)({
-        'k-form-field': true,
-        'k-rtl': props.dir === 'rtl'
-    }, props.className);
-    return (React.createElement("div", { className: fieldClassName, style: props.style }, props.children));
-};
-exports.FieldWrapper = FieldWrapper;
-exports.FieldWrapper.displayName = 'KendoReactFieldWrapper';