@progress/kendo-react-inputs 8.1.1 → 8.2.0-develop.10

package/index.d.mts

@@ -169,6 +169,10 @@ export declare interface CheckboxProps extends ToggleBaseProps, FormComponentPro
      * Defaults to `0`.
      */
     tabIndex?: number;
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the Checkbox. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
     /**
      * The event handler that will be fired when the user edits the value.
      */
@@ -1319,6 +1323,10 @@ export declare interface InputProps extends Omit_2<React_2.InputHTMLAttributes<H
      * Defines a string value that labels an interactive element.
      */
     ariaLabel?: string;
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the Input. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
     /**
      * Triggered after value change.
      */
@@ -1463,6 +1471,7 @@ export declare class InputWithoutContext extends React_2.Component<InputProps, I
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
         ariaLabel: PropTypes.Requireable<string>;
+        autoFocus: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -1471,6 +1480,7 @@ export declare class InputWithoutContext extends React_2.Component<InputProps, I
         defaultValue: string;
         required: boolean;
         validityStyles: boolean;
+        autoFocus: boolean;
     };
     private _input;
     private get _inputId();
@@ -1796,6 +1806,10 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the MaskedTextBox. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
 }
 
 /**
@@ -1858,6 +1872,7 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
         size: PropTypes.Requireable<"small" | "large" | "medium" | null | undefined>;
         rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
         fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
+        autoFocus: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -1877,6 +1892,7 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
         size: "small" | "large" | "medium" | null | undefined;
         rounded: "small" | "large" | "medium" | "full" | null | undefined;
         fillMode: "flat" | "solid" | "outline" | null | undefined;
+        autoFocus: boolean;
     };
     /**
      * @hidden
@@ -2229,6 +2245,10 @@ export declare interface NumericTextBoxProps extends FormComponentProps, Omit<(R
      * Represents the input element `style` HTML attribute.
      */
     inputStyle?: React.CSSProperties;
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the NumericTextBox. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
 }
 
 /**
@@ -4187,6 +4207,10 @@ export declare interface TextAreaProps extends FormComponentProps, Omit_5<React.
      * ```
      */
     resizable?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the TextArea. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
 }
 
 /**
@@ -4273,6 +4297,10 @@ export declare interface TextBoxProps extends Omit<React_2.InputHTMLAttributes<H
      * Sets a custom suffix to the TextBox component.
      */
     suffix?: CustomComponent<any>;
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the TextBox. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
 }
 
 /**

package/index.d.ts

@@ -169,6 +169,10 @@ export declare interface CheckboxProps extends ToggleBaseProps, FormComponentPro
      * Defaults to `0`.
      */
     tabIndex?: number;
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the Checkbox. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
     /**
      * The event handler that will be fired when the user edits the value.
      */
@@ -1319,6 +1323,10 @@ export declare interface InputProps extends Omit_2<React_2.InputHTMLAttributes<H
      * Defines a string value that labels an interactive element.
      */
     ariaLabel?: string;
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the Input. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
     /**
      * Triggered after value change.
      */
@@ -1463,6 +1471,7 @@ export declare class InputWithoutContext extends React_2.Component<InputProps, I
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
         ariaLabel: PropTypes.Requireable<string>;
+        autoFocus: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -1471,6 +1480,7 @@ export declare class InputWithoutContext extends React_2.Component<InputProps, I
         defaultValue: string;
         required: boolean;
         validityStyles: boolean;
+        autoFocus: boolean;
     };
     private _input;
     private get _inputId();
@@ -1796,6 +1806,10 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the MaskedTextBox. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
 }
 
 /**
@@ -1858,6 +1872,7 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
         size: PropTypes.Requireable<"small" | "large" | "medium" | null | undefined>;
         rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
         fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
+        autoFocus: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -1877,6 +1892,7 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
         size: "small" | "large" | "medium" | null | undefined;
         rounded: "small" | "large" | "medium" | "full" | null | undefined;
         fillMode: "flat" | "solid" | "outline" | null | undefined;
+        autoFocus: boolean;
     };
     /**
      * @hidden
@@ -2229,6 +2245,10 @@ export declare interface NumericTextBoxProps extends FormComponentProps, Omit<(R
      * Represents the input element `style` HTML attribute.
      */
     inputStyle?: React.CSSProperties;
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the NumericTextBox. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
 }
 
 /**
@@ -4187,6 +4207,10 @@ export declare interface TextAreaProps extends FormComponentProps, Omit_5<React.
      * ```
      */
     resizable?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the TextArea. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
 }
 
 /**
@@ -4273,6 +4297,10 @@ export declare interface TextBoxProps extends Omit<React_2.InputHTMLAttributes<H
      * Sets a custom suffix to the TextBox component.
      */
     suffix?: CustomComponent<any>;
+    /**
+     * Represents the `autoFocus` HTML attribute that will be applied to the input element of the TextBox. (Defaults to `false`)
+     */
+    autoFocus?: boolean;
 }
 
 /**

package/input/Input.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 M=require("react"),a=require("prop-types"),n=require("@progress/kendo-react-common"),S=require("@progress/kendo-react-labels"),k=require("../package-metadata.js");function O(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const u=O(M),s=class s extends u.Component{constructor(e){super(e),this._input=null,this.focus=()=>{this._input&&this._input.focus()},this.isInvalid=t=>{let i=!1;for(let r in t)t.hasOwnProperty(r)&&(i=i||!!t[r]);return i},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&(this.validity.valid||!this.validityStyles?this._input.classList.remove("k-invalid"):this._input.classList.add("k-invalid"),this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||""))},this.handleChange=t=>{this.setState({value:t.target.value}),this.valueDuringOnChange=t.target.value,this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:this}),this.valueDuringOnChange=void 0},this.handleAutoFill=t=>{if(t.animationName==="autoFillStart"){let i=t.target.parentNode;i&&i.classList.contains("k-empty")&&i.classList.remove("k-empty")}},n.validatePackage(k.packageMetadata),this.state={value:this.props.defaultValue||s.defaultProps.defaultValue}}get _inputId(){return this.props.id}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}get name(){return this.props.name}get validity(){const e={badInput:this._input?this._input.validity.badInput:!1,patternMismatch:this._input?this._input.validity.patternMismatch:!1,rangeOverflow:this._input?this._input.validity.rangeOverflow:!1,rangeUnderflow:this._input?this._input.validity.rangeUnderflow:!1,stepMismatch:this._input?this._input.validity.stepMismatch:!1,tooLong:this._input?this._input.validity.tooLong:!1,typeMismatch:this._input?this._input.validity.typeMismatch:!1,valueMissing:this._input?this._input.validity.valueMissing:!1};return{...e,customError:this.props.validationMessage!==void 0,valid:this.props.valid!==void 0?this.props.valid:this._input?!this.isInvalid(e):!0}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:s.defaultProps.validityStyles}componentDidMount(){this.forceUpdate()}componentDidUpdate(){this.setValidity()}render(){const{className:e,label:t,labelClassName:i,id:r,validationMessage:P,defaultValue:I,valid:L,visited:D,touched:N,modified:V,ariaLabelledBy:f,ariaDescribedBy:m,validityStyles:w,style:p,ariaLabel:b,...d}=this.props,h=r||this._inputId,v=!this.validityStyles||this.validity.valid,_=n.classNames(e,"k-input k-input-md k-rounded-md k-input-solid"),c=u.createElement("input",{"aria-labelledby":f,"aria-describedby":m,"aria-disabled":this.props.disabled||void 0,"aria-invalid":!v||void 0,"aria-label":b||void 0,...d,style:t?void 0:p,value:this.value,id:h,className:_,onChange:this.handleChange,onAnimationStart:this.handleAutoFill,ref:C=>{this._input=C}});return t?u.createElement(S.FloatingLabel,{label:t,labelClassName:i,editorId:h,editorValue:String(this.value),editorValid:v,editorDisabled:d.disabled,editorPlaceholder:d.placeholder,children:c,style:p,dir:d.dir}):c}};s.displayName="Input",s.propTypes={label:a.string,labelClassName:a.string,validationMessage:a.string,required:a.bool,validate:a.bool,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string},s.defaultProps={defaultValue:"",required:!1,validityStyles:!0};let o=s;const g=n.createPropsContext(),y=n.withIdHOC(n.withPropsContext(g,o));y.displayName="KendoReactInput";exports.Input=y;exports.InputPropsContext=g;exports.InputWithoutContext=o;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),a=require("prop-types"),n=require("@progress/kendo-react-common"),k=require("@progress/kendo-react-labels"),O=require("../package-metadata.js");function P(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const u=P(S),s=class s extends u.Component{constructor(e){super(e),this._input=null,this.focus=()=>{this._input&&this._input.focus()},this.isInvalid=t=>{let i=!1;for(let r in t)t.hasOwnProperty(r)&&(i=i||!!t[r]);return i},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&(this.validity.valid||!this.validityStyles?this._input.classList.remove("k-invalid"):this._input.classList.add("k-invalid"),this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||""))},this.handleChange=t=>{this.setState({value:t.target.value}),this.valueDuringOnChange=t.target.value,this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:this}),this.valueDuringOnChange=void 0},this.handleAutoFill=t=>{if(t.animationName==="autoFillStart"){let i=t.target.parentNode;i&&i.classList.contains("k-empty")&&i.classList.remove("k-empty")}},n.validatePackage(O.packageMetadata),this.state={value:this.props.defaultValue||s.defaultProps.defaultValue}}get _inputId(){return this.props.id}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}get name(){return this.props.name}get validity(){const e={badInput:this._input?this._input.validity.badInput:!1,patternMismatch:this._input?this._input.validity.patternMismatch:!1,rangeOverflow:this._input?this._input.validity.rangeOverflow:!1,rangeUnderflow:this._input?this._input.validity.rangeUnderflow:!1,stepMismatch:this._input?this._input.validity.stepMismatch:!1,tooLong:this._input?this._input.validity.tooLong:!1,typeMismatch:this._input?this._input.validity.typeMismatch:!1,valueMissing:this._input?this._input.validity.valueMissing:!1};return{...e,customError:this.props.validationMessage!==void 0,valid:this.props.valid!==void 0?this.props.valid:this._input?!this.isInvalid(e):!0}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:s.defaultProps.validityStyles}componentDidMount(){this.forceUpdate()}componentDidUpdate(){this.setValidity()}render(){const{className:e,label:t,labelClassName:i,id:r,validationMessage:I,defaultValue:L,valid:D,visited:N,touched:V,modified:w,autoFocus:f,ariaLabelledBy:m,ariaDescribedBy:b,validityStyles:q,style:p,ariaLabel:_,...o}=this.props,h=r||this._inputId,c=!this.validityStyles||this.validity.valid,C=n.classNames(e,"k-input k-input-md k-rounded-md k-input-solid"),v=u.createElement("input",{"aria-labelledby":m,"aria-describedby":b,"aria-disabled":this.props.disabled||void 0,"aria-invalid":!c||void 0,"aria-label":_||void 0,...o,style:t?void 0:p,value:this.value,id:h,autoFocus:f,className:C,onChange:this.handleChange,onAnimationStart:this.handleAutoFill,ref:M=>{this._input=M}});return t?u.createElement(k.FloatingLabel,{label:t,labelClassName:i,editorId:h,editorValue:String(this.value),editorValid:c,editorDisabled:o.disabled,editorPlaceholder:o.placeholder,children:v,style:p,dir:o.dir}):v}};s.displayName="Input",s.propTypes={label:a.string,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},s.defaultProps={defaultValue:"",required:!1,validityStyles:!0,autoFocus:!1};let d=s;const g=n.createPropsContext(),y=n.withIdHOC(n.withPropsContext(g,d));y.displayName="KendoReactInput";exports.Input=y;exports.InputPropsContext=g;exports.InputWithoutContext=d;

package/input/Input.mjs

@@ -7,19 +7,19 @@
  */
 "use client";
 import * as r from "react";
-import a from "prop-types";
-import { validatePackage as f, classNames as b, createPropsContext as _, withIdHOC as C, withPropsContext as M } from "@progress/kendo-react-common";
-import { FloatingLabel as S } from "@progress/kendo-react-labels";
-import { packageMetadata as L } from "../package-metadata.mjs";
+import t from "prop-types";
+import { validatePackage as b, classNames as _, createPropsContext as C, withIdHOC as M, withPropsContext as S } from "@progress/kendo-react-common";
+import { FloatingLabel as L } from "@progress/kendo-react-labels";
+import { packageMetadata as V } from "../package-metadata.mjs";
 const e = class e extends r.Component {
   constructor(s) {
     super(s), this._input = null, this.focus = () => {
       this._input && this._input.focus();
     }, this.isInvalid = (i) => {
-      let t = !1;
+      let a = !1;
       for (let l in i)
-        i.hasOwnProperty(l) && (t = t || !!i[l]);
-      return t;
+        i.hasOwnProperty(l) && (a = a || !!i[l]);
+      return a;
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && (this.validity.valid || !this.validityStyles ? this._input.classList.remove("k-invalid") : this._input.classList.add("k-invalid"), this._input.setCustomValidity(
         this.validity.valid ? "" : this.props.validationMessage || ""
@@ -35,10 +35,10 @@ const e = class e extends r.Component {
       }), this.valueDuringOnChange = void 0;
     }, this.handleAutoFill = (i) => {
       if (i.animationName === "autoFillStart") {
-        let t = i.target.parentNode;
-        t && t.classList.contains("k-empty") && t.classList.remove("k-empty");
+        let a = i.target.parentNode;
+        a && a.classList.contains("k-empty") && a.classList.remove("k-empty");
       }
-    }, f(L), this.state = {
+    }, b(V), this.state = {
       value: this.props.defaultValue || e.defaultProps.defaultValue
     };
   }
@@ -108,46 +108,48 @@ const e = class e extends r.Component {
     const {
       className: s,
       label: i,
-      labelClassName: t,
+      labelClassName: a,
       id: l,
-      validationMessage: N,
-      defaultValue: P,
-      valid: D,
+      validationMessage: P,
+      defaultValue: D,
+      valid: I,
       // Removed to support direct use in Form Field component
-      visited: I,
-      touched: O,
-      modified: w,
-      ariaLabelledBy: v,
-      ariaDescribedBy: c,
+      visited: O,
+      touched: w,
+      modified: F,
+      autoFocus: v,
+      ariaLabelledBy: c,
+      ariaDescribedBy: y,
       validityStyles: E,
       style: o,
-      ariaLabel: y,
+      ariaLabel: g,
       ...n
-    } = this.props, p = l || this._inputId, u = !this.validityStyles || this.validity.valid, g = b(s, "k-input k-input-md k-rounded-md k-input-solid"), h = /* @__PURE__ */ r.createElement(
+    } = this.props, p = l || this._inputId, u = !this.validityStyles || this.validity.valid, m = _(s, "k-input k-input-md k-rounded-md k-input-solid"), h = /* @__PURE__ */ r.createElement(
       "input",
       {
-        "aria-labelledby": v,
-        "aria-describedby": c,
+        "aria-labelledby": c,
+        "aria-describedby": y,
         "aria-disabled": this.props.disabled || void 0,
         "aria-invalid": !u || void 0,
-        "aria-label": y || void 0,
+        "aria-label": g || void 0,
         ...n,
         style: i ? void 0 : o,
         value: this.value,
         id: p,
-        className: g,
+        autoFocus: v,
+        className: m,
         onChange: this.handleChange,
         onAnimationStart: this.handleAutoFill,
-        ref: (m) => {
-          this._input = m;
+        ref: (f) => {
+          this._input = f;
         }
       }
     );
     return i ? /* @__PURE__ */ r.createElement(
-      S,
+      L,
       {
         label: i,
-        labelClassName: t,
+        labelClassName: a,
         editorId: p,
         editorValue: String(this.value),
         editorValid: u,
@@ -161,25 +163,27 @@ const e = class e extends r.Component {
   }
 };
 e.displayName = "Input", e.propTypes = {
-  label: a.string,
-  labelClassName: a.string,
-  validationMessage: a.string,
-  required: a.bool,
-  validate: a.bool,
-  id: a.string,
-  ariaLabelledBy: a.string,
-  ariaDescribedBy: a.string,
-  ariaLabel: a.string
+  label: t.string,
+  labelClassName: t.string,
+  validationMessage: t.string,
+  required: t.bool,
+  validate: t.bool,
+  id: t.string,
+  ariaLabelledBy: t.string,
+  ariaDescribedBy: t.string,
+  ariaLabel: t.string,
+  autoFocus: t.bool
 }, e.defaultProps = {
   defaultValue: "",
   required: !1,
-  validityStyles: !0
+  validityStyles: !0,
+  autoFocus: !1
 };
 let d = e;
-const V = _(), k = C(M(V, d));
-k.displayName = "KendoReactInput";
+const k = C(), N = M(S(k, d));
+N.displayName = "KendoReactInput";
 export {
-  k as Input,
-  V as InputPropsContext,
+  N as Input,
+  k as InputPropsContext,
   d as InputWithoutContext
 };

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

package/maskedtextbox/MaskedTextBox.mjs

@@ -6,35 +6,35 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as p from "react";
+import * as d from "react";
 import e from "prop-types";
-import { MaskingService as k } from "./masking.service.mjs";
-import { defaultRules as v, maskingChanged as P, returnFalse as m } from "./utils.mjs";
-import { validatePackage as _, useCustomComponent as g, classNames as C, kendoThemeMaps as y, getTabIndex as S, createPropsContext as x, withIdHOC as E, withPropsContext as V } from "@progress/kendo-react-common";
-import { FloatingLabel as O } from "@progress/kendo-react-labels";
-import { packageMetadata as M } from "../package-metadata.mjs";
-const l = class l extends p.Component {
+import { MaskingService as P } from "./masking.service.mjs";
+import { defaultRules as v, maskingChanged as _, returnFalse as m } from "./utils.mjs";
+import { validatePackage as C, useCustomComponent as g, classNames as S, kendoThemeMaps as y, getTabIndex as x, createPropsContext as E, withIdHOC as V, withPropsContext as O } from "@progress/kendo-react-common";
+import { FloatingLabel as M } from "@progress/kendo-react-labels";
+import { packageMetadata as I } from "../package-metadata.mjs";
+const l = class l extends d.Component {
   constructor(s) {
-    super(s), this.state = {}, this._inputId = `k-${this.props.id}`, this._service = new k(), this._isPasted = !1, this._selection = [null, null], this._input = null, this.focus = () => {
+    super(s), this.state = {}, this._inputId = `k-${this.props.id}`, this._service = new P(), this._isPasted = !1, this._selection = [null, null], this._input = null, this.focus = () => {
       this._input && this._input.focus();
     }, this.pasteHandler = (t) => {
-      const { selectionStart: r, selectionEnd: i } = t.target;
-      i !== r && (this._isPasted = !0, this._selection = [r || 0, i || 0]);
+      const { selectionStart: i, selectionEnd: r } = t.target;
+      r !== i && (this._isPasted = !0, this._selection = [i || 0, r || 0]);
     }, this.onChangeHandler = (t) => {
-      const r = t.currentTarget, i = r.value, n = this._selection[0] || 0, a = this._selection[1] || 0;
+      const i = t.currentTarget, r = i.value, o = this._selection[0] || 0, a = this._selection[1] || 0;
       if (!this.props.mask) {
-        this._isPasted = !1, this._selection = [null, null], this.triggerOnChange(i, t);
+        this._isPasted = !1, this._selection = [null, null], this.triggerOnChange(r, t);
         return;
       }
-      const d = this.value;
-      let o;
+      const p = this.value;
+      let n;
       if (this._isPasted) {
         this._isPasted = !1;
-        const u = d.length - a, h = i.length - u;
-        o = this._service.maskInRange(i.slice(n, h), d, n, a);
+        const u = p.length - a, h = r.length - u;
+        n = this._service.maskInRange(r.slice(o, h), p, o, a);
       } else
-        o = this._service.maskInput(i, d, r.selectionStart || 0);
-      this._selection = [o.selection, o.selection], this.triggerOnChange(o.value, t);
+        n = this._service.maskInput(r, p, i.selectionStart || 0);
+      this._selection = [n.selection, n.selection], this.triggerOnChange(n.value, t);
     }, this.focusHandler = (t) => {
       this.state.focused || (this.setState({ focused: !0 }), this.props.onFocus && this.props.onFocus.call(void 0, {
         target: this,
@@ -51,7 +51,7 @@ const l = class l extends p.Component {
       this.element && this.element.setCustomValidity(
         this.validity.valid ? "" : this.props.validationMessage || ""
       );
-    }, _(M);
+    }, C(I);
   }
   /**
    * Gets the element of the MaskedTextBox.
@@ -103,10 +103,10 @@ const l = class l extends p.Component {
    * Represents the validity state into which the MaskedTextBox is set.
    */
   get validity() {
-    const s = this.value, t = this._service.validationValue(s), r = this.props.validationMessage !== void 0, i = this.props.valid !== void 0 ? this.props.valid : (!this.required || !!t) && (!this.props.maskValidation || !this.props.prompt || s.indexOf(this.props.prompt) === -1);
+    const s = this.value, t = this._service.validationValue(s), i = this.props.validationMessage !== void 0, r = this.props.valid !== void 0 ? this.props.valid : (!this.required || !!t) && (!this.props.maskValidation || !this.props.prompt || s.indexOf(this.props.prompt) === -1);
     return {
-      customError: r,
-      valid: i,
+      customError: i,
+      valid: r,
       valueMissing: !t
     };
   }
@@ -133,11 +133,11 @@ const l = class l extends p.Component {
    */
   componentDidUpdate(s, t) {
     if (this.element && this.state.focused && t.focused) {
-      let [r, i] = this._selection;
-      const n = s.selection, a = this.props.selection;
-      (!n && a || n && a && (n.start !== a.start || n.end !== a.end)) && (r = a.start, i = a.end), r !== null && i !== null && this.element.setSelectionRange(r, i);
+      let [i, r] = this._selection;
+      const o = s.selection, a = this.props.selection;
+      (!o && a || o && a && (o.start !== a.start || o.end !== a.end)) && (i = a.start, r = a.end), i !== null && r !== null && this.element.setSelectionRange(i, r);
     }
-    P(s, this.props) && this.updateService(), this.setValidity();
+    _(s, this.props) && this.updateService(), this.setValidity();
   }
   /**
    * @hidden
@@ -152,51 +152,53 @@ const l = class l extends p.Component {
     const {
       size: s = l.defaultProps.size,
       fillMode: t = l.defaultProps.fillMode,
-      rounded: r = l.defaultProps.rounded
-    } = this.props, i = this.props.id || this._inputId, n = !this.validityStyles || this.validity.valid, a = this.props.style || {}, {
-      prefix: d = l.defaultProps.prefix,
-      suffix: o = l.defaultProps.suffix
-    } = this.props, [u] = g(d), [h] = g(o), f = /* @__PURE__ */ p.createElement(
+      rounded: i = l.defaultProps.rounded,
+      autoFocus: r = l.defaultProps.autoFocus
+    } = this.props, o = this.props.id || this._inputId, a = !this.validityStyles || this.validity.valid, p = this.props.style || {}, {
+      prefix: n = l.defaultProps.prefix,
+      suffix: u = l.defaultProps.suffix
+    } = this.props, [h] = g(n), [b] = g(u), f = /* @__PURE__ */ d.createElement(
       "span",
       {
         dir: this.props.dir,
-        className: C(
+        className: S(
           "k-maskedtextbox k-input",
           {
             [`k-input-${y.sizeMap[s] || s}`]: s,
             [`k-input-${t}`]: t,
-            [`k-rounded-${y.roundedMap[r] || r}`]: r,
-            "k-invalid": !n,
+            [`k-rounded-${y.roundedMap[i] || i}`]: i,
+            "k-invalid": !a,
             "k-required": this.required,
             "k-disabled": this.props.disabled
           },
           this.props.className
         ),
-        style: this.props.label ? a : { width: this.props.width, ...a }
+        style: this.props.label ? p : { width: this.props.width, ...p }
       },
-      /* @__PURE__ */ p.createElement(u, null),
-      /* @__PURE__ */ p.createElement(
+      /* @__PURE__ */ d.createElement(h, null),
+      /* @__PURE__ */ d.createElement(
         "input",
         {
           type: "text",
           autoComplete: "off",
           autoCorrect: "off",
           autoCapitalize: "off",
+          autoFocus: r,
           spellCheck: !1,
           className: "k-input-inner",
           value: this.value,
-          id: i,
+          id: o,
           "aria-labelledby": this.props.ariaLabelledBy,
           "aria-describedby": this.props.ariaDescribedBy,
           "aria-placeholder": this.props.mask,
           name: this.props.name,
-          tabIndex: S(this.props.tabIndex, this.props.disabled, !0),
+          tabIndex: x(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: (b) => this._input = b,
+          ref: (k) => this._input = k,
           onChange: this.onChangeHandler,
           onPaste: this.pasteHandler,
           onFocus: this.focusHandler,
@@ -205,15 +207,15 @@ const l = class l extends p.Component {
           onDrop: m
         }
       ),
-      /* @__PURE__ */ p.createElement(h, null)
+      /* @__PURE__ */ d.createElement(b, null)
     );
-    return this.props.label ? /* @__PURE__ */ p.createElement(
-      O,
+    return this.props.label ? /* @__PURE__ */ d.createElement(
+      M,
       {
         label: this.props.label,
-        editorId: i,
+        editorId: o,
         editorValue: this.value,
-        editorValid: n,
+        editorValid: a,
         editorDisabled: this.props.disabled,
         editorPlaceholder: this.props.placeholder,
         children: f,
@@ -227,7 +229,7 @@ const l = class l extends p.Component {
       value: s
     }), this.props.onChange) {
       this._valueDuringOnChange = s;
-      const r = {
+      const i = {
         syntheticEvent: t,
         nativeEvent: t.nativeEvent,
         selectionStart: this._selection[0],
@@ -235,7 +237,7 @@ const l = class l extends p.Component {
         target: this,
         value: this.value
       };
-      this.props.onChange.call(void 0, r), this._valueDuringOnChange = void 0;
+      this.props.onChange.call(void 0, i), this._valueDuringOnChange = void 0;
     }
   }
   updateService(s) {
@@ -278,10 +280,10 @@ l.displayName = "MaskedTextBox", l.propTypes = {
   includeLiterals: e.bool,
   maskValidation: e.bool,
   mask: e.string,
-  rules: function(s, t, r) {
-    const i = s.rules;
-    return i !== void 0 && !Object.entries(i).some((a) => typeof a != "string" || !(i[a] instanceof RegExp)) ? new Error(
-      "Invalid prop `" + t + "` supplied to `" + r + "`. Validation failed."
+  rules: function(s, t, i) {
+    const r = s.rules;
+    return r !== void 0 && !Object.entries(r).some((a) => typeof a != "string" || !(r[a] instanceof RegExp)) ? new Error(
+      "Invalid prop `" + t + "` supplied to `" + i + "`. Validation failed."
     ) : null;
   },
   selection: e.shape({
@@ -297,7 +299,8 @@ l.displayName = "MaskedTextBox", l.propTypes = {
   onChange: e.func,
   size: e.oneOf([null, "small", "medium", "large"]),
   rounded: e.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: e.oneOf([null, "solid", "flat", "outline"])
+  fillMode: e.oneOf([null, "solid", "flat", "outline"]),
+  autoFocus: e.bool
 }, l.defaultProps = {
   prompt: "_",
   promptPlaceholder: " ",
@@ -310,13 +313,14 @@ l.displayName = "MaskedTextBox", l.propTypes = {
   suffix: (s) => null,
   size: "medium",
   rounded: "medium",
-  fillMode: "solid"
+  fillMode: "solid",
+  autoFocus: !1
 };
 let c = l;
-const I = x(), q = E(V(I, c));
-q.displayName = "KendoReactMaskedTextBox";
+const q = E(), w = V(O(q, c));
+w.displayName = "KendoReactMaskedTextBox";
 export {
-  q as MaskedTextBox,
-  I as MaskedTextBoxPropsContext,
+  w as MaskedTextBox,
+  q as MaskedTextBoxPropsContext,
   c as MaskedTextBoxWithoutContext
 };