@progress/kendo-react-inputs/maskedtextbox/MaskedTextBox.js

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * 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;