@progress/kendo-react-inputs 13.4.0-develop.1 → 13.4.0-develop.3

package/slider/Slider.mjs

@@ -5,216 +5,266 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as i from "react";
-import a from "prop-types";
-import { withPropsContext as y, createPropsContext as w, Keys as n, classNames as S, Draggable as x, getTabIndex as T, dispatchEvent as E } from "@progress/kendo-react-common";
-import { provideLocalizationService as D, registerForLocalization as C } from "@progress/kendo-react-intl";
-import { sliderDecreaseValue as d, messages as h, sliderIncreaseValue as m, sliderDragTitle as u } from "../messages/index.mjs";
-import { SLIDER_LABEL_ATTRIBUTE as I } from "./SliderLabel.mjs";
-import { Button as v } from "@progress/kendo-react-buttons";
-import { caretAltUpIcon as g, caretAltLeftIcon as f, caretAltRightIcon as b, caretAltDownIcon as k } from "@progress/kendo-svg-icons";
-const p = class p extends i.Component {
-  constructor(s) {
-    super(s), this.state = {
-      value: this.props.defaultValue === void 0 ? this.props.min : this.props.defaultValue,
-      focused: !1,
-      dir: this.props.dir
-    }, this._sliderTrack = null, this._element = null, this.buttons = (t) => {
-      if (!t.enabled)
-        return t.children;
-      const e = this.state.dir === "rtl" ? this.props.vertical ? g : f : this.props.vertical ? g : b, l = this.state.dir === "rtl" ? this.props.vertical ? k : b : this.props.vertical ? k : f, r = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-up" : "caret-alt-left" : this.props.vertical ? "caret-alt-up" : "caret-alt-right", o = this.state.dir === "rtl" ? this.props.vertical ? "caret-alt-down" : "caret-alt-right" : this.props.vertical ? "caret-alt-down" : "caret-alt-left";
-      return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
-        v,
+import * as l from "react";
+import { useState as L, useRef as R, useMemo as N, useEffect as q, useCallback as o, useImperativeHandle as me } from "react";
+import * as i from "prop-types";
+import { withPropsContext as ue, createPropsContext as fe, dispatchEvent as ge, Keys as s, classNames as ve, Draggable as he, getTabIndex as be } from "@progress/kendo-react-common";
+import { LocalizationService as ye, registerForLocalization as ke } from "@progress/kendo-react-intl";
+import { sliderDragTitle as H, messages as A, sliderDecreaseValue as O, sliderIncreaseValue as X } from "../messages/index.mjs";
+import { SLIDER_LABEL_ATTRIBUTE as xe } from "./SliderLabel.mjs";
+import { Button as _ } from "@progress/kendo-react-buttons";
+import { caretAltUpIcon as j, caretAltLeftIcon as G, caretAltDownIcon as W, caretAltRightIcon as Y } from "@progress/kendo-svg-icons";
+const f = {
+  step: 1,
+  largeStep: 10,
+  buttons: !1,
+  vertical: !1,
+  disabled: !1,
+  tabIndex: 0
+}, z = l.forwardRef((t, P) => {
+  var M, K, U;
+  const {
+    step: m = f.step,
+    largeStep: w = f.largeStep,
+    vertical: a = f.vertical,
+    disabled: C = f.disabled,
+    tabIndex: Q = f.tabIndex
+  } = t, [Z, $] = L((M = t.defaultValue) != null ? M : t.min), [p, B] = L(!1), [I, ee] = L(t.dir), E = R(null), g = R(null), T = N(() => new ye(), []), V = R(null), D = t.value !== void 0, y = D && t.value !== void 0 ? t.value : Z, r = N(() => {
+    const { min: e, max: n } = t;
+    return y < e ? e : y > n ? n : y;
+  }, [y, t.min, t.max]), v = N(() => {
+    const { min: e, max: n } = t, c = n - e;
+    return c === 0 ? 0 : (r - e) / c * 100;
+  }, [r, t.min, t.max]), u = (K = t.dir) != null ? K : I;
+  q(() => {
+    if (t.dir === void 0 && g.current) {
+      const n = window.getComputedStyle(g.current).direction;
+      n !== I && ee(n);
+    }
+  }, [t.dir, I]);
+  const F = o((e) => {
+    let n = e;
+    for (; n; ) {
+      if (n.getAttribute(xe))
+        return !0;
+      n = n.parentElement;
+    }
+    return !1;
+  }, []), d = o(
+    (e, n) => {
+      const c = Math.min(Math.max(n, t.min), t.max);
+      D || $(c), ge(t.onChange, e, V.current, { value: c });
+    },
+    [t.min, t.max, t.onChange, D]
+  ), te = o(() => {
+    B(!0);
+  }, []), ne = o(() => {
+    B(!1);
+  }, []), ae = o(
+    (e) => {
+      let n;
+      e.keyCode === s.left || e.keyCode === s.down ? n = r - (m || 0) : e.keyCode === s.right || e.keyCode === s.up ? n = r + (m || 0) : e.keyCode === s.pageDown ? n = r - (w || 0) : e.keyCode === s.pageUp ? n = r + (w || 0) : e.keyCode === s.home ? n = t.min : e.keyCode === s.end && (n = t.max), n !== void 0 && (e.preventDefault(), d(e, n));
+    },
+    [r, m, w, t.min, t.max, d]
+  ), ie = o(
+    (e) => {
+      e.preventDefault(), d(e, r - (m || 0));
+    },
+    [r, m, d]
+  ), le = o(
+    (e) => {
+      e.preventDefault(), d(e, r + (m || 0));
+    },
+    [r, m, d]
+  ), k = o(
+    (e) => {
+      const n = e.element.getBoundingClientRect();
+      let c;
+      a ? c = n.bottom - e.event.clientY : c = u === "rtl" ? n.right - e.event.clientX : e.event.clientX - n.left;
+      const h = a ? n.height : n.width, b = c / h;
+      d(e, t.min + b * (t.max - t.min));
+    },
+    [a, t.min, t.max, u, d]
+  ), re = o(
+    (e) => {
+      F(e.event.originalEvent.target) || (e.event.isTouch && e.event.originalEvent.preventDefault(), k(e));
+    },
+    [F, k]
+  ), ce = o(
+    (e) => {
+      e.event.originalEvent.preventDefault(), k(e);
+    },
+    [k]
+  ), x = o(() => {
+    g.current && g.current.focus();
+  }, []), oe = o(
+    (e) => {
+      if (!e.enabled)
+        return e.children;
+      let n, c, h, b;
+      return u === "rtl" ? (n = a ? j : G, c = a ? W : Y, h = a ? "caret-alt-up" : "caret-alt-left", b = a ? "caret-alt-down" : "caret-alt-right") : (n = a ? j : Y, c = a ? W : G, h = a ? "caret-alt-up" : "caret-alt-right", b = a ? "caret-alt-down" : "caret-alt-left"), /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(
+        _,
         {
           className: "k-button-decrease",
           rounded: "full",
-          icon: o,
-          svgIcon: l,
-          title: t.decrementTitle,
-          onClick: t.decrement
+          icon: b,
+          svgIcon: c,
+          title: e.decrementTitle,
+          onClick: e.decrement
         }
-      ), t.children, /* @__PURE__ */ i.createElement(
-        v,
+      ), e.children, /* @__PURE__ */ l.createElement(
+        _,
         {
           className: "k-button-increase",
           rounded: "full",
-          icon: r,
-          svgIcon: e,
-          title: t.incrementTitle,
-          onClick: t.increment
+          icon: h,
+          svgIcon: n,
+          title: e.incrementTitle,
+          onClick: e.increment
         }
       ));
-    }, this.focus = () => {
-      this._element && this._element.focus();
-    }, this.isLabel = (t) => {
-      let e = t;
-      for (; e; ) {
-        if (e.getAttribute(I))
-          return !0;
-        e = e.parentElement;
-      }
-      return !1;
-    }, this.onFocus = () => {
-      this.setState({ focused: !0 });
-    }, this.onBlur = () => {
-      this.setState({ focused: !1 });
-    }, this.onKeyDown = (t) => {
-      let e;
-      t.keyCode === n.left || t.keyCode === n.down ? e = this.state.value - (this.props.step || 0) : t.keyCode === n.right || t.keyCode === n.up ? e = this.state.value + (this.props.step || 0) : t.keyCode === n.pageDown ? e = this.state.value - (this.props.largeStep || 0) : t.keyCode === n.pageUp ? e = this.state.value + (this.props.largeStep || 0) : t.keyCode === n.home ? e = this.props.min : t.keyCode === n.end && (e = this.props.max), e !== void 0 && (t.preventDefault(), this.change(t, e));
-    }, this.decrement = (t) => {
-      t.preventDefault(), this.change(t, this.state.value - (this.props.step || 0));
-    }, this.increment = (t) => {
-      t.preventDefault(), this.change(t, this.state.value + (this.props.step || 0));
-    }, this.dragStart = (t) => {
-      this.isLabel(t.event.originalEvent.target) || (t.event.isTouch && t.event.originalEvent.preventDefault(), this.drag(t));
-    }, this.dragOver = (t) => {
-      t.event.originalEvent.preventDefault(), this.drag(t);
-    }, this.drag = (t) => {
-      const e = t.element.getBoundingClientRect(), l = this.props.vertical ? e.bottom - t.event.clientY : this.state.dir === "rtl" ? e.right - t.event.clientX : t.event.clientX - e.left, r = this.props.vertical ? e.height : e.width, o = l / r;
-      this.change(t, this.props.min + o * (this.props.max - this.props.min));
+    },
+    [u, a]
+  );
+  me(
+    P,
+    () => ({
+      props: t,
+      sliderTrack: E.current,
+      focus: x
+    }),
+    [t, x]
+  ), q(() => {
+    V.current = {
+      props: t,
+      sliderTrack: E.current,
+      focus: x
     };
-  }
-  /**
-   * @hidden
-   */
-  static getDerivedStateFromProps(s, t) {
-    const e = s.value !== void 0 ? s.value : t.value, { min: l, max: r } = s;
-    return e === void 0 ? null : { value: Math.min(Math.max(e, l), r) };
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    if (!this.state.dir && window && this._element) {
-      const s = window.getComputedStyle(this._element).direction;
-      s && this.setState({ dir: s });
-    }
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const s = D(this), t = (this.state.value - this.props.min) / (this.props.max - this.props.min) * 100, e = this.props.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, l = this.props.vertical ? { paddingTop: 0, height: "100%" } : {};
-    return /* @__PURE__ */ i.createElement(
-      "div",
-      {
-        ref: (r) => {
-          this._element = r;
+  }, [t, x]);
+  const de = a ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, se = a ? { paddingTop: 0, height: "100%" } : {};
+  let S;
+  return a ? S = { bottom: "calc(" + v + "%)", zIndex: 1 } : u === "rtl" ? S = { right: "calc(" + v + "% - 13px)", zIndex: 1 } : S = { left: "calc(" + v + "%)", zIndex: 1 }, /* @__PURE__ */ l.createElement(
+    "div",
+    {
+      ref: g,
+      dir: u,
+      id: t.id,
+      style: { gap: 0, ...t.style },
+      onFocus: te,
+      onBlur: ne,
+      onKeyDown: ae,
+      className: ve(
+        "k-slider",
+        {
+          "k-focus": p,
+          "k-disabled": C,
+          "k-slider-horizontal": !a,
+          "k-slider-vertical": a
         },
-        dir: this.state.dir,
-        id: this.props.id,
-        style: { gap: 0, ...this.props.style },
-        onFocus: this.onFocus,
-        onBlur: this.onBlur,
-        onKeyDown: this.onKeyDown,
-        className: S(
-          "k-slider",
-          {
-            "k-focus": this.state.focused,
-            "k-disabled": this.props.disabled,
-            "k-slider-horizontal": !this.props.vertical,
-            "k-slider-vertical": this.props.vertical
-          },
-          this.props.className
-        )
-      },
-      /* @__PURE__ */ i.createElement(
-        this.buttons,
+        t.className
+      )
+    },
+    oe({
+      enabled: (U = t.buttons) != null ? U : f.buttons,
+      decrement: ie,
+      increment: le,
+      incrementTitle: T.toLanguageString(
+        X,
+        A[X]
+      ),
+      decrementTitle: T.toLanguageString(
+        O,
+        A[O]
+      ),
+      children: /* @__PURE__ */ l.createElement(he, { onDrag: ce, onPress: re, autoScroll: !1 }, /* @__PURE__ */ l.createElement(
+        "div",
         {
-          enabled: this.props.buttons,
-          decrement: this.decrement,
-          increment: this.increment,
-          incrementTitle: s.toLanguageString(m, h[m]),
-          decrementTitle: s.toLanguageString(d, h[d])
+          className: "k-slider-track-wrap",
+          style: {
+            flexGrow: 1,
+            position: "relative",
+            touchAction: "none",
+            ...de
+          }
         },
-        /* @__PURE__ */ i.createElement(x, { onDrag: this.dragOver, onPress: this.dragStart, autoScroll: !1 }, /* @__PURE__ */ i.createElement(
+        t.children && /* @__PURE__ */ l.createElement("ul", { className: "k-reset k-slider-items", style: { margin: 0, ...se } }, l.Children.map(t.children, (e, n) => e && l.cloneElement(
+          e,
+          {
+            position: 100 * (e.props.position - t.min) / (t.max - t.min),
+            vertical: a,
+            firstTick: n === 0,
+            lastTick: n === l.Children.count(t.children) - 1
+          },
+          e.props.children
+        ))),
+        /* @__PURE__ */ l.createElement(
           "div",
           {
-            className: "k-slider-track-wrap",
-            style: {
-              flexGrow: 1,
-              position: "relative",
-              touchAction: "none",
-              ...e
-            }
+            className: "k-slider-track",
+            style: a ? { bottom: 0, height: "100%" } : { [u === "rtl" ? "right" : "left"]: 0, width: "100%" },
+            ref: E
           },
-          this.props.children && /* @__PURE__ */ i.createElement("ul", { className: "k-reset k-slider-items", style: { margin: 0, ...l } }, i.Children.map(this.props.children, (r, o) => r && i.cloneElement(
-            r,
-            {
-              position: 100 * (r.props.position - this.props.min) / (this.props.max - this.props.min),
-              vertical: this.props.vertical,
-              firstTick: o === 0,
-              lastTick: o === i.Children.count(this.props.children) - 1
-            },
-            r.props.children
-          ))),
-          /* @__PURE__ */ i.createElement(
+          /* @__PURE__ */ l.createElement(
             "div",
             {
-              className: "k-slider-track",
-              style: this.props.vertical ? { bottom: 0, height: "100%" } : { [this.state.dir === "rtl" ? "right" : "left"]: 0, width: "100%" },
-              ref: (r) => {
-                this._sliderTrack = r;
-              }
-            },
-            /* @__PURE__ */ i.createElement(
-              "div",
-              {
-                className: "k-slider-selection",
-                style: this.props.vertical ? { height: t + "%" } : { width: t + "%" }
-              }
-            ),
-            /* @__PURE__ */ i.createElement(
-              "span",
-              {
-                role: "slider",
-                "aria-valuemin": this.props.min,
-                "aria-valuemax": this.props.max,
-                "aria-valuenow": this.state.value,
-                "aria-valuetext": String(this.state.value),
-                "aria-orientation": this.props.vertical ? "vertical" : void 0,
-                "aria-disabled": this.props.disabled ? "true" : void 0,
-                "aria-labelledby": this.props.ariaLabelledBy,
-                "aria-describedby": this.props.ariaDescribedBy,
-                "aria-label": this.props.ariaLabel,
-                tabIndex: T(this.props.tabIndex, this.props.disabled, void 0),
-                className: "k-draghandle k-draghandle-end",
-                title: s.toLanguageString(u, h[u]),
-                style: this.props.vertical ? { bottom: "calc(" + t + "%)", zIndex: 1 } : this.state.dir === "rtl" ? { right: "calc(" + t + "% - 13px)", zIndex: 1 } : { left: "calc(" + t + "%)", zIndex: 1 }
-              }
-            )
+              className: "k-slider-selection",
+              style: a ? { height: v + "%" } : { width: v + "%" }
+            }
+          ),
+          /* @__PURE__ */ l.createElement(
+            "span",
+            {
+              role: "slider",
+              "aria-valuemin": t.min,
+              "aria-valuemax": t.max,
+              "aria-valuenow": r,
+              "aria-valuetext": String(r),
+              "aria-orientation": a ? "vertical" : void 0,
+              "aria-disabled": C ? "true" : void 0,
+              "aria-labelledby": t.ariaLabelledBy,
+              "aria-describedby": t.ariaDescribedBy,
+              "aria-label": t.ariaLabel,
+              tabIndex: be(Q, C, void 0),
+              className: "k-draghandle k-draghandle-end",
+              title: T.toLanguageString(
+                H,
+                A[H]
+              ),
+              style: S
+            }
           )
-        ))
-      )
-    );
-  }
-  /**
-   * @hidden
-   */
-  get sliderTrack() {
-    return this._sliderTrack;
-  }
-  change(s, t) {
-    t = Math.min(Math.max(t, this.props.min), this.props.max), this.setState({ value: t }), E(this.props.onChange, s, this, { value: t });
-  }
-};
-p.displayName = "Slider", p.propTypes = {
-  min: a.number.isRequired,
-  max: a.number.isRequired,
-  value: a.number,
-  vertical: a.bool,
-  id: a.string,
-  ariaLabelledBy: a.string,
-  ariaDescribedBy: a.string,
-  ariaLabel: a.string
-  // TODO: validation when buttons is set to true, but no step is provided
+        )
+      ))
+    })
+  );
+});
+z.displayName = "Slider";
+const Se = fe(), J = ue(Se, z);
+J.displayName = "KendoReactSlider";
+J.propTypes = {
+  value: i.number,
+  defaultValue: i.number,
+  min: i.number.isRequired,
+  max: i.number.isRequired,
+  step: i.number,
+  largeStep: i.number,
+  onChange: i.func,
+  style: i.object,
+  className: i.string,
+  buttons: i.bool,
+  tabIndex: i.number,
+  disabled: i.bool,
+  vertical: i.bool,
+  id: i.string,
+  ariaDescribedBy: i.string,
+  ariaLabelledBy: i.string,
+  ariaLabel: i.string,
+  dir: i.oneOf(["ltr", "rtl"]),
+  children: i.node
 };
-let c = p;
-const L = w(), A = y(L, c);
-A.displayName = "KendoReactSlider";
-C(c);
+ke(z);
 export {
-  A as Slider,
-  L as SliderPropsContext,
-  c as SliderWithoutContext
+  J as Slider,
+  Se as SliderPropsContext,
+  z as SliderWithoutContext
 };

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" />
@@ -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).
  *