@progress/kendo-react-inputs 13.4.0-develop.3 → 13.4.0-develop.5

package/input/Input.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 Q=require("react"),a=require("prop-types"),u=require("@progress/kendo-react-common"),W=require("@progress/kendo-react-labels");function X(i){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const o in i)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(i,o);Object.defineProperty(s,o,c.get?c:{enumerable:!0,get:()=>i[o]})}}return s.default=i,Object.freeze(s)}const r=X(Q),m=r.forwardRef((i,s)=>{const c=r.useContext(O).call(void 0,i),[,R]=r.useReducer(t=>t,!0),n=u.applyDefaultProps(c,Y),{className:N,label:p,labelClassName:x,id:E,validationMessage:h,defaultValue:S,valid:C,unstyled:V,visited:Z,touched:$,modified:ee,autoFocus:w,ariaLabelledBy:D,ariaDescribedBy:q,validityStyles:I,style:P,ariaLabel:F,...U}=n,j=u.useUnstyled(),f=V||j;f&&f.uInput;const B=u.useId(),[T,_]=r.useState({value:S}),k=E||B,e=r.useRef(null),d=r.useRef(void 0),y=r.useRef(null),A=()=>{e.current&&e.current.focus()},b=()=>d.current!==void 0?d.current:n.value!==void 0?n.value:T.value,v=()=>{const t={badInput:e.current?e.current.validity.badInput:!1,patternMismatch:e.current?e.current.validity.patternMismatch:!1,rangeOverflow:e.current?e.current.validity.rangeOverflow:!1,rangeUnderflow:e.current?e.current.validity.rangeUnderflow:!1,stepMismatch:e.current?e.current.validity.stepMismatch:!1,tooLong:e.current?e.current.validity.tooLong:!1,typeMismatch:e.current?e.current.validity.typeMismatch:!1,valueMissing:e.current?e.current.validity.valueMissing:!1};return{...t,customError:h!==void 0,valid:C!==void 0?C:e.current?!G(t):!0}};r.useImperativeHandle(y,()=>({element:e.current,props:n,get value(){return b()},name:n.name,get validity(){return v()},focus:A})),r.useImperativeHandle(s,()=>y.current);const G=t=>{let l=!1;for(const M in t)t.hasOwnProperty(M)&&(l=l||!!t[M]);return l},g=!I||v().valid,H=u.classNames("k-input",{"k-invalid":!g,"k-disabled":n.disabled},N),z=()=>{e.current&&e.current.setCustomValidity&&(v().valid||!I?e.current.classList.remove("k-invalid"):e.current.classList.add("k-invalid"),e.current.setCustomValidity(v().valid?"":h||""))},K=t=>{_({value:t.target.value}),d.current=t.target.value,n.onChange&&n.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:y.current}),d.current=void 0},J=t=>{if(t.animationName==="autoFillStart"){const l=t.target.parentNode;l&&l.classList.contains("k-empty")&&l.classList.remove("k-empty")}};r.useEffect(()=>{R()},[]),r.useEffect(()=>{z()});const L=r.createElement("input",{"aria-labelledby":D,"aria-describedby":q,"aria-disabled":n.disabled||void 0,"aria-invalid":!g||void 0,"aria-label":F||void 0,...U,style:p?void 0:P,value:b(),id:k,autoFocus:w,className:H,onChange:K,onAnimationStart:J,ref:e});return p?r.createElement(W.FloatingLabel,{label:p,labelClassName:x,editorId:k,editorValue:String(b()),editorValid:g,editorDisabled:n.disabled,editorPlaceholder:n.placeholder,children:L,style:P,dir:n.dir,unstyled:f}):L}),O=u.createPropsContext(),Y={defaultValue:"",required:!1,validityStyles:!0,autoFocus:!1};m.displayName="KendoReactInput";m.propTypes={label:a.node,labelClassName:a.string,validationMessage:a.string,required:a.bool,validate:a.bool,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string,autoFocus:a.bool,value:a.oneOfType([a.string,a.number,a.array])};exports.Input=m;exports.InputPropsContext=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),r=require("prop-types"),i=require("@progress/kendo-react-common"),Z=require("@progress/kendo-react-labels");function $(l){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const u in l)if(u!=="default"){const c=Object.getOwnPropertyDescriptor(l,u);Object.defineProperty(o,u,c.get?c:{enumerable:!0,get:()=>l[u]})}}return o.default=l,Object.freeze(o)}const a=$(Y),P=a.forwardRef((l,o)=>{const c=a.useContext(R).call(void 0,l),[,S]=a.useReducer(t=>t,!0),n=i.applyDefaultProps(c,ee),{className:V,label:f,labelClassName:x,id:w,validationMessage:I,defaultValue:D,valid:k,unstyled:F,visited:te,touched:ae,modified:re,autoFocus:q,ariaLabelledBy:B,ariaDescribedBy:T,validityStyles:E,style:L,ariaLabel:U,...j}=n,K=i.useUnstyled(),y=F||K;y&&y.uInput;const _=i.useId(),[A,G]=a.useState({value:D}),M=w||_,e=a.useRef(null),d=a.useRef(void 0),g=a.useRef(null),N=n.name||n.id,H=()=>{e.current&&e.current.focus()},m=()=>d.current!==void 0?d.current:n.value!==void 0?n.value:A.value,v=()=>{const t={badInput:e.current?e.current.validity.badInput:!1,patternMismatch:e.current?e.current.validity.patternMismatch:!1,rangeOverflow:e.current?e.current.validity.rangeOverflow:!1,rangeUnderflow:e.current?e.current.validity.rangeUnderflow:!1,stepMismatch:e.current?e.current.validity.stepMismatch:!1,tooLong:e.current?e.current.validity.tooLong:!1,typeMismatch:e.current?e.current.validity.typeMismatch:!1,valueMissing:e.current?e.current.validity.valueMissing:!1};return{...t,customError:I!==void 0,valid:k!==void 0?k:e.current?!z(t):!0}};a.useImperativeHandle(g,()=>({element:e.current,props:n,get value(){return m()},name:n.name,get validity(){return v()},focus:H})),a.useImperativeHandle(o,()=>g.current);const z=t=>{let s=!1;for(const p in t)t.hasOwnProperty(p)&&(s=s||!!t[p]);return s},b=!E||v().valid,J=i.classNames("k-input",{"k-invalid":!b,"k-disabled":n.disabled},V),Q=()=>{e.current&&e.current.setCustomValidity&&(v().valid||!E?e.current.classList.remove("k-invalid"):e.current.classList.add("k-invalid"),e.current.setCustomValidity(v().valid?"":I||""))},{onChange:h}=n,C=a.useCallback(t=>{G({value:t.target.value}),d.current=t.target.value,h&&h({syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:g.current}),d.current=void 0},[h]),W=a.useCallback(t=>{const s=t!=null?String(t):"",p={target:e.current,currentTarget:e.current,nativeEvent:new Event("change")};e.current&&(e.current.value=s),C(p)},[C]);i.useKendoPaste(e,{fieldName:N||"",onValueChange:W,enabled:!!N});const X=t=>{if(t.animationName==="autoFillStart"){const s=t.target.parentNode;s&&s.classList.contains("k-empty")&&s.classList.remove("k-empty")}};a.useEffect(()=>{S()},[]),a.useEffect(()=>{Q()});const O=a.createElement("input",{"aria-labelledby":B,"aria-describedby":T,"aria-disabled":n.disabled||void 0,"aria-invalid":!b||void 0,"aria-label":U||void 0,...j,style:f?void 0:L,value:m(),id:M,autoFocus:q,className:J,onChange:C,onAnimationStart:X,ref:e});return f?a.createElement(Z.FloatingLabel,{label:f,labelClassName:x,editorId:M,editorValue:String(m()),editorValid:b,editorDisabled:n.disabled,editorPlaceholder:n.placeholder,children:O,style:L,dir:n.dir,unstyled:y}):O}),R=i.createPropsContext(),ee={defaultValue:"",required:!1,validityStyles:!0,autoFocus:!1};P.displayName="KendoReactInput";P.propTypes={label:r.node,labelClassName:r.string,validationMessage:r.string,required:r.bool,validate:r.bool,id:r.string,ariaLabelledBy:r.string,ariaDescribedBy:r.string,ariaLabel:r.string,autoFocus:r.bool,value:r.oneOfType([r.string,r.number,r.array])};exports.Input=P;exports.InputPropsContext=R;

package/input/Input.mjs

@@ -5,38 +5,38 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as r from "react";
-import a from "prop-types";
-import { createPropsContext as j, applyDefaultProps as z, useUnstyled as J, useId as Q, classNames as W } from "@progress/kendo-react-common";
-import { FloatingLabel as X } from "@progress/kendo-react-labels";
-const C = r.forwardRef((I, L) => {
-  const M = r.useContext(Y).call(void 0, I), [, P] = r.useReducer((t) => t, !0), n = z(M, Z), {
-    className: k,
-    label: o,
+import * as a from "react";
+import r from "prop-types";
+import { createPropsContext as Q, applyDefaultProps as W, useUnstyled as X, useId as Y, classNames as Z, useKendoPaste as $ } from "@progress/kendo-react-common";
+import { FloatingLabel as ee } from "@progress/kendo-react-labels";
+const E = a.forwardRef((k, L) => {
+  const N = a.useContext(te).call(void 0, k), [, M] = a.useReducer((t) => t, !0), n = W(N, ae), {
+    className: V,
+    label: u,
     labelClassName: x,
-    id: E,
-    validationMessage: p,
-    defaultValue: N,
-    valid: f,
-    unstyled: R,
+    id: R,
+    validationMessage: y,
+    defaultValue: F,
+    valid: g,
+    unstyled: w,
     // Removed to support direct use in Form Field component
-    visited: ee,
-    touched: te,
-    modified: ae,
-    autoFocus: V,
-    ariaLabelledBy: w,
-    ariaDescribedBy: F,
-    validityStyles: y,
-    style: m,
-    ariaLabel: U,
-    ...B
-  } = n, D = J(), u = R || D;
-  u && u.uInput;
-  const O = Q(), [S, T] = r.useState({
-    value: N
-  }), g = E || O, e = r.useRef(null), l = r.useRef(void 0), d = r.useRef(null), q = () => {
+    visited: ne,
+    touched: le,
+    modified: se,
+    autoFocus: B,
+    ariaLabelledBy: S,
+    ariaDescribedBy: U,
+    validityStyles: b,
+    style: h,
+    ariaLabel: D,
+    ...O
+  } = n, T = X(), c = w || T;
+  c && c.uInput;
+  const K = Y(), [q, A] = a.useState({
+    value: F
+  }), C = R || K, e = a.useRef(null), s = a.useRef(void 0), d = a.useRef(null), I = n.name || n.id, G = () => {
     e.current && e.current.focus();
-  }, c = () => l.current !== void 0 ? l.current : n.value !== void 0 ? n.value : S.value, s = () => {
+  }, v = () => s.current !== void 0 ? s.current : n.value !== void 0 ? n.value : q.value, i = () => {
     const t = {
       badInput: e.current ? e.current.validity.badInput : !1,
       patternMismatch: e.current ? e.current.validity.patternMismatch : !1,
@@ -49,112 +49,131 @@ const C = r.forwardRef((I, L) => {
     };
     return {
       ...t,
-      customError: p !== void 0,
-      valid: f !== void 0 ? f : e.current ? !A(t) : !0
+      customError: y !== void 0,
+      valid: g !== void 0 ? g : e.current ? !H(t) : !0
     };
   };
-  r.useImperativeHandle(d, () => ({
+  a.useImperativeHandle(d, () => ({
     element: e.current,
     props: n,
     get value() {
-      return c();
+      return v();
     },
     name: n.name,
     get validity() {
-      return s();
+      return i();
     },
-    focus: q
-  })), r.useImperativeHandle(L, () => d.current);
-  const A = (t) => {
-    let i = !1;
-    for (const h in t)
-      t.hasOwnProperty(h) && (i = i || !!t[h]);
-    return i;
-  }, v = !y || s().valid, G = W(
+    focus: G
+  })), a.useImperativeHandle(L, () => d.current);
+  const H = (t) => {
+    let l = !1;
+    for (const o in t)
+      t.hasOwnProperty(o) && (l = l || !!t[o]);
+    return l;
+  }, p = !b || i().valid, _ = Z(
     "k-input",
     {
-      "k-invalid": !v,
+      "k-invalid": !p,
       "k-disabled": n.disabled
     },
-    k
-  ), H = () => {
-    e.current && e.current.setCustomValidity && (s().valid || !y ? e.current.classList.remove("k-invalid") : e.current.classList.add("k-invalid"), e.current.setCustomValidity(s().valid ? "" : p || ""));
-  }, _ = (t) => {
-    T({
-      value: t.target.value
-    }), l.current = t.target.value, n.onChange && n.onChange.call(void 0, {
-      syntheticEvent: t,
-      nativeEvent: t.nativeEvent,
-      value: t.target.value,
-      target: d.current
-    }), l.current = void 0;
-  }, K = (t) => {
+    V
+  ), j = () => {
+    e.current && e.current.setCustomValidity && (i().valid || !b ? e.current.classList.remove("k-invalid") : e.current.classList.add("k-invalid"), e.current.setCustomValidity(i().valid ? "" : y || ""));
+  }, { onChange: f } = n, m = a.useCallback(
+    (t) => {
+      A({
+        value: t.target.value
+      }), s.current = t.target.value, f && f({
+        syntheticEvent: t,
+        nativeEvent: t.nativeEvent,
+        value: t.target.value,
+        target: d.current
+      }), s.current = void 0;
+    },
+    [f]
+  ), z = a.useCallback(
+    (t) => {
+      const l = t != null ? String(t) : "", o = {
+        target: e.current,
+        currentTarget: e.current,
+        nativeEvent: new Event("change")
+      };
+      e.current && (e.current.value = l), m(o);
+    },
+    [m]
+  );
+  $(e, {
+    fieldName: I || "",
+    onValueChange: z,
+    enabled: !!I
+  });
+  const J = (t) => {
     if (t.animationName === "autoFillStart") {
-      const i = t.target.parentNode;
-      i && i.classList.contains("k-empty") && i.classList.remove("k-empty");
+      const l = t.target.parentNode;
+      l && l.classList.contains("k-empty") && l.classList.remove("k-empty");
     }
   };
-  r.useEffect(() => {
-    P();
-  }, []), r.useEffect(() => {
-    H();
+  a.useEffect(() => {
+    M();
+  }, []), a.useEffect(() => {
+    j();
   });
-  const b = /* @__PURE__ */ r.createElement(
+  const P = /* @__PURE__ */ a.createElement(
     "input",
     {
-      "aria-labelledby": w,
-      "aria-describedby": F,
+      "aria-labelledby": S,
+      "aria-describedby": U,
       "aria-disabled": n.disabled || void 0,
-      "aria-invalid": !v || void 0,
-      "aria-label": U || void 0,
-      ...B,
-      style: o ? void 0 : m,
-      value: c(),
-      id: g,
-      autoFocus: V,
-      className: G,
-      onChange: _,
-      onAnimationStart: K,
+      "aria-invalid": !p || void 0,
+      "aria-label": D || void 0,
+      ...O,
+      style: u ? void 0 : h,
+      value: v(),
+      id: C,
+      autoFocus: B,
+      className: _,
+      onChange: m,
+      onAnimationStart: J,
       ref: e
     }
   );
-  return o ? /* @__PURE__ */ r.createElement(
-    X,
+  return u ? /* @__PURE__ */ a.createElement(
+    ee,
     {
-      label: o,
+      label: u,
       labelClassName: x,
-      editorId: g,
-      editorValue: String(c()),
-      editorValid: v,
+      editorId: C,
+      editorValue: String(v()),
+      editorValid: p,
       editorDisabled: n.disabled,
       editorPlaceholder: n.placeholder,
-      children: b,
-      style: m,
+      children: P,
+      style: h,
       dir: n.dir,
-      unstyled: u
+      unstyled: c
     }
-  ) : b;
-}), Y = j(), Z = {
+  ) : P;
+}), te = Q(), ae = {
   defaultValue: "",
   required: !1,
   validityStyles: !0,
   autoFocus: !1
 };
-C.displayName = "KendoReactInput";
-C.propTypes = {
-  label: a.node,
-  labelClassName: a.string,
-  validationMessage: a.string,
-  required: a.bool,
-  validate: a.bool,
-  id: a.string,
-  ariaLabelledBy: a.string,
-  ariaDescribedBy: a.string,
-  ariaLabel: a.string,
-  autoFocus: a.bool,
-  value: a.oneOfType([a.string, a.number, a.array])
+E.displayName = "KendoReactInput";
+E.propTypes = {
+  label: r.node,
+  labelClassName: r.string,
+  validationMessage: r.string,
+  required: r.bool,
+  validate: r.bool,
+  id: r.string,
+  ariaLabelledBy: r.string,
+  ariaDescribedBy: r.string,
+  ariaLabel: r.string,
+  autoFocus: r.bool,
+  value: r.oneOfType([r.string, r.number, r.array])
 };
 export {
-  C as Input,
-  Y as InputPropsContext
+  E as Input,
+  te as InputPropsContext
 };

package/maskedtextbox/MaskedTextBox.d.ts

@@ -58,7 +58,7 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
         validityStyles: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>;
-        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | undefined>;
+        rounded: PropTypes.Requireable<"small" | "none" | "medium" | "large" | "full" | undefined>;
         fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | undefined>;
         autoFocus: PropTypes.Requireable<boolean>;
         inputAttributes: PropTypes.Requireable<object>;
@@ -92,6 +92,7 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
     private _selection;
     private _input;
     private _valueDuringOnChange?;
+    private KendoPasteSubscription?;
     /**
      * @hidden
      */
@@ -151,6 +152,11 @@ export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedT
      * @hidden
      */
     componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    private readonly handleKendoPasteValue;
     /**
      * @hidden
      */

package/maskedtextbox/MaskedTextBox.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 O=require("react"),e=require("prop-types"),M=require("./masking.service.js"),h=require("./utils.js"),n=require("@progress/kendo-react-common"),E=require("@progress/kendo-react-labels");function V(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const p=V(O),l=class l extends p.Component{constructor(){super(...arguments),this.state={},this._inputId=`k_${this.props.id}`,this._service=new M.MaskingService,this._isPasted=!1,this._selection=[null,null],this._input=null,this.focus=()=>{this._input&&this._input.focus()},this.pasteHandler=t=>{const{selectionStart:s,selectionEnd:i}=t.target;i!==s&&(this._isPasted=!0,this._selection=[s||0,i||0])},this.onChangeHandler=t=>{const s=t.currentTarget,i=s.value,a=this._selection[0]||0,o=this._selection[1]||0;if(!this.props.mask){this._isPasted=!1,this._selection=[null,null],this.triggerOnChange(i,t);return}const r=this.value;let d;if(this._isPasted){this._isPasted=!1;const c=r.length-o,v=i.length-c;d=this._service.maskInRange(i.slice(a,v),r,a,o)}else d=this._service.maskInput(i,r,s.selectionStart||0);this._selection=[d.selection,d.selection],this.triggerOnChange(d.value,t)},this.focusHandler=t=>{this.state.focused||(this.setState({focused:!0}),this.props.onFocus&&this.props.onFocus.call(void 0,{target:this,syntheticEvent:t,nativeEvent:t.nativeEvent}))},this.blurHandler=t=>{this.state.focused&&(this.setState({focused:!1}),this.props.onBlur&&this.props.onBlur.call(void 0,{target:this,syntheticEvent:t,nativeEvent:t.nativeEvent}))},this.setValidity=()=>{this.element&&this.element.setCustomValidity(this.validity.valid?"":this.props.validationMessage||"")}}get element(){return this._input}get value(){return this._valueDuringOnChange!==void 0?this._valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value!==void 0?this.state.value:this.props.defaultValue!==void 0?this.props.defaultValue:""}get rawValue(){return this._service.rawValue(this.value)}get validity(){const t=this.value,s=this._service.validationValue(t),i=this.props.validationMessage!==void 0,a=this.props.valid!==void 0?this.props.valid:(!this.required||!!s)&&(!this.props.maskValidation||!this.props.prompt||t.indexOf(this.props.prompt)===-1);return{customError:i,valid:a,valueMissing:!s}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:l.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get name(){return this.props.name}componentDidUpdate(t,s){if(this.element&&this.state.focused&&s.focused){let[i,a]=this._selection;const o=t.selection,r=this.props.selection;(!o&&r||o&&r&&(o.start!==r.start||o.end!==r.end))&&(i=r.start,a=r.end),i!==null&&a!==null&&this.element.setSelectionRange(i,a)}h.maskingChanged(t,this.props)&&this.updateService(),this.setValidity()}componentDidMount(){this.updateService(),this.setValidity()}render(){const{size:t=l.defaultProps.size,fillMode:s=l.defaultProps.fillMode,rounded:i=l.defaultProps.rounded,autoFocus:a=l.defaultProps.autoFocus,prefix:o=l.defaultProps.prefix,suffix:r=l.defaultProps.suffix,inputAttributes:d,unstyled:c,className:v}=this.props,g=this.props.id||this._inputId,m=!this.validityStyles||this.validity.valid,b=this.props.style||{},C=c&&c.uMaskedTextBox,[_]=n.useCustomComponent(o),[P]=n.useCustomComponent(r),y=p.createElement("span",{dir:this.props.dir,className:n.classNames("k-input","k-maskedtextbox",{[`k-input-${n.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${s}`]:s,[`k-rounded-${n.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!m,"k-disabled":this.props.disabled},v),style:this.props.label?b:{width:this.props.width,...b}},p.createElement(_,null),p.createElement("input",{type:"text",autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",autoFocus:a,spellCheck:!1,className:n.classNames(n.uMaskedTextBox.inputInner({c:C})),value:this.value,id:g,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-placeholder":this.props.mask,"aria-required":this.props.required,name:this.props.name,tabIndex:n.getTabIndex(this.props.tabIndex,this.props.disabled,!0),accessKey:this.props.accessKey,title:this.props.title,disabled:this.props.disabled||void 0,readOnly:this.props.readonly||void 0,placeholder:this.props.placeholder,ref:S=>{this._input=S},onChange:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragStart:h.returnFalse,onDrop:h.returnFalse,...d}),p.createElement(P,null));return this.props.label?p.createElement(E.FloatingLabel,{label:this.props.label,editorId:g,editorValue:this.value,editorValid:m,editorDisabled:this.props.disabled,editorPlaceholder:this.props.placeholder,children:y,style:{width:this.props.width},dir:this.props.dir}):y}triggerOnChange(t,s){if(this.setState({value:t}),this.props.onChange){this._valueDuringOnChange=t;const i={syntheticEvent:s,nativeEvent:s.nativeEvent,selectionStart:this._selection[0],selectionEnd:this._selection[1],target:this,value:this.value};this.props.onChange.call(void 0,i),this._valueDuringOnChange=void 0}}updateService(t){const s=Object.assign({includeLiterals:this.props.includeLiterals,mask:this.props.mask,prompt:this.props.prompt,promptPlaceholder:this.props.promptPlaceholder,rules:this.rules},t);this._service.update(s)}get rules(){return Object.assign({},h.defaultRules,this.props.rules)}};l.displayName="MaskedTextBox",l.propTypes={value:e.string,defaultValue:e.string,placeholder:e.string,title:e.string,dir:e.string,id:e.string,style:e.object,className:e.string,prefix:e.any,suffix:e.any,ariaLabelledBy:e.string,ariaDescribedBy:e.string,width:e.oneOfType([e.string,e.number]),tabIndex:e.number,accessKey:e.string,disabled:e.bool,readonly:e.bool,prompt:e.string,promptPlaceholder:e.string,includeLiterals:e.bool,maskValidation:e.bool,mask:e.string,rules:function(t,s,i){const a=t.rules;return a!==void 0&&!Object.entries(a).some(r=>typeof r!="string"||!(a[r]instanceof RegExp))?new Error("Invalid prop `"+s+"` supplied to `"+i+"`. Validation failed."):null},selection:e.shape({start:e.number.isRequired,end:e.number.isRequired}),name:e.string,label:e.node,validationMessage:e.string,required:e.bool,valid:e.bool,validityStyles:e.bool,onChange:e.func,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},l.defaultProps={prompt:"_",promptPlaceholder:" ",includeLiterals:!1,maskValidation:!0,rules:h.defaultRules,validityStyles:!0,prefix:t=>null,suffix:t=>null,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let f=l;const k=n.createPropsContext(),x=n.withIdHOC(n.withPropsContext(k,n.withUnstyledHOC(f)));x.displayName="KendoReactMaskedTextBox";exports.MaskedTextBox=x;exports.MaskedTextBoxPropsContext=k;exports.MaskedTextBoxWithoutContext=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),t=require("prop-types"),E=require("./masking.service.js"),h=require("./utils.js"),a=require("@progress/kendo-react-common"),M=require("@progress/kendo-react-labels");function V(p){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const s in p)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(p,s);Object.defineProperty(e,s,i.get?i:{enumerable:!0,get:()=>p[s]})}}return e.default=p,Object.freeze(e)}const u=V(O),o=class o extends u.Component{constructor(){super(...arguments),this.state={},this._inputId=`k_${this.props.id}`,this._service=new E.MaskingService,this._isPasted=!1,this._selection=[null,null],this._input=null,this.focus=()=>{this._input&&this._input.focus()},this.handleKendoPasteValue=e=>{const s=e!=null?String(e):"",i={target:this._input,currentTarget:this._input,nativeEvent:new Event("change",{bubbles:!0})};this.triggerOnChange(s,i)},this.pasteHandler=e=>{const{selectionStart:s,selectionEnd:i}=e.target;i!==s&&(this._isPasted=!0,this._selection=[s||0,i||0])},this.onChangeHandler=e=>{const s=e.currentTarget,i=s.value,r=this._selection[0]||0,l=this._selection[1]||0;if(!this.props.mask){this._isPasted=!1,this._selection=[null,null],this.triggerOnChange(i,e);return}const n=this.value;let d;if(this._isPasted){this._isPasted=!1;const c=n.length-l,v=i.length-c;d=this._service.maskInRange(i.slice(r,v),n,r,l)}else d=this._service.maskInput(i,n,s.selectionStart||0);this._selection=[d.selection,d.selection],this.triggerOnChange(d.value,e)},this.focusHandler=e=>{this.state.focused||(this.setState({focused:!0}),this.props.onFocus&&this.props.onFocus.call(void 0,{target:this,syntheticEvent:e,nativeEvent:e.nativeEvent}))},this.blurHandler=e=>{this.state.focused&&(this.setState({focused:!1}),this.props.onBlur&&this.props.onBlur.call(void 0,{target:this,syntheticEvent:e,nativeEvent:e.nativeEvent}))},this.setValidity=()=>{this.element&&this.element.setCustomValidity(this.validity.valid?"":this.props.validationMessage||"")}}get element(){return this._input}get value(){return this._valueDuringOnChange!==void 0?this._valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value!==void 0?this.state.value:this.props.defaultValue!==void 0?this.props.defaultValue:""}get rawValue(){return this._service.rawValue(this.value)}get validity(){const e=this.value,s=this._service.validationValue(e),i=this.props.validationMessage!==void 0,r=this.props.valid!==void 0?this.props.valid:(!this.required||!!s)&&(!this.props.maskValidation||!this.props.prompt||e.indexOf(this.props.prompt)===-1);return{customError:i,valid:r,valueMissing:!s}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get name(){return this.props.name}componentDidUpdate(e,s){if(this.element&&this.state.focused&&s.focused){let[i,r]=this._selection;const l=e.selection,n=this.props.selection;(!l&&n||l&&n&&(l.start!==n.start||l.end!==n.end))&&(i=n.start,r=n.end),i!==null&&r!==null&&this.element.setSelectionRange(i,r)}h.maskingChanged(e,this.props)&&this.updateService(),this.setValidity()}componentDidMount(){this.updateService(),this.setValidity();const e=this.props.name||this.props.id;this.KendoPasteSubscription=a.subscribeToKendoPaste(this._input,{fieldName:e,onValueChange:s=>{this.handleKendoPasteValue(s)}})}componentWillUnmount(){var e;(e=this.KendoPasteSubscription)==null||e.unsubscribe()}render(){const{size:e=o.defaultProps.size,fillMode:s=o.defaultProps.fillMode,rounded:i=o.defaultProps.rounded,autoFocus:r=o.defaultProps.autoFocus,prefix:l=o.defaultProps.prefix,suffix:n=o.defaultProps.suffix,inputAttributes:d,unstyled:c,className:v}=this.props,g=this.props.id||this._inputId,m=!this.validityStyles||this.validity.valid,b=this.props.style||{},x=c&&c.uMaskedTextBox,[_]=a.useCustomComponent(l),[C]=a.useCustomComponent(n),y=u.createElement("span",{dir:this.props.dir,className:a.classNames("k-input","k-maskedtextbox",{[`k-input-${a.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${s}`]:s,[`k-rounded-${a.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!m,"k-disabled":this.props.disabled},v),style:this.props.label?b:{width:this.props.width,...b}},u.createElement(_,null),u.createElement("input",{type:"text",autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",autoFocus:r,spellCheck:!1,className:a.classNames(a.uMaskedTextBox.inputInner({c:x})),value:this.value,id:g,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-placeholder":this.props.mask,"aria-required":this.props.required,name:this.props.name,tabIndex:a.getTabIndex(this.props.tabIndex,this.props.disabled,!0),accessKey:this.props.accessKey,title:this.props.title,disabled:this.props.disabled||void 0,readOnly:this.props.readonly||void 0,placeholder:this.props.placeholder,ref:S=>{this._input=S},onChange:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragStart:h.returnFalse,onDrop:h.returnFalse,...d}),u.createElement(C,null));return this.props.label?u.createElement(M.FloatingLabel,{label:this.props.label,editorId:g,editorValue:this.value,editorValid:m,editorDisabled:this.props.disabled,editorPlaceholder:this.props.placeholder,children:y,style:{width:this.props.width},dir:this.props.dir}):y}triggerOnChange(e,s){if(this.setState({value:e}),this.props.onChange){this._valueDuringOnChange=e;const i={syntheticEvent:s,nativeEvent:s.nativeEvent,selectionStart:this._selection[0],selectionEnd:this._selection[1],target:this,value:this.value};this.props.onChange.call(void 0,i),this._valueDuringOnChange=void 0}}updateService(e){const s=Object.assign({includeLiterals:this.props.includeLiterals,mask:this.props.mask,prompt:this.props.prompt,promptPlaceholder:this.props.promptPlaceholder,rules:this.rules},e);this._service.update(s)}get rules(){return Object.assign({},h.defaultRules,this.props.rules)}};o.displayName="MaskedTextBox",o.propTypes={value:t.string,defaultValue:t.string,placeholder:t.string,title:t.string,dir:t.string,id:t.string,style:t.object,className:t.string,prefix:t.any,suffix:t.any,ariaLabelledBy:t.string,ariaDescribedBy:t.string,width:t.oneOfType([t.string,t.number]),tabIndex:t.number,accessKey:t.string,disabled:t.bool,readonly:t.bool,prompt:t.string,promptPlaceholder:t.string,includeLiterals:t.bool,maskValidation:t.bool,mask:t.string,rules:function(e,s,i){const r=e.rules;return r!==void 0&&!Object.entries(r).some(n=>typeof n!="string"||!(r[n]instanceof RegExp))?new Error("Invalid prop `"+s+"` supplied to `"+i+"`. Validation failed."):null},selection:t.shape({start:t.number.isRequired,end:t.number.isRequired}),name:t.string,label:t.node,validationMessage:t.string,required:t.bool,valid:t.bool,validityStyles:t.bool,onChange:t.func,size:t.oneOf(["small","medium","large"]),rounded:t.oneOf(["small","medium","large","full","none"]),fillMode:t.oneOf(["solid","flat","outline"]),autoFocus:t.bool,inputAttributes:t.object},o.defaultProps={prompt:"_",promptPlaceholder:" ",includeLiterals:!1,maskValidation:!0,rules:h.defaultRules,validityStyles:!0,prefix:e=>null,suffix:e=>null,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let f=o;const k=a.createPropsContext(),P=a.withIdHOC(a.withPropsContext(k,a.withUnstyledHOC(f)));P.displayName="KendoReactMaskedTextBox";exports.MaskedTextBox=P;exports.MaskedTextBoxPropsContext=k;exports.MaskedTextBoxWithoutContext=f;