@progress/kendo-react-inputs 13.4.0-develop.4 → 14.0.0-develop.1

package/textarea/TextArea.mjs

@@ -5,160 +5,176 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as t from "react";
+import * as a from "react";
 import e from "prop-types";
-import { createPropsContext as be, usePropsContext as xe, useCustomComponent as B, useId as ve, useDir as ge, useIsomorphicLayoutEffect as he, dispatchEvent as C, getTabIndex as ye, classNames as N, kendoThemeMaps as H } from "@progress/kendo-react-common";
-const ke = be(), R = t.forwardRef(($, q) => {
-  const i = xe(ke, $), {
-    size: m = n.size,
-    rounded: p = n.rounded,
-    fillMode: z = n.fillMode,
-    autoFocus: D = n.autoFocus,
-    flow: b = n.flow,
-    prefix: L = null,
-    suffix: j = null,
-    ariaDescribedBy: _,
-    ariaLabelledBy: K,
-    autoSize: u,
-    className: G,
-    defaultValue: J,
+import { createPropsContext as ve, usePropsContext as ge, useCustomComponent as $, useId as he, useDir as ye, useIsomorphicLayoutEffect as ke, dispatchEvent as z, useKendoPaste as Ce, getTabIndex as ze, classNames as q, kendoThemeMaps as D } from "@progress/kendo-react-common";
+const Pe = ve(), K = a.forwardRef((L, j) => {
+  const u = ge(Pe, L), {
+    size: b = i.size,
+    rounded: p = i.rounded,
+    fillMode: P = i.fillMode,
+    autoFocus: _ = i.autoFocus,
+    flow: x = i.flow,
+    prefix: G = null,
+    suffix: J = null,
+    ariaDescribedBy: Q,
+    ariaLabelledBy: U,
+    autoSize: c,
+    className: W,
+    defaultValue: X,
     disabled: o,
-    readOnly: Q,
+    readOnly: Y,
     required: d,
-    rows: U,
-    id: W,
-    name: X,
-    placeholder: Y,
-    style: Z,
-    tabIndex: ee,
-    value: x,
-    valid: w,
-    validationMessage: S,
-    validityStyles: F,
-    onChange: v,
-    onFocus: g,
-    onBlur: h,
+    rows: Z,
+    id: w,
+    name: F,
+    placeholder: ee,
+    style: te,
+    tabIndex: ae,
+    value: v,
+    valid: S,
+    validationMessage: T,
+    validityStyles: V,
+    onChange: g,
+    onFocus: h,
+    onBlur: y,
     // Removed to support direct use in Form Field component
-    visited: Ce,
-    touched: ze,
-    modified: we,
-    resizable: l,
-    inputAttributes: te,
-    textareaStyle: I,
-    ...ae
-  } = i, a = t.useRef(null), O = t.useCallback(() => {
-    a.current && a.current.focus();
-  }, []), T = t.useCallback(() => {
-    a.current && a.current.blur();
-  }, []), [E, M] = t.useState(J), [oe, P] = t.useState(!1), [re, se] = B(L), [le, ne] = B(j), c = x !== void 0, f = c ? x : E, s = t.useCallback(() => ({
-    element: a,
-    focus: O,
-    blur: T,
+    visited: we,
+    touched: Fe,
+    modified: Se,
+    resizable: s,
+    inputAttributes: re,
+    textareaStyle: E,
+    ...oe
+  } = u, t = a.useRef(null), I = a.useCallback(() => {
+    t.current && t.current.focus();
+  }, []), O = a.useCallback(() => {
+    t.current && t.current.blur();
+  }, []), [B, M] = a.useState(X), [ne, A] = a.useState(!1), [se, le] = $(G), [ie, ue] = $(J), f = v !== void 0, m = f ? v : B, N = F || w, n = a.useCallback(() => ({
+    element: t,
+    focus: I,
+    blur: O,
     get value() {
-      return f;
+      return m;
     },
     get name() {
-      return a.current && a.current.name;
+      return t.current && t.current.name;
     }
-  }), [T, O, f]);
-  t.useImperativeHandle(q, s);
-  const [V, A] = t.useState("auto"), ie = ve(), ue = ge(a, i.dir), y = w !== void 0 ? w : d ? !!f : !0;
-  t.useEffect(() => {
-    a.current && a.current.setCustomValidity && a.current.setCustomValidity(y ? "" : S || "");
-  }, [y, S]), he(() => {
-    a.current && A(`${a.current.scrollHeight}px`);
-  }, [f]);
-  const de = t.useCallback(
+  }), [O, I, m]);
+  a.useImperativeHandle(j, n);
+  const [H, R] = a.useState("auto"), ce = he(), de = ye(t, u.dir), k = S !== void 0 ? S : d ? !!m : !0;
+  a.useEffect(() => {
+    t.current && t.current.setCustomValidity && t.current.setCustomValidity(k ? "" : T || "");
+  }, [k, T]), ke(() => {
+    t.current && R(`${t.current.scrollHeight}px`);
+  }, [m]);
+  const C = a.useCallback(
     (r) => {
-      const k = r.target.value;
-      A("auto"), !c && !o && M(k), v && !o && C(
-        v,
+      const l = r.target.value;
+      R("auto"), !f && !o && M(l), g && !o && z(
+        g,
         r,
         {
-          ...s(),
-          value: k
+          ...n(),
+          value: l
         },
-        { value: k }
+        { value: l }
       );
     },
-    [M, v, o, c]
-  ), ce = t.useCallback(
+    [M, g, o, f]
+  ), fe = a.useCallback(
     (r) => {
-      P(!0), g && !o && C(g, r, s(), void 0);
+      A(!0), h && !o && z(h, r, n(), void 0);
     },
-    [g, o, s]
-  ), fe = t.useCallback(
+    [h, o, n]
+  ), me = a.useCallback(
     (r) => {
-      P(!1), h && !o && C(h, r, s(), void 0);
+      A(!1), y && !o && z(y, r, n(), void 0);
     },
-    [h, o, s]
-  ), me = t.useMemo(() => {
+    [y, o, n]
+  ), be = a.useCallback(
+    (r) => {
+      t.current && (t.current.value = r);
+      const l = {
+        target: t.current,
+        currentTarget: t.current
+      };
+      C(l);
+    },
+    [C]
+  );
+  Ce(t, {
+    fieldName: N,
+    onValueChange: be,
+    enabled: !!N
+  });
+  const pe = a.useMemo(() => {
     let r = {};
-    return u ? r = {
+    return c ? r = {
       resize: "none",
       overflow: "hidden",
-      height: V
-    } : l && (r = { resize: l }), {
+      height: H
+    } : s && (r = { resize: s }), {
       ...r,
-      ...I
+      ...E
     };
-  }, [u, l, V, I]), pe = {
-    id: W || ie,
+  }, [c, s, H, E]), xe = {
+    id: w || ce,
     role: "textbox",
-    name: X,
-    className: N("k-input-inner", "!k-overflow-auto", {
-      "k-resize": !u && l !== "none",
-      "k-resize-none": u || l === "none",
-      "!k-flex-none": b === "vertical"
+    name: F,
+    className: q("k-input-inner", "!k-overflow-auto", {
+      "k-resize": !c && s !== "none",
+      "k-resize-none": c || s === "none",
+      "!k-flex-none": x === "vertical"
     }),
-    ref: a,
+    ref: t,
     disabled: o,
-    rows: U,
-    placeholder: Y,
-    readOnly: Q,
+    rows: Z,
+    placeholder: ee,
+    readOnly: Y,
     required: d,
-    tabIndex: ye(ee, o),
-    autoFocus: D,
-    style: me,
-    "aria-labelledby": K,
-    "aria-describedby": _,
+    tabIndex: ze(ae, o),
+    autoFocus: _,
+    style: pe,
+    "aria-labelledby": U,
+    "aria-describedby": Q,
     "aria-multiline": !0,
     "aria-disabled": o || void 0,
     "aria-required": d,
-    value: c ? x : E,
-    ...Object.assign({}, ae, te),
-    onChange: de,
-    onFocus: ce,
-    onBlur: fe
+    value: f ? v : B,
+    ...Object.assign({}, oe, re),
+    onChange: C,
+    onFocus: fe,
+    onBlur: me
   };
-  return /* @__PURE__ */ t.createElement(
+  return /* @__PURE__ */ a.createElement(
     "span",
     {
-      className: N(
+      className: q(
         "k-input",
         "k-textarea",
         {
-          [`k-input-${H.sizeMap[m] || m}`]: m,
-          [`k-input-${z}`]: z,
-          [`k-rounded-${H.roundedMap[p] || p}`]: p,
-          "k-invalid": !(y || F !== void 0 || F === !0),
+          [`k-input-${D.sizeMap[b] || b}`]: b,
+          [`k-input-${P}`]: P,
+          [`k-rounded-${D.roundedMap[p] || p}`]: p,
+          "k-invalid": !(k || V !== void 0 || V === !0),
           "k-required": d,
           "k-disabled": o,
-          "k-focus": oe,
-          "!k-flex-col": b === "vertical",
-          "!k-flex-row": b === "horizontal"
+          "k-focus": ne,
+          "!k-flex-col": x === "vertical",
+          "!k-flex-row": x === "horizontal"
         },
-        G
+        W
       ),
-      style: Z,
-      dir: ue
+      style: te,
+      dir: de
     },
-    i.prefix && /* @__PURE__ */ t.createElement(re, { ...se }),
-    /* @__PURE__ */ t.createElement("textarea", { ...pe }),
-    i.suffix && /* @__PURE__ */ t.createElement(le, { ...ne })
+    u.prefix && /* @__PURE__ */ a.createElement(se, { ...le }),
+    /* @__PURE__ */ a.createElement("textarea", { ...xe }),
+    u.suffix && /* @__PURE__ */ a.createElement(ie, { ...ue })
   );
 });
-R.propTypes = {
+K.propTypes = {
   ariaDescribedBy: e.string,
   ariaLabelledBy: e.string,
   autoSize: e.bool,
@@ -184,15 +200,15 @@ R.propTypes = {
   autoFocus: e.bool,
   flow: e.oneOf(["vertical", "horizontal"])
 };
-const n = {
+const i = {
   size: void 0,
   rounded: void 0,
   fillMode: void 0,
   autoFocus: !1,
   flow: "horizontal"
 };
-R.displayName = "KendoTextArea";
+K.displayName = "KendoTextArea";
 export {
-  R as TextArea,
-  ke as TextAreaPropsContext
+  K as TextArea,
+  Pe 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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),l=require("prop-types"),o=require("@progress/kendo-react-common");function D(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const t=D(A),m=t.forwardRef((e,r)=>{const n=t.useRef(null),a=t.useRef(null),i=t.useRef(void 0),v=o.useUnstyled(),y=v&&v.uTextBox,C=t.useCallback(()=>{var u;return i.current!==void 0?i.current:(u=n.current)==null?void 0:u.value},[]);t.useImperativeHandle(a,()=>({get element(){return n.current},get name(){return n.current&&n.current.name},get value(){return C()}})),t.useImperativeHandle(r,()=>a.current);const{size:c=s.size,fillMode:f=s.fillMode,rounded:d=s.rounded,autoFocus:h=s.autoFocus,inputAttributes:k,className:g,dir:_,style:p,prefix:B=s.prefix,suffix:M=s.suffix,valid:I,onFocus:F,onBlur:S,modified:$,touched:w,visited:H,validationMessage:G,autoSize:K,textareaStyle:U,...T}=e,[O]=o.useCustomComponent(B),[R]=o.useCustomComponent(M),[x,b]=t.useState(!1),q=u=>{b(!0)},z=u=>{b(!1)},N=t.useCallback(u=>{i.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:a.current}),i.current=void 0},[e.onChange]),{onFocus:j,onBlur:E}=o.useAsyncFocusBlur({onFocus:q,onBlur:z,onSyncFocus:F,onSyncBlur:S}),P=t.useMemo(()=>o.classNames("k-input","k-textbox",{[`k-input-${o.kendoThemeMaps.sizeMap[c]||c}`]:c,[`k-input-${f}`]:f,[`k-rounded-${o.kendoThemeMaps.roundedMap[d]||d}`]:d,"k-focus":x,"k-required":e.required,"k-disabled":e.disabled,"k-invalid":e.valid===!1},g),[g,f,x,e.disabled,e.required,e.valid,d,c]);return t.createElement("span",{style:p,dir:_,className:P,onFocus:j,onBlur:E},t.createElement(O,null),t.createElement("input",{ref:n,className:o.classNames(o.uTextBox.inputInner({c:y})),autoFocus:h,...Object.assign({},T,k),"aria-required":e.required,onChange:N}),t.createElement(R,null))}),s={prefix:e=>null,suffix:e=>null,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};m.propTypes={size:l.oneOf(["small","medium","large"]),rounded:l.oneOf(["small","medium","large","full","none"]),fillMode:l.oneOf(["solid","flat","outline"]),autoFocus:l.bool,inputAttributes:l.object};m.displayName="KendoReactTextBoxComponent";exports.TextBox=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react"),l=require("prop-types"),a=require("@progress/kendo-react-common");function $(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const n=$(K),v=n.forwardRef((e,s)=>{const t=n.useRef(null),o=n.useRef(null),c=n.useRef(void 0),g=a.useUnstyled(),y=g&&g.uTextBox,C=n.useCallback(()=>{var u;return c.current!==void 0?c.current:(u=t.current)==null?void 0:u.value},[]);n.useImperativeHandle(o,()=>({get element(){return t.current},get name(){return t.current&&t.current.name},get value(){return C()}})),n.useImperativeHandle(s,()=>o.current);const{size:i=r.size,fillMode:f=r.fillMode,rounded:d=r.rounded,autoFocus:k=r.autoFocus,inputAttributes:_,className:x,dir:B,style:M,prefix:F=r.prefix,suffix:S=r.suffix,valid:w,onFocus:T,onBlur:p,modified:H,touched:V,visited:G,validationMessage:U,autoSize:J,textareaStyle:L,...O}=e,[N]=a.useCustomComponent(F),[R]=a.useCustomComponent(S),[b,h]=n.useState(!1),q=u=>{h(!0)},z=u=>{h(!1)},m=n.useCallback(u=>{c.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:o.current}),c.current=void 0},[e.onChange]),E=e.name||e.id,P=n.useCallback(u=>{t.current&&(t.current.value=u);const I={target:t.current,currentTarget:t.current};m(I)},[m]);a.useKendoPaste(t,{fieldName:E,onValueChange:P});const{onFocus:j,onBlur:A}=a.useAsyncFocusBlur({onFocus:q,onBlur:z,onSyncFocus:T,onSyncBlur:p}),D=n.useMemo(()=>a.classNames("k-input","k-textbox",{[`k-input-${a.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-input-${f}`]:f,[`k-rounded-${a.kendoThemeMaps.roundedMap[d]||d}`]:d,"k-focus":b,"k-required":e.required,"k-disabled":e.disabled,"k-invalid":e.valid===!1},x),[x,f,b,e.disabled,e.required,e.valid,d,i]);return n.createElement("span",{style:M,dir:B,className:D,onFocus:j,onBlur:A},n.createElement(N,null),n.createElement("input",{ref:t,className:a.classNames(a.uTextBox.inputInner({c:y})),autoFocus:k,...Object.assign({},O,_),"aria-required":e.required,onChange:m}),n.createElement(R,null))}),r={prefix:e=>null,suffix:e=>null,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};v.propTypes={size:l.oneOf(["small","medium","large"]),rounded:l.oneOf(["small","medium","large","full","none"]),fillMode:l.oneOf(["solid","flat","outline"]),autoFocus:l.bool,inputAttributes:l.object};v.displayName="KendoReactTextBoxComponent";exports.TextBox=v;

package/textbox/Textbox.mjs

@@ -5,108 +5,123 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as e from "react";
-import a from "prop-types";
-import { useUnstyled as j, useCustomComponent as x, useAsyncFocusBlur as H, classNames as g, kendoThemeMaps as h, uTextBox as w } from "@progress/kendo-react-common";
-const _ = e.forwardRef((t, C) => {
-  const o = e.useRef(null), i = e.useRef(null), l = e.useRef(void 0), c = j(), k = c && c.uTextBox, y = e.useCallback(() => {
+import * as t from "react";
+import o from "prop-types";
+import { useUnstyled as V, useCustomComponent as g, useKendoPaste as w, useAsyncFocusBlur as D, classNames as h, kendoThemeMaps as C, uTextBox as G } from "@progress/kendo-react-common";
+const _ = t.forwardRef((e, k) => {
+  const u = t.useRef(null), i = t.useRef(null), l = t.useRef(void 0), f = V(), y = f && f.uTextBox, b = t.useCallback(() => {
     var n;
-    return l.current !== void 0 ? l.current : (n = o.current) == null ? void 0 : n.value;
+    return l.current !== void 0 ? l.current : (n = u.current) == null ? void 0 : n.value;
   }, []);
-  e.useImperativeHandle(i, () => ({
+  t.useImperativeHandle(i, () => ({
     get element() {
-      return o.current;
+      return u.current;
     },
     get name() {
-      return o.current && o.current.name;
+      return u.current && u.current.name;
     },
     get value() {
-      return y();
+      return b();
     }
-  })), e.useImperativeHandle(C, () => i.current);
+  })), t.useImperativeHandle(k, () => i.current);
   const {
-    size: s = u.size,
-    fillMode: d = u.fillMode,
-    rounded: r = u.rounded,
-    autoFocus: B = u.autoFocus,
+    size: r = a.size,
+    fillMode: c = a.fillMode,
+    rounded: s = a.rounded,
+    autoFocus: B = a.autoFocus,
     inputAttributes: F,
-    className: f,
-    dir: b,
-    style: M,
-    prefix: p = u.prefix,
-    suffix: S = u.suffix,
-    valid: D,
+    className: m,
+    dir: M,
+    style: E,
+    prefix: S = a.prefix,
+    suffix: T = a.suffix,
+    valid: U,
     onFocus: z,
-    onBlur: E,
+    onBlur: N,
     // Destruct to avoid warning when used inside a form field
-    modified: G,
-    touched: K,
-    visited: U,
-    validationMessage: J,
-    autoSize: L,
-    textareaStyle: Q,
+    modified: J,
+    touched: L,
+    visited: Q,
+    validationMessage: W,
+    autoSize: X,
+    textareaStyle: Y,
     ...R
-  } = t, [T] = x(p), [N] = x(S), [m, v] = e.useState(!1), q = (n) => {
-    v(!0);
+  } = e, [p] = g(S), [q] = g(T), [v, x] = t.useState(!1), P = (n) => {
+    x(!0);
   }, O = (n) => {
-    v(!1);
-  }, A = e.useCallback(
+    x(!1);
+  }, d = t.useCallback(
     (n) => {
-      l.current = n.target.value, t.onChange && t.onChange.call(void 0, {
+      l.current = n.target.value, e.onChange && e.onChange.call(void 0, {
         syntheticEvent: n,
         nativeEvent: n.nativeEvent,
         value: n.target.value,
         target: i.current
       }), l.current = void 0;
     },
-    [t.onChange]
-  ), { onFocus: I, onBlur: P } = H({
-    onFocus: q,
+    [e.onChange]
+  ), A = e.name || e.id, I = t.useCallback(
+    (n) => {
+      u.current && (u.current.value = n);
+      const H = {
+        target: u.current,
+        currentTarget: u.current
+      };
+      d(H);
+    },
+    [d]
+  );
+  w(u, {
+    fieldName: A,
+    onValueChange: I
+  });
+  const { onFocus: K, onBlur: $ } = D({
+    onFocus: P,
     onBlur: O,
     onSyncFocus: z,
-    onSyncBlur: E
-  }), $ = e.useMemo(
-    () => g(
+    onSyncBlur: N
+  }), j = t.useMemo(
+    () => h(
       "k-input",
       "k-textbox",
       {
-        [`k-input-${h.sizeMap[s] || s}`]: s,
-        [`k-input-${d}`]: d,
-        [`k-rounded-${h.roundedMap[r] || r}`]: r,
-        "k-focus": m,
-        "k-required": t.required,
-        "k-disabled": t.disabled,
-        "k-invalid": t.valid === !1
+        [`k-input-${C.sizeMap[r] || r}`]: r,
+        [`k-input-${c}`]: c,
+        [`k-rounded-${C.roundedMap[s] || s}`]: s,
+        "k-focus": v,
+        "k-required": e.required,
+        "k-disabled": e.disabled,
+        "k-invalid": e.valid === !1
       },
-      f
+      m
     ),
-    [f, d, m, t.disabled, t.required, t.valid, r, s]
+    [m, c, v, e.disabled, e.required, e.valid, s, r]
   );
-  return /* @__PURE__ */ e.createElement("span", { style: M, dir: b, className: $, onFocus: I, onBlur: P }, /* @__PURE__ */ e.createElement(T, null), /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ t.createElement("span", { style: E, dir: M, className: j, onFocus: K, onBlur: $ }, /* @__PURE__ */ t.createElement(p, null), /* @__PURE__ */ t.createElement(
     "input",
     {
-      ref: o,
-      className: g(w.inputInner({ c: k })),
+      ref: u,
+      className: h(G.inputInner({ c: y })),
       autoFocus: B,
       ...Object.assign({}, R, F),
-      "aria-required": t.required,
-      onChange: A
+      "aria-required": e.required,
+      onChange: d
     }
-  ), /* @__PURE__ */ e.createElement(N, null));
-}), u = {
-  prefix: (t) => null,
-  suffix: (t) => null,
+  ), /* @__PURE__ */ t.createElement(q, null));
+}), a = {
+  prefix: (e) => null,
+  suffix: (e) => null,
   size: void 0,
   rounded: void 0,
   fillMode: void 0,
   autoFocus: !1
 };
 _.propTypes = {
-  size: a.oneOf(["small", "medium", "large"]),
-  rounded: a.oneOf(["small", "medium", "large", "full", "none"]),
-  fillMode: a.oneOf(["solid", "flat", "outline"]),
-  autoFocus: a.bool,
-  inputAttributes: a.object
+  size: o.oneOf(["small", "medium", "large"]),
+  rounded: o.oneOf(["small", "medium", "large", "full", "none"]),
+  fillMode: o.oneOf(["solid", "flat", "outline"]),
+  autoFocus: o.bool,
+  inputAttributes: o.object
 };
 _.displayName = "KendoReactTextBoxComponent";
 export {