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

package/slider/Slider.mjs

@@ -6,43 +6,45 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as r from "react";
-import { useState as R, useRef as N, useMemo as z, useEffect as q, useCallback as c, useImperativeHandle as me } 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 ue, dispatchEvent as fe, Keys as m, useWebMcpRegister as ge, classNames as ve, Draggable as he, getTabIndex as be, createPropsContext as ye } from "@progress/kendo-react-common";
-import { LocalizationService as ke, registerForLocalization as xe } from "@progress/kendo-react-intl";
-import { sliderDragTitle as H, messages as B, sliderDecreaseValue as O, sliderIncreaseValue as W } from "../messages/index.mjs";
-import { SLIDER_LABEL_ATTRIBUTE as Se } from "./SliderLabel.mjs";
-import { Button as X } from "@progress/kendo-react-buttons";
-import { chevronUpIcon as _, chevronLeftIcon as j, chevronDownIcon as G, chevronRightIcon as Y } from "@progress/kendo-svg-icons";
+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 { 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 g = {
   step: 1,
   largeStep: 10,
   buttons: !1,
   vertical: !1,
   disabled: !1,
+  readOnly: !1,
   tabIndex: 0
-}, V = r.forwardRef((e, P) => {
-  var M, K, U;
+}, V = r.forwardRef((e, Q) => {
+  var O, K, U;
   const {
     step: u = g.step,
     largeStep: C = g.largeStep,
     vertical: a = g.vertical,
     disabled: d = g.disabled,
-    tabIndex: Q = g.tabIndex
-  } = e, [Z, $] = R((M = e.defaultValue) != null ? M : e.min), [p, A] = R(!1), [I, ee] = R(e.dir), E = N(null), v = N(null), T = z(() => new ke(), []), D = N(null), L = e.value !== void 0, k = L && e.value !== void 0 ? e.value : Z, l = z(() => k < e.min ? e.min : k > e.max ? e.max : k, [k, e.min, e.max]), h = z(() => {
+    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]), f = (K = e.dir) != null ? K : I;
   q(() => {
     if (e.dir === void 0 && v.current) {
       const n = window.getComputedStyle(v.current).direction;
-      n !== I && ee(n);
+      n !== I && te(n);
     }
   }, [e.dir, I]);
-  const F = c((t) => {
+  const M = c((t) => {
     let n = t;
     for (; n; ) {
-      if (n.getAttribute(Se))
+      if (n.getAttribute(we))
         return !0;
       n = n.parentElement;
     }
@@ -50,14 +52,14 @@ const g = {
   }, []), s = c(
     (t, n) => {
       const o = Math.min(Math.max(n, e.min), e.max);
-      L || $(o), fe(e.onChange, t, D.current, { value: o });
+      L || p(o), ge(e.onChange, t, D.current, { value: o });
     },
     [e.min, e.max, e.onChange, L]
-  ), te = c(() => {
-    A(!0);
-  }, []), ne = c(() => {
-    A(!1);
-  }, []), ae = c(
+  ), ne = c(() => {
+    F(!0);
+  }, []), ae = c(() => {
+    F(!1);
+  }, []), ie = c(
     (t) => {
       if (d)
         return;
@@ -65,12 +67,12 @@ const g = {
       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, C, e.min, e.max, s, d]
-  ), ie = c(
+  ), re = c(
     (t) => {
       t.preventDefault(), !d && s(t, l - (u || 0));
     },
     [l, u, s, d]
-  ), re = c(
+  ), le = c(
     (t) => {
       t.preventDefault(), !d && s(t, l + (u || 0));
     },
@@ -84,25 +86,25 @@ const g = {
       s(t, e.min + y * (e.max - e.min));
     },
     [a, e.min, e.max, f, s]
-  ), le = c(
+  ), ce = c(
     (t) => {
-      F(t.event.originalEvent.target) || (t.event.isTouch && t.event.originalEvent.preventDefault(), x(t));
+      M(t.event.originalEvent.target) || (t.event.isTouch && t.event.originalEvent.preventDefault(), x(t));
     },
-    [F, x]
-  ), ce = c(
+    [M, x]
+  ), oe = c(
     (t) => {
       t.event.originalEvent.preventDefault(), x(t);
     },
     [x]
   ), S = c(() => {
     v.current && v.current.focus();
-  }, []), oe = c(
+  }, []), de = c(
     (t) => {
       if (!t.enabled)
         return t.children;
       let n, o, b, y;
-      return f === "rtl" ? (n = a ? _ : j, o = a ? G : Y, b = a ? "chevron-up" : "chevron-left", y = a ? "chevron-down" : "chevron-right") : (n = a ? _ : Y, o = a ? G : j, b = a ? "chevron-up" : "chevron-right", y = a ? "chevron-down" : "chevron-left"), /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
-        X,
+      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",
@@ -112,7 +114,7 @@ const g = {
           onClick: t.decrement
         }
       ), t.children, /* @__PURE__ */ r.createElement(
-        X,
+        _,
         {
           className: "k-button-increase",
           rounded: "full",
@@ -125,22 +127,22 @@ const g = {
     },
     [f, a]
   );
-  me(
-    P,
+  ue(
+    Q,
     () => ({
       props: e,
       sliderTrack: E.current,
       focus: S
     }),
     [e, S]
-  ), ge("slider", D, e, e.webMcp), q(() => {
+  ), ve("slider", D, e, e.webMcp), q(() => {
     D.current = {
       props: e,
       sliderTrack: E.current,
       focus: S
     };
   }, [e, S]);
-  const de = a ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, se = a ? { paddingTop: 0, height: "100%" } : {};
+  const se = a ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" }, me = a ? { paddingTop: 0, height: "100%" } : {};
   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",
@@ -150,33 +152,34 @@ const g = {
       id: e.id,
       "aria-label": e.ariaLabel,
       style: { gap: 0, ...e.style },
-      onFocus: te,
-      onBlur: ne,
-      onKeyDown: ae,
-      className: ve(
+      onFocus: ne,
+      onBlur: ae,
+      onKeyDown: ie,
+      className: he(
         "k-slider",
         {
-          "k-focus": p,
+          "k-focus": ee,
           "k-disabled": d,
+          "k-readonly": A,
           "k-slider-horizontal": !a,
           "k-slider-vertical": a
         },
         e.className
       )
     },
-    oe({
+    de({
       enabled: (U = e.buttons) != null ? U : g.buttons,
-      decrement: ie,
-      increment: re,
+      decrement: re,
+      increment: le,
       incrementTitle: T.toLanguageString(
-        W,
-        B[W]
+        X,
+        B[X]
       ),
       decrementTitle: T.toLanguageString(
-        O,
-        B[O]
+        W,
+        B[W]
       ),
-      children: /* @__PURE__ */ r.createElement(he, { onDrag: ce, onPress: le, autoScroll: !1 }, /* @__PURE__ */ r.createElement(
+      children: /* @__PURE__ */ r.createElement(be, { onDrag: oe, onPress: ce, autoScroll: !1 }, /* @__PURE__ */ r.createElement(
         "div",
         {
           className: "k-slider-track-wrap",
@@ -184,7 +187,7 @@ const g = {
             flexGrow: 1,
             position: "relative",
             touchAction: "none",
-            ...de
+            ...se
           }
         },
         e.children && /* @__PURE__ */ r.createElement(
@@ -192,7 +195,7 @@ const g = {
           {
             className: "k-reset k-slider-items",
             "aria-hidden": "true",
-            style: { margin: 0, ...se }
+            style: { margin: 0, ...me }
           },
           r.Children.map(e.children, (t, n) => t && r.cloneElement(
             t,
@@ -228,10 +231,11 @@ const g = {
               "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,
-              tabIndex: be(Q, d, void 0),
+              tabIndex: ye(Z, d, void 0),
               className: "k-draghandle k-draghandle-end",
               title: T.toLanguageString(
                 H,
@@ -246,9 +250,9 @@ const g = {
   );
 });
 V.displayName = "Slider";
-const we = ye(), J = ue(we, V);
-J.displayName = "KendoReactSlider";
-J.propTypes = {
+const Ce = ke(), P = fe(Ce, V);
+P.displayName = "KendoReactSlider";
+P.propTypes = {
   value: i.number,
   defaultValue: i.number,
   min: i.number.isRequired,
@@ -261,6 +265,7 @@ J.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 @@ J.propTypes = {
   dir: i.oneOf(["ltr", "rtl"]),
   children: i.node
 };
-xe(V);
+Se(V);
 export {
-  J as Slider,
-  we as SliderPropsContext,
+  P as Slider,
+  Ce as SliderPropsContext,
   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"),L=require("../messages/index.js");function Z(e){const b=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(b,s,v.get?v:{enumerable:!0,get:()=>e[s]})}}return b.default=e,Object.freeze(b)}const d=Z(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=d.forwardRef((e,b)=>{var F;const{disabled:s=r.disabled,defaultChecked:v=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}=e,[B,V]=n.useState(v||!1),[W,D]=n.useState(!1),u=n.useRef(null),o=n.useRef(null),k=n.useRef(null),g=n.useRef(void 0),N=n.useRef(!1),P=n.useRef(void 0),T=n.useMemo(()=>new j.LocalizationService,[]);j.useLocalization();const i=n.useMemo(()=>g.current!==void 0?g.current:e.checked!==void 0?e.checked:B,[e.checked,B]),h=n.useMemo(()=>{var w,K;const a=e.validationMessage!==void 0,l=(w=e.valid)!=null?w:e.required?!!i:!0,y=(K=e.valid)!=null?K:l;return{customError:a,valid:y,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(h.valid?"":e.validationMessage||T.toLanguageString(L.switchValidation,L.messages[L.switchValidation]))},[h,e.validationMessage,T]),n.useEffect(()=>{u.current&&(P.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,l)=>{V(a),g.current=a,c.dispatchEvent(e.onChange,l,{...f(),value:a},{value:a}),g.current=void 0},[e.onChange,f]);n.useEffect(()=>{const a=e.name||e.id,l=c.subscribeToKendoPaste(o.current,{fieldName:a,onValueChange:y=>{if(y!==i){const w={target:o.current,currentTarget:o.current,nativeEvent:new Event("change",{bubbles:!0})};m(y,w)}}});return()=>{l==null||l.unsubscribe()}},[e.name,e.id,i,m]);const $=n.useCallback(a=>{if(a.target===k.current){if(N.current){N.current=!1;return}}else N.current=!0;m(!i,a)},[i,m]),A=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]),G=n.useCallback(a=>{s||(D(!0),E&&E(a))},[s,E]),J=n.useCallback(a=>{s||(D(!1),M&&M(a))},[s,M]);n.useImperativeHandle(b,f,[f]);const z=n.useRef(null);n.useImperativeHandle(z,f,[f]),c.useWebMcpRegister("switch",z,e,e.webMcp);const Q=P.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":s,"k-invalid":!U},e.className),Y=d.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 d.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,"aria-required":e.required,className:X,dir:Q,onKeyDown:A,onClick:$,onBlur:J,onFocus:G,tabIndex:c.getTabIndex(e.tabIndex,s,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(),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

@@ -6,52 +6,52 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as d from "react";
-import { useState as H, useRef as l, useMemo as S, useEffect as M, useCallback as m, useImperativeHandle as V } 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 ie, withPropsContext as ce, noop as B, dispatchEvent as re, subscribeToKendoPaste as de, Keys as W, useWebMcpRegister as le, classNames as N, kendoThemeMaps as x, getTabIndex as se, createPropsContext as oe } from "@progress/kendo-react-common";
-import { LocalizationService as ue, useLocalization as fe } from "@progress/kendo-react-intl";
-import { switchValidation as $, messages as me } 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
-}, j = d.forwardRef((e, G) => {
-  var T;
+}, A = d.forwardRef((e, J) => {
+  var q;
   const {
-    disabled: r = c.disabled,
-    defaultChecked: J = c.defaultChecked,
-    size: k = c.size,
-    trackRounded: w = c.trackRounded,
-    thumbRounded: C = c.thumbRounded,
-    offLabel: I = c.offLabel,
-    onBlur: R = c.onBlur,
-    onFocus: E = c.onFocus,
-    onLabel: F = c.onLabel
-  } = e, [z, Q] = H(J || !1), [U, D] = H(!1), s = l(null), o = l(null), h = l(null), v = l(void 0), L = l(!1), K = l(void 0), O = S(() => new ue(), []);
-  fe();
-  const n = S(() => v.current !== void 0 ? v.current : e.checked !== void 0 ? e.checked : z, [e.checked, z]), b = S(() => {
-    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]), X = (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($, me[$])
+      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,
@@ -75,10 +75,10 @@ const c = {
       return b;
     }
   }), [e, n, b]), f = m(
-    (a, i) => {
-      Q(a), v.current = a, re(
+    (a, r) => {
+      U(a), v.current = a, de(
         e.onChange,
-        i,
+        r,
         { ...u(), value: a },
         { value: a }
       ), v.current = void 0;
@@ -86,69 +86,70 @@ const c = {
     [e.onChange, u]
   );
   M(() => {
-    const a = e.name || e.id, i = de(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 Y = m(
+  const Z = m(
     (a) => {
       if (a.target === h.current) {
-        if (L.current) {
-          L.current = !1;
+        if (S.current) {
+          S.current = !1;
           return;
         }
       } else
-        L.current = !0;
+        S.current = !0;
       f(!n, a);
     },
     [n, f]
-  ), Z = 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]
-  ), _ = m(
+    [c, n, f]
+  ), p = m(
     (a) => {
-      r || (D(!0), E && E(a));
+      c || (K(!0), E && E(a));
     },
-    [r, E]
-  ), p = m(
+    [c, E]
+  ), ee = m(
     (a) => {
-      r || (D(!1), R && R(a));
+      c || (K(!1), R && R(a));
     },
-    [r, R]
+    [c, R]
   );
-  V(G, u, [u]);
-  const P = l(null);
-  V(P, u, [u]), le("switch", P, e, e.webMcp);
-  const ee = K.current || e.dir || s.current && getComputedStyle(s.current).direction || void 0, te = !X || b.valid, ae = 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": U,
-      "k-disabled": r,
-      "k-invalid": !te
+      "k-focus": X,
+      "k-disabled": c,
+      "k-readonly": F,
+      "k-invalid": !ae
     },
     e.className
-  ), ne = /* @__PURE__ */ d.createElement(
+  ), ie = /* @__PURE__ */ d.createElement(
     "input",
     {
       type: "checkbox",
@@ -157,7 +158,7 @@ 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
     }
   );
@@ -167,18 +168,19 @@ const c = {
       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,
       "aria-required": e.required,
-      className: ae,
-      dir: ee,
-      onKeyDown: Z,
-      onClick: Y,
-      onBlur: p,
-      onFocus: _,
-      tabIndex: se(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
     },
@@ -190,9 +192,9 @@ const c = {
         }),
         ref: s
       },
-      ne,
-      F ? /* @__PURE__ */ d.createElement("span", { className: "k-switch-label-on" }, F) : "",
-      I ? /* @__PURE__ */ d.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__ */ d.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ d.createElement(
       "span",
@@ -204,21 +206,22 @@ const c = {
     ))
   );
 });
-j.displayName = "Switch";
-const be = oe(), A = ie(
+A.displayName = "Switch";
+const be = ue(), G = re(
   ce(
     be,
-    j
+    A
   )
 );
-A.displayName = "KendoReactSwitch";
-A.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"]),
@@ -241,7 +244,7 @@ A.propTypes = {
   validityStyles: t.bool
 };
 export {
-  A as Switch,
+  G as Switch,
   be as SwitchPropsContext,
-  j as SwitchWithoutContext
+  A as SwitchWithoutContext
 };

package/textarea/TextArea.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 ge=require("react"),e=require("prop-types"),n=require("@progress/kendo-react-common");function ve(l){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const o in l)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(l,o);Object.defineProperty(c,o,i.get?i:{enumerable:!0,get:()=>l[o]})}}return c.default=l,Object.freeze(c)}const t=ve(ge),K=n.createPropsContext(),T=t.forwardRef((l,c)=>{const o=n.usePropsContext(K,l),{size:i=m.size,rounded:x=m.rounded,fillMode:S=m.fillMode,autoFocus:L=m.autoFocus,flow:h=m.flow,prefix:_=null,suffix:W=null,ariaDescribedBy:G,ariaLabelledBy:J,autoSize:p,className:Q,defaultValue:U,disabled:s,readOnly:X,required:b,rows:Y,id:M,name:w,placeholder:Z,style:ee,tabIndex:te,value:y,valid:E,validationMessage:F,validityStyles:I,onChange:k,onFocus:C,onBlur:z,visited:xe,touched:he,modified:ye,resizable:d,inputAttributes:ae,textareaStyle:V,...ne}=o,a=t.useRef(null),A=t.useCallback(()=>{a.current&&a.current.focus()},[]),N=t.useCallback(()=>{a.current&&a.current.blur()},[]),[B,R]=t.useState(U),[re,j]=t.useState(!1),[oe,se]=n.useCustomComponent(_),[le,ue]=n.useCustomComponent(W),g=y!==void 0,v=g?y:B,q=w||M,u=t.useCallback(()=>({element:a,focus:A,blur:N,get value(){return v},get name(){return a.current&&a.current.name}}),[N,A,v]);t.useImperativeHandle(c,u);const H=t.useRef(null);t.useImperativeHandle(H,u),n.useWebMcpRegister("textarea",H,o,o.webMcp);const[D,$]=t.useState("auto"),ie=n.useId(),ce=n.useDir(a,o.dir),O=E!==void 0?E:b?!!v:!0;t.useEffect(()=>{a.current&&a.current.setCustomValidity&&a.current.setCustomValidity(O?"":F||"")},[O,F]),n.useIsomorphicLayoutEffect(()=>{a.current&&$(`${a.current.scrollHeight}px`)},[v]);const P=t.useCallback(r=>{const f=r.target.value;$("auto"),!g&&!s&&R(f),k&&!s&&n.dispatchEvent(k,r,{...u(),value:f},{value:f})},[R,k,s,g]),de=t.useCallback(r=>{j(!0),C&&!s&&n.dispatchEvent(C,r,u(),void 0)},[C,s,u]),fe=t.useCallback(r=>{j(!1),z&&!s&&n.dispatchEvent(z,r,u(),void 0)},[z,s,u]),me=t.useCallback(r=>{a.current&&(a.current.value=r);const f={target:a.current,currentTarget:a.current};P(f)},[P]);n.useKendoPaste(a,{fieldName:q,onValueChange:me,enabled:!!q});const pe=t.useMemo(()=>{let r={};return p?r={resize:"none",overflow:"hidden",height:D}:d&&(r={resize:d}),{...r,...V}},[p,d,D,V]),be={id:M||ie,name:w,className:n.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!p&&d!=="none","k-resize-none":p||d==="none","!k-flex-none":h==="vertical"}),ref:a,disabled:s,rows:Y,placeholder:Z,readOnly:X,required:b,tabIndex:n.getTabIndex(te,s),autoFocus:L,style:pe,"aria-labelledby":J,"aria-describedby":G,"aria-disabled":s||void 0,"aria-required":b,value:g?y:B,...Object.assign({},ne,ae),onChange:P,onFocus:de,onBlur:fe};return t.createElement("span",{className:n.classNames("k-input","k-textarea",{[`k-input-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-input-${S}`]:S,[`k-rounded-${n.kendoThemeMaps.roundedMap[x]||x}`]:x,"k-invalid":!(O||I!==void 0||I===!0),"k-required":b,"k-disabled":s,"k-focus":re,"!k-flex-col":h==="vertical","!k-flex-row":h==="horizontal"},Q),style:ee,dir:ce},o.prefix&&t.createElement(oe,{...se}),t.createElement("textarea",{...be}),o.suffix&&t.createElement(le,{...ue}))});T.propTypes={ariaDescribedBy:e.string,ariaLabelledBy:e.string,autoSize:e.bool,className:e.string,defaultValue:e.string,dir:e.string,disabled:e.bool,readOnly:e.bool,rows:e.number,id:e.string,name:e.string,placeholder:e.string,style:e.object,tabIndex:e.number,value:e.oneOfType([e.string,e.arrayOf(e.string),e.number]),onChange:e.func,onFocus:e.func,onBlur:e.func,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"]),autoFocus:e.bool,flow:e.oneOf(["vertical","horizontal"])};const m={size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1,flow:"horizontal"};T.displayName="KendoTextArea";exports.TextArea=T;exports.TextAreaPropsContext=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ge=require("react"),e=require("prop-types"),n=require("@progress/kendo-react-common");function ve(l){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const o in l)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(l,o);Object.defineProperty(c,o,i.get?i:{enumerable:!0,get:()=>l[o]})}}return c.default=l,Object.freeze(c)}const t=ve(ge),K=n.createPropsContext(),T=t.forwardRef((l,c)=>{const o=n.usePropsContext(K,l),{size:i=m.size,rounded:x=m.rounded,fillMode:S=m.fillMode,autoFocus:L=m.autoFocus,flow:h=m.flow,prefix:_=null,suffix:W=null,ariaDescribedBy:G,ariaLabelledBy:J,autoSize:p,className:Q,defaultValue:U,disabled:s,readOnly:X,required:b,rows:Y,id:M,name:w,placeholder:Z,style:ee,tabIndex:te,value:y,valid:E,validationMessage:F,validityStyles:I,onChange:k,onFocus:C,onBlur:z,visited:xe,touched:he,modified:ye,resizable:d,inputAttributes:ae,textareaStyle:V,...ne}=o,a=t.useRef(null),A=t.useCallback(()=>{a.current&&a.current.focus()},[]),N=t.useCallback(()=>{a.current&&a.current.blur()},[]),[B,R]=t.useState(U),[re,j]=t.useState(!1),[oe,se]=n.useCustomComponent(_),[le,ue]=n.useCustomComponent(W),g=y!==void 0,v=g?y:B,q=w||M,u=t.useCallback(()=>({element:a,focus:A,blur:N,get value(){return v},get name(){return a.current&&a.current.name}}),[N,A,v]);t.useImperativeHandle(c,u);const H=t.useRef(null);t.useImperativeHandle(H,u),n.useWebMcpRegister("textarea",H,o,o.webMcp);const[D,$]=t.useState("auto"),ie=n.useId(),ce=n.useDir(a,o.dir),O=E!==void 0?E:b?!!v:!0;t.useEffect(()=>{a.current&&a.current.setCustomValidity&&a.current.setCustomValidity(O?"":F||"")},[O,F]),n.useIsomorphicLayoutEffect(()=>{a.current&&$(`${a.current.scrollHeight}px`)},[v]);const P=t.useCallback(r=>{const f=r.target.value;$("auto"),!g&&!s&&R(f),k&&!s&&n.dispatchEvent(k,r,{...u(),value:f},{value:f})},[R,k,s,g]),de=t.useCallback(r=>{j(!0),C&&!s&&n.dispatchEvent(C,r,u(),void 0)},[C,s,u]),fe=t.useCallback(r=>{j(!1),z&&!s&&n.dispatchEvent(z,r,u(),void 0)},[z,s,u]),me=t.useCallback(r=>{a.current&&(a.current.value=r);const f={target:a.current,currentTarget:a.current};P(f)},[P]);n.useKendoPaste(a,{fieldName:q,onValueChange:me,enabled:!!q});const pe=t.useMemo(()=>{let r={};return p?r={resize:"none",overflow:"hidden",height:D}:d&&(r={resize:d}),{...r,...V}},[p,d,D,V]),be={id:M||ie,name:w,className:n.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!p&&d!=="none","k-resize-none":p||d==="none","!k-flex-none":h==="vertical"}),ref:a,disabled:s,rows:Y,placeholder:Z,readOnly:X,required:b,tabIndex:n.getTabIndex(te,s),autoFocus:L,style:pe,"aria-labelledby":J,"aria-describedby":G,"aria-required":b,value:g?y:B,...Object.assign({},ne,ae),onChange:P,onFocus:de,onBlur:fe};return t.createElement("span",{className:n.classNames("k-input","k-textarea",{[`k-input-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-input-${S}`]:S,[`k-rounded-${n.kendoThemeMaps.roundedMap[x]||x}`]:x,"k-invalid":!(O||I!==void 0||I===!0),"k-required":b,"k-disabled":s,"k-focus":re,"!k-flex-col":h==="vertical","!k-flex-row":h==="horizontal"},Q),style:ee,dir:ce},o.prefix&&t.createElement(oe,{...se}),t.createElement("textarea",{...be}),o.suffix&&t.createElement(le,{...ue}))});T.propTypes={ariaDescribedBy:e.string,ariaLabelledBy:e.string,autoSize:e.bool,className:e.string,defaultValue:e.string,dir:e.string,disabled:e.bool,readOnly:e.bool,rows:e.number,id:e.string,name:e.string,placeholder:e.string,style:e.object,tabIndex:e.number,value:e.oneOfType([e.string,e.arrayOf(e.string),e.number]),onChange:e.func,onFocus:e.func,onBlur:e.func,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"]),autoFocus:e.bool,flow:e.oneOf(["vertical","horizontal"])};const m={size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1,flow:"horizontal"};T.displayName="KendoTextArea";exports.TextArea=T;exports.TextAreaPropsContext=K;