@progress/kendo-react-inputs 13.4.0-develop.2 → 13.4.0-develop.4

package/switch/Switch.d.ts

@@ -5,14 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { default as PropTypes } from 'prop-types';
-import { BaseEvent, FormComponent, FormComponentProps, FormComponentValidity } from '@progress/kendo-react-common';
+import { BaseEvent, FormComponentProps, FormComponentValidity } from '@progress/kendo-react-common';
 import { ToggleBaseProps } from '../interfaces/ToggleBaseProps.js';
 import * as React from 'react';
 /**
  * The arguments for the `onChange` Switch event.
  */
-export interface SwitchChangeEvent extends BaseEvent<Switch> {
+export interface SwitchChangeEvent extends BaseEvent<SwitchHandle> {
     /**
      * The new value of the Switch.
      */
@@ -103,7 +102,7 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
      * - large
      * - null&mdash;Does not set a size `className`.
      *
-     * @default `medium`
+     * @default undefined (theme-controlled)
      * @example
      * ```jsx
      * <Switch size="large" />
@@ -126,7 +125,7 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
      * <Switch trackRounded="medium" />
      * ```
      */
-    trackRounded?: 'small' | 'medium' | 'large' | 'full';
+    trackRounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
     /**
      * Configures the `thumbRounded` property of the Switch.
      *
@@ -143,7 +142,7 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
      * <Switch thumbRounded="full" />
      * ```
      */
-    thumbRounded?: 'small' | 'medium' | 'large' | 'full';
+    thumbRounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
     /**
      * Identifies the element(s) which will describe the component.
      * For example these elements could contain error or hint message.
@@ -236,124 +235,8 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
      */
     ariaLabel?: string;
 }
-/**
- * @hidden
- */
-export interface SwitchState {
-    checked: boolean;
-    focused: boolean;
-}
 /** @hidden */
-export declare class SwitchWithoutContext extends React.Component<SwitchProps, SwitchState> implements FormComponent {
-    static displayName: string;
-    /**
-     * Gets the value of the Switch.
-     */
-    get value(): boolean;
-    get element(): HTMLSpanElement | null;
-    get actionElement(): HTMLSpanElement | null;
-    /**
-     * Gets the `name` property of the Switch.
-     */
-    get name(): string | undefined;
-    /**
-     * Represents the validity state into which the Switch is set.
-     */
-    get validity(): FormComponentValidity;
-    /**
-     * @hidden
-     */
-    protected get validityStyles(): boolean;
-    /**
-     * @hidden
-     */
-    protected get required(): boolean;
-    /**
-     * @hidden
-     */
-    protected setValidity: () => void;
-    protected limit: (offset: number, drag: HTMLSpanElement, wrapper: HTMLSpanElement) => number;
-    protected toggle: (value: boolean, event: any) => void;
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        accessKey: PropTypes.Requireable<string>;
-        checked: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        defaultChecked: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>;
-        trackRounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | undefined>;
-        thumbRounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | undefined>;
-        dir: PropTypes.Requireable<string>;
-        id: PropTypes.Requireable<string>;
-        ariaLabelledBy: PropTypes.Requireable<string>;
-        ariaDescribedBy: PropTypes.Requireable<string>;
-        offLabel: PropTypes.Requireable<string>;
-        required: PropTypes.Requireable<boolean>;
-        tabIndex: PropTypes.Requireable<number>;
-        valid: PropTypes.Requireable<boolean>;
-        validate: PropTypes.Requireable<boolean>;
-        validationMessage: PropTypes.Requireable<string>;
-        onBlur: PropTypes.Requireable<any>;
-        onChange: PropTypes.Requireable<any>;
-        onFocus: PropTypes.Requireable<any>;
-        onLabel: PropTypes.Requireable<string>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        disabled: boolean;
-        defaultChecked: boolean;
-        size: undefined;
-        trackRounded: undefined;
-        thumbRounded: undefined;
-        offLabel: string;
-        onBlur: () => void;
-        onFocus: () => void;
-        onLabel: string;
-        validityStyles: boolean;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: SwitchState;
-    private _element;
-    private _wrapper;
-    private _input;
-    private _id;
-    private valueDuringOnChange;
-    private dir?;
-    private defaultValidationMessage;
-    private eventTimeStamp?;
-    /**
-     * @hidden
-     */
-    constructor(props: SwitchProps);
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(): void;
-    /**
-     * @hidden
-     */
-    focus: () => void;
-    /**
-     * @hidden
-     */
-    render(): React.JSX.Element;
-    private dummyInput;
-    private handleClick;
-    private handleKeyDown;
-    private handleWrapperFocus;
-    private handleWrapperBlur;
-}
+export declare const SwitchWithoutContext: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<SwitchHandle>>;
 /**
  * Represents the PropsContext of the `Switch` component.
  * Used for global configuration of all `Switch` instances.
@@ -364,7 +247,11 @@ export declare const SwitchPropsContext: React.Context<(p: SwitchProps) => Switc
 /**
  * Represent the `ref` of the Switch component.
  */
-export interface SwitchHandle extends Pick<SwitchWithoutContext, keyof SwitchWithoutContext> {
+export interface SwitchHandle {
+    /**
+     * The props of the SwitchHandle component.
+     */
+    props: SwitchProps;
     /**
      * @hidden
      */
@@ -386,8 +273,6 @@ export interface SwitchHandle extends Pick<SwitchWithoutContext, keyof SwitchWit
      */
     value: boolean;
 }
-/** @hidden */
-export type Switch = SwitchHandle;
 /**
  * Represents the [KendoReact Switch component](https://www.telerik.com/kendo-react-ui/components/inputs/switch).
  *

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"),i=require("prop-types"),s=require("@progress/kendo-react-common"),S=require("@progress/kendo-react-intl"),u=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(u.switchValidation,u.messages[u.switchValidation]))},this.limit=(e,t,h)=>{const o=h.offsetWidth,l=t.offsetWidth;return e<0?0:e>o-l?o-l:e},this.toggle=(e,t)=>{this.setState({checked:e}),this.valueDuringOnChange=e,s.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:s.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===s.Keys.space||t===s.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:o,size:l,offLabel:m,onLabel:f,tabIndex:v}=this.props;this.dir=e||this.element&&getComputedStyle(this.element).direction||void 0;const y=!this.validityStyles||this.validity.valid,k=s.classNames("k-switch",{[`k-switch-${s.kendoThemeMaps.sizeMap[l]||l}`]:l,"k-switch-on":this.value,"k-switch-off":!this.value,"k-focus":a,"k-disabled":t,"k-invalid":!y},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:p=>{this._wrapper=p},role:"switch",...w,className:k,dir:this.dir,onKeyDown:this.handleKeyDown,onClick:this.handleClick,onBlur:this.handleWrapperBlur,onFocus:this.handleWrapperFocus,tabIndex:s.getTabIndex(v,t,void 0),accessKey:this.props.accessKey,id:this.props.id||this._id},r.createElement("span",{className:s.classNames("k-switch-track",{[`k-rounded-${s.kendoThemeMaps.roundedMap[h]||h}`]:h}),ref:p=>{this._element=p}},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:s.classNames("k-switch-thumb",{[`k-rounded-${s.kendoThemeMaps.roundedMap[o]||o}`]:o})})))}};n.displayName="Switch",n.propTypes={accessKey:i.string,checked:i.bool,className:i.string,disabled:i.bool,defaultChecked:i.bool,size:i.oneOf(["small","medium","large"]),trackRounded:i.oneOf(["small","medium","large","full"]),thumbRounded:i.oneOf(["small","medium","large","full"]),dir:i.string,id:i.string,ariaLabelledBy:i.string,ariaDescribedBy:i.string,offLabel:i.string,required:i.bool,tabIndex:i.number,valid:i.bool,validate:i.bool,validationMessage:i.string,onBlur:i.any,onChange:i.any,onFocus:i.any,onLabel:i.string},n.defaultProps={disabled:!1,defaultChecked:!1,size:void 0,trackRounded:void 0,thumbRounded:void 0,offLabel:"OFF",onBlur:s.noop,onFocus:s.noop,onLabel:"ON",validityStyles:!0};let c=n;const g=s.createPropsContext(),b=s.withIdHOC(s.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 n=require("react"),X=require("prop-types"),i=require("@progress/kendo-react-common"),Y=require("@progress/kendo-react-intl"),S=require("../messages/index.js");function z(e){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const m=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(u,c,m.get?m:{enumerable:!0,get:()=>e[c]})}}return u.default=e,Object.freeze(u)}const d=z(n),t=z(X),l={disabled:!1,defaultChecked:!1,size:void 0,trackRounded:void 0,thumbRounded:void 0,offLabel:"OFF",onBlur:i.noop,onFocus:i.noop,onLabel:"ON",validityStyles:!0},M=d.forwardRef((e,u)=>{var P;const{disabled:c=l.disabled,defaultChecked:m=l.defaultChecked,size:v=l.size,trackRounded:y=l.trackRounded,thumbRounded:g=l.thumbRounded,offLabel:x=l.offLabel,onBlur:C=l.onBlur,onFocus:w=l.onFocus,onLabel:L=l.onLabel}=e,[E,j]=n.useState(m||!1),[V,O]=n.useState(!1),o=n.useRef(null),I=n.useRef(null),R=n.useRef(null),b=n.useRef(void 0),q=n.useRef(void 0),B=n.useRef(void 0),D=n.useMemo(()=>new Y.LocalizationService,[]),s=n.useMemo(()=>b.current!==void 0?b.current:e.checked!==void 0?e.checked:E,[e.checked,E]),f=n.useMemo(()=>{var T,F;const a=e.validationMessage!==void 0,r=(T=e.valid)!=null?T:e.required?!!s:!0,U=(F=e.valid)!=null?F:r;return{customError:a,valid:U,valueMissing:s===null}},[e.valid,e.validationMessage,e.required,s]),_=(P=e.validityStyles)!=null?P:l.validityStyles;n.useEffect(()=>{var a;(a=R.current)!=null&&a.setCustomValidity&&R.current.setCustomValidity(f.valid?"":e.validationMessage||D.toLanguageString(S.switchValidation,S.messages[S.switchValidation]))},[f,e.validationMessage,D]),n.useEffect(()=>{o.current&&(B.current=e.dir||getComputedStyle(o.current).direction||void 0)},[e.dir]);const h=n.useCallback(()=>({props:e,get element(){return o.current},get actionElement(){return I.current},get value(){return s},get name(){return e.name},get validity(){return f}}),[e,s,f]),k=n.useCallback((a,r)=>{j(a),b.current=a,i.dispatchEvent(e.onChange,r,{...h(),value:a},{value:a}),b.current=void 0},[e.onChange,h]),W=n.useCallback(a=>{q.current!==a.timeStamp&&(q.current=a.timeStamp,k(!s,a))},[s,k]),H=n.useCallback(a=>{if(c)return;const{keyCode:r}=a;(r===i.Keys.space||r===i.Keys.enter)&&(k(!s,a),a.preventDefault())},[c,s,k]),$=n.useCallback(a=>{c||(O(!0),w&&w(a))},[c,w]),p=n.useCallback(a=>{c||(O(!1),C&&C(a))},[c,C]);n.useImperativeHandle(u,h,[h]);const A=B.current||e.dir||o.current&&getComputedStyle(o.current).direction||void 0,G=!_||f.valid,J=i.classNames("k-switch",{[`k-switch-${i.kendoThemeMaps.sizeMap[v]||v}`]:v,"k-switch-on":s,"k-switch-off":!s,"k-focus":V,"k-disabled":c,"k-invalid":!G},e.className),Q=d.createElement("input",{type:"checkbox",checked:e.checked,ref:R,tabIndex:-1,"aria-hidden":!0,value:s,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"},onChange:i.noop,name:e.name||void 0});return d.createElement("span",{ref:I,role:"switch","aria-checked":s,"aria-disabled":c||void 0,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-label":e.ariaLabel,"aria-required":e.required,className:J,dir:A,onKeyDown:H,onClick:W,onBlur:p,onFocus:$,tabIndex:i.getTabIndex(e.tabIndex,c,void 0),accessKey:e.accessKey,id:e.id},d.createElement("span",{className:i.classNames("k-switch-track",{[`k-rounded-${i.kendoThemeMaps.roundedMap[y]||y}`]:y}),ref:o},Q,L?d.createElement("span",{className:"k-switch-label-on"},L):"",x?d.createElement("span",{className:"k-switch-label-off"},x):""),d.createElement("span",{className:"k-switch-thumb-wrap"},d.createElement("span",{className:i.classNames("k-switch-thumb",{[`k-rounded-${i.kendoThemeMaps.roundedMap[g]||g}`]:g})})))});M.displayName="Switch";const K=i.createPropsContext(),N=i.withIdHOC(i.withPropsContext(K,M));N.displayName="KendoReactSwitch";N.propTypes={accessKey:t.string,checked:t.bool,className:t.string,defaultChecked:t.bool,defaultValue:t.any,disabled:t.bool,dir:t.string,id:t.string,size:t.oneOf(["small","medium","large"]),trackRounded:t.oneOf(["small","medium","large","full"]),thumbRounded:t.oneOf(["small","medium","large","full"]),ariaDescribedBy:t.string,ariaLabelledBy:t.string,ariaLabel:t.string,offLabel:t.node,onBlur:t.func,onChange:t.func,onFocus:t.func,onLabel:t.node,tabIndex:t.number,value:t.any,name:t.string,required:t.bool,valid:t.bool,validationMessage:t.string,validityStyles:t.bool};exports.Switch=N;exports.SwitchPropsContext=K;exports.SwitchWithoutContext=M;

package/switch/Switch.mjs

@@ -5,232 +5,210 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as s from "react";
-import t from "prop-types";
-import { withIdHOC as C, withPropsContext as S, createPropsContext as N, dispatchEvent as D, noop as h, Keys as v, classNames as p, kendoThemeMaps as c, getTabIndex as E } from "@progress/kendo-react-common";
-import { provideLocalizationService as L } from "@progress/kendo-react-intl";
-import { switchValidation as g, messages as M } from "../messages/index.mjs";
-const a = class a extends s.Component {
-  /**
-   * @hidden
-   */
-  constructor(r) {
-    super(r), this.setValidity = () => {
-      this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || this.defaultValidationMessage.toLanguageString(g, M[g])
-      );
-    }, this.limit = (e, i, d) => {
-      const o = d.offsetWidth, l = i.offsetWidth;
-      return e < 0 ? 0 : e > o - l ? o - l : e;
-    }, this.toggle = (e, i) => {
-      this.setState({ checked: e }), this.valueDuringOnChange = e, D(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 = () => {
-      this.actionElement && this.actionElement.focus();
-    }, this.dummyInput = (e) => /* @__PURE__ */ s.createElement(
-      "input",
-      {
-        type: "checkbox",
-        checked: this.props.checked,
-        ref: (i) => {
-          this._input = i;
-        },
-        tabIndex: -1,
-        "aria-hidden": !0,
-        value: e,
-        style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" },
-        onChange: h,
-        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: i } = e;
-      (i === v.space || i === v.enter) && (this.toggle(!this.value, e), e.preventDefault());
-    }, this.handleWrapperFocus = (e) => {
-      if (this.props.disabled)
-        return;
-      this.setState({ focused: !0 });
-      const { onFocus: i } = this.props;
-      i && i.call(void 0, e);
-    }, this.handleWrapperBlur = (e) => {
-      if (this.props.disabled)
-        return;
-      this.setState({ focused: !1 });
-      const { onBlur: i } = this.props;
-      i && i.call(void 0, e);
-    }, this.state = {
-      checked: r.defaultChecked || a.defaultProps.defaultChecked,
-      focused: !1
-    };
-  }
-  /**
-   * Gets the value of the Switch.
-   */
-  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;
-  }
-  /**
-   * Gets the `name` property of the Switch.
-   */
-  get name() {
-    return this.props.name;
-  }
-  /**
-   * Represents the validity state into which the Switch is set.
-   */
-  get validity() {
-    const r = this.props.validationMessage !== void 0, e = this.props.valid !== void 0 ? this.props.valid : this.props.required ? !!this.value : !0, i = this.props.valid !== void 0 ? this.props.valid : e;
+import * as r from "react";
+import { useState as q, useRef as o, useMemo as C, useEffect as P, useCallback as s, useImperativeHandle as ae } from "react";
+import * as t from "prop-types";
+import { withIdHOC as ne, withPropsContext as ie, createPropsContext as de, noop as L, dispatchEvent as re, Keys as T, classNames as R, kendoThemeMaps as S, getTabIndex as le } from "@progress/kendo-react-common";
+import { LocalizationService as ce } from "@progress/kendo-react-intl";
+import { switchValidation as V, messages as oe } from "../messages/index.mjs";
+const i = {
+  disabled: !1,
+  defaultChecked: !1,
+  size: void 0,
+  trackRounded: void 0,
+  thumbRounded: void 0,
+  offLabel: "OFF",
+  onBlur: L,
+  onFocus: L,
+  onLabel: "ON",
+  validityStyles: !0
+}, H = r.forwardRef((e, $) => {
+  var z;
+  const {
+    disabled: d = i.disabled,
+    defaultChecked: j = i.defaultChecked,
+    size: b = i.size,
+    trackRounded: v = i.trackRounded,
+    thumbRounded: y = i.thumbRounded,
+    offLabel: N = i.offLabel,
+    onBlur: k = i.onBlur,
+    onFocus: g = i.onFocus,
+    onLabel: x = i.onLabel
+  } = e, [E, A] = q(j || !1), [G, M] = q(!1), l = o(null), B = o(null), w = o(null), m = o(void 0), I = o(void 0), F = o(void 0), D = C(() => new ce(), []), n = C(() => m.current !== void 0 ? m.current : e.checked !== void 0 ? e.checked : E, [e.checked, E]), u = C(() => {
+    var K, O;
+    const a = e.validationMessage !== void 0, c = (K = e.valid) != null ? K : e.required ? !!n : !0, te = (O = e.valid) != null ? O : c;
     return {
-      customError: r,
-      valid: i,
-      valueMissing: this.value === null
+      customError: a,
+      valid: te,
+      valueMissing: n === null
     };
-  }
-  /**
-   * @hidden
-   */
-  get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : a.defaultProps.validityStyles;
-  }
-  /**
-   * @hidden
-   */
-  get required() {
-    return this.props.required !== void 0 ? this.props.required : !1;
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    this.setValidity(), this.forceUpdate();
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate() {
-    this.setValidity();
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const { focused: r } = this.state, { dir: e, disabled: i, trackRounded: d, thumbRounded: o, size: l, 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",
+  }, [e.valid, e.validationMessage, e.required, n]), J = (z = e.validityStyles) != null ? z : i.validityStyles;
+  P(() => {
+    var a;
+    (a = w.current) != null && a.setCustomValidity && w.current.setCustomValidity(
+      u.valid ? "" : e.validationMessage || D.toLanguageString(V, oe[V])
+    );
+  }, [u, e.validationMessage, D]), P(() => {
+    l.current && (F.current = e.dir || getComputedStyle(l.current).direction || void 0);
+  }, [e.dir]);
+  const f = s(() => ({
+    props: e,
+    get element() {
+      return l.current;
+    },
+    get actionElement() {
+      return B.current;
+    },
+    get value() {
+      return n;
+    },
+    get name() {
+      return e.name;
+    },
+    get validity() {
+      return u;
+    }
+  }), [e, n, u]), h = s(
+    (a, c) => {
+      A(a), m.current = a, re(
+        e.onChange,
+        c,
+        { ...f(), value: a },
+        { value: a }
+      ), m.current = void 0;
+    },
+    [e.onChange, f]
+  ), Q = s(
+    (a) => {
+      I.current !== a.timeStamp && (I.current = a.timeStamp, h(!n, a));
+    },
+    [n, h]
+  ), U = s(
+    (a) => {
+      if (d)
+        return;
+      const { keyCode: c } = a;
+      (c === T.space || c === T.enter) && (h(!n, a), a.preventDefault());
+    },
+    [d, n, h]
+  ), X = s(
+    (a) => {
+      d || (M(!0), g && g(a));
+    },
+    [d, g]
+  ), Y = s(
+    (a) => {
+      d || (M(!1), k && k(a));
+    },
+    [d, k]
+  );
+  ae($, f, [f]);
+  const Z = F.current || e.dir || l.current && getComputedStyle(l.current).direction || void 0, _ = !J || u.valid, p = R(
+    "k-switch",
+    {
+      [`k-switch-${S.sizeMap[b] || b}`]: b,
+      "k-switch-on": n,
+      "k-switch-off": !n,
+      "k-focus": G,
+      "k-disabled": d,
+      "k-invalid": !_
+    },
+    e.className
+  ), ee = /* @__PURE__ */ r.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: e.checked,
+      ref: w,
+      tabIndex: -1,
+      "aria-hidden": !0,
+      value: n,
+      style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" },
+      onChange: L,
+      name: e.name || void 0
+    }
+  );
+  return /* @__PURE__ */ r.createElement(
+    "span",
+    {
+      ref: B,
+      role: "switch",
+      "aria-checked": n,
+      "aria-disabled": d || void 0,
+      "aria-labelledby": e.ariaLabelledBy,
+      "aria-describedby": e.ariaDescribedBy,
+      "aria-label": e.ariaLabel,
+      "aria-required": e.required,
+      className: p,
+      dir: Z,
+      onKeyDown: U,
+      onClick: Q,
+      onBlur: Y,
+      onFocus: X,
+      tabIndex: le(e.tabIndex, d, void 0),
+      accessKey: e.accessKey,
+      id: e.id
+    },
+    /* @__PURE__ */ r.createElement(
+      "span",
       {
-        [`k-switch-${c.sizeMap[l] || l}`]: l,
-        "k-switch-on": this.value,
-        "k-switch-off": !this.value,
-        "k-focus": r,
-        "k-disabled": i,
-        "k-invalid": !y
+        className: R("k-switch-track", {
+          [`k-rounded-${S.roundedMap[v] || v}`]: v
+        }),
+        ref: l
       },
-      this.props.className
-    ), w = {
-      "aria-checked": this.value,
-      "aria-disabled": i || void 0,
-      "aria-labelledby": this.props.ariaLabelledBy,
-      "aria-describedby": this.props.ariaDescribedBy,
-      "aria-label": this.props.ariaLabel,
-      "aria-required": this.props.required
-    };
-    return /* @__PURE__ */ s.createElement(
+      ee,
+      x ? /* @__PURE__ */ r.createElement("span", { className: "k-switch-label-on" }, x) : "",
+      N ? /* @__PURE__ */ r.createElement("span", { className: "k-switch-label-off" }, N) : ""
+    ),
+    /* @__PURE__ */ r.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ r.createElement(
       "span",
       {
-        ref: (n) => {
-          this._wrapper = n;
-        },
-        role: "switch",
-        ...w,
-        className: k,
-        dir: this.dir,
-        onKeyDown: this.handleKeyDown,
-        onClick: this.handleClick,
-        onBlur: this.handleWrapperBlur,
-        onFocus: this.handleWrapperFocus,
-        tabIndex: E(b, i, void 0),
-        accessKey: this.props.accessKey,
-        id: this.props.id || this._id
-      },
-      /* @__PURE__ */ s.createElement(
-        "span",
-        {
-          className: p("k-switch-track", {
-            [`k-rounded-${c.roundedMap[d] || d}`]: d
-          }),
-          ref: (n) => {
-            this._element = n;
-          }
-        },
-        this.dummyInput(this.value),
-        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-${c.roundedMap[o] || o}`]: o
-          })
-        }
-      ))
-    );
-  }
-};
-a.displayName = "Switch", a.propTypes = {
+        className: R("k-switch-thumb", {
+          [`k-rounded-${S.roundedMap[y] || y}`]: y
+        })
+      }
+    ))
+  );
+});
+H.displayName = "Switch";
+const se = de(), W = ne(
+  ie(
+    se,
+    H
+  )
+);
+W.displayName = "KendoReactSwitch";
+W.propTypes = {
   accessKey: t.string,
   checked: t.bool,
   className: t.string,
-  disabled: t.bool,
   defaultChecked: t.bool,
+  defaultValue: t.any,
+  disabled: t.bool,
+  dir: t.string,
+  id: t.string,
   size: t.oneOf(["small", "medium", "large"]),
   trackRounded: t.oneOf(["small", "medium", "large", "full"]),
   thumbRounded: t.oneOf(["small", "medium", "large", "full"]),
-  dir: t.string,
-  id: t.string,
-  ariaLabelledBy: t.string,
   ariaDescribedBy: t.string,
-  offLabel: t.string,
-  required: t.bool,
+  ariaLabelledBy: t.string,
+  ariaLabel: t.string,
+  offLabel: t.node,
+  onBlur: t.func,
+  onChange: t.func,
+  onFocus: t.func,
+  onLabel: t.node,
   tabIndex: t.number,
+  value: t.any,
+  name: t.string,
+  required: t.bool,
   valid: t.bool,
-  validate: t.bool,
   validationMessage: t.string,
-  onBlur: t.any,
-  onChange: t.any,
-  onFocus: t.any,
-  onLabel: t.string
-}, a.defaultProps = {
-  disabled: !1,
-  defaultChecked: !1,
-  size: void 0,
-  trackRounded: void 0,
-  thumbRounded: void 0,
-  offLabel: "OFF",
-  onBlur: h,
-  onFocus: h,
-  onLabel: "ON",
-  validityStyles: !0
+  validityStyles: t.bool
 };
-let u = a;
-const B = N(), O = C(
-  S(
-    B,
-    u
-  )
-);
-O.displayName = "KendoReactSwitch";
 export {
-  O as Switch,
-  B as SwitchPropsContext,
-  u as SwitchWithoutContext
+  W as Switch,
+  se as SwitchPropsContext,
+  H as SwitchWithoutContext
 };