@progress/kendo-react-form 8.3.0-develop.1 → 8.3.0-develop.11

package/FieldWrapper.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),n=require("@progress/kendo-react-common");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const o=i(l),c=e=>{const t=n.classNames({"k-form-field":!0,"k-rtl":e.dir==="rtl"},e.className);return o.createElement("div",{className:t,style:e.style},e.children)};c.displayName="KendoReactFieldWrapper";exports.FieldWrapper=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),a=require("@progress/kendo-react-common");function i(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(l,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return l.default=e,Object.freeze(l)}const c=i(s),n=e=>{const l=a.useUnstyled(),t=l&&l.uFormField,r=c.useMemo(()=>a.classNames(a.uFormField.formField({c:t,isRtl:e.dir==="rtl"}),e.className),[t,e.className,e.dir]);return c.createElement("div",{className:r,style:e.style},e.children)};n.displayName="KendoReactFieldWrapper";exports.FieldWrapper=n;

package/FieldWrapper.mjs

@@ -6,17 +6,17 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as l from "react";
-import { classNames as t } from "@progress/kendo-react-common";
+import * as a from "react";
+import { useUnstyled as i, classNames as m, uFormField as d } from "@progress/kendo-react-common";
 const r = (e) => {
-  const a = t(
-    {
-      "k-form-field": !0,
-      "k-rtl": e.dir === "rtl"
-    },
-    e.className
+  const l = i(), s = l && l.uFormField, t = a.useMemo(
+    () => m(d.formField({
+      c: s,
+      isRtl: e.dir === "rtl"
+    }), e.className),
+    [s, e.className, e.dir]
   );
-  return /* @__PURE__ */ l.createElement("div", { className: a, style: e.style }, e.children);
+  return /* @__PURE__ */ a.createElement("div", { className: t, style: e.style }, e.children);
 };
 r.displayName = "KendoReactFieldWrapper";
 export {

package/FormElement.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),m=require("@progress/kendo-react-common"),p=require("./FormContext.js");function y(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const o=y(b),l=o.forwardRef((e,n)=>{const t={size:"medium",...e},r=o.useRef(null),c=o.useRef(null);o.useImperativeHandle(c,()=>({element:r.current,props:t})),o.useImperativeHandle(n,()=>c.current);const s=o.useContext(p.FormContext),{className:i,style:g,horizontal:u,size:a,...d}=t,f=m.classNames({"k-form":!0,[`k-form-${m.kendoThemeMaps.sizeMap[a]||a}`]:a,"k-form-horizontal":u===!0},i);return o.createElement("form",{ref:r,...d,id:s?s.id:void 0,style:e.style,className:f,onSubmit:s?s.onSubmit:void 0},e.children)});l.displayName="KendoReactFormElement";exports.FormElement=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),l=require("@progress/kendo-react-common"),v=require("./FormContext.js");function F(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const t=F(g),b=t.forwardRef((e,o)=>{const n={size:"medium",...e},r=t.useRef(null),a=t.useRef(null);t.useImperativeHandle(a,()=>({element:r.current,props:n})),t.useImperativeHandle(o,()=>a.current);const s=t.useContext(v.FormContext),{className:m,style:R,horizontal:c,size:u,...y}=n,i=l.useUnstyled(),f=i&&i.uForm,d=t.useMemo(()=>c?"horizontal":c===!1?"vertical":void 0,[c]),p=t.useMemo(()=>l.classNames(l.uForm.form({c:f,size:u,orientation:d}),m),[m,f,d,u]);return t.createElement("form",{ref:r,...y,id:s?s.id:void 0,style:e.style,className:p,onSubmit:s?s.onSubmit:void 0},e.children)});b.displayName="KendoReactFormElement";exports.FormElement=b;

package/FormElement.mjs

@@ -7,36 +7,39 @@
  */
 "use client";
 import * as e from "react";
-import { classNames as f, kendoThemeMaps as d } from "@progress/kendo-react-common";
-import { FormContext as p } from "./FormContext.mjs";
-const h = e.forwardRef((o, a) => {
-  const m = {
+import { useUnstyled as y, classNames as v, uForm as F } from "@progress/kendo-react-common";
+import { FormContext as N } from "./FormContext.mjs";
+const R = e.forwardRef((o, f) => {
+  const r = {
     size: "medium",
     ...o
-  }, s = e.useRef(null), n = e.useRef(null);
-  e.useImperativeHandle(n, () => ({ element: s.current, props: m })), e.useImperativeHandle(a, () => n.current);
-  const t = e.useContext(p), { className: l, style: z, horizontal: i, size: r, ...c } = m, u = f(
-    {
-      "k-form": !0,
-      [`k-form-${d.sizeMap[r] || r}`]: r,
-      "k-form-horizontal": i === !0
-    },
-    l
+  }, n = e.useRef(null), m = e.useRef(null);
+  e.useImperativeHandle(m, () => ({ element: n.current, props: r })), e.useImperativeHandle(f, () => m.current);
+  const t = e.useContext(N), { className: l, style: h, horizontal: s, size: a, ...d } = r, i = y(), c = i && i.uForm, u = e.useMemo(
+    () => s ? "horizontal" : s === !1 ? "vertical" : void 0,
+    [s]
+  ), p = e.useMemo(
+    () => v(F.form({
+      c,
+      size: a,
+      orientation: u
+    }), l),
+    [l, c, u, a]
   );
   return /* @__PURE__ */ e.createElement(
     "form",
     {
-      ref: s,
-      ...c,
+      ref: n,
+      ...d,
       id: t ? t.id : void 0,
       style: o.style,
-      className: u,
+      className: p,
       onSubmit: t ? t.onSubmit : void 0
     },
     o.children
   );
 });
-h.displayName = "KendoReactFormElement";
+R.displayName = "KendoReactFormElement";
 export {
-  h as FormElement
+  R as FormElement
 };

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

@@ -5,4 +5,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,i,s){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),a=e=>{const{name:t,component:i,validator:s,children:o,onChange:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>{const i=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);l.onChange(t,{value:i}),a&&a.call(void 0,e)}),[t,h,a]),c=r.useCallback((e=>l.onChange(t,{value:e.target.value})),[t,h]),m=r.useCallback((()=>l.onBlur(t)),[t,h]),v=r.useCallback((()=>l.onFocus(t)),[t,h]);if(!l)return null;const p=l.valueGetter(t);return"string"==typeof i?r.createElement(i,{onChange:c,onBlur:m,onFocus:v,value:p,children:o,...d}):r.createElement(i,{children:o,...d,onChange:u,onBlur:m,onFocus:v,value:p,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),name:t})};a.displayName="KendoReactField";const d={name:"@progress/kendo-react-form",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},l=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.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=s.clone(this.props.initialValues),this._key=s.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={},i=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),i.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const s=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,i);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:s,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,s,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:i}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,i),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 i=this.validatorsByField[e]||[],s=i.length;return this.validatorsByField={...this.validatorsByField,[e]:[...i,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],i=!!t[s];t[s]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},i&&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=>s.getter(e)(this.values),this.valueSetter=(e,t)=>s.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 i=[...this.valueGetter(e)||[]];i.splice(t.index,0,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,i),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],i=t.pop();return this.valueSetter(e,t),this.forceUpdate(),i},this.onRemove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i.splice(t.index,1);return this.valueSetter(e,i),this.forceUpdate(),s},this.onReplace=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,1,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i[t.prevIndex];i.splice(t.prevIndex,1),i.splice(t.nextIndex,0,s),this.valueSetter(e,i),this.forceUpdate()},s.validatePackage(d),this.values=s.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,i=this.validatorsByField;return t.forEach((t=>{if(e[t]="",i[t]){const s=[];i[t].forEach((e=>{Array.isArray(e)?s.push(...e):s.push(e)})),s.find((i=>{if(i){const s=i(this.valueGetter(t),this.valueGetter,{name:t});if(s)return e[t]=s,!0}return!1}))}})),this.formErrors&&s.cloneObject(this.formErrors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,i=this.visited,s=this.modified,o=this.fields,a=this.errors,d=this.isFormValid(a),l=this.isFormModified(s,o),h=this.isFormTouched(t,o),u=this.isFormVisited(i,o),c=this.isFormHasNotTouched(t,o)&&!d||d&&(this.props.ignoreModified||l);return r.createElement(n.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:a,modified:s,touched:t,visited:i,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:d,modified:l,touched:h,visited:u,submitted:this._submitted,valueGetter:this.valueGetter,errors:a,allowSubmit:c,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm}))}};l.displayName="KendoReactForm",l.propTypes={initialValues:i.any,onSubmit:i.func,onSubmitClick:i.func,render:i.func.isRequired,id:i.string};let h=l;const u=e=>{const{name:t,component:i,validator:s,type:o,children:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>l.onUnshift(t,e)),[t,h]),c=r.useCallback((e=>l.onPush(t,e)),[t,h]),m=r.useCallback((e=>l.onInsert(t,e)),[t,h]),v=r.useCallback((()=>l.onPop(t)),[t,h]),p=r.useCallback((e=>l.onRemove(t,e)),[t,h]),f=r.useCallback((e=>l.onReplace(t,e)),[t,h]),F=r.useCallback((e=>l.onMove(t,e)),[t,h]);if(!l)return null;const y=l.valueGetter(t);return r.createElement(i,{value:y,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),onUnshift:u,onPush:c,onInsert:m,onPop:v,onRemove:p,onReplace:f,onMove:F,children:a,name:t,...d})};u.displayName="KendoReactFieldArray";const c=e=>{const t=s.classNames({"k-form-field":!0,"k-rtl":"rtl"===e.dir},e.className);return r.createElement("div",{className:t,style:e.style},e.children)};c.displayName="KendoReactFieldWrapper";const m=r.forwardRef(((e,t)=>{const i={size:"medium",...e},o=r.useRef(null),a=r.useRef(null);r.useImperativeHandle(a,(()=>({element:o.current,props:i}))),r.useImperativeHandle(t,(()=>a.current));const d=r.useContext(n),{className:l,style:h,horizontal:u,size:c,...m}=i,v=s.classNames({"k-form":!0,[`k-form-${s.kendoThemeMaps.sizeMap[c]||c}`]:c,"k-form-horizontal":!0===u},l);return r.createElement("form",{ref:o,...m,id:d?d.id:void 0,style:e.style,className:v,onSubmit:d?d.onSubmit:void 0},e.children)}));m.displayName="KendoReactFormElement";const v=s.withIdHOC(h);v.displayName="KendoReactForm",e.Field=a,e.FieldArray=u,e.FieldWrapper=c,e.Form=v,e.FormClassComponent=h,e.FormElement=m}));
+!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,i,s){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),a=e=>{const{name:t,component:i,validator:s,children:o,onChange:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>{const i=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);l.onChange(t,{value:i}),a&&a.call(void 0,e)}),[t,h,a]),c=r.useCallback((e=>l.onChange(t,{value:e.target.value})),[t,h]),m=r.useCallback((()=>l.onBlur(t)),[t,h]),v=r.useCallback((()=>l.onFocus(t)),[t,h]);if(!l)return null;const p=l.valueGetter(t);return"string"==typeof i?r.createElement(i,{onChange:c,onBlur:m,onFocus:v,value:p,children:o,...d}):r.createElement(i,{children:o,...d,onChange:u,onBlur:m,onFocus:v,value:p,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),name:t})};a.displayName="KendoReactField";const d={name:"@progress/kendo-react-form",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},l=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.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=s.clone(this.props.initialValues),this._key=s.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={},i=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),i.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const s=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,i);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:s,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,s,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:i}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,i),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 i=this.validatorsByField[e]||[],s=i.length;return this.validatorsByField={...this.validatorsByField,[e]:[...i,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],i=!!t[s];t[s]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},i&&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=>s.getter(e)(this.values),this.valueSetter=(e,t)=>s.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 i=[...this.valueGetter(e)||[]];i.splice(t.index,0,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,i),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],i=t.pop();return this.valueSetter(e,t),this.forceUpdate(),i},this.onRemove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i.splice(t.index,1);return this.valueSetter(e,i),this.forceUpdate(),s},this.onReplace=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,1,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i[t.prevIndex];i.splice(t.prevIndex,1),i.splice(t.nextIndex,0,s),this.valueSetter(e,i),this.forceUpdate()},s.validatePackage(d),this.values=s.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,i=this.validatorsByField;return t.forEach((t=>{if(e[t]="",i[t]){const s=[];i[t].forEach((e=>{Array.isArray(e)?s.push(...e):s.push(e)})),s.find((i=>{if(i){const s=i(this.valueGetter(t),this.valueGetter,{name:t});if(s)return e[t]=s,!0}return!1}))}})),this.formErrors&&s.cloneObject(this.formErrors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,i=this.visited,s=this.modified,o=this.fields,a=this.errors,d=this.isFormValid(a),l=this.isFormModified(s,o),h=this.isFormTouched(t,o),u=this.isFormVisited(i,o),c=this.isFormHasNotTouched(t,o)&&!d||d&&(this.props.ignoreModified||l);return r.createElement(n.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:a,modified:s,touched:t,visited:i,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:d,modified:l,touched:h,visited:u,submitted:this._submitted,valueGetter:this.valueGetter,errors:a,allowSubmit:c,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm}))}};l.displayName="KendoReactForm",l.propTypes={initialValues:i.any,onSubmit:i.func,onSubmitClick:i.func,render:i.func.isRequired,id:i.string};let h=l;const u=e=>{const{name:t,component:i,validator:s,type:o,children:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>l.onUnshift(t,e)),[t,h]),c=r.useCallback((e=>l.onPush(t,e)),[t,h]),m=r.useCallback((e=>l.onInsert(t,e)),[t,h]),v=r.useCallback((()=>l.onPop(t)),[t,h]),p=r.useCallback((e=>l.onRemove(t,e)),[t,h]),f=r.useCallback((e=>l.onReplace(t,e)),[t,h]),F=r.useCallback((e=>l.onMove(t,e)),[t,h]);if(!l)return null;const y=l.valueGetter(t);return r.createElement(i,{value:y,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),onUnshift:u,onPush:c,onInsert:m,onPop:v,onRemove:p,onReplace:f,onMove:F,children:a,name:t,...d})};u.displayName="KendoReactFieldArray";const c=e=>{const t=s.useUnstyled(),i=t&&t.uFormField,o=r.useMemo((()=>s.classNames(s.uFormField.formField({c:i,isRtl:"rtl"===e.dir}),e.className)),[i,e.className,e.dir]);return r.createElement("div",{className:o,style:e.style},e.children)};c.displayName="KendoReactFieldWrapper";const m=r.forwardRef(((e,t)=>{const i={size:"medium",...e},o=r.useRef(null),a=r.useRef(null);r.useImperativeHandle(a,(()=>({element:o.current,props:i}))),r.useImperativeHandle(t,(()=>a.current));const d=r.useContext(n),{className:l,style:h,horizontal:u,size:c,...m}=i,v=s.useUnstyled(),p=v&&v.uForm,f=r.useMemo((()=>u?"horizontal":!1===u?"vertical":void 0),[u]),F=r.useMemo((()=>s.classNames(s.uForm.form({c:p,size:c,orientation:f}),l)),[l,p,f,c]);return r.createElement("form",{ref:o,...m,id:d?d.id:void 0,style:e.style,className:F,onSubmit:d?d.onSubmit:void 0},e.children)}));m.displayName="KendoReactFormElement";const v=s.withIdHOC(h);v.displayName="KendoReactForm",e.Field=a,e.FieldArray=u,e.FieldWrapper=c,e.Form=v,e.FormClassComponent=h,e.FormElement=m}));

package/index.d.mts

@@ -6,6 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { FieldRenderPropsBase } from '@progress/kendo-react-common';
+import { FormClassStructure } from '@progress/kendo-react-common';
 import { ForwardRefExoticComponent } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
@@ -232,6 +233,10 @@ export declare interface FieldWrapperProps {
      * Specifies the direction of the content.
      */
     dir?: string;
+    /**
+     * @hidden
+     */
+    unstyled?: FormClassStructure;
 }
 
 /** @hidden */
@@ -548,6 +553,10 @@ export declare interface FormElementProps {
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     */
+    unstyled?: FormClassStructure;
 }
 
 /**

package/index.d.ts

@@ -6,6 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { FieldRenderPropsBase } from '@progress/kendo-react-common';
+import { FormClassStructure } from '@progress/kendo-react-common';
 import { ForwardRefExoticComponent } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
@@ -232,6 +233,10 @@ export declare interface FieldWrapperProps {
      * Specifies the direction of the content.
      */
     dir?: string;
+    /**
+     * @hidden
+     */
+    unstyled?: FormClassStructure;
 }
 
 /** @hidden */
@@ -548,6 +553,10 @@ export declare interface FormElementProps {
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     */
+    unstyled?: FormClassStructure;
 }
 
 /**

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-form",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1723203566,
+  publishDate: 1724738539,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-form",
-  "version": "8.3.0-develop.1",
+  "version": "8.3.0-develop.11",
   "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",
@@ -23,7 +23,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "8.3.0-develop.1",
+    "@progress/kendo-react-common": "8.3.0-develop.11",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },