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

package/index.d.mts

@@ -220,12 +220,9 @@ export declare type ColorGradient = ColorGradientHandle;
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorGradient />;
- *     }
+ * const App = () => {
+ *     return <ColorGradient />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const ColorGradient: React_2.ForwardRefExoticComponent<ColorGradientProps & React_2.RefAttributes<any>>;
@@ -297,14 +294,9 @@ export declare interface ColorGradientProps {
      *
      * @example
      * ```jsx
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *           <ColorGradient disabled={true} />
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * const App = () => (
+     *     <ColorGradient disabled={true} />
+     * );
      * ```
      */
     disabled?: boolean;
@@ -619,12 +611,9 @@ export declare type ColorPalette = ColorPaletteHandle;
  * Obtaining the `ref` returns an object of type [ColorPaletteHandle]({% slug api_inputs_colorpalettehandle %}).
  *
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPalette palette='basic' />;
- *     }
+ * const App = () => {
+ *     return <ColorPalette palette='basic' />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const ColorPalette: React_2.ForwardRefExoticComponent<ColorPaletteProps & React_2.RefAttributes<any>>;
@@ -700,14 +689,9 @@ export declare interface ColorPaletteProps {
      *
      * @example
      * ```jsx
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *           <ColorPalette disabled={true} />
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * const App = () => (
+     *     <ColorPalette disabled={true} />
+     * );
      * ```
      */
     disabled?: boolean;
@@ -853,12 +837,9 @@ export declare class ColorPaletteWithoutContext extends React_2.Component<ColorP
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPicker />;
- *     }
+ * const App = () => {
+ *     return <ColorPicker />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const ColorPicker: React_2.ForwardRefExoticComponent<ColorPickerProps & React_2.RefAttributes<ColorPickerHandle | null>>;
@@ -1262,12 +1243,9 @@ declare type Direction = 'ltr' | 'rtl';
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <FlatColorPicker />;
- *     }
+ * const App = () => {
+ *     return <FlatColorPicker />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const FlatColorPicker: React_2.ForwardRefExoticComponent<FlatColorPickerProps & React_2.RefAttributes<FlatColorPickerHandle | null>>;
@@ -1394,7 +1372,7 @@ export declare interface FlatColorPickerProps {
     /**
      * Sets custom header component.
      */
-    header?: React_2.ComponentType;
+    header?: React_2.ComponentType | React_2.ReactNode;
     /**
      * Specifies whether clear button will be rendered in the header.
      */
@@ -1785,28 +1763,19 @@ export declare interface MaskedTextBoxHandle extends Pick<MaskedTextBoxWithoutCo
      * Gets the element of the MaskedTextBox.
      *
      * ```jsx
-     * class App extends React.Component {
-     * constructor(props) {
-     *  super(props);
-     * }
-     * element = null;
-     * render() {
-     *  return (
+     * const App = () => {
+     *   const [element, setElement] = React.useState(null);
+     *
+     *   return (
      *      <div>
      *          <MaskedTextBox
      *              ref={(component) =>
-     *                  this.element = component ? component.element : null}
+     *                  setElement(component ? component.element : null)}
      *          />
-     *          <button onClick={() => console.log(this.element)}>console.log the element</button>
+     *          <button onClick={() => console.log(element)}>console.log the element</button>
      *      </div>
-     *  );
-     * }
+     *   );
      * }
-     *
-     * ReactDOM.render(
-     * <App />,
-     * document.getElementsByTagName('my-app')[0]
-     * );
      * ```
      */
     element: HTMLInputElement | null;
@@ -2150,28 +2119,19 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
      *
      * @example
      * ```jsx
-     * class App extends React.Component {
-     *     constructor(props) {
-     *         super(props);
-     *     }
-     *     element = null;
-     *     render() {
-     *         return (
-     *             <div>
-     *                 <MaskedTextBox
-     *                     ref={(component) =>
-     *                         this.element = component ? component.element : null}
-     *                 />
-     *                 <button onClick={() => console.log(this.element)}>console.log the element</button>
-     *             </div>
-     *         );
-     *     }
-     * }
+     * const App = () => {
+     *     const [element, setElement] = React.useState(null);
      *
-     * ReactDOM.render(
-     *     <App />,
-     *     document.getElementsByTagName('my-app')[0]
-     * );
+     *     return (
+     *         <div>
+     *             <MaskedTextBox
+     *                 ref={(component) =>
+     *                     setElement(component ? component.element : null)}
+     *             />
+     *             <button onClick={() => console.log(element)}>console.log the element</button>
+     *         </div>
+     *     );
+     * }
      * ```
      */
     get element(): HTMLInputElement | null;
@@ -3386,7 +3346,7 @@ export declare interface RatingMouseEvent {
 }
 
 /**
- * Represents the properties of [Rating](% slug api_inputs_rating %) component.
+ * Represents the properties of [Rating]({% slug api_inputs_rating %}) component.
  */
 export declare interface RatingProps extends FormComponentProps {
     /**
@@ -4798,12 +4758,9 @@ export declare class SwitchWithoutContext extends React_2.Component<SwitchProps,
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <TextArea />;
- *     }
+ * const App = () => {
+ *     return <TextArea />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const TextArea: React_2.ForwardRefExoticComponent<TextAreaProps & React_2.RefAttributes<TextAreaHandle | null>>;

package/index.d.ts

@@ -220,12 +220,9 @@ export declare type ColorGradient = ColorGradientHandle;
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorGradient />;
- *     }
+ * const App = () => {
+ *     return <ColorGradient />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const ColorGradient: React_2.ForwardRefExoticComponent<ColorGradientProps & React_2.RefAttributes<any>>;
@@ -297,14 +294,9 @@ export declare interface ColorGradientProps {
      *
      * @example
      * ```jsx
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *           <ColorGradient disabled={true} />
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * const App = () => (
+     *     <ColorGradient disabled={true} />
+     * );
      * ```
      */
     disabled?: boolean;
@@ -619,12 +611,9 @@ export declare type ColorPalette = ColorPaletteHandle;
  * Obtaining the `ref` returns an object of type [ColorPaletteHandle]({% slug api_inputs_colorpalettehandle %}).
  *
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPalette palette='basic' />;
- *     }
+ * const App = () => {
+ *     return <ColorPalette palette='basic' />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const ColorPalette: React_2.ForwardRefExoticComponent<ColorPaletteProps & React_2.RefAttributes<any>>;
@@ -700,14 +689,9 @@ export declare interface ColorPaletteProps {
      *
      * @example
      * ```jsx
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *           <ColorPalette disabled={true} />
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * const App = () => (
+     *     <ColorPalette disabled={true} />
+     * );
      * ```
      */
     disabled?: boolean;
@@ -853,12 +837,9 @@ export declare class ColorPaletteWithoutContext extends React_2.Component<ColorP
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPicker />;
- *     }
+ * const App = () => {
+ *     return <ColorPicker />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const ColorPicker: React_2.ForwardRefExoticComponent<ColorPickerProps & React_2.RefAttributes<ColorPickerHandle | null>>;
@@ -1262,12 +1243,9 @@ declare type Direction = 'ltr' | 'rtl';
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <FlatColorPicker />;
- *     }
+ * const App = () => {
+ *     return <FlatColorPicker />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const FlatColorPicker: React_2.ForwardRefExoticComponent<FlatColorPickerProps & React_2.RefAttributes<FlatColorPickerHandle | null>>;
@@ -1394,7 +1372,7 @@ export declare interface FlatColorPickerProps {
     /**
      * Sets custom header component.
      */
-    header?: React_2.ComponentType;
+    header?: React_2.ComponentType | React_2.ReactNode;
     /**
      * Specifies whether clear button will be rendered in the header.
      */
@@ -1785,28 +1763,19 @@ export declare interface MaskedTextBoxHandle extends Pick<MaskedTextBoxWithoutCo
      * Gets the element of the MaskedTextBox.
      *
      * ```jsx
-     * class App extends React.Component {
-     * constructor(props) {
-     *  super(props);
-     * }
-     * element = null;
-     * render() {
-     *  return (
+     * const App = () => {
+     *   const [element, setElement] = React.useState(null);
+     *
+     *   return (
      *      <div>
      *          <MaskedTextBox
      *              ref={(component) =>
-     *                  this.element = component ? component.element : null}
+     *                  setElement(component ? component.element : null)}
      *          />
-     *          <button onClick={() => console.log(this.element)}>console.log the element</button>
+     *          <button onClick={() => console.log(element)}>console.log the element</button>
      *      </div>
-     *  );
-     * }
+     *   );
      * }
-     *
-     * ReactDOM.render(
-     * <App />,
-     * document.getElementsByTagName('my-app')[0]
-     * );
      * ```
      */
     element: HTMLInputElement | null;
@@ -2150,28 +2119,19 @@ export declare class MaskedTextBoxWithoutContext extends React_2.Component<Maske
      *
      * @example
      * ```jsx
-     * class App extends React.Component {
-     *     constructor(props) {
-     *         super(props);
-     *     }
-     *     element = null;
-     *     render() {
-     *         return (
-     *             <div>
-     *                 <MaskedTextBox
-     *                     ref={(component) =>
-     *                         this.element = component ? component.element : null}
-     *                 />
-     *                 <button onClick={() => console.log(this.element)}>console.log the element</button>
-     *             </div>
-     *         );
-     *     }
-     * }
+     * const App = () => {
+     *     const [element, setElement] = React.useState(null);
      *
-     * ReactDOM.render(
-     *     <App />,
-     *     document.getElementsByTagName('my-app')[0]
-     * );
+     *     return (
+     *         <div>
+     *             <MaskedTextBox
+     *                 ref={(component) =>
+     *                     setElement(component ? component.element : null)}
+     *             />
+     *             <button onClick={() => console.log(element)}>console.log the element</button>
+     *         </div>
+     *     );
+     * }
      * ```
      */
     get element(): HTMLInputElement | null;
@@ -3386,7 +3346,7 @@ export declare interface RatingMouseEvent {
 }
 
 /**
- * Represents the properties of [Rating](% slug api_inputs_rating %) component.
+ * Represents the properties of [Rating]({% slug api_inputs_rating %}) component.
  */
 export declare interface RatingProps extends FormComponentProps {
     /**
@@ -4798,12 +4758,9 @@ export declare class SwitchWithoutContext extends React_2.Component<SwitchProps,
  *
  * @example
  * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <TextArea />;
- *     }
+ * const App = () => {
+ *     return <TextArea />;
  * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
 export declare const TextArea: React_2.ForwardRefExoticComponent<TextAreaProps & React_2.RefAttributes<TextAreaHandle | null>>;

package/maskedtextbox/MaskedTextBox.mjs

@@ -56,28 +56,19 @@ const a = class a extends p.Component {
    *
    * @example
    * ```jsx
-   * class App extends React.Component {
-   *     constructor(props) {
-   *         super(props);
-   *     }
-   *     element = null;
-   *     render() {
-   *         return (
-   *             <div>
-   *                 <MaskedTextBox
-   *                     ref={(component) =>
-   *                         this.element = component ? component.element : null}
-   *                 />
-   *                 <button onClick={() => console.log(this.element)}>console.log the element</button>
-   *             </div>
-   *         );
-   *     }
-   * }
+   * const App = () => {
+   *     const [element, setElement] = React.useState(null);
    *
-   * ReactDOM.render(
-   *     <App />,
-   *     document.getElementsByTagName('my-app')[0]
-   * );
+   *     return (
+   *         <div>
+   *             <MaskedTextBox
+   *                 ref={(component) =>
+   *                     setElement(component ? component.element : null)}
+   *             />
+   *             <button onClick={() => console.log(element)}>console.log the element</button>
+   *         </div>
+   *     );
+   * }
    * ```
    */
   get element() {

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=Object.freeze({name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1755511495,version:"12.0.0-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=Object.freeze({name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1756120816,version:"12.0.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 = Object.freeze({
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1755511495,
-  version: "12.0.0-develop.1",
+  publishDate: 1756120816,
+  version: "12.0.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": "12.0.0-develop.1",
+  "version": "12.0.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.7.0",
-    "@progress/kendo-react-animation": "12.0.0-develop.1",
-    "@progress/kendo-react-buttons": "12.0.0-develop.1",
-    "@progress/kendo-react-common": "12.0.0-develop.1",
-    "@progress/kendo-react-dialogs": "12.0.0-develop.1",
-    "@progress/kendo-react-layout": "12.0.0-develop.1",
-    "@progress/kendo-react-intl": "12.0.0-develop.1",
-    "@progress/kendo-react-labels": "12.0.0-develop.1",
-    "@progress/kendo-react-popup": "12.0.0-develop.1",
+    "@progress/kendo-react-animation": "12.0.0-develop.10",
+    "@progress/kendo-react-buttons": "12.0.0-develop.10",
+    "@progress/kendo-react-common": "12.0.0-develop.10",
+    "@progress/kendo-react-dialogs": "12.0.0-develop.10",
+    "@progress/kendo-react-layout": "12.0.0-develop.10",
+    "@progress/kendo-react-intl": "12.0.0-develop.10",
+    "@progress/kendo-react-labels": "12.0.0-develop.10",
+    "@progress/kendo-react-popup": "12.0.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": 1755511495,
+      "publishDate": 1756120816,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/switch/Switch.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 C=require("react"),s=require("prop-types"),i=require("@progress/kendo-react-common"),S=require("@progress/kendo-react-intl"),p=require("../messages/index.js");function N(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(a,e,t.get?t:{enumerable:!0,get:()=>o[e]})}}return a.default=o,Object.freeze(a)}const r=N(C),n=class n extends r.Component{constructor(a){super(a),this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||this.defaultValidationMessage.toLanguageString(p.switchValidation,p.messages[p.switchValidation]))},this.limit=(e,t,d)=>{const h=d.offsetWidth,l=t.offsetWidth;return e<0?0:e>h-l?h-l:e},this.toggle=(e,t)=>{this.setState({checked:e}),this.valueDuringOnChange=e,i.dispatchEvent(this.props.onChange,t,this,{value:e}),this.valueDuringOnChange=void 0},this._element=null,this._wrapper=null,this._input=null,this._id=this.props.id,this.defaultValidationMessage=S.provideLocalizationService(this),this.focus=()=>{this.actionElement&&this.actionElement.focus()},this.dummyInput=e=>r.createElement("input",{type:"checkbox",checked:this.props.checked,ref:t=>{this._input=t},tabIndex:-1,"aria-hidden":!0,value:e,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"},onChange:i.noop,name:this.name||void 0}),this.handleClick=e=>{this.eventTimeStamp!==e.timeStamp&&(this.eventTimeStamp=e.timeStamp,this.toggle(!this.value,e))},this.handleKeyDown=e=>{if(this.props.disabled)return;const{keyCode:t}=e;(t===i.Keys.space||t===i.Keys.enter)&&(this.toggle(!this.value,e),e.preventDefault())},this.handleWrapperFocus=e=>{if(this.props.disabled)return;this.setState({focused:!0});const{onFocus:t}=this.props;t&&t.call(void 0,e)},this.handleWrapperBlur=e=>{if(this.props.disabled)return;this.setState({focused:!1});const{onBlur:t}=this.props;t&&t.call(void 0,e)},this.state={checked:a.defaultChecked||n.defaultProps.defaultChecked,focused:!1}}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.checked!==void 0?this.props.checked:this.state.checked}get element(){return this._element}get actionElement(){return this._wrapper}get name(){return this.props.name}get validity(){const a=this.props.validationMessage!==void 0,e=this.props.valid!==void 0?this.props.valid:this.props.required?!!this.value:!0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:a,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}componentDidMount(){this.setValidity(),this.forceUpdate()}componentDidUpdate(){this.setValidity()}render(){const{focused:a}=this.state,{dir:e,disabled:t,trackRounded:d,thumbRounded:h,size:l,offLabel:m,onLabel:f,tabIndex:y}=this.props;this.dir=e||this.element&&getComputedStyle(this.element).direction||void 0;const v=!this.validityStyles||this.validity.valid,k=i.classNames("k-switch",{[`k-switch-${i.kendoThemeMaps.sizeMap[l]||l}`]:l,"k-switch-on":this.value,"k-switch-off":!this.value,"k-focus":a,"k-disabled":t,"k-invalid":!v},this.props.className),w={"aria-checked":this.value,"aria-disabled":t||void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.required};return r.createElement("span",{ref:u=>{this._wrapper=u},role:"switch",...w,className:k,dir:this.dir,onKeyDown:this.handleKeyDown,onClick:this.handleClick,onBlur:this.handleWrapperBlur,onFocus:this.handleWrapperFocus,tabIndex:i.getTabIndex(y,t,void 0),accessKey:this.props.accessKey,id:this.props.id||this._id},r.createElement("span",{className:i.classNames("k-switch-track",{[`k-rounded-${i.kendoThemeMaps.roundedMap[d]||d}`]:d}),ref:u=>{this._element=u}},this.dummyInput(this.value),f?r.createElement("span",{className:"k-switch-label-on"},f):"",m?r.createElement("span",{className:"k-switch-label-off"},m):""),r.createElement("span",{className:"k-switch-thumb-wrap"},r.createElement("span",{className:i.classNames("k-switch-thumb",{[`k-rounded-${h}`]:h})})))}};n.displayName="Switch",n.propTypes={accessKey:s.string,checked:s.bool,className:s.string,disabled:s.bool,defaultChecked:s.bool,size:s.oneOf([null,"small","medium","large"]),trackRounded:s.oneOf([null,"small","medium","large","full"]),thumbRounded:s.oneOf([null,"small","medium","large","full"]),dir:s.string,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,offLabel:s.string,required:s.bool,tabIndex:s.number,valid:s.bool,validate:s.bool,validationMessage:s.string,onBlur:s.any,onChange:s.any,onFocus:s.any,onLabel:s.string},n.defaultProps={disabled:!1,defaultChecked:!1,size:"medium",trackRounded:"full",thumbRounded:"full",offLabel:"OFF",onBlur:i.noop,onFocus:i.noop,onLabel:"ON",validityStyles:!0};let c=n;const g=i.createPropsContext(),b=i.withIdHOC(i.withPropsContext(g,c));b.displayName="KendoReactSwitch";exports.Switch=b;exports.SwitchPropsContext=g;exports.SwitchWithoutContext=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),s=require("prop-types"),i=require("@progress/kendo-react-common"),S=require("@progress/kendo-react-intl"),p=require("../messages/index.js");function N(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const r=N(C),n=class n extends r.Component{constructor(a){super(a),this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||this.defaultValidationMessage.toLanguageString(p.switchValidation,p.messages[p.switchValidation]))},this.limit=(e,t,h)=>{const l=h.offsetWidth,o=t.offsetWidth;return e<0?0:e>l-o?l-o:e},this.toggle=(e,t)=>{this.setState({checked:e}),this.valueDuringOnChange=e,i.dispatchEvent(this.props.onChange,t,this,{value:e}),this.valueDuringOnChange=void 0},this._element=null,this._wrapper=null,this._input=null,this._id=this.props.id,this.defaultValidationMessage=S.provideLocalizationService(this),this.focus=()=>{this.actionElement&&this.actionElement.focus()},this.dummyInput=e=>r.createElement("input",{type:"checkbox",checked:this.props.checked,ref:t=>{this._input=t},tabIndex:-1,"aria-hidden":!0,value:e,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"},onChange:i.noop,name:this.name||void 0}),this.handleClick=e=>{this.eventTimeStamp!==e.timeStamp&&(this.eventTimeStamp=e.timeStamp,this.toggle(!this.value,e))},this.handleKeyDown=e=>{if(this.props.disabled)return;const{keyCode:t}=e;(t===i.Keys.space||t===i.Keys.enter)&&(this.toggle(!this.value,e),e.preventDefault())},this.handleWrapperFocus=e=>{if(this.props.disabled)return;this.setState({focused:!0});const{onFocus:t}=this.props;t&&t.call(void 0,e)},this.handleWrapperBlur=e=>{if(this.props.disabled)return;this.setState({focused:!1});const{onBlur:t}=this.props;t&&t.call(void 0,e)},this.state={checked:a.defaultChecked||n.defaultProps.defaultChecked,focused:!1}}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.checked!==void 0?this.props.checked:this.state.checked}get element(){return this._element}get actionElement(){return this._wrapper}get name(){return this.props.name}get validity(){const a=this.props.validationMessage!==void 0,e=this.props.valid!==void 0?this.props.valid:this.props.required?!!this.value:!0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:a,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}componentDidMount(){this.setValidity(),this.forceUpdate()}componentDidUpdate(){this.setValidity()}render(){const{focused:a}=this.state,{dir:e,disabled:t,trackRounded:h,thumbRounded:l,size:o,offLabel:m,onLabel:f,tabIndex:y}=this.props;this.dir=e||this.element&&getComputedStyle(this.element).direction||void 0;const v=!this.validityStyles||this.validity.valid,k=i.classNames("k-switch",{[`k-switch-${i.kendoThemeMaps.sizeMap[o]||o}`]:o,"k-switch-on":this.value,"k-switch-off":!this.value,"k-focus":a,"k-disabled":t,"k-invalid":!v},this.props.className),w={"aria-checked":this.value,"aria-disabled":t||void 0,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.required};return r.createElement("span",{ref:u=>{this._wrapper=u},role:"switch",...w,className:k,dir:this.dir,onKeyDown:this.handleKeyDown,onClick:this.handleClick,onBlur:this.handleWrapperBlur,onFocus:this.handleWrapperFocus,tabIndex:i.getTabIndex(y,t,void 0),accessKey:this.props.accessKey,id:this.props.id||this._id},r.createElement("span",{className:i.classNames("k-switch-track",{[`k-rounded-${i.kendoThemeMaps.roundedMap[h]||h}`]:h}),ref:u=>{this._element=u}},this.dummyInput(this.value),f?r.createElement("span",{className:"k-switch-label-on"},f):"",m?r.createElement("span",{className:"k-switch-label-off"},m):""),r.createElement("span",{className:"k-switch-thumb-wrap"},r.createElement("span",{className:i.classNames("k-switch-thumb",{[`k-rounded-${i.kendoThemeMaps.roundedMap[l]||l}`]:l})})))}};n.displayName="Switch",n.propTypes={accessKey:s.string,checked:s.bool,className:s.string,disabled:s.bool,defaultChecked:s.bool,size:s.oneOf([null,"small","medium","large"]),trackRounded:s.oneOf([null,"small","medium","large","full"]),thumbRounded:s.oneOf([null,"small","medium","large","full"]),dir:s.string,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,offLabel:s.string,required:s.bool,tabIndex:s.number,valid:s.bool,validate:s.bool,validationMessage:s.string,onBlur:s.any,onChange:s.any,onFocus:s.any,onLabel:s.string},n.defaultProps={disabled:!1,defaultChecked:!1,size:"medium",trackRounded:"full",thumbRounded:"full",offLabel:"OFF",onBlur:i.noop,onFocus:i.noop,onLabel:"ON",validityStyles:!0};let c=n;const g=i.createPropsContext(),b=i.withIdHOC(i.withPropsContext(g,c));b.displayName="KendoReactSwitch";exports.Switch=b;exports.SwitchPropsContext=g;exports.SwitchWithoutContext=c;

package/switch/Switch.mjs

@@ -7,9 +7,9 @@
  */
 import * as s from "react";
 import t from "prop-types";
-import { dispatchEvent as C, noop as h, Keys as f, classNames as p, kendoThemeMaps as v, getTabIndex as S, createPropsContext as N, withIdHOC as D, withPropsContext as E } from "@progress/kendo-react-common";
+import { dispatchEvent as C, noop as h, Keys as v, classNames as p, kendoThemeMaps as c, getTabIndex as S, createPropsContext as N, withIdHOC as D, withPropsContext as E } from "@progress/kendo-react-common";
 import { provideLocalizationService as L } from "@progress/kendo-react-intl";
-import { switchValidation as g, messages as B } from "../messages/index.mjs";
+import { switchValidation as g, messages as M } from "../messages/index.mjs";
 const a = class a extends s.Component {
   /**
    * @hidden
@@ -17,11 +17,11 @@ const a = class a extends s.Component {
   constructor(r) {
     super(r), this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || this.defaultValidationMessage.toLanguageString(g, B[g])
+        this.validity.valid ? "" : this.props.validationMessage || this.defaultValidationMessage.toLanguageString(g, M[g])
       );
-    }, this.limit = (e, i, o) => {
-      const n = o.offsetWidth, l = i.offsetWidth;
-      return e < 0 ? 0 : e > n - l ? n - l : e;
+    }, this.limit = (e, i, n) => {
+      const l = n.offsetWidth, o = i.offsetWidth;
+      return e < 0 ? 0 : e > l - o ? l - o : e;
     }, this.toggle = (e, i) => {
       this.setState({ checked: e }), this.valueDuringOnChange = e, C(this.props.onChange, i, this, { value: e }), this.valueDuringOnChange = void 0;
     }, this._element = null, this._wrapper = null, this._input = null, this._id = this.props.id, this.defaultValidationMessage = L(this), this.focus = () => {
@@ -47,7 +47,7 @@ const a = class a extends s.Component {
       if (this.props.disabled)
         return;
       const { keyCode: i } = e;
-      (i === f.space || i === f.enter) && (this.toggle(!this.value, e), e.preventDefault());
+      (i === v.space || i === v.enter) && (this.toggle(!this.value, e), e.preventDefault());
     }, this.handleWrapperFocus = (e) => {
       if (this.props.disabled)
         return;
@@ -122,12 +122,12 @@ const a = class a extends s.Component {
    * @hidden
    */
   render() {
-    const { focused: r } = this.state, { dir: e, disabled: i, trackRounded: o, thumbRounded: n, size: l, offLabel: u, onLabel: m, tabIndex: b } = this.props;
+    const { focused: r } = this.state, { dir: e, disabled: i, trackRounded: n, thumbRounded: l, size: o, offLabel: m, onLabel: f, tabIndex: b } = this.props;
     this.dir = e || this.element && getComputedStyle(this.element).direction || void 0;
     const y = !this.validityStyles || this.validity.valid, k = p(
       "k-switch",
       {
-        [`k-switch-${v.sizeMap[l] || l}`]: l,
+        [`k-switch-${c.sizeMap[o] || o}`]: o,
         "k-switch-on": this.value,
         "k-switch-off": !this.value,
         "k-focus": r,
@@ -165,17 +165,17 @@ const a = class a extends s.Component {
         "span",
         {
           className: p("k-switch-track", {
-            [`k-rounded-${v.roundedMap[o] || o}`]: o
+            [`k-rounded-${c.roundedMap[n] || n}`]: n
           }),
           ref: (d) => {
             this._element = d;
           }
         },
         this.dummyInput(this.value),
-        m ? /* @__PURE__ */ s.createElement("span", { className: "k-switch-label-on" }, m) : "",
-        u ? /* @__PURE__ */ s.createElement("span", { className: "k-switch-label-off" }, u) : ""
+        f ? /* @__PURE__ */ s.createElement("span", { className: "k-switch-label-on" }, f) : "",
+        m ? /* @__PURE__ */ s.createElement("span", { className: "k-switch-label-off" }, m) : ""
       ),
-      /* @__PURE__ */ s.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ s.createElement("span", { className: p("k-switch-thumb", { [`k-rounded-${n}`]: n }) }))
+      /* @__PURE__ */ s.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ s.createElement("span", { className: p("k-switch-thumb", { [`k-rounded-${c.roundedMap[l] || l}`]: l }) }))
     );
   }
 };
@@ -214,16 +214,16 @@ a.displayName = "Switch", a.propTypes = {
   onLabel: "ON",
   validityStyles: !0
 };
-let c = a;
-const M = N(), O = D(
+let u = a;
+const B = N(), O = D(
   E(
-    M,
-    c
+    B,
+    u
   )
 );
 O.displayName = "KendoReactSwitch";
 export {
   O as Switch,
-  M as SwitchPropsContext,
-  c as SwitchWithoutContext
+  B as SwitchPropsContext,
+  u as SwitchWithoutContext
 };