@progress/kendo-react-inputs 13.3.0-develop.9 → 13.4.0-develop.1

package/maskedtextbox/MaskedTextBox.d.ts

@@ -0,0 +1,224 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { MaskedTextBoxProps } from './MaskedTextBoxProps.js';
+import { FormComponent, FormComponentValidity } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+interface MaskedTextBoxState {
+    focused?: boolean;
+    value?: string;
+}
+/** @hidden */
+export declare class MaskedTextBoxWithoutContext extends React.Component<MaskedTextBoxProps, MaskedTextBoxState> implements FormComponent {
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        value: PropTypes.Requireable<string>;
+        defaultValue: PropTypes.Requireable<string>;
+        placeholder: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+        id: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        prefix: PropTypes.Requireable<any>;
+        suffix: PropTypes.Requireable<any>;
+        ariaLabelledBy: PropTypes.Requireable<string>;
+        ariaDescribedBy: PropTypes.Requireable<string>;
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        tabIndex: PropTypes.Requireable<number>;
+        accessKey: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        readonly: PropTypes.Requireable<boolean>;
+        prompt: PropTypes.Requireable<string>;
+        promptPlaceholder: PropTypes.Requireable<string>;
+        includeLiterals: PropTypes.Requireable<boolean>;
+        maskValidation: PropTypes.Requireable<boolean>;
+        mask: PropTypes.Requireable<string>;
+        rules: (props: MaskedTextBoxProps, propName: string, componentName: string) => Error | null;
+        selection: PropTypes.Requireable<PropTypes.InferProps<{
+            start: PropTypes.Validator<number>;
+            end: PropTypes.Validator<number>;
+        }>>;
+        name: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        validationMessage: PropTypes.Requireable<string>;
+        required: PropTypes.Requireable<boolean>;
+        valid: PropTypes.Requireable<boolean>;
+        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>;
+        fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | undefined>;
+        autoFocus: PropTypes.Requireable<boolean>;
+        inputAttributes: PropTypes.Requireable<object>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        prompt: string;
+        promptPlaceholder: string;
+        includeLiterals: boolean;
+        maskValidation: boolean;
+        rules: {
+            [key: string]: RegExp;
+        };
+        validityStyles: boolean;
+        prefix: (_: any) => null;
+        suffix: (_: any) => null;
+        size: undefined;
+        rounded: undefined;
+        fillMode: undefined;
+        autoFocus: boolean;
+    };
+    /**
+     * @hidden
+     */
+    state: MaskedTextBoxState;
+    private _inputId;
+    private _service;
+    private _isPasted;
+    private _selection;
+    private _input;
+    private _valueDuringOnChange?;
+    /**
+     * @hidden
+     */
+    focus: () => void;
+    /**
+     * Gets the element of the MaskedTextBox.
+     *
+     * @return - An `HTMLInputElement`.
+     *
+     * @example
+     * ```jsx
+     * const App = () => {
+     *     const [element, setElement] = React.useState(null);
+     *
+     *     return (
+     *         <div>
+     *             <MaskedTextBox
+     *                 ref={(component) =>
+     *                     setElement(component ? component.element : null)}
+     *             />
+     *             <Button onClick={() => console.log(element)}>console.log the element</Button>
+     *         </div>
+     *     );
+     * }
+     * ```
+     */
+    get element(): HTMLInputElement | null;
+    /**
+     * Gets the value with the mask of the MaskedTextBox.
+     */
+    get value(): string;
+    /**
+     * Gets the raw value without the mask of the MaskedTextBox.
+     */
+    get rawValue(): string;
+    /**
+     * Represents the validity state into which the MaskedTextBox is set.
+     */
+    get validity(): FormComponentValidity;
+    /**
+     * @hidden
+     */
+    protected get validityStyles(): boolean;
+    /**
+     * @hidden
+     */
+    protected get required(): boolean;
+    /**
+     * Gets the `name` property of the MaskedTextBox.
+     */
+    get name(): string | undefined;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: MaskedTextBoxProps, prevState: MaskedTextBoxState): void;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    render(): React.JSX.Element;
+    private pasteHandler;
+    private onChangeHandler;
+    private focusHandler;
+    private blurHandler;
+    private triggerOnChange;
+    private updateService;
+    private get rules();
+    private setValidity;
+}
+/**
+ * Represents the PropsContext of the `MaskedTextBox` component.
+ * Used for global configuration of all `MaskedTextBox` instances.
+ *
+ * For more information, refer to the [Inputs Props Context](https://www.telerik.com/kendo-react-ui/components/inputs/props-context) article.
+ */
+export declare const MaskedTextBoxPropsContext: React.Context<(p: MaskedTextBoxProps) => MaskedTextBoxProps>;
+/**
+ * Represent the `ref` of the MaskedTextBox component.
+ */
+export interface MaskedTextBoxHandle extends Pick<MaskedTextBoxWithoutContext, keyof MaskedTextBoxWithoutContext> {
+    /**
+     * Gets the element of the MaskedTextBox.
+     *
+     * ```jsx
+     * const App = () => {
+     *   const [element, setElement] = React.useState(null);
+     *
+     *   return (
+     *      <div>
+     *          <MaskedTextBox
+     *              ref={(component) =>
+     *                  setElement(component ? component.element : null)}
+     *          />
+     *          <Button onClick={() => console.log(element)}>console.log the element</Button>
+     *      </div>
+     *   );
+     * }
+     * ```
+     */
+    element: HTMLInputElement | null;
+    /**
+     * Gets the `name` property of the MaskedTextBox.
+     */
+    name: string | undefined;
+    /**
+     * Gets the raw value without the mask of the MaskedTextBox.
+     */
+    rawValue: string;
+    /**
+     * Represents the validity state into which the MaskedTextBox is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Gets the value with the mask of the MaskedTextBox.
+     */
+    value: string;
+}
+/** @hidden */
+export type MaskedTextBox = MaskedTextBoxHandle;
+/**
+ * Represents the props of the [KendoReact MaskedTextBox component](https://www.telerik.com/kendo-react-ui/components/inputs/maskedtextbox).
+ *
+ * Accepts properties of type [MaskedTextBoxProps](https://www.telerik.com/kendo-react-ui/components/inputs/api/maskedtextboxprops).
+ * Obtaining the `ref` returns an object of type [MaskedTextBoxHandle](https://www.telerik.com/kendo-react-ui/components/inputs/api/maskedtextboxhandle).
+ */
+export declare const MaskedTextBox: React.ForwardRefExoticComponent<MaskedTextBoxProps & React.RefAttributes<any>>;
+export {};

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"),E=require("./masking.service.js"),c=require("./utils.js"),n=require("@progress/kendo-react-common"),M=require("@progress/kendo-react-labels");function V(p){const t=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(t,s,i.get?i:{enumerable:!0,get:()=>p[s]})}}return t.default=p,Object.freeze(t)}const u=V(O),l=class l 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.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 h=r.length-o,v=i.length-h;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)}c.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:h,className:v}=this.props,g=this.props.id||this._inputId,m=!this.validityStyles||this.validity.valid,b=this.props.style||{},y=h&&h.uMaskedTextBox,[P]=n.useCustomComponent(o),[S]=n.useCustomComponent(r),x=u.createElement("span",{dir:this.props.dir,className:n.classNames(n.uMaskedTextBox.wrapper({c:y,invalid:!m,disabled:this.props.disabled,size:t,fillMode:s,rounded:i}),v),style:this.props.label?b:{width:this.props.width,...b}},u.createElement(P,null),u.createElement("input",{type:"text",autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",autoFocus:a,spellCheck:!1,className:n.classNames(n.uMaskedTextBox.inputInner({c:y})),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:k=>{this._input=k},onChange:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragStart:c.returnFalse,onDrop:c.returnFalse,...d}),u.createElement(S,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:x,style:{width:this.props.width},dir:this.props.dir}):x}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({},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(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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},l.defaultProps={prompt:"_",promptPlaceholder:" ",includeLiterals:!1,maskValidation:!0,rules:c.defaultRules,validityStyles:!0,prefix:t=>null,suffix:t=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let f=l;const C=n.createPropsContext(),_=n.withIdHOC(n.withPropsContext(C,n.withUnstyledHOC(f)));_.displayName="KendoReactMaskedTextBox";exports.MaskedTextBox=_;exports.MaskedTextBoxPropsContext=C;exports.MaskedTextBoxWithoutContext=f;
+"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;

package/maskedtextbox/MaskedTextBox.mjs

@@ -7,31 +7,31 @@
  */
 import * as p from "react";
 import e from "prop-types";
-import { MaskingService as O } from "./masking.service.mjs";
-import { defaultRules as y, maskingChanged as V, returnFalse as b } from "./utils.mjs";
-import { useCustomComponent as _, classNames as C, uMaskedTextBox as P, getTabIndex as k, createPropsContext as w, withIdHOC as I, withPropsContext as M, withUnstyledHOC as D } from "@progress/kendo-react-common";
-import { FloatingLabel as H } from "@progress/kendo-react-labels";
-const a = class a extends p.Component {
+import { MaskingService as E } from "./masking.service.mjs";
+import { defaultRules as g, maskingChanged as O, returnFalse as y } from "./utils.mjs";
+import { withIdHOC as V, withPropsContext as M, createPropsContext as I, withUnstyledHOC as w, useCustomComponent as b, classNames as k, kendoThemeMaps as x, getTabIndex as D, uMaskedTextBox as H } from "@progress/kendo-react-common";
+import { FloatingLabel as q } from "@progress/kendo-react-labels";
+const l = class l extends p.Component {
   constructor() {
-    super(...arguments), this.state = {}, this._inputId = `k_${this.props.id}`, this._service = new O(), this._isPasted = !1, this._selection = [null, null], this._input = null, this.focus = () => {
+    super(...arguments), this.state = {}, this._inputId = `k_${this.props.id}`, this._service = new E(), 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]);
+      const { selectionStart: i, selectionEnd: s } = t.target;
+      s !== i && (this._isPasted = !0, this._selection = [i || 0, s || 0]);
     }, this.onChangeHandler = (t) => {
-      const s = t.currentTarget, i = s.value, l = this._selection[0] || 0, o = this._selection[1] || 0;
+      const i = t.currentTarget, s = i.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);
+        this._isPasted = !1, this._selection = [null, null], this.triggerOnChange(s, t);
         return;
       }
       const r = this.value;
       let n;
       if (this._isPasted) {
         this._isPasted = !1;
-        const d = r.length - o, u = i.length - d;
-        n = this._service.maskInRange(i.slice(l, u), r, l, o);
+        const d = r.length - o, u = s.length - d;
+        n = this._service.maskInRange(s.slice(a, u), r, a, o);
       } else
-        n = this._service.maskInput(i, r, s.selectionStart || 0);
+        n = this._service.maskInput(s, r, 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, {
@@ -90,18 +90,18 @@ const a = class a extends p.Component {
    * Represents the validity state into which the MaskedTextBox is set.
    */
   get validity() {
-    const t = this.value, s = this._service.validationValue(t), i = this.props.validationMessage !== void 0, l = this.props.valid !== void 0 ? this.props.valid : (!this.required || !!s) && (!this.props.maskValidation || !this.props.prompt || t.indexOf(this.props.prompt) === -1);
+    const t = this.value, i = this._service.validationValue(t), s = this.props.validationMessage !== void 0, a = this.props.valid !== void 0 ? this.props.valid : (!this.required || !!i) && (!this.props.maskValidation || !this.props.prompt || t.indexOf(this.props.prompt) === -1);
     return {
-      customError: i,
-      valid: l,
-      valueMissing: !s
+      customError: s,
+      valid: a,
+      valueMissing: !i
     };
   }
   /**
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : a.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : l.defaultProps.validityStyles;
   }
   /**
    * @hidden
@@ -118,13 +118,13 @@ const a = class a extends p.Component {
   /**
    * @hidden
    */
-  componentDidUpdate(t, s) {
-    if (this.element && this.state.focused && s.focused) {
-      let [i, l] = this._selection;
+  componentDidUpdate(t, i) {
+    if (this.element && this.state.focused && i.focused) {
+      let [s, 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, l = r.end), i !== null && l !== null && this.element.setSelectionRange(i, l);
+      (!o && r || o && r && (o.start !== r.start || o.end !== r.end)) && (s = r.start, a = r.end), s !== null && a !== null && this.element.setSelectionRange(s, a);
     }
-    V(t, this.props) && this.updateService(), this.setValidity();
+    O(t, this.props) && this.updateService(), this.setValidity();
   }
   /**
    * @hidden
@@ -137,33 +137,34 @@ const a = class a extends p.Component {
    */
   render() {
     const {
-      size: t = a.defaultProps.size,
-      fillMode: s = a.defaultProps.fillMode,
-      rounded: i = a.defaultProps.rounded,
-      autoFocus: l = a.defaultProps.autoFocus,
-      prefix: o = a.defaultProps.prefix,
-      suffix: r = a.defaultProps.suffix,
+      size: t = l.defaultProps.size,
+      fillMode: i = l.defaultProps.fillMode,
+      rounded: s = l.defaultProps.rounded,
+      autoFocus: a = l.defaultProps.autoFocus,
+      prefix: o = l.defaultProps.prefix,
+      suffix: r = l.defaultProps.suffix,
       inputAttributes: n,
       unstyled: d,
       className: u
-    } = this.props, c = this.props.id || this._inputId, f = !this.validityStyles || this.validity.valid, v = this.props.style || {}, m = d && d.uMaskedTextBox, [x] = _(o), [S] = _(r), g = /* @__PURE__ */ p.createElement(
+    } = this.props, c = this.props.id || this._inputId, f = !this.validityStyles || this.validity.valid, v = this.props.style || {}, _ = d && d.uMaskedTextBox, [C] = b(o), [P] = b(r), m = /* @__PURE__ */ p.createElement(
       "span",
       {
         dir: this.props.dir,
-        className: C(
-          P.wrapper({
-            c: m,
-            invalid: !f,
-            disabled: this.props.disabled,
-            size: t,
-            fillMode: s,
-            rounded: i
-          }),
+        className: k(
+          "k-input",
+          "k-maskedtextbox",
+          {
+            [`k-input-${x.sizeMap[t] || t}`]: t,
+            [`k-input-${i}`]: i,
+            [`k-rounded-${x.roundedMap[s] || s}`]: s,
+            "k-invalid": !f,
+            "k-disabled": this.props.disabled
+          },
           u
         ),
         style: this.props.label ? v : { width: this.props.width, ...v }
       },
-      /* @__PURE__ */ p.createElement(x, null),
+      /* @__PURE__ */ p.createElement(C, null),
       /* @__PURE__ */ p.createElement(
         "input",
         {
@@ -171,9 +172,9 @@ const a = class a extends p.Component {
           autoComplete: "off",
           autoCorrect: "off",
           autoCapitalize: "off",
-          autoFocus: l,
+          autoFocus: a,
           spellCheck: !1,
-          className: C(P.inputInner({ c: m })),
+          className: k(H.inputInner({ c: _ })),
           value: this.value,
           id: c,
           "aria-labelledby": this.props.ariaLabelledBy,
@@ -181,28 +182,28 @@ const a = class a extends p.Component {
           "aria-placeholder": this.props.mask,
           "aria-required": this.props.required,
           name: this.props.name,
-          tabIndex: k(this.props.tabIndex, this.props.disabled, !0),
+          tabIndex: D(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: (E) => {
-            this._input = E;
+          ref: (S) => {
+            this._input = S;
           },
           onChange: this.onChangeHandler,
           onPaste: this.pasteHandler,
           onFocus: this.focusHandler,
           onBlur: this.blurHandler,
-          onDragStart: b,
-          onDrop: b,
+          onDragStart: y,
+          onDrop: y,
           ...n
         }
       ),
-      /* @__PURE__ */ p.createElement(S, null)
+      /* @__PURE__ */ p.createElement(P, null)
     );
     return this.props.label ? /* @__PURE__ */ p.createElement(
-      H,
+      q,
       {
         label: this.props.label,
         editorId: c,
@@ -210,30 +211,30 @@ const a = class a extends p.Component {
         editorValid: f,
         editorDisabled: this.props.disabled,
         editorPlaceholder: this.props.placeholder,
-        children: g,
+        children: m,
         style: { width: this.props.width },
         dir: this.props.dir
       }
-    ) : g;
+    ) : m;
   }
-  triggerOnChange(t, s) {
+  triggerOnChange(t, i) {
     if (this.setState({
       value: t
     }), this.props.onChange) {
       this._valueDuringOnChange = t;
-      const i = {
-        syntheticEvent: s,
-        nativeEvent: s.nativeEvent,
+      const s = {
+        syntheticEvent: i,
+        nativeEvent: i.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;
+      this.props.onChange.call(void 0, s), this._valueDuringOnChange = void 0;
     }
   }
   updateService(t) {
-    const s = Object.assign(
+    const i = Object.assign(
       {
         includeLiterals: this.props.includeLiterals,
         mask: this.props.mask,
@@ -243,13 +244,13 @@ const a = class a extends p.Component {
       },
       t
     );
-    this._service.update(s);
+    this._service.update(i);
   }
   get rules() {
-    return Object.assign({}, y, this.props.rules);
+    return Object.assign({}, g, this.props.rules);
   }
 };
-a.displayName = "MaskedTextBox", a.propTypes = {
+l.displayName = "MaskedTextBox", l.propTypes = {
   value: e.string,
   defaultValue: e.string,
   placeholder: e.string,
@@ -272,10 +273,10 @@ a.displayName = "MaskedTextBox", a.propTypes = {
   includeLiterals: e.bool,
   maskValidation: e.bool,
   mask: e.string,
-  rules: function(t, s, i) {
-    const l = t.rules;
-    return l !== void 0 && !Object.entries(l).some((r) => typeof r != "string" || !(l[r] instanceof RegExp)) ? new Error(
-      "Invalid prop `" + s + "` supplied to `" + i + "`. Validation failed."
+  rules: function(t, i, s) {
+    const a = t.rules;
+    return a !== void 0 && !Object.entries(a).some((r) => typeof r != "string" || !(a[r] instanceof RegExp)) ? new Error(
+      "Invalid prop `" + i + "` supplied to `" + s + "`. Validation failed."
     ) : null;
   },
   selection: e.shape({
@@ -289,35 +290,35 @@ a.displayName = "MaskedTextBox", a.propTypes = {
   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"]),
+  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
-}, a.defaultProps = {
+}, l.defaultProps = {
   prompt: "_",
   promptPlaceholder: " ",
   includeLiterals: !1,
   maskValidation: !0,
-  rules: y,
+  rules: g,
   validityStyles: !0,
   prefix: (t) => null,
   suffix: (t) => null,
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
   autoFocus: !1
 };
-let h = a;
-const q = w(), B = I(
+let h = l;
+const B = I(), F = V(
   M(
-    q,
-    D(h)
+    B,
+    w(h)
   )
 );
-B.displayName = "KendoReactMaskedTextBox";
+F.displayName = "KendoReactMaskedTextBox";
 export {
-  B as MaskedTextBox,
-  q as MaskedTextBoxPropsContext,
+  F as MaskedTextBox,
+  B as MaskedTextBoxPropsContext,
   h as MaskedTextBoxWithoutContext
 };