@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/dist/es/signature/interfaces/SignatureProps.d.ts

@@ -0,0 +1,192 @@
+/// <reference types="react" />
+import { FormComponentProps } from '@progress/kendo-react-common';
+import { SignatureChangeEvent } from './SignatureChangeEvent';
+import { SignatureFocusEvent } from './SignatureFocusEvent';
+import { SignatureBlurEvent } from './SignatureBlurEvent';
+import { SignatureOpenEvent } from './SignatureOpenEvent';
+import { SignatureCloseEvent } from './SignatureCloseEvent';
+/**
+ * Represents the props of the [KendoReact Signature component]({% slug overview_signature %}).
+ */
+export interface SignatureProps extends FormComponentProps {
+    /**
+     * Sets a class of the Signature DOM element.
+     */
+    className?: string;
+    /**
+     * Specifies the value of the Signature.
+     *
+     * The value is an image encoded as a [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
+     */
+    value?: string;
+    /**
+     * Specifies the width of the Signature in pixels.
+     */
+    width?: number;
+    /**
+     * Specifies the height of the Signature in pixels.
+     */
+    height?: number;
+    /**
+     * Sets the `tabIndex` property of the Signature.
+     */
+    tabIndex?: number;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Specifies the name of the Signature input.
+     */
+    name?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * Determines whether the Signature is in its read-only state.
+     */
+    readOnly?: boolean;
+    /**
+     * Determines whether the Signature is in its disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * Configures the `size` of the Signature.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Signature.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the Signature.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * The stroke color of the signature.
+     *
+     * Accepts CSS color names and hex values.
+     *
+     * @default '#000000'
+     */
+    color?: string;
+    /**
+     * The background color of the signature.
+     *
+     * Accepts CSS color names and hex values.
+     *
+     * @default '#ffffff'
+     */
+    backgroundColor?: string;
+    /**
+     * The stroke width of the signature.
+     *
+     * @default 1
+     */
+    strokeWidth?: number;
+    /**
+     * A flag indicating whether to smooth out signature lines.
+     *
+     * @default false
+     */
+    smooth?: boolean;
+    /**
+     * A flag indicating if the signature can be maximized.
+     *
+     * @default true
+     */
+    maximizable?: boolean;
+    /**
+     * Sets the open and close state of the Signature.
+     */
+    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
+     */
+    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
+     */
+    exportScale?: number;
+    /**
+     * A flag indicating whether the dotted line should be displayed in the background.
+     *
+     * @default false
+     */
+    hideLine?: boolean;
+    /**
+     * Represents the `style` HTML attribute.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Represents the input element `style` HTML attribute.
+     */
+    inputStyle?: React.CSSProperties;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: SignatureChangeEvent) => void;
+    /**
+     * The event handler that will be fired when Signature is focused.
+     */
+    onFocus?: (event: SignatureFocusEvent) => void;
+    /**
+     * The event handler that will be fired when Signature is blurred.
+     */
+    onBlur?: (event: SignatureBlurEvent) => void;
+    /**
+     * The event handler that will be fired when Signature popup is open.
+     */
+    onOpen?: (event: SignatureOpenEvent) => void;
+    /**
+     * The event handler that will be fired when Signature popup is closed.
+     */
+    onClose?: (event: SignatureCloseEvent) => void;
+    /** @hidden */
+    children?: React.ReactNode;
+    /** @hidden */
+    maximized?: boolean;
+}

package/dist/es/signature/interfaces/SignatureProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/signature/interfaces/index.d.ts

@@ -0,0 +1,7 @@
+export { SignatureBlurEvent } from './SignatureBlurEvent';
+export { SignatureChangeEvent } from './SignatureChangeEvent';
+export { SignatureCloseEvent } from './SignatureCloseEvent';
+export { SignatureFocusEvent } from './SignatureFocusEvent';
+export { SignatureHandle } from './SignatureHandle';
+export { SignatureOpenEvent } from './SignatureOpenEvent';
+export { SignatureProps } from './SignatureProps';

package/dist/es/signature/interfaces/index.js

@@ -0,0 +1 @@
+export {};

package/dist/es/signature/utils/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @hidden
+ */
+export declare function hasParent(element: any, parent: any): boolean;

package/dist/es/signature/utils/index.js

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export function hasParent(element, parent) {
+    var current = element;
+    while (current && current !== parent) {
+        current = current.parentNode;
+    }
+    return current ? true : false;
+}

package/dist/npm/main.d.ts

@@ -50,3 +50,5 @@ export * from './textarea/interfaces/TextAreaFocusEvent';
 export * from './rating/Rating';
 export * from './rating/RatingItem';
 export * from './rating/models/index';
+export * from './signature/Signature';
+export * from './signature/interfaces';

package/dist/npm/main.js

@@ -75,3 +75,5 @@ __exportStar(require("./textarea/interfaces/TextAreaFocusEvent"), exports);
 __exportStar(require("./rating/Rating"), exports);
 __exportStar(require("./rating/RatingItem"), exports);
 __exportStar(require("./rating/models/index"), exports);
+__exportStar(require("./signature/Signature"), exports);
+__exportStar(require("./signature/interfaces"), exports);

package/dist/npm/messages/index.d.ts

@@ -102,6 +102,18 @@ export declare const colorPickerDropdownButtonAriaLabel = "colorPicker.dropdownB
  * @hidden
  */
 export declare const ratingAriaLabel = "rating.ariaLabel";
+/**
+ * @hidden
+ */
+export declare const signatureClear = "signature.clear";
+/**
+ * @hidden
+ */
+export declare const signatureMaximize = "signature.maximize";
+/**
+ * @hidden
+ */
+export declare const signatureMinimize = "signature.minimize";
 /**
  * @hidden
  */
@@ -132,4 +144,7 @@ export declare const messages: {
     "switch.validation": string;
     "colorPicker.dropdownButtonAriaLabel": string;
     "rating.ariaLabel": string;
+    "signature.clear": string;
+    "signature.maximize": string;
+    "signature.minimize": string;
 };

package/dist/npm/messages/index.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.ratingAriaLabel = exports.colorPickerDropdownButtonAriaLabel = exports.switchValidation = exports.radioButtonValidation = exports.checkboxOptionalText = exports.checkboxValidation = exports.flatColorPickerApplyBtn = exports.flatColorPickerCancelBtn = exports.colorGradientToggleInputsButton = exports.colorGradientAlphaSliderLabel = exports.colorGradientHueSliderLabel = exports.colorGradientFail = exports.colorGradientPass = exports.colorGradientAAALevel = exports.colorGradientAALevel = exports.colorGradientContrastRatio = exports.colorGradientHex = exports.colorGradientA = exports.colorGradientB = exports.colorGradientG = exports.colorGradientR = exports.sliderDragTitle = exports.sliderDecreaseValue = exports.sliderIncreaseValue = exports.numericDecreaseValue = exports.numericIncreaseValue = void 0;
+exports.messages = exports.signatureMinimize = exports.signatureMaximize = exports.signatureClear = exports.ratingAriaLabel = exports.colorPickerDropdownButtonAriaLabel = exports.switchValidation = exports.radioButtonValidation = exports.checkboxOptionalText = exports.checkboxValidation = exports.flatColorPickerApplyBtn = exports.flatColorPickerCancelBtn = exports.colorGradientToggleInputsButton = exports.colorGradientAlphaSliderLabel = exports.colorGradientHueSliderLabel = exports.colorGradientFail = exports.colorGradientPass = exports.colorGradientAAALevel = exports.colorGradientAALevel = exports.colorGradientContrastRatio = exports.colorGradientHex = exports.colorGradientA = exports.colorGradientB = exports.colorGradientG = exports.colorGradientR = exports.sliderDragTitle = exports.sliderDecreaseValue = exports.sliderIncreaseValue = exports.numericDecreaseValue = exports.numericIncreaseValue = void 0;
 /**
  * @hidden
  */
@@ -106,6 +106,18 @@ exports.colorPickerDropdownButtonAriaLabel = 'colorPicker.dropdownButtonAriaLabe
  * @hidden
  */
 exports.ratingAriaLabel = 'rating.ariaLabel';
+/**
+ * @hidden
+ */
+exports.signatureClear = 'signature.clear';
+/**
+ * @hidden
+ */
+exports.signatureMaximize = 'signature.maximize';
+/**
+ * @hidden
+ */
+exports.signatureMinimize = 'signature.minimize';
 /**
  * @hidden
  */
@@ -136,4 +148,7 @@ exports.messages = (_a = {},
     _a[exports.switchValidation] = 'Please turn on if you want to proceed!',
     _a[exports.colorPickerDropdownButtonAriaLabel] = 'Select',
     _a[exports.ratingAriaLabel] = 'Rating',
+    _a[exports.signatureClear] = 'Clear',
+    _a[exports.signatureMaximize] = 'Maximize',
+    _a[exports.signatureMinimize] = 'Minimize',
     _a);

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1661429407,
+    publishDate: 1661696663,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/signature/Signature.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SignatureHandle } from './interfaces/SignatureHandle';
+import { SignatureProps } from './interfaces/SignatureProps';
+/**
+ * Represents the PropsContext of the `Signature` component.
+ * Used for global configuration of all `Signature` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export declare const SignaturePropsContext: React.Context<(p: SignatureProps) => SignatureProps>;
+/**
+ * Represents the [KendoReact Signature component]({% slug overview_signature %}).
+ */
+export declare const Signature: React.ForwardRefExoticComponent<SignatureProps & React.RefAttributes<SignatureHandle | null>>;

package/dist/npm/signature/Signature.js

@@ -0,0 +1,349 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Signature = exports.SignaturePropsContext = void 0;
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_dialogs_1 = require("@progress/kendo-react-dialogs");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_common_2 = require("@progress/kendo-react-common");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var PropTypes = require("prop-types");
+var React = require("react");
+var messages_1 = require("../messages");
+var package_metadata_1 = require("../package-metadata");
+var kendo_inputs_common_1 = require("@progress/kendo-inputs-common");
+var utils_1 = require("./utils");
+var DEFAULT_WIDTH = 250;
+var DEFAULT_HEIGHT = 84;
+var DEFAULT_POPUP_SCALE = 3;
+var DEFAULT_EXPORT_SCALE = 2;
+/**
+ * @hidden
+ */
+var isControlled = function (prop) {
+    return prop !== undefined;
+};
+/**
+ * Represents the PropsContext of the `Signature` component.
+ * Used for global configuration of all `Signature` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+exports.SignaturePropsContext = (0, kendo_react_common_1.createPropsContext)();
+/**
+ * Represents the [KendoReact Signature component]({% slug overview_signature %}).
+ */
+exports.Signature = React.forwardRef(function (directProps, target) {
+    var _a;
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+    var props = (0, kendo_react_common_1.usePropsContext)(exports.SignaturePropsContext, directProps);
+    var localizationService = (0, kendo_react_intl_1.useLocalization)();
+    var elementRef = React.useRef(null);
+    var canvasRef = React.useRef(null);
+    var dialogRef = React.useRef(null);
+    var _b = React.useState(), instance = _b[0], setInstance = _b[1];
+    var _c = React.useState(false), focused = _c[0], setFocused = _c[1];
+    var _d = React.useState(false), isDrawing = _d[0], setIsDrawing = _d[1];
+    var _e = React.useState(), stateValue = _e[0], setStateValue = _e[1];
+    var _f = React.useState(), popupValue = _f[0], setPopupValue = _f[1];
+    var isValueControlled = isControlled(props.value);
+    var value = isValueControlled ? props.value : stateValue;
+    var _g = React.useState(false), stateOpen = _g[0], setStateOpen = _g[1];
+    var isOpenControlled = isControlled(props.open);
+    var open = isOpenControlled ? props.open : stateOpen;
+    var showMaximize = !(props.maximized || isDrawing || !props.maximizable || props.disabled);
+    var showMinimize = props.maximized && !isDrawing;
+    var isEmpty = !(props.value || stateValue);
+    var showClear = !(isEmpty || isDrawing || props.readOnly || props.disabled);
+    var maximizeTitle = localizationService.toLanguageString(messages_1.signatureMaximize, messages_1.messages[messages_1.signatureMaximize]);
+    var minimizeTitle = localizationService.toLanguageString(messages_1.signatureMinimize, messages_1.messages[messages_1.signatureMinimize]);
+    var clearTitle = localizationService.toLanguageString(messages_1.signatureClear, messages_1.messages[messages_1.signatureClear]);
+    var onValueChange = function (nextValue) {
+        setStateValue(nextValue);
+        if (props.onChange) {
+            props.onChange({ value: nextValue });
+        }
+    };
+    var onDialogChange = function (e) {
+        instance === null || instance === void 0 ? void 0 : instance.loadImage(e.value);
+        onValueChange(e.value);
+    };
+    React.useEffect(function () {
+        if (props.value !== stateValue) {
+            setStateValue(props.value);
+            instance === null || instance === void 0 ? void 0 : instance.loadImage(props.value);
+        }
+    }, [props.value]);
+    var reset = function () {
+        instance === null || instance === void 0 ? void 0 : instance.clear();
+        onValueChange();
+    };
+    var setOpen = React.useCallback(function (nextOpen) {
+        if (!isOpenControlled) {
+            setStateOpen(nextOpen);
+        }
+    }, [isOpenControlled]);
+    var onDialogClose = function (event) {
+        onMinimizeClick(event);
+        focusElement();
+    };
+    var getOptions = function () { return ({
+        scale: props.maximized ? props.popupScale : 1,
+        color: props.color,
+        backgroundColor: props.backgroundColor,
+        strokeWidth: props.strokeWidth,
+        smooth: props.smooth,
+        readonly: props.readOnly
+    }); };
+    var exportImage = function (exportSize) { return __awaiter(void 0, void 0, void 0, function () {
+        var width, height;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    width = exportSize.width, height = exportSize.height;
+                    return [4 /*yield*/, (instance === null || instance === void 0 ? void 0 : instance.exportImage({
+                            width: width * (props.exportScale || DEFAULT_EXPORT_SCALE),
+                            height: height * (props.exportScale || DEFAULT_EXPORT_SCALE)
+                        }))];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); };
+    React.useEffect(function () {
+        var canvas = canvasRef.current;
+        var pad = new kendo_inputs_common_1.SignaturePad(canvas, getOptions());
+        if (value) {
+            pad.loadImage(value);
+        }
+        setInstance(pad);
+        return function () { return pad.destroy(); };
+    }, []);
+    React.useEffect(function () {
+        instance === null || instance === void 0 ? void 0 : instance.setOptions({
+            onChange: function () { return __awaiter(void 0, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = onValueChange;
+                        return [4 /*yield*/, exportImage(elementSize())];
+                    case 1: return [2 /*return*/, _a.apply(void 0, [_b.sent()])];
+                }
+            }); }); },
+            onDraw: function () { return setIsDrawing(true); },
+            onDrawEnd: function () { return setIsDrawing(false); }
+        });
+    }, [instance]);
+    React.useLayoutEffect(function () { return instance === null || instance === void 0 ? void 0 : instance.setOptions(getOptions()); }, [props.readOnly, props.color, props.backgroundColor, props.strokeWidth, props.smooth]);
+    React.useEffect(function () {
+        var _a, _b;
+        var overlay = (_b = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.querySelector('.k-overlay');
+        if (!overlay) {
+            return;
+        }
+        var onOverlayClick = function () { return setOpen(false); };
+        overlay.addEventListener('click', onOverlayClick);
+        return function () {
+            return overlay.removeEventListener('click', onOverlayClick);
+        };
+    }, [open]);
+    var focusElement = React.useCallback(function () { var _a; return (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, []);
+    var valueGetter = React.useCallback(function () { return props.value; }, [props.value]);
+    var nameGetter = React.useCallback(function () { return props.name; }, [props.name]);
+    var requiredGetter = React.useCallback(function () { return props.required; }, [props.required]);
+    var validityGetter = React.useCallback(function () {
+        var customError = props.validationMessage !== undefined;
+        var currentValue = valueGetter();
+        var valueMissing = !currentValue;
+        var valid = props.valid !== undefined ?
+            props.valid :
+            (!requiredGetter() || !valueMissing);
+        return {
+            customError: customError,
+            valid: valid,
+            valueMissing: valueMissing
+        };
+    }, [props.validationMessage, props.valid, valueGetter, requiredGetter]);
+    var validityStylesGetter = React.useCallback(function () {
+        return props.validityStyles;
+    }, [props.validityStyles]);
+    var propsGetter = React.useCallback(function () {
+        return props;
+    }, [props]);
+    var getImperativeHandle = React.useCallback(function () {
+        var options = {
+            element: elementRef.current,
+            focus: focusElement
+        };
+        Object.defineProperty(options, 'name', { get: nameGetter });
+        Object.defineProperty(options, 'value', { get: valueGetter });
+        Object.defineProperty(options, 'validity', { get: validityGetter });
+        Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });
+        Object.defineProperty(options, 'required', { get: requiredGetter });
+        Object.defineProperty(options, 'props', { get: propsGetter });
+        return options;
+    }, [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter]);
+    React.useImperativeHandle(target, getImperativeHandle);
+    var onFocus = React.useCallback(function (event) {
+        if (focused || props.maximized) {
+            return;
+        }
+        setFocused(true);
+        (0, kendo_react_common_1.dispatchEvent)(props.onFocus, event, getImperativeHandle(), {});
+    }, [focused, props.onFocus, getImperativeHandle]);
+    var onBlur = React.useCallback(function (event) {
+        var insideWrapper = (0, utils_1.hasParent)(event.relatedTarget, elementRef.current);
+        if (insideWrapper) {
+            return;
+        }
+        setFocused(false);
+        (0, kendo_react_common_1.dispatchEvent)(props.onBlur, event, getImperativeHandle(), {});
+    }, [focused, props.onBlur, getImperativeHandle]);
+    var onMaximizeClick = React.useCallback(function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setPopupValue;
+                    return [4 /*yield*/, exportImage(popupSize())];
+                case 1:
+                    _a.apply(void 0, [_b.sent()]);
+                    setOpen(true);
+                    (0, kendo_react_common_1.dispatchEvent)(props.onOpen, event, getImperativeHandle(), {});
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [open, isOpenControlled, props.onOpen, props.value, stateValue, getImperativeHandle]);
+    var onMinimizeClick = React.useCallback(function (event) {
+        setOpen(false);
+        (0, kendo_react_common_1.dispatchEvent)(props.onClose, event, getImperativeHandle(), {});
+    }, [open, isOpenControlled, props.onClose, getImperativeHandle]);
+    var onClear = function () {
+        reset();
+        focusElement();
+    };
+    var elementSize = function () {
+        var _a, _b;
+        var width = props.width || ((_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || DEFAULT_WIDTH;
+        var height = props.height || ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || DEFAULT_HEIGHT;
+        return {
+            width: width,
+            height: height
+        };
+    };
+    var popupSize = function () {
+        var _a = elementSize(), width = _a.width, height = _a.height;
+        var popupScale = props.popupScale || DEFAULT_POPUP_SCALE;
+        return {
+            width: width * popupScale,
+            height: height * popupScale
+        };
+    };
+    var isValid = !validityStylesGetter() || validityGetter().valid;
+    return (React.createElement("div", { ref: elementRef, dir: props.dir, style: __assign({ width: props.width, height: props.height }, props.style), className: (0, kendo_react_common_1.classNames)('k-input', 'k-signature', (_a = {
+                'k-signature-maximized': props.maximized
+            },
+            _a["k-signature-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-signature-".concat(props.fillMode)] = props.fillMode,
+            _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a['k-invalid'] = !isValid,
+            _a['k-required'] = props.required,
+            _a['k-disabled'] = props.disabled,
+            _a['k-focus'] = focused,
+            _a), props.className), "aria-disabled": props.disabled ? 'true' : undefined, onFocus: onFocus, onBlur: onBlur },
+        React.createElement("div", { className: 'k-signature-actions k-signature-actions-top' },
+            showMaximize && (React.createElement(kendo_react_buttons_1.Button, { className: 'k-signature-action k-signature-maximize', icon: 'hyperlink-open', shape: null, fillMode: 'flat', size: props.size, onClick: onMaximizeClick, "aria-label": maximizeTitle, title: maximizeTitle })),
+            showMinimize && (React.createElement(kendo_react_buttons_1.Button, { className: 'k-signature-action k-signature-minimize', icon: 'window-minimize', shape: null, fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
+        React.createElement("div", { className: 'k-signature-canvas', tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), ref: canvasRef }),
+        !props.hideLine && (React.createElement("div", { className: 'k-signature-line', style: { zIndex: 2, pointerEvents: 'none' } })),
+        React.createElement("div", { className: 'k-signature-actions k-signature-actions-bottom' }, showClear && (React.createElement(kendo_react_buttons_1.Button, { className: 'k-signature-action k-signature-clear', icon: 'close', shape: null, fillMode: 'flat', size: props.size, onClick: onClear, "aria-label": clearTitle, title: clearTitle }))),
+        open && (React.createElement(kendo_react_dialogs_1.Dialog, { ref: dialogRef },
+            React.createElement(exports.Signature, __assign({}, props, popupSize(), { value: popupValue, maximized: true, open: false, onChange: onDialogChange, onClose: onDialogClose }))))));
+});
+exports.Signature.propTypes = {
+    value: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    tabIndex: PropTypes.number,
+    dir: PropTypes.string,
+    ariaDescribedBy: PropTypes.string,
+    ariaLabelledBy: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    readOnly: PropTypes.bool,
+    disabled: PropTypes.bool,
+    validationMessage: PropTypes.string,
+    required: PropTypes.bool,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
+};
+exports.Signature.displayName = 'KendoSignature';
+exports.Signature.defaultProps = {
+    color: '#000000',
+    backgroundColor: '#ffffff',
+    strokeWidth: 1,
+    smooth: false,
+    popupScale: DEFAULT_POPUP_SCALE,
+    exportScale: DEFAULT_EXPORT_SCALE,
+    maximizable: true,
+    disabled: false,
+    required: false,
+    validityStyles: true,
+    onChange: function (_) { return kendo_react_common_1.noop; },
+    onFocus: function (_) { return kendo_react_common_1.noop; },
+    onBlur: function (_) { return kendo_react_common_1.noop; },
+    onOpen: function (_) { return kendo_react_common_1.noop; },
+    onClose: function (_) { return kendo_react_common_1.noop; },
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
+};