@progress/kendo-react-inputs 7.4.0 → 7.5.0-develop.1

package/range-slider/RangeSlider.mjs

@@ -14,21 +14,21 @@ import { useLocalization as Q } from "@progress/kendo-react-intl";
 import { RANGE_ACTION as n, rangeReducer as U } from "./range-raducer.mjs";
 import { packageMetadata as Z } from "../package-metadata.mjs";
 const ee = (r, l, e) => {
-  const [s, i] = a.useState(r), d = a.useCallback(
-    (u) => {
-      const x = U(l.state || s, { ...u, ...l });
-      e && e(x, u.event), i(x);
+  const [s, i] = a.useState(r), u = a.useCallback(
+    (m) => {
+      const x = U(l.state || s, { ...m, ...l });
+      e && e(x, m.event), i(x);
     },
     [l, e]
   );
-  return [s, d];
+  return [s, u];
 }, te = W(), T = a.forwardRef((r, l) => {
   Y(Z);
-  const e = _(te, r), s = a.useRef(null), i = a.useRef(null), d = a.useRef(null), u = a.useRef(null), x = a.useRef(null), V = a.useCallback(
+  const e = _(te, r), s = a.useRef(null), i = a.useRef(null), u = a.useRef(null), m = a.useRef(null), x = a.useRef(null), V = a.useCallback(
     () => {
-      u.current && u.current.focus();
+      m.current && m.current.focus();
     },
-    [u]
+    [m]
   );
   a.useImperativeHandle(s, () => ({
     element: i.current,
@@ -44,13 +44,13 @@ const ee = (r, l, e) => {
   ), K = a.useMemo(
     () => e.step !== void 0 ? e.step : $.step,
     [e.step, $.step]
-  ), p = j(i, e.dir), A = (t, m) => {
+  ), p = j(i, e.dir), A = (t, o) => {
     e.onChange && s.current && e.onChange.call(void 0, {
       value: t,
       target: s.current,
-      syntheticEvent: m
+      syntheticEvent: o
     });
-  }, [E, S] = a.useState(""), [b, c] = ee(
+  }, [E, S] = a.useState(""), [g, c] = ee(
     e.defaultValue || $.defaultValue,
     {
       min: f,
@@ -59,26 +59,26 @@ const ee = (r, l, e) => {
       state: e.value
     },
     A
-  ), o = a.useMemo(
-    () => e.value || b,
-    [e.value, b]
+  ), d = a.useMemo(
+    () => e.value || g,
+    [e.value, g]
   ), H = a.useRef(null), w = a.useRef(null), y = a.useMemo(
-    () => (o.start - f) / (k - f) * 100,
-    [o.start, f, k]
-  ), g = a.useMemo(
-    () => (o.end - f) / (k - f) * 100,
-    [o.end, f, k]
+    () => (d.start - f) / (k - f) * 100,
+    [d.start, f, k]
+  ), b = a.useMemo(
+    () => (d.end - f) / (k - f) * 100,
+    [d.end, f, k]
   ), L = a.useMemo(
     () => e.vertical ? { paddingTop: 0, height: "100%" } : {},
     [e.vertical]
   ), N = a.useMemo(
     () => e.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" },
     [e.vertical]
-  ), M = Q(), I = a.useCallback(
+  ), M = Q(), C = a.useCallback(
     (t) => {
       if (!w.current)
         return;
-      const m = w.current.getBoundingClientRect(), h = e.vertical ? m.bottom - t.clientY : p === "rtl" ? m.right - t.clientX : t.clientX - m.left, C = e.vertical ? m.height : m.width, X = h / C;
+      const o = w.current.getBoundingClientRect(), h = e.vertical ? o.bottom - t.clientY : p === "rtl" ? o.right - t.clientX : t.clientX - o.left, I = e.vertical ? o.height : o.width, X = h / I;
       return f + X * (k - f);
     },
     [
@@ -87,16 +87,16 @@ const ee = (r, l, e) => {
       p,
       f,
       k,
-      b.start,
-      b.end,
+      g.start,
+      g.end,
       e.value && e.value.start,
       e.value && e.value.end
     ]
   ), q = a.useCallback(
-    (t) => t <= o.start ? "start" : t >= o.end ? "end" : 2 * t < o.end + o.start ? "start" : "end",
+    (t) => t <= d.start ? "start" : t >= d.end ? "end" : 2 * t < d.end + d.start ? "start" : "end",
     [
-      b.start,
-      b.end,
+      g.start,
+      g.end,
       e.value && e.value.start,
       e.value && e.value.end
     ]
@@ -150,19 +150,19 @@ const ee = (r, l, e) => {
     [c, p]
   ), O = a.useCallback(
     (t) => {
-      const m = I(t), h = q(m);
-      S(h), h === "end" ? x.current.focus() : u.current.focus();
-      const C = h === "end" ? n.end : n.start;
-      c({ type: C, payload: m, event: t });
+      const o = C(t), h = q(o);
+      S(h), h === "end" ? x.current.focus() : m.current.focus();
+      const I = h === "end" ? n.end : n.start;
+      c({ type: I, payload: o, event: t });
     },
     [e.vertical, f, k, c]
   );
   return F(w, { onPress: O, onDrag: (t) => {
-    const m = I(t), h = E === "end" ? n.end : n.start;
-    c({ type: h, payload: m, event: t });
+    const o = C(t), h = E === "end" ? n.end : n.start;
+    c({ type: h, payload: o, event: t });
   }, onRelease: (t) => {
-    const m = I(t), h = E === "end" ? n.end : n.start;
-    c({ type: h, payload: m, event: t }), S("");
+    const o = C(t), h = E === "end" ? n.end : n.start;
+    c({ type: h, payload: o, event: t }), S("");
   } }), /* @__PURE__ */ a.createElement(
     "div",
     {
@@ -199,11 +199,13 @@ const ee = (r, l, e) => {
           className: "k-reset k-slider-items",
           style: { ...L }
         },
-        a.Children.map(e.children, (t) => t && a.cloneElement(
+        a.Children.map(e.children, (t, o) => t && a.cloneElement(
           t,
           {
             position: 100 * (t.props.position - e.min) / (e.max - e.min),
-            vertical: e.vertical
+            vertical: e.vertical,
+            firstTick: o === 0,
+            lastTick: o === a.Children.count(e.children) - 1
           },
           t.props.children
         ))
@@ -215,31 +217,31 @@ const ee = (r, l, e) => {
           className: "k-slider-track",
           style: e.vertical ? { bottom: 0, height: "100%" } : { [p === "rtl" ? "right" : "left"]: 0, width: "100%" }
         },
-        y !== null && g !== null && /* @__PURE__ */ a.createElement(
+        y !== null && b !== null && /* @__PURE__ */ a.createElement(
           "div",
           {
             "data-selection": !0,
-            ref: d,
-            title: `${o.start} - ${o.end}`,
+            ref: u,
+            title: `${d.start} - ${d.end}`,
             className: "k-slider-selection",
-            style: e.vertical ? { height: g - y + "%", bottom: y + "%" } : {
+            style: e.vertical ? { height: b - y + "%", bottom: y + "%" } : {
               [p === "rtl" ? "right" : "left"]: y + "%",
-              width: g - y + "%"
+              width: b - y + "%"
             }
           }
         ),
         /* @__PURE__ */ a.createElement(
           "span",
           {
-            ref: u,
+            ref: m,
             role: "slider",
             tabIndex: z(e.startTabIndex, e.disabled, void 0),
             "aria-valuemin": f,
-            "aria-valuemax": Math.max(k, o.end),
-            "aria-valuenow": o.start,
+            "aria-valuemax": Math.max(k, d.end),
+            "aria-valuenow": d.start,
             "aria-disabled": e.disabled ? "true" : void 0,
-            "aria-valuetext": `${o.start} - ${o.end}`,
-            className: "k-draghandle",
+            "aria-valuetext": `${d.start} - ${d.end}`,
+            className: "k-draghandle k-draghandle-start",
             title: M.toLanguageString(R, P[R]),
             style: e.vertical ? { bottom: "calc(" + y + "%)", zIndex: 1 } : p === "rtl" ? { right: "calc(" + y + "% - 13px)", zIndex: 1 } : { left: "calc(" + y + "%)", zIndex: 1 },
             onKeyDown: B
@@ -251,14 +253,14 @@ const ee = (r, l, e) => {
             ref: x,
             role: "slider",
             tabIndex: z(e.endTabIndex, e.disabled, void 0),
-            "aria-valuemin": Math.min(f, o.start),
+            "aria-valuemin": Math.min(f, d.start),
             "aria-valuemax": k,
-            "aria-valuenow": o.end,
+            "aria-valuenow": d.end,
             "aria-disabled": e.disabled ? "true" : void 0,
-            "aria-valuetext": `${o.start} - ${o.end}`,
-            className: "k-draghandle",
+            "aria-valuetext": `${d.start} - ${d.end}`,
+            className: "k-draghandle k-draghandle-end",
             title: M.toLanguageString(R, P[R]),
-            style: e.vertical ? { bottom: "calc(" + g + "%)", zIndex: 1 } : p === "rtl" ? { right: "calc(" + g + "% - 13px)", zIndex: 1 } : { left: "calc(" + g + "%)", zIndex: 1 },
+            style: e.vertical ? { bottom: "calc(" + b + "%)", zIndex: 1 } : p === "rtl" ? { right: "calc(" + b + "% - 13px)", zIndex: 1 } : { left: "calc(" + b + "%)", zIndex: 1 },
             onKeyDown: G
           }
         )
@@ -268,8 +270,8 @@ const ee = (r, l, e) => {
 }), ae = {
   value: (r, l, e) => {
     if (r.value) {
-      const s = r.value.start, i = r.value.end, d = r.min, u = r.max;
-      if (s > i || s > u || s < d || i > u || i < d || i < s)
+      const s = r.value.start, i = r.value.end, u = r.min, m = r.max;
+      if (s > i || s > m || s < u || i > m || i < u || i < s)
         return new Error(
           `Invalid prop + ${l} supplied to ${e}.
                     The { start, end } value must be between the min & max value and { start, end } must be start < end.
@@ -280,8 +282,8 @@ const ee = (r, l, e) => {
   },
   defaultValue: (r, l, e) => {
     if (r.defaultValue) {
-      const s = r.defaultValue.start, i = r.defaultValue.end, d = r.min, u = r.max;
-      if (s > i || s > u || s < d || i > u || i < d || i < s)
+      const s = r.defaultValue.start, i = r.defaultValue.end, u = r.min, m = r.max;
+      if (s > i || s > m || s < u || i > m || i < u || i < s)
         return new Error(
           `Invalid prop + ${l} supplied to ${e}.
                     The { start, end } value must be between the min & max value and { start, end } must be start < end.
@@ -293,24 +295,24 @@ const ee = (r, l, e) => {
   onChange: D.func,
   step: D.number,
   min: (r, l, e) => {
-    const s = r[l], i = r.min, d = r.max;
+    const s = r[l], i = r.min, u = r.max;
     return i === void 0 ? new Error(
       `Invalid prop + ${l} supplied to ${e}.
                 ${l} value can not be undefined.
                 `
-    ) : s && i >= d ? new Error(
+    ) : s && i >= u ? new Error(
       `Invalid prop + ${l} supplied to ${e}.
                 ${l} value can not be equal to or bigger than the max value.
                 `
     ) : null;
   },
   max: (r, l, e) => {
-    const s = r[l], i = r.min, d = r.max;
-    return d === void 0 ? new Error(
+    const s = r[l], i = r.min, u = r.max;
+    return u === void 0 ? new Error(
       `Invalid prop + ${l} supplied to ${e}.
                 ${l} value can not be undefined.
                 `
-    ) : s && d <= i ? new Error(
+    ) : s && u <= i ? new Error(
       `Invalid prop + ${l} supplied to ${e}.
                 ${l} value can not be equal to or smaller than the min value.
                 `

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"),s=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 f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const e in i)if(e!=="default"){const p=Object.getOwnPropertyDescriptor(i,e);Object.defineProperty(f,e,p.get?p:{enumerable:!0,get:()=>i[e]})}}return f.default=i,Object.freeze(f)}const n=Oe(he),Ee=250,xe=84,Z=3,ee=2,Me="#000000",Ie="#ffffff",Y=i=>i!==void 0,te=s.createPropsContext(),b=n.forwardRef((i,f)=>{s.validatePackage(Se.packageMetadata);const e=s.usePropsContext(te,i),p=Ce.useLocalization(),c=n.useRef(null),v=n.useRef(null),T=n.useRef(null),B=n.useRef(null),_=n.useRef(null),[r,ne]=n.useState(),[y,j]=n.useState(!1),[O,N]=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=p.toLanguageString(d.signatureMaximize,d.messages[d.signatureMaximize]),V=p.toLanguageString(d.signatureMinimize,d.messages[d.signatureMinimize]),U=p.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=>{r==null||r.loadImage(t.value),M(t.value)};n.useEffect(()=>{e.value!==C&&(F(e.value),r==null||r.loadImage(e.value))},[e.value]);const de=()=>{r==null||r.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(r==null?void 0:r.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(()=>{r==null||r.setOptions({onChange:async()=>M(await H(J())),onDraw:()=>N(!0),onDrawEnd:()=>N(!1)})},[r]),s.useIsomorphicLayoutEffect(()=>r==null?void 0:r.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===s.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]),K=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]),$=n.useCallback(()=>e,[e]),u=n.useCallback(()=>{const t={element:c.current,focus:P};return Object.defineProperty(t,"name",{get:K}),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:$}),Object.defineProperty(t,"color",{get:I}),Object.defineProperty(t,"backgroundColor",{get:w}),t},[K,S,L,D,z,P,$,I,w]);n.useImperativeHandle(f,u);const pe=n.useCallback(t=>{y||e.maximized||(j(!0),s.dispatchEvent(e.onFocus,t,u(),{}))},[y,e.onFocus,u]),ge=n.useCallback(t=>{ze.hasParent(t.relatedTarget,c.current)||(j(!1),s.dispatchEvent(e.onBlur,t,u(),{}))},[y,e.onBlur,u]),fe=n.useCallback(async t=>{ae(await H(Q())),h(!0),s.dispatchEvent(e.onOpen,t,u(),{})},[g,k,e.onOpen,e.value,C,u]),X=n.useCallback(t=>{h(!1),s.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:s.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${s.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${s.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:pe,onBlur:ge},n.createElement("div",{className:"k-signature-canvas",ref:v,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"},ie&&n.createElement(R.Button,{type:"button",className:"k-signature-action k-signature-maximize",ref:_,icon:"hyperlink-open",svgIcon:q.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:fe,"aria-label":A,title:A}),le&&n.createElement(R.Button,{type:"button",className:"k-signature-action k-signature-minimize k-rotate-180",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=>s.noop,onFocus:i=>s.noop,onBlur:i=>s.noop,onOpen:i=>s.noop,onClose:i=>s.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 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;