@progress/kendo-react-form 12.0.2-develop.3 → 12.0.2-develop.5

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

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!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 v=u.valueGetter(t);if("string"==typeof s)return r.createElement(s,{onChange:h,onBlur:m,onFocus:f,value:v,children:o,...a});const p={children:o,...a,onChange:c,onBlur:m,onFocus:f,value:v,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 p.children,r.createElement(s,p)};l.displayName="KendoReactField";const a=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.0.2-develop.3",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.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.length;return this.validatorsByField={...this.validatorsByField,[e]:[...s,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],s=!!t[i];t[i]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&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;return 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}))}})),this.formErrors&&i.cloneObject(this.formErrors,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]),v=r.useCallback((e=>u.onRemove(t,e)),[t,d]),p=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:v,onReplace:p,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},v=(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},p=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),v=r.useRef(null);r.useEffect((()=>{a.current&&(v.current=a.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=null==v?void 0:v.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 p=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:p,style:s},l)};w.displayName="KendoReactFieldWrapper";const R={rows:"0px",cols:"32px"},S=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(),S=w&&w.uForm,[C,_]=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:S,size:m,orientation:k}),u)),[u,S,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=v(f,e);_(p(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:S}),C),style:E},e.children):e.children)}));S.displayName="KendoReactFormElement";const C=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),v=r.useRef(null);r.useEffect((()=>{s.current&&(v.current=s.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=v.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 p=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:p})}));C.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,S]=r.useState(void 0),[C,E]=r.useState(void 0),[N,k]=r.useState(void 0),A=r.useMemo((()=>i.classNames(i.uForm.fieldset({c:w}),C,n)),[n,w,C]),U=r.useMemo((()=>i.classNames(i.uForm.formLayout({c:w}),R)),[w,R]),x=r.useMemo((()=>i.classNames(i.uForm.legend({c:w}))),[w]),M=r.useRef(null);return r.useEffect((()=>{s.current&&(M.current=s.current.closest("form"))}),[]),r.useEffect((()=>{if(!a)return void S(void 0);if(!d)return void k(void 0);const e=null==M?void 0:M.current,t=()=>{let t=0;e?t=h(e):"undefined"!=typeof window&&(t=window.innerWidth);const s=v(a,t);if(S(p(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:x},c),a?r.createElement("div",{className:U,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=S,e.FormFieldSet=E,e.FormSeparator=C}));
+!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 v=u.valueGetter(t);if("string"==typeof s)return r.createElement(s,{onChange:h,onBlur:m,onFocus:f,value:v,children:o,...a});const p={children:o,...a,onChange:c,onBlur:m,onFocus:f,value:v,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 p.children,r.createElement(s,p)};l.displayName="KendoReactField";const a=Object.freeze({name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"12.0.2-develop.5",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.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.length;return this.validatorsByField={...this.validatorsByField,[e]:[...s,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],s=!!t[i];t[i]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&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;return 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}))}})),this.formErrors&&i.cloneObject(this.formErrors,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]),v=r.useCallback((e=>u.onRemove(t,e)),[t,d]),p=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:v,onReplace:p,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},v=(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},p=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),v=r.useRef(null);r.useEffect((()=>{a.current&&(v.current=a.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=null==v?void 0:v.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 p=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:p,style:s},l)};w.displayName="KendoReactFieldWrapper";const R={rows:"0px",cols:"32px"},S=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(),S=w&&w.uForm,[C,_]=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:S,size:m,orientation:k}),u)),[u,S,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=v(f,e);_(p(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:S}),C),style:E},e.children):e.children)}));S.displayName="KendoReactFormElement";const C=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),v=r.useRef(null);r.useEffect((()=>{s.current&&(v.current=s.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=v.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 p=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:p})}));C.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,S]=r.useState(void 0),[C,E]=r.useState(void 0),[N,k]=r.useState(void 0),A=r.useMemo((()=>i.classNames(i.uForm.fieldset({c:w}),C,n)),[n,w,C]),U=r.useMemo((()=>i.classNames(i.uForm.formLayout({c:w}),R)),[w,R]),x=r.useMemo((()=>i.classNames(i.uForm.legend({c:w}))),[w]),M=r.useRef(null);return r.useEffect((()=>{s.current&&(M.current=s.current.closest("form"))}),[]),r.useEffect((()=>{if(!a)return void S(void 0);if(!d)return void k(void 0);const e=null==M?void 0:M.current,t=()=>{let t=0;e?t=h(e):"undefined"!=typeof window&&(t=window.innerWidth);const s=v(a,t);if(S(p(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:x},c),a?r.createElement("div",{className:U,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=S,e.FormFieldSet=E,e.FormSeparator=C}));

package/index.d.mts

@@ -31,11 +31,11 @@ export declare const Field: {
 export declare const FieldArray: React_2.FunctionComponent<FieldArrayProps>;
 
 /**
- * Represents the props of the FieldArray component that is used inside the KendoReact Form component.
+ * Contains the props for the FieldArray component that you use inside forms.
  */
 export declare interface FieldArrayProps {
     /**
-     * The name of the field in the Form state.
+     * Sets the field name in the form state.
      */
     name: string;
     /**
@@ -44,12 +44,12 @@ export declare interface FieldArrayProps {
      */
     component: React.ComponentType<any>;
     /**
-     * The validation functions for the FieldArray level.
-     * Currently, `validator` supports only synchronous functions.
+     * Validates the field array and returns error messages.
+     * Only synchronous functions are supported.
      */
     validator?: FieldValidatorType | FieldValidatorType[];
     /**
-     * The React elements that are passed as children to the rendered component.
+     * Provides child elements that are passed to the rendered component.
      */
     children?: any;
     /**
@@ -59,7 +59,7 @@ export declare interface FieldArrayProps {
 }
 
 /**
- * Represents the props that are passed to the component which is rendered by FieldArray.
+ * Contains props that are passed to components rendered inside FieldArray components.
  */
 export declare interface FieldArrayRenderProps {
     /**
@@ -68,75 +68,75 @@ export declare interface FieldArrayRenderProps {
      */
     value: any;
     /**
-     * Represents the error message that is returned by the validator.
-     * The FieldArray is considered valid if the `validationMessage` field is empty.
+     * Contains the error message from validation.
+     * The field is valid when this is empty.
      */
     validationMessage: string | null;
     /**
-     * Indicates if the field is touched.
-     * The touched state is set to `true` when the `onBlur` callback is called.
+     * Shows whether the user has interacted with the field.
+     * Becomes true when the field loses focus.
      */
     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.
+     * Shows whether the field value has changed from its initial value.
+     * Becomes true when the field value changes for the first time.
      */
     modified: boolean;
     /**
-     * Indicates if the field is visited.
-     * The visited state is set to `true` when the `onFocus` callback is called.
+     * Shows whether the user has focused on the field.
+     * Becomes true when the field receives focus.
      */
     visited: boolean;
     /**
-     * A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
+     * Shows whether the field passes validation and has been touched.
      */
     valid: boolean;
     /**
-     * Represents the children that are passed to the FieldArray.
+     * Contains child elements that are passed to the FieldArray.
      */
     children: any;
     /**
-     * The name of the field in the Form state.
+     * Contains the field name in the form state.
      */
     name: string;
     /**
-     * A callback to add a value to the beginning of the array.
+     * Adds 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.
+     * Adds a value to the end of the array.
      */
     onPush: (options: {
         value: any;
     }) => void;
     /**
-     * A callback to insert value at given index of the array.
+     * Inserts a value at a specific position in 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.
+     * Removes and returns the last value from the array.
      */
     onPop: () => any;
     /**
-     * A callback to remove a value from given index of the array.
+     * Removes a value at a specific position in the array.
      */
     onRemove: (options: {
         index: number;
     }) => any;
     /**
-     * A callback to replace value at given index of the array.
+     * Replaces a value at a specific position in 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.
+     * Moves a value from one position to another in the array.
      */
     onMove: (options: {
         prevIndex: number;
@@ -149,12 +149,12 @@ export declare interface FieldArrayRenderProps {
 }
 
 /**
- * Represents the props of the Field component that is used inside the KendoReact Form component.
+ * Contains the props for the Field component that you use inside forms.
  */
 export declare interface FieldProps {
     /**
-     * The name of the field in the Form state.
-     * Supports nested fields in the `user.age` and `users[index].name` formats.
+     * Sets the field name in the form state.
+     * You can use nested fields like `user.age` and `users[0].name`.
      *
      * @example
      * ```jsx
@@ -175,9 +175,10 @@ export declare interface FieldProps {
      */
     component: string | React.ComponentType<any>;
     /**
-     * The validation functions for the Field level.
-     * Currently, `validator` supports only synchronous functions.
-     * Using the array overload with an inline array will cause an infinite loop. Use a `useMemo` hook to memoize the array instead.
+     * 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
@@ -187,7 +188,7 @@ export declare interface FieldProps {
      */
     validator?: FieldValidatorType | FieldValidatorType[];
     /**
-     * The React elements that are passed as children to the rendered component.
+     * Provides child elements that are passed to the rendered component.
      *
      * @example
      * ```jsx
@@ -198,14 +199,13 @@ export declare interface FieldProps {
      */
     children?: any;
     /**
-     * Defines the colspan for the Form field. Can be a number or an array of responsive breakpoints.
+     * Sets how many columns the field spans in the form layout.
      */
     colSpan?: number | ResponsiveFormBreakPoint[];
     /**
-     * Called when the underlying editor triggers its `onChange` event and the Form updates its internal state.
-     * Useful for updating related fields.
-     * > The `Form` listens to this editor event and automatically keeps its internal state up to date.
-     * That is why this event should be used only for executing custom logic.
+     * Handles changes to the field value.
+     *
+     * Use this to update related fields. The Form automatically updates its state when this fires.
      *
      * @example
      * ```jsx
@@ -217,21 +217,19 @@ export declare interface FieldProps {
 }
 
 /**
- * Represents the props that are passed to the component which is rendered by Field.
+ * Contains props that are passed to components rendered inside Field components.
  */
 export declare interface FieldRenderProps extends FieldRenderPropsBase {
 }
 
 /**
- * The validator function for the Field component. The function arguments are:
+ * Validates a single field and returns an error message or success.
  *
- * * value - The current value of the field.
- * * valueGetter - Function which can be used to get other fields value.
- * Usable when validator depends on more than one field. Supports field paths.
- * * fieldProps - Props of the Field component. Currently contains only the `name` prop.
- * Usable when one validator is used across multiple fields.
+ * * 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 `string` to signify error or `undefined` to signify validation success.
+ * Returns a string for validation errors or undefined for successful validation.
  */
 export declare type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
     name: string;
@@ -671,14 +669,13 @@ export declare interface FormHandle extends Pick<FormClassComponent, keyof FormC
 }
 
 /**
- * Represents the props of the KendoReact Form component.
+ * Contains the props for the KendoReact Form component.
  */
 export declare interface FormProps {
     /**
-     * The initial field values of the Form.
+     * Sets the starting values for form fields.
      *
-     * When you initialize the Form fields, set initial values to them. Otherwise, some
-     * components might throw errors related to switching from uncontrolled to controlled mode.
+     * Set initial values to prevent errors when switching from uncontrolled to controlled mode.
      *
      * @example
      * ```jsx
@@ -690,12 +687,11 @@ export declare interface FormProps {
         [name: string]: any;
     };
     /**
-     * The validation function for the Form level.
-     * Should return a key-value pair where the key is the field path and the value is the error message.
-     * Nested fields are supported, e.g.: 'users[0].name'.
-     * You can use the same field path to access the value from the
-     * values object using the `getter` function from the `kendo-react-common` package.
-     * Currently, `validator` supports only synchronous functions.
+     * 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
@@ -705,8 +701,9 @@ export declare interface FormProps {
      */
     validator?: FormValidatorType;
     /**
-     * The submission handler for the Form.
-     * Called when at least one field has been modified, the user pressed the **Submit** button, and the form validation was successful.
+     * 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
@@ -718,8 +715,9 @@ export declare interface FormProps {
         [name: string]: any;
     }, event?: React.SyntheticEvent<any>) => void;
     /**
-     * Called every time the user presses the **Submit** button.
-     * Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or in an unmodified state.
+     * 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
@@ -729,7 +727,7 @@ export declare interface FormProps {
      */
     onSubmitClick?: (event: FormSubmitClickEvent) => void;
     /**
-     * The Form content that will be rendered.
+     * Renders the form content using the provided render function.
      *
      * @example
      * ```jsx
@@ -739,7 +737,7 @@ export declare interface FormProps {
      */
     render: (props: FormRenderProps) => any;
     /**
-     * Set this to `true` to allow the form to submit without modified fields.
+     * Allows the form to submit even when no fields have been modified.
      *
      * @example
      * ```jsx
@@ -756,12 +754,12 @@ export declare interface FormProps {
 }
 
 /**
- * Represents the props that are passed to the `render` option component of the Form.
+ * Contains props that are passed to the form's render function.
  */
 export declare interface FormRenderProps {
     /**
-     * A callback for submitting the Form.
-     * Can be passed to the `onClick` property of the **Submit** button.
+     * Submits the form when called.
+     * Use this with the onClick property of Submit buttons.
      *
      * @example
      * ```jsx
@@ -785,7 +783,7 @@ export declare interface FormRenderProps {
         value: any;
     }) => void;
     /**
-     * A callback for resetting the Form.
+     * Resets the form to its initial state.
      *
      * @example
      * ```jsx
@@ -794,7 +792,7 @@ export declare interface FormRenderProps {
      */
     onFormReset: () => void;
     /**
-     * The key-value pair containing the current errors by field path, combined from both field and form level validators.
+     * Contains current validation errors organized by field path.
      *
      * @example
      * ```jsx
@@ -803,8 +801,8 @@ export declare interface FormRenderProps {
      */
     errors: KeyValue<string>;
     /**
-     * Indicates if the Form is valid.
-     * If any field is invalid, `valid` is set to `false`.
+     * Shows whether the form passes all validation rules.
+     * Becomes false if any field fails validation.
      *
      * @example
      * ```jsx
@@ -813,10 +811,8 @@ export declare interface FormRenderProps {
      */
     valid: boolean;
     /**
-     * Indicates if the Form is touched.
-     * If any field is touched, `touched` is set to `true`.
-     * The touched state of a field is set to `true` when the `onBlur`
-     * callback of the Field component is called or when the user tries to submit the form.
+     * Shows whether the user has interacted with any field.
+     * Becomes true when any field loses focus or the user tries to submit.
      *
      * @example
      * ```jsx
@@ -825,10 +821,8 @@ export declare interface FormRenderProps {
      */
     touched: boolean;
     /**
-     * Indicates if the Form is visited.
-     * If any field is visited, `visited` is set to `true`.
-     * The visited state of a field is set to `true` when the `onFocus`
-     * callback of the Field component is called or when the user tries to submit the form.
+     * Shows whether the user has focused on any field.
+     * Becomes true when any field receives focus or the user tries to submit.
      *
      * @example
      * ```jsx
@@ -837,10 +831,8 @@ export declare interface FormRenderProps {
      */
     visited: boolean;
     /**
-     * Indicates if the Form is modified.
-     * If any field is modified, `modified` is set to `true`.
-     * The modified state of a field is set to `true` when the `onChange`
-     * callback of the Field component is called for the first time.
+     * Shows whether any field value has changed from its initial value.
+     * Becomes true when any field value changes for the first time.
      *
      * @example
      * ```jsx
@@ -849,8 +841,8 @@ export declare interface FormRenderProps {
      */
     modified: boolean;
     /**
-     * Indicates if the Form is successfully submitted.
-     * Useful for detecting if the user is leaving the form before saving changes.
+     * Shows whether the form has been successfully submitted.
+     * Use this to detect if the user is leaving before saving changes.
      *
      * @example
      * ```jsx
@@ -859,11 +851,10 @@ export declare interface FormRenderProps {
      */
     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`.
+     * 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.
      *
-     * Useful for toggling the disabled state of the **Submit** button.
+     * Use this to control the disabled state of Submit buttons.
      *
      * @example
      * ```jsx
@@ -927,36 +918,36 @@ export declare interface FormSeparatorProps {
 }
 
 /**
- * The FormSubmitClick event.
+ * Contains data for the form submit click event.
  */
 export declare interface FormSubmitClickEvent {
     /**
-     * Contains the current values of the form.
+     * Provides the current values from all form fields.
      */
     values: {
         [name: string]: any;
     };
     /**
-     * The native event.
+     * Contains the original browser event that triggered the submit.
      */
     event?: React.SyntheticEvent<any>;
     /**
-     * Represents the validity state of the form.
+     * Shows whether the form passes all validation rules.
      */
     isValid: boolean;
     /**
-     * Represents the modified state of the form.
+     * Shows whether any form fields have been changed from their initial values.
      */
     isModified: boolean;
 }
 
 /**
- * The validator function for the Form component.
+ * Validates an entire form and returns error messages.
  *
- * * values - The current values of the form.
- * * valueGetter - Function which can be used to get field value. Supports field paths.
+ * * values - Contains the current values from all form fields
+ * * valueGetter - Gets field values using field paths like 'user.name'
  *
- * Returns key-value pair with errors if such are present. The key is the field path, where the value is the error message.
+ * 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;
 
@@ -979,29 +970,27 @@ export declare interface Gutters {
 }
 
 /**
- *
+ * Represents a key-value pair collection where keys are strings.
  */
 export declare interface KeyValue<ValueType> {
     [name: string]: ValueType;
 }
 
 /**
- * Allows to define responsive breakpoints for the Form component.
- * Each breakpoint can specify a minimum and/or maximum width, and a value that represents either the number of columns
- * or the colspan/gutters for that breakpoint.
+ * 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 {
     /**
-     * The minimum width for this breakpoint in pixels.
+     * Sets the minimum screen width in pixels for this breakpoint.
      */
     minWidth?: number;
     /**
-     * The maximum width for this breakpoint in pixels.
+     * Sets the maximum screen width in pixels for this breakpoint.
      */
     maxWidth?: number;
     /**
-     * The value associated with this breakpoint.
-     * It can represent the number of columns or the colspan/gutters for the form control.
+     * Sets the number of columns or spacing for form controls at this screen size.
      */
     value: number | string;
 }

package/index.d.ts

@@ -31,11 +31,11 @@ export declare const Field: {
 export declare const FieldArray: React_2.FunctionComponent<FieldArrayProps>;
 
 /**
- * Represents the props of the FieldArray component that is used inside the KendoReact Form component.
+ * Contains the props for the FieldArray component that you use inside forms.
  */
 export declare interface FieldArrayProps {
     /**
-     * The name of the field in the Form state.
+     * Sets the field name in the form state.
      */
     name: string;
     /**
@@ -44,12 +44,12 @@ export declare interface FieldArrayProps {
      */
     component: React.ComponentType<any>;
     /**
-     * The validation functions for the FieldArray level.
-     * Currently, `validator` supports only synchronous functions.
+     * Validates the field array and returns error messages.
+     * Only synchronous functions are supported.
      */
     validator?: FieldValidatorType | FieldValidatorType[];
     /**
-     * The React elements that are passed as children to the rendered component.
+     * Provides child elements that are passed to the rendered component.
      */
     children?: any;
     /**
@@ -59,7 +59,7 @@ export declare interface FieldArrayProps {
 }
 
 /**
- * Represents the props that are passed to the component which is rendered by FieldArray.
+ * Contains props that are passed to components rendered inside FieldArray components.
  */
 export declare interface FieldArrayRenderProps {
     /**
@@ -68,75 +68,75 @@ export declare interface FieldArrayRenderProps {
      */
     value: any;
     /**
-     * Represents the error message that is returned by the validator.
-     * The FieldArray is considered valid if the `validationMessage` field is empty.
+     * Contains the error message from validation.
+     * The field is valid when this is empty.
      */
     validationMessage: string | null;
     /**
-     * Indicates if the field is touched.
-     * The touched state is set to `true` when the `onBlur` callback is called.
+     * Shows whether the user has interacted with the field.
+     * Becomes true when the field loses focus.
      */
     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.
+     * Shows whether the field value has changed from its initial value.
+     * Becomes true when the field value changes for the first time.
      */
     modified: boolean;
     /**
-     * Indicates if the field is visited.
-     * The visited state is set to `true` when the `onFocus` callback is called.
+     * Shows whether the user has focused on the field.
+     * Becomes true when the field receives focus.
      */
     visited: boolean;
     /**
-     * A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
+     * Shows whether the field passes validation and has been touched.
      */
     valid: boolean;
     /**
-     * Represents the children that are passed to the FieldArray.
+     * Contains child elements that are passed to the FieldArray.
      */
     children: any;
     /**
-     * The name of the field in the Form state.
+     * Contains the field name in the form state.
      */
     name: string;
     /**
-     * A callback to add a value to the beginning of the array.
+     * Adds 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.
+     * Adds a value to the end of the array.
      */
     onPush: (options: {
         value: any;
     }) => void;
     /**
-     * A callback to insert value at given index of the array.
+     * Inserts a value at a specific position in 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.
+     * Removes and returns the last value from the array.
      */
     onPop: () => any;
     /**
-     * A callback to remove a value from given index of the array.
+     * Removes a value at a specific position in the array.
      */
     onRemove: (options: {
         index: number;
     }) => any;
     /**
-     * A callback to replace value at given index of the array.
+     * Replaces a value at a specific position in 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.
+     * Moves a value from one position to another in the array.
      */
     onMove: (options: {
         prevIndex: number;
@@ -149,12 +149,12 @@ export declare interface FieldArrayRenderProps {
 }
 
 /**
- * Represents the props of the Field component that is used inside the KendoReact Form component.
+ * Contains the props for the Field component that you use inside forms.
  */
 export declare interface FieldProps {
     /**
-     * The name of the field in the Form state.
-     * Supports nested fields in the `user.age` and `users[index].name` formats.
+     * Sets the field name in the form state.
+     * You can use nested fields like `user.age` and `users[0].name`.
      *
      * @example
      * ```jsx
@@ -175,9 +175,10 @@ export declare interface FieldProps {
      */
     component: string | React.ComponentType<any>;
     /**
-     * The validation functions for the Field level.
-     * Currently, `validator` supports only synchronous functions.
-     * Using the array overload with an inline array will cause an infinite loop. Use a `useMemo` hook to memoize the array instead.
+     * 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
@@ -187,7 +188,7 @@ export declare interface FieldProps {
      */
     validator?: FieldValidatorType | FieldValidatorType[];
     /**
-     * The React elements that are passed as children to the rendered component.
+     * Provides child elements that are passed to the rendered component.
      *
      * @example
      * ```jsx
@@ -198,14 +199,13 @@ export declare interface FieldProps {
      */
     children?: any;
     /**
-     * Defines the colspan for the Form field. Can be a number or an array of responsive breakpoints.
+     * Sets how many columns the field spans in the form layout.
      */
     colSpan?: number | ResponsiveFormBreakPoint[];
     /**
-     * Called when the underlying editor triggers its `onChange` event and the Form updates its internal state.
-     * Useful for updating related fields.
-     * > The `Form` listens to this editor event and automatically keeps its internal state up to date.
-     * That is why this event should be used only for executing custom logic.
+     * Handles changes to the field value.
+     *
+     * Use this to update related fields. The Form automatically updates its state when this fires.
      *
      * @example
      * ```jsx
@@ -217,21 +217,19 @@ export declare interface FieldProps {
 }
 
 /**
- * Represents the props that are passed to the component which is rendered by Field.
+ * Contains props that are passed to components rendered inside Field components.
  */
 export declare interface FieldRenderProps extends FieldRenderPropsBase {
 }
 
 /**
- * The validator function for the Field component. The function arguments are:
+ * Validates a single field and returns an error message or success.
  *
- * * value - The current value of the field.
- * * valueGetter - Function which can be used to get other fields value.
- * Usable when validator depends on more than one field. Supports field paths.
- * * fieldProps - Props of the Field component. Currently contains only the `name` prop.
- * Usable when one validator is used across multiple fields.
+ * * 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 `string` to signify error or `undefined` to signify validation success.
+ * Returns a string for validation errors or undefined for successful validation.
  */
 export declare type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
     name: string;
@@ -671,14 +669,13 @@ export declare interface FormHandle extends Pick<FormClassComponent, keyof FormC
 }
 
 /**
- * Represents the props of the KendoReact Form component.
+ * Contains the props for the KendoReact Form component.
  */
 export declare interface FormProps {
     /**
-     * The initial field values of the Form.
+     * Sets the starting values for form fields.
      *
-     * When you initialize the Form fields, set initial values to them. Otherwise, some
-     * components might throw errors related to switching from uncontrolled to controlled mode.
+     * Set initial values to prevent errors when switching from uncontrolled to controlled mode.
      *
      * @example
      * ```jsx
@@ -690,12 +687,11 @@ export declare interface FormProps {
         [name: string]: any;
     };
     /**
-     * The validation function for the Form level.
-     * Should return a key-value pair where the key is the field path and the value is the error message.
-     * Nested fields are supported, e.g.: 'users[0].name'.
-     * You can use the same field path to access the value from the
-     * values object using the `getter` function from the `kendo-react-common` package.
-     * Currently, `validator` supports only synchronous functions.
+     * 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
@@ -705,8 +701,9 @@ export declare interface FormProps {
      */
     validator?: FormValidatorType;
     /**
-     * The submission handler for the Form.
-     * Called when at least one field has been modified, the user pressed the **Submit** button, and the form validation was successful.
+     * 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
@@ -718,8 +715,9 @@ export declare interface FormProps {
         [name: string]: any;
     }, event?: React.SyntheticEvent<any>) => void;
     /**
-     * Called every time the user presses the **Submit** button.
-     * Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or in an unmodified state.
+     * 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
@@ -729,7 +727,7 @@ export declare interface FormProps {
      */
     onSubmitClick?: (event: FormSubmitClickEvent) => void;
     /**
-     * The Form content that will be rendered.
+     * Renders the form content using the provided render function.
      *
      * @example
      * ```jsx
@@ -739,7 +737,7 @@ export declare interface FormProps {
      */
     render: (props: FormRenderProps) => any;
     /**
-     * Set this to `true` to allow the form to submit without modified fields.
+     * Allows the form to submit even when no fields have been modified.
      *
      * @example
      * ```jsx
@@ -756,12 +754,12 @@ export declare interface FormProps {
 }
 
 /**
- * Represents the props that are passed to the `render` option component of the Form.
+ * Contains props that are passed to the form's render function.
  */
 export declare interface FormRenderProps {
     /**
-     * A callback for submitting the Form.
-     * Can be passed to the `onClick` property of the **Submit** button.
+     * Submits the form when called.
+     * Use this with the onClick property of Submit buttons.
      *
      * @example
      * ```jsx
@@ -785,7 +783,7 @@ export declare interface FormRenderProps {
         value: any;
     }) => void;
     /**
-     * A callback for resetting the Form.
+     * Resets the form to its initial state.
      *
      * @example
      * ```jsx
@@ -794,7 +792,7 @@ export declare interface FormRenderProps {
      */
     onFormReset: () => void;
     /**
-     * The key-value pair containing the current errors by field path, combined from both field and form level validators.
+     * Contains current validation errors organized by field path.
      *
      * @example
      * ```jsx
@@ -803,8 +801,8 @@ export declare interface FormRenderProps {
      */
     errors: KeyValue<string>;
     /**
-     * Indicates if the Form is valid.
-     * If any field is invalid, `valid` is set to `false`.
+     * Shows whether the form passes all validation rules.
+     * Becomes false if any field fails validation.
      *
      * @example
      * ```jsx
@@ -813,10 +811,8 @@ export declare interface FormRenderProps {
      */
     valid: boolean;
     /**
-     * Indicates if the Form is touched.
-     * If any field is touched, `touched` is set to `true`.
-     * The touched state of a field is set to `true` when the `onBlur`
-     * callback of the Field component is called or when the user tries to submit the form.
+     * Shows whether the user has interacted with any field.
+     * Becomes true when any field loses focus or the user tries to submit.
      *
      * @example
      * ```jsx
@@ -825,10 +821,8 @@ export declare interface FormRenderProps {
      */
     touched: boolean;
     /**
-     * Indicates if the Form is visited.
-     * If any field is visited, `visited` is set to `true`.
-     * The visited state of a field is set to `true` when the `onFocus`
-     * callback of the Field component is called or when the user tries to submit the form.
+     * Shows whether the user has focused on any field.
+     * Becomes true when any field receives focus or the user tries to submit.
      *
      * @example
      * ```jsx
@@ -837,10 +831,8 @@ export declare interface FormRenderProps {
      */
     visited: boolean;
     /**
-     * Indicates if the Form is modified.
-     * If any field is modified, `modified` is set to `true`.
-     * The modified state of a field is set to `true` when the `onChange`
-     * callback of the Field component is called for the first time.
+     * Shows whether any field value has changed from its initial value.
+     * Becomes true when any field value changes for the first time.
      *
      * @example
      * ```jsx
@@ -849,8 +841,8 @@ export declare interface FormRenderProps {
      */
     modified: boolean;
     /**
-     * Indicates if the Form is successfully submitted.
-     * Useful for detecting if the user is leaving the form before saving changes.
+     * Shows whether the form has been successfully submitted.
+     * Use this to detect if the user is leaving before saving changes.
      *
      * @example
      * ```jsx
@@ -859,11 +851,10 @@ export declare interface FormRenderProps {
      */
     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`.
+     * 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.
      *
-     * Useful for toggling the disabled state of the **Submit** button.
+     * Use this to control the disabled state of Submit buttons.
      *
      * @example
      * ```jsx
@@ -927,36 +918,36 @@ export declare interface FormSeparatorProps {
 }
 
 /**
- * The FormSubmitClick event.
+ * Contains data for the form submit click event.
  */
 export declare interface FormSubmitClickEvent {
     /**
-     * Contains the current values of the form.
+     * Provides the current values from all form fields.
      */
     values: {
         [name: string]: any;
     };
     /**
-     * The native event.
+     * Contains the original browser event that triggered the submit.
      */
     event?: React.SyntheticEvent<any>;
     /**
-     * Represents the validity state of the form.
+     * Shows whether the form passes all validation rules.
      */
     isValid: boolean;
     /**
-     * Represents the modified state of the form.
+     * Shows whether any form fields have been changed from their initial values.
      */
     isModified: boolean;
 }
 
 /**
- * The validator function for the Form component.
+ * Validates an entire form and returns error messages.
  *
- * * values - The current values of the form.
- * * valueGetter - Function which can be used to get field value. Supports field paths.
+ * * values - Contains the current values from all form fields
+ * * valueGetter - Gets field values using field paths like 'user.name'
  *
- * Returns key-value pair with errors if such are present. The key is the field path, where the value is the error message.
+ * 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;
 
@@ -979,29 +970,27 @@ export declare interface Gutters {
 }
 
 /**
- *
+ * Represents a key-value pair collection where keys are strings.
  */
 export declare interface KeyValue<ValueType> {
     [name: string]: ValueType;
 }
 
 /**
- * Allows to define responsive breakpoints for the Form component.
- * Each breakpoint can specify a minimum and/or maximum width, and a value that represents either the number of columns
- * or the colspan/gutters for that breakpoint.
+ * 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 {
     /**
-     * The minimum width for this breakpoint in pixels.
+     * Sets the minimum screen width in pixels for this breakpoint.
      */
     minWidth?: number;
     /**
-     * The maximum width for this breakpoint in pixels.
+     * Sets the maximum screen width in pixels for this breakpoint.
      */
     maxWidth?: number;
     /**
-     * The value associated with this breakpoint.
-     * It can represent the number of columns or the colspan/gutters for the form control.
+     * Sets the number of columns or spacing for form controls at this screen size.
      */
     value: number | string;
 }

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: 1757419541,version:"12.0.2-develop.3",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: 1757584520,version:"12.0.2-develop.5",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = Object.freeze({
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1757419541,
-  version: "12.0.2-develop.3",
+  publishDate: 1757584520,
+  version: "12.0.2-develop.5",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-form",
-  "version": "12.0.2-develop.3",
+  "version": "12.0.2-develop.5",
   "description": "React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-react-common": "12.0.2-develop.3",
+    "@progress/kendo-react-common": "12.0.2-develop.5",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },
@@ -51,7 +51,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1757419541,
+      "publishDate": 1757584520,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },