@progress/kendo-react-inputs 13.3.0-develop.9 → 13.4.0-develop.1

package/signature/Signature.mjs

@@ -7,7 +7,7 @@
  */
 import { SignaturePad as Le } from "@progress/kendo-inputs-common";
 import { Button as T } from "@progress/kendo-react-buttons";
-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 { createPropsContext as we, validatePackage as Ie, getLicenseMessage as Pe, usePropsContext as De, noop as f, useIsomorphicLayoutEffect as Te, dispatchEvent as h, classNames as B, kendoThemeMaps as ee, getTabIndex as Be, WatermarkOverlay as Re } 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";
@@ -38,7 +38,7 @@ const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d
       ..._
     }),
     [_]
-  ), S = _e(), c = o.useRef(null), g = o.useRef(null), N = o.useRef(null), W = o.useRef(null), z = 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 = S.toLanguageString(te, R[te]), U = S.toLanguageString(oe, R[oe]), H = S.toLanguageString(ne, R[ne]), O = e.popupScale || se, x = e.exportScale || le, M = (t) => {
+  ), S = _e(), c = o.useRef(null), g = o.useRef(null), N = o.useRef(null), W = o.useRef(null), z = 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, ve = !(e.maximized && !E), ye = !(!(e.value || k) || E || e.readOnly || e.disabled), j = S.toLanguageString(te, R[te]), U = S.toLanguageString(oe, R[oe]), H = S.toLanguageString(ne, R[ne]), O = e.popupScale || se, x = e.exportScale || le, M = (t) => {
     A(t), e.onChange && e.onChange({ value: t });
   }, Ce = (t) => {
     r == null || r.loadImage(t.value), M(t.value);
@@ -48,7 +48,7 @@ const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d
   }, [e.value]);
   const he = () => {
     r == null || r.clear(), M();
-  }, y = o.useCallback(
+  }, v = o.useCallback(
     (t) => {
       p || be(t);
     },
@@ -93,14 +93,14 @@ const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d
     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);
+    const n = () => v(!1);
     return t.addEventListener("click", n), () => t.removeEventListener("click", n);
   }, [m]), o.useEffect(() => {
     if (!m || typeof document == "undefined")
       return;
     const t = (n) => {
       var i, l;
-      n.key === "Escape" && (y(!1), (l = (i = z.current) == null ? void 0 : i.element) == null || l.focus());
+      n.key === "Escape" && (v(!1), (l = (i = z.current) == null ? void 0 : i.element) == null || l.focus());
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
   }, [m]), o.useEffect(() => {
@@ -110,22 +110,22 @@ const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d
   const I = o.useCallback(() => {
     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(), l = e.valid !== void 0 ? e.valid : !C() || !i;
+  }, []), y = 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 = !y(), l = e.valid !== void 0 ? e.valid : !C() || !i;
     return {
       customError: t,
       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(() => {
+  }, [e.validationMessage, e.valid, y, C]), D = o.useCallback(() => e.validityStyles, [e.validityStyles]), J = o.useCallback(() => e, [e]), u = o.useCallback(() => {
     const t = {
       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: L }), Object.defineProperty(t, "backgroundColor", { get: w }), t;
+    return Object.defineProperty(t, "name", { get: X }), Object.defineProperty(t, "value", { get: y }), 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,
+    y,
     P,
     D,
     C,
@@ -147,12 +147,12 @@ const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d
     [b, e.onBlur, u]
   ), Oe = o.useCallback(
     async (t) => {
-      fe(await K(Z())), y(!0), h(e.onOpen, t, u(), {});
+      fe(await K(Z())), v(!0), h(e.onOpen, t, u(), {});
     },
     [m, p, e.onOpen, e.value, k, u]
   ), Q = o.useCallback(
     (t) => {
-      y(!1), h(e.onClose, t, u(), {});
+      v(!1), h(e.onClose, t, u(), {});
     },
     [m, p, e.onClose, u]
   ), xe = () => {
@@ -221,8 +221,9 @@ const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d
         ref: z,
         icon: "hyperlink-open",
         svgIcon: re,
-        fillMode: "flat",
         size: e.size,
+        rounded: e.rounded,
+        fillMode: "flat",
         onClick: Oe,
         "aria-label": j,
         title: j
@@ -232,28 +233,30 @@ const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d
       {
         type: "button",
         className: B("k-signature-action", "k-signature-minimize", "k-rotate-180", {
-          "k-hidden": e.disabled || ye
+          "k-hidden": e.disabled || ve
         }),
         ref: W,
         icon: "hyperlink-open",
         svgIcon: re,
-        fillMode: "flat",
         size: e.size,
+        rounded: e.rounded,
+        fillMode: "flat",
         onClick: Q,
         "aria-label": U,
         title: U
       }
     )),
     !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" }, ve && /* @__PURE__ */ o.createElement(
+    /* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, ye && /* @__PURE__ */ o.createElement(
       T,
       {
         type: "button",
         className: "k-signature-action k-signature-clear",
         icon: "x",
         svgIcon: We,
-        fillMode: "flat",
         size: e.size,
+        rounded: e.rounded,
+        fillMode: "flat",
         onClick: xe,
         "aria-label": H,
         title: H
@@ -293,9 +296,9 @@ F.propTypes = {
   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"])
+  size: a.oneOf(["small", "medium", "large"]),
+  rounded: a.oneOf(["small", "medium", "large"]),
+  fillMode: a.oneOf(["solid", "flat", "outline"])
 };
 const s = {
   strokeWidth: 1,
@@ -311,9 +314,9 @@ const s = {
   onBlur: (d) => f,
   onOpen: (d) => f,
   onClose: (d) => f,
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid"
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0
 };
 F.displayName = "KendoSignature";
 export {

package/signature/interfaces/SignatureBlurEvent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { SignatureHandle } from './SignatureHandle.js';
+/**
+ * The arguments for the `onBlur` Signature event.
+ */
+export interface SignatureBlurEvent extends BaseEvent<SignatureHandle> {
+}

package/signature/interfaces/SignatureChangeEvent.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { SignatureHandle } from './SignatureHandle.js';
+/**
+ * The arguments for the `change` event of the Signature.
+ */
+export interface SignatureChangeEvent extends BaseEvent<SignatureHandle> {
+    /**
+     * The current value of the Signature.
+     */
+    value: string;
+}

package/signature/interfaces/SignatureCloseEvent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { SignatureHandle } from './SignatureHandle.js';
+/**
+ * The arguments for the `onClose` Signature event.
+ */
+export interface SignatureCloseEvent extends BaseEvent<SignatureHandle> {
+}

package/signature/interfaces/SignatureFocusEvent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { SignatureHandle } from './SignatureHandle.js';
+/**
+ * The arguments for the `onFocus` Signature event.
+ */
+export interface SignatureFocusEvent extends BaseEvent<SignatureHandle> {
+}

package/signature/interfaces/SignatureHandle.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SignatureProps } from './SignatureProps.js';
+/**
+ * The Signature ref.
+ */
+export interface SignatureHandle {
+    /**
+     * The Signature element.
+     */
+    element: HTMLInputElement | null;
+    /**
+     * Focus the Signature.
+     */
+    focus: () => void;
+    /**
+     * Gets the `name` property of the Signature.
+     */
+    name: string | undefined;
+    /**
+     * Gets the value of the Signature.
+     */
+    value: number | null;
+    /**
+     * @hidden
+     */
+    props: SignatureProps;
+    /**
+     * @hidden
+     */
+    validityStyles: boolean;
+    /**
+     * @hidden
+     */
+    required: boolean;
+    /**
+     * @hidden
+     */
+    color: string;
+    /**
+     * @hidden
+     */
+    backgroundColor: string;
+}

package/signature/interfaces/SignatureOpenEvent.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from '@progress/kendo-react-common';
+import { SignatureHandle } from './SignatureHandle.js';
+/**
+ * The arguments for the `onOpen` Signature event.
+ */
+export interface SignatureOpenEvent extends BaseEvent<SignatureHandle> {
+}

package/signature/interfaces/SignatureProps.d.ts

@@ -0,0 +1,324 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentProps } from '@progress/kendo-react-common';
+import { SignatureChangeEvent } from './SignatureChangeEvent.js';
+import { SignatureFocusEvent } from './SignatureFocusEvent.js';
+import { SignatureBlurEvent } from './SignatureBlurEvent.js';
+import { SignatureOpenEvent } from './SignatureOpenEvent.js';
+import { SignatureCloseEvent } from './SignatureCloseEvent.js';
+/**
+ * Represents the props of the [KendoReact Signature component](https://www.telerik.com/kendo-react-ui/components/inputs/signature).
+ */
+export interface SignatureProps extends FormComponentProps {
+    /**
+     * Adds custom CSS classes to the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Specifies the value of the Signature as a Data URL.
+     *
+     * @example
+     * ```jsx
+     * <Signature value="data:image/png;base64,..." />
+     * ```
+     */
+    value?: string;
+    /**
+     * Specifies the width of the Signature in pixels.
+     *
+     * @example
+     * ```jsx
+     * <Signature width={500} />
+     * ```
+     */
+    width?: number;
+    /**
+     * Specifies the height of the Signature in pixels.
+     *
+     * @example
+     * ```jsx
+     * <Signature height={300} />
+     * ```
+     */
+    height?: number;
+    /**
+     * Specifies the `tabIndex` of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `id` of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature id="signature-component" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Represents the `dir` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <Signature dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Specifies the name of the Signature input.
+     *
+     * @example
+     * ```jsx
+     * <Signature name="signature" />
+     * ```
+     */
+    name?: string;
+    /**
+     * Identifies the element(s) which will describe the component.
+     *
+     * @example
+     * ```jsx
+     * <Signature ariaDescribedBy="description-id" />
+     * ```
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <Signature ariaLabelledBy="label-id" />
+     * ```
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Specifies the accessible label of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature ariaLabel="Signature field" />
+     * ```
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the Signature to read-only mode.
+     *
+     * @example
+     * ```jsx
+     * <Signature readOnly={true} />
+     * ```
+     */
+    readOnly?: boolean;
+    /**
+     * Disables the Signature when set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <Signature disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Configures the size of the Signature.
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Signature size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the roundness of the Signature.
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Signature rounded="medium" />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the fill mode of the Signature.
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Signature fillMode="solid" />
+     * ```
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Specifies the stroke color of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature color="blue" />
+     * ```
+     */
+    color?: string;
+    /**
+     * Specifies the background color of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature backgroundColor="lightgray" />
+     * ```
+     */
+    backgroundColor?: string;
+    /**
+     * Specifies the stroke width of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature strokeWidth={2} />
+     * ```
+     */
+    strokeWidth?: number;
+    /**
+     * Enables smoothing of the signature lines.
+     *
+     * @example
+     * ```jsx
+     * <Signature smooth={true} />
+     * ```
+     */
+    smooth?: boolean;
+    /**
+     * Enables the maximizable feature of the Signature.
+     *
+     * @example
+     * ```jsx
+     * <Signature maximizable={true} />
+     * ```
+     */
+    maximizable?: boolean;
+    /**
+     * Sets the open state of the Signature popup.
+     *
+     * @example
+     * ```jsx
+     * <Signature open={true} />
+     * ```
+     */
+    open?: boolean;
+    /**
+     * The scale factor for the popup.
+     *
+     * The Signature width and height will be multiplied by the scale when showing the popup.
+     *
+     * @default 3
+     * @example
+     * ```jsx
+     * <Signature popupScale={1.5} />
+     * ```
+     */
+    popupScale?: number;
+    /**
+     * The scale factor for the exported image.
+     *
+     * The Signature width and height will be multiplied by the scale when converting the signature to an image.
+     *
+     * @default 2
+     *
+     * @example
+     * ```jsx
+     * <Signature exportScale={2} />
+     * ```
+     */
+    exportScale?: number;
+    /**
+     * Hides the dotted line in the background.
+     *
+     * @default false
+     * @example
+     * ```jsx
+     * <Signature hideLine={true} />
+     * ```
+     */
+    hideLine?: boolean;
+    /**
+     * Represents the `style` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <Signature style={{ border: '1px solid black' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Represents the input element `style` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <Signature inputStyle={{ padding: '10px' }} />
+     * ```
+     */
+    inputStyle?: React.CSSProperties;
+    /**
+     * Fires when the value of the Signature changes.
+     *
+     * @example
+     * ```jsx
+     * <Signature onChange={(event) => console.log(event.value)} />
+     * ```
+     */
+    onChange?: (event: SignatureChangeEvent) => void;
+    /**
+     * Fires when the Signature is focused.
+     *
+     * @example
+     * ```jsx
+     * <Signature onFocus={(event) => console.log('Focused')} />
+     * ```
+     */
+    onFocus?: (event: SignatureFocusEvent) => void;
+    /**
+     * Fires when the Signature is blurred.
+     *
+     * @example
+     * ```jsx
+     * <Signature onBlur={(event) => console.log('Blurred')} />
+     * ```
+     */
+    onBlur?: (event: SignatureBlurEvent) => void;
+    /**
+     * Fires when the Signature popup is opened.
+     *
+     * @example
+     * ```jsx
+     * <Signature onOpen={(event) => console.log('Popup opened')} />
+     * ```
+     */
+    onOpen?: (event: SignatureOpenEvent) => void;
+    /**
+     * Fires when the Signature popup is closed.
+     *
+     * @example
+     * ```jsx
+     * <Signature onClose={(event) => console.log('Popup closed')} />
+     * ```
+     */
+    onClose?: (event: SignatureCloseEvent) => void;
+    /** @hidden */
+    children?: React.ReactNode;
+    /** @hidden */
+    maximized?: boolean;
+}

package/signature/interfaces/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export { type SignatureBlurEvent } from './SignatureBlurEvent.js';
+export { type SignatureChangeEvent } from './SignatureChangeEvent.js';
+export { type SignatureCloseEvent } from './SignatureCloseEvent.js';
+export { type SignatureFocusEvent } from './SignatureFocusEvent.js';
+export { type SignatureHandle } from './SignatureHandle.js';
+export { type SignatureOpenEvent } from './SignatureOpenEvent.js';
+export { type SignatureProps } from './SignatureProps.js';

package/signature/utils/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare function hasParent(element: any, parent: any): boolean;