@progress/kendo-react-inputs 14.4.1-develop.1 → 14.4.1-develop.11

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

package/switch/Switch.mjs

@@ -6,11 +6,11 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as d from "react";
-import { useState as q, useRef as u, useMemo as E, useEffect as L, useCallback as m, useImperativeHandle as ae } from "react";
+import { useState as q, useRef as u, useMemo as E, useEffect as N, useCallback as m, useImperativeHandle as ie } from "react";
 import a from "prop-types";
-import { withIdHOC as ne, withPropsContext as ie, noop as M, dispatchEvent as re, subscribeToKendoPaste as ce, Keys as V, classNames as N, kendoThemeMaps as x, getTabIndex as de, createPropsContext as le } from "@progress/kendo-react-common";
-import { LocalizationService as oe } from "@progress/kendo-react-intl";
-import { switchValidation as H, messages as se } from "../messages/index.mjs";
+import { withIdHOC as re, withPropsContext as ce, noop as B, dispatchEvent as de, subscribeToKendoPaste as le, Keys as V, classNames as x, kendoThemeMaps as M, getTabIndex as oe, createPropsContext as se } from "@progress/kendo-react-common";
+import { LocalizationService as ue } from "@progress/kendo-react-intl";
+import { switchValidation as H, messages as W, switchAriaLabel as $ } from "../messages/index.mjs";
 const r = {
   disabled: !1,
   defaultChecked: !1,
@@ -18,38 +18,38 @@ const r = {
   trackRounded: void 0,
   thumbRounded: void 0,
   offLabel: "OFF",
-  onBlur: M,
-  onFocus: M,
+  onBlur: B,
+  onFocus: B,
   onLabel: "ON",
   validityStyles: !0
-}, W = d.forwardRef((e, j) => {
+}, A = d.forwardRef((e, G) => {
   var T;
   const {
     disabled: c = r.disabled,
-    defaultChecked: A = r.defaultChecked,
-    size: g = r.size,
+    defaultChecked: J = r.defaultChecked,
+    size: y = r.size,
     trackRounded: k = r.trackRounded,
     thumbRounded: w = r.thumbRounded,
-    offLabel: B = r.offLabel,
+    offLabel: I = r.offLabel,
     onBlur: C = r.onBlur,
-    onFocus: R = r.onFocus,
-    onLabel: I = r.onLabel
-  } = e, [F, G] = q(A || !1), [J, D] = q(!1), l = u(null), o = u(null), S = u(null), b = u(void 0), K = u(void 0), z = u(void 0), O = E(() => new oe(), []), n = E(() => b.current !== void 0 ? b.current : e.checked !== void 0 ? e.checked : F, [e.checked, F]), f = E(() => {
-    var y, P;
-    const t = e.validationMessage !== void 0, i = (y = e.valid) != null ? y : e.required ? !!n : !0, v = (P = e.valid) != null ? P : i;
+    onFocus: S = r.onFocus,
+    onLabel: F = r.onLabel
+  } = e, [D, Q] = q(J || !1), [U, K] = q(!1), l = u(null), o = u(null), R = u(null), b = u(void 0), z = u(void 0), O = u(void 0), L = E(() => new ue(), []), n = E(() => b.current !== void 0 ? b.current : e.checked !== void 0 ? e.checked : D, [e.checked, D]), f = E(() => {
+    var g, P;
+    const t = e.validationMessage !== void 0, i = (g = e.valid) != null ? g : e.required ? !!n : !0, v = (P = e.valid) != null ? P : i;
     return {
       customError: t,
       valid: v,
       valueMissing: n === null
     };
-  }, [e.valid, e.validationMessage, e.required, n]), Q = (T = e.validityStyles) != null ? T : r.validityStyles;
-  L(() => {
+  }, [e.valid, e.validationMessage, e.required, n]), X = (T = e.validityStyles) != null ? T : r.validityStyles;
+  N(() => {
     var t;
-    (t = S.current) != null && t.setCustomValidity && S.current.setCustomValidity(
-      f.valid ? "" : e.validationMessage || O.toLanguageString(H, se[H])
+    (t = R.current) != null && t.setCustomValidity && R.current.setCustomValidity(
+      f.valid ? "" : e.validationMessage || L.toLanguageString(H, W[H])
     );
-  }, [f, e.validationMessage, O]), L(() => {
-    l.current && (z.current = e.dir || getComputedStyle(l.current).direction || void 0);
+  }, [f, e.validationMessage, L]), N(() => {
+    l.current && (O.current = e.dir || getComputedStyle(l.current).direction || void 0);
   }, [e.dir]);
   const h = m(() => ({
     props: e,
@@ -74,7 +74,7 @@ const r = {
     }
   }), [e, n, f]), s = m(
     (t, i) => {
-      G(t), b.current = t, re(
+      Q(t), b.current = t, de(
         e.onChange,
         i,
         { ...h(), value: t },
@@ -83,17 +83,17 @@ const r = {
     },
     [e.onChange, h]
   );
-  L(() => {
-    const t = e.name || e.id, i = ce(o.current, {
+  N(() => {
+    const t = e.name || e.id, i = le(o.current, {
       fieldName: t,
       onValueChange: (v) => {
         if (v !== n) {
-          const y = {
+          const g = {
             target: o.current,
             currentTarget: o.current,
             nativeEvent: new Event("change", { bubbles: !0 })
           };
-          s(v, y);
+          s(v, g);
         }
       }
     });
@@ -101,12 +101,12 @@ const r = {
       i == null || i.unsubscribe();
     };
   }, [e.name, e.id, n, s]);
-  const U = m(
+  const Y = m(
     (t) => {
-      K.current !== t.timeStamp && (K.current = t.timeStamp, s(!n, t));
+      z.current !== t.timeStamp && (z.current = t.timeStamp, s(!n, t));
     },
     [n, s]
-  ), X = m(
+  ), Z = m(
     (t) => {
       if (c)
         return;
@@ -114,40 +114,41 @@ const r = {
       (i === V.space || i === V.enter) && (s(!n, t), t.preventDefault());
     },
     [c, n, s]
-  ), Y = m(
+  ), _ = m(
     (t) => {
-      c || (D(!0), R && R(t));
+      c || (K(!0), S && S(t));
     },
-    [c, R]
-  ), Z = m(
+    [c, S]
+  ), p = m(
     (t) => {
-      c || (D(!1), C && C(t));
+      c || (K(!1), C && C(t));
     },
     [c, C]
   );
-  ae(j, h, [h]);
-  const _ = z.current || e.dir || l.current && getComputedStyle(l.current).direction || void 0, p = !Q || f.valid, ee = N(
+  ie(G, h, [h]);
+  const ee = O.current || e.dir || l.current && getComputedStyle(l.current).direction || void 0, te = !X || f.valid, ae = x(
     "k-switch",
     {
-      [`k-switch-${x.sizeMap[g] || g}`]: g,
+      [`k-switch-${M.sizeMap[y] || y}`]: y,
       "k-switch-on": n,
       "k-switch-off": !n,
-      "k-focus": J,
+      "k-focus": U,
       "k-disabled": c,
-      "k-invalid": !p
+      "k-invalid": !te
     },
     e.className
-  ), te = /* @__PURE__ */ d.createElement(
+  ), ne = /* @__PURE__ */ d.createElement(
     "input",
     {
       type: "checkbox",
       checked: e.checked,
-      ref: S,
+      ref: R,
       tabIndex: -1,
       "aria-hidden": !0,
+      "aria-label": e.ariaLabel || L.toLanguageString($, W[$]),
       value: n,
       style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" },
-      onChange: M,
+      onChange: B,
       name: e.name || void 0
     }
   );
@@ -162,47 +163,47 @@ const r = {
       "aria-describedby": e.ariaDescribedBy,
       "aria-label": e.ariaLabel,
       "aria-required": e.required,
-      className: ee,
-      dir: _,
-      onKeyDown: X,
-      onClick: U,
-      onBlur: Z,
-      onFocus: Y,
-      tabIndex: de(e.tabIndex, c, void 0),
+      className: ae,
+      dir: ee,
+      onKeyDown: Z,
+      onClick: Y,
+      onBlur: p,
+      onFocus: _,
+      tabIndex: oe(e.tabIndex, c, void 0),
       accessKey: e.accessKey,
       id: e.id
     },
     /* @__PURE__ */ d.createElement(
       "span",
       {
-        className: N("k-switch-track", {
-          [`k-rounded-${x.roundedMap[k] || k}`]: k
+        className: x("k-switch-track", {
+          [`k-rounded-${M.roundedMap[k] || k}`]: k
         }),
         ref: l
       },
-      te,
-      I ? /* @__PURE__ */ d.createElement("span", { className: "k-switch-label-on" }, I) : "",
-      B ? /* @__PURE__ */ d.createElement("span", { className: "k-switch-label-off" }, B) : ""
+      ne,
+      F ? /* @__PURE__ */ d.createElement("span", { className: "k-switch-label-on" }, F) : "",
+      I ? /* @__PURE__ */ d.createElement("span", { className: "k-switch-label-off" }, I) : ""
     ),
     /* @__PURE__ */ d.createElement("span", { className: "k-switch-thumb-wrap" }, /* @__PURE__ */ d.createElement(
       "span",
       {
-        className: N("k-switch-thumb", {
-          [`k-rounded-${x.roundedMap[w] || w}`]: w
+        className: x("k-switch-thumb", {
+          [`k-rounded-${M.roundedMap[w] || w}`]: w
         })
       }
     ))
   );
 });
-W.displayName = "Switch";
-const ue = le(), $ = ne(
-  ie(
-    ue,
-    W
+A.displayName = "Switch";
+const me = se(), j = re(
+  ce(
+    me,
+    A
   )
 );
-$.displayName = "KendoReactSwitch";
-$.propTypes = {
+j.displayName = "KendoReactSwitch";
+j.propTypes = {
   accessKey: a.string,
   checked: a.bool,
   className: a.string,
@@ -231,7 +232,7 @@ $.propTypes = {
   validityStyles: a.bool
 };
 export {
-  $ as Switch,
-  ue as SwitchPropsContext,
-  W as SwitchWithoutContext
+  j as Switch,
+  me as SwitchPropsContext,
+  A as SwitchWithoutContext
 };