@progress/kendo-react-inputs 8.1.0-develop.9 → 8.1.0

package/signature/Signature.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ve=require("@progress/kendo-inputs-common"),R=require("@progress/kendo-react-buttons"),r=require("@progress/kendo-react-common"),ye=require("@progress/kendo-react-dialogs"),Ce=require("@progress/kendo-react-intl"),a=require("prop-types"),he=require("react"),d=require("../messages/index.js"),Se=require("../package-metadata.js"),ze=require("./utils/index.js"),q=require("@progress/kendo-svg-icons");function Oe(i){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const e in i)if(e!=="default"){const f=Object.getOwnPropertyDescriptor(i,e);Object.defineProperty(p,e,f.get?f:{enumerable:!0,get:()=>i[e]})}}return p.default=i,Object.freeze(p)}const n=Oe(he),Ee=250,xe=84,Z=3,ee=2,Me="#000000",Ie="#ffffff",Y=i=>i!==void 0,te=r.createPropsContext(),b=n.forwardRef((i,p)=>{r.validatePackage(Se.packageMetadata);const e=r.usePropsContext(te,i),f=Ce.useLocalization(),c=n.useRef(null),v=n.useRef(null),T=n.useRef(null),B=n.useRef(null),_=n.useRef(null),[s,ne]=n.useState(),[y,N]=n.useState(!1),[O,j]=n.useState(!1),[C,F]=n.useState(),[oe,ae]=n.useState(),G=Y(e.value)?e.value:C,[re,se]=n.useState(!1),k=Y(e.open),g=k?e.open:re,ie=e.maximized||O||!e.maximizable||e.disabled,le=!(e.maximized&&!O),ce=!(!(e.value||C)||O||e.readOnly||e.disabled),A=f.toLanguageString(d.signatureMaximize,d.messages[d.signatureMaximize]),V=f.toLanguageString(d.signatureMinimize,d.messages[d.signatureMinimize]),U=f.toLanguageString(d.signatureClear,d.messages[d.signatureClear]),E=e.popupScale||Z,x=e.exportScale||ee,M=t=>{F(t),e.onChange&&e.onChange({value:t})},ue=t=>{s==null||s.loadImage(t.value),M(t.value)};n.useEffect(()=>{e.value!==C&&(F(e.value),s==null||s.loadImage(e.value))},[e.value]);const de=()=>{s==null||s.clear(),M()},h=n.useCallback(t=>{k||se(t)},[k]),me=t=>{var o,l;X(t),(l=((o=_.current)==null?void 0:o.element)||v.current)==null||l.focus()},I=n.useCallback(()=>{let t=Me;return!e.color&&typeof document!="undefined"&&c.current&&(t=getComputedStyle(c.current).color),e.color||t},[e.color]),w=n.useCallback(()=>{let t=Ie;return!e.backgroundColor&&typeof document!="undefined"&&c.current&&(t=getComputedStyle(c.current).backgroundColor),e.backgroundColor||t},[e.backgroundColor]),W=()=>({scale:e.maximized?e.popupScale:1,color:I(),backgroundColor:w(),strokeWidth:e.strokeWidth,smooth:e.smooth,readonly:e.readOnly}),H=async t=>{const{width:o,height:l}=t;return await(s==null?void 0:s.exportImage({width:o*x,height:l*x}))};n.useEffect(()=>{const t=v.current,o=new ve.SignaturePad(t,W());return G&&o.loadImage(G),ne(o),()=>o.destroy()},[]),n.useEffect(()=>{s==null||s.setOptions({onChange:async()=>M(await H(J())),onDraw:()=>j(!0),onDrawEnd:()=>j(!1)})},[s]),r.useIsomorphicLayoutEffect(()=>s==null?void 0:s.setOptions(W()),[e.readOnly,e.color,e.backgroundColor,e.strokeWidth,e.smooth]),n.useEffect(()=>{var l,m;const t=(m=(l=T.current)==null?void 0:l.element)==null?void 0:m.querySelector(".k-overlay");if(!t)return;const o=()=>h(!1);return t.addEventListener("click",o),()=>t.removeEventListener("click",o)},[g]),n.useEffect(()=>{if(!g||typeof document=="undefined")return;const t=o=>{o.keyCode===r.Keys.esc&&h(!1)};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[g]),n.useEffect(()=>{var t,o;e.maximized&&((o=(t=B.current)==null?void 0:t.element)==null||o.focus())},[]);const P=n.useCallback(()=>{var t;return(t=v.current)==null?void 0:t.focus()},[]),S=n.useCallback(()=>e.value,[e.value]),$=n.useCallback(()=>e.name,[e.name]),z=n.useCallback(()=>e.required,[e.required]),L=n.useCallback(()=>{const t=e.validationMessage!==void 0,l=!S(),m=e.valid!==void 0?e.valid:!z()||!l;return{customError:t,valid:m,valueMissing:l}},[e.validationMessage,e.valid,S,z]),D=n.useCallback(()=>e.validityStyles,[e.validityStyles]),K=n.useCallback(()=>e,[e]),u=n.useCallback(()=>{const t={element:c.current,focus:P};return Object.defineProperty(t,"name",{get:$}),Object.defineProperty(t,"value",{get:S}),Object.defineProperty(t,"validity",{get:L}),Object.defineProperty(t,"validityStyles",{get:D}),Object.defineProperty(t,"required",{get:z}),Object.defineProperty(t,"props",{get:K}),Object.defineProperty(t,"color",{get:I}),Object.defineProperty(t,"backgroundColor",{get:w}),t},[$,S,L,D,z,P,K,I,w]);n.useImperativeHandle(p,u);const fe=n.useCallback(t=>{y||e.maximized||(N(!0),r.dispatchEvent(e.onFocus,t,u(),{}))},[y,e.onFocus,u]),ge=n.useCallback(t=>{ze.hasParent(t.relatedTarget,c.current)||(N(!1),r.dispatchEvent(e.onBlur,t,u(),{}))},[y,e.onBlur,u]),pe=n.useCallback(async t=>{ae(await H(Q())),h(!0),r.dispatchEvent(e.onOpen,t,u(),{})},[g,k,e.onOpen,e.value,C,u]),X=n.useCallback(t=>{h(!1),r.dispatchEvent(e.onClose,t,u(),{})},[g,k,e.onClose,u]),ke=()=>{de(),P()},J=()=>{var l,m;const t=e.width||((l=c.current)==null?void 0:l.offsetWidth)||Ee,o=e.height||((m=c.current)==null?void 0:m.offsetHeight)||xe;return{width:t,height:o}},Q=()=>{const{width:t,height:o}=J();return{width:t*E,height:o*E}},be=!D()||L().valid;return n.createElement("div",{ref:c,dir:e.dir,style:{width:e.width,height:e.height,...e.style},className:r.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${r.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-signature-${e.fillMode}`]:e.fillMode,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${r.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,"k-invalid":!be,"k-required":e.required,"k-disabled":e.disabled,"k-focus":y},e.className),onFocus:fe,onBlur:ge},n.createElement("div",{className:"k-signature-canvas",ref:v,tabIndex:r.getTabIndex(e.tabIndex,e.disabled),role:"img",id:e.id,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-disabled":e.disabled?"true":void 0}),n.createElement("div",{className:"k-signature-actions k-signature-actions-top"},n.createElement(R.Button,{type:"button",className:r.classNames("k-signature-action","k-signature-maximize",{"k-hidden":e.disabled||ie}),ref:_,icon:"hyperlink-open",svgIcon:q.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:pe,"aria-label":A,title:A}),n.createElement(R.Button,{type:"button",className:r.classNames("k-signature-action","k-signature-minimize","k-rotate-180",{"k-hidden":e.disabled||le}),ref:B,icon:"hyperlink-open",svgIcon:q.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:X,"aria-label":V,title:V})),!e.hideLine&&n.createElement("div",{className:"k-signature-line",style:{zIndex:2,pointerEvents:"none"}}),n.createElement("div",{className:"k-signature-actions k-signature-actions-bottom"},ce&&n.createElement(R.Button,{type:"button",className:"k-signature-action k-signature-clear",icon:"x",svgIcon:q.xIcon,fillMode:"flat",size:e.size,onClick:ke,"aria-label":U,title:U})),g&&n.createElement(ye.Dialog,{ref:T},n.createElement(b,{...e,...Q(),value:oe,maximized:!0,exportScale:1/E*x,open:!1,onChange:ue,onClose:me})))});b.propTypes={value:a.string,width:a.number,height:a.number,tabIndex:a.number,dir:a.string,ariaDescribedBy:a.string,ariaLabelledBy:a.string,ariaLabel:a.string,readOnly:a.bool,disabled:a.bool,validationMessage:a.string,required:a.bool,onChange:a.func,onFocus:a.func,onBlur:a.func,onOpen:a.func,onClose:a.func,size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large"]),fillMode:a.oneOf([null,"solid","flat","outline"])};b.displayName="KendoSignature";b.defaultProps={strokeWidth:1,smooth:!1,popupScale:Z,exportScale:ee,maximizable:!0,disabled:!1,required:!1,validityStyles:!0,onChange:i=>r.noop,onFocus:i=>r.noop,onBlur:i=>r.noop,onOpen:i=>r.noop,onClose:i=>r.noop,size:"medium",rounded:"medium",fillMode:"solid"};exports.Signature=b;exports.SignaturePropsContext=te;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ce=require("@progress/kendo-inputs-common"),T=require("@progress/kendo-react-buttons"),s=require("@progress/kendo-react-common"),he=require("@progress/kendo-react-dialogs"),Se=require("@progress/kendo-react-intl"),a=require("prop-types"),ze=require("react"),m=require("../messages/index.js"),Oe=require("../package-metadata.js"),Ee=require("./utils/index.js"),B=require("@progress/kendo-svg-icons");function xe(l){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const p in l)if(p!=="default"){const e=Object.getOwnPropertyDescriptor(l,p);Object.defineProperty(b,p,e.get?e:{enumerable:!0,get:()=>l[p]})}}return b.default=l,Object.freeze(b)}const n=xe(ze),Me=250,Ie=84,te=3,ne=2,we="#000000",Pe="#ffffff",ee=l=>l!==void 0,oe=s.createPropsContext(),O=n.forwardRef((l,b)=>{s.validatePackage(Oe.packageMetadata);const p=s.usePropsContext(oe,l),e=n.useMemo(()=>({strokeWidth:i.strokeWidth,smooth:i.smooth,popupScale:i.popupScale,exportScale:i.exportScale,maximizable:i.maximizable,disabled:i.disabled,required:i.required,validityStyles:i.validityStyles,onChange:i.onChange,onFocus:i.onFocus,onBlur:i.onBlur,onOpen:i.onOpen,onClose:i.onClose,size:i.size,rounded:i.rounded,fillMode:i.fillMode,...p}),[p]),E=Se.useLocalization(),u=n.useRef(null),y=n.useRef(null),_=n.useRef(null),N=n.useRef(null),F=n.useRef(null),[r,ae]=n.useState(),[v,j]=n.useState(!1),[x,G]=n.useState(!1),[C,W]=n.useState(),[se,re]=n.useState(),A=ee(e.value)?e.value:C,[ie,le]=n.useState(!1),k=ee(e.open),g=k?e.open:ie,ce=e.maximized||x||!e.maximizable||e.disabled,ue=!(e.maximized&&!x),de=!(!(e.value||C)||x||e.readOnly||e.disabled),V=E.toLanguageString(m.signatureMaximize,m.messages[m.signatureMaximize]),U=E.toLanguageString(m.signatureMinimize,m.messages[m.signatureMinimize]),H=E.toLanguageString(m.signatureClear,m.messages[m.signatureClear]),M=e.popupScale||te,I=e.exportScale||ne,w=t=>{W(t),e.onChange&&e.onChange({value:t})},me=t=>{r==null||r.loadImage(t.value),w(t.value)};n.useEffect(()=>{e.value!==C&&(W(e.value),r==null||r.loadImage(e.value))},[e.value]);const pe=()=>{r==null||r.clear(),w()},h=n.useCallback(t=>{k||le(t)},[k]),fe=t=>{var o,c;Q(t),(c=((o=F.current)==null?void 0:o.element)||y.current)==null||c.focus()},P=n.useCallback(()=>{let t=we;return!e.color&&typeof document!="undefined"&&u.current&&(t=getComputedStyle(u.current).color),e.color||t},[e.color]),L=n.useCallback(()=>{let t=Pe;return!e.backgroundColor&&typeof document!="undefined"&&u.current&&(t=getComputedStyle(u.current).backgroundColor),e.backgroundColor||t},[e.backgroundColor]),$=()=>({scale:e.maximized?e.popupScale:1,color:P(),backgroundColor:L(),strokeWidth:e.strokeWidth,smooth:e.smooth,readonly:e.readOnly}),K=async t=>{const{width:o,height:c}=t;return await(r==null?void 0:r.exportImage({width:o*I,height:c*I}))};n.useEffect(()=>{const t=y.current,o=new Ce.SignaturePad(t,$());return A&&o.loadImage(A),ae(o),()=>o.destroy()},[]),n.useEffect(()=>{r==null||r.setOptions({onChange:async()=>w(await K(Y())),onDraw:()=>G(!0),onDrawEnd:()=>G(!1)})},[r]),s.useIsomorphicLayoutEffect(()=>r==null?void 0:r.setOptions($()),[e.readOnly,e.color,e.backgroundColor,e.strokeWidth,e.smooth]),n.useEffect(()=>{var c,f;const t=(f=(c=_.current)==null?void 0:c.element)==null?void 0:f.querySelector(".k-overlay");if(!t)return;const o=()=>h(!1);return t.addEventListener("click",o),()=>t.removeEventListener("click",o)},[g]),n.useEffect(()=>{if(!g||typeof document=="undefined")return;const t=o=>{o.keyCode===s.Keys.esc&&h(!1)};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[g]),n.useEffect(()=>{var t,o;e.maximized&&((o=(t=N.current)==null?void 0:t.element)==null||o.focus())},[]);const q=n.useCallback(()=>{var t;return(t=y.current)==null?void 0:t.focus()},[]),S=n.useCallback(()=>e.value,[e.value]),X=n.useCallback(()=>e.name,[e.name]),z=n.useCallback(()=>e.required,[e.required]),D=n.useCallback(()=>{const t=e.validationMessage!==void 0,c=!S(),f=e.valid!==void 0?e.valid:!z()||!c;return{customError:t,valid:f,valueMissing:c}},[e.validationMessage,e.valid,S,z]),R=n.useCallback(()=>e.validityStyles,[e.validityStyles]),J=n.useCallback(()=>e,[e]),d=n.useCallback(()=>{const t={element:u.current,focus:q};return Object.defineProperty(t,"name",{get:X}),Object.defineProperty(t,"value",{get:S}),Object.defineProperty(t,"validity",{get:D}),Object.defineProperty(t,"validityStyles",{get:R}),Object.defineProperty(t,"required",{get:z}),Object.defineProperty(t,"props",{get:J}),Object.defineProperty(t,"color",{get:P}),Object.defineProperty(t,"backgroundColor",{get:L}),t},[X,S,D,R,z,q,J,P,L]);n.useImperativeHandle(b,d);const ge=n.useCallback(t=>{v||e.maximized||(j(!0),s.dispatchEvent(e.onFocus,t,d(),{}))},[v,e.onFocus,d]),be=n.useCallback(t=>{Ee.hasParent(t.relatedTarget,u.current)||(j(!1),s.dispatchEvent(e.onBlur,t,d(),{}))},[v,e.onBlur,d]),ke=n.useCallback(async t=>{re(await K(Z())),h(!0),s.dispatchEvent(e.onOpen,t,d(),{})},[g,k,e.onOpen,e.value,C,d]),Q=n.useCallback(t=>{h(!1),s.dispatchEvent(e.onClose,t,d(),{})},[g,k,e.onClose,d]),ye=()=>{pe(),q()},Y=()=>{var c,f;const t=e.width||((c=u.current)==null?void 0:c.offsetWidth)||Me,o=e.height||((f=u.current)==null?void 0:f.offsetHeight)||Ie;return{width:t,height:o}},Z=()=>{const{width:t,height:o}=Y();return{width:t*M,height:o*M}},ve=!R()||D().valid;return n.createElement("div",{ref:u,dir:e.dir,style:{width:e.width,height:e.height,...e.style},className:s.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${s.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-signature-${e.fillMode}`]:e.fillMode,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${s.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,"k-invalid":!ve,"k-required":e.required,"k-disabled":e.disabled,"k-focus":v},e.className),onFocus:ge,onBlur:be},n.createElement("div",{className:"k-signature-canvas",ref:y,tabIndex:s.getTabIndex(e.tabIndex,e.disabled),role:"img",id:e.id,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,"aria-disabled":e.disabled?"true":void 0}),n.createElement("div",{className:"k-signature-actions k-signature-actions-top"},n.createElement(T.Button,{type:"button",className:s.classNames("k-signature-action","k-signature-maximize",{"k-hidden":e.disabled||ce}),ref:F,icon:"hyperlink-open",svgIcon:B.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:ke,"aria-label":V,title:V}),n.createElement(T.Button,{type:"button",className:s.classNames("k-signature-action","k-signature-minimize","k-rotate-180",{"k-hidden":e.disabled||ue}),ref:N,icon:"hyperlink-open",svgIcon:B.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:Q,"aria-label":U,title:U})),!e.hideLine&&n.createElement("div",{className:"k-signature-line",style:{zIndex:2,pointerEvents:"none"}}),n.createElement("div",{className:"k-signature-actions k-signature-actions-bottom"},de&&n.createElement(T.Button,{type:"button",className:"k-signature-action k-signature-clear",icon:"x",svgIcon:B.xIcon,fillMode:"flat",size:e.size,onClick:ye,"aria-label":H,title:H})),g&&n.createElement(he.Dialog,{ref:_},n.createElement(O,{...e,...Z(),value:se,maximized:!0,exportScale:1/M*I,open:!1,onChange:me,onClose:fe})))});O.propTypes={value:a.string,width:a.number,height:a.number,tabIndex:a.number,dir:a.string,ariaDescribedBy:a.string,ariaLabelledBy:a.string,ariaLabel:a.string,readOnly:a.bool,disabled:a.bool,validationMessage:a.string,required:a.bool,onChange:a.func,onFocus:a.func,onBlur:a.func,onOpen:a.func,onClose:a.func,size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large"]),fillMode:a.oneOf([null,"solid","flat","outline"])};const i={strokeWidth:1,smooth:!1,popupScale:te,exportScale:ne,maximizable:!0,disabled:!1,required:!1,validityStyles:!0,onChange:l=>s.noop,onFocus:l=>s.noop,onBlur:l=>s.noop,onOpen:l=>s.noop,onClose:l=>s.noop,size:"medium",rounded:"medium",fillMode:"solid"};O.displayName="KendoSignature";exports.Signature=O;exports.SignaturePropsContext=oe;

package/signature/Signature.mjs

@@ -6,189 +6,207 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { SignaturePad as Ee } from "@progress/kendo-inputs-common";
+import { SignaturePad as Oe } from "@progress/kendo-inputs-common";
 import { Button as D } from "@progress/kendo-react-buttons";
-import { createPropsContext as Se, validatePackage as Oe, usePropsContext as xe, useIsomorphicLayoutEffect as we, dispatchEvent as C, classNames as T, kendoThemeMaps as Y, getTabIndex as Le, noop as f, Keys as Me } from "@progress/kendo-react-common";
-import { Dialog as Ie } from "@progress/kendo-react-dialogs";
-import { useLocalization as Pe } from "@progress/kendo-react-intl";
+import { createPropsContext as xe, validatePackage as Me, usePropsContext as we, useIsomorphicLayoutEffect as Le, dispatchEvent as h, classNames as T, kendoThemeMaps as ee, getTabIndex as Ie, noop as p, Keys as Pe } from "@progress/kendo-react-common";
+import { Dialog as De } from "@progress/kendo-react-dialogs";
+import { useLocalization as Te } from "@progress/kendo-react-intl";
 import a from "prop-types";
 import * as o from "react";
-import { signatureMaximize as Z, messages as R, signatureMinimize as ee, signatureClear as te } from "../messages/index.mjs";
-import { packageMetadata as De } from "../package-metadata.mjs";
-import { hasParent as Te } from "./utils/index.mjs";
-import { hyperlinkOpenIcon as oe, xIcon as Re } from "@progress/kendo-svg-icons";
-const Be = 250, _e = 84, ae = 3, re = 2, Fe = "#000000", Ne = "#ffffff", ne = (c) => c !== void 0, Ge = Se(), h = o.forwardRef((c, ie) => {
-  Oe(De);
-  const e = xe(Ge, c), z = Pe(), s = o.useRef(null), p = o.useRef(null), B = o.useRef(null), _ = o.useRef(null), F = o.useRef(null), [r, se] = o.useState(), [g, N] = o.useState(!1), [E, G] = o.useState(!1), [b, q] = o.useState(), [le, ce] = o.useState(), A = ne(e.value) ? e.value : b, [ue, de] = o.useState(!1), m = ne(e.open), d = m ? e.open : ue, me = e.maximized || E || !e.maximizable || e.disabled, fe = !(e.maximized && !E), pe = !(!(e.value || b) || E || e.readOnly || e.disabled), V = z.toLanguageString(Z, R[Z]), j = z.toLanguageString(ee, R[ee]), U = z.toLanguageString(te, R[te]), S = e.popupScale || ae, O = e.exportScale || re, x = (t) => {
-    q(t), e.onChange && e.onChange({ value: t });
-  }, ge = (t) => {
+import { signatureMaximize as te, messages as B, signatureMinimize as oe, signatureClear as ne } from "../messages/index.mjs";
+import { packageMetadata as Be } from "../package-metadata.mjs";
+import { hasParent as Re } from "./utils/index.mjs";
+import { hyperlinkOpenIcon as ae, xIcon as Fe } from "@progress/kendo-svg-icons";
+const _e = 250, Ne = 84, ie = 3, se = 2, qe = "#000000", Ge = "#ffffff", re = (u) => u !== void 0, We = xe(), R = o.forwardRef((u, le) => {
+  Me(Be);
+  const F = we(We, u), e = o.useMemo(() => ({
+    strokeWidth: i.strokeWidth,
+    smooth: i.smooth,
+    popupScale: i.popupScale,
+    exportScale: i.exportScale,
+    maximizable: i.maximizable,
+    disabled: i.disabled,
+    required: i.required,
+    validityStyles: i.validityStyles,
+    onChange: i.onChange,
+    onFocus: i.onFocus,
+    onBlur: i.onBlur,
+    onOpen: i.onOpen,
+    onClose: i.onClose,
+    size: i.size,
+    rounded: i.rounded,
+    fillMode: i.fillMode,
+    ...F
+  }), [F]), z = Te(), l = o.useRef(null), g = o.useRef(null), _ = o.useRef(null), N = o.useRef(null), q = o.useRef(null), [r, ce] = o.useState(), [b, G] = o.useState(!1), [S, W] = o.useState(!1), [k, A] = o.useState(), [ue, de] = o.useState(), V = re(e.value) ? e.value : k, [me, fe] = o.useState(!1), f = re(e.open), m = f ? e.open : me, pe = e.maximized || S || !e.maximizable || e.disabled, ge = !(e.maximized && !S), be = !(!(e.value || k) || S || e.readOnly || e.disabled), j = z.toLanguageString(te, B[te]), U = z.toLanguageString(oe, B[oe]), H = z.toLanguageString(ne, B[ne]), E = e.popupScale || ie, O = e.exportScale || se, x = (t) => {
+    A(t), e.onChange && e.onChange({ value: t });
+  }, ke = (t) => {
     r == null || r.loadImage(t.value), x(t.value);
   };
   o.useEffect(() => {
-    e.value !== b && (q(e.value), r == null || r.loadImage(e.value));
+    e.value !== k && (A(e.value), r == null || r.loadImage(e.value));
   }, [e.value]);
-  const be = () => {
+  const ye = () => {
     r == null || r.clear(), x();
-  }, k = o.useCallback(
+  }, y = o.useCallback(
     (t) => {
-      m || de(t);
+      f || fe(t);
     },
-    [m]
-  ), ke = (t) => {
-    var n, i;
-    X(t), (i = ((n = F.current) == null ? void 0 : n.element) || p.current) == null || i.focus();
-  }, w = o.useCallback(() => {
-    let t = Fe;
-    return !e.color && typeof document != "undefined" && s.current && (t = getComputedStyle(s.current).color), e.color || t;
-  }, [e.color]), L = o.useCallback(() => {
-    let t = Ne;
-    return !e.backgroundColor && typeof document != "undefined" && s.current && (t = getComputedStyle(s.current).backgroundColor), e.backgroundColor || t;
-  }, [e.backgroundColor]), W = () => ({
+    [f]
+  ), Ce = (t) => {
+    var n, s;
+    Q(t), (s = ((n = q.current) == null ? void 0 : n.element) || g.current) == null || s.focus();
+  }, M = o.useCallback(() => {
+    let t = qe;
+    return !e.color && typeof document != "undefined" && l.current && (t = getComputedStyle(l.current).color), e.color || t;
+  }, [e.color]), w = o.useCallback(() => {
+    let t = Ge;
+    return !e.backgroundColor && typeof document != "undefined" && l.current && (t = getComputedStyle(l.current).backgroundColor), e.backgroundColor || t;
+  }, [e.backgroundColor]), K = () => ({
     scale: e.maximized ? e.popupScale : 1,
-    color: w(),
-    backgroundColor: L(),
+    color: M(),
+    backgroundColor: w(),
     strokeWidth: e.strokeWidth,
     smooth: e.smooth,
     readonly: e.readOnly
-  }), H = async (t) => {
-    const { width: n, height: i } = t;
+  }), $ = async (t) => {
+    const { width: n, height: s } = t;
     return await (r == null ? void 0 : r.exportImage({
       width: n * O,
-      height: i * O
+      height: s * O
     }));
   };
   o.useEffect(() => {
-    const t = p.current, n = new Ee(t, W());
-    return A && n.loadImage(A), se(n), () => n.destroy();
+    const t = g.current, n = new Oe(t, K());
+    return V && n.loadImage(V), ce(n), () => n.destroy();
   }, []), o.useEffect(() => {
     r == null || r.setOptions({
-      onChange: async () => x(await H(J())),
-      onDraw: () => G(!0),
-      onDrawEnd: () => G(!1)
+      onChange: async () => x(await $(Y())),
+      onDraw: () => W(!0),
+      onDrawEnd: () => W(!1)
     });
-  }, [r]), we(
-    () => r == null ? void 0 : r.setOptions(W()),
+  }, [r]), Le(
+    () => r == null ? void 0 : r.setOptions(K()),
     [e.readOnly, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
   ), o.useEffect(() => {
-    var i, u;
-    const t = (u = (i = B.current) == null ? void 0 : i.element) == null ? void 0 : u.querySelector(".k-overlay");
+    var s, d;
+    const t = (d = (s = _.current) == null ? void 0 : s.element) == null ? void 0 : d.querySelector(".k-overlay");
     if (!t)
       return;
-    const n = () => k(!1);
+    const n = () => y(!1);
     return t.addEventListener("click", n), () => t.removeEventListener("click", n);
-  }, [d]), o.useEffect(() => {
-    if (!d || typeof document == "undefined")
+  }, [m]), o.useEffect(() => {
+    if (!m || typeof document == "undefined")
       return;
     const t = (n) => {
-      n.keyCode === Me.esc && k(!1);
+      n.keyCode === Pe.esc && y(!1);
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [d]), o.useEffect(() => {
+  }, [m]), o.useEffect(() => {
     var t, n;
-    e.maximized && ((n = (t = _.current) == null ? void 0 : t.element) == null || n.focus());
+    e.maximized && ((n = (t = N.current) == null ? void 0 : t.element) == null || n.focus());
   }, []);
-  const M = o.useCallback(
+  const L = o.useCallback(
     () => {
       var t;
-      return (t = p.current) == null ? void 0 : t.focus();
+      return (t = g.current) == null ? void 0 : t.focus();
     },
     []
-  ), v = o.useCallback(
+  ), C = o.useCallback(
     () => e.value,
     [e.value]
-  ), K = o.useCallback(
+  ), X = o.useCallback(
     () => e.name,
     [e.name]
-  ), y = o.useCallback(
+  ), v = o.useCallback(
     () => e.required,
     [e.required]
   ), I = o.useCallback(
     () => {
-      const t = e.validationMessage !== void 0, i = !v(), u = e.valid !== void 0 ? e.valid : !y() || !i;
+      const t = e.validationMessage !== void 0, s = !C(), d = e.valid !== void 0 ? e.valid : !v() || !s;
       return {
         customError: t,
-        valid: u,
-        valueMissing: i
+        valid: d,
+        valueMissing: s
       };
     },
-    [e.validationMessage, e.valid, v, y]
+    [e.validationMessage, e.valid, C, v]
   ), P = o.useCallback(
     () => e.validityStyles,
     [e.validityStyles]
-  ), $ = o.useCallback(
+  ), J = o.useCallback(
     () => e,
     [e]
-  ), l = o.useCallback(
+  ), c = o.useCallback(
     () => {
       const t = {
-        element: s.current,
-        focus: M
+        element: l.current,
+        focus: L
       };
-      return Object.defineProperty(t, "name", { get: K }), Object.defineProperty(t, "value", { get: v }), Object.defineProperty(t, "validity", { get: I }), Object.defineProperty(t, "validityStyles", { get: P }), Object.defineProperty(t, "required", { get: y }), Object.defineProperty(t, "props", { get: $ }), Object.defineProperty(t, "color", { get: w }), Object.defineProperty(t, "backgroundColor", { get: L }), t;
+      return Object.defineProperty(t, "name", { get: X }), Object.defineProperty(t, "value", { get: C }), Object.defineProperty(t, "validity", { get: I }), Object.defineProperty(t, "validityStyles", { get: P }), Object.defineProperty(t, "required", { get: v }), Object.defineProperty(t, "props", { get: J }), Object.defineProperty(t, "color", { get: M }), Object.defineProperty(t, "backgroundColor", { get: w }), t;
     },
-    [K, v, I, P, y, M, $, w, L]
+    [X, C, I, P, v, L, J, M, w]
   );
-  o.useImperativeHandle(ie, l);
+  o.useImperativeHandle(le, c);
   const ve = o.useCallback(
     (t) => {
-      g || e.maximized || (N(!0), C(
+      b || e.maximized || (G(!0), h(
         e.onFocus,
         t,
-        l(),
+        c(),
         {}
       ));
     },
-    [g, e.onFocus, l]
-  ), ye = o.useCallback(
+    [b, e.onFocus, c]
+  ), he = o.useCallback(
     (t) => {
-      Te(t.relatedTarget, s.current) || (N(!1), C(
+      Re(t.relatedTarget, l.current) || (G(!1), h(
         e.onBlur,
         t,
-        l(),
+        c(),
         {}
       ));
     },
-    [g, e.onBlur, l]
-  ), Ce = o.useCallback(
+    [b, e.onBlur, c]
+  ), ze = o.useCallback(
     async (t) => {
-      ce(await H(Q())), k(!0), C(
+      de(await $(Z())), y(!0), h(
         e.onOpen,
         t,
-        l(),
+        c(),
         {}
       );
     },
-    [d, m, e.onOpen, e.value, b, l]
-  ), X = o.useCallback(
+    [m, f, e.onOpen, e.value, k, c]
+  ), Q = o.useCallback(
     (t) => {
-      k(!1), C(
+      y(!1), h(
         e.onClose,
         t,
-        l(),
+        c(),
         {}
       );
     },
-    [d, m, e.onClose, l]
-  ), he = () => {
-    be(), M();
-  }, J = () => {
-    var i, u;
-    const t = e.width || ((i = s.current) == null ? void 0 : i.offsetWidth) || Be, n = e.height || ((u = s.current) == null ? void 0 : u.offsetHeight) || _e;
+    [m, f, e.onClose, c]
+  ), Se = () => {
+    ye(), L();
+  }, Y = () => {
+    var s, d;
+    const t = e.width || ((s = l.current) == null ? void 0 : s.offsetWidth) || _e, n = e.height || ((d = l.current) == null ? void 0 : d.offsetHeight) || Ne;
     return {
       width: t,
       height: n
     };
-  }, Q = () => {
-    const { width: t, height: n } = J();
+  }, Z = () => {
+    const { width: t, height: n } = Y();
     return {
-      width: t * S,
-      height: n * S
+      width: t * E,
+      height: n * E
     };
-  }, ze = !P() || I().valid;
+  }, Ee = !P() || I().valid;
   return /* @__PURE__ */ o.createElement(
     "div",
     {
-      ref: s,
+      ref: l,
       dir: e.dir,
       style: { width: e.width, height: e.height, ...e.style },
       className: T(
@@ -196,26 +214,26 @@ const Be = 250, _e = 84, ae = 3, re = 2, Fe = "#000000", Ne = "#ffffff", ne = (c
         "k-signature",
         {
           "k-signature-maximized": e.maximized,
-          [`k-signature-${Y.sizeMap[e.size] || e.size}`]: e.size,
+          [`k-signature-${ee.sizeMap[e.size] || e.size}`]: e.size,
           [`k-signature-${e.fillMode}`]: e.fillMode,
           [`k-input-${e.fillMode}`]: e.fillMode,
-          [`k-rounded-${Y.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
-          "k-invalid": !ze,
+          [`k-rounded-${ee.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
+          "k-invalid": !Ee,
           "k-required": e.required,
           "k-disabled": e.disabled,
-          "k-focus": g
+          "k-focus": b
         },
         e.className
       ),
       onFocus: ve,
-      onBlur: ye
+      onBlur: he
     },
     /* @__PURE__ */ o.createElement(
       "div",
       {
         className: "k-signature-canvas",
-        ref: p,
-        tabIndex: Le(e.tabIndex, e.disabled),
+        ref: g,
+        tabIndex: Ie(e.tabIndex, e.disabled),
         role: "img",
         id: e.id,
         "aria-label": e.ariaLabel,
@@ -228,29 +246,29 @@ const Be = 250, _e = 84, ae = 3, re = 2, Fe = "#000000", Ne = "#ffffff", ne = (c
       D,
       {
         type: "button",
-        className: T("k-signature-action", "k-signature-maximize", { "k-hidden": e.disabled || me }),
-        ref: F,
+        className: T("k-signature-action", "k-signature-maximize", { "k-hidden": e.disabled || pe }),
+        ref: q,
         icon: "hyperlink-open",
-        svgIcon: oe,
+        svgIcon: ae,
         fillMode: "flat",
         size: e.size,
-        onClick: Ce,
-        "aria-label": V,
-        title: V
+        onClick: ze,
+        "aria-label": j,
+        title: j
       }
     ), /* @__PURE__ */ o.createElement(
       D,
       {
         type: "button",
-        className: T("k-signature-action", "k-signature-minimize", "k-rotate-180", { "k-hidden": e.disabled || fe }),
-        ref: _,
+        className: T("k-signature-action", "k-signature-minimize", "k-rotate-180", { "k-hidden": e.disabled || ge }),
+        ref: N,
         icon: "hyperlink-open",
-        svgIcon: oe,
+        svgIcon: ae,
         fillMode: "flat",
         size: e.size,
-        onClick: X,
-        "aria-label": j,
-        title: j
+        onClick: Q,
+        "aria-label": U,
+        title: U
       }
     )),
     !e.hideLine && /* @__PURE__ */ o.createElement(
@@ -260,36 +278,36 @@ const Be = 250, _e = 84, ae = 3, re = 2, Fe = "#000000", Ne = "#ffffff", ne = (c
         style: { zIndex: 2, pointerEvents: "none" }
       }
     ),
-    /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, pe && /* @__PURE__ */ o.createElement(
+    /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, be && /* @__PURE__ */ o.createElement(
       D,
       {
         type: "button",
         className: "k-signature-action k-signature-clear",
         icon: "x",
-        svgIcon: Re,
+        svgIcon: Fe,
         fillMode: "flat",
         size: e.size,
-        onClick: he,
-        "aria-label": U,
-        title: U
+        onClick: Se,
+        "aria-label": H,
+        title: H
       }
     )),
-    d && /* @__PURE__ */ o.createElement(Ie, { ref: B }, /* @__PURE__ */ o.createElement(
-      h,
+    m && /* @__PURE__ */ o.createElement(De, { ref: _ }, /* @__PURE__ */ o.createElement(
+      R,
       {
         ...e,
-        ...Q(),
-        value: le,
+        ...Z(),
+        value: ue,
         maximized: !0,
-        exportScale: 1 / S * O,
+        exportScale: 1 / E * O,
         open: !1,
-        onChange: ge,
-        onClose: ke
+        onChange: ke,
+        onClose: Ce
       }
     ))
   );
 });
-h.propTypes = {
+R.propTypes = {
   value: a.string,
   width: a.number,
   height: a.number,
@@ -311,26 +329,26 @@ h.propTypes = {
   rounded: a.oneOf([null, "small", "medium", "large"]),
   fillMode: a.oneOf([null, "solid", "flat", "outline"])
 };
-h.displayName = "KendoSignature";
-h.defaultProps = {
+const i = {
   strokeWidth: 1,
   smooth: !1,
-  popupScale: ae,
-  exportScale: re,
+  popupScale: ie,
+  exportScale: se,
   maximizable: !0,
   disabled: !1,
   required: !1,
   validityStyles: !0,
-  onChange: (c) => f,
-  onFocus: (c) => f,
-  onBlur: (c) => f,
-  onOpen: (c) => f,
-  onClose: (c) => f,
+  onChange: (u) => p,
+  onFocus: (u) => p,
+  onBlur: (u) => p,
+  onOpen: (u) => p,
+  onClose: (u) => p,
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
 };
+R.displayName = "KendoSignature";
 export {
-  h as Signature,
-  Ge as SignaturePropsContext
+  R as Signature,
+  We as SignaturePropsContext
 };

package/textarea/TextArea.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ne=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function oe(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(u,o,l.get?l:{enumerable:!0,get:()=>s[o]})}}return u.default=s,Object.freeze(u)}const t=oe(ne),A=a.createPropsContext(),m=t.forwardRef((s,u)=>{const o=a.usePropsContext(A,s),{size:l,rounded:p,fillMode:O,prefix:B=void 0,suffix:N=void 0,ariaDescribedBy:w,ariaLabelledBy:j,autoSize:P,className:R,defaultValue:q,disabled:n,readOnly:D,required:b,rows:H,id:F,name:$,placeholder:L,style:_,tabIndex:K,value:g,valid:T,validationMessage:z,validityStyles:S,onChange:v,onFocus:x,onBlur:y,visited:le,touched:ie,modified:ue,resizable:h,...G}=o,r=t.useRef(null),E=t.useCallback(()=>{r.current&&r.current.focus()},[]),[M,I]=t.useState(q),[J,Q]=a.useCustomComponent(B),[U,W]=a.useCustomComponent(N),d=g!==void 0,c=d?g:M,f=t.useCallback(()=>({element:r,focus:E,get value(){return c},get name(){return r.current&&r.current.name}}),[E,c]);t.useImperativeHandle(u,f);const[X,V]=t.useState("auto"),Y=a.useId(),Z=a.useDir(r,o.dir),C=T!==void 0?T:b?!!c:!0;t.useEffect(()=>{r.current&&r.current.setCustomValidity&&r.current.setCustomValidity(C?"":z||"")},[C,z]),a.useIsomorphicLayoutEffect(()=>{r.current&&V(`${r.current.scrollHeight}px`)},[c]);const ee=t.useCallback(i=>{const k=i.target.value;V("auto"),!d&&!n&&I(k),v&&!n&&a.dispatchEvent(v,i,{...f(),value:k},{value:k})},[I,v,n,d]),te=t.useCallback(i=>{x&&!n&&a.dispatchEvent(x,i,f(),void 0)},[x,n]),ae=t.useCallback(i=>{y&&!n&&a.dispatchEvent(y,i,f(),void 0)},[y,n]),re={id:F||Y,role:"textbox",name:$,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!P&&h!=="none"}),ref:r,disabled:n,rows:H,placeholder:L,readOnly:D,required:b,tabIndex:a.getTabIndex(K,n),style:P?{resize:"none",overflow:"hidden",height:X}:h?{resize:h}:{},"aria-labelledby":j,"aria-describedby":w,"aria-multiline":!0,"aria-disabled":n||void 0,value:d?g:M,...G,onChange:ee,onFocus:te,onBlur:ae};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-input-${O}`]:O,[`k-rounded-${a.kendoThemeMaps.roundedMap[p]||p}`]:p,"k-invalid":!(C||S!==void 0||S===!0),"k-required":b,"k-disabled":n},R),style:_,dir:Z},o.prefix&&t.createElement(J,{...Q}),t.createElement("textarea",{...re}),o.suffix&&t.createElement(U,{...W}))});m.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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"])};const se={size:"medium",rounded:"medium",fillMode:"solid"};m.displayName="KendoTextArea";m.defaultProps=se;exports.TextArea=m;exports.TextAreaPropsContext=A;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const oe=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function se(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(u,o,l.get?l:{enumerable:!0,get:()=>s[o]})}}return u.default=s,Object.freeze(u)}const t=se(oe),B=a.createPropsContext(),z=t.forwardRef((s,u)=>{const o=a.usePropsContext(B,s),{size:l=k.size,rounded:m=k.rounded,fillMode:O=k.fillMode,prefix:N=null,suffix:w=null,ariaDescribedBy:j,ariaLabelledBy:R,autoSize:T,className:q,defaultValue:D,disabled:r,readOnly:H,required:p,rows:F,id:$,name:L,placeholder:_,style:K,tabIndex:G,value:b,valid:P,validationMessage:M,validityStyles:S,onChange:g,onFocus:x,onBlur:v,visited:le,touched:ie,modified:ue,resizable:y,...J}=o,n=t.useRef(null),E=t.useCallback(()=>{n.current&&n.current.focus()},[]),[I,V]=t.useState(D),[Q,U]=a.useCustomComponent(N),[W,X]=a.useCustomComponent(w),d=b!==void 0,c=d?b:I,f=t.useCallback(()=>({element:n,focus:E,get value(){return c},get name(){return n.current&&n.current.name}}),[E,c]);t.useImperativeHandle(u,f);const[Y,A]=t.useState("auto"),Z=a.useId(),ee=a.useDir(n,o.dir),h=P!==void 0?P:p?!!c:!0;t.useEffect(()=>{n.current&&n.current.setCustomValidity&&n.current.setCustomValidity(h?"":M||"")},[h,M]),a.useIsomorphicLayoutEffect(()=>{n.current&&A(`${n.current.scrollHeight}px`)},[c]);const te=t.useCallback(i=>{const C=i.target.value;A("auto"),!d&&!r&&V(C),g&&!r&&a.dispatchEvent(g,i,{...f(),value:C},{value:C})},[V,g,r,d]),ae=t.useCallback(i=>{x&&!r&&a.dispatchEvent(x,i,f(),void 0)},[x,r]),ne=t.useCallback(i=>{v&&!r&&a.dispatchEvent(v,i,f(),void 0)},[v,r]),re={id:$||Z,role:"textbox",name:L,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!T&&y!=="none"}),ref:n,disabled:r,rows:F,placeholder:_,readOnly:H,required:p,tabIndex:a.getTabIndex(G,r),style:T?{resize:"none",overflow:"hidden",height:Y}:y?{resize:y}:{},"aria-labelledby":R,"aria-describedby":j,"aria-multiline":!0,"aria-disabled":r||void 0,value:d?b:I,...J,onChange:te,onFocus:ae,onBlur:ne};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-input-${O}`]:O,[`k-rounded-${a.kendoThemeMaps.roundedMap[m]||m}`]:m,"k-invalid":!(h||S!==void 0||S===!0),"k-required":p,"k-disabled":r},q),style:K,dir:ee},o.prefix&&t.createElement(Q,{...U}),t.createElement("textarea",{...re}),o.suffix&&t.createElement(W,{...X}))});z.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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"])};const k={size:"medium",rounded:"medium",fillMode:"solid"};z.displayName="KendoTextArea";exports.TextArea=z;exports.TextAreaPropsContext=B;