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

package/rating/Rating.d.ts

@@ -0,0 +1,302 @@
+/**
+ * @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, SVGIcon } from '@progress/kendo-react-common';
+import { RatingItemProps } from './RatingItem.js';
+import { RatingKeyboardEvent, RatingItemMouseEvent, RatingItemFocusEvent } from './models/index.js';
+import * as React from 'react';
+/**
+ * Represents the properties of [Rating](https://www.telerik.com/kendo-react-ui/components/inputs/api/rating) component.
+ */
+export interface RatingProps extends FormComponentProps {
+    /**
+     * Sets the `id` property of the top div element of the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating id="rating-component" value={3} />
+     * ```
+     */
+    id?: string;
+    /**
+     * Adds custom CSS classes to the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating className="custom-class" value={4} />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     *
+     * @example
+     * ```jsx
+     * <Rating tabIndex={0} value={2} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Sets additional CSS styles to the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating style={{ margin: '10px' }} value={5} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Determines the children nodes.
+     *
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * Represents the rendered Rating item.
+     *
+     * @example
+     * ```jsx
+     * <Rating item={(props) => <RatingItem {...props}>{props.value}</RatingItem>} />
+     * ```
+     */
+    item?: React.ComponentType<RatingItemProps>;
+    /**
+     * Sets the current value of the Rating, used in controlled mode.
+     *
+     * @example
+     * ```jsx
+     * <Rating value={3} />
+     * ```
+     */
+    value?: number;
+    /**
+     * Sets the default value of the Rating, used in uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Rating defaultValue={2} />
+     * ```
+     */
+    defaultValue?: number;
+    /**
+     * Sets the minimum possible value of the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating min={1} max={10} />
+     * ```
+     */
+    min?: number;
+    /**
+     * Sets the maximum possible value of the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating max={10} />
+     * ```
+     */
+    max?: number;
+    /**
+     * Sets the step value between the minimum and maximum values.
+     *
+     * @example
+     * ```jsx
+     * <Rating step={0.5} />
+     * ```
+     */
+    step?: number;
+    /**
+     * Specifies the direction of the Rating (`ltr` or `rtl`).
+     *
+     * @example
+     * ```jsx
+     * <Rating dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Sets a custom label for the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating label="Rating Label" />
+     * ```
+     */
+    label?: React.ReactNode;
+    /**
+     * Sets the `readonly` mode of the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating readonly={true} value={4} />
+     * ```
+     */
+    readonly?: boolean;
+    /**
+     * Disables the Rating when set to `true`.
+     *
+     * @example
+     * ```jsx
+     * <Rating disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Sets a custom icon for the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating icon="star" />
+     * ```
+     */
+    icon?: string;
+    /**
+     * Sets a custom SVG icon for the Rating.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Rating svgIcon={gearIcon} />
+     * ```
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Sets a custom outline SVG icon for the Rating.
+     *
+     * @example
+     * ```jsx
+     * <Rating svgIconOutline={customOutlineSvgIcon} />
+     * ```
+     */
+    svgIconOutline?: SVGIcon;
+    /**
+     * Determines the selection mode of the Rating (`continues` or `single`).
+     *
+     * @example
+     * ```jsx
+     * <Rating selection="single" />
+     * ```
+     */
+    selection?: 'continues' | 'single';
+    /**
+     * Determines the precision of the Rating (`item` or `half`).
+     *
+     * @example
+     * ```jsx
+     * <Rating precision="half" />
+     * ```
+     */
+    precision?: 'half' | 'item';
+    /**
+     * Fires when the value of the Rating changes.
+     *
+     * @example
+     * ```jsx
+     * <Rating onChange={(event) => console.log(event.value)} />
+     * ```
+     */
+    onChange?: (event: RatingChangeEvent) => void;
+    /**
+     * Fires when the Rating is clicked.
+     *
+     * @example
+     * ```jsx
+     * <Rating onClick={(event) => console.log(event.value)} />
+     * ```
+     */
+    onClick?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Fires when a key is pressed while the Rating is focused.
+     *
+     * @example
+     * ```jsx
+     * <Rating onKeyDown={(event) => console.log(event.value)} />
+     * ```
+     */
+    onKeyDown?: (event: RatingKeyboardEvent) => void;
+    /**
+     * Fires when the Rating is focused.
+     *
+     * @example
+     * ```jsx
+     * <Rating onFocus={(event) => console.log('Focused')} />
+     * ```
+     */
+    onFocus?: (event: RatingItemFocusEvent) => void;
+    /**
+     * Fires when the Rating loses focus.
+     *
+     * @example
+     * ```jsx
+     * <Rating onBlur={(event) => console.log('Blurred')} />
+     * ```
+     */
+    onBlur?: (event: RatingItemFocusEvent) => void;
+    /**
+     * Identifies the element(s) which will describe the component.
+     *
+     * @example
+     * ```jsx
+     * <Rating ariaDescribedBy="description-id" />
+     * ```
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     *
+     * @example
+     * ```jsx
+     * <Rating ariaLabelledBy="label-id" />
+     * ```
+     */
+    ariaLabelledBy?: string;
+}
+/**
+ * Represents the target(element and props) of the RatingChangeEvent.
+ */
+export interface RatingHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props value of the Rating.
+     */
+    props: RatingProps;
+}
+/**
+ * Represents the return type of RatingChangeEvent.
+ */
+export interface RatingChangeEvent {
+    /**
+     * The current Rating value.
+     */
+    value: number;
+    /**
+     * The target of the RatingChangeEvent from RatingHandle.
+     */
+    target: RatingHandle;
+    /**
+     * The event of the RatingChangeEvent.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+}
+/**
+ * Represents the PropsContext of the `Rating` component.
+ * Used for global configuration of all `Rating` instances.
+ *
+ * For more information, refer to the [Inputs Props Context](https://www.telerik.com/kendo-react-ui/components/inputs/props-context) article.
+ */
+export declare const RatingPropsContext: React.Context<(p: RatingProps) => RatingProps>;
+/**
+ * Represents the [KendoReact Rating component](https://www.telerik.com/kendo-react-ui/components/inputs/rating).
+ *
+ * Accepts properties of type [RatingProps](https://www.telerik.com/kendo-react-ui/components/inputs/api/ratingprops).
+ * Obtaining the `ref` returns an object of type [RatingHandle](https://www.telerik.com/kendo-react-ui/components/inputs/api/ratinghandle).
+ */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<RatingHandle | null>>;

package/rating/Rating.mjs

@@ -7,7 +7,7 @@
  */
 import * as a from "react";
 import c from "prop-types";
-import { createPropsContext as te, usePropsContext as ae, useDir as ne, Keys as R, IconWrap as y, toIconName as B, getTabIndex as le, classNames as se, svgIconPropType as S } from "@progress/kendo-react-common";
+import { createPropsContext as te, usePropsContext as ae, useDir as ne, Keys as R, IconWrap as y, toIconName as B, classNames as le, getTabIndex as se, svgIconPropType as S } from "@progress/kendo-react-common";
 import { starOutlineIcon as $, starIcon as K } from "@progress/kendo-svg-icons";
 import { RatingItem as oe } from "./RatingItem.mjs";
 import { RATING_ACTION as r, ratingReducer as ie } from "./rating-reducer.mjs";
@@ -244,8 +244,8 @@ const q = (n, g, v) => {
       ref: h,
       role: "slider",
       dir: o,
-      tabIndex: le(e.tabIndex, e.disabled, void 0),
-      className: se(
+      tabIndex: se(e.tabIndex, e.disabled, void 0),
+      className: le(
         "k-rating",
         {
           "k-rtl": o === "rtl",

package/rating/RatingItem.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { RatingItemMouseEvent, RatingItemFocusEvent, RatingItemKeyboardEvent } from './models/index.js';
+import * as React from 'react';
+/**
+ * Represents the properties of [RatingItem](https://www.telerik.com/kendo-react-ui/components/inputs/api/ratingitem) component.
+ */
+export interface RatingItemProps {
+    /**
+     * Sets the `id` property of the top div element of the RatingItem.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the RatingItem.
+     */
+    className?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Determines if icon is partly selected.
+     */
+    half?: boolean;
+    /**
+     * Sets additional CSS styles to the RatingItem.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React.ReactNode;
+    /**
+     * Determines the RatingItem direction `ltr` - by default, or `rtl`.
+     */
+    dir?: string;
+    /**
+     * Sets the current value of the RatingItem, used in controlled mode.
+     */
+    value: number;
+    /**
+     * Sets the title of current RatingItem component. [See example](https://www.telerik.com/kendo-react-ui/components/inputs/rating/controlled)
+     */
+    title?: string;
+    /**
+     * Sets the icon of current RatingItem component. [See example](https://www.telerik.com/kendo-react-ui/components/inputs/rating/label)
+     */
+    icon?: any;
+    /**
+     * Determines if current RatingItem is selected. [See example](https://www.telerik.com/kendo-react-ui/components/inputs/rating/customization)
+     */
+    selected?: boolean;
+    /**
+     * Determines if current RatingItem is hovered.
+     */
+    hovered?: boolean;
+    /**
+     * Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type.
+     */
+    onClick?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type.
+     */
+    onKeyDown?: (event: RatingItemKeyboardEvent) => void;
+    /**
+     * Triggered after `onFocus` event. Gets outside access to the target element and the event type.
+     */
+    onFocus?: (event: RatingItemFocusEvent) => void;
+    /**
+     * Triggered after `onBlur` event. Gets outside access to the target element and the event type.
+     */
+    onBlur?: (event: RatingItemFocusEvent) => void;
+    /**
+     * Triggered after `onMouseEnter` event. Gets outside access to the target element and the event type.
+     */
+    onMouseEnter?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onMouseLeave` event. Gets outside access to the target element and the event type.
+     */
+    onMouseLeave?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onMouseMove` event. Gets outside access to the target element and the event type.
+     */
+    onMouseMove?: (event: RatingItemMouseEvent) => void;
+}
+/**
+ * Represents the target(value, element and props) of The RatingItem.
+ */
+export interface RatingItemHandle {
+    /**
+     * The current RatingItem value.
+     */
+    value: number;
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props value of the RatingItem.
+     */
+    props: RatingItemProps;
+}
+/**
+ * Represents the RatingItem component.
+ */
+export declare const RatingItem: React.ForwardRefExoticComponent<RatingItemProps & React.RefAttributes<RatingItemHandle | null>>;

package/rating/models/index.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { RatingItemHandle } from './../RatingItem.js';
+import { RatingHandle } from './../Rating.js';
+/**
+ * Represents the return type of the RatingItemMouseEvent.
+ */
+export interface RatingItemMouseEvent {
+    /**
+     * The target of the RatingItemMouseEvent from RatingItemHandle.
+     */
+    target: RatingItemHandle;
+    /**
+     * The event of the RatingItemMouseEvent.
+     */
+    syntheticEvent: React.MouseEvent<any>;
+    /**
+     * @hidden
+     */
+    value?: number | null;
+}
+/**
+ * Represents the return type of the RatingItemKeyboardEvent.
+ */
+export interface RatingItemKeyboardEvent {
+    /**
+     * The target of the RatingItemKeyboardEvent from RatingItemHandle.
+     */
+    target: RatingItemHandle;
+    /**
+     * The event of the RatingItemKeyboardEvent.
+     */
+    syntheticEvent: React.KeyboardEvent<any>;
+}
+/**
+ * Represents the return type of the RatingItemFocusEvent.
+ */
+export interface RatingItemFocusEvent {
+    /**
+     * The target of the RatingItemFocusEvent from RatingItemHandle.
+     */
+    target: RatingItemHandle;
+    /**
+     * The event of the RatingItemFocusEvent.
+     */
+    syntheticEvent: React.FocusEvent<any>;
+}
+/**
+ * Represents the return type of the RatingMouseEvent.
+ */
+export interface RatingMouseEvent {
+    /**
+     * The target of the RatingMouseEvent from RatingHandle.
+     */
+    target: RatingHandle;
+    /**
+     * The event of the RatingMouseEvent.
+     */
+    syntheticEvent: React.MouseEvent<any>;
+}
+/**
+ * Represents the return type of the RatingKeyboardEvent.
+ */
+export interface RatingKeyboardEvent {
+    /**
+     * The target of the RatingKeyboardEvent from RatingHandle.
+     */
+    target: RatingHandle;
+    /**
+     * The event of the RatingKeyboardEvent.
+     */
+    syntheticEvent: React.KeyboardEvent<any>;
+}
+/**
+ * Represents the return type od the RatingFocusEvent.
+ */
+export interface RatingFocusEvent {
+    /**
+     * The target of the RatingFocusEvent from RatingHandle.
+     */
+    target: RatingHandle;
+    /**
+     * The event of the RatingFocusEvent.
+     */
+    syntheticEvent: React.FocusEvent<any>;
+}

package/rating/rating-reducer.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @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 enum RATING_ACTION {
+    select = "select",
+    deselect = "deselect",
+    increase = "increase",
+    decrease = "decrease",
+    min = "min",
+    max = "max",
+    reset = "reset"
+}
+/**
+ * @hidden
+ */
+export type RatingActionDispatch = {
+    type: RATING_ACTION;
+    payload?: number;
+    event?: React.SyntheticEvent<any>;
+};
+/**
+ * @hidden
+ */
+export type RatingAction = {
+    min: number;
+    max: number;
+    step?: number;
+};
+/**
+ * @hidden
+ */
+export declare const ratingReducer: (state: any, action: RatingAction & RatingActionDispatch) => any;

package/rating/utils/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @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 const toRound: (num: number, base: number) => number;
+/**
+ * @hidden
+ */
+export declare const getRemainder: (x: number, y: number) => number;
+/**
+ * @hidden
+ */
+export declare const isHalf: (index: number, value: number, step: number) => boolean;
+/**
+ * @hidden
+ */
+export declare const isSelected: (index: number, value: number | null, step: number, selection: 'single' | 'continues') => boolean;
+/**
+ * @hidden
+ */
+export declare const calcIsFirstHalf: (dir: string, rect: any, clientX: number) => boolean;
+/**
+ * @hidden
+ */
+export declare const isCorrectValue: (min: number, max: number, step: number, value: number) => boolean;

package/signature/Signature.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SignatureHandle } from './interfaces/SignatureHandle.js';
+import { SignatureProps } from './interfaces/SignatureProps.js';
+import * as React from 'react';
+/**
+ * Represents the PropsContext of the `Signature` component.
+ * Used for global configuration of all `Signature` instances.
+ *
+ * For more information, refer to the [Inputs Props Context](https://www.telerik.com/kendo-react-ui/components/inputs/props-context) article.
+ */
+export declare const SignaturePropsContext: React.Context<(p: SignatureProps) => SignatureProps>;
+/**
+ * Represents the [KendoReact Signature component](https://www.telerik.com/kendo-react-ui/components/inputs/signature).
+ */
+export declare const Signature: React.ForwardRefExoticComponent<SignatureProps & React.RefAttributes<SignatureHandle | null>>;

package/signature/Signature.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ze=require("@progress/kendo-inputs-common"),_=require("@progress/kendo-react-buttons"),a=require("@progress/kendo-react-common"),Oe=require("@progress/kendo-react-dialogs"),Ee=require("@progress/kendo-react-intl"),s=require("prop-types"),xe=require("react"),p=require("../messages/index.js"),ne=require("../package-metadata.js"),Me=require("./utils/index.js"),N=require("@progress/kendo-svg-icons");function we(c){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const g in c)if(g!=="default"){const y=Object.getOwnPropertyDescriptor(c,g);Object.defineProperty(k,g,y.get?y:{enumerable:!0,get:()=>c[g]})}}return k.default=c,Object.freeze(k)}const n=we(xe),Ie=250,Le=84,ae=3,se=2,Pe="#000000",qe="#ffffff",oe=c=>c!==void 0,re=a.createPropsContext(),E=n.forwardRef((c,k)=>{const g=!a.validatePackage(ne.packageMetadata,{component:"Signature"}),y=a.getLicenseMessage(ne.packageMetadata),F=a.usePropsContext(re,c),e=n.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,...F}),[F]),x=Ee.useLocalization(),d=n.useRef(null),v=n.useRef(null),j=n.useRef(null),W=n.useRef(null),M=n.useRef(null),[r,ie]=n.useState(),[h,G]=n.useState(!1),[w,A]=n.useState(!1),[C,V]=n.useState(),[le,ce]=n.useState(),U=oe(e.value)?e.value:C,[ue,de]=n.useState(!1),b=oe(e.open),f=b?e.open:ue,me=e.maximized||w||!e.maximizable||e.disabled,pe=!(e.maximized&&!w),ge=!(!(e.value||C)||w||e.readOnly||e.disabled),H=x.toLanguageString(p.signatureMaximize,p.messages[p.signatureMaximize]),$=x.toLanguageString(p.signatureMinimize,p.messages[p.signatureMinimize]),K=x.toLanguageString(p.signatureClear,p.messages[p.signatureClear]),I=e.popupScale||ae,L=e.exportScale||se,P=t=>{V(t),e.onChange&&e.onChange({value:t})},fe=t=>{r==null||r.loadImage(t.value),P(t.value)};n.useEffect(()=>{e.value!==C&&(V(e.value),r==null||r.loadImage(e.value))},[e.value]);const ke=()=>{r==null||r.clear(),P()},S=n.useCallback(t=>{b||de(t)},[b]),be=t=>{var o,i;Z(t),(i=((o=M.current)==null?void 0:o.element)||v.current)==null||i.focus()},q=n.useCallback(()=>{let t=Pe;return!e.color&&typeof document!="undefined"&&d.current&&(t=getComputedStyle(d.current).color),e.color||t},[e.color]),D=n.useCallback(()=>{let t=qe;return!e.backgroundColor&&typeof document!="undefined"&&d.current&&(t=getComputedStyle(d.current).backgroundColor),e.backgroundColor||t},[e.backgroundColor]),X=()=>({scale:e.maximized?e.popupScale:1,color:q(),backgroundColor:D(),strokeWidth:e.strokeWidth,smooth:e.smooth,readonly:e.readOnly}),J=async t=>{const{width:o,height:i}=t;return await(r==null?void 0:r.exportImage({width:o*L,height:i*L}))};n.useEffect(()=>{const t=v.current,o=new ze.SignaturePad(t,X());return U&&o.loadImage(U),ie(o),()=>o.destroy()},[]),n.useEffect(()=>{r==null||r.setOptions({onChange:async()=>P(await J(ee())),onDraw:()=>A(!0),onDrawEnd:()=>A(!1)})},[r]),a.useIsomorphicLayoutEffect(()=>r==null?void 0:r.setOptions(X()),[e.readOnly,e.color,e.backgroundColor,e.strokeWidth,e.smooth]),n.useEffect(()=>{var i,u;const t=(u=(i=j.current)==null?void 0:i.element)==null?void 0:u.querySelector(".k-overlay");if(!t)return;const o=()=>S(!1);return t.addEventListener("click",o),()=>t.removeEventListener("click",o)},[f]),n.useEffect(()=>{if(!f||typeof document=="undefined")return;const t=o=>{var i,u;o.key==="Escape"&&(S(!1),(u=(i=M.current)==null?void 0:i.element)==null||u.focus())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[f]),n.useEffect(()=>{var t,o;e.maximized&&((o=(t=W.current)==null?void 0:t.element)==null||o.focus())},[]);const R=n.useCallback(()=>{var t;return(t=v.current)==null?void 0:t.focus()},[]),z=n.useCallback(()=>e.value,[e.value]),Q=n.useCallback(()=>e.name,[e.name]),O=n.useCallback(()=>e.required,[e.required]),T=n.useCallback(()=>{const t=e.validationMessage!==void 0,i=!z(),u=e.valid!==void 0?e.valid:!O()||!i;return{customError:t,valid:u,valueMissing:i}},[e.validationMessage,e.valid,z,O]),B=n.useCallback(()=>e.validityStyles,[e.validityStyles]),Y=n.useCallback(()=>e,[e]),m=n.useCallback(()=>{const t={element:d.current,focus:R};return Object.defineProperty(t,"name",{get:Q}),Object.defineProperty(t,"value",{get:z}),Object.defineProperty(t,"validity",{get:T}),Object.defineProperty(t,"validityStyles",{get:B}),Object.defineProperty(t,"required",{get:O}),Object.defineProperty(t,"props",{get:Y}),Object.defineProperty(t,"color",{get:q}),Object.defineProperty(t,"backgroundColor",{get:D}),t},[Q,z,T,B,O,R,Y,q,D]);n.useImperativeHandle(k,m);const ye=n.useCallback(t=>{h||e.maximized||(G(!0),a.dispatchEvent(e.onFocus,t,m(),{}))},[h,e.onFocus,m]),ve=n.useCallback(t=>{Me.hasParent(t.relatedTarget,d.current)||(G(!1),a.dispatchEvent(e.onBlur,t,m(),{}))},[h,e.onBlur,m]),he=n.useCallback(async t=>{ce(await J(te())),S(!0),a.dispatchEvent(e.onOpen,t,m(),{})},[f,b,e.onOpen,e.value,C,m]),Z=n.useCallback(t=>{S(!1),a.dispatchEvent(e.onClose,t,m(),{})},[f,b,e.onClose,m]),Ce=()=>{ke(),R()},ee=()=>{var i,u;const t=e.width||((i=d.current)==null?void 0:i.offsetWidth)||Ie,o=e.height||((u=d.current)==null?void 0:u.offsetHeight)||Le;return{width:t,height:o}},te=()=>{const{width:t,height:o}=ee();return{width:t*I,height:o*I}},Se=!B()||T().valid;return n.createElement("div",{ref:d,dir:e.dir,style:{width:e.width,height:e.height,...e.style},className:a.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${a.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-signature-${e.fillMode}`]:e.fillMode,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${a.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,"k-invalid":!Se,"k-required":e.required,"k-disabled":e.disabled,"k-focus":h},e.className),onFocus:ye,onBlur:ve},n.createElement("div",{className:"k-signature-canvas",ref:v,tabIndex:a.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,style:e.inputStyle}),n.createElement("div",{className:"k-signature-actions k-signature-actions-top"},n.createElement(_.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-maximize",{"k-hidden":e.disabled||me}),ref:M,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:he,"aria-label":H,title:H}),n.createElement(_.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-minimize","k-rotate-180",{"k-hidden":e.disabled||pe}),ref:W,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:Z,"aria-label":$,title:$})),!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"},ge&&n.createElement(_.Button,{type:"button",className:"k-signature-action k-signature-clear",icon:"x",svgIcon:N.xIcon,fillMode:"flat",size:e.size,onClick:Ce,"aria-label":K,title:K})),f&&n.createElement(Oe.Dialog,{ref:j},n.createElement(E,{...e,...te(),value:le,maximized:!0,exportScale:1/I*L,open:!1,onChange:fe,onClose:be})),g&&n.createElement(a.WatermarkOverlay,{message:y}))});E.propTypes={value:s.string,width:s.number,height:s.number,tabIndex:s.number,dir:s.string,ariaDescribedBy:s.string,ariaLabelledBy:s.string,ariaLabel:s.string,readOnly:s.bool,disabled:s.bool,validationMessage:s.string,required:s.bool,onChange:s.func,onFocus:s.func,onBlur:s.func,onOpen:s.func,onClose:s.func,size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large"]),fillMode:s.oneOf([null,"solid","flat","outline"])};const l={strokeWidth:1,smooth:!1,popupScale:ae,exportScale:se,maximizable:!0,disabled:!1,required:!1,validityStyles:!0,onChange:c=>a.noop,onFocus:c=>a.noop,onBlur:c=>a.noop,onOpen:c=>a.noop,onClose:c=>a.noop,size:"medium",rounded:"medium",fillMode:"solid"};E.displayName="KendoSignature";exports.Signature=E;exports.SignaturePropsContext=re;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ze=require("@progress/kendo-inputs-common"),_=require("@progress/kendo-react-buttons"),a=require("@progress/kendo-react-common"),Oe=require("@progress/kendo-react-dialogs"),Ee=require("@progress/kendo-react-intl"),r=require("prop-types"),xe=require("react"),p=require("../messages/index.js"),ne=require("../package-metadata.js"),Me=require("./utils/index.js"),N=require("@progress/kendo-svg-icons");function we(c){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const g in c)if(g!=="default"){const v=Object.getOwnPropertyDescriptor(c,g);Object.defineProperty(k,g,v.get?v:{enumerable:!0,get:()=>c[g]})}}return k.default=c,Object.freeze(k)}const n=we(xe),Ie=250,Le=84,ae=3,re=2,Pe="#000000",qe="#ffffff",oe=c=>c!==void 0,se=a.createPropsContext(),E=n.forwardRef((c,k)=>{const g=!a.validatePackage(ne.packageMetadata,{component:"Signature"}),v=a.getLicenseMessage(ne.packageMetadata),F=a.usePropsContext(se,c),e=n.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,...F}),[F]),x=Ee.useLocalization(),d=n.useRef(null),y=n.useRef(null),j=n.useRef(null),W=n.useRef(null),M=n.useRef(null),[s,ie]=n.useState(),[h,G]=n.useState(!1),[w,A]=n.useState(!1),[C,V]=n.useState(),[le,ce]=n.useState(),U=oe(e.value)?e.value:C,[ue,de]=n.useState(!1),b=oe(e.open),f=b?e.open:ue,me=e.maximized||w||!e.maximizable||e.disabled,pe=!(e.maximized&&!w),ge=!(!(e.value||C)||w||e.readOnly||e.disabled),H=x.toLanguageString(p.signatureMaximize,p.messages[p.signatureMaximize]),$=x.toLanguageString(p.signatureMinimize,p.messages[p.signatureMinimize]),K=x.toLanguageString(p.signatureClear,p.messages[p.signatureClear]),I=e.popupScale||ae,L=e.exportScale||re,P=t=>{V(t),e.onChange&&e.onChange({value:t})},fe=t=>{s==null||s.loadImage(t.value),P(t.value)};n.useEffect(()=>{e.value!==C&&(V(e.value),s==null||s.loadImage(e.value))},[e.value]);const ke=()=>{s==null||s.clear(),P()},S=n.useCallback(t=>{b||de(t)},[b]),be=t=>{var o,i;Z(t),(i=((o=M.current)==null?void 0:o.element)||y.current)==null||i.focus()},q=n.useCallback(()=>{let t=Pe;return!e.color&&typeof document!="undefined"&&d.current&&(t=getComputedStyle(d.current).color),e.color||t},[e.color]),D=n.useCallback(()=>{let t=qe;return!e.backgroundColor&&typeof document!="undefined"&&d.current&&(t=getComputedStyle(d.current).backgroundColor),e.backgroundColor||t},[e.backgroundColor]),X=()=>({scale:e.maximized?e.popupScale:1,color:q(),backgroundColor:D(),strokeWidth:e.strokeWidth,smooth:e.smooth,readonly:e.readOnly}),J=async t=>{const{width:o,height:i}=t;return await(s==null?void 0:s.exportImage({width:o*L,height:i*L}))};n.useEffect(()=>{const t=y.current,o=new ze.SignaturePad(t,X());return U&&o.loadImage(U),ie(o),()=>o.destroy()},[]),n.useEffect(()=>{s==null||s.setOptions({onChange:async()=>P(await J(ee())),onDraw:()=>A(!0),onDrawEnd:()=>A(!1)})},[s]),a.useIsomorphicLayoutEffect(()=>s==null?void 0:s.setOptions(X()),[e.readOnly,e.color,e.backgroundColor,e.strokeWidth,e.smooth]),n.useEffect(()=>{var i,u;const t=(u=(i=j.current)==null?void 0:i.element)==null?void 0:u.querySelector(".k-overlay");if(!t)return;const o=()=>S(!1);return t.addEventListener("click",o),()=>t.removeEventListener("click",o)},[f]),n.useEffect(()=>{if(!f||typeof document=="undefined")return;const t=o=>{var i,u;o.key==="Escape"&&(S(!1),(u=(i=M.current)==null?void 0:i.element)==null||u.focus())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[f]),n.useEffect(()=>{var t,o;e.maximized&&((o=(t=W.current)==null?void 0:t.element)==null||o.focus())},[]);const R=n.useCallback(()=>{var t;return(t=y.current)==null?void 0:t.focus()},[]),z=n.useCallback(()=>e.value,[e.value]),Q=n.useCallback(()=>e.name,[e.name]),O=n.useCallback(()=>e.required,[e.required]),T=n.useCallback(()=>{const t=e.validationMessage!==void 0,i=!z(),u=e.valid!==void 0?e.valid:!O()||!i;return{customError:t,valid:u,valueMissing:i}},[e.validationMessage,e.valid,z,O]),B=n.useCallback(()=>e.validityStyles,[e.validityStyles]),Y=n.useCallback(()=>e,[e]),m=n.useCallback(()=>{const t={element:d.current,focus:R};return Object.defineProperty(t,"name",{get:Q}),Object.defineProperty(t,"value",{get:z}),Object.defineProperty(t,"validity",{get:T}),Object.defineProperty(t,"validityStyles",{get:B}),Object.defineProperty(t,"required",{get:O}),Object.defineProperty(t,"props",{get:Y}),Object.defineProperty(t,"color",{get:q}),Object.defineProperty(t,"backgroundColor",{get:D}),t},[Q,z,T,B,O,R,Y,q,D]);n.useImperativeHandle(k,m);const ve=n.useCallback(t=>{h||e.maximized||(G(!0),a.dispatchEvent(e.onFocus,t,m(),{}))},[h,e.onFocus,m]),ye=n.useCallback(t=>{Me.hasParent(t.relatedTarget,d.current)||(G(!1),a.dispatchEvent(e.onBlur,t,m(),{}))},[h,e.onBlur,m]),he=n.useCallback(async t=>{ce(await J(te())),S(!0),a.dispatchEvent(e.onOpen,t,m(),{})},[f,b,e.onOpen,e.value,C,m]),Z=n.useCallback(t=>{S(!1),a.dispatchEvent(e.onClose,t,m(),{})},[f,b,e.onClose,m]),Ce=()=>{ke(),R()},ee=()=>{var i,u;const t=e.width||((i=d.current)==null?void 0:i.offsetWidth)||Ie,o=e.height||((u=d.current)==null?void 0:u.offsetHeight)||Le;return{width:t,height:o}},te=()=>{const{width:t,height:o}=ee();return{width:t*I,height:o*I}},Se=!B()||T().valid;return n.createElement("div",{ref:d,dir:e.dir,style:{width:e.width,height:e.height,...e.style},className:a.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${a.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-signature-${e.fillMode}`]:e.fillMode,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${a.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,"k-invalid":!Se,"k-required":e.required,"k-disabled":e.disabled,"k-focus":h},e.className),onFocus:ve,onBlur:ye},n.createElement("div",{className:"k-signature-canvas",ref:y,tabIndex:a.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,style:e.inputStyle}),n.createElement("div",{className:"k-signature-actions k-signature-actions-top"},n.createElement(_.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-maximize",{"k-hidden":e.disabled||me}),ref:M,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:he,"aria-label":H,title:H}),n.createElement(_.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-minimize","k-rotate-180",{"k-hidden":e.disabled||pe}),ref:W,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:Z,"aria-label":$,title:$})),!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"},ge&&n.createElement(_.Button,{type:"button",className:"k-signature-action k-signature-clear",icon:"x",svgIcon:N.xIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:Ce,"aria-label":K,title:K})),f&&n.createElement(Oe.Dialog,{ref:j},n.createElement(E,{...e,...te(),value:le,maximized:!0,exportScale:1/I*L,open:!1,onChange:fe,onClose:be})),g&&n.createElement(a.WatermarkOverlay,{message:v}))});E.propTypes={value:r.string,width:r.number,height:r.number,tabIndex:r.number,dir:r.string,ariaDescribedBy:r.string,ariaLabelledBy:r.string,ariaLabel:r.string,readOnly:r.bool,disabled:r.bool,validationMessage:r.string,required:r.bool,onChange:r.func,onFocus:r.func,onBlur:r.func,onOpen:r.func,onClose:r.func,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large"]),fillMode:r.oneOf(["solid","flat","outline"])};const l={strokeWidth:1,smooth:!1,popupScale:ae,exportScale:re,maximizable:!0,disabled:!1,required:!1,validityStyles:!0,onChange:c=>a.noop,onFocus:c=>a.noop,onBlur:c=>a.noop,onOpen:c=>a.noop,onClose:c=>a.noop,size:void 0,rounded:void 0,fillMode:void 0};E.displayName="KendoSignature";exports.Signature=E;exports.SignaturePropsContext=se;