@progress/kendo-react-inputs 15.1.1-develop.3 → 15.2.0-develop.2

package/slider/Slider.mjs

@@ -6,39 +6,41 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as r from "react";
-import { useState as z, useRef as B, useMemo as V, useEffect as H, useCallback as c, useImperativeHandle as ue } from "react";
+import { useState as R, useRef as N, useMemo as z, useEffect as q, useCallback as c, useImperativeHandle as ue } from "react";
 import i from "prop-types";
-import { withPropsContext as ge, dispatchEvent as fe, Keys as m, useWebMcpRegister as ve, classNames as he, Draggable as be, getTabIndex as ye, createPropsContext as ke } from "@progress/kendo-react-common";
+import { withPropsContext as fe, dispatchEvent as ge, Keys as m, useWebMcpRegister as ve, classNames as he, Draggable as be, getTabIndex as ye, createPropsContext as ke } from "@progress/kendo-react-common";
 import { LocalizationService as xe, registerForLocalization as Se } from "@progress/kendo-react-intl";
-import { sliderAriaLabel as E, messages as x, sliderDragTitle as O, sliderDecreaseValue as W, sliderIncreaseValue as X } from "../messages/index.mjs";
+import { sliderDragTitle as H, messages as B, sliderDecreaseValue as W, sliderIncreaseValue as X } from "../messages/index.mjs";
 import { SLIDER_LABEL_ATTRIBUTE as we } from "./SliderLabel.mjs";
 import { Button as _ } from "@progress/kendo-react-buttons";
 import { chevronUpIcon as j, chevronLeftIcon as G, chevronDownIcon as Y, chevronRightIcon as J } from "@progress/kendo-svg-icons";
-const f = {
+const g = {
   step: 1,
   largeStep: 10,
   buttons: !1,
   vertical: !1,
   disabled: !1,
+  readOnly: !1,
   tabIndex: 0
-}, A = r.forwardRef((e, Q) => {
-  var K, U, q;
+}, V = r.forwardRef((e, Q) => {
+  var O, K, U;
   const {
-    step: u = f.step,
-    largeStep: T = f.largeStep,
-    vertical: a = f.vertical,
-    disabled: d = f.disabled,
-    tabIndex: Z = f.tabIndex
-  } = e, [$, p] = z((K = e.defaultValue) != null ? K : e.min), [ee, F] = z(!1), [D, te] = z(e.dir), L = B(null), v = B(null), h = V(() => new xe(), []), R = B(null), N = e.value !== void 0, S = N && e.value !== void 0 ? e.value : $, l = V(() => S < e.min ? e.min : S > e.max ? e.max : S, [S, e.min, e.max]), b = V(() => {
+    step: u = g.step,
+    largeStep: C = g.largeStep,
+    vertical: a = g.vertical,
+    disabled: d = g.disabled,
+    tabIndex: Z = g.tabIndex,
+    readOnly: A = g.readOnly
+  } = e, [$, p] = R((O = e.defaultValue) != null ? O : e.min), [ee, F] = R(!1), [I, te] = R(e.dir), E = N(null), v = N(null), T = z(() => new xe(), []), D = N(null), L = e.value !== void 0, k = L && e.value !== void 0 ? e.value : $, l = z(() => k < e.min ? e.min : k > e.max ? e.max : k, [k, e.min, e.max]), h = z(() => {
     const t = e.max - e.min;
     return t === 0 ? 0 : (l - e.min) / t * 100;
-  }, [l, e.min, e.max]), g = (U = e.dir) != null ? U : D;
-  H(() => {
+  }, [l, e.min, e.max]), f = (K = e.dir) != null ? K : I;
+  q(() => {
     if (e.dir === void 0 && v.current) {
       const n = window.getComputedStyle(v.current).direction;
-      n !== D && te(n);
+      n !== I && te(n);
     }
-  }, [e.dir, D]);
+  }, [e.dir, I]);
   const M = c((t) => {
     let n = t;
     for (; n; ) {
@@ -50,9 +52,9 @@ const f = {
   }, []), s = c(
     (t, n) => {
       const o = Math.min(Math.max(n, e.min), e.max);
-      N || p(o), fe(e.onChange, t, R.current, { value: o });
+      L || p(o), ge(e.onChange, t, D.current, { value: o });
     },
-    [e.min, e.max, e.onChange, N]
+    [e.min, e.max, e.onChange, L]
   ), ne = c(() => {
     F(!0);
   }, []), ae = c(() => {
@@ -62,9 +64,9 @@ const f = {
       if (d)
         return;
       let n;
-      t.keyCode === m.left || t.keyCode === m.down ? n = l - (u || 0) : t.keyCode === m.right || t.keyCode === m.up ? n = l + (u || 0) : t.keyCode === m.pageDown ? n = l - (T || 0) : t.keyCode === m.pageUp ? n = l + (T || 0) : t.keyCode === m.home ? n = e.min : t.keyCode === m.end && (n = e.max), n !== void 0 && (t.preventDefault(), s(t, n));
+      t.keyCode === m.left || t.keyCode === m.down ? n = l - (u || 0) : t.keyCode === m.right || t.keyCode === m.up ? n = l + (u || 0) : t.keyCode === m.pageDown ? n = l - (C || 0) : t.keyCode === m.pageUp ? n = l + (C || 0) : t.keyCode === m.home ? n = e.min : t.keyCode === m.end && (n = e.max), n !== void 0 && (t.preventDefault(), s(t, n));
     },
-    [l, u, T, e.min, e.max, s, d]
+    [l, u, C, e.min, e.max, s, d]
   ), re = c(
     (t) => {
       t.preventDefault(), !d && s(t, l - (u || 0));
@@ -75,38 +77,38 @@ const f = {
       t.preventDefault(), !d && s(t, l + (u || 0));
     },
     [l, u, s, d]
-  ), w = c(
+  ), x = c(
     (t) => {
       const n = t.element.getBoundingClientRect();
       let o;
-      a ? o = n.bottom - t.event.clientY : o = g === "rtl" ? n.right - t.event.clientX : t.event.clientX - n.left;
-      const y = a ? n.height : n.width, k = o / y;
-      s(t, e.min + k * (e.max - e.min));
+      a ? o = n.bottom - t.event.clientY : o = f === "rtl" ? n.right - t.event.clientX : t.event.clientX - n.left;
+      const b = a ? n.height : n.width, y = o / b;
+      s(t, e.min + y * (e.max - e.min));
     },
-    [a, e.min, e.max, g, s]
+    [a, e.min, e.max, f, s]
   ), ce = c(
     (t) => {
-      M(t.event.originalEvent.target) || (t.event.isTouch && t.event.originalEvent.preventDefault(), w(t));
+      M(t.event.originalEvent.target) || (t.event.isTouch && t.event.originalEvent.preventDefault(), x(t));
     },
-    [M, w]
+    [M, x]
   ), oe = c(
     (t) => {
-      t.event.originalEvent.preventDefault(), w(t);
+      t.event.originalEvent.preventDefault(), x(t);
     },
-    [w]
-  ), C = c(() => {
+    [x]
+  ), S = c(() => {
     v.current && v.current.focus();
   }, []), de = c(
     (t) => {
       if (!t.enabled)
         return t.children;
-      let n, o, y, k;
-      return g === "rtl" ? (n = a ? j : G, o = a ? Y : J, y = a ? "chevron-up" : "chevron-left", k = a ? "chevron-down" : "chevron-right") : (n = a ? j : J, o = a ? Y : G, y = a ? "chevron-up" : "chevron-right", k = a ? "chevron-down" : "chevron-left"), /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
+      let n, o, b, y;
+      return f === "rtl" ? (n = a ? j : G, o = a ? Y : J, b = a ? "chevron-up" : "chevron-left", y = a ? "chevron-down" : "chevron-right") : (n = a ? j : J, o = a ? Y : G, b = a ? "chevron-up" : "chevron-right", y = a ? "chevron-down" : "chevron-left"), /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
         _,
         {
           className: "k-button-decrease",
           rounded: "full",
-          icon: k,
+          icon: y,
           svgIcon: o,
           title: t.decrementTitle,
           onClick: t.decrement
@@ -116,39 +118,39 @@ const f = {
         {
           className: "k-button-increase",
           rounded: "full",
-          icon: y,
+          icon: b,
           svgIcon: n,
           title: t.incrementTitle,
           onClick: t.increment
         }
       ));
     },
-    [g, a]
+    [f, a]
   );
   ue(
     Q,
     () => ({
       props: e,
-      sliderTrack: L.current,
-      focus: C
+      sliderTrack: E.current,
+      focus: S
     }),
-    [e, C]
-  ), ve("slider", R, e, e.webMcp), H(() => {
-    R.current = {
+    [e, S]
+  ), ve("slider", D, e, e.webMcp), q(() => {
+    D.current = {
       props: e,
-      sliderTrack: L.current,
-      focus: C
+      sliderTrack: E.current,
+      focus: S
     };
-  }, [e, C]);
+  }, [e, S]);
   const se = a ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, me = a ? { paddingTop: 0, height: "100%" } : {};
-  let I;
-  return a ? I = { bottom: "calc(" + b + "%)", zIndex: 1 } : g === "rtl" ? I = { right: "calc(" + b + "%)", zIndex: 1 } : I = { left: "calc(" + b + "%)", zIndex: 1 }, /* @__PURE__ */ r.createElement(
+  let w;
+  return a ? w = { bottom: "calc(" + h + "%)", zIndex: 1 } : f === "rtl" ? w = { right: "calc(" + h + "%)", zIndex: 1 } : w = { left: "calc(" + h + "%)", zIndex: 1 }, /* @__PURE__ */ r.createElement(
     "div",
     {
       ref: v,
-      dir: g,
+      dir: f,
       id: e.id,
-      "aria-label": e.ariaLabel || h.toLanguageString(E, x[E]),
+      "aria-label": e.ariaLabel,
       style: { gap: 0, ...e.style },
       onFocus: ne,
       onBlur: ae,
@@ -158,6 +160,7 @@ const f = {
         {
           "k-focus": ee,
           "k-disabled": d,
+          "k-readonly": A,
           "k-slider-horizontal": !a,
           "k-slider-vertical": a
         },
@@ -165,16 +168,16 @@ const f = {
       )
     },
     de({
-      enabled: (q = e.buttons) != null ? q : f.buttons,
+      enabled: (U = e.buttons) != null ? U : g.buttons,
       decrement: re,
       increment: le,
-      incrementTitle: h.toLanguageString(
+      incrementTitle: T.toLanguageString(
         X,
-        x[X]
+        B[X]
       ),
-      decrementTitle: h.toLanguageString(
+      decrementTitle: T.toLanguageString(
         W,
-        x[W]
+        B[W]
       ),
       children: /* @__PURE__ */ r.createElement(be, { onDrag: oe, onPress: ce, autoScroll: !1 }, /* @__PURE__ */ r.createElement(
         "div",
@@ -209,14 +212,14 @@ const f = {
           "div",
           {
             className: "k-slider-track",
-            style: a ? { bottom: 0, height: "100%" } : { [g === "rtl" ? "right" : "left"]: 0, width: "100%" },
-            ref: L
+            style: a ? { bottom: 0, height: "100%" } : { [f === "rtl" ? "right" : "left"]: 0, width: "100%" },
+            ref: E
           },
           /* @__PURE__ */ r.createElement(
             "div",
             {
               className: "k-slider-selection",
-              style: a ? { height: b + "%" } : { width: b + "%" }
+              style: a ? { height: h + "%" } : { width: h + "%" }
             }
           ),
           /* @__PURE__ */ r.createElement(
@@ -228,16 +231,17 @@ const f = {
               "aria-valuenow": l,
               "aria-orientation": a ? "vertical" : void 0,
               "aria-disabled": d ? "true" : void 0,
+              "aria-readonly": A ? "true" : void 0,
               "aria-labelledby": e.ariaLabelledBy,
               "aria-describedby": e.ariaDescribedBy,
-              "aria-label": e.ariaLabel || h.toLanguageString(E, x[E]),
+              "aria-label": e.ariaLabel,
               tabIndex: ye(Z, d, void 0),
               className: "k-draghandle k-draghandle-end",
-              title: h.toLanguageString(
-                O,
-                x[O]
+              title: T.toLanguageString(
+                H,
+                B[H]
               ),
-              style: I
+              style: w
             }
           )
         )
@@ -245,8 +249,8 @@ const f = {
     })
   );
 });
-A.displayName = "Slider";
-const Ce = ke(), P = ge(Ce, A);
+V.displayName = "Slider";
+const Ce = ke(), P = fe(Ce, V);
 P.displayName = "KendoReactSlider";
 P.propTypes = {
   value: i.number,
@@ -261,6 +265,7 @@ P.propTypes = {
   buttons: i.bool,
   tabIndex: i.number,
   disabled: i.bool,
+  readOnly: i.bool,
   vertical: i.bool,
   id: i.string,
   ariaDescribedBy: i.string,
@@ -269,9 +274,9 @@ P.propTypes = {
   dir: i.oneOf(["ltr", "rtl"]),
   children: i.node
 };
-Se(A);
+Se(V);
 export {
   P as Slider,
   Ce as SliderPropsContext,
-  A as SliderWithoutContext
+  V as SliderWithoutContext
 };

package/switch/Switch.d.ts

@@ -75,6 +75,18 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
      * ```
      */
     disabled?: boolean;
+    /**
+     * Makes the Switch read-only when set to `true`. The Switch will remain focusable but its value cannot be changed by the user.
+     *
+     * @remarks
+     * This property is related to accessibility.
+     *
+     * @example
+     * ```jsx
+     * <Switch readOnly={true} />
+     * ```
+     */
+    readOnly?: boolean;
     /**
      * Specifies the `dir` property of the wrapping element of the Switch.
      *
@@ -147,6 +159,9 @@ export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
      * Identifies the element(s) which will describe the component.
      * For example these elements could contain error or hint message.
      *
+     * @remarks
+     * This property is related to accessibility.
+     *
      * @example
      * ```jsx
      * <Switch ariaDescribedBy="description-id" />

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

package/switch/Switch.mjs

@@ -5,51 +5,53 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as l from "react";
-import { useState as H, useRef as d, useMemo as E, useEffect as M, useCallback as m, useImperativeHandle as V } from "react";
+import * as d from "react";
+import { useState as V, useRef as l, useMemo as L, useEffect as M, useCallback as m, useImperativeHandle as W } from "react";
 import t from "prop-types";
-import { withIdHOC as le, withPropsContext as de, noop as B, dispatchEvent as se, subscribeToKendoPaste as oe, Keys as W, useWebMcpRegister as ue, classNames as N, kendoThemeMaps as x, getTabIndex as fe, createPropsContext as me } from "@progress/kendo-react-common";
-import { LocalizationService as be, useLocalization as he } from "@progress/kendo-react-intl";
-import { switchValidation as $, messages as A, switchAriaLabel as j } from "../messages/index.mjs";
-const c = {
+import { withIdHOC as re, withPropsContext as ce, noop as O, dispatchEvent as de, subscribeToKendoPaste as le, Keys as $, useWebMcpRegister as se, classNames as N, kendoThemeMaps as x, getTabIndex as oe, createPropsContext as ue } from "@progress/kendo-react-common";
+import { LocalizationService as fe } from "@progress/kendo-react-intl";
+import { switchValidation as j, messages as me } from "../messages/index.mjs";
+const i = {
   disabled: !1,
   defaultChecked: !1,
   size: void 0,
   trackRounded: void 0,
   thumbRounded: void 0,
   offLabel: "OFF",
-  onBlur: B,
-  onFocus: B,
+  onBlur: O,
+  onFocus: O,
   onLabel: "ON",
+  readOnly: !1,
   validityStyles: !0
-}, G = l.forwardRef((e, Q) => {
-  var T;
+}, A = d.forwardRef((e, J) => {
+  var q;
   const {
-    disabled: r = c.disabled,
-    defaultChecked: U = c.defaultChecked,
-    size: k = c.size,
-    trackRounded: w = c.trackRounded,
-    thumbRounded: C = c.thumbRounded,
-    offLabel: I = c.offLabel,
-    onBlur: R = c.onBlur,
-    onFocus: L = c.onFocus,
-    onLabel: z = c.onLabel
-  } = e, [F, X] = H(U || !1), [Y, D] = H(!1), s = d(null), o = d(null), h = d(null), v = d(void 0), S = d(!1), K = d(void 0), O = E(() => new be(), []), Z = he(), n = E(() => v.current !== void 0 ? v.current : e.checked !== void 0 ? e.checked : F, [e.checked, F]), b = E(() => {
-    var y, q;
-    const a = e.validationMessage !== void 0, i = (y = e.valid) != null ? y : e.required ? !!n : !0, g = (q = e.valid) != null ? q : i;
+    disabled: c = i.disabled,
+    defaultChecked: Q = i.defaultChecked,
+    size: k = i.size,
+    trackRounded: w = i.trackRounded,
+    thumbRounded: C = i.thumbRounded,
+    offLabel: B = i.offLabel,
+    onBlur: R = i.onBlur,
+    onFocus: E = i.onFocus,
+    onLabel: I = i.onLabel,
+    readOnly: F = i.readOnly
+  } = e, [D, U] = V(Q || !1), [X, K] = V(!1), s = l(null), o = l(null), h = l(null), v = l(void 0), S = l(!1), z = l(void 0), P = L(() => new fe(), []), n = L(() => v.current !== void 0 ? v.current : e.checked !== void 0 ? e.checked : D, [e.checked, D]), b = L(() => {
+    var g, H;
+    const a = e.validationMessage !== void 0, r = (g = e.valid) != null ? g : e.required ? !!n : !0, y = (H = e.valid) != null ? H : r;
     return {
       customError: a,
-      valid: g,
+      valid: y,
       valueMissing: n === null
     };
-  }, [e.valid, e.validationMessage, e.required, n]), _ = (T = e.validityStyles) != null ? T : c.validityStyles;
+  }, [e.valid, e.validationMessage, e.required, n]), Y = (q = e.validityStyles) != null ? q : i.validityStyles;
   M(() => {
     var a;
     (a = h.current) != null && a.setCustomValidity && h.current.setCustomValidity(
-      b.valid ? "" : e.validationMessage || O.toLanguageString($, A[$])
+      b.valid ? "" : e.validationMessage || P.toLanguageString(j, me[j])
     );
-  }, [b, e.validationMessage, O]), M(() => {
-    s.current && (K.current = e.dir || getComputedStyle(s.current).direction || void 0);
+  }, [b, e.validationMessage, P]), M(() => {
+    s.current && (z.current = e.dir || getComputedStyle(s.current).direction || void 0);
   }, [e.dir]);
   const u = m(() => ({
     props: e,
@@ -73,10 +75,10 @@ const c = {
       return b;
     }
   }), [e, n, b]), f = m(
-    (a, i) => {
-      X(a), v.current = a, se(
+    (a, r) => {
+      U(a), v.current = a, de(
         e.onChange,
-        i,
+        r,
         { ...u(), value: a },
         { value: a }
       ), v.current = void 0;
@@ -84,24 +86,24 @@ const c = {
     [e.onChange, u]
   );
   M(() => {
-    const a = e.name || e.id, i = oe(o.current, {
+    const a = e.name || e.id, r = le(o.current, {
       fieldName: a,
-      onValueChange: (g) => {
-        if (g !== n) {
-          const y = {
+      onValueChange: (y) => {
+        if (y !== n) {
+          const g = {
             target: o.current,
             currentTarget: o.current,
             nativeEvent: new Event("change", { bubbles: !0 })
           };
-          f(g, y);
+          f(y, g);
         }
       }
     });
     return () => {
-      i == null || i.unsubscribe();
+      r == null || r.unsubscribe();
     };
   }, [e.name, e.id, n, f]);
-  const p = m(
+  const Z = m(
     (a) => {
       if (a.target === h.current) {
         if (S.current) {
@@ -113,40 +115,41 @@ const c = {
       f(!n, a);
     },
     [n, f]
-  ), ee = m(
+  ), _ = m(
     (a) => {
-      if (r)
+      if (c)
         return;
-      const { keyCode: i } = a;
-      (i === W.space || i === W.enter) && (f(!n, a), a.preventDefault());
+      const { keyCode: r } = a;
+      (r === $.space || r === $.enter) && (f(!n, a), a.preventDefault());
     },
-    [r, n, f]
-  ), te = m(
+    [c, n, f]
+  ), p = m(
     (a) => {
-      r || (D(!0), L && L(a));
+      c || (K(!0), E && E(a));
     },
-    [r, L]
-  ), ae = m(
+    [c, E]
+  ), ee = m(
     (a) => {
-      r || (D(!1), R && R(a));
+      c || (K(!1), R && R(a));
     },
-    [r, R]
+    [c, R]
   );
-  V(Q, u, [u]);
-  const P = d(null);
-  V(P, u, [u]), ue("switch", P, e, e.webMcp);
-  const ne = K.current || e.dir || s.current && getComputedStyle(s.current).direction || void 0, ie = !_ || b.valid, ce = N(
+  W(J, u, [u]);
+  const T = l(null);
+  W(T, u, [u]), se("switch", T, e, e.webMcp);
+  const te = z.current || e.dir || s.current && getComputedStyle(s.current).direction || void 0, ae = !Y || b.valid, ne = N(
     "k-switch",
     {
       [`k-switch-${x.sizeMap[k] || k}`]: k,
       "k-switch-on": n,
       "k-switch-off": !n,
-      "k-focus": Y,
-      "k-disabled": r,
-      "k-invalid": !ie
+      "k-focus": X,
+      "k-disabled": c,
+      "k-readonly": F,
+      "k-invalid": !ae
     },
     e.className
-  ), re = /* @__PURE__ */ l.createElement(
+  ), ie = /* @__PURE__ */ d.createElement(
     "input",
     {
       type: "checkbox",
@@ -155,32 +158,33 @@ const c = {
       tabIndex: -1,
       value: n,
       style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" },
-      onChange: B,
+      onChange: O,
       name: e.name || void 0
     }
   );
-  return /* @__PURE__ */ l.createElement(
+  return /* @__PURE__ */ d.createElement(
     "span",
     {
       ref: o,
       role: "switch",
       "aria-checked": n,
-      "aria-disabled": r || void 0,
+      "aria-disabled": c || void 0,
+      "aria-readonly": F ? "true" : void 0,
       "aria-labelledby": e.ariaLabelledBy,
       "aria-describedby": e.ariaDescribedBy,
-      "aria-label": e.ariaLabel || Z.toLanguageString(j, A[j]),
+      "aria-label": e.ariaLabel,
       "aria-required": e.required,
-      className: ce,
-      dir: ne,
-      onKeyDown: ee,
-      onClick: p,
-      onBlur: ae,
-      onFocus: te,
-      tabIndex: fe(e.tabIndex, r, void 0),
+      className: ne,
+      dir: te,
+      onKeyDown: _,
+      onClick: Z,
+      onBlur: ee,
+      onFocus: p,
+      tabIndex: oe(e.tabIndex, c, void 0),
       accessKey: e.accessKey,
       id: e.id
     },
-    /* @__PURE__ */ l.createElement(
+    /* @__PURE__ */ d.createElement(
       "span",
       {
         className: N("k-switch-track", {
@@ -188,11 +192,11 @@ const c = {
         }),
         ref: s
       },
-      re,
-      z ? /* @__PURE__ */ l.createElement("span", { className: "k-switch-label-on" }, z) : "",
-      I ? /* @__PURE__ */ l.createElement("span", { className: "k-switch-label-off" }, I) : ""
+      ie,
+      I ? /* @__PURE__ */ d.createElement("span", { className: "k-switch-label-on" }, I) : "",
+      B ? /* @__PURE__ */ d.createElement("span", { className: "k-switch-label-off" }, B) : ""
     ),
-    /* @__PURE__ */ l.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ l.createElement(
+    /* @__PURE__ */ d.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ d.createElement(
       "span",
       {
         className: N("k-switch-thumb", {
@@ -202,21 +206,22 @@ const c = {
     ))
   );
 });
-G.displayName = "Switch";
-const ve = me(), J = le(
-  de(
-    ve,
-    G
+A.displayName = "Switch";
+const be = ue(), G = re(
+  ce(
+    be,
+    A
   )
 );
-J.displayName = "KendoReactSwitch";
-J.propTypes = {
+G.displayName = "KendoReactSwitch";
+G.propTypes = {
   accessKey: t.string,
   checked: t.bool,
   className: t.string,
   defaultChecked: t.bool,
   defaultValue: t.any,
   disabled: t.bool,
+  readOnly: t.bool,
   dir: t.string,
   id: t.string,
   size: t.oneOf(["small", "medium", "large"]),
@@ -239,7 +244,7 @@ J.propTypes = {
   validityStyles: t.bool
 };
 export {
-  J as Switch,
-  ve as SwitchPropsContext,
-  G as SwitchWithoutContext
+  G as Switch,
+  be as SwitchPropsContext,
+  A as SwitchWithoutContext
 };