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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cdn/js/kendo-react-form.js +1 -1
  2. package/index.d.mts +91 -102
  3. package/index.d.ts +91 -102
  4. package/package-metadata.js +1 -1
  5. package/package-metadata.mjs +2 -2
  6. package/package.json +3 -3
package/dist/cdn/js/kendo-react-form.js CHANGED
@@ -12,4 +12,4 @@
12
12
  * Licensed under commercial license. See LICENSE.md in the package root for more information
13
13
  *-------------------------------------------------------------------------------------------
14
14
  */
15
- !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}));
15
+ !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.4",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 CHANGED
@@ -31,11 +31,11 @@ export declare const Field: {
31
31
  export declare const FieldArray: React_2.FunctionComponent<FieldArrayProps>;
32
32
 
33
33
  /**
34
- * Represents the props of the FieldArray component that is used inside the KendoReact Form component.
34
+ * Contains the props for the FieldArray component that you use inside forms.
35
35
  */
36
36
  export declare interface FieldArrayProps {
37
37
  /**
38
- * The name of the field in the Form state.
38
+ * Sets the field name in the form state.
39
39
  */
40
40
  name: string;
41
41
  /**
@@ -44,12 +44,12 @@ export declare interface FieldArrayProps {
44
44
  */
45
45
  component: React.ComponentType<any>;
46
46
  /**
47
- * The validation functions for the FieldArray level.
48
- * Currently, `validator` supports only synchronous functions.
47
+ * Validates the field array and returns error messages.
48
+ * Only synchronous functions are supported.
49
49
  */
50
50
  validator?: FieldValidatorType | FieldValidatorType[];
51
51
  /**
52
- * The React elements that are passed as children to the rendered component.
52
+ * Provides child elements that are passed to the rendered component.
53
53
  */
54
54
  children?: any;
55
55
  /**
@@ -59,7 +59,7 @@ export declare interface FieldArrayProps {
59
59
  }
60
60
 
61
61
  /**
62
- * Represents the props that are passed to the component which is rendered by FieldArray.
62
+ * Contains props that are passed to components rendered inside FieldArray components.
63
63
  */
64
64
  export declare interface FieldArrayRenderProps {
65
65
  /**
@@ -68,75 +68,75 @@ export declare interface FieldArrayRenderProps {
68
68
  */
69
69
  value: any;
70
70
  /**
71
- * Represents the error message that is returned by the validator.
72
- * The FieldArray is considered valid if the `validationMessage` field is empty.
71
+ * Contains the error message from validation.
72
+ * The field is valid when this is empty.
73
73
  */
74
74
  validationMessage: string | null;
75
75
  /**
76
- * Indicates if the field is touched.
77
- * The touched state is set to `true` when the `onBlur` callback is called.
76
+ * Shows whether the user has interacted with the field.
77
+ * Becomes true when the field loses focus.
78
78
  */
79
79
  touched: boolean;
80
80
  /**
81
- * Indicates if the field is modified.
82
- * The modified state is set to `true` when the `onChange` callback for the current field is called for first time.
81
+ * Shows whether the field value has changed from its initial value.
82
+ * Becomes true when the field value changes for the first time.
83
83
  */
84
84
  modified: boolean;
85
85
  /**
86
- * Indicates if the field is visited.
87
- * The visited state is set to `true` when the `onFocus` callback is called.
86
+ * Shows whether the user has focused on the field.
87
+ * Becomes true when the field receives focus.
88
88
  */
89
89
  visited: boolean;
90
90
  /**
91
- * A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
91
+ * Shows whether the field passes validation and has been touched.
92
92
  */
93
93
  valid: boolean;
94
94
  /**
95
- * Represents the children that are passed to the FieldArray.
95
+ * Contains child elements that are passed to the FieldArray.
96
96
  */
97
97
  children: any;
98
98
  /**
99
- * The name of the field in the Form state.
99
+ * Contains the field name in the form state.
100
100
  */
101
101
  name: string;
102
102
  /**
103
- * A callback to add a value to the beginning of the array.
103
+ * Adds a value to the beginning of the array.
104
104
  */
105
105
  onUnshift: (options: {
106
106
  value: any;
107
107
  }) => number;
108
108
  /**
109
- * A callback to add a value to the end of the array.
109
+ * Adds a value to the end of the array.
110
110
  */
111
111
  onPush: (options: {
112
112
  value: any;
113
113
  }) => void;
114
114
  /**
115
- * A callback to insert value at given index of the array.
115
+ * Inserts a value at a specific position in the array.
116
116
  */
117
117
  onInsert: (options: {
118
118
  value: any;
119
119
  index: number;
120
120
  }) => void;
121
121
  /**
122
- * A callback to remove a value from the end of the array. The value is returned.
122
+ * Removes and returns the last value from the array.
123
123
  */
124
124
  onPop: () => any;
125
125
  /**
126
- * A callback to remove a value from given index of the array.
126
+ * Removes a value at a specific position in the array.
127
127
  */
128
128
  onRemove: (options: {
129
129
  index: number;
130
130
  }) => any;
131
131
  /**
132
- * A callback to replace value at given index of the array.
132
+ * Replaces a value at a specific position in the array.
133
133
  */
134
134
  onReplace: (options: {
135
135
  value: any;
136
136
  index: number;
137
137
  }) => void;
138
138
  /**
139
- * A callback to move a value from one index to another. Useful for drag and drop reordering.
139
+ * Moves a value from one position to another in the array.
140
140
  */
141
141
  onMove: (options: {
142
142
  prevIndex: number;
@@ -149,12 +149,12 @@ export declare interface FieldArrayRenderProps {
149
149
  }
150
150
 
151
151
  /**
152
- * Represents the props of the Field component that is used inside the KendoReact Form component.
152
+ * Contains the props for the Field component that you use inside forms.
153
153
  */
154
154
  export declare interface FieldProps {
155
155
  /**
156
- * The name of the field in the Form state.
157
- * Supports nested fields in the `user.age` and `users[index].name` formats.
156
+ * Sets the field name in the form state.
157
+ * You can use nested fields like `user.age` and `users[0].name`.
158
158
  *
159
159
  * @example
160
160
  * ```jsx
@@ -175,9 +175,10 @@ export declare interface FieldProps {
175
175
  */
176
176
  component: string | React.ComponentType<any>;
177
177
  /**
178
- * The validation functions for the Field level.
179
- * Currently, `validator` supports only synchronous functions.
180
- * Using the array overload with an inline array will cause an infinite loop. Use a `useMemo` hook to memoize the array instead.
178
+ * Validates the field value and returns error messages.
179
+ *
180
+ * Only synchronous functions are supported.
181
+ * Use `useMemo` to avoid infinite loops when using an array of validators.
181
182
  *
182
183
  * @example
183
184
  * ```jsx
@@ -187,7 +188,7 @@ export declare interface FieldProps {
187
188
  */
188
189
  validator?: FieldValidatorType | FieldValidatorType[];
189
190
  /**
190
- * The React elements that are passed as children to the rendered component.
191
+ * Provides child elements that are passed to the rendered component.
191
192
  *
192
193
  * @example
193
194
  * ```jsx
@@ -198,14 +199,13 @@ export declare interface FieldProps {
198
199
  */
199
200
  children?: any;
200
201
  /**
201
- * Defines the colspan for the Form field. Can be a number or an array of responsive breakpoints.
202
+ * Sets how many columns the field spans in the form layout.
202
203
  */
203
204
  colSpan?: number | ResponsiveFormBreakPoint[];
204
205
  /**
205
- * Called when the underlying editor triggers its `onChange` event and the Form updates its internal state.
206
- * Useful for updating related fields.
207
- * > The `Form` listens to this editor event and automatically keeps its internal state up to date.
208
- * That is why this event should be used only for executing custom logic.
206
+ * Handles changes to the field value.
207
+ *
208
+ * Use this to update related fields. The Form automatically updates its state when this fires.
209
209
  *
210
210
  * @example
211
211
  * ```jsx
@@ -217,21 +217,19 @@ export declare interface FieldProps {
217
217
  }
218
218
 
219
219
  /**
220
- * Represents the props that are passed to the component which is rendered by Field.
220
+ * Contains props that are passed to components rendered inside Field components.
221
221
  */
222
222
  export declare interface FieldRenderProps extends FieldRenderPropsBase {
223
223
  }
224
224
 
225
225
  /**
226
- * The validator function for the Field component. The function arguments are:
226
+ * Validates a single field and returns an error message or success.
227
227
  *
228
- * * value - The current value of the field.
229
- * * valueGetter - Function which can be used to get other fields value.
230
- * Usable when validator depends on more than one field. Supports field paths.
231
- * * fieldProps - Props of the Field component. Currently contains only the `name` prop.
232
- * Usable when one validator is used across multiple fields.
228
+ * * value - Contains the current field value
229
+ * * valueGetter - Gets values from other fields using field paths like 'user.name'
230
+ * * fieldProps - Contains the field's props, including the field name
233
231
  *
234
- * Returns `string` to signify error or `undefined` to signify validation success.
232
+ * Returns a string for validation errors or undefined for successful validation.
235
233
  */
236
234
  export declare type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
237
235
  name: string;
@@ -671,14 +669,13 @@ export declare interface FormHandle extends Pick<FormClassComponent, keyof FormC
671
669
  }
672
670
 
673
671
  /**
674
- * Represents the props of the KendoReact Form component.
672
+ * Contains the props for the KendoReact Form component.
675
673
  */
676
674
  export declare interface FormProps {
677
675
  /**
678
- * The initial field values of the Form.
676
+ * Sets the starting values for form fields.
679
677
  *
680
- * When you initialize the Form fields, set initial values to them. Otherwise, some
681
- * components might throw errors related to switching from uncontrolled to controlled mode.
678
+ * Set initial values to prevent errors when switching from uncontrolled to controlled mode.
682
679
  *
683
680
  * @example
684
681
  * ```jsx
@@ -690,12 +687,11 @@ export declare interface FormProps {
690
687
  [name: string]: any;
691
688
  };
692
689
  /**
693
- * The validation function for the Form level.
694
- * Should return a key-value pair where the key is the field path and the value is the error message.
695
- * Nested fields are supported, e.g.: 'users[0].name'.
696
- * You can use the same field path to access the value from the
697
- * values object using the `getter` function from the `kendo-react-common` package.
698
- * Currently, `validator` supports only synchronous functions.
690
+ * Validates the entire form and returns error messages.
691
+ *
692
+ * Return a key-value pair where the key is the field path and the value is the error message.
693
+ * You can validate nested fields like 'users[0].name'.
694
+ * Only synchronous functions are supported.
699
695
  *
700
696
  * @example
701
697
  * ```jsx
@@ -705,8 +701,9 @@ export declare interface FormProps {
705
701
  */
706
702
  validator?: FormValidatorType;
707
703
  /**
708
- * The submission handler for the Form.
709
- * Called when at least one field has been modified, the user pressed the **Submit** button, and the form validation was successful.
704
+ * Handles form submission when validation passes and fields are modified.
705
+ *
706
+ * Fires when at least one field is modified, the user clicks Submit, and validation passes.
710
707
  *
711
708
  * @example
712
709
  * ```jsx
@@ -718,8 +715,9 @@ export declare interface FormProps {
718
715
  [name: string]: any;
719
716
  }, event?: React.SyntheticEvent<any>) => void;
720
717
  /**
721
- * Called every time the user presses the **Submit** button.
722
- * Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or in an unmodified state.
718
+ * Handles every submit button click, even when the form is invalid or unchanged.
719
+ *
720
+ * Use this for advanced scenarios where you need to handle all submit events.
723
721
  *
724
722
  * @example
725
723
  * ```jsx
@@ -729,7 +727,7 @@ export declare interface FormProps {
729
727
  */
730
728
  onSubmitClick?: (event: FormSubmitClickEvent) => void;
731
729
  /**
732
- * The Form content that will be rendered.
730
+ * Renders the form content using the provided render function.
733
731
  *
734
732
  * @example
735
733
  * ```jsx
@@ -739,7 +737,7 @@ export declare interface FormProps {
739
737
  */
740
738
  render: (props: FormRenderProps) => any;
741
739
  /**
742
- * Set this to `true` to allow the form to submit without modified fields.
740
+ * Allows the form to submit even when no fields have been modified.
743
741
  *
744
742
  * @example
745
743
  * ```jsx
@@ -756,12 +754,12 @@ export declare interface FormProps {
756
754
  }
757
755
 
758
756
  /**
759
- * Represents the props that are passed to the `render` option component of the Form.
757
+ * Contains props that are passed to the form's render function.
760
758
  */
761
759
  export declare interface FormRenderProps {
762
760
  /**
763
- * A callback for submitting the Form.
764
- * Can be passed to the `onClick` property of the **Submit** button.
761
+ * Submits the form when called.
762
+ * Use this with the onClick property of Submit buttons.
765
763
  *
766
764
  * @example
767
765
  * ```jsx
@@ -785,7 +783,7 @@ export declare interface FormRenderProps {
785
783
  value: any;
786
784
  }) => void;
787
785
  /**
788
- * A callback for resetting the Form.
786
+ * Resets the form to its initial state.
789
787
  *
790
788
  * @example
791
789
  * ```jsx
@@ -794,7 +792,7 @@ export declare interface FormRenderProps {
794
792
  */
795
793
  onFormReset: () => void;
796
794
  /**
797
- * The key-value pair containing the current errors by field path, combined from both field and form level validators.
795
+ * Contains current validation errors organized by field path.
798
796
  *
799
797
  * @example
800
798
  * ```jsx
@@ -803,8 +801,8 @@ export declare interface FormRenderProps {
803
801
  */
804
802
  errors: KeyValue<string>;
805
803
  /**
806
- * Indicates if the Form is valid.
807
- * If any field is invalid, `valid` is set to `false`.
804
+ * Shows whether the form passes all validation rules.
805
+ * Becomes false if any field fails validation.
808
806
  *
809
807
  * @example
810
808
  * ```jsx
@@ -813,10 +811,8 @@ export declare interface FormRenderProps {
813
811
  */
814
812
  valid: boolean;
815
813
  /**
816
- * Indicates if the Form is touched.
817
- * If any field is touched, `touched` is set to `true`.
818
- * The touched state of a field is set to `true` when the `onBlur`
819
- * callback of the Field component is called or when the user tries to submit the form.
814
+ * Shows whether the user has interacted with any field.
815
+ * Becomes true when any field loses focus or the user tries to submit.
820
816
  *
821
817
  * @example
822
818
  * ```jsx
@@ -825,10 +821,8 @@ export declare interface FormRenderProps {
825
821
  */
826
822
  touched: boolean;
827
823
  /**
828
- * Indicates if the Form is visited.
829
- * If any field is visited, `visited` is set to `true`.
830
- * The visited state of a field is set to `true` when the `onFocus`
831
- * callback of the Field component is called or when the user tries to submit the form.
824
+ * Shows whether the user has focused on any field.
825
+ * Becomes true when any field receives focus or the user tries to submit.
832
826
  *
833
827
  * @example
834
828
  * ```jsx
@@ -837,10 +831,8 @@ export declare interface FormRenderProps {
837
831
  */
838
832
  visited: boolean;
839
833
  /**
840
- * Indicates if the Form is modified.
841
- * If any field is modified, `modified` is set to `true`.
842
- * The modified state of a field is set to `true` when the `onChange`
843
- * callback of the Field component is called for the first time.
834
+ * Shows whether any field value has changed from its initial value.
835
+ * Becomes true when any field value changes for the first time.
844
836
  *
845
837
  * @example
846
838
  * ```jsx
@@ -849,8 +841,8 @@ export declare interface FormRenderProps {
849
841
  */
850
842
  modified: boolean;
851
843
  /**
852
- * Indicates if the Form is successfully submitted.
853
- * Useful for detecting if the user is leaving the form before saving changes.
844
+ * Shows whether the form has been successfully submitted.
845
+ * Use this to detect if the user is leaving before saving changes.
854
846
  *
855
847
  * @example
856
848
  * ```jsx
@@ -859,11 +851,10 @@ export declare interface FormRenderProps {
859
851
  */
860
852
  submitted: boolean;
861
853
  /**
862
- * Indicates if the Form is ready to be submitted.
863
- * * If `allowSubmit` is set to `true` and the Form is valid, the user will be able to submit the form.
864
- * * 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`.
854
+ * Shows whether the form can be submitted.
855
+ * When true and form is valid, you can submit. When true and form is invalid, you can show all validation errors.
865
856
  *
866
- * Useful for toggling the disabled state of the **Submit** button.
857
+ * Use this to control the disabled state of Submit buttons.
867
858
  *
868
859
  * @example
869
860
  * ```jsx
@@ -927,36 +918,36 @@ export declare interface FormSeparatorProps {
927
918
  }
928
919
 
929
920
  /**
930
- * The FormSubmitClick event.
921
+ * Contains data for the form submit click event.
931
922
  */
932
923
  export declare interface FormSubmitClickEvent {
933
924
  /**
934
- * Contains the current values of the form.
925
+ * Provides the current values from all form fields.
935
926
  */
936
927
  values: {
937
928
  [name: string]: any;
938
929
  };
939
930
  /**
940
- * The native event.
931
+ * Contains the original browser event that triggered the submit.
941
932
  */
942
933
  event?: React.SyntheticEvent<any>;
943
934
  /**
944
- * Represents the validity state of the form.
935
+ * Shows whether the form passes all validation rules.
945
936
  */
946
937
  isValid: boolean;
947
938
  /**
948
- * Represents the modified state of the form.
939
+ * Shows whether any form fields have been changed from their initial values.
949
940
  */
950
941
  isModified: boolean;
951
942
  }
952
943
 
953
944
  /**
954
- * The validator function for the Form component.
945
+ * Validates an entire form and returns error messages.
955
946
  *
956
- * * values - The current values of the form.
957
- * * valueGetter - Function which can be used to get field value. Supports field paths.
947
+ * * values - Contains the current values from all form fields
948
+ * * valueGetter - Gets field values using field paths like 'user.name'
958
949
  *
959
- * Returns key-value pair with errors if such are present. The key is the field path, where the value is the error message.
950
+ * Returns a key-value pair where the key is the field path and the value is the error message.
960
951
  */
961
952
  export declare type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;
962
953
 
@@ -979,29 +970,27 @@ export declare interface Gutters {
979
970
  }
980
971
 
981
972
  /**
982
- *
973
+ * Represents a key-value pair collection where keys are strings.
983
974
  */
984
975
  export declare interface KeyValue<ValueType> {
985
976
  [name: string]: ValueType;
986
977
  }
987
978
 
988
979
  /**
989
- * Allows to define responsive breakpoints for the Form component.
990
- * Each breakpoint can specify a minimum and/or maximum width, and a value that represents either the number of columns
991
- * or the colspan/gutters for that breakpoint.
980
+ * Defines responsive breakpoints for form layouts.
981
+ * Each breakpoint sets minimum and maximum widths and values for columns or spacing at different screen sizes.
992
982
  */
993
983
  export declare interface ResponsiveFormBreakPoint {
994
984
  /**
995
- * The minimum width for this breakpoint in pixels.
985
+ * Sets the minimum screen width in pixels for this breakpoint.
996
986
  */
997
987
  minWidth?: number;
998
988
  /**
999
- * The maximum width for this breakpoint in pixels.
989
+ * Sets the maximum screen width in pixels for this breakpoint.
1000
990
  */
1001
991
  maxWidth?: number;
1002
992
  /**
1003
- * The value associated with this breakpoint.
1004
- * It can represent the number of columns or the colspan/gutters for the form control.
993
+ * Sets the number of columns or spacing for form controls at this screen size.
1005
994
  */
1006
995
  value: number | string;
1007
996
  }
package/index.d.ts CHANGED
@@ -31,11 +31,11 @@ export declare const Field: {
31
31
  export declare const FieldArray: React_2.FunctionComponent<FieldArrayProps>;
32
32
 
33
33
  /**
34
- * Represents the props of the FieldArray component that is used inside the KendoReact Form component.
34
+ * Contains the props for the FieldArray component that you use inside forms.
35
35
  */
36
36
  export declare interface FieldArrayProps {
37
37
  /**
38
- * The name of the field in the Form state.
38
+ * Sets the field name in the form state.
39
39
  */
40
40
  name: string;
41
41
  /**
@@ -44,12 +44,12 @@ export declare interface FieldArrayProps {
44
44
  */
45
45
  component: React.ComponentType<any>;
46
46
  /**
47
- * The validation functions for the FieldArray level.
48
- * Currently, `validator` supports only synchronous functions.
47
+ * Validates the field array and returns error messages.
48
+ * Only synchronous functions are supported.
49
49
  */
50
50
  validator?: FieldValidatorType | FieldValidatorType[];
51
51
  /**
52
- * The React elements that are passed as children to the rendered component.
52
+ * Provides child elements that are passed to the rendered component.
53
53
  */
54
54
  children?: any;
55
55
  /**
@@ -59,7 +59,7 @@ export declare interface FieldArrayProps {
59
59
  }
60
60
 
61
61
  /**
62
- * Represents the props that are passed to the component which is rendered by FieldArray.
62
+ * Contains props that are passed to components rendered inside FieldArray components.
63
63
  */
64
64
  export declare interface FieldArrayRenderProps {
65
65
  /**
@@ -68,75 +68,75 @@ export declare interface FieldArrayRenderProps {
68
68
  */
69
69
  value: any;
70
70
  /**
71
- * Represents the error message that is returned by the validator.
72
- * The FieldArray is considered valid if the `validationMessage` field is empty.
71
+ * Contains the error message from validation.
72
+ * The field is valid when this is empty.
73
73
  */
74
74
  validationMessage: string | null;
75
75
  /**
76
- * Indicates if the field is touched.
77
- * The touched state is set to `true` when the `onBlur` callback is called.
76
+ * Shows whether the user has interacted with the field.
77
+ * Becomes true when the field loses focus.
78
78
  */
79
79
  touched: boolean;
80
80
  /**
81
- * Indicates if the field is modified.
82
- * The modified state is set to `true` when the `onChange` callback for the current field is called for first time.
81
+ * Shows whether the field value has changed from its initial value.
82
+ * Becomes true when the field value changes for the first time.
83
83
  */
84
84
  modified: boolean;
85
85
  /**
86
- * Indicates if the field is visited.
87
- * The visited state is set to `true` when the `onFocus` callback is called.
86
+ * Shows whether the user has focused on the field.
87
+ * Becomes true when the field receives focus.
88
88
  */
89
89
  visited: boolean;
90
90
  /**
91
- * A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
91
+ * Shows whether the field passes validation and has been touched.
92
92
  */
93
93
  valid: boolean;
94
94
  /**
95
- * Represents the children that are passed to the FieldArray.
95
+ * Contains child elements that are passed to the FieldArray.
96
96
  */
97
97
  children: any;
98
98
  /**
99
- * The name of the field in the Form state.
99
+ * Contains the field name in the form state.
100
100
  */
101
101
  name: string;
102
102
  /**
103
- * A callback to add a value to the beginning of the array.
103
+ * Adds a value to the beginning of the array.
104
104
  */
105
105
  onUnshift: (options: {
106
106
  value: any;
107
107
  }) => number;
108
108
  /**
109
- * A callback to add a value to the end of the array.
109
+ * Adds a value to the end of the array.
110
110
  */
111
111
  onPush: (options: {
112
112
  value: any;
113
113
  }) => void;
114
114
  /**
115
- * A callback to insert value at given index of the array.
115
+ * Inserts a value at a specific position in the array.
116
116
  */
117
117
  onInsert: (options: {
118
118
  value: any;
119
119
  index: number;
120
120
  }) => void;
121
121
  /**
122
- * A callback to remove a value from the end of the array. The value is returned.
122
+ * Removes and returns the last value from the array.
123
123
  */
124
124
  onPop: () => any;
125
125
  /**
126
- * A callback to remove a value from given index of the array.
126
+ * Removes a value at a specific position in the array.
127
127
  */
128
128
  onRemove: (options: {
129
129
  index: number;
130
130
  }) => any;
131
131
  /**
132
- * A callback to replace value at given index of the array.
132
+ * Replaces a value at a specific position in the array.
133
133
  */
134
134
  onReplace: (options: {
135
135
  value: any;
136
136
  index: number;
137
137
  }) => void;
138
138
  /**
139
- * A callback to move a value from one index to another. Useful for drag and drop reordering.
139
+ * Moves a value from one position to another in the array.
140
140
  */
141
141
  onMove: (options: {
142
142
  prevIndex: number;
@@ -149,12 +149,12 @@ export declare interface FieldArrayRenderProps {
149
149
  }
150
150
 
151
151
  /**
152
- * Represents the props of the Field component that is used inside the KendoReact Form component.
152
+ * Contains the props for the Field component that you use inside forms.
153
153
  */
154
154
  export declare interface FieldProps {
155
155
  /**
156
- * The name of the field in the Form state.
157
- * Supports nested fields in the `user.age` and `users[index].name` formats.
156
+ * Sets the field name in the form state.
157
+ * You can use nested fields like `user.age` and `users[0].name`.
158
158
  *
159
159
  * @example
160
160
  * ```jsx
@@ -175,9 +175,10 @@ export declare interface FieldProps {
175
175
  */
176
176
  component: string | React.ComponentType<any>;
177
177
  /**
178
- * The validation functions for the Field level.
179
- * Currently, `validator` supports only synchronous functions.
180
- * Using the array overload with an inline array will cause an infinite loop. Use a `useMemo` hook to memoize the array instead.
178
+ * Validates the field value and returns error messages.
179
+ *
180
+ * Only synchronous functions are supported.
181
+ * Use `useMemo` to avoid infinite loops when using an array of validators.
181
182
  *
182
183
  * @example
183
184
  * ```jsx
@@ -187,7 +188,7 @@ export declare interface FieldProps {
187
188
  */
188
189
  validator?: FieldValidatorType | FieldValidatorType[];
189
190
  /**
190
- * The React elements that are passed as children to the rendered component.
191
+ * Provides child elements that are passed to the rendered component.
191
192
  *
192
193
  * @example
193
194
  * ```jsx
@@ -198,14 +199,13 @@ export declare interface FieldProps {
198
199
  */
199
200
  children?: any;
200
201
  /**
201
- * Defines the colspan for the Form field. Can be a number or an array of responsive breakpoints.
202
+ * Sets how many columns the field spans in the form layout.
202
203
  */
203
204
  colSpan?: number | ResponsiveFormBreakPoint[];
204
205
  /**
205
- * Called when the underlying editor triggers its `onChange` event and the Form updates its internal state.
206
- * Useful for updating related fields.
207
- * > The `Form` listens to this editor event and automatically keeps its internal state up to date.
208
- * That is why this event should be used only for executing custom logic.
206
+ * Handles changes to the field value.
207
+ *
208
+ * Use this to update related fields. The Form automatically updates its state when this fires.
209
209
  *
210
210
  * @example
211
211
  * ```jsx
@@ -217,21 +217,19 @@ export declare interface FieldProps {
217
217
  }
218
218
 
219
219
  /**
220
- * Represents the props that are passed to the component which is rendered by Field.
220
+ * Contains props that are passed to components rendered inside Field components.
221
221
  */
222
222
  export declare interface FieldRenderProps extends FieldRenderPropsBase {
223
223
  }
224
224
 
225
225
  /**
226
- * The validator function for the Field component. The function arguments are:
226
+ * Validates a single field and returns an error message or success.
227
227
  *
228
- * * value - The current value of the field.
229
- * * valueGetter - Function which can be used to get other fields value.
230
- * Usable when validator depends on more than one field. Supports field paths.
231
- * * fieldProps - Props of the Field component. Currently contains only the `name` prop.
232
- * Usable when one validator is used across multiple fields.
228
+ * * value - Contains the current field value
229
+ * * valueGetter - Gets values from other fields using field paths like 'user.name'
230
+ * * fieldProps - Contains the field's props, including the field name
233
231
  *
234
- * Returns `string` to signify error or `undefined` to signify validation success.
232
+ * Returns a string for validation errors or undefined for successful validation.
235
233
  */
236
234
  export declare type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
237
235
  name: string;
@@ -671,14 +669,13 @@ export declare interface FormHandle extends Pick<FormClassComponent, keyof FormC
671
669
  }
672
670
 
673
671
  /**
674
- * Represents the props of the KendoReact Form component.
672
+ * Contains the props for the KendoReact Form component.
675
673
  */
676
674
  export declare interface FormProps {
677
675
  /**
678
- * The initial field values of the Form.
676
+ * Sets the starting values for form fields.
679
677
  *
680
- * When you initialize the Form fields, set initial values to them. Otherwise, some
681
- * components might throw errors related to switching from uncontrolled to controlled mode.
678
+ * Set initial values to prevent errors when switching from uncontrolled to controlled mode.
682
679
  *
683
680
  * @example
684
681
  * ```jsx
@@ -690,12 +687,11 @@ export declare interface FormProps {
690
687
  [name: string]: any;
691
688
  };
692
689
  /**
693
- * The validation function for the Form level.
694
- * Should return a key-value pair where the key is the field path and the value is the error message.
695
- * Nested fields are supported, e.g.: 'users[0].name'.
696
- * You can use the same field path to access the value from the
697
- * values object using the `getter` function from the `kendo-react-common` package.
698
- * Currently, `validator` supports only synchronous functions.
690
+ * Validates the entire form and returns error messages.
691
+ *
692
+ * Return a key-value pair where the key is the field path and the value is the error message.
693
+ * You can validate nested fields like 'users[0].name'.
694
+ * Only synchronous functions are supported.
699
695
  *
700
696
  * @example
701
697
  * ```jsx
@@ -705,8 +701,9 @@ export declare interface FormProps {
705
701
  */
706
702
  validator?: FormValidatorType;
707
703
  /**
708
- * The submission handler for the Form.
709
- * Called when at least one field has been modified, the user pressed the **Submit** button, and the form validation was successful.
704
+ * Handles form submission when validation passes and fields are modified.
705
+ *
706
+ * Fires when at least one field is modified, the user clicks Submit, and validation passes.
710
707
  *
711
708
  * @example
712
709
  * ```jsx
@@ -718,8 +715,9 @@ export declare interface FormProps {
718
715
  [name: string]: any;
719
716
  }, event?: React.SyntheticEvent<any>) => void;
720
717
  /**
721
- * Called every time the user presses the **Submit** button.
722
- * Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or in an unmodified state.
718
+ * Handles every submit button click, even when the form is invalid or unchanged.
719
+ *
720
+ * Use this for advanced scenarios where you need to handle all submit events.
723
721
  *
724
722
  * @example
725
723
  * ```jsx
@@ -729,7 +727,7 @@ export declare interface FormProps {
729
727
  */
730
728
  onSubmitClick?: (event: FormSubmitClickEvent) => void;
731
729
  /**
732
- * The Form content that will be rendered.
730
+ * Renders the form content using the provided render function.
733
731
  *
734
732
  * @example
735
733
  * ```jsx
@@ -739,7 +737,7 @@ export declare interface FormProps {
739
737
  */
740
738
  render: (props: FormRenderProps) => any;
741
739
  /**
742
- * Set this to `true` to allow the form to submit without modified fields.
740
+ * Allows the form to submit even when no fields have been modified.
743
741
  *
744
742
  * @example
745
743
  * ```jsx
@@ -756,12 +754,12 @@ export declare interface FormProps {
756
754
  }
757
755
 
758
756
  /**
759
- * Represents the props that are passed to the `render` option component of the Form.
757
+ * Contains props that are passed to the form's render function.
760
758
  */
761
759
  export declare interface FormRenderProps {
762
760
  /**
763
- * A callback for submitting the Form.
764
- * Can be passed to the `onClick` property of the **Submit** button.
761
+ * Submits the form when called.
762
+ * Use this with the onClick property of Submit buttons.
765
763
  *
766
764
  * @example
767
765
  * ```jsx
@@ -785,7 +783,7 @@ export declare interface FormRenderProps {
785
783
  value: any;
786
784
  }) => void;
787
785
  /**
788
- * A callback for resetting the Form.
786
+ * Resets the form to its initial state.
789
787
  *
790
788
  * @example
791
789
  * ```jsx
@@ -794,7 +792,7 @@ export declare interface FormRenderProps {
794
792
  */
795
793
  onFormReset: () => void;
796
794
  /**
797
- * The key-value pair containing the current errors by field path, combined from both field and form level validators.
795
+ * Contains current validation errors organized by field path.
798
796
  *
799
797
  * @example
800
798
  * ```jsx
@@ -803,8 +801,8 @@ export declare interface FormRenderProps {
803
801
  */
804
802
  errors: KeyValue<string>;
805
803
  /**
806
- * Indicates if the Form is valid.
807
- * If any field is invalid, `valid` is set to `false`.
804
+ * Shows whether the form passes all validation rules.
805
+ * Becomes false if any field fails validation.
808
806
  *
809
807
  * @example
810
808
  * ```jsx
@@ -813,10 +811,8 @@ export declare interface FormRenderProps {
813
811
  */
814
812
  valid: boolean;
815
813
  /**
816
- * Indicates if the Form is touched.
817
- * If any field is touched, `touched` is set to `true`.
818
- * The touched state of a field is set to `true` when the `onBlur`
819
- * callback of the Field component is called or when the user tries to submit the form.
814
+ * Shows whether the user has interacted with any field.
815
+ * Becomes true when any field loses focus or the user tries to submit.
820
816
  *
821
817
  * @example
822
818
  * ```jsx
@@ -825,10 +821,8 @@ export declare interface FormRenderProps {
825
821
  */
826
822
  touched: boolean;
827
823
  /**
828
- * Indicates if the Form is visited.
829
- * If any field is visited, `visited` is set to `true`.
830
- * The visited state of a field is set to `true` when the `onFocus`
831
- * callback of the Field component is called or when the user tries to submit the form.
824
+ * Shows whether the user has focused on any field.
825
+ * Becomes true when any field receives focus or the user tries to submit.
832
826
  *
833
827
  * @example
834
828
  * ```jsx
@@ -837,10 +831,8 @@ export declare interface FormRenderProps {
837
831
  */
838
832
  visited: boolean;
839
833
  /**
840
- * Indicates if the Form is modified.
841
- * If any field is modified, `modified` is set to `true`.
842
- * The modified state of a field is set to `true` when the `onChange`
843
- * callback of the Field component is called for the first time.
834
+ * Shows whether any field value has changed from its initial value.
835
+ * Becomes true when any field value changes for the first time.
844
836
  *
845
837
  * @example
846
838
  * ```jsx
@@ -849,8 +841,8 @@ export declare interface FormRenderProps {
849
841
  */
850
842
  modified: boolean;
851
843
  /**
852
- * Indicates if the Form is successfully submitted.
853
- * Useful for detecting if the user is leaving the form before saving changes.
844
+ * Shows whether the form has been successfully submitted.
845
+ * Use this to detect if the user is leaving before saving changes.
854
846
  *
855
847
  * @example
856
848
  * ```jsx
@@ -859,11 +851,10 @@ export declare interface FormRenderProps {
859
851
  */
860
852
  submitted: boolean;
861
853
  /**
862
- * Indicates if the Form is ready to be submitted.
863
- * * If `allowSubmit` is set to `true` and the Form is valid, the user will be able to submit the form.
864
- * * 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`.
854
+ * Shows whether the form can be submitted.
855
+ * When true and form is valid, you can submit. When true and form is invalid, you can show all validation errors.
865
856
  *
866
- * Useful for toggling the disabled state of the **Submit** button.
857
+ * Use this to control the disabled state of Submit buttons.
867
858
  *
868
859
  * @example
869
860
  * ```jsx
@@ -927,36 +918,36 @@ export declare interface FormSeparatorProps {
927
918
  }
928
919
 
929
920
  /**
930
- * The FormSubmitClick event.
921
+ * Contains data for the form submit click event.
931
922
  */
932
923
  export declare interface FormSubmitClickEvent {
933
924
  /**
934
- * Contains the current values of the form.
925
+ * Provides the current values from all form fields.
935
926
  */
936
927
  values: {
937
928
  [name: string]: any;
938
929
  };
939
930
  /**
940
- * The native event.
931
+ * Contains the original browser event that triggered the submit.
941
932
  */
942
933
  event?: React.SyntheticEvent<any>;
943
934
  /**
944
- * Represents the validity state of the form.
935
+ * Shows whether the form passes all validation rules.
945
936
  */
946
937
  isValid: boolean;
947
938
  /**
948
- * Represents the modified state of the form.
939
+ * Shows whether any form fields have been changed from their initial values.
949
940
  */
950
941
  isModified: boolean;
951
942
  }
952
943
 
953
944
  /**
954
- * The validator function for the Form component.
945
+ * Validates an entire form and returns error messages.
955
946
  *
956
- * * values - The current values of the form.
957
- * * valueGetter - Function which can be used to get field value. Supports field paths.
947
+ * * values - Contains the current values from all form fields
948
+ * * valueGetter - Gets field values using field paths like 'user.name'
958
949
  *
959
- * Returns key-value pair with errors if such are present. The key is the field path, where the value is the error message.
950
+ * Returns a key-value pair where the key is the field path and the value is the error message.
960
951
  */
961
952
  export declare type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;
962
953
 
@@ -979,29 +970,27 @@ export declare interface Gutters {
979
970
  }
980
971
 
981
972
  /**
982
- *
973
+ * Represents a key-value pair collection where keys are strings.
983
974
  */
984
975
  export declare interface KeyValue<ValueType> {
985
976
  [name: string]: ValueType;
986
977
  }
987
978
 
988
979
  /**
989
- * Allows to define responsive breakpoints for the Form component.
990
- * Each breakpoint can specify a minimum and/or maximum width, and a value that represents either the number of columns
991
- * or the colspan/gutters for that breakpoint.
980
+ * Defines responsive breakpoints for form layouts.
981
+ * Each breakpoint sets minimum and maximum widths and values for columns or spacing at different screen sizes.
992
982
  */
993
983
  export declare interface ResponsiveFormBreakPoint {
994
984
  /**
995
- * The minimum width for this breakpoint in pixels.
985
+ * Sets the minimum screen width in pixels for this breakpoint.
996
986
  */
997
987
  minWidth?: number;
998
988
  /**
999
- * The maximum width for this breakpoint in pixels.
989
+ * Sets the maximum screen width in pixels for this breakpoint.
1000
990
  */
1001
991
  maxWidth?: number;
1002
992
  /**
1003
- * The value associated with this breakpoint.
1004
- * It can represent the number of columns or the colspan/gutters for the form control.
993
+ * Sets the number of columns or spacing for form controls at this screen size.
1005
994
  */
1006
995
  value: number | string;
1007
996
  }
package/package-metadata.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "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;
8
+ "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: 1757424159,version:"12.0.2-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
package/package-metadata.mjs CHANGED
@@ -10,8 +10,8 @@ const e = Object.freeze({
10
10
  productName: "KendoReact",
11
11
  productCode: "KENDOUIREACT",
12
12
  productCodes: ["KENDOUIREACT"],
13
- publishDate: 1757419541,
14
- version: "12.0.2-develop.3",
13
+ publishDate: 1757424159,
14
+ version: "12.0.2-develop.4",
15
15
  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
16
16
  });
17
17
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-form",
3
- "version": "12.0.2-develop.3",
3
+ "version": "12.0.2-develop.4",
4
4
  "description": "React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -26,7 +26,7 @@
26
26
  "sideEffects": false,
27
27
  "peerDependencies": {
28
28
  "@progress/kendo-licensing": "^1.7.0",
29
- "@progress/kendo-react-common": "12.0.2-develop.3",
29
+ "@progress/kendo-react-common": "12.0.2-develop.4",
30
30
  "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
31
31
  "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
32
32
  },
@@ -51,7 +51,7 @@
51
51
  "package": {
52
52
  "productName": "KendoReact",
53
53
  "productCode": "KENDOUIREACT",
54
- "publishDate": 1757419541,
54
+ "publishDate": 1757424159,
55
55
  "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
56
56
  }
57
57
  },