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

package/index.js

@@ -1,5 +1,8 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* 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 T=require("react"),F=require("prop-types"),h=require("@progress/kendo-react-common");function B(d){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>d[e]})}}return t.default=d,Object.freeze(t)}const n=B(T),g=n.createContext(null),_=d=>{const{name:t,component:e,validator:i,children:o,onChange:r,...l}=d,s=n.useContext(g),a=s?s.id:"";n.useEffect(()=>s?s.registerField(t,i):void 0,[t,a,i]);const m=n.useCallback(u=>{const b=u&&(u.value!==void 0?u.value:u.target?u.target.value:u.target);s.onChange(t,{value:b}),r&&r.call(void 0,u)},[t,a,r]),f=n.useCallback(u=>s.onChange(t,{value:u.target.value}),[t,a]),v=n.useCallback(()=>s.onBlur(t),[t,a]),p=n.useCallback(()=>s.onFocus(t),[t,a]);if(!s)return null;const y=s.valueGetter(t);return typeof e=="string"?n.createElement(e,{onChange:f,onBlur:v,onFocus:p,value:y,children:o,...l}):n.createElement(e,{children:o,...l,onChange:m,onBlur:v,onFocus:p,value:y,validationMessage:s.errors[t],touched:s.touched[t],modified:s.modified[t],visited:s.visited[t],valid:!(s.errors[t]&&s.touched[t]),name:t})};_.displayName="KendoReactField";const S={name:"@progress/kendo-react-form",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},M=0;let C=class extends n.Component{constructor(t){super(t),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()},M)},this.resetForm=()=>{this.values=h.clone(this.props.initialValues),this._key=h.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 i={},o=this.fields;e&&(typeof e.preventDefault=="function"&&e.preventDefault(),typeof e.stopPropagation=="function"&&e.stopPropagation()),o.forEach(a=>{i[a]=!0}),this.visited={...i},this.touched={...i};const r=this.values,l=this.isFormValid(this.errors),s=this.isFormModified(this.modified,o);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:r,isValid:l,isModified:s,event:e}),l&&(this.props.ignoreModified||s)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,r,e)),this.forceUpdate()},this.onChange=(e,i)=>{const{value:o}=i;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,o),this.forceUpdate()},this.onFocus=(e,i)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},i||this.forceUpdate())},this.onBlur=(e,i)=>{this.touched[e]||(this.onFocus(e,i),this.touched={...this.touched,[e]:!0},i||this.forceUpdate())},this.onFieldRegister=(e,i)=>{this.addField(e);const o=this.validatorsByField[e]||[],r=o.length;return this.validatorsByField={...this.validatorsByField,[e]:[...o,i]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const l=[...this.validatorsByField[e]||[]],s=!!l[r];l[r]=void 0,this.validatorsByField={...this.validatorsByField,[e]:l},s&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some(i=>!!e[i]),this.isFormModified=(e,i)=>i.some(o=>e[o]),this.isFormHasNotTouched=(e,i)=>i.some(o=>!e[o]),this.isFormTouched=(e,i)=>i.some(o=>e[o]),this.isFormVisited=(e,i)=>i.some(o=>e[o]),this.valueGetter=e=>h.getter(e)(this.values),this.valueSetter=(e,i)=>h.setter(e)(this.values,i),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]];o.splice(i.index,0,i.value),this.valueSetter(e,o),this.forceUpdate()},this.onUnshift=(e,i)=>{this.onInsert(e,{value:i.value,index:0})},this.onPush=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[],i.value];this.valueSetter(e,o),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],o=i.pop();return this.valueSetter(e,i),this.forceUpdate(),o},this.onRemove=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]],r=o.splice(i.index,1);return this.valueSetter(e,o),this.forceUpdate(),r},this.onReplace=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]];o.splice(i.index,1,i.value),this.valueSetter(e,o),this.forceUpdate()},this.onMove=(e,i)=>{this.onArrayAction(e);const o=[...this.valueGetter(e)||[]],r=o[i.prevIndex];o.splice(i.prevIndex,1),o.splice(i.nextIndex,0,r),this.valueSetter(e,o),this.forceUpdate()},h.validatePackage(S),this.values=h.clone(t.initialValues)}get touched(){return this._touched}set touched(t){this._touched=t}get visited(){return this._visited}set visited(t){this._visited=t}get modified(){return this._modified}set modified(t){this._modified=t}get validatorsByField(){return this._validatorsByField}set validatorsByField(t){this._validatorsByField=t}get values(){return this._values}set values(t){this._values=t}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const t={},e=this.fields,i=this.validatorsByField;return e.forEach(r=>{if(t[r]="",i[r]){const l=[];i[r].forEach(s=>{Array.isArray(s)?l.push(...s):l.push(s)}),l.find(s=>{if(s){const a=s(this.valueGetter(r),this.valueGetter,{name:r});if(a)return t[r]=a,!0}return!1})}}),this.formErrors&&h.cloneObject(this.formErrors,t),t}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:t}=this.props,e=this.touched,i=this.visited,o=this.modified,r=this.fields,l=this.errors,s=this.isFormValid(l),a=this.isFormModified(o,r),m=this.isFormTouched(e,r),f=this.isFormVisited(i,r),p=this.isFormHasNotTouched(e,r)&&!s||s&&(this.props.ignoreModified||a);return n.createElement(g.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:l,modified:o,touched:e,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}},t({valid:s,modified:a,touched:m,visited:f,submitted:this._submitted,valueGetter:this.valueGetter,errors:l,allowSubmit:p,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm}))}};C.displayName="KendoReactForm";C.propTypes={initialValues:F.any,onSubmit:F.func,onSubmitClick:F.func,render:F.func.isRequired,id:F.string};const k=d=>{const{name:t,component:e,validator:i,type:o,children:r,...l}=d,s=n.useContext(g),a=s?s.id:"";n.useEffect(()=>s?s.registerField(t,i):void 0,[t,a,i]);const m=n.useCallback(c=>s.onUnshift(t,c),[t,a]),f=n.useCallback(c=>s.onPush(t,c),[t,a]),v=n.useCallback(c=>s.onInsert(t,c),[t,a]),p=n.useCallback(()=>s.onPop(t),[t,a]),y=n.useCallback(c=>s.onRemove(t,c),[t,a]),u=n.useCallback(c=>s.onReplace(t,c),[t,a]),b=n.useCallback(c=>s.onMove(t,c),[t,a]);if(!s)return null;const E=s.valueGetter(t);return n.createElement(e,{value:E,validationMessage:s.errors[t],touched:s.touched[t],modified:s.modified[t],visited:s.visited[t],valid:!(s.errors[t]&&s.touched[t]),onUnshift:m,onPush:f,onInsert:v,onPop:p,onRemove:y,onReplace:u,onMove:b,children:r,name:t,...l})};k.displayName="KendoReactFieldArray";const R=d=>{const t=h.classNames({"k-form-field":!0,"k-rtl":d.dir==="rtl"},d.className);return n.createElement("div",{className:t,style:d.style},d.children)};R.displayName="KendoReactFieldWrapper";const A=n.forwardRef((d,t)=>{const e={size:"medium",...d},i=n.useRef(null),o=n.useRef(null);n.useImperativeHandle(o,()=>({element:i.current,props:e})),n.useImperativeHandle(t,()=>o.current);const r=n.useContext(g),{className:l,style:s,horizontal:a,size:m,...f}=e,v=h.classNames({"k-form":!0,[`k-form-${h.kendoThemeMaps.sizeMap[m]||m}`]:m,"k-form-horizontal":a===!0},l);return n.createElement("form",{ref:i,...f,id:r?r.id:void 0,style:d.style,className:v,onSubmit:r?r.onSubmit:void 0},d.children)});A.displayName="KendoReactFormElement";const U=h.withIdHOC(C);U.displayName="KendoReactForm";exports.Field=_;exports.FieldArray=k;exports.FieldWrapper=R;exports.Form=U;exports.FormClassComponent=C;exports.FormElement=A;
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 o=require("./Field.js"),e=require("./Form.js"),i=require("./FieldArray.js"),t=require("./FieldWrapper.js"),F=require("./FormElement.js"),l=require("@progress/kendo-react-common"),r=l.withIdHOC(e.Form);r.displayName="KendoReactForm";exports.Field=o.Field;exports.FormClassComponent=e.Form;exports.FieldArray=i.FieldArray;exports.FieldWrapper=t.FieldWrapper;exports.FormElement=F.FormElement;exports.Form=r;

package/index.mjs

@@ -1,415 +1,24 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
 "use client";
-import * as n from "react";
-import p from "prop-types";
-import { clone as _, guid as R, getter as A, setter as U, validatePackage as B, cloneObject as E, classNames as b, kendoThemeMaps as T, withIdHOC as S } from "@progress/kendo-react-common";
-const y = n.createContext(null), M = (l) => {
-  const { name: e, component: t, validator: i, children: o, onChange: r, ...d } = l, s = n.useContext(y), a = s ? s.id : "";
-  n.useEffect(
-    () => s ? s.registerField(e, i) : void 0,
-    [e, a, i]
-  );
-  const c = n.useCallback(
-    (u) => {
-      const g = u && (u.value !== void 0 ? u.value : u.target ? u.target.value : u.target);
-      s.onChange(e, { value: g }), r && r.call(void 0, u);
-    },
-    [e, a, r]
-  ), m = n.useCallback(
-    (u) => s.onChange(e, { value: u.target.value }),
-    [e, a]
-  ), f = n.useCallback(
-    () => s.onBlur(e),
-    [e, a]
-  ), v = n.useCallback(
-    () => s.onFocus(e),
-    [e, a]
-  );
-  if (!s)
-    return null;
-  const F = s.valueGetter(e);
-  return typeof t == "string" ? n.createElement(t, {
-    onChange: m,
-    onBlur: f,
-    onFocus: v,
-    value: F,
-    children: o,
-    ...d
-  }) : n.createElement(
-    t,
-    {
-      children: o,
-      ...d,
-      // input
-      onChange: c,
-      onBlur: f,
-      onFocus: v,
-      value: F,
-      // meta
-      validationMessage: s.errors[e],
-      touched: s.touched[e],
-      modified: s.modified[e],
-      visited: s.visited[e],
-      // Our `valid` implementation requires double submit to show html5 validation errors,
-      // however it's NOT recommended to show html5 validation errors at all as:
-      // - There is no standard way to change validation look and feel with CSS.
-      // - Look different in each browser / OS
-      // - You can have a page in one language but an error message displayed in another language (not localizable)
-      valid: !(s.errors[e] && s.touched[e]),
-      name: e
-    }
-  );
-};
-M.displayName = "KendoReactField";
-const I = {
-  name: "@progress/kendo-react-form",
-  productName: "KendoReact",
-  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1709631883,
-  version: "",
-  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
-}, P = 0;
-let C = class extends n.Component {
-  /**
-   * @hidden
-   */
-  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();
-        },
-        P
-      );
-    }, this.resetForm = () => {
-      this.values = _(this.props.initialValues), this._key = R(), this._touched = {}, this._visited = {}, this._modified = {}, this._validatorsByField = {}, this._fields = {}, this._submitted = !1, this.forceUpdate();
-    }, this.onReset = () => this.resetForm(), this.addField = (t) => {
-      this._fields[t] = !0;
-    }, this.onSubmit = (t) => {
-      const i = {}, o = this.fields;
-      t && (typeof t.preventDefault == "function" && t.preventDefault(), typeof t.stopPropagation == "function" && t.stopPropagation()), o.forEach((a) => {
-        i[a] = !0;
-      }), this.visited = { ...i }, this.touched = { ...i };
-      const r = this.values, d = this.isFormValid(this.errors), s = this.isFormModified(this.modified, o);
-      this.props.onSubmitClick && this.props.onSubmitClick.call(void 0, {
-        values: r,
-        isValid: d,
-        isModified: s,
-        event: t
-      }), d && (this.props.ignoreModified || s) && this.props.onSubmit && (this._submitted = !0, this.props.onSubmit.call(void 0, r, t)), this.forceUpdate();
-    }, this.onChange = (t, i) => {
-      const { value: o } = i;
-      this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.valueSetter(t, o), this.forceUpdate();
-    }, this.onFocus = (t, i) => {
-      this.visited[t] || (this.visited = { ...this.visited, [t]: !0 }, i || this.forceUpdate());
-    }, this.onBlur = (t, i) => {
-      this.touched[t] || (this.onFocus(t, i), this.touched = { ...this.touched, [t]: !0 }, i || this.forceUpdate());
-    }, this.onFieldRegister = (t, i) => {
-      this.addField(t);
-      const o = this.validatorsByField[t] || [], r = o.length;
-      return this.validatorsByField = { ...this.validatorsByField, [t]: [...o, i] }, this.accumulatedForceUpdate(), () => {
-        if (this._unmounted)
-          return;
-        const d = [...this.validatorsByField[t] || []], s = !!d[r];
-        d[r] = void 0, this.validatorsByField = { ...this.validatorsByField, [t]: d }, s && this.accumulatedForceUpdate();
-      };
-    }, this.isFormValid = (t) => !Object.keys(t).some((i) => !!t[i]), this.isFormModified = (t, i) => i.some((o) => t[o]), this.isFormHasNotTouched = (t, i) => i.some((o) => !t[o]), this.isFormTouched = (t, i) => i.some((o) => t[o]), this.isFormVisited = (t, i) => i.some((o) => t[o]), this.valueGetter = (t) => A(t)(this.values), this.valueSetter = (t, i) => U(t)(this.values, i), this.onArrayAction = (t) => {
-      this.addField(t), this.modified[t] || (this.modified = { ...this.modified, [t]: !0 }), this.onBlur(t, !0);
-    }, this.onInsert = (t, i) => {
-      this.onArrayAction(t);
-      const o = [...this.valueGetter(t) || []];
-      o.splice(i.index, 0, i.value), this.valueSetter(t, o), this.forceUpdate();
-    }, this.onUnshift = (t, i) => {
-      this.onInsert(t, {
-        value: i.value,
-        index: 0
-      });
-    }, this.onPush = (t, i) => {
-      this.onArrayAction(t);
-      const o = [...this.valueGetter(t) || [], i.value];
-      this.valueSetter(t, o), this.forceUpdate();
-    }, this.onPop = (t) => {
-      this.onArrayAction(t);
-      const i = [...this.valueGetter(t) || []], o = i.pop();
-      return this.valueSetter(t, i), this.forceUpdate(), o;
-    }, this.onRemove = (t, i) => {
-      this.onArrayAction(t);
-      const o = [...this.valueGetter(t) || []], r = o.splice(i.index, 1);
-      return this.valueSetter(t, o), this.forceUpdate(), r;
-    }, this.onReplace = (t, i) => {
-      this.onArrayAction(t);
-      const o = [...this.valueGetter(t) || []];
-      o.splice(i.index, 1, i.value), this.valueSetter(t, o), this.forceUpdate();
-    }, this.onMove = (t, i) => {
-      this.onArrayAction(t);
-      const o = [...this.valueGetter(t) || []], r = o[i.prevIndex];
-      o.splice(i.prevIndex, 1), o.splice(i.nextIndex, 0, r), this.valueSetter(t, o), this.forceUpdate();
-    }, B(I), this.values = _(e.initialValues);
-  }
-  /**
-   * @hidden
-   */
-  get touched() {
-    return this._touched;
-  }
-  /**
-   * @hidden
-   */
-  set touched(e) {
-    this._touched = e;
-  }
-  /**
-   * @hidden
-   */
-  get visited() {
-    return this._visited;
-  }
-  /**
-   * @hidden
-   */
-  set visited(e) {
-    this._visited = e;
-  }
-  /**
-   * @hidden
-   */
-  get modified() {
-    return this._modified;
-  }
-  /**
-   * @hidden
-   */
-  set modified(e) {
-    this._modified = e;
-  }
-  /**
-   * @hidden
-   */
-  get validatorsByField() {
-    return this._validatorsByField;
-  }
-  /**
-   * @hidden
-   */
-  set validatorsByField(e) {
-    this._validatorsByField = e;
-  }
-  /**
-   * @hidden
-   */
-  get values() {
-    return this._values;
-  }
-  /**
-   * @hidden
-   */
-  set values(e) {
-    this._values = e;
-  }
-  /**
-   * @hidden
-   */
-  get fields() {
-    return Object.keys(this._fields);
-  }
-  /**
-   * @hidden
-   */
-  get formErrors() {
-    if (this.props.validator)
-      return this.props.validator(this.values, this.valueGetter);
-  }
-  /**
-   * @hidden
-   */
-  get errors() {
-    const e = {}, t = this.fields, i = this.validatorsByField;
-    return t.forEach((r) => {
-      if (e[r] = "", i[r]) {
-        const d = [];
-        i[r].forEach((s) => {
-          Array.isArray(s) ? d.push(...s) : d.push(s);
-        }), d.find((s) => {
-          if (s) {
-            const a = s(this.valueGetter(r), this.valueGetter, { name: r });
-            if (a)
-              return e[r] = a, !0;
-          }
-          return !1;
-        });
-      }
-    }), this.formErrors && E(this.formErrors, e), e;
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    this._unmounted = !0, this._accumulatorTimeout && clearTimeout(this._accumulatorTimeout);
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const { render: e } = this.props, t = this.touched, i = this.visited, o = this.modified, r = this.fields, d = this.errors, s = this.isFormValid(d), a = this.isFormModified(o, r), c = this.isFormTouched(t, r), m = this.isFormVisited(i, r), v = this.isFormHasNotTouched(t, r) && !s || s && (this.props.ignoreModified || a);
-    return /* @__PURE__ */ n.createElement(
-      y.Provider,
-      {
-        key: this._key || this.props.id,
-        value: {
-          id: this.props.id,
-          valueGetter: this.valueGetter,
-          errors: d,
-          modified: o,
-          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: s,
-        modified: a,
-        touched: c,
-        visited: m,
-        submitted: this._submitted,
-        valueGetter: this.valueGetter,
-        errors: d,
-        allowSubmit: v,
-        onChange: this.onChange,
-        onSubmit: this.onSubmit,
-        onFormReset: this.resetForm
-      })
-    );
-  }
-};
-C.displayName = "KendoReactForm";
-C.propTypes = {
-  initialValues: p.any,
-  onSubmit: p.func,
-  onSubmitClick: p.func,
-  render: p.func.isRequired,
-  id: p.string
-};
-const x = (l) => {
-  const { name: e, component: t, validator: i, type: o, children: r, ...d } = l, s = n.useContext(y), a = s ? s.id : "";
-  n.useEffect(
-    () => s ? s.registerField(e, i) : void 0,
-    [e, a, i]
-  );
-  const c = n.useCallback(
-    (h) => s.onUnshift(e, h),
-    [e, a]
-  ), m = n.useCallback(
-    (h) => s.onPush(e, h),
-    [e, a]
-  ), f = n.useCallback(
-    (h) => s.onInsert(e, h),
-    [e, a]
-  ), v = n.useCallback(
-    () => s.onPop(e),
-    [e, a]
-  ), F = n.useCallback(
-    (h) => s.onRemove(e, h),
-    [e, a]
-  ), u = n.useCallback(
-    (h) => s.onReplace(e, h),
-    [e, a]
-  ), g = n.useCallback(
-    (h) => s.onMove(e, h),
-    [e, a]
-  );
-  if (!s)
-    return null;
-  const k = s.valueGetter(e);
-  return n.createElement(
-    t,
-    {
-      // input
-      value: k,
-      // meta
-      validationMessage: s.errors[e],
-      touched: s.touched[e],
-      modified: s.modified[e],
-      visited: s.visited[e],
-      // Our `valid` implementation requires double submit to show html5 validation errors,
-      // however it's NOT recommended to show html5 validation errors at all as:
-      // - There is no standard way to change validation look and feel with CSS.
-      // - Look different in each browser / OS
-      // - You can have a page in one language but an error message displayed in another language (not localizable)
-      valid: !(s.errors[e] && s.touched[e]),
-      onUnshift: c,
-      onPush: m,
-      onInsert: f,
-      onPop: v,
-      onRemove: F,
-      onReplace: u,
-      onMove: g,
-      children: r,
-      name: e,
-      ...d
-    }
-  );
-};
-x.displayName = "KendoReactFieldArray";
-const V = (l) => {
-  const e = b(
-    {
-      "k-form-field": !0,
-      "k-rtl": l.dir === "rtl"
-    },
-    l.className
-  );
-  return /* @__PURE__ */ n.createElement("div", { className: e, style: l.style }, l.children);
-};
-V.displayName = "KendoReactFieldWrapper";
-const w = n.forwardRef((l, e) => {
-  const t = {
-    size: "medium",
-    ...l
-  }, i = n.useRef(null), o = n.useRef(null);
-  n.useImperativeHandle(o, () => ({ element: i.current, props: t })), n.useImperativeHandle(e, () => o.current);
-  const r = n.useContext(y), { className: d, style: s, horizontal: a, size: c, ...m } = t, f = b(
-    {
-      "k-form": !0,
-      [`k-form-${T.sizeMap[c] || c}`]: c,
-      "k-form-horizontal": a === !0
-    },
-    d
-  );
-  return /* @__PURE__ */ n.createElement(
-    "form",
-    {
-      ref: i,
-      ...m,
-      id: r ? r.id : void 0,
-      style: l.style,
-      className: f,
-      onSubmit: r ? r.onSubmit : void 0
-    },
-    l.children
-  );
-});
-w.displayName = "KendoReactFormElement";
-const G = S(C);
-G.displayName = "KendoReactForm";
+import { Field as a } from "./Field.mjs";
+import { Form as o } from "./Form.mjs";
+import { FieldArray as l } from "./FieldArray.mjs";
+import { FieldWrapper as d } from "./FieldWrapper.mjs";
+import { FormElement as n } from "./FormElement.mjs";
+import { withIdHOC as r } from "@progress/kendo-react-common";
+const e = r(o);
+e.displayName = "KendoReactForm";
 export {
-  M as Field,
-  x as FieldArray,
-  V as FieldWrapper,
-  G as Form,
-  C as FormClassComponent,
-  w as FormElement
+  a as Field,
+  l as FieldArray,
+  d as FieldWrapper,
+  e as Form,
+  o as FormClassComponent,
+  n as FormElement
 };

package/package-metadata.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 e={name:"@progress/kendo-react-form",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+const e = {
+  name: "@progress/kendo-react-form",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1709714092,
+  version: "",
+  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
+};
+export {
+  e as packageMetadata
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-form",
-  "version": "7.2.4-develop.3",
+  "version": "7.2.4-develop.4",
   "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": "7.2.4-develop.3",
+    "@progress/kendo-react-common": "7.2.4-develop.4",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },

package/Field.d.ts

@@ -1,14 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import { FieldProps } from './interfaces/FieldProps';
-/**
- * Represents the Field component that is used inside the KendoReact Form component.
- * It uses `name` property to access field value and meta information from Form state.
- */
-export declare const Field: {
-    (props: FieldProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
-    displayName: string;
-};

package/FieldArray.d.ts

@@ -1,11 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import { FieldArrayProps } from './interfaces/FieldArrayProps';
-/**
- * Represents the FieldArray component that is used inside the KendoReact Form component.
- * It provides methods via render props for common array manipulations.
- */
-export declare const FieldArray: React.FunctionComponent<FieldArrayProps>;

package/FieldWrapper.d.ts

@@ -1,32 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-/**
- * Represents the props of the KendoReact FieldWrapper component.
- */
-export interface FieldWrapperProps {
-    /**
-     * @hidden
-     */
-    children: any;
-    /**
-     * The styles that are applied to the FieldWrapper.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets a class of the FieldWrapper DOM element.
-     */
-    className?: string;
-    /**
-     * Specifies the direction of the content.
-     */
-    dir?: string;
-}
-/**
- * Represents the KendoReact FieldWrapper component.
- * It's designed to wrap the field editor, Label, Hint and Error components.
- * The FieldWrapper supports only single editor inside it.
- */
-export declare const FieldWrapper: React.FunctionComponent<FieldWrapperProps>;