@progress/kendo-react-inputs 8.3.0-develop.3 → 8.3.0-develop.4

package/index.d.mts

@@ -15,6 +15,7 @@ import { HTMLAttributes } from 'react';
 import { IconHandle } from '@progress/kendo-react-common';
 import { IconProps } from '@progress/kendo-react-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MaskedTextBoxClassStructure } from '@progress/kendo-react-common';
 import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { PopupAnimation } from '@progress/kendo-react-popup';
 import PropTypes from 'prop-types';
@@ -1306,7 +1307,7 @@ export declare const InputPrefix: React_2.ForwardRefExoticComponent<React_2.HTML
     /**
      * Sets the `orientation` property of the `InputPrefix` component.
      */
-    orientation?: "horizontal" | "vertical" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 } & React_2.RefAttributes<InputPrefixHandle>>;
 
 /**
@@ -1385,7 +1386,7 @@ export declare const InputSeparator: React_2.ForwardRefExoticComponent<React_2.H
     /**
      * Sets the `orientation` property of the `InputSeparator` component.
      */
-    orientation?: "horizontal" | "vertical" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 } & React_2.RefAttributes<InputSeparatorHandle>>;
 
 /**
@@ -1457,7 +1458,7 @@ export declare const InputSuffix: React_2.ForwardRefExoticComponent<React_2.HTML
     /**
      * Sets the `orientation` property of the `InputSuffix` component.
      */
-    orientation?: "horizontal" | "vertical" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 } & React_2.RefAttributes<InputSuffixHandle>>;
 
 /**
@@ -1847,6 +1848,10 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the MaskedTextBox. (Defaults to `false`)
      */
     autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: MaskedTextBoxClassStructure;
 }
 
 /**

package/index.d.ts

@@ -15,6 +15,7 @@ import { HTMLAttributes } from 'react';
 import { IconHandle } from '@progress/kendo-react-common';
 import { IconProps } from '@progress/kendo-react-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { MaskedTextBoxClassStructure } from '@progress/kendo-react-common';
 import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { PopupAnimation } from '@progress/kendo-react-popup';
 import PropTypes from 'prop-types';
@@ -1306,7 +1307,7 @@ export declare const InputPrefix: React_2.ForwardRefExoticComponent<React_2.HTML
     /**
      * Sets the `orientation` property of the `InputPrefix` component.
      */
-    orientation?: "horizontal" | "vertical" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 } & React_2.RefAttributes<InputPrefixHandle>>;
 
 /**
@@ -1385,7 +1386,7 @@ export declare const InputSeparator: React_2.ForwardRefExoticComponent<React_2.H
     /**
      * Sets the `orientation` property of the `InputSeparator` component.
      */
-    orientation?: "horizontal" | "vertical" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 } & React_2.RefAttributes<InputSeparatorHandle>>;
 
 /**
@@ -1457,7 +1458,7 @@ export declare const InputSuffix: React_2.ForwardRefExoticComponent<React_2.HTML
     /**
      * Sets the `orientation` property of the `InputSuffix` component.
      */
-    orientation?: "horizontal" | "vertical" | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 } & React_2.RefAttributes<InputSuffixHandle>>;
 
 /**
@@ -1847,6 +1848,10 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
      * Represents the `autoFocus` HTML attribute that will be applied to the input element of the MaskedTextBox. (Defaults to `false`)
      */
     autoFocus?: boolean;
+    /**
+     * @hidden
+     */
+    unstyled?: MaskedTextBoxClassStructure;
 }
 
 /**

package/maskedtextbox/MaskedTextBox.js

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

package/maskedtextbox/MaskedTextBox.mjs

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

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-inputs",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1723443260,
+  publishDate: 1723622340,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-inputs",
-  "version": "8.3.0-develop.3",
+  "version": "8.3.0-develop.4",
   "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",
@@ -25,13 +25,13 @@
     "@progress/kendo-drawing": "^1.20.1",
     "@progress/kendo-inputs-common": "^3.1.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "8.3.0-develop.3",
-    "@progress/kendo-react-buttons": "8.3.0-develop.3",
-    "@progress/kendo-react-common": "8.3.0-develop.3",
-    "@progress/kendo-react-dialogs": "8.3.0-develop.3",
-    "@progress/kendo-react-intl": "8.3.0-develop.3",
-    "@progress/kendo-react-labels": "8.3.0-develop.3",
-    "@progress/kendo-react-popup": "8.3.0-develop.3",
+    "@progress/kendo-react-animation": "8.3.0-develop.4",
+    "@progress/kendo-react-buttons": "8.3.0-develop.4",
+    "@progress/kendo-react-common": "8.3.0-develop.4",
+    "@progress/kendo-react-dialogs": "8.3.0-develop.4",
+    "@progress/kendo-react-intl": "8.3.0-develop.4",
+    "@progress/kendo-react-labels": "8.3.0-develop.4",
+    "@progress/kendo-react-popup": "8.3.0-develop.4",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/radiobutton/RadioButton.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),t=require("prop-types"),a=require("@progress/kendo-react-common"),w=require("../package-metadata.js");function _(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const l in n)if(l!=="default"){const r=Object.getOwnPropertyDescriptor(n,l);Object.defineProperty(s,l,r.get?r:{enumerable:!0,get:()=>n[l]})}}return s.default=n,Object.freeze(s)}const e=_(D),E=a.createPropsContext(),g=e.forwardRef((n,s)=>{a.validatePackage(w.packageMetadata);const l=a.usePropsContext(E,n),{ariaDescribedBy:r,checked:k,children:h,className:x,disabled:o,id:v,size:d=H.size,label:m,labelPlacement:F,name:I,style:N,tabIndex:O,value:b,valid:j,onChange:y,onFocus:p,onBlur:f,...z}=l,i=e.useRef(null),C=e.useCallback(()=>{i.current&&i.current.focus()},[]),u=e.useCallback(()=>({element:i.current,focus:C}),[C]);e.useImperativeHandle(s,u);const P=a.useId(),M=e.useCallback(c=>{a.dispatchEvent(y,c,u(),{value:b})},[y,b,o]),T=e.useCallback(c=>{p&&!o&&a.dispatchEvent(p,c,u(),void 0)},[p,o]),S=e.useCallback(c=>{f&&!o&&a.dispatchEvent(f,c,u(),void 0)},[f,o]),q={type:"radio",id:v||P,name:I,className:a.classNames("k-radio",{[`k-radio-${a.kendoThemeMaps.sizeMap[d]||d}`]:d,"k-invalid":j===!1,"k-checked":k},x),ref:i,disabled:o,tabIndex:a.getTabIndex(O,o),checked:k,style:N,"aria-describedby":r,value:b,onChange:M,onFocus:T,onBlur:S,...z},B=e.createElement(e.Fragment,null,m!==void 0?e.createElement("label",{className:"k-radio-label",htmlFor:v||P,style:{userSelect:"none"},"aria-label":m},m):null),R=e.createElement("span",{className:"k-radio-wrap"},e.createElement("input",{...q}));return F==="before"?e.createElement(e.Fragment,null,B,R,h):e.createElement(e.Fragment,null,R,B,h)});g.propTypes={ariaDescribedBy:t.string,checked:t.bool,className:t.string,disabled:t.bool,id:t.string,size:t.oneOf([null,"small","medium","large"]),label:t.string,labelPlacement:t.string,name:t.string,style:t.object,tabIndex:t.number,value:t.any,valid:t.bool,onChange:t.func,onFocus:t.func,onBlur:t.func};const H={size:"medium"};g.displayName="KendoRadioButton";exports.RadioButton=g;exports.RadioButtonPropsContext=E;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),t=require("prop-types"),a=require("@progress/kendo-react-common"),H=require("../package-metadata.js");function K(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(l,s,r.get?r:{enumerable:!0,get:()=>n[s]})}}return l.default=n,Object.freeze(l)}const e=K(_),N=a.createPropsContext(),g=e.forwardRef((n,l)=>{a.validatePackage(H.packageMetadata);const s=a.usePropsContext(N,n),{ariaDescribedBy:r,checked:y,children:v,className:x,disabled:o,id:B,size:F=L.size,label:d,labelPlacement:I,name:O,style:j,tabIndex:z,value:m,valid:S,onChange:h,onFocus:b,onBlur:p,...T}=s,C=a.useUnstyled(),f=C&&C.uRadioButton,u=e.useRef(null),R=e.useCallback(()=>{u.current&&u.current.focus()},[]),i=e.useCallback(()=>({element:u.current,focus:R}),[R]);e.useImperativeHandle(l,i);const P=a.useId(),q=e.useCallback(c=>{a.dispatchEvent(h,c,i(),{value:m})},[h,m,o]),D=e.useCallback(c=>{b&&!o&&a.dispatchEvent(b,c,i(),void 0)},[b,o]),M=e.useCallback(c=>{p&&!o&&a.dispatchEvent(p,c,i(),void 0)},[p,o]),w={type:"radio",id:B||P,name:O,className:a.classNames(a.uRadioButton.input({c:f,size:F,invalid:S===!1,checked:y}),x),ref:u,disabled:o,tabIndex:a.getTabIndex(z,o),checked:y,style:j,"aria-describedby":r,value:m,onChange:q,onFocus:D,onBlur:M,...T},k=e.createElement(e.Fragment,null,d!==void 0?e.createElement("label",{className:a.classNames(a.uRadioButton.label({c:f})),htmlFor:B||P,style:{userSelect:"none"},"aria-label":d},d):null),E=e.createElement("span",{className:a.classNames(a.uRadioButton.wrap({c:f}))},e.createElement("input",{...w}));return I==="before"?e.createElement(e.Fragment,null,k,E,v):e.createElement(e.Fragment,null,E,k,v)});g.propTypes={ariaDescribedBy:t.string,checked:t.bool,className:t.string,disabled:t.bool,id:t.string,size:t.oneOf([null,"small","medium","large"]),label:t.string,labelPlacement:t.string,name:t.string,style:t.object,tabIndex:t.number,value:t.any,valid:t.bool,onChange:t.func,onFocus:t.func,onBlur:t.func};const L={size:"medium"};g.displayName="KendoRadioButton";exports.RadioButton=g;exports.RadioButtonPropsContext=N;