@progress/kendo-react-inputs 9.1.1-develop.4 → 9.2.0-develop.2

package/numerictextbox/NumericTextBox.mjs

@@ -8,19 +8,19 @@
 "use client";
 import * as n from "react";
 import t from "prop-types";
-import { useInternationalization as Qe, useLocalization as Xe } from "@progress/kendo-react-intl";
-import { createPropsContext as Ze, validatePackage as et, usePropsContext as tt, useId as nt, useCustomComponent as pe, dispatchEvent as Q, getActiveElement as be, useIsomorphicLayoutEffect as rt, classNames as at, kendoThemeMaps as ge, getTabIndex as lt } from "@progress/kendo-react-common";
-import { caretAltUpIcon as st, caretAltDownIcon as ot } from "@progress/kendo-svg-icons";
-import { FloatingLabel as ut } from "@progress/kendo-react-labels";
-import { packageMetadata as it } from "../package-metadata.mjs";
+import { useInternationalization as Xe, useLocalization as Ze } from "@progress/kendo-react-intl";
+import { createPropsContext as et, validatePackage as tt, usePropsContext as nt, useId as rt, useCustomComponent as pe, dispatchEvent as Q, getActiveElement as be, useIsomorphicLayoutEffect as at, classNames as lt, kendoThemeMaps as ge, getTabIndex as st } from "@progress/kendo-react-common";
+import { caretAltUpIcon as ut, caretAltDownIcon as ot } from "@progress/kendo-svg-icons";
+import { FloatingLabel as it } from "@progress/kendo-react-labels";
+import { packageMetadata as ct } from "../package-metadata.mjs";
 import { numericIncreaseValue as M, messages as T, numericDecreaseValue as z } from "../messages/index.mjs";
-import { getInitialState as ve, formatValue as q, getStateOrPropsValue as X, rangeValue as G, sanitizeNumber as ye, decreaseValue as Ve, increaseValue as ke } from "./utils/index.mjs";
+import { getInitialState as ve, formatValue as q, getStateOrPropsValue as X, rangeValue as A, sanitizeNumber as ye, decreaseValue as Ve, increaseValue as ke } from "./utils/index.mjs";
 import { Button as Ce } from "@progress/kendo-react-buttons";
-const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
+const dt = "Please enter a valid value!", mt = et(), Ee = n.forwardRef(
   (C, Se) => {
-    et(it);
-    const j = tt(
-      dt,
+    tt(ct);
+    const G = nt(
+      mt,
       C
     ), {
       className: xe,
@@ -35,7 +35,7 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
       min: c,
       max: d,
       dir: te,
-      name: A,
+      name: j,
       label: I,
       id: Pe,
       ariaDescribedBy: Ne,
@@ -45,47 +45,52 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
       readOnly: g,
       validationMessage: _,
       children: Be,
+      // Removed to support direct use in Form Field component
+      touched: ft,
+      visited: pt,
+      modified: bt,
       style: ne,
       inputStyle: Me,
       valid: H,
-      step: v = u.step,
-      spinners: Te = u.spinners,
-      disabled: o = u.disabled,
-      required: O = u.required,
-      validityStyles: re = u.validityStyles,
-      prefix: ze = u.prefix,
-      suffix: qe = u.suffix,
-      onChange: E = u.onChange,
-      onFocus: ae = u.onFocus,
-      onBlur: le = u.onBlur,
-      rangeOnEnter: se = u.rangeOnEnter,
-      size: K = u.size,
-      rounded: w = u.rounded,
-      fillMode: L = u.fillMode,
-      autoFocus: Ge = u.autoFocus,
-      ...oe
-    } = j, je = nt(), ue = Pe || je, s = Qe(), P = Xe(), a = n.useRef(null), N = n.useRef(), [Ae, S] = n.useState(!1), i = n.useRef(ve()), D = n.useRef(!1), U = n.useRef(), x = n.useRef(he), h = q(
-      i.current.focused && !o ? i.current.currentLooseValue : X(b, x.current),
+      step: v = o.step,
+      spinners: Te = o.spinners,
+      disabled: u = o.disabled,
+      required: O = o.required,
+      validityStyles: re = o.validityStyles,
+      prefix: ze = o.prefix,
+      suffix: qe = o.suffix,
+      onChange: E = o.onChange,
+      onFocus: ae = o.onFocus,
+      onBlur: le = o.onBlur,
+      rangeOnEnter: se = o.rangeOnEnter,
+      size: K = o.size,
+      rounded: w = o.rounded,
+      fillMode: L = o.fillMode,
+      autoFocus: Ae = o.autoFocus,
+      inputAttributes: Ge,
+      ...ue
+    } = G, je = rt(), oe = Pe || je, s = Xe(), P = Ze(), a = n.useRef(null), N = n.useRef(), [_e, S] = n.useState(!1), i = n.useRef(ve()), D = n.useRef(!1), U = n.useRef(), x = n.useRef(he), h = q(
+      i.current.focused && !u ? i.current.currentLooseValue : X(b, x.current),
       l,
       s
     );
     U.current = h;
-    const [_e] = pe(ze), [He] = pe(qe);
+    const [He] = pe(ze), [Ke] = pe(qe);
     n.useEffect(() => {
       a.current && a.current.setCustomValidity && a.current.setCustomValidity(
-        B().valid ? "" : _ || ct
+        B().valid ? "" : _ || dt
       );
     });
     const ie = n.useCallback(() => {
       a.current && a.current.focus();
-    }, []), R = n.useCallback(() => N.current !== void 0 ? N.current : X(b, x.current), [b]), ce = n.useCallback(() => A, [A]), F = n.useCallback(() => O, [O]), B = n.useCallback(() => {
+    }, []), R = n.useCallback(() => N.current !== void 0 ? N.current : X(b, x.current), [b]), ce = n.useCallback(() => j, [j]), F = n.useCallback(() => O, [O]), B = n.useCallback(() => {
       const r = _ !== void 0, e = R(), V = H !== void 0 ? H : !i.current.valueIsOutOfRange && (!F() || e != null);
       return {
         customError: r,
         valid: V,
         valueMissing: e == null
       };
-    }, [_, H, R, F]), $ = n.useCallback(() => re, [re]), de = n.useCallback(() => j, [j]), y = n.useCallback(() => {
+    }, [_, H, R, F]), $ = n.useCallback(() => re, [re]), de = n.useCallback(() => G, [G]), y = n.useCallback(() => {
       const r = {
         element: a.current,
         focus: ie
@@ -106,22 +111,22 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
       focused: i.current.focused
     }), [b]), p = n.useCallback(
       (r, e) => {
-        if (o)
+        if (u)
           return;
         N.current = e.eventValue, x.current = e.eventValue;
-        const V = q(G(e.eventValue, c, d), l, s), m = G(s.parseNumber(V, l), c, d);
+        const V = q(A(e.eventValue, c, d), l, s), m = A(s.parseNumber(V, l), c, d);
         m !== e.eventValue && (e.valueIsOutOfRange = !0, e.eventValue = m, x.current = m), b !== e.eventValue && Q(E, r, y(), {
           value: e.eventValue
         }), N.current = void 0, i.current = e, S((J) => !J);
       },
-      [b, E, o, S, y]
-    ), Ke = n.useCallback(
+      [b, E, u, S, y]
+    ), we = n.useCallback(
       (r) => {
         const e = f();
         D.current = !1, p(r, ye(e, l, s));
       },
       [l, E, s, p, f]
-    ), we = n.useCallback(
+    ), Ue = n.useCallback(
       (r) => {
         let e = f();
         const V = s.parseNumber(String(e.currentLooseValue), l);
@@ -140,7 +145,7 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
           case 13: {
             if (se === !1)
               return;
-            const m = q(G(V, c, d), l, s), k = G(s.parseNumber(m, l), c, d);
+            const m = q(A(V, c, d), l, s), k = A(s.parseNumber(m, l), c, d);
             e.eventValue = k, e.currentLooseValue = q(k, l, s), e.selectionStart = e.selectionEnd = e.currentLooseValue.length;
             break;
           }
@@ -155,11 +160,11 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
         r.preventDefault(), p(r, e);
       },
       [l, c, d, v, E, se, p, f]
-    ), Ue = n.useCallback(() => {
+    ), $e = n.useCallback(() => {
       D.current = !0;
     }, []), W = n.useCallback(
       (r) => {
-        if (g || o)
+        if (g || u)
           return;
         const e = f();
         ke(
@@ -172,10 +177,10 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
           s
         ), p(r, e);
       },
-      [l, c, d, v, E, g, o, p, f]
+      [l, c, d, v, E, g, u, p, f]
     ), Y = n.useCallback(
       (r) => {
-        if (g || o)
+        if (g || u)
           return;
         const e = f();
         Ve(
@@ -188,38 +193,38 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
           s
         ), p(r, e);
       },
-      [l, c, d, v, E, g, o, p, f]
-    ), $e = n.useCallback(
+      [l, c, d, v, E, g, u, p, f]
+    ), We = n.useCallback(
       (r) => {
         const e = be(document);
-        !document || e !== a.current || !a.current || g || o || (r.nativeEvent.deltaY < 0 && W(r), r.nativeEvent.deltaY > 0 && Y(r));
+        !document || e !== a.current || !a.current || g || u || (r.nativeEvent.deltaY < 0 && W(r), r.nativeEvent.deltaY > 0 && Y(r));
       },
-      [W, Y, o, g]
-    ), We = n.useCallback(
+      [W, Y, u, g]
+    ), Ye = n.useCallback(
       (r) => {
         i.current.currentLooseValue = U.current, i.current.focused = !0, Q(ae, r, y(), {}), S((e) => !e);
       },
       [ae, S, y]
-    ), Ye = n.useCallback(
+    ), Je = n.useCallback(
       (r) => {
         i.current = ve(), Q(le, r, y(), {}), S((e) => !e);
       },
       [le, S, y]
-    ), Je = n.useCallback((r) => {
+    ), Qe = n.useCallback((r) => {
       if (document && a.current) {
         const e = be(document);
         r.preventDefault(), e !== a.current && a.current.focus();
       }
     }, []);
-    rt(() => {
+    at(() => {
       a.current && a.current.type !== "number" && i.current.selectionStart !== void 0 && i.current.selectionEnd !== void 0 && (a.current.selectionStart = i.current.selectionStart, a.current.selectionEnd = i.current.selectionEnd, i.current.selectionStart = void 0, i.current.selectionEnd = void 0);
-    }, [Ae]);
+    }, [_e]);
     const me = !$() || B().valid, fe = /* @__PURE__ */ n.createElement(
       "span",
       {
         dir: te,
         style: I ? ne : { width: Z, ...ne },
-        className: at(
+        className: lt(
           "k-input",
           "k-numerictextbox",
           {
@@ -228,24 +233,24 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
             [`k-rounded-${ge.roundedMap[w] || w}`]: w,
             "k-invalid": !me,
             "k-required": O,
-            "k-disabled": o
+            "k-disabled": u
           },
           xe
         ),
-        "aria-disabled": o ? "true" : void 0,
-        ...I ? {} : oe
+        "aria-disabled": u ? "true" : void 0,
+        ...I ? {} : ue
       },
-      /* @__PURE__ */ n.createElement(_e, null),
+      /* @__PURE__ */ n.createElement(He, null),
       /* @__PURE__ */ n.createElement(
         "input",
         {
           role: "spinbutton",
           value: h === null ? "" : h,
-          tabIndex: lt(Ie, o),
+          tabIndex: st(Ie, u),
           accessKey: Oe,
-          disabled: o,
+          disabled: u,
           title: Le,
-          "aria-disabled": o ? "true" : void 0,
+          "aria-disabled": u ? "true" : void 0,
           "aria-valuemin": c,
           "aria-valuemax": d,
           "aria-label": Re,
@@ -256,31 +261,32 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
           spellCheck: !1,
           autoComplete: "off",
           autoCorrect: "off",
-          autoFocus: Ge,
+          autoFocus: Ae,
           type: Fe || "tel",
           className: "k-input-inner",
-          id: ue,
-          name: A,
+          id: oe,
+          name: j,
           readOnly: g,
           style: Me,
-          onChange: Ke,
-          onFocus: We,
-          onBlur: Ye,
-          onKeyDown: we,
-          onPaste: Ue,
-          onWheel: $e,
-          ref: a
+          onChange: we,
+          onFocus: Ye,
+          onBlur: Je,
+          onKeyDown: Ue,
+          onPaste: $e,
+          onWheel: We,
+          ref: a,
+          ...Ge
         }
       ),
-      /* @__PURE__ */ n.createElement(He, null),
+      /* @__PURE__ */ n.createElement(Ke, null),
       Be,
-      Te && /* @__PURE__ */ n.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: Je }, /* @__PURE__ */ n.createElement(
+      Te && /* @__PURE__ */ n.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: Qe }, /* @__PURE__ */ n.createElement(
         Ce,
         {
           tabIndex: -1,
           type: "button",
           icon: "caret-alt-up",
-          svgIcon: st,
+          svgIcon: ut,
           rounded: null,
           fillMode: L,
           className: "k-spinner-increase",
@@ -317,18 +323,18 @@ const ct = "Please enter a valid value!", dt = Ze(), Ee = n.forwardRef(
       ))
     );
     return I ? /* @__PURE__ */ n.createElement(
-      ut,
+      it,
       {
         label: I,
-        editorId: ue,
+        editorId: oe,
         editorValue: h === null ? "" : h,
         editorValid: me,
-        editorDisabled: o,
+        editorDisabled: u,
         editorPlaceholder: ee,
         children: fe,
         style: { width: Z },
         dir: te,
-        ...oe
+        ...ue
       }
     ) : fe;
   }
@@ -374,9 +380,10 @@ Ee.propTypes = {
   onBlur: t.func,
   size: t.oneOf([null, "small", "medium", "large"]),
   rounded: t.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: t.oneOf([null, "solid", "flat", "outline"])
+  fillMode: t.oneOf([null, "solid", "flat", "outline"]),
+  inputAttributes: t.object
 };
-const u = {
+const o = {
   prefix: (C) => null,
   suffix: (C) => null,
   step: 1,
@@ -399,5 +406,5 @@ const u = {
 Ee.displayName = "KendoNumericTextBox";
 export {
   Ee as NumericTextBox,
-  dt as NumericTextBoxPropsContext
+  mt as NumericTextBoxPropsContext
 };

package/package-metadata.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-inputs",
-  "version": "9.1.1-develop.4",
+  "version": "9.2.0-develop.2",
   "description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,13 +25,13 @@
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "9.1.1-develop.4",
-    "@progress/kendo-react-buttons": "9.1.1-develop.4",
-    "@progress/kendo-react-common": "9.1.1-develop.4",
-    "@progress/kendo-react-dialogs": "9.1.1-develop.4",
-    "@progress/kendo-react-intl": "9.1.1-develop.4",
-    "@progress/kendo-react-labels": "9.1.1-develop.4",
-    "@progress/kendo-react-popup": "9.1.1-develop.4",
+    "@progress/kendo-react-animation": "9.2.0-develop.2",
+    "@progress/kendo-react-buttons": "9.2.0-develop.2",
+    "@progress/kendo-react-common": "9.2.0-develop.2",
+    "@progress/kendo-react-dialogs": "9.2.0-develop.2",
+    "@progress/kendo-react-intl": "9.2.0-develop.2",
+    "@progress/kendo-react-labels": "9.2.0-develop.2",
+    "@progress/kendo-react-popup": "9.2.0-develop.2",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"

package/textarea/TextArea.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 se=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function le(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(u,o,l.get?l:{enumerable:!0,get:()=>s[o]})}}return u.default=s,Object.freeze(u)}const t=le(se),B=a.createPropsContext(),z=t.forwardRef((s,u)=>{const o=a.usePropsContext(B,s),{size:l=p.size,rounded:b=p.rounded,fillMode:O=p.fillMode,autoFocus:F=p.autoFocus,prefix:N=null,suffix:w=null,ariaDescribedBy:j,ariaLabelledBy:q,autoSize:T,className:R,defaultValue:D,disabled:n,readOnly:H,required:c,rows:$,id:L,name:_,placeholder:K,style:G,tabIndex:J,value:g,valid:P,validationMessage:M,validityStyles:S,onChange:x,onFocus:v,onBlur:y,visited:ie,touched:ue,modified:ce,resizable:h,...Q}=o,r=t.useRef(null),E=t.useCallback(()=>{r.current&&r.current.focus()},[]),[I,V]=t.useState(D),[U,W]=a.useCustomComponent(N),[X,Y]=a.useCustomComponent(w),d=g!==void 0,f=d?g:I,m=t.useCallback(()=>({element:r,focus:E,get value(){return f},get name(){return r.current&&r.current.name}}),[E,f]);t.useImperativeHandle(u,m);const[Z,A]=t.useState("auto"),ee=a.useId(),te=a.useDir(r,o.dir),C=P!==void 0?P:c?!!f:!0;t.useEffect(()=>{r.current&&r.current.setCustomValidity&&r.current.setCustomValidity(C?"":M||"")},[C,M]),a.useIsomorphicLayoutEffect(()=>{r.current&&A(`${r.current.scrollHeight}px`)},[f]);const ae=t.useCallback(i=>{const k=i.target.value;A("auto"),!d&&!n&&V(k),x&&!n&&a.dispatchEvent(x,i,{...m(),value:k},{value:k})},[V,x,n,d]),re=t.useCallback(i=>{v&&!n&&a.dispatchEvent(v,i,m(),void 0)},[v,n]),ne=t.useCallback(i=>{y&&!n&&a.dispatchEvent(y,i,m(),void 0)},[y,n]),oe={id:L||ee,role:"textbox",name:_,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!T&&h!=="none"}),ref:r,disabled:n,rows:$,placeholder:K,readOnly:H,required:c,tabIndex:a.getTabIndex(J,n),autoFocus:F,style:T?{resize:"none",overflow:"hidden",height:Z}:h?{resize:h}:{},"aria-labelledby":q,"aria-describedby":j,"aria-multiline":!0,"aria-disabled":n||void 0,"aria-required":c,value:d?g:I,...Q,onChange:ae,onFocus:re,onBlur:ne};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-input-${O}`]:O,[`k-rounded-${a.kendoThemeMaps.roundedMap[b]||b}`]:b,"k-invalid":!(C||S!==void 0||S===!0),"k-required":c,"k-disabled":n},R),style:G,dir:te},o.prefix&&t.createElement(U,{...W}),t.createElement("textarea",{...oe}),o.suffix&&t.createElement(X,{...Y}))});z.propTypes={ariaDescribedBy:e.string,ariaLabelledBy:e.string,autoSize:e.bool,className:e.string,defaultValue:e.string,dir:e.string,disabled:e.bool,readOnly:e.bool,rows:e.number,id:e.string,name:e.string,placeholder:e.string,style:e.object,tabIndex:e.number,value:e.oneOfType([e.string,e.arrayOf(e.string),e.number]),onChange:e.func,onFocus:e.func,onBlur:e.func,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"]),autoFocus:e.bool};const p={size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};z.displayName="KendoTextArea";exports.TextArea=z;exports.TextAreaPropsContext=B;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const le=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function ie(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(u,o,l.get?l:{enumerable:!0,get:()=>s[o]})}}return u.default=s,Object.freeze(u)}const t=ie(le),B=a.createPropsContext(),O=t.forwardRef((s,u)=>{const o=a.usePropsContext(B,s),{size:l=p.size,rounded:b=p.rounded,fillMode:z=p.fillMode,autoFocus:F=p.autoFocus,prefix:N=null,suffix:j=null,ariaDescribedBy:w,ariaLabelledBy:q,autoSize:T,className:R,defaultValue:D,disabled:r,readOnly:H,required:c,rows:$,id:L,name:_,placeholder:K,style:G,tabIndex:J,value:g,valid:P,validationMessage:M,validityStyles:S,onChange:x,onFocus:v,onBlur:y,visited:ue,touched:ce,modified:de,resizable:h,inputAttributes:Q,...U}=o,n=t.useRef(null),E=t.useCallback(()=>{n.current&&n.current.focus()},[]),[A,I]=t.useState(D),[W,X]=a.useCustomComponent(N),[Y,Z]=a.useCustomComponent(j),d=g!==void 0,f=d?g:A,m=t.useCallback(()=>({element:n,focus:E,get value(){return f},get name(){return n.current&&n.current.name}}),[E,f]);t.useImperativeHandle(u,m);const[ee,V]=t.useState("auto"),te=a.useId(),ae=a.useDir(n,o.dir),C=P!==void 0?P:c?!!f:!0;t.useEffect(()=>{n.current&&n.current.setCustomValidity&&n.current.setCustomValidity(C?"":M||"")},[C,M]),a.useIsomorphicLayoutEffect(()=>{n.current&&V(`${n.current.scrollHeight}px`)},[f]);const ne=t.useCallback(i=>{const k=i.target.value;V("auto"),!d&&!r&&I(k),x&&!r&&a.dispatchEvent(x,i,{...m(),value:k},{value:k})},[I,x,r,d]),re=t.useCallback(i=>{v&&!r&&a.dispatchEvent(v,i,m(),void 0)},[v,r]),oe=t.useCallback(i=>{y&&!r&&a.dispatchEvent(y,i,m(),void 0)},[y,r]),se={id:L||te,role:"textbox",name:_,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!T&&h!=="none"}),ref:n,disabled:r,rows:$,placeholder:K,readOnly:H,required:c,tabIndex:a.getTabIndex(J,r),autoFocus:F,style:T?{resize:"none",overflow:"hidden",height:ee}:h?{resize:h}:{},"aria-labelledby":q,"aria-describedby":w,"aria-multiline":!0,"aria-disabled":r||void 0,"aria-required":c,value:d?g:A,...Object.assign({},U,Q),onChange:ne,onFocus:re,onBlur:oe};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-input-${z}`]:z,[`k-rounded-${a.kendoThemeMaps.roundedMap[b]||b}`]:b,"k-invalid":!(C||S!==void 0||S===!0),"k-required":c,"k-disabled":r},R),style:G,dir:ae},o.prefix&&t.createElement(W,{...X}),t.createElement("textarea",{...se}),o.suffix&&t.createElement(Y,{...Z}))});O.propTypes={ariaDescribedBy:e.string,ariaLabelledBy:e.string,autoSize:e.bool,className:e.string,defaultValue:e.string,dir:e.string,disabled:e.bool,readOnly:e.bool,rows:e.number,id:e.string,name:e.string,placeholder:e.string,style:e.object,tabIndex:e.number,value:e.oneOfType([e.string,e.arrayOf(e.string),e.number]),onChange:e.func,onFocus:e.func,onBlur:e.func,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"]),autoFocus:e.bool};const p={size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};O.displayName="KendoTextArea";exports.TextArea=O;exports.TextAreaPropsContext=B;

package/textarea/TextArea.mjs

@@ -8,9 +8,9 @@
 "use client";
 import * as t from "react";
 import e from "prop-types";
-import { createPropsContext as ie, usePropsContext as ue, useCustomComponent as F, useId as de, useDir as ce, useIsomorphicLayoutEffect as fe, dispatchEvent as y, classNames as M, getTabIndex as me, kendoThemeMaps as O } from "@progress/kendo-react-common";
-const pe = ie(), S = t.forwardRef((w, A) => {
-  const n = ue(pe, w), {
+import { createPropsContext as ue, usePropsContext as de, useCustomComponent as E, useId as ce, useDir as fe, useIsomorphicLayoutEffect as me, dispatchEvent as y, classNames as F, getTabIndex as pe, kendoThemeMaps as M } from "@progress/kendo-react-common";
+const be = ue(), A = t.forwardRef((S, w) => {
+  const s = de(be, S), {
     size: c = d.size,
     rounded: f = d.rounded,
     fillMode: k = d.fillMode,
@@ -24,7 +24,7 @@ const pe = ie(), S = t.forwardRef((w, A) => {
     defaultValue: L,
     disabled: r,
     readOnly: j,
-    required: s,
+    required: n,
     rows: K,
     id: G,
     name: J,
@@ -34,39 +34,40 @@ const pe = ie(), S = t.forwardRef((w, A) => {
     value: m,
     valid: z,
     validationMessage: I,
-    validityStyles: P,
+    validityStyles: O,
     onChange: p,
     onFocus: b,
-    onBlur: x,
+    onBlur: g,
     // Removed to support direct use in Form Field component
-    visited: be,
+    visited: ge,
     touched: xe,
-    modified: ge,
-    resizable: g,
-    ...X
-  } = n, a = t.useRef(null), T = t.useCallback(() => {
+    modified: ve,
+    resizable: x,
+    inputAttributes: X,
+    ...Y
+  } = s, a = t.useRef(null), P = t.useCallback(() => {
     a.current && a.current.focus();
-  }, []), [V, B] = t.useState(L), [Y, Z] = F(H), [_, ee] = F(R), l = m !== void 0, i = l ? m : V, u = t.useCallback(() => ({
+  }, []), [T, V] = t.useState(L), [Z, _] = E(H), [ee, te] = E(R), l = m !== void 0, i = l ? m : T, u = t.useCallback(() => ({
     element: a,
-    focus: T,
+    focus: P,
     get value() {
       return i;
     },
     get name() {
       return a.current && a.current.name;
     }
-  }), [T, i]);
-  t.useImperativeHandle(A, u);
-  const [te, E] = t.useState("auto"), ae = de(), re = ce(a, n.dir), v = z !== void 0 ? z : s ? !!i : !0;
+  }), [P, i]);
+  t.useImperativeHandle(w, u);
+  const [ae, B] = t.useState("auto"), re = ce(), oe = fe(a, s.dir), v = z !== void 0 ? z : n ? !!i : !0;
   t.useEffect(() => {
     a.current && a.current.setCustomValidity && a.current.setCustomValidity(v ? "" : I || "");
-  }, [v, I]), fe(() => {
-    a.current && E(`${a.current.scrollHeight}px`);
+  }, [v, I]), me(() => {
+    a.current && B(`${a.current.scrollHeight}px`);
   }, [i]);
-  const oe = t.useCallback(
+  const se = t.useCallback(
     (o) => {
       const h = o.target.value;
-      E("auto"), !l && !r && B(h), p && !r && y(
+      B("auto"), !l && !r && V(h), p && !r && y(
         p,
         o,
         {
@@ -76,67 +77,67 @@ const pe = ie(), S = t.forwardRef((w, A) => {
         { value: h }
       );
     },
-    [B, p, r, l]
+    [V, p, r, l]
   ), ne = t.useCallback(
     (o) => {
       b && !r && y(b, o, u(), void 0);
     },
     [b, r]
-  ), se = t.useCallback(
+  ), le = t.useCallback(
     (o) => {
-      x && !r && y(x, o, u(), void 0);
+      g && !r && y(g, o, u(), void 0);
     },
-    [x, r]
-  ), le = {
-    id: G || ae,
+    [g, r]
+  ), ie = {
+    id: G || re,
     role: "textbox",
     name: J,
-    className: M("k-input-inner", "!k-overflow-auto", { "k-resize": !C && g !== "none" }),
+    className: F("k-input-inner", "!k-overflow-auto", { "k-resize": !C && x !== "none" }),
     ref: a,
     disabled: r,
     rows: K,
     placeholder: Q,
     readOnly: j,
-    required: s,
-    tabIndex: me(W, r),
+    required: n,
+    tabIndex: pe(W, r),
     autoFocus: N,
-    style: C ? { resize: "none", overflow: "hidden", height: te } : g ? { resize: g } : {},
+    style: C ? { resize: "none", overflow: "hidden", height: ae } : x ? { resize: x } : {},
     "aria-labelledby": q,
     "aria-describedby": $,
     "aria-multiline": !0,
     "aria-disabled": r || void 0,
-    "aria-required": s,
-    value: l ? m : V,
-    ...X,
-    onChange: oe,
+    "aria-required": n,
+    value: l ? m : T,
+    ...Object.assign({}, Y, X),
+    onChange: se,
     onFocus: ne,
-    onBlur: se
+    onBlur: le
   };
   return /* @__PURE__ */ t.createElement(
     "span",
     {
-      className: M(
+      className: F(
         "k-input",
         "k-textarea",
         {
-          [`k-input-${O.sizeMap[c] || c}`]: c,
+          [`k-input-${M.sizeMap[c] || c}`]: c,
           [`k-input-${k}`]: k,
-          [`k-rounded-${O.roundedMap[f] || f}`]: f,
-          "k-invalid": !(v || P !== void 0 || P === !0),
-          "k-required": s,
+          [`k-rounded-${M.roundedMap[f] || f}`]: f,
+          "k-invalid": !(v || O !== void 0 || O === !0),
+          "k-required": n,
           "k-disabled": r
         },
         D
       ),
       style: U,
-      dir: re
+      dir: oe
     },
-    n.prefix && /* @__PURE__ */ t.createElement(Y, { ...Z }),
-    /* @__PURE__ */ t.createElement("textarea", { ...le }),
-    n.suffix && /* @__PURE__ */ t.createElement(_, { ...ee })
+    s.prefix && /* @__PURE__ */ t.createElement(Z, { ..._ }),
+    /* @__PURE__ */ t.createElement("textarea", { ...ie }),
+    s.suffix && /* @__PURE__ */ t.createElement(ee, { ...te })
   );
 });
-S.propTypes = {
+A.propTypes = {
   ariaDescribedBy: e.string,
   ariaLabelledBy: e.string,
   autoSize: e.bool,
@@ -167,8 +168,8 @@ const d = {
   fillMode: "solid",
   autoFocus: !1
 };
-S.displayName = "KendoTextArea";
+A.displayName = "KendoTextArea";
 export {
-  S as TextArea,
-  pe as TextAreaPropsContext
+  A as TextArea,
+  be as TextAreaPropsContext
 };

package/textbox/Textbox.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 j=require("react"),c=require("prop-types"),a=require("@progress/kendo-react-common"),p=require("../package-metadata.js");function z(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const t=z(j),d=t.forwardRef((e,r)=>{a.validatePackage(p.packageMetadata);const n=t.useRef(null),l=t.useRef(null),s=t.useRef(),f=a.useUnstyled(),i=f&&f.uTextBox,b=t.useCallback(()=>{var u;return s.current!==void 0?s.current:(u=n.current)==null?void 0:u.value},[]);t.useImperativeHandle(l,()=>({get element(){return n.current},get name(){return n.current&&n.current.name},get value(){return b()}})),t.useImperativeHandle(r,()=>l.current);const{size:m=o.size,fillMode:g=o.fillMode,rounded:v=o.rounded,autoFocus:h=o.autoFocus,className:x,dir:B,style:F,prefix:T=o.prefix,suffix:_=o.suffix,valid:w,modified:D,touched:I,visited:H,...q}=e,[M]=a.useCustomComponent(T),[O]=a.useCustomComponent(_),[C,y]=t.useState(!1),R=u=>{y(!0)},N=u=>{y(!1)},S=t.useCallback(u=>{s.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:l.current}),s.current=void 0},[e.onChange]),{onFocus:k,onBlur:E}=a.useAsyncFocusBlur({onFocus:R,onBlur:N,onSyncFocus:e.onFocus,onSyncBlur:e.onBlur}),P=t.useMemo(()=>a.classNames(a.uTextBox.wrapper({c:i,rounded:v,fillMode:g,size:m,focused:C,required:e.required,disabled:e.disabled,invalid:e.valid===!1}),x),[x,g,C,e.disabled,e.required,e.valid,v,m,i]);return t.createElement("span",{style:F,dir:B,className:P,onFocus:k,onBlur:E},t.createElement(M,null),t.createElement("input",{ref:n,className:a.classNames(a.uTextBox.inputInner({c:i})),autoFocus:h,...q,"aria-required":e.required,onChange:S}),t.createElement(O,null))}),o={prefix:e=>null,suffix:e=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};d.propTypes={size:c.oneOf([null,"small","medium","large"]),rounded:c.oneOf([null,"small","medium","large","full"]),fillMode:c.oneOf([null,"solid","flat","outline"]),autoFocus:c.bool};d.displayName="KendoReactTextBoxComponent";exports.TextBox=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),s=require("prop-types"),a=require("@progress/kendo-react-common"),z=require("../package-metadata.js");function w(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const t=w(P),d=t.forwardRef((e,r)=>{a.validatePackage(z.packageMetadata);const n=t.useRef(null),l=t.useRef(null),c=t.useRef(),f=a.useUnstyled(),i=f&&f.uTextBox,y=t.useCallback(()=>{var u;return c.current!==void 0?c.current:(u=n.current)==null?void 0:u.value},[]);t.useImperativeHandle(l,()=>({get element(){return n.current},get name(){return n.current&&n.current.name},get value(){return y()}})),t.useImperativeHandle(r,()=>l.current);const{size:m=o.size,fillMode:g=o.fillMode,rounded:v=o.rounded,autoFocus:h=o.autoFocus,inputAttributes:B,className:x,dir:F,style:O,prefix:T=o.prefix,suffix:_=o.suffix,valid:A,modified:D,touched:I,visited:H,...q}=e,[M]=a.useCustomComponent(T),[R]=a.useCustomComponent(_),[b,C]=t.useState(!1),N=u=>{C(!0)},S=u=>{C(!1)},j=t.useCallback(u=>{c.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:l.current}),c.current=void 0},[e.onChange]),{onFocus:k,onBlur:p}=a.useAsyncFocusBlur({onFocus:N,onBlur:S,onSyncFocus:e.onFocus,onSyncBlur:e.onBlur}),E=t.useMemo(()=>a.classNames(a.uTextBox.wrapper({c:i,rounded:v,fillMode:g,size:m,focused:b,required:e.required,disabled:e.disabled,invalid:e.valid===!1}),x),[x,g,b,e.disabled,e.required,e.valid,v,m,i]);return t.createElement("span",{style:O,dir:F,className:E,onFocus:k,onBlur:p},t.createElement(M,null),t.createElement("input",{ref:n,className:a.classNames(a.uTextBox.inputInner({c:i})),autoFocus:h,...Object.assign({},q,B),"aria-required":e.required,onChange:j}),t.createElement(R,null))}),o={prefix:e=>null,suffix:e=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};d.propTypes={size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),fillMode:s.oneOf([null,"solid","flat","outline"]),autoFocus:s.bool,inputAttributes:s.object};d.displayName="KendoReactTextBoxComponent";exports.TextBox=d;