@progress/kendo-react-inputs 11.0.0-develop.2 → 11.0.0-develop.21

package/index.d.mts

@@ -1202,12 +1202,36 @@ export declare interface ColorPickerProps {
     className?: string;
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptive={true} />
+     * ```
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptiveTitle="Adaptive Popup Title" />
+     * ```
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptiveSubtitle="Adaptive Popup Subtitle" />
+     * ```
+     */
+    adaptiveSubtitle?: string;
 }
 
 /**
@@ -1520,7 +1544,7 @@ export declare interface InputProps extends Omit_2<React_2.InputHTMLAttributes<H
     /**
      * Renders a floating label for the Input component.
      */
-    label?: string;
+    label?: React_2.ReactNode;
     /**
      * Sets a `className` for the floating label.
      */
@@ -1889,7 +1913,7 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     /**
      * Renders a floating label for the MaskedTextBox.
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Sets the `id` of the `input` DOM element.
      */
@@ -2073,7 +2097,7 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
             end: default_2.Validator<number>;
         }>>;
         name: default_2.Requireable<string>;
-        label: default_2.Requireable<string>;
+        label: default_2.Requireable<default_2.ReactNodeLike>;
         validationMessage: default_2.Requireable<string>;
         required: default_2.Requireable<boolean>;
         valid: default_2.Requireable<boolean>;
@@ -2967,6 +2991,9 @@ export declare const rangeReducer: (state: any, action: RangeAction) => any;
  *
  * Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}).
  * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
+ *
+ * @remarks
+ * Supported children components are: {@link SliderLabel}.
  */
 export declare const RangeSlider: React_2.ForwardRefExoticComponent<RangeSliderProps & React_2.RefAttributes<RangeSliderHandle | null>>;
 
@@ -3479,7 +3506,7 @@ export declare interface RatingProps extends FormComponentProps {
      * <Rating label="Rating Label" />
      * ```
      */
-    label?: string;
+    label?: React_2.ReactNode;
     /**
      * Sets the `readonly` mode of the Rating.
      *
@@ -4070,6 +4097,9 @@ export declare interface SliderChangeEvent extends BaseEvent<Slider> {
 
 /**
  * Represent the `ref` of the Slider component.
+ *
+ * @remarks
+ * Supported children components are: {@link SliderLabel}.
  */
 export declare interface SliderHandle extends Pick<SliderWithoutContext, keyof SliderWithoutContext> {
 }

package/index.d.ts

@@ -1202,12 +1202,36 @@ export declare interface ColorPickerProps {
     className?: string;
     /**
      * Providing different rendering of the popup element based on the screen dimensions.
+     *
+     * @default `false`
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptive={true} />
+     * ```
      */
     adaptive?: boolean;
     /**
-     * Specifies the text that is rendered as title in the adaptive popup.
+     * Specifies the text that is rendered as title in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     * If not provided, the title will be the same as the label.
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptiveTitle="Adaptive Popup Title" />
+     * ```
      */
     adaptiveTitle?: string;
+    /**
+     * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
+     * Applicable only when `adaptive` is set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <ColorPicker adaptiveSubtitle="Adaptive Popup Subtitle" />
+     * ```
+     */
+    adaptiveSubtitle?: string;
 }
 
 /**
@@ -1520,7 +1544,7 @@ export declare interface InputProps extends Omit_2<React_2.InputHTMLAttributes<H
     /**
      * Renders a floating label for the Input component.
      */
-    label?: string;
+    label?: React_2.ReactNode;
     /**
      * Sets a `className` for the floating label.
      */
@@ -1889,7 +1913,7 @@ export declare interface MaskedTextBoxProps extends FormComponentProps {
     /**
      * Renders a floating label for the MaskedTextBox.
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Sets the `id` of the `input` DOM element.
      */
@@ -2073,7 +2097,7 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
             end: default_2.Validator<number>;
         }>>;
         name: default_2.Requireable<string>;
-        label: default_2.Requireable<string>;
+        label: default_2.Requireable<default_2.ReactNodeLike>;
         validationMessage: default_2.Requireable<string>;
         required: default_2.Requireable<boolean>;
         valid: default_2.Requireable<boolean>;
@@ -2967,6 +2991,9 @@ export declare const rangeReducer: (state: any, action: RangeAction) => any;
  *
  * Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}).
  * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
+ *
+ * @remarks
+ * Supported children components are: {@link SliderLabel}.
  */
 export declare const RangeSlider: React_2.ForwardRefExoticComponent<RangeSliderProps & React_2.RefAttributes<RangeSliderHandle | null>>;
 
@@ -3479,7 +3506,7 @@ export declare interface RatingProps extends FormComponentProps {
      * <Rating label="Rating Label" />
      * ```
      */
-    label?: string;
+    label?: React_2.ReactNode;
     /**
      * Sets the `readonly` mode of the Rating.
      *
@@ -4070,6 +4097,9 @@ export declare interface SliderChangeEvent extends BaseEvent<Slider> {
 
 /**
  * Represent the `ref` of the Slider component.
+ *
+ * @remarks
+ * Supported children components are: {@link SliderLabel}.
  */
 export declare interface SliderHandle extends Pick<SliderWithoutContext, keyof SliderWithoutContext> {
 }

package/input/Input.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"),X=require("@progress/kendo-react-labels");function Y(s){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const u in s)if(u!=="default"){const c=Object.getOwnPropertyDescriptor(s,u);Object.defineProperty(o,u,c.get?c:{enumerable:!0,get:()=>s[u]})}}return o.default=s,Object.freeze(o)}const r=Y(W),m=r.forwardRef((s,o)=>{const c=r.useContext(R).call(void 0,s),[,N]=r.useReducer(t=>t,!0),n=l.applyDefaultProps(c,Z),{className:k,label:p,labelClassName:x,id:E,validationMessage:h,defaultValue:S,valid:C,unstyled:V,visited:$,touched:ee,modified:te,autoFocus:w,ariaLabelledBy:D,ariaDescribedBy:q,validityStyles:I,style:P,ariaLabel:F,...U}=n,j=l.useUnstyled(),f=V||j,B=f&&f.uInput,T=l.useId(),[_,A]=r.useState({value:S}),L=E||T,e=r.useRef(null),d=r.useRef(void 0),y=r.useRef(null),G=()=>{e.current&&e.current.focus()},g=()=>d.current!==void 0?d.current:n.value!==void 0?n.value:_.value,v=()=>{const t={badInput:e.current?e.current.validity.badInput:!1,patternMismatch:e.current?e.current.validity.patternMismatch:!1,rangeOverflow:e.current?e.current.validity.rangeOverflow:!1,rangeUnderflow:e.current?e.current.validity.rangeUnderflow:!1,stepMismatch:e.current?e.current.validity.stepMismatch:!1,tooLong:e.current?e.current.validity.tooLong:!1,typeMismatch:e.current?e.current.validity.typeMismatch:!1,valueMissing:e.current?e.current.validity.valueMissing:!1};return{...t,customError:h!==void 0,valid:C!==void 0?C:e.current?!H(t):!0}};r.useImperativeHandle(y,()=>({element:e.current,props:n,get value(){return g()},name:n.name,get validity(){return v()},focus:G})),r.useImperativeHandle(o,()=>y.current);const H=t=>{let i=!1;for(const O in t)t.hasOwnProperty(O)&&(i=i||!!t[O]);return i},b=!I||v().valid,z=l.classNames(k,l.uInput.input({c:B,invalid:!b,disabled:n.disabled})),K=()=>{e.current&&e.current.setCustomValidity&&(v().valid||!I?e.current.classList.remove("k-invalid"):e.current.classList.add("k-invalid"),e.current.setCustomValidity(v().valid?"":h||""))},J=t=>{A({value:t.target.value}),d.current=t.target.value,n.onChange&&n.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:y.current}),d.current=void 0},Q=t=>{if(t.animationName==="autoFillStart"){const i=t.target.parentNode;i&&i.classList.contains("k-empty")&&i.classList.remove("k-empty")}};r.useEffect(()=>{N()},[]),r.useEffect(()=>{K()});const M=r.createElement("input",{"aria-labelledby":D,"aria-describedby":q,"aria-disabled":n.disabled||void 0,"aria-invalid":!b||void 0,"aria-label":F||void 0,...U,style:p?void 0:P,value:g(),id:L,autoFocus:w,className:z,onChange:J,onAnimationStart:Q,ref:e});return p?r.createElement(X.FloatingLabel,{label:p,labelClassName:x,editorId:L,editorValue:String(g()),editorValid:b,editorDisabled:n.disabled,editorPlaceholder:n.placeholder,children:M,style:P,dir:n.dir,unstyled:f}):M}),R=l.createPropsContext(),Z={defaultValue:"",required:!1,validityStyles:!0,autoFocus:!1};m.displayName="KendoReactInput";m.propTypes={label:a.string,labelClassName:a.string,validationMessage:a.string,required:a.bool,validate:a.bool,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string,autoFocus:a.bool,value:a.oneOfType([a.string,a.number,a.array])};exports.Input=m;exports.InputPropsContext=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),X=require("@progress/kendo-react-labels");function Y(s){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const u in s)if(u!=="default"){const c=Object.getOwnPropertyDescriptor(s,u);Object.defineProperty(o,u,c.get?c:{enumerable:!0,get:()=>s[u]})}}return o.default=s,Object.freeze(o)}const r=Y(W),m=r.forwardRef((s,o)=>{const c=r.useContext(R).call(void 0,s),[,N]=r.useReducer(t=>t,!0),n=l.applyDefaultProps(c,Z),{className:k,label:p,labelClassName:x,id:E,validationMessage:h,defaultValue:S,valid:C,unstyled:V,visited:$,touched:ee,modified:te,autoFocus:w,ariaLabelledBy:D,ariaDescribedBy:q,validityStyles:I,style:P,ariaLabel:F,...U}=n,j=l.useUnstyled(),f=V||j,B=f&&f.uInput,T=l.useId(),[_,A]=r.useState({value:S}),L=E||T,e=r.useRef(null),d=r.useRef(void 0),y=r.useRef(null),G=()=>{e.current&&e.current.focus()},b=()=>d.current!==void 0?d.current:n.value!==void 0?n.value:_.value,v=()=>{const t={badInput:e.current?e.current.validity.badInput:!1,patternMismatch:e.current?e.current.validity.patternMismatch:!1,rangeOverflow:e.current?e.current.validity.rangeOverflow:!1,rangeUnderflow:e.current?e.current.validity.rangeUnderflow:!1,stepMismatch:e.current?e.current.validity.stepMismatch:!1,tooLong:e.current?e.current.validity.tooLong:!1,typeMismatch:e.current?e.current.validity.typeMismatch:!1,valueMissing:e.current?e.current.validity.valueMissing:!1};return{...t,customError:h!==void 0,valid:C!==void 0?C:e.current?!H(t):!0}};r.useImperativeHandle(y,()=>({element:e.current,props:n,get value(){return b()},name:n.name,get validity(){return v()},focus:G})),r.useImperativeHandle(o,()=>y.current);const H=t=>{let i=!1;for(const O in t)t.hasOwnProperty(O)&&(i=i||!!t[O]);return i},g=!I||v().valid,z=l.classNames(k,l.uInput.input({c:B,invalid:!g,disabled:n.disabled})),K=()=>{e.current&&e.current.setCustomValidity&&(v().valid||!I?e.current.classList.remove("k-invalid"):e.current.classList.add("k-invalid"),e.current.setCustomValidity(v().valid?"":h||""))},J=t=>{A({value:t.target.value}),d.current=t.target.value,n.onChange&&n.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:y.current}),d.current=void 0},Q=t=>{if(t.animationName==="autoFillStart"){const i=t.target.parentNode;i&&i.classList.contains("k-empty")&&i.classList.remove("k-empty")}};r.useEffect(()=>{N()},[]),r.useEffect(()=>{K()});const M=r.createElement("input",{"aria-labelledby":D,"aria-describedby":q,"aria-disabled":n.disabled||void 0,"aria-invalid":!g||void 0,"aria-label":F||void 0,...U,style:p?void 0:P,value:b(),id:L,autoFocus:w,className:z,onChange:J,onAnimationStart:Q,ref:e});return p?r.createElement(X.FloatingLabel,{label:p,labelClassName:x,editorId:L,editorValue:String(b()),editorValid:g,editorDisabled:n.disabled,editorPlaceholder:n.placeholder,children:M,style:P,dir:n.dir,unstyled:f}):M}),R=l.createPropsContext(),Z={defaultValue:"",required:!1,validityStyles:!0,autoFocus:!1};m.displayName="KendoReactInput";m.propTypes={label:a.node,labelClassName:a.string,validationMessage:a.string,required:a.bool,validate:a.bool,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string,autoFocus:a.bool,value:a.oneOfType([a.string,a.number,a.array])};exports.Input=m;exports.InputPropsContext=R;

package/input/Input.mjs

@@ -140,7 +140,7 @@ const C = r.forwardRef((I, L) => {
 };
 C.displayName = "KendoReactInput";
 C.propTypes = {
-  label: a.string,
+  label: a.node,
   labelClassName: a.string,
   validationMessage: a.string,
   required: a.bool,

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.node,validationMessage:e.string,required:e.bool,valid:e.bool,validityStyles:e.bool,onChange:e.func,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},l.defaultProps={prompt:"_",promptPlaceholder:" ",includeLiterals:!1,maskValidation:!0,rules:c.defaultRules,validityStyles:!0,prefix:t=>null,suffix:t=>null,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let f=l;const C=n.createPropsContext(),_=n.withIdHOC(n.withPropsContext(C,n.withUnstyledHOC(f)));_.displayName="KendoReactMaskedTextBox";exports.MaskedTextBox=_;exports.MaskedTextBoxPropsContext=C;exports.MaskedTextBoxWithoutContext=f;

package/maskedtextbox/MaskedTextBox.mjs

@@ -292,7 +292,7 @@ a.displayName = "MaskedTextBox", a.propTypes = {
     end: e.number.isRequired
   }),
   name: e.string,
-  label: e.string,
+  label: e.node,
   validationMessage: e.string,
   required: e.bool,
   valid: e.bool,

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: 1745495298,version:"11.0.0-develop.2",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: 1747664189,version:"11.0.0-develop.21",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: 1745495298,
-  version: "11.0.0-develop.2",
+  publishDate: 1747664189,
+  version: "11.0.0-develop.21",
   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": "11.0.0-develop.2",
+  "version": "11.0.0-develop.21",
   "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",
@@ -27,15 +27,15 @@
   "peerDependencies": {
     "@progress/kendo-drawing": "^1.21.2",
     "@progress/kendo-inputs-common": "^3.1.0",
-    "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-animation": "11.0.0-develop.2",
-    "@progress/kendo-react-buttons": "11.0.0-develop.2",
-    "@progress/kendo-react-common": "11.0.0-develop.2",
-    "@progress/kendo-react-dialogs": "11.0.0-develop.2",
-    "@progress/kendo-react-layout": "11.0.0-develop.2",
-    "@progress/kendo-react-intl": "11.0.0-develop.2",
-    "@progress/kendo-react-labels": "11.0.0-develop.2",
-    "@progress/kendo-react-popup": "11.0.0-develop.2",
+    "@progress/kendo-licensing": "^1.6.0",
+    "@progress/kendo-react-animation": "11.0.0-develop.21",
+    "@progress/kendo-react-buttons": "11.0.0-develop.21",
+    "@progress/kendo-react-common": "11.0.0-develop.21",
+    "@progress/kendo-react-dialogs": "11.0.0-develop.21",
+    "@progress/kendo-react-layout": "11.0.0-develop.21",
+    "@progress/kendo-react-intl": "11.0.0-develop.21",
+    "@progress/kendo-react-labels": "11.0.0-develop.21",
+    "@progress/kendo-react-popup": "11.0.0-develop.21",
     "@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": 1745495298,
+      "publishDate": 1747664189,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/rating/Rating.js

@@ -5,8 +5,8 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),u=require("prop-types"),l=require("@progress/kendo-react-common"),M=require("@progress/kendo-svg-icons"),Q=require("./RatingItem.js"),c=require("./rating-reducer.js"),d=require("./utils/index.js"),V=require("../messages/index.js"),U=require("@progress/kendo-react-intl");function Y(a){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const m in a)if(m!=="default"){const e=Object.getOwnPropertyDescriptor(a,m);Object.defineProperty(g,m,e.get?e:{enumerable:!0,get:()=>a[m]})}}return g.default=a,Object.freeze(g)}const n=Y(J),z=(a,g,m)=>{const[e,D]=n.useState(a);return[e,h=>{const i=c.ratingReducer(g.state||e,{...h,...g});m&&m(i,h.event),D(i)}]},F=l.createPropsContext(),S=n.forwardRef((a,g)=>{const m=l.usePropsContext(F,a),e={dir:s.dir,min:s.min,max:s.max,step:s.step,item:s.item,defaultValue:s.defaultValue,readonly:s.readonly,disabled:s.disabled,selection:s.selection,precision:s.precision,...m},D=U.useLocalization(),I=n.useRef(null),h=n.useRef(null),i=l.useDir(h,e.dir);n.useImperativeHandle(I,()=>({element:h.current,props:e})),n.useImperativeHandle(g,()=>I.current);const H=n.useCallback((t,o)=>{e.onChange&&I.current&&e.onChange.call(void 0,{value:t,target:I.current,syntheticEvent:o})},[e.onChange]),N=n.useMemo(()=>e.min!==void 0?e.min:s.min,[e.min]),R=n.useMemo(()=>e.max!==void 0?e.max:s.max,[e.max]),v=n.useMemo(()=>e.precision||s.precision,[e.precision]),r=n.useMemo(()=>e.step!==void 0?e.step:s.step,[e.step]),A=n.useMemo(()=>e.readonly||s.readonly,[e.readonly]),C=n.useMemo(()=>e.disabled||s.disabled,[e.disabled]),K=n.useMemo(()=>e.item||s.item,[e.item]),[G,f]=z(e.defaultValue!==void 0?e.defaultValue:s.defaultValue,{state:e.value,min:N,max:R,step:v==="half"?r/2:r},H),[w,E]=z(null,{state:e.value,min:N,max:R,step:v==="half"?r/2:r,precision:v}),p=n.useMemo(()=>e.value!==void 0?e.value:G,[e.value,G]),T=n.useMemo(()=>w,[w]),_=n.useMemo(()=>e.selection||s.selection,[e.selection]),k=n.useMemo(()=>r/(v==="half"?2:1),[r,v]),q=n.useCallback(t=>{if(!(!t.target||!t.target.element||A||C)){if(v==="half"){const o=t.target.element.getBoundingClientRect(),x=d.calcIsFirstHalf(i||"ltr",o,t.syntheticEvent.clientX)?d.toRound(t.target.value-r/2,k):t.target.value;f({type:c.RATING_ACTION.select,payload:x,event:t.syntheticEvent})}else f({type:c.RATING_ACTION.select,payload:t.target.value,event:t.syntheticEvent});if(e.onClick){const o={value:p,target:I.current,syntheticEvent:t.syntheticEvent};e.onClick.call(void 0,o)}}},[e.onClick,f,p]),B=n.useCallback(t=>{if(!(A||C)){switch(t.keyCode){case l.Keys.right:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.decrease:c.RATING_ACTION.increase,event:t});break;case l.Keys.left:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.increase:c.RATING_ACTION.decrease,event:t});break;case l.Keys.home:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.min:c.RATING_ACTION.max,event:t});break;case l.Keys.end:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.max:c.RATING_ACTION.min,event:t});break;case l.Keys.esc:t.preventDefault(),f({type:c.RATING_ACTION.deselect,event:t});break}e.onKeyDown&&e.onKeyDown.call(void 0,{value:p,target:I.current,syntheticEvent:t})}},[e.onKeyDown,f,p]),$=n.useCallback(t=>{if(e.onFocus){const o={target:I.current,syntheticEvent:t};e.onFocus.call(void 0,o)}},[e.onFocus]),W=n.useCallback(t=>{if(e.onBlur){const o={target:I.current,syntheticEvent:t};e.onBlur.call(void 0,o)}},[e.onBlur]),L=n.useCallback(t=>{if(!(!t.target||!t.target.element))if(v==="half"){const o=t.target.element.getBoundingClientRect(),x=d.calcIsFirstHalf(i||"ltr",o,t.syntheticEvent.clientX)?t.target.value-r/2:t.target.value;E({type:c.RATING_ACTION.select,payload:x,event:t.syntheticEvent})}else E({type:c.RATING_ACTION.select,payload:t.target.value,event:t.syntheticEvent})},[v,r,i]),j=n.useCallback(t=>{E({type:c.RATING_ACTION.reset,event:t.syntheticEvent})},[]),P=[],X=d.getRemainder(d.toRound(R-N,k),r);for(let t=N;t<=R;t=d.toRound(t+r,k)){const o=d.toRound(t+X,k),y=v==="half"?d.isHalf(o,T!==null?T:p!==null?p:0,r):!1,x=d.isSelected(o,p,r,_),O=d.isSelected(o,T!==null?T:p,r,_),b=d.isSelected(o,T,r,_);P.push(n.createElement(K,{key:o,value:o,dir:i,title:String(y?d.toRound(o-r/2,k):o),icon:e.icon,svgIcon:e.svgIcon,half:y,selected:x||O,hovered:b,onClick:q,onMouseMove:L,onMouseLeave:j},y&&n.createElement("span",{className:"k-rating-precision-complement"},!(e.icon||e.svgIconOutline)&&n.createElement(l.IconWrap,{name:"star-outline",icon:M.starOutlineIcon,style:{clipPath:`${i==="rtl"?"inset(0 50% 0 0)":"inset(0 0 0 50%)"}`},size:"xlarge"}),(e.icon||e.svgIconOutline)&&n.createElement(l.IconWrap,{name:l.toIconName(`${e.icon}-outline`),icon:e.svgIconOutline,size:"xlarge"})),y&&n.createElement("span",{className:"k-rating-precision-part"},!(e.icon||e.svgIcon)&&n.createElement(l.IconWrap,{name:"star",icon:M.starIcon,style:{clipPath:`${i==="rtl"?"inset(0 0 0 50%)":"inset(0 50% 0 0)"}`},size:"xlarge"}),(e.icon||e.svgIcon)&&n.createElement(l.IconWrap,{name:e.icon?l.toIconName(e.icon):void 0,icon:e.svgIcon,size:"xlarge"})),y&&n.createElement("span",{style:{width:"24px",height:"24px",display:"block"}}),!y&&!(e.icon||e.svgIcon)&&(b||O&&!b)&&n.createElement(l.IconWrap,{name:"star",icon:M.starIcon,size:"xlarge"})||!(e.icon||e.svgIcon)&&!b&&!O&&n.createElement(l.IconWrap,{name:"star-outline",icon:M.starOutlineIcon,size:"xlarge"})||(e.icon||e.svgIcon)&&(b||O&&!b)&&n.createElement(l.IconWrap,{name:e.icon,icon:e.svgIcon,size:"xlarge"})||(e.icon||e.svgIcon)&&!b&&n.createElement(l.IconWrap,{name:l.toIconName(`${e.icon}-outline`),icon:e.svgIconOutline,size:"xlarge"})))}return n.createElement("span",{id:e.id,style:e.style,ref:h,role:"slider",dir:i,tabIndex:l.getTabIndex(e.tabIndex,e.disabled,void 0),className:l.classNames("k-rating",{"k-rtl":i==="rtl","k-readonly":A,"k-disabled":C},e.className),onKeyDown:B,onFocus:$,onBlur:W,"aria-valuemin":N,"aria-valuemax":R,"aria-valuenow":p!==null?p:void 0,"aria-disabled":C?"true":void 0,"aria-label":D.toLanguageString(V.ratingAriaLabel,V.messages[V.ratingAriaLabel]),"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy},n.createElement("input",{id:"rating",className:"k-hidden",readOnly:A,disabled:C}),n.createElement("span",{className:"k-rating-container"},P),e.label&&n.createElement("span",{className:"k-rating-label"},e.label))}),Z={id:u.string,dir:u.oneOf(["ltr","rtl"]),selection:u.oneOf(["continues","single"]),precision:u.oneOf(["item","half"]),value:(a,g,m)=>a.value&&a.min&&a.max&&a.step&&!(a.precision==="half"?d.isCorrectValue(a.min,a.max,a.step/2,a.value):d.isCorrectValue(a.min,a.max,a.step,a.value))&&a.precision==="half"?new Error(`Invalid prop + ${g} supplied to ${m}.
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),u=require("prop-types"),l=require("@progress/kendo-react-common"),M=require("@progress/kendo-svg-icons"),Q=require("./RatingItem.js"),c=require("./rating-reducer.js"),d=require("./utils/index.js"),V=require("../messages/index.js"),U=require("@progress/kendo-react-intl");function Y(a){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const m in a)if(m!=="default"){const e=Object.getOwnPropertyDescriptor(a,m);Object.defineProperty(p,m,e.get?e:{enumerable:!0,get:()=>a[m]})}}return p.default=a,Object.freeze(p)}const n=Y(J),z=(a,p,m)=>{const[e,D]=n.useState(a);return[e,h=>{const i=c.ratingReducer(p.state||e,{...h,...p});m&&m(i,h.event),D(i)}]},F=l.createPropsContext(),S=n.forwardRef((a,p)=>{const m=l.usePropsContext(F,a),e={dir:s.dir,min:s.min,max:s.max,step:s.step,item:s.item,defaultValue:s.defaultValue,readonly:s.readonly,disabled:s.disabled,selection:s.selection,precision:s.precision,...m},D=U.useLocalization(),I=n.useRef(null),h=n.useRef(null),i=l.useDir(h,e.dir);n.useImperativeHandle(I,()=>({element:h.current,props:e})),n.useImperativeHandle(p,()=>I.current);const H=n.useCallback((t,o)=>{e.onChange&&I.current&&e.onChange.call(void 0,{value:t,target:I.current,syntheticEvent:o})},[e.onChange]),N=n.useMemo(()=>e.min!==void 0?e.min:s.min,[e.min]),R=n.useMemo(()=>e.max!==void 0?e.max:s.max,[e.max]),v=n.useMemo(()=>e.precision||s.precision,[e.precision]),r=n.useMemo(()=>e.step!==void 0?e.step:s.step,[e.step]),A=n.useMemo(()=>e.readonly||s.readonly,[e.readonly]),C=n.useMemo(()=>e.disabled||s.disabled,[e.disabled]),K=n.useMemo(()=>e.item||s.item,[e.item]),[G,f]=z(e.defaultValue!==void 0?e.defaultValue:s.defaultValue,{state:e.value,min:N,max:R,step:v==="half"?r/2:r},H),[w,E]=z(null,{state:e.value,min:N,max:R,step:v==="half"?r/2:r,precision:v}),g=n.useMemo(()=>e.value!==void 0?e.value:G,[e.value,G]),T=n.useMemo(()=>w,[w]),_=n.useMemo(()=>e.selection||s.selection,[e.selection]),k=n.useMemo(()=>r/(v==="half"?2:1),[r,v]),q=n.useCallback(t=>{if(!(!t.target||!t.target.element||A||C)){if(v==="half"){const o=t.target.element.getBoundingClientRect(),x=d.calcIsFirstHalf(i||"ltr",o,t.syntheticEvent.clientX)?d.toRound(t.target.value-r/2,k):t.target.value;f({type:c.RATING_ACTION.select,payload:x,event:t.syntheticEvent})}else f({type:c.RATING_ACTION.select,payload:t.target.value,event:t.syntheticEvent});if(e.onClick){const o={value:g,target:I.current,syntheticEvent:t.syntheticEvent};e.onClick.call(void 0,o)}}},[e.onClick,f,g]),B=n.useCallback(t=>{if(!(A||C)){switch(t.keyCode){case l.Keys.right:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.decrease:c.RATING_ACTION.increase,event:t});break;case l.Keys.left:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.increase:c.RATING_ACTION.decrease,event:t});break;case l.Keys.home:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.min:c.RATING_ACTION.max,event:t});break;case l.Keys.end:t.preventDefault(),f({type:i==="rtl"?c.RATING_ACTION.max:c.RATING_ACTION.min,event:t});break;case l.Keys.esc:t.preventDefault(),f({type:c.RATING_ACTION.deselect,event:t});break}e.onKeyDown&&e.onKeyDown.call(void 0,{value:g,target:I.current,syntheticEvent:t})}},[e.onKeyDown,f,g]),$=n.useCallback(t=>{if(e.onFocus){const o={target:I.current,syntheticEvent:t};e.onFocus.call(void 0,o)}},[e.onFocus]),W=n.useCallback(t=>{if(e.onBlur){const o={target:I.current,syntheticEvent:t};e.onBlur.call(void 0,o)}},[e.onBlur]),L=n.useCallback(t=>{if(!(!t.target||!t.target.element))if(v==="half"){const o=t.target.element.getBoundingClientRect(),x=d.calcIsFirstHalf(i||"ltr",o,t.syntheticEvent.clientX)?t.target.value-r/2:t.target.value;E({type:c.RATING_ACTION.select,payload:x,event:t.syntheticEvent})}else E({type:c.RATING_ACTION.select,payload:t.target.value,event:t.syntheticEvent})},[v,r,i]),j=n.useCallback(t=>{E({type:c.RATING_ACTION.reset,event:t.syntheticEvent})},[]),P=[],X=d.getRemainder(d.toRound(R-N,k),r);for(let t=N;t<=R;t=d.toRound(t+r,k)){const o=d.toRound(t+X,k),y=v==="half"?d.isHalf(o,T!==null?T:g!==null?g:0,r):!1,x=d.isSelected(o,g,r,_),O=d.isSelected(o,T!==null?T:g,r,_),b=d.isSelected(o,T,r,_);P.push(n.createElement(K,{key:o,value:o,dir:i,title:String(y?d.toRound(o-r/2,k):o),icon:e.icon,svgIcon:e.svgIcon,half:y,selected:x||O,hovered:b,onClick:q,onMouseMove:L,onMouseLeave:j},y&&n.createElement("span",{className:"k-rating-precision-complement"},!(e.icon||e.svgIconOutline)&&n.createElement(l.IconWrap,{name:"star-outline",icon:M.starOutlineIcon,style:{clipPath:`${i==="rtl"?"inset(0 50% 0 0)":"inset(0 0 0 50%)"}`},size:"xlarge"}),(e.icon||e.svgIconOutline)&&n.createElement(l.IconWrap,{name:l.toIconName(`${e.icon}-outline`),icon:e.svgIconOutline,size:"xlarge"})),y&&n.createElement("span",{className:"k-rating-precision-part"},!(e.icon||e.svgIcon)&&n.createElement(l.IconWrap,{name:"star",icon:M.starIcon,style:{clipPath:`${i==="rtl"?"inset(0 0 0 50%)":"inset(0 50% 0 0)"}`},size:"xlarge"}),(e.icon||e.svgIcon)&&n.createElement(l.IconWrap,{name:e.icon?l.toIconName(e.icon):void 0,icon:e.svgIcon,size:"xlarge"})),y&&n.createElement("span",{style:{width:"24px",height:"24px",display:"block"}}),!y&&!(e.icon||e.svgIcon)&&(b||O&&!b)&&n.createElement(l.IconWrap,{name:"star",icon:M.starIcon,size:"xlarge"})||!(e.icon||e.svgIcon)&&!b&&!O&&n.createElement(l.IconWrap,{name:"star-outline",icon:M.starOutlineIcon,size:"xlarge"})||(e.icon||e.svgIcon)&&(b||O&&!b)&&n.createElement(l.IconWrap,{name:e.icon,icon:e.svgIcon,size:"xlarge"})||(e.icon||e.svgIcon)&&!b&&n.createElement(l.IconWrap,{name:l.toIconName(`${e.icon}-outline`),icon:e.svgIconOutline,size:"xlarge"})))}return n.createElement("span",{id:e.id,style:e.style,ref:h,role:"slider",dir:i,tabIndex:l.getTabIndex(e.tabIndex,e.disabled,void 0),className:l.classNames("k-rating",{"k-rtl":i==="rtl","k-readonly":A,"k-disabled":C},e.className),onKeyDown:B,onFocus:$,onBlur:W,"aria-valuemin":N,"aria-valuemax":R,"aria-valuenow":g!==null?g:void 0,"aria-disabled":C?"true":void 0,"aria-label":D.toLanguageString(V.ratingAriaLabel,V.messages[V.ratingAriaLabel]),"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy},n.createElement("input",{id:"rating",className:"k-hidden",readOnly:A,disabled:C}),n.createElement("span",{className:"k-rating-container"},P),e.label&&n.createElement("span",{className:"k-rating-label"},e.label))}),Z={id:u.string,dir:u.oneOf(["ltr","rtl"]),selection:u.oneOf(["continues","single"]),precision:u.oneOf(["item","half"]),value:(a,p,m)=>a.value&&a.min&&a.max&&a.step&&!(a.precision==="half"?d.isCorrectValue(a.min,a.max,a.step/2,a.value):d.isCorrectValue(a.min,a.max,a.step,a.value))&&a.precision==="half"?new Error(`Invalid prop + ${p} supplied to ${m}.
                     The value of the { value } property is not correct, please check your values.
-                    `):null,defaultValue:u.number,min:u.number,max:u.number,step:(a,g,m)=>a.step!==void 0&&a.step<=0?new Error(`Invalid prop + ${g} supplied to ${m}.
+                    `):null,defaultValue:u.number,min:u.number,max:u.number,step:(a,p,m)=>a.step!==void 0&&a.step<=0?new Error(`Invalid prop + ${p} supplied to ${m}.
                 The value of the { step } property is cannot be equal or less than "0", please check your values.
-                `):null,hovered:u.number,label:u.string,readonly:u.bool,disabled:u.bool,half:u.bool,icon:u.string,svgIcon:l.svgIconPropType,svgIconOutline:l.svgIconPropType,ariaDescribedBy:u.string},s={dir:"ltr",min:1,max:5,step:1,item:Q.RatingItem,defaultValue:null,readonly:!1,disabled:!1,selection:"continues",precision:"item"};S.displayName="KendoReactRating";S.propTypes=Z;exports.Rating=S;exports.RatingPropsContext=F;
+                `):null,hovered:u.number,label:u.node,readonly:u.bool,disabled:u.bool,half:u.bool,icon:u.string,svgIcon:l.svgIconPropType,svgIconOutline:l.svgIconPropType,ariaDescribedBy:u.string},s={dir:"ltr",min:1,max:5,step:1,item:Q.RatingItem,defaultValue:null,readonly:!1,disabled:!1,selection:"continues",precision:"item"};S.displayName="KendoReactRating";S.propTypes=Z;exports.Rating=S;exports.RatingPropsContext=F;

package/rating/Rating.mjs

@@ -7,9 +7,9 @@
  */
 import * as a from "react";
 import r from "prop-types";
-import { createPropsContext as te, usePropsContext as ae, useDir as ne, Keys as R, IconWrap as y, toIconName as B, getTabIndex as le, classNames as se, svgIconPropType as S } from "@progress/kendo-react-common";
+import { createPropsContext as te, usePropsContext as ae, useDir as ne, Keys as R, IconWrap as y, toIconName as B, getTabIndex as le, classNames as oe, svgIconPropType as S } from "@progress/kendo-react-common";
 import { starOutlineIcon as $, starIcon as K } from "@progress/kendo-svg-icons";
-import { RatingItem as oe } from "./RatingItem.mjs";
+import { RatingItem as se } from "./RatingItem.mjs";
 import { RATING_ACTION as c, ratingReducer as ie } from "./rating-reducer.mjs";
 import { calcIsFirstHalf as L, toRound as D, getRemainder as re, isHalf as ce, isSelected as F, isCorrectValue as A } from "./utils/index.mjs";
 import { ratingAriaLabel as X, messages as ue } from "../messages/index.mjs";
@@ -17,23 +17,23 @@ import { useLocalization as me } from "@progress/kendo-react-intl";
 const q = (n, g, v) => {
   const [e, N] = a.useState(n);
   return [e, (h) => {
-    const o = ie(g.state || e, { ...h, ...g });
-    v && v(o, h.event), N(o);
+    const s = ie(g.state || e, { ...h, ...g });
+    v && v(s, h.event), N(s);
   }];
 }, de = te(), G = a.forwardRef((n, g) => {
   const v = ae(de, n), e = {
-    dir: s.dir,
-    min: s.min,
-    max: s.max,
-    step: s.step,
-    item: s.item,
-    defaultValue: s.defaultValue,
-    readonly: s.readonly,
-    disabled: s.disabled,
-    selection: s.selection,
-    precision: s.precision,
+    dir: o.dir,
+    min: o.min,
+    max: o.max,
+    step: o.step,
+    item: o.item,
+    defaultValue: o.defaultValue,
+    readonly: o.readonly,
+    disabled: o.disabled,
+    selection: o.selection,
+    precision: o.precision,
     ...v
-  }, N = me(), m = a.useRef(null), h = a.useRef(null), o = ne(h, e.dir);
+  }, N = me(), m = a.useRef(null), h = a.useRef(null), s = ne(h, e.dir);
   a.useImperativeHandle(m, () => ({
     element: h.current,
     props: e
@@ -47,8 +47,8 @@ const q = (n, g, v) => {
       });
     },
     [e.onChange]
-  ), I = a.useMemo(() => e.min !== void 0 ? e.min : s.min, [e.min]), x = a.useMemo(() => e.max !== void 0 ? e.max : s.max, [e.max]), d = a.useMemo(() => e.precision || s.precision, [e.precision]), i = a.useMemo(() => e.step !== void 0 ? e.step : s.step, [e.step]), V = a.useMemo(() => e.readonly || s.readonly, [e.readonly]), k = a.useMemo(() => e.disabled || s.disabled, [e.disabled]), _ = a.useMemo(() => e.item || s.item, [e.item]), [H, p] = q(
-    e.defaultValue !== void 0 ? e.defaultValue : s.defaultValue,
+  ), I = a.useMemo(() => e.min !== void 0 ? e.min : o.min, [e.min]), x = a.useMemo(() => e.max !== void 0 ? e.max : o.max, [e.max]), d = a.useMemo(() => e.precision || o.precision, [e.precision]), i = a.useMemo(() => e.step !== void 0 ? e.step : o.step, [e.step]), V = a.useMemo(() => e.readonly || o.readonly, [e.readonly]), k = a.useMemo(() => e.disabled || o.disabled, [e.disabled]), _ = a.useMemo(() => e.item || o.item, [e.item]), [H, p] = q(
+    e.defaultValue !== void 0 ? e.defaultValue : o.defaultValue,
     {
       state: e.value,
       min: I,
@@ -66,13 +66,13 @@ const q = (n, g, v) => {
     () => e.value !== void 0 ? e.value : H,
     [e.value, H]
   ), C = a.useMemo(() => T, [T]), z = a.useMemo(
-    () => e.selection || s.selection,
+    () => e.selection || o.selection,
     [e.selection]
   ), E = a.useMemo(() => i / (d === "half" ? 2 : 1), [i, d]), j = a.useCallback(
     (t) => {
       if (!(!t.target || !t.target.element || V || k)) {
         if (d === "half") {
-          const l = t.target.element.getBoundingClientRect(), M = L(o || "ltr", l, t.syntheticEvent.clientX) ? D(t.target.value - i / 2, E) : t.target.value;
+          const l = t.target.element.getBoundingClientRect(), M = L(s || "ltr", l, t.syntheticEvent.clientX) ? D(t.target.value - i / 2, E) : t.target.value;
           p({ type: c.select, payload: M, event: t.syntheticEvent });
         } else
           p({
@@ -97,25 +97,25 @@ const q = (n, g, v) => {
         switch (t.keyCode) {
           case R.right:
             t.preventDefault(), p({
-              type: o === "rtl" ? c.decrease : c.increase,
+              type: s === "rtl" ? c.decrease : c.increase,
               event: t
             });
             break;
           case R.left:
             t.preventDefault(), p({
-              type: o === "rtl" ? c.increase : c.decrease,
+              type: s === "rtl" ? c.increase : c.decrease,
               event: t
             });
             break;
           case R.home:
             t.preventDefault(), p({
-              type: o === "rtl" ? c.min : c.max,
+              type: s === "rtl" ? c.min : c.max,
               event: t
             });
             break;
           case R.end:
             t.preventDefault(), p({
-              type: o === "rtl" ? c.max : c.min,
+              type: s === "rtl" ? c.max : c.min,
               event: t
             });
             break;
@@ -160,7 +160,7 @@ const q = (n, g, v) => {
     (t) => {
       if (!(!t.target || !t.target.element))
         if (d === "half") {
-          const l = t.target.element.getBoundingClientRect(), M = L(o || "ltr", l, t.syntheticEvent.clientX) ? t.target.value - i / 2 : t.target.value;
+          const l = t.target.element.getBoundingClientRect(), M = L(s || "ltr", l, t.syntheticEvent.clientX) ? t.target.value - i / 2 : t.target.value;
           O({ type: c.select, payload: M, event: t.syntheticEvent });
         } else
           O({
@@ -169,7 +169,7 @@ const q = (n, g, v) => {
             event: t.syntheticEvent
           });
     },
-    [d, i, o]
+    [d, i, s]
   ), Z = a.useCallback((t) => {
     O({ type: c.reset, event: t.syntheticEvent });
   }, []), P = [], ee = re(D(x - I, E), i);
@@ -181,7 +181,7 @@ const q = (n, g, v) => {
         {
           key: l,
           value: l,
-          dir: o,
+          dir: s,
           title: String(f ? D(l - i / 2, E) : l),
           icon: e.icon,
           svgIcon: e.svgIcon,
@@ -197,7 +197,7 @@ const q = (n, g, v) => {
           {
             name: "star-outline",
             icon: $,
-            style: { clipPath: `${o === "rtl" ? "inset(0 50% 0 0)" : "inset(0 0 0 50%)"}` },
+            style: { clipPath: `${s === "rtl" ? "inset(0 50% 0 0)" : "inset(0 0 0 50%)"}` },
             size: "xlarge"
           }
         ), (e.icon || e.svgIconOutline) && /* @__PURE__ */ a.createElement(
@@ -213,7 +213,7 @@ const q = (n, g, v) => {
           {
             name: "star",
             icon: K,
-            style: { clipPath: `${o === "rtl" ? "inset(0 0 0 50%)" : "inset(0 50% 0 0)"}` },
+            style: { clipPath: `${s === "rtl" ? "inset(0 0 0 50%)" : "inset(0 50% 0 0)"}` },
             size: "xlarge"
           }
         ), (e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
@@ -243,12 +243,12 @@ const q = (n, g, v) => {
       style: e.style,
       ref: h,
       role: "slider",
-      dir: o,
+      dir: s,
       tabIndex: le(e.tabIndex, e.disabled, void 0),
-      className: se(
+      className: oe(
         "k-rating",
         {
-          "k-rtl": o === "rtl",
+          "k-rtl": s === "rtl",
           "k-readonly": V,
           "k-disabled": k
         },
@@ -288,7 +288,7 @@ const q = (n, g, v) => {
                 `
   ) : null,
   hovered: r.number,
-  label: r.string,
+  label: r.node,
   readonly: r.bool,
   disabled: r.bool,
   half: r.bool,
@@ -296,12 +296,12 @@ const q = (n, g, v) => {
   svgIcon: S,
   svgIconOutline: S,
   ariaDescribedBy: r.string
-}, s = {
+}, o = {
   dir: "ltr",
   min: 1,
   max: 5,
   step: 1,
-  item: oe,
+  item: se,
   defaultValue: null,
   readonly: !1,
   disabled: !1,