@progress/kendo-react-inputs 5.7.1-dev.202209200738 → 5.8.0-dev.202209280807

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1663658371,
+    publishDate: 1664351342,
     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/es/signature/Signature.js

@@ -47,7 +47,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { SignaturePad } from '@progress/kendo-inputs-common';
 import { Button } from '@progress/kendo-react-buttons';
-import { classNames, createPropsContext, dispatchEvent, getTabIndex, kendoThemeMaps, noop, usePropsContext } from '@progress/kendo-react-common';
+import { classNames, createPropsContext, dispatchEvent, getTabIndex, kendoThemeMaps, Keys, noop, usePropsContext } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { Dialog } from '@progress/kendo-react-dialogs';
 import { useLocalization } from '@progress/kendo-react-intl';
@@ -60,6 +60,8 @@ var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 84;
 var DEFAULT_POPUP_SCALE = 3;
 var DEFAULT_EXPORT_SCALE = 2;
+var DEFAULT_COLOR = '#000000';
+var DEFAULT_BACKGROUND_COLOR = '#ffffff';
 /**
  * @hidden
  */
@@ -130,14 +132,30 @@ export var Signature = React.forwardRef(function (directProps, target) {
         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 colorGetter = React.useCallback(function () {
+        var defaultColor = DEFAULT_COLOR;
+        if (!props.color && typeof document !== 'undefined' && elementRef.current) {
+            defaultColor = getComputedStyle(elementRef.current).color;
+        }
+        return props.color || defaultColor;
+    }, [props.color]);
+    var backgroundColorGetter = React.useCallback(function () {
+        var defaultBackgroundColor = DEFAULT_BACKGROUND_COLOR;
+        if (!props.backgroundColor && typeof document !== 'undefined' && elementRef.current) {
+            defaultBackgroundColor = getComputedStyle(elementRef.current).backgroundColor;
+        }
+        return props.backgroundColor || defaultBackgroundColor;
+    }, [props.backgroundColor]);
+    var getOptions = function () {
+        return {
+            scale: props.maximized ? props.popupScale : 1,
+            color: colorGetter(),
+            backgroundColor: backgroundColorGetter(),
+            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) {
@@ -184,9 +202,19 @@ export var Signature = React.forwardRef(function (directProps, target) {
         }
         var onOverlayClick = function () { return setOpen(false); };
         overlay.addEventListener('click', onOverlayClick);
-        return function () {
-            return overlay.removeEventListener('click', onOverlayClick);
+        return function () { return overlay.removeEventListener('click', onOverlayClick); };
+    }, [open]);
+    React.useEffect(function () {
+        if (!open || typeof document === 'undefined') {
+            return;
+        }
+        var onDocumentKeydown = function (e) {
+            if (e.keyCode === Keys.esc) {
+                setOpen(false);
+            }
         };
+        document.addEventListener('keypress', onDocumentKeydown);
+        return function () { return document.removeEventListener('keypress', onDocumentKeydown); };
     }, [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]);
@@ -222,8 +250,10 @@ export var Signature = React.forwardRef(function (directProps, target) {
         Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });
         Object.defineProperty(options, 'required', { get: requiredGetter });
         Object.defineProperty(options, 'props', { get: propsGetter });
+        Object.defineProperty(options, 'color', { get: colorGetter });
+        Object.defineProperty(options, 'backgroundColor', { get: backgroundColorGetter });
         return options;
-    }, [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter]);
+    }, [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter, colorGetter, backgroundColorGetter]);
     React.useImperativeHandle(target, getImperativeHandle);
     var onFocus = React.useCallback(function (event) {
         if (focused || props.maximized) {
@@ -294,7 +324,7 @@ export var Signature = React.forwardRef(function (directProps, target) {
             _a), props.className), onFocus: onFocus, onBlur: onBlur },
         React.createElement("div", { className: 'k-signature-actions k-signature-actions-top' },
             showMaximize && (React.createElement(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(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 }))),
+            showMinimize && (React.createElement(Button, { className: 'k-signature-action k-signature-minimize k-rotate-180', icon: 'hyperlink-open', shape: null, fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
         React.createElement("div", { className: 'k-signature-canvas', ref: canvasRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), role: "img", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-disabled": props.disabled ? 'true' : undefined }),
         !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(Button, { className: 'k-signature-action k-signature-clear', icon: 'close', shape: null, fillMode: 'flat', size: props.size, onClick: onClear, "aria-label": clearTitle, title: clearTitle }))),
@@ -320,13 +350,11 @@ Signature.propTypes = {
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large']),
     fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
 };
 Signature.displayName = 'KendoSignature';
 Signature.defaultProps = {
-    color: '#000000',
-    backgroundColor: '#ffffff',
     strokeWidth: 1,
     smooth: false,
     popupScale: DEFAULT_POPUP_SCALE,

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

@@ -31,4 +31,12 @@ export interface SignatureHandle {
      * @hidden
      */
     required: boolean;
+    /**
+     * @hidden
+     */
+    color: string;
+    /**
+     * @hidden
+     */
+    backgroundColor: string;
 }

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

@@ -83,12 +83,11 @@ export interface SignatureProps extends FormComponentProps {
      * - small
      * - medium
      * - large
-     * - full
      * - null—Does not set a rounded `className`.
      *
      * @default `medium`
      */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    rounded?: null | 'small' | 'medium' | 'large';
     /**
      * Configures the `fillMode` of the Signature.
      *
@@ -106,7 +105,7 @@ export interface SignatureProps extends FormComponentProps {
      *
      * Accepts CSS color names and hex values.
      *
-     * @default '#000000'
+     * The default value is determined by the theme `$kendo-input-text` variable.
      */
     color?: string;
     /**
@@ -114,7 +113,7 @@ export interface SignatureProps extends FormComponentProps {
      *
      * Accepts CSS color names and hex values.
      *
-     * @default '#ffffff'
+     * The default value is determined by the theme `$kendo-input-bg` variable.
      */
     backgroundColor?: string;
     /**

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1663658371,
+    publishDate: 1664351342,
     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.js

@@ -63,6 +63,8 @@ var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 84;
 var DEFAULT_POPUP_SCALE = 3;
 var DEFAULT_EXPORT_SCALE = 2;
+var DEFAULT_COLOR = '#000000';
+var DEFAULT_BACKGROUND_COLOR = '#ffffff';
 /**
  * @hidden
  */
@@ -133,14 +135,30 @@ exports.Signature = React.forwardRef(function (directProps, target) {
         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 colorGetter = React.useCallback(function () {
+        var defaultColor = DEFAULT_COLOR;
+        if (!props.color && typeof document !== 'undefined' && elementRef.current) {
+            defaultColor = getComputedStyle(elementRef.current).color;
+        }
+        return props.color || defaultColor;
+    }, [props.color]);
+    var backgroundColorGetter = React.useCallback(function () {
+        var defaultBackgroundColor = DEFAULT_BACKGROUND_COLOR;
+        if (!props.backgroundColor && typeof document !== 'undefined' && elementRef.current) {
+            defaultBackgroundColor = getComputedStyle(elementRef.current).backgroundColor;
+        }
+        return props.backgroundColor || defaultBackgroundColor;
+    }, [props.backgroundColor]);
+    var getOptions = function () {
+        return {
+            scale: props.maximized ? props.popupScale : 1,
+            color: colorGetter(),
+            backgroundColor: backgroundColorGetter(),
+            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) {
@@ -187,9 +205,19 @@ exports.Signature = React.forwardRef(function (directProps, target) {
         }
         var onOverlayClick = function () { return setOpen(false); };
         overlay.addEventListener('click', onOverlayClick);
-        return function () {
-            return overlay.removeEventListener('click', onOverlayClick);
+        return function () { return overlay.removeEventListener('click', onOverlayClick); };
+    }, [open]);
+    React.useEffect(function () {
+        if (!open || typeof document === 'undefined') {
+            return;
+        }
+        var onDocumentKeydown = function (e) {
+            if (e.keyCode === kendo_react_common_1.Keys.esc) {
+                setOpen(false);
+            }
         };
+        document.addEventListener('keypress', onDocumentKeydown);
+        return function () { return document.removeEventListener('keypress', onDocumentKeydown); };
     }, [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]);
@@ -225,8 +253,10 @@ exports.Signature = React.forwardRef(function (directProps, target) {
         Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });
         Object.defineProperty(options, 'required', { get: requiredGetter });
         Object.defineProperty(options, 'props', { get: propsGetter });
+        Object.defineProperty(options, 'color', { get: colorGetter });
+        Object.defineProperty(options, 'backgroundColor', { get: backgroundColorGetter });
         return options;
-    }, [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter]);
+    }, [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter, colorGetter, backgroundColorGetter]);
     React.useImperativeHandle(target, getImperativeHandle);
     var onFocus = React.useCallback(function (event) {
         if (focused || props.maximized) {
@@ -297,7 +327,7 @@ exports.Signature = React.forwardRef(function (directProps, target) {
             _a), props.className), 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 }))),
+            showMinimize && (React.createElement(kendo_react_buttons_1.Button, { className: 'k-signature-action k-signature-minimize k-rotate-180', icon: 'hyperlink-open', shape: null, fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
         React.createElement("div", { className: 'k-signature-canvas', ref: canvasRef, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), role: "img", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-disabled": props.disabled ? 'true' : undefined }),
         !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 }))),
@@ -323,13 +353,11 @@ exports.Signature.propTypes = {
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large']),
     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,

package/dist/npm/signature/interfaces/SignatureHandle.d.ts

@@ -31,4 +31,12 @@ export interface SignatureHandle {
      * @hidden
      */
     required: boolean;
+    /**
+     * @hidden
+     */
+    color: string;
+    /**
+     * @hidden
+     */
+    backgroundColor: string;
 }

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

@@ -83,12 +83,11 @@ export interface SignatureProps extends FormComponentProps {
      * - small
      * - medium
      * - large
-     * - full
      * - null—Does not set a rounded `className`.
      *
      * @default `medium`
      */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    rounded?: null | 'small' | 'medium' | 'large';
     /**
      * Configures the `fillMode` of the Signature.
      *
@@ -106,7 +105,7 @@ export interface SignatureProps extends FormComponentProps {
      *
      * Accepts CSS color names and hex values.
      *
-     * @default '#000000'
+     * The default value is determined by the theme `$kendo-input-text` variable.
      */
     color?: string;
     /**
@@ -114,7 +113,7 @@ export interface SignatureProps extends FormComponentProps {
      *
      * Accepts CSS color names and hex values.
      *
-     * @default '#ffffff'
+     * The default value is determined by the theme `$kendo-input-bg` variable.
      */
     backgroundColor?: string;
     /**