@progress/kendo-react-inputs 10.1.1-develop.1 → 10.2.0-develop.10

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.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,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"),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.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,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;

package/maskedtextbox/MaskedTextBox.mjs

@@ -196,7 +196,9 @@ const a = class a extends p.Component {
           disabled: this.props.disabled || void 0,
           readOnly: this.props.readonly || void 0,
           placeholder: this.props.placeholder,
-          ref: (E) => this._input = E,
+          ref: (E) => {
+            this._input = E;
+          },
           onChange: this.onChangeHandler,
           onPaste: this.pasteHandler,
           onFocus: this.focusHandler,

package/numerictextbox/NumericTextBox.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 we=require("react"),t=require("prop-types"),fe=require("@progress/kendo-react-intl"),i=require("@progress/kendo-react-common"),be=require("@progress/kendo-svg-icons"),Ke=require("@progress/kendo-react-labels"),g=require("../messages/index.js"),s=require("./utils/index.js"),pe=require("@progress/kendo-react-buttons");function $e(m){const L=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const v in m)if(v!=="default"){const N=Object.getOwnPropertyDescriptor(m,v);Object.defineProperty(L,v,N.get?N:{enumerable:!0,get:()=>m[v]})}}return L.default=m,Object.freeze(L)}const n=$e(we),Ue="Please enter a valid value!",ge=i.createPropsContext(),Q=n.forwardRef((m,L)=>{const v=i.usePropsContext(ge,m),{className:N,value:k,defaultValue:ve,format:u,width:X,tabIndex:ye,accessKey:Ve,title:ke,placeholder:Z,min:f,max:b,dir:ee,name:_,label:R,id:Ce,ariaDescribedBy:Se,ariaLabelledBy:Ee,ariaLabel:xe,inputType:Oe,readOnly:C,validationMessage:G,children:he,touched:We,visited:Ye,modified:Je,style:te,inputStyle:Ie,valid:H,step:S=c.step,spinners:Le=c.spinners,disabled:o=c.disabled,required:B=c.required,validityStyles:ne=c.validityStyles,prefix:Pe=c.prefix,suffix:De=c.suffix,onChange:h=c.onChange,onFocus:re=c.onFocus,onBlur:ae=c.onBlur,rangeOnEnter:ue=c.rangeOnEnter,size:w=c.size,rounded:K=c.rounded,fillMode:q=c.fillMode,autoFocus:Ne=c.autoFocus,inputAttributes:Re,...se}=v,Be=i.useId(),le=Ce||Be,l=fe.useInternationalization(),M=fe.useLocalization(),a=n.useRef(null),T=n.useRef(),[qe,I]=n.useState(!1),d=n.useRef(s.getInitialState()),F=n.useRef(!1),$=n.useRef(),P=n.useRef(ve),D=s.formatValue(d.current.focused&&!o?d.current.currentLooseValue:s.getStateOrPropsValue(k,P.current),u,l);$.current=D;const[Me]=i.useCustomComponent(Pe),[Te]=i.useCustomComponent(De);n.useEffect(()=>{a.current&&a.current.setCustomValidity&&a.current.setCustomValidity(A().valid?"":G||Ue)});const oe=n.useCallback(()=>{a.current&&a.current.focus()},[]),j=n.useCallback(()=>T.current!==void 0?T.current:s.getStateOrPropsValue(k,P.current),[k]),ce=n.useCallback(()=>_,[_]),z=n.useCallback(()=>B,[B]),A=n.useCallback(()=>{const r=G!==void 0,e=j(),x=H!==void 0?H:!d.current.valueIsOutOfRange&&(!z()||e!=null);return{customError:r,valid:x,valueMissing:e==null}},[G,H,j,z]),U=n.useCallback(()=>ne,[ne]),ie=n.useCallback(()=>v,[v]),E=n.useCallback(()=>{const r={element:a.current,focus:oe};return Object.defineProperty(r,"name",{get:ce}),Object.defineProperty(r,"value",{get:j}),Object.defineProperty(r,"validity",{get:A}),Object.defineProperty(r,"validityStyles",{get:U}),Object.defineProperty(r,"required",{get:z}),Object.defineProperty(r,"props",{get:ie}),r},[ce,j,A,U,z,oe,ie]);n.useImperativeHandle(L,E);const y=n.useCallback(()=>({eventValue:s.getStateOrPropsValue(k,P.current),prevLooseValue:$.current,currentLooseValue:a.current.value,selectionStart:a.current.selectionStart,selectionEnd:a.current.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:F.current,focused:d.current.focused}),[k]),V=n.useCallback((r,e)=>{if(o)return;T.current=e.eventValue,P.current=e.eventValue;const x=s.formatValue(s.rangeValue(e.eventValue,f,b),u,l),p=s.rangeValue(l.parseNumber(x,u),f,b);p!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=p,P.current=p),k!==e.eventValue&&i.dispatchEvent(h,r,E(),{value:e.eventValue}),T.current=void 0,d.current=e,I(J=>!J)},[k,h,o,I,E]),Fe=n.useCallback(r=>{const e=y();F.current=!1,V(r,s.sanitizeNumber(e,u,l))},[u,h,l,V,y]),je=n.useCallback(r=>{let e=y();const x=l.parseNumber(String(e.currentLooseValue),u);if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const p=l.numberSymbols(),O=p&&r.key===p.minusSign,J=p&&r.key===p.decimal;F.current=!O&&!J;return}switch(r.keyCode){case 38:s.increaseValue(x,e,S,f,b,u,l);break;case 40:s.decreaseValue(x,e,S,f,b,u,l);break;case 13:{if(ue===!1)return;const p=s.formatValue(s.rangeValue(x,f,b),u,l),O=s.rangeValue(l.parseNumber(p,u),f,b);e.eventValue=O,e.currentLooseValue=s.formatValue(O,u,l),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break}case 110:{const p=a.current,O=l.numberSymbols();p&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+O.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=s.sanitizeNumber(e,u,l));break}default:return}r.preventDefault(),V(r,e)},[u,f,b,S,h,ue,V,y]),ze=n.useCallback(()=>{F.current=!0},[]),W=n.useCallback(r=>{if(C||o)return;const e=y();s.increaseValue(l.parseNumber(String(e.currentLooseValue),u),e,S,f,b,u,l),V(r,e)},[u,f,b,S,h,C,o,V,y]),Y=n.useCallback(r=>{if(C||o)return;const e=y();s.decreaseValue(l.parseNumber(String(e.currentLooseValue),u),e,S,f,b,u,l),V(r,e)},[u,f,b,S,h,C,o,V,y]),Ae=n.useCallback(r=>{const e=i.getActiveElement(document);!document||e!==a.current||!a.current||C||o||(r.nativeEvent.deltaY<0&&W(r),r.nativeEvent.deltaY>0&&Y(r))},[W,Y,o,C]),_e=n.useCallback(r=>{d.current.currentLooseValue=$.current,d.current.focused=!0,i.dispatchEvent(re,r,E(),{}),I(e=>!e)},[re,I,E]),Ge=n.useCallback(r=>{d.current=s.getInitialState(),i.dispatchEvent(ae,r,E(),{}),I(e=>!e)},[ae,I,E]),He=n.useCallback(r=>{if(document&&a.current){const e=i.getActiveElement(document);r.preventDefault(),e!==a.current&&a.current.focus()}},[]);i.useIsomorphicLayoutEffect(()=>{a.current&&a.current.type!=="number"&&d.current.selectionStart!==void 0&&d.current.selectionEnd!==void 0&&(a.current.selectionStart=d.current.selectionStart,a.current.selectionEnd=d.current.selectionEnd,d.current.selectionStart=void 0,d.current.selectionEnd=void 0)},[qe]);const de=!U()||A().valid,me=n.createElement("span",{dir:ee,style:R?te:{width:X,...te},className:i.classNames("k-input","k-numerictextbox",{[`k-input-${i.kendoThemeMaps.sizeMap[w]||w}`]:w,[`k-input-${q}`]:q,[`k-rounded-${i.kendoThemeMaps.roundedMap[K]||K}`]:K,"k-invalid":!de,"k-required":B,"k-disabled":o},N),"aria-disabled":o?"true":void 0,...R?{}:se},n.createElement(Me,null),n.createElement("input",{role:"spinbutton",value:D===null?"":D,tabIndex:i.getTabIndex(ye,o),accessKey:Ve,disabled:o,title:ke,"aria-disabled":o?"true":void 0,"aria-valuemin":f,"aria-valuemax":b,"aria-label":xe,"aria-labelledby":Ee,"aria-describedby":Se,"aria-required":B,placeholder:Z,spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:Ne,type:Oe||"tel",className:"k-input-inner",id:le,name:_,readOnly:C,style:Ie,onChange:Fe,onFocus:_e,onBlur:Ge,onKeyDown:je,onPaste:ze,onWheel:Ae,ref:a,...Re}),n.createElement(Te,null),he,Le&&n.createElement("span",{className:"k-input-spinner k-spin-button",onMouseDown:He},n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-up",svgIcon:be.caretAltUpIcon,rounded:null,fillMode:q,className:"k-spinner-increase","aria-label":M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),title:M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),onClick:W}),n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-down",svgIcon:be.caretAltDownIcon,rounded:null,fillMode:q,className:"k-spinner-decrease","aria-label":M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),title:M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),onClick:Y})));return R?n.createElement(Ke.FloatingLabel,{label:R,editorId:le,editorValue:D===null?"":D,editorValid:de,editorDisabled:o,editorPlaceholder:Z,children:me,style:{width:X},dir:ee,...se}):me});Q.propTypes={value:t.number,defaultValue:t.number,step:t.number,format:t.oneOfType([t.string,t.shape({style:t.oneOf(["decimal","currency","percent","scientific","accounting"]),currency:t.string,currencyDisplay:t.oneOf(["symbol","code","name"]),useGrouping:t.bool,minimumIntegerDigits:t.number,minimumFractionDigits:t.number,maximumFractionDigits:t.number})]),width:t.oneOfType([t.string,t.number]),tabIndex:t.number,accessKey:t.string,title:t.string,placeholder:t.string,min:t.number,max:t.number,spinners:t.bool,disabled:t.bool,readOnly:t.bool,dir:t.string,name:t.string,label:t.string,validationMessage:t.string,required:t.bool,id:t.string,rangeOnEnter:t.bool,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,onChange:t.func,onFocus:t.func,onBlur:t.func,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large","full"]),fillMode:t.oneOf([null,"solid","flat","outline"]),inputAttributes:t.object};const c={prefix:m=>null,suffix:m=>null,step:1,spinners:!0,disabled:!1,required:!1,validityStyles:!0,rangeOnEnter:!0,autoFocus:!1,onChange:m=>{},onFocus:m=>{},onBlur:m=>{},size:"medium",rounded:"medium",fillMode:"solid"};Q.displayName="KendoNumericTextBox";exports.NumericTextBox=Q;exports.NumericTextBoxPropsContext=ge;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const we=require("react"),t=require("prop-types"),fe=require("@progress/kendo-react-intl"),i=require("@progress/kendo-react-common"),be=require("@progress/kendo-svg-icons"),Ke=require("@progress/kendo-react-labels"),g=require("../messages/index.js"),s=require("./utils/index.js"),pe=require("@progress/kendo-react-buttons");function $e(m){const L=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const v in m)if(v!=="default"){const N=Object.getOwnPropertyDescriptor(m,v);Object.defineProperty(L,v,N.get?N:{enumerable:!0,get:()=>m[v]})}}return L.default=m,Object.freeze(L)}const n=$e(we),Ue="Please enter a valid value!",ge=i.createPropsContext(),Q=n.forwardRef((m,L)=>{const v=i.usePropsContext(ge,m),{className:N,value:k,defaultValue:ve,format:u,width:X,tabIndex:ye,accessKey:Ve,title:ke,placeholder:Z,min:f,max:b,dir:ee,name:_,label:R,id:Ce,ariaDescribedBy:Se,ariaLabelledBy:Ee,ariaLabel:xe,inputType:Oe,readOnly:C,validationMessage:G,children:he,touched:We,visited:Ye,modified:Je,style:te,inputStyle:Ie,valid:H,step:S=c.step,spinners:Le=c.spinners,disabled:o=c.disabled,required:B=c.required,validityStyles:ne=c.validityStyles,prefix:Pe=c.prefix,suffix:De=c.suffix,onChange:h=c.onChange,onFocus:re=c.onFocus,onBlur:ae=c.onBlur,rangeOnEnter:ue=c.rangeOnEnter,size:w=c.size,rounded:K=c.rounded,fillMode:q=c.fillMode,autoFocus:Ne=c.autoFocus,inputAttributes:Re,...se}=v,Be=i.useId(),le=Ce||Be,l=fe.useInternationalization(),M=fe.useLocalization(),a=n.useRef(null),T=n.useRef(void 0),[qe,I]=n.useState(!1),d=n.useRef(s.getInitialState()),F=n.useRef(!1),$=n.useRef(void 0),P=n.useRef(ve),D=s.formatValue(d.current.focused&&!o?d.current.currentLooseValue:s.getStateOrPropsValue(k,P.current),u,l);$.current=D;const[Me]=i.useCustomComponent(Pe),[Te]=i.useCustomComponent(De);n.useEffect(()=>{a.current&&a.current.setCustomValidity&&a.current.setCustomValidity(A().valid?"":G||Ue)});const oe=n.useCallback(()=>{a.current&&a.current.focus()},[]),j=n.useCallback(()=>T.current!==void 0?T.current:s.getStateOrPropsValue(k,P.current),[k]),ce=n.useCallback(()=>_,[_]),z=n.useCallback(()=>B,[B]),A=n.useCallback(()=>{const r=G!==void 0,e=j(),x=H!==void 0?H:!d.current.valueIsOutOfRange&&(!z()||e!=null);return{customError:r,valid:x,valueMissing:e==null}},[G,H,j,z]),U=n.useCallback(()=>ne,[ne]),ie=n.useCallback(()=>v,[v]),E=n.useCallback(()=>{const r={element:a.current,focus:oe};return Object.defineProperty(r,"name",{get:ce}),Object.defineProperty(r,"value",{get:j}),Object.defineProperty(r,"validity",{get:A}),Object.defineProperty(r,"validityStyles",{get:U}),Object.defineProperty(r,"required",{get:z}),Object.defineProperty(r,"props",{get:ie}),r},[ce,j,A,U,z,oe,ie]);n.useImperativeHandle(L,E);const y=n.useCallback(()=>({eventValue:s.getStateOrPropsValue(k,P.current),prevLooseValue:$.current,currentLooseValue:a.current.value,selectionStart:a.current.selectionStart,selectionEnd:a.current.selectionEnd,decimalSelect:!1,valueIsCorrected:!1,valueIsOutOfRange:!1,isPaste:F.current,focused:d.current.focused}),[k]),V=n.useCallback((r,e)=>{if(o)return;T.current=e.eventValue,P.current=e.eventValue;const x=s.formatValue(s.rangeValue(e.eventValue,f,b),u,l),p=s.rangeValue(l.parseNumber(x,u),f,b);p!==e.eventValue&&(e.valueIsOutOfRange=!0,e.eventValue=p,P.current=p),k!==e.eventValue&&i.dispatchEvent(h,r,E(),{value:e.eventValue}),T.current=void 0,d.current=e,I(J=>!J)},[k,h,o,I,E]),Fe=n.useCallback(r=>{const e=y();F.current=!1,V(r,s.sanitizeNumber(e,u,l))},[u,h,l,V,y]),je=n.useCallback(r=>{let e=y();const x=l.parseNumber(String(e.currentLooseValue),u);if(e.selectionEnd>e.selectionStart&&e.selectionEnd-e.selectionStart===String(e.currentLooseValue).length){const p=l.numberSymbols(),O=p&&r.key===p.minusSign,J=p&&r.key===p.decimal;F.current=!O&&!J;return}switch(r.keyCode){case 38:s.increaseValue(x,e,S,f,b,u,l);break;case 40:s.decreaseValue(x,e,S,f,b,u,l);break;case 13:{if(ue===!1)return;const p=s.formatValue(s.rangeValue(x,f,b),u,l),O=s.rangeValue(l.parseNumber(p,u),f,b);e.eventValue=O,e.currentLooseValue=s.formatValue(O,u,l),e.selectionStart=e.selectionEnd=e.currentLooseValue.length;break}case 110:{const p=a.current,O=l.numberSymbols();p&&(e.currentLooseValue=e.currentLooseValue.slice(0,e.selectionStart)+O.decimal+e.currentLooseValue.slice(e.selectionEnd),e.selectionStart=e.selectionEnd=e.selectionStart+1,e=s.sanitizeNumber(e,u,l));break}default:return}r.preventDefault(),V(r,e)},[u,f,b,S,h,ue,V,y]),ze=n.useCallback(()=>{F.current=!0},[]),W=n.useCallback(r=>{if(C||o)return;const e=y();s.increaseValue(l.parseNumber(String(e.currentLooseValue),u),e,S,f,b,u,l),V(r,e)},[u,f,b,S,h,C,o,V,y]),Y=n.useCallback(r=>{if(C||o)return;const e=y();s.decreaseValue(l.parseNumber(String(e.currentLooseValue),u),e,S,f,b,u,l),V(r,e)},[u,f,b,S,h,C,o,V,y]),Ae=n.useCallback(r=>{const e=i.getActiveElement(document);!document||e!==a.current||!a.current||C||o||(r.nativeEvent.deltaY<0&&W(r),r.nativeEvent.deltaY>0&&Y(r))},[W,Y,o,C]),_e=n.useCallback(r=>{d.current.currentLooseValue=$.current,d.current.focused=!0,i.dispatchEvent(re,r,E(),{}),I(e=>!e)},[re,I,E]),Ge=n.useCallback(r=>{d.current=s.getInitialState(),i.dispatchEvent(ae,r,E(),{}),I(e=>!e)},[ae,I,E]),He=n.useCallback(r=>{if(document&&a.current){const e=i.getActiveElement(document);r.preventDefault(),e!==a.current&&a.current.focus()}},[]);i.useIsomorphicLayoutEffect(()=>{a.current&&a.current.type!=="number"&&d.current.selectionStart!==void 0&&d.current.selectionEnd!==void 0&&(a.current.selectionStart=d.current.selectionStart,a.current.selectionEnd=d.current.selectionEnd,d.current.selectionStart=void 0,d.current.selectionEnd=void 0)},[qe]);const de=!U()||A().valid,me=n.createElement("span",{dir:ee,style:R?te:{width:X,...te},className:i.classNames("k-input","k-numerictextbox",{[`k-input-${i.kendoThemeMaps.sizeMap[w]||w}`]:w,[`k-input-${q}`]:q,[`k-rounded-${i.kendoThemeMaps.roundedMap[K]||K}`]:K,"k-invalid":!de,"k-required":B,"k-disabled":o},N),"aria-disabled":o?"true":void 0,...R?{}:se},n.createElement(Me,null),n.createElement("input",{role:"spinbutton",value:D===null?"":D,tabIndex:i.getTabIndex(ye,o),accessKey:Ve,disabled:o,title:ke,"aria-disabled":o?"true":void 0,"aria-valuemin":f,"aria-valuemax":b,"aria-label":xe,"aria-labelledby":Ee,"aria-describedby":Se,"aria-required":B,placeholder:Z,spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:Ne,type:Oe||"tel",className:"k-input-inner",id:le,name:_,readOnly:C,style:Ie,onChange:Fe,onFocus:_e,onBlur:Ge,onKeyDown:je,onPaste:ze,onWheel:Ae,ref:a,...Re}),n.createElement(Te,null),he,Le&&n.createElement("span",{className:"k-input-spinner k-spin-button",onMouseDown:He},n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-up",svgIcon:be.caretAltUpIcon,rounded:null,fillMode:q,className:"k-spinner-increase","aria-label":M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),title:M.toLanguageString(g.numericIncreaseValue,g.messages[g.numericIncreaseValue]),onClick:W}),n.createElement(pe.Button,{tabIndex:-1,type:"button",icon:"caret-alt-down",svgIcon:be.caretAltDownIcon,rounded:null,fillMode:q,className:"k-spinner-decrease","aria-label":M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),title:M.toLanguageString(g.numericDecreaseValue,g.messages[g.numericDecreaseValue]),onClick:Y})));return R?n.createElement(Ke.FloatingLabel,{label:R,editorId:le,editorValue:D===null?"":D,editorValid:de,editorDisabled:o,editorPlaceholder:Z,children:me,style:{width:X},dir:ee,...se}):me});Q.propTypes={value:t.number,defaultValue:t.number,step:t.number,format:t.oneOfType([t.string,t.shape({style:t.oneOf(["decimal","currency","percent","scientific","accounting"]),currency:t.string,currencyDisplay:t.oneOf(["symbol","code","name"]),useGrouping:t.bool,minimumIntegerDigits:t.number,minimumFractionDigits:t.number,maximumFractionDigits:t.number})]),width:t.oneOfType([t.string,t.number]),tabIndex:t.number,accessKey:t.string,title:t.string,placeholder:t.string,min:t.number,max:t.number,spinners:t.bool,disabled:t.bool,readOnly:t.bool,dir:t.string,name:t.string,label:t.string,validationMessage:t.string,required:t.bool,id:t.string,rangeOnEnter:t.bool,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,onChange:t.func,onFocus:t.func,onBlur:t.func,size:t.oneOf([null,"small","medium","large"]),rounded:t.oneOf([null,"small","medium","large","full"]),fillMode:t.oneOf([null,"solid","flat","outline"]),inputAttributes:t.object};const c={prefix:m=>null,suffix:m=>null,step:1,spinners:!0,disabled:!1,required:!1,validityStyles:!0,rangeOnEnter:!0,autoFocus:!1,onChange:m=>{},onFocus:m=>{},onBlur:m=>{},size:"medium",rounded:"medium",fillMode:"solid"};Q.displayName="KendoNumericTextBox";exports.NumericTextBox=Q;exports.NumericTextBoxPropsContext=ge;

package/numerictextbox/NumericTextBox.mjs

@@ -66,7 +66,7 @@ const it = "Please enter a valid value!", ct = et(), Ee = n.forwardRef(
       autoFocus: Ae = o.autoFocus,
       inputAttributes: Ge,
       ...ue
-    } = G, je = nt(), oe = Pe || je, s = Xe(), P = Ze(), a = n.useRef(null), N = n.useRef(), [_e, S] = n.useState(!1), i = n.useRef(ve()), D = n.useRef(!1), U = n.useRef(), x = n.useRef(he), h = q(
+    } = G, je = nt(), oe = Pe || je, s = Xe(), P = Ze(), a = n.useRef(null), N = n.useRef(void 0), [_e, S] = n.useState(!1), i = n.useRef(ve()), D = n.useRef(!1), U = n.useRef(void 0), x = n.useRef(he), h = q(
       i.current.focused && !u ? i.current.currentLooseValue : X(b, x.current),
       l,
       s

package/package-metadata.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 e={name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1743149854,version:"10.1.1-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1745313549,version:"10.2.0-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1743149854,
-  version: "10.1.1-develop.1",
+  publishDate: 1745313549,
+  version: "10.2.0-develop.10",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-inputs",
-  "version": "10.1.1-develop.1",
+  "version": "10.2.0-develop.10",
   "description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -28,14 +28,14 @@
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-animation": "10.1.1-develop.1",
-    "@progress/kendo-react-buttons": "10.1.1-develop.1",
-    "@progress/kendo-react-common": "10.1.1-develop.1",
-    "@progress/kendo-react-dialogs": "10.1.1-develop.1",
-    "@progress/kendo-react-layout": "10.1.1-develop.1",
-    "@progress/kendo-react-intl": "10.1.1-develop.1",
-    "@progress/kendo-react-labels": "10.1.1-develop.1",
-    "@progress/kendo-react-popup": "10.1.1-develop.1",
+    "@progress/kendo-react-animation": "10.2.0-develop.10",
+    "@progress/kendo-react-buttons": "10.2.0-develop.10",
+    "@progress/kendo-react-common": "10.2.0-develop.10",
+    "@progress/kendo-react-dialogs": "10.2.0-develop.10",
+    "@progress/kendo-react-layout": "10.2.0-develop.10",
+    "@progress/kendo-react-intl": "10.2.0-develop.10",
+    "@progress/kendo-react-labels": "10.2.0-develop.10",
+    "@progress/kendo-react-popup": "10.2.0-develop.10",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -82,7 +82,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1743149854,
+      "publishDate": 1745313549,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/slider/Slider.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 b=require("react"),l=require("prop-types"),a=require("@progress/kendo-react-common"),g=require("@progress/kendo-react-intl"),n=require("../messages/index.js"),y=require("./SliderLabel.js"),m=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-svg-icons");function k(h){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const e in h)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(h,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>h[e]})}}return s.default=h,Object.freeze(s)}const i=k(b),u=class u extends i.Component{constructor(s){super(s),this.state={value:this.props.defaultValue===void 0?this.props.min:this.props.defaultValue,focused:!1,dir:this.props.dir},this._sliderTrack=null,this._element=null,this.buttons=e=>{if(!e.enabled)return e.children;const t=this.state.dir==="rtl"?this.props.vertical?o.caretAltUpIcon:o.caretAltLeftIcon:this.props.vertical?o.caretAltUpIcon:o.caretAltRightIcon,c=this.state.dir==="rtl"?this.props.vertical?o.caretAltDownIcon:o.caretAltRightIcon:this.props.vertical?o.caretAltDownIcon:o.caretAltLeftIcon,r=this.state.dir==="rtl"?this.props.vertical?"caret-alt-up":"caret-alt-left":this.props.vertical?"caret-alt-up":"caret-alt-right",p=this.state.dir==="rtl"?this.props.vertical?"caret-alt-down":"caret-alt-right":this.props.vertical?"caret-alt-down":"caret-alt-left";return i.createElement(i.Fragment,null,i.createElement(m.Button,{className:"k-button-decrease",rounded:"full",icon:p,svgIcon:c,title:e.decrementTitle,onClick:e.decrement}),e.children,i.createElement(m.Button,{className:"k-button-increase",rounded:"full",icon:r,svgIcon:t,title:e.incrementTitle,onClick:e.increment}))},this.focus=()=>{this._element&&this._element.focus()},this.isLabel=e=>{let t=e;for(;t;){if(t.getAttribute(y.SLIDER_LABEL_ATTRIBUTE))return!0;t=t.parentElement}return!1},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onKeyDown=e=>{let t;e.keyCode===a.Keys.left||e.keyCode===a.Keys.down?t=this.state.value-(this.props.step||0):e.keyCode===a.Keys.right||e.keyCode===a.Keys.up?t=this.state.value+(this.props.step||0):e.keyCode===a.Keys.pageDown?t=this.state.value-(this.props.largeStep||0):e.keyCode===a.Keys.pageUp?t=this.state.value+(this.props.largeStep||0):e.keyCode===a.Keys.home?t=this.props.min:e.keyCode===a.Keys.end&&(t=this.props.max),t!==void 0&&(e.preventDefault(),this.change(e,t))},this.decrement=e=>{e.preventDefault(),this.change(e,this.state.value-(this.props.step||0))},this.increment=e=>{e.preventDefault(),this.change(e,this.state.value+(this.props.step||0))},this.dragStart=e=>{this.isLabel(e.event.originalEvent.target)||(e.event.isTouch&&e.event.originalEvent.preventDefault(),this.drag(e))},this.dragOver=e=>{e.event.originalEvent.preventDefault(),this.drag(e)},this.drag=e=>{const t=e.element.getBoundingClientRect(),c=this.props.vertical?t.bottom-e.event.clientY:this.state.dir==="rtl"?t.right-e.event.clientX:e.event.clientX-t.left,r=this.props.vertical?t.height:t.width,p=c/r;this.change(e,this.props.min+p*(this.props.max-this.props.min))}}static getDerivedStateFromProps(s,e){const t=s.value!==void 0?s.value:e.value,{min:c,max:r}=s;return t===void 0?null:{value:Math.min(Math.max(t,c),r)}}componentDidMount(){if(!this.state.dir&&window&&this._element){const s=window.getComputedStyle(this._element).direction;s&&this.setState({dir:s})}}render(){const s=g.provideLocalizationService(this),e=(this.state.value-this.props.min)/(this.props.max-this.props.min)*100,t=this.props.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},c=this.props.vertical?{paddingTop:0,height:"100%"}:{};return i.createElement("div",{ref:r=>this._element=r,dir:this.state.dir,id:this.props.id,style:{gap:0,...this.props.style},onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,className:a.classNames("k-slider",{"k-focus":this.state.focused,"k-disabled":this.props.disabled,"k-slider-horizontal":!this.props.vertical,"k-slider-vertical":this.props.vertical},this.props.className)},i.createElement(this.buttons,{enabled:this.props.buttons,decrement:this.decrement,increment:this.increment,incrementTitle:s.toLanguageString(n.sliderIncreaseValue,n.messages[n.sliderIncreaseValue]),decrementTitle:s.toLanguageString(n.sliderDecreaseValue,n.messages[n.sliderDecreaseValue])},i.createElement(a.Draggable,{onDrag:this.dragOver,onPress:this.dragStart,autoScroll:!1},i.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...t}},this.props.children&&i.createElement("ul",{className:"k-reset k-slider-items",style:{margin:0,...c}},i.Children.map(this.props.children,(r,p)=>r&&i.cloneElement(r,{position:100*(r.props.position-this.props.min)/(this.props.max-this.props.min),vertical:this.props.vertical,firstTick:p===0,lastTick:p===i.Children.count(this.props.children)-1},r.props.children))),i.createElement("div",{className:"k-slider-track",style:this.props.vertical?{bottom:0,height:"100%"}:{[this.state.dir==="rtl"?"right":"left"]:0,width:"100%"},ref:r=>this._sliderTrack=r},i.createElement("div",{className:"k-slider-selection",style:this.props.vertical?{height:e+"%"}:{width:e+"%"}}),i.createElement("span",{role:"slider","aria-valuemin":this.props.min,"aria-valuemax":this.props.max,"aria-valuenow":this.state.value,"aria-valuetext":String(this.state.value),"aria-orientation":this.props.vertical?"vertical":void 0,"aria-disabled":this.props.disabled?"true":void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel,tabIndex:a.getTabIndex(this.props.tabIndex,this.props.disabled,void 0),className:"k-draghandle k-draghandle-end",title:s.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.props.vertical?{bottom:"calc("+e+"%)",zIndex:1}:this.state.dir==="rtl"?{right:"calc("+e+"% - 13px)",zIndex:1}:{left:"calc("+e+"%)",zIndex:1}}))))))}get sliderTrack(){return this._sliderTrack}change(s,e){e=Math.min(Math.max(e,this.props.min),this.props.max),this.setState({value:e}),a.dispatchEvent(this.props.onChange,s,this,{value:e})}};u.displayName="Slider",u.propTypes={min:l.number.isRequired,max:l.number.isRequired,value:l.number,vertical:l.bool,id:l.string,ariaLabelledBy:l.string,ariaDescribedBy:l.string,ariaLabel:l.string};let d=u;const v=a.createPropsContext(),f=a.withPropsContext(v,d);f.displayName="KendoReactSlider";g.registerForLocalization(d);exports.Slider=f;exports.SliderPropsContext=v;exports.SliderWithoutContext=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),l=require("prop-types"),a=require("@progress/kendo-react-common"),g=require("@progress/kendo-react-intl"),n=require("../messages/index.js"),y=require("./SliderLabel.js"),m=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-svg-icons");function k(h){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const e in h)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(h,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>h[e]})}}return s.default=h,Object.freeze(s)}const i=k(b),u=class u extends i.Component{constructor(s){super(s),this.state={value:this.props.defaultValue===void 0?this.props.min:this.props.defaultValue,focused:!1,dir:this.props.dir},this._sliderTrack=null,this._element=null,this.buttons=e=>{if(!e.enabled)return e.children;const t=this.state.dir==="rtl"?this.props.vertical?o.caretAltUpIcon:o.caretAltLeftIcon:this.props.vertical?o.caretAltUpIcon:o.caretAltRightIcon,c=this.state.dir==="rtl"?this.props.vertical?o.caretAltDownIcon:o.caretAltRightIcon:this.props.vertical?o.caretAltDownIcon:o.caretAltLeftIcon,r=this.state.dir==="rtl"?this.props.vertical?"caret-alt-up":"caret-alt-left":this.props.vertical?"caret-alt-up":"caret-alt-right",p=this.state.dir==="rtl"?this.props.vertical?"caret-alt-down":"caret-alt-right":this.props.vertical?"caret-alt-down":"caret-alt-left";return i.createElement(i.Fragment,null,i.createElement(m.Button,{className:"k-button-decrease",rounded:"full",icon:p,svgIcon:c,title:e.decrementTitle,onClick:e.decrement}),e.children,i.createElement(m.Button,{className:"k-button-increase",rounded:"full",icon:r,svgIcon:t,title:e.incrementTitle,onClick:e.increment}))},this.focus=()=>{this._element&&this._element.focus()},this.isLabel=e=>{let t=e;for(;t;){if(t.getAttribute(y.SLIDER_LABEL_ATTRIBUTE))return!0;t=t.parentElement}return!1},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onKeyDown=e=>{let t;e.keyCode===a.Keys.left||e.keyCode===a.Keys.down?t=this.state.value-(this.props.step||0):e.keyCode===a.Keys.right||e.keyCode===a.Keys.up?t=this.state.value+(this.props.step||0):e.keyCode===a.Keys.pageDown?t=this.state.value-(this.props.largeStep||0):e.keyCode===a.Keys.pageUp?t=this.state.value+(this.props.largeStep||0):e.keyCode===a.Keys.home?t=this.props.min:e.keyCode===a.Keys.end&&(t=this.props.max),t!==void 0&&(e.preventDefault(),this.change(e,t))},this.decrement=e=>{e.preventDefault(),this.change(e,this.state.value-(this.props.step||0))},this.increment=e=>{e.preventDefault(),this.change(e,this.state.value+(this.props.step||0))},this.dragStart=e=>{this.isLabel(e.event.originalEvent.target)||(e.event.isTouch&&e.event.originalEvent.preventDefault(),this.drag(e))},this.dragOver=e=>{e.event.originalEvent.preventDefault(),this.drag(e)},this.drag=e=>{const t=e.element.getBoundingClientRect(),c=this.props.vertical?t.bottom-e.event.clientY:this.state.dir==="rtl"?t.right-e.event.clientX:e.event.clientX-t.left,r=this.props.vertical?t.height:t.width,p=c/r;this.change(e,this.props.min+p*(this.props.max-this.props.min))}}static getDerivedStateFromProps(s,e){const t=s.value!==void 0?s.value:e.value,{min:c,max:r}=s;return t===void 0?null:{value:Math.min(Math.max(t,c),r)}}componentDidMount(){if(!this.state.dir&&window&&this._element){const s=window.getComputedStyle(this._element).direction;s&&this.setState({dir:s})}}render(){const s=g.provideLocalizationService(this),e=(this.state.value-this.props.min)/(this.props.max-this.props.min)*100,t=this.props.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},c=this.props.vertical?{paddingTop:0,height:"100%"}:{};return i.createElement("div",{ref:r=>{this._element=r},dir:this.state.dir,id:this.props.id,style:{gap:0,...this.props.style},onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,className:a.classNames("k-slider",{"k-focus":this.state.focused,"k-disabled":this.props.disabled,"k-slider-horizontal":!this.props.vertical,"k-slider-vertical":this.props.vertical},this.props.className)},i.createElement(this.buttons,{enabled:this.props.buttons,decrement:this.decrement,increment:this.increment,incrementTitle:s.toLanguageString(n.sliderIncreaseValue,n.messages[n.sliderIncreaseValue]),decrementTitle:s.toLanguageString(n.sliderDecreaseValue,n.messages[n.sliderDecreaseValue])},i.createElement(a.Draggable,{onDrag:this.dragOver,onPress:this.dragStart,autoScroll:!1},i.createElement("div",{className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...t}},this.props.children&&i.createElement("ul",{className:"k-reset k-slider-items",style:{margin:0,...c}},i.Children.map(this.props.children,(r,p)=>r&&i.cloneElement(r,{position:100*(r.props.position-this.props.min)/(this.props.max-this.props.min),vertical:this.props.vertical,firstTick:p===0,lastTick:p===i.Children.count(this.props.children)-1},r.props.children))),i.createElement("div",{className:"k-slider-track",style:this.props.vertical?{bottom:0,height:"100%"}:{[this.state.dir==="rtl"?"right":"left"]:0,width:"100%"},ref:r=>{this._sliderTrack=r}},i.createElement("div",{className:"k-slider-selection",style:this.props.vertical?{height:e+"%"}:{width:e+"%"}}),i.createElement("span",{role:"slider","aria-valuemin":this.props.min,"aria-valuemax":this.props.max,"aria-valuenow":this.state.value,"aria-valuetext":String(this.state.value),"aria-orientation":this.props.vertical?"vertical":void 0,"aria-disabled":this.props.disabled?"true":void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel,tabIndex:a.getTabIndex(this.props.tabIndex,this.props.disabled,void 0),className:"k-draghandle k-draghandle-end",title:s.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.props.vertical?{bottom:"calc("+e+"%)",zIndex:1}:this.state.dir==="rtl"?{right:"calc("+e+"% - 13px)",zIndex:1}:{left:"calc("+e+"%)",zIndex:1}}))))))}get sliderTrack(){return this._sliderTrack}change(s,e){e=Math.min(Math.max(e,this.props.min),this.props.max),this.setState({value:e}),a.dispatchEvent(this.props.onChange,s,this,{value:e})}};u.displayName="Slider",u.propTypes={min:l.number.isRequired,max:l.number.isRequired,value:l.number,vertical:l.bool,id:l.string,ariaLabelledBy:l.string,ariaDescribedBy:l.string,ariaLabel:l.string};let d=u;const v=a.createPropsContext(),f=a.withPropsContext(v,d);f.displayName="KendoReactSlider";g.registerForLocalization(d);exports.Slider=f;exports.SliderPropsContext=v;exports.SliderWithoutContext=d;

package/slider/Slider.mjs

@@ -98,7 +98,9 @@ const p = class p extends i.Component {
     return /* @__PURE__ */ i.createElement(
       "div",
       {
-        ref: (r) => this._element = r,
+        ref: (r) => {
+          this._element = r;
+        },
         dir: this.state.dir,
         id: this.props.id,
         style: { gap: 0, ...this.props.style },
@@ -151,7 +153,9 @@ const p = class p extends i.Component {
             {
               className: "k-slider-track",
               style: this.props.vertical ? { bottom: 0, height: "100%" } : { [this.state.dir === "rtl" ? "right" : "left"]: 0, width: "100%" },
-              ref: (r) => this._sliderTrack = r
+              ref: (r) => {
+                this._sliderTrack = r;
+              }
             },
             /* @__PURE__ */ i.createElement(
               "div",

package/textbox/Textbox.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common");function A(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(s,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return s.default=e,Object.freeze(s)}const t=A(w),d=t.forwardRef((e,s)=>{const n=t.useRef(null),o=t.useRef(null),c=t.useRef(),f=l.useUnstyled(),i=f&&f.uTextBox,y=t.useCallback(()=>{var u;return c.current!==void 0?c.current:(u=n.current)==null?void 0:u.value},[]);t.useImperativeHandle(o,()=>({get element(){return n.current},get name(){return n.current&&n.current.name},get value(){return y()}})),t.useImperativeHandle(s,()=>o.current);const{size:m=r.size,fillMode:g=r.fillMode,rounded:v=r.rounded,autoFocus:B=r.autoFocus,inputAttributes:h,className:x,dir:F,style:_,prefix:O=r.prefix,suffix:T=r.suffix,valid:D,onFocus:p,onBlur:R,modified:I,touched:H,visited:G,...q}=e,[N]=l.useCustomComponent(O),[S]=l.useCustomComponent(T),[b,C]=t.useState(!1),j=u=>{C(!0)},E=u=>{C(!1)},M=t.useCallback(u=>{c.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:o.current}),c.current=void 0},[e.onChange]),{onFocus:P,onBlur:z}=l.useAsyncFocusBlur({onFocus:j,onBlur:E,onSyncFocus:p,onSyncBlur:R}),k=t.useMemo(()=>l.classNames(l.uTextBox.wrapper({c:i,rounded:v,fillMode:g,size:m,focused:b,required:e.required,disabled:e.disabled,invalid:e.valid===!1}),x),[x,g,b,e.disabled,e.required,e.valid,v,m,i]);return t.createElement("span",{style:_,dir:F,className:k,onFocus:P,onBlur:z},t.createElement(N,null),t.createElement("input",{ref:n,className:l.classNames(l.uTextBox.inputInner({c:i})),autoFocus:B,...Object.assign({},q,h),"aria-required":e.required,onChange:M}),t.createElement(S,null))}),r={prefix:e=>null,suffix:e=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};d.propTypes={size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large","full"]),fillMode:a.oneOf([null,"solid","flat","outline"]),autoFocus:a.bool,inputAttributes:a.object};d.displayName="KendoReactTextBoxComponent";exports.TextBox=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),a=require("prop-types"),o=require("@progress/kendo-react-common");function A(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(s,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return s.default=e,Object.freeze(s)}const t=A(w),d=t.forwardRef((e,s)=>{const n=t.useRef(null),l=t.useRef(null),c=t.useRef(void 0),f=o.useUnstyled(),i=f&&f.uTextBox,y=t.useCallback(()=>{var u;return c.current!==void 0?c.current:(u=n.current)==null?void 0:u.value},[]);t.useImperativeHandle(l,()=>({get element(){return n.current},get name(){return n.current&&n.current.name},get value(){return y()}})),t.useImperativeHandle(s,()=>l.current);const{size:m=r.size,fillMode:g=r.fillMode,rounded:v=r.rounded,autoFocus:B=r.autoFocus,inputAttributes:h,className:x,dir:F,style:_,prefix:O=r.prefix,suffix:T=r.suffix,valid:D,onFocus:p,onBlur:R,modified:I,touched:H,visited:G,...q}=e,[N]=o.useCustomComponent(O),[S]=o.useCustomComponent(T),[b,C]=t.useState(!1),j=u=>{C(!0)},E=u=>{C(!1)},M=t.useCallback(u=>{c.current=u.target.value,e.onChange&&e.onChange.call(void 0,{syntheticEvent:u,nativeEvent:u.nativeEvent,value:u.target.value,target:l.current}),c.current=void 0},[e.onChange]),{onFocus:P,onBlur:z}=o.useAsyncFocusBlur({onFocus:j,onBlur:E,onSyncFocus:p,onSyncBlur:R}),k=t.useMemo(()=>o.classNames(o.uTextBox.wrapper({c:i,rounded:v,fillMode:g,size:m,focused:b,required:e.required,disabled:e.disabled,invalid:e.valid===!1}),x),[x,g,b,e.disabled,e.required,e.valid,v,m,i]);return t.createElement("span",{style:_,dir:F,className:k,onFocus:P,onBlur:z},t.createElement(N,null),t.createElement("input",{ref:n,className:o.classNames(o.uTextBox.inputInner({c:i})),autoFocus:B,...Object.assign({},q,h),"aria-required":e.required,onChange:M}),t.createElement(S,null))}),r={prefix:e=>null,suffix:e=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};d.propTypes={size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large","full"]),fillMode:a.oneOf([null,"solid","flat","outline"]),autoFocus:a.bool,inputAttributes:a.object};d.displayName="KendoReactTextBoxComponent";exports.TextBox=d;

package/textbox/Textbox.mjs

@@ -9,7 +9,7 @@ import * as e from "react";
 import o from "prop-types";
 import { useUnstyled as w, useCustomComponent as g, useAsyncFocusBlur as H, classNames as h, uTextBox as C } from "@progress/kendo-react-common";
 const B = e.forwardRef((t, F) => {
-  const l = e.useRef(null), s = e.useRef(null), r = e.useRef(), i = w(), a = i && i.uTextBox, b = e.useCallback(() => {
+  const l = e.useRef(null), s = e.useRef(null), r = e.useRef(void 0), i = w(), a = i && i.uTextBox, b = e.useCallback(() => {
     var n;
     return r.current !== void 0 ? r.current : (n = l.current) == null ? void 0 : n.value;
   }, []);