@progress/kendo-react-inputs 11.4.0-develop.6 → 11.4.0-develop.7

package/signature/Signature.mjs

@@ -5,67 +5,67 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { SignaturePad as xe } from "@progress/kendo-inputs-common";
+import { SignaturePad as Le } from "@progress/kendo-inputs-common";
 import { Button as T } from "@progress/kendo-react-buttons";
-import { createPropsContext as Me, validatePackage as we, usePropsContext as Le, useIsomorphicLayoutEffect as Ie, dispatchEvent as h, classNames as B, kendoThemeMaps as ee, getTabIndex as Pe, WatermarkOverlay as De, noop as f } from "@progress/kendo-react-common";
-import { Dialog as Te } from "@progress/kendo-react-dialogs";
-import { useLocalization as Be } from "@progress/kendo-react-intl";
+import { createPropsContext as we, validatePackage as Ie, getLicenseMessage as Pe, usePropsContext as De, useIsomorphicLayoutEffect as Te, dispatchEvent as h, classNames as B, kendoThemeMaps as ee, getTabIndex as Be, WatermarkOverlay as Re, noop as f } from "@progress/kendo-react-common";
+import { Dialog as Fe } from "@progress/kendo-react-dialogs";
+import { useLocalization as _e } from "@progress/kendo-react-intl";
 import a from "prop-types";
 import * as o from "react";
 import { signatureMaximize as te, messages as R, signatureMinimize as oe, signatureClear as ne } from "../messages/index.mjs";
-import { packageMetadata as Re } from "../package-metadata.mjs";
-import { hasParent as Fe } from "./utils/index.mjs";
-import { hyperlinkOpenIcon as ae, xIcon as _e } from "@progress/kendo-svg-icons";
-const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d) => d !== void 0, Ae = Me(), F = o.forwardRef((d, se) => {
-  const ce = !we(Re, { component: "Signature" }), _ = Le(Ae, d), e = o.useMemo(
+import { packageMetadata as ae } from "../package-metadata.mjs";
+import { hasParent as Ne } from "./utils/index.mjs";
+import { hyperlinkOpenIcon as re, xIcon as We } from "@progress/kendo-svg-icons";
+const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d) => d !== void 0, je = we(), F = o.forwardRef((d, ce) => {
+  const ue = !Ie(ae, { component: "Signature" }), de = Pe(ae), _ = De(je, d), e = o.useMemo(
     () => ({
-      strokeWidth: l.strokeWidth,
-      smooth: l.smooth,
-      popupScale: l.popupScale,
-      exportScale: l.exportScale,
-      maximizable: l.maximizable,
-      disabled: l.disabled,
-      required: l.required,
-      validityStyles: l.validityStyles,
-      onChange: l.onChange,
-      onFocus: l.onFocus,
-      onBlur: l.onBlur,
-      onOpen: l.onOpen,
-      onClose: l.onClose,
-      size: l.size,
-      rounded: l.rounded,
-      fillMode: l.fillMode,
+      strokeWidth: s.strokeWidth,
+      smooth: s.smooth,
+      popupScale: s.popupScale,
+      exportScale: s.exportScale,
+      maximizable: s.maximizable,
+      disabled: s.disabled,
+      required: s.required,
+      validityStyles: s.validityStyles,
+      onChange: s.onChange,
+      onFocus: s.onFocus,
+      onBlur: s.onBlur,
+      onOpen: s.onOpen,
+      onClose: s.onClose,
+      size: s.size,
+      rounded: s.rounded,
+      fillMode: s.fillMode,
       ..._
     }),
     [_]
-  ), z = Be(), c = o.useRef(null), g = o.useRef(null), N = o.useRef(null), W = o.useRef(null), S = o.useRef(null), [r, ue] = o.useState(), [b, q] = o.useState(!1), [E, G] = o.useState(!1), [k, A] = o.useState(), [de, me] = o.useState(), V = re(e.value) ? e.value : k, [pe, fe] = o.useState(!1), p = re(e.open), m = p ? e.open : pe, ge = e.maximized || E || !e.maximizable || e.disabled, be = !(e.maximized && !E), ke = !(!(e.value || k) || E || e.readOnly || e.disabled), j = z.toLanguageString(te, R[te]), U = z.toLanguageString(oe, R[oe]), H = z.toLanguageString(ne, R[ne]), O = e.popupScale || ie, x = e.exportScale || le, M = (t) => {
+  ), z = _e(), c = o.useRef(null), g = o.useRef(null), N = o.useRef(null), W = o.useRef(null), S = o.useRef(null), [r, me] = o.useState(), [b, q] = o.useState(!1), [E, G] = o.useState(!1), [k, A] = o.useState(), [pe, fe] = o.useState(), V = ie(e.value) ? e.value : k, [ge, be] = o.useState(!1), p = ie(e.open), m = p ? e.open : ge, ke = e.maximized || E || !e.maximizable || e.disabled, ye = !(e.maximized && !E), ve = !(!(e.value || k) || E || e.readOnly || e.disabled), j = z.toLanguageString(te, R[te]), U = z.toLanguageString(oe, R[oe]), H = z.toLanguageString(ne, R[ne]), O = e.popupScale || se, x = e.exportScale || le, M = (t) => {
     A(t), e.onChange && e.onChange({ value: t });
-  }, ye = (t) => {
+  }, Ce = (t) => {
     r == null || r.loadImage(t.value), M(t.value);
   };
   o.useEffect(() => {
     e.value !== k && (A(e.value), r == null || r.loadImage(e.value));
   }, [e.value]);
-  const ve = () => {
+  const he = () => {
     r == null || r.clear(), M();
   }, y = o.useCallback(
     (t) => {
-      p || fe(t);
+      p || be(t);
     },
     [p]
-  ), Ce = (t) => {
+  ), ze = (t) => {
     var n, i;
     Q(t), (i = ((n = S.current) == null ? void 0 : n.element) || g.current) == null || i.focus();
-  }, w = o.useCallback(() => {
-    let t = qe;
+  }, L = o.useCallback(() => {
+    let t = Ae;
     return !e.color && typeof document != "undefined" && c.current && (t = getComputedStyle(c.current).color), e.color || t;
-  }, [e.color]), L = o.useCallback(() => {
-    let t = Ge;
+  }, [e.color]), w = o.useCallback(() => {
+    let t = Ve;
     return !e.backgroundColor && typeof document != "undefined" && c.current && (t = getComputedStyle(c.current).backgroundColor), e.backgroundColor || t;
   }, [e.backgroundColor]), $ = () => ({
     scale: e.maximized ? e.popupScale : 1,
-    color: w(),
-    backgroundColor: L(),
+    color: L(),
+    backgroundColor: w(),
     strokeWidth: e.strokeWidth,
     smooth: e.smooth,
     readonly: e.readOnly
@@ -77,20 +77,20 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
     }));
   };
   o.useEffect(() => {
-    const t = g.current, n = new xe(t, $());
-    return V && n.loadImage(V), ue(n), () => n.destroy();
+    const t = g.current, n = new Le(t, $());
+    return V && n.loadImage(V), me(n), () => n.destroy();
   }, []), o.useEffect(() => {
     r == null || r.setOptions({
       onChange: async () => M(await K(Y())),
       onDraw: () => G(!0),
       onDrawEnd: () => G(!1)
     });
-  }, [r]), Ie(
+  }, [r]), Te(
     () => r == null ? void 0 : r.setOptions($()),
     [e.readOnly, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
   ), o.useEffect(() => {
-    var i, s;
-    const t = (s = (i = N.current) == null ? void 0 : i.element) == null ? void 0 : s.querySelector(".k-overlay");
+    var i, l;
+    const t = (l = (i = N.current) == null ? void 0 : i.element) == null ? void 0 : l.querySelector(".k-overlay");
     if (!t)
       return;
     const n = () => y(!1);
@@ -99,8 +99,8 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
     if (!m || typeof document == "undefined")
       return;
     const t = (n) => {
-      var i, s;
-      n.key === "Escape" && (y(!1), (s = (i = S.current) == null ? void 0 : i.element) == null || s.focus());
+      var i, l;
+      n.key === "Escape" && (y(!1), (l = (i = S.current) == null ? void 0 : i.element) == null || l.focus());
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
   }, [m]), o.useEffect(() => {
@@ -111,10 +111,10 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
     var t;
     return (t = g.current) == null ? void 0 : t.focus();
   }, []), v = o.useCallback(() => e.value, [e.value]), X = o.useCallback(() => e.name, [e.name]), C = o.useCallback(() => e.required, [e.required]), P = o.useCallback(() => {
-    const t = e.validationMessage !== void 0, i = !v(), s = e.valid !== void 0 ? e.valid : !C() || !i;
+    const t = e.validationMessage !== void 0, i = !v(), l = e.valid !== void 0 ? e.valid : !C() || !i;
     return {
       customError: t,
-      valid: s,
+      valid: l,
       valueMissing: i
     };
   }, [e.validationMessage, e.valid, v, C]), D = o.useCallback(() => e.validityStyles, [e.validityStyles]), J = o.useCallback(() => e, [e]), u = o.useCallback(() => {
@@ -122,7 +122,7 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
       element: c.current,
       focus: I
     };
-    return Object.defineProperty(t, "name", { get: X }), Object.defineProperty(t, "value", { get: v }), Object.defineProperty(t, "validity", { get: P }), Object.defineProperty(t, "validityStyles", { get: D }), Object.defineProperty(t, "required", { get: C }), Object.defineProperty(t, "props", { get: J }), 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: v }), Object.defineProperty(t, "validity", { get: P }), Object.defineProperty(t, "validityStyles", { get: D }), Object.defineProperty(t, "required", { get: C }), Object.defineProperty(t, "props", { get: J }), Object.defineProperty(t, "color", { get: L }), Object.defineProperty(t, "backgroundColor", { get: w }), t;
   }, [
     X,
     v,
@@ -131,23 +131,23 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
     C,
     I,
     J,
-    w,
-    L
+    L,
+    w
   ]);
-  o.useImperativeHandle(se, u);
-  const he = o.useCallback(
+  o.useImperativeHandle(ce, u);
+  const Se = o.useCallback(
     (t) => {
       b || e.maximized || (q(!0), h(e.onFocus, t, u(), {}));
     },
     [b, e.onFocus, u]
-  ), ze = o.useCallback(
+  ), Ee = o.useCallback(
     (t) => {
-      Fe(t.relatedTarget, c.current) || (q(!1), h(e.onBlur, t, u(), {}));
+      Ne(t.relatedTarget, c.current) || (q(!1), h(e.onBlur, t, u(), {}));
     },
     [b, e.onBlur, u]
-  ), Se = o.useCallback(
+  ), Oe = o.useCallback(
     async (t) => {
-      me(await K(Z())), y(!0), h(e.onOpen, t, u(), {});
+      fe(await K(Z())), y(!0), h(e.onOpen, t, u(), {});
     },
     [m, p, e.onOpen, e.value, k, u]
   ), Q = o.useCallback(
@@ -155,11 +155,11 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
       y(!1), h(e.onClose, t, u(), {});
     },
     [m, p, e.onClose, u]
-  ), Ee = () => {
-    ve(), I();
+  ), xe = () => {
+    he(), I();
   }, Y = () => {
-    var i, s;
-    const t = e.width || ((i = c.current) == null ? void 0 : i.offsetWidth) || Ne, n = e.height || ((s = c.current) == null ? void 0 : s.offsetHeight) || We;
+    var i, l;
+    const t = e.width || ((i = c.current) == null ? void 0 : i.offsetWidth) || qe, n = e.height || ((l = c.current) == null ? void 0 : l.offsetHeight) || Ge;
     return {
       width: t,
       height: n
@@ -170,7 +170,7 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
       width: t * O,
       height: n * O
     };
-  }, Oe = !D() || P().valid;
+  }, Me = !D() || P().valid;
   return /* @__PURE__ */ o.createElement(
     "div",
     {
@@ -186,22 +186,22 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
           [`k-signature-${e.fillMode}`]: e.fillMode,
           [`k-input-${e.fillMode}`]: e.fillMode,
           [`k-rounded-${ee.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
-          "k-invalid": !Oe,
+          "k-invalid": !Me,
           "k-required": e.required,
           "k-disabled": e.disabled,
           "k-focus": b
         },
         e.className
       ),
-      onFocus: he,
-      onBlur: ze
+      onFocus: Se,
+      onBlur: Ee
     },
     /* @__PURE__ */ o.createElement(
       "div",
       {
         className: "k-signature-canvas",
         ref: g,
-        tabIndex: Pe(e.tabIndex, e.disabled),
+        tabIndex: Be(e.tabIndex, e.disabled),
         role: "img",
         id: e.id,
         "aria-label": e.ariaLabel,
@@ -215,14 +215,14 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
       {
         type: "button",
         className: B("k-signature-action", "k-signature-maximize", {
-          "k-hidden": e.disabled || ge
+          "k-hidden": e.disabled || ke
         }),
         ref: S,
         icon: "hyperlink-open",
-        svgIcon: ae,
+        svgIcon: re,
         fillMode: "flat",
         size: e.size,
-        onClick: Se,
+        onClick: Oe,
         "aria-label": j,
         title: j
       }
@@ -231,11 +231,11 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
       {
         type: "button",
         className: B("k-signature-action", "k-signature-minimize", "k-rotate-180", {
-          "k-hidden": e.disabled || be
+          "k-hidden": e.disabled || ye
         }),
         ref: W,
         icon: "hyperlink-open",
-        svgIcon: ae,
+        svgIcon: re,
         fillMode: "flat",
         size: e.size,
         onClick: Q,
@@ -244,34 +244,34 @@ const Ne = 250, We = 84, ie = 3, le = 2, qe = "#000000", Ge = "#ffffff", re = (d
       }
     )),
     !e.hideLine && /* @__PURE__ */ o.createElement("div", { className: "k-signature-line", style: { zIndex: 2, pointerEvents: "none" } }),
-    /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, ke && /* @__PURE__ */ o.createElement(
+    /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, ve && /* @__PURE__ */ o.createElement(
       T,
       {
         type: "button",
         className: "k-signature-action k-signature-clear",
         icon: "x",
-        svgIcon: _e,
+        svgIcon: We,
         fillMode: "flat",
         size: e.size,
-        onClick: Ee,
+        onClick: xe,
         "aria-label": H,
         title: H
       }
     )),
-    m && /* @__PURE__ */ o.createElement(Te, { ref: N }, /* @__PURE__ */ o.createElement(
+    m && /* @__PURE__ */ o.createElement(Fe, { ref: N }, /* @__PURE__ */ o.createElement(
       F,
       {
         ...e,
         ...Z(),
-        value: de,
+        value: pe,
         maximized: !0,
         exportScale: 1 / O * x,
         open: !1,
-        onChange: ye,
-        onClose: Ce
+        onChange: Ce,
+        onClose: ze
       }
     )),
-    ce && /* @__PURE__ */ o.createElement(De, null)
+    ue && /* @__PURE__ */ o.createElement(Re, { message: de })
   );
 });
 F.propTypes = {
@@ -296,10 +296,10 @@ F.propTypes = {
   rounded: a.oneOf([null, "small", "medium", "large"]),
   fillMode: a.oneOf([null, "solid", "flat", "outline"])
 };
-const l = {
+const s = {
   strokeWidth: 1,
   smooth: !1,
-  popupScale: ie,
+  popupScale: se,
   exportScale: le,
   maximizable: !0,
   disabled: !1,
@@ -317,5 +317,5 @@ const l = {
 F.displayName = "KendoSignature";
 export {
   F as Signature,
-  Ae as SignaturePropsContext
+  je as SignaturePropsContext
 };