@progress/kendo-react-inputs 14.5.0-develop.9 → 15.0.0-develop.1

package/MaskedTextBoxMcpWrapper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { MaskedTextBoxHandle } from './maskedtextbox/MaskedTextBox.js';
+import { MaskedTextBoxProps } from './maskedtextbox/MaskedTextBoxProps';
+/**
+ * MaskedTextBox wrapper that integrates the Web MCP hook.
+ *
+ * @hidden
+ */
+import * as React from 'react';
+/** @hidden */
+export declare const MaskedTextBoxWrapper: React.ForwardRefExoticComponent<MaskedTextBoxProps & React.RefAttributes<MaskedTextBoxHandle>>;

package/MaskedTextBoxMcpWrapper.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),d=require("./maskedtextbox/MaskedTextBox.js"),n=require("@progress/kendo-react-common");function u(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const a=u(s),c=a.forwardRef((e,r)=>{const[t,o]=n.useMergedRef(r);return n.useWebMcpRegister("maskedtextbox",t,e,e.webMcp),a.createElement(d.MaskedTextBox,{...e,ref:o})});c.displayName="KendoReactMaskedTextBox";exports.MaskedTextBoxWrapper=c;

package/MaskedTextBoxMcpWrapper.mjs

@@ -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 * as r from "react";
+import { MaskedTextBox as m } from "./maskedtextbox/MaskedTextBox.mjs";
+import { useMergedRef as d, useWebMcpRegister as f } from "@progress/kendo-react-common";
+const s = r.forwardRef((e, t) => {
+  const [o, a] = d(t);
+  return f("maskedtextbox", o, e, e.webMcp), /* @__PURE__ */ r.createElement(m, { ...e, ref: a });
+});
+s.displayName = "KendoReactMaskedTextBox";
+export {
+  s as MaskedTextBoxWrapper
+};

package/README.md

@@ -1,4 +1,4 @@
-[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs&utm_content=banner)
+[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs&utm_content=banner)
 
 # KendoReact Inputs Library for React
 
@@ -6,7 +6,7 @@
 >
 > -   This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)—an enterprise-grade UI library with 120+ free and premium components.
 > -   It contains both free and premium KendoReact components and tools. To use the premium components, you must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either [purchase a license](https://www.telerik.com/kendo-react-ui/pricing) or start a [free trial](https://www.telerik.com/download-login-v2-kendo-react-ui). You can use the free components without having to sign up or get a license key.
-> -   If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
+> -   If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started).
 > -   If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs) to learn how to configure your KendoReact licensing.
 > -   Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs).
 > -   The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
@@ -324,7 +324,7 @@ import { TextBox } from '@progress/kendo-react-inputs';
 
 The following table outlines the key resources available with KendoReact and KendoReact Free.
 
-|                                  | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)                                                                                                                                | [KendoReact](https://www.telerik.com/kendo-react-ui)                                                                                                                                                     |
+|                                  | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)                                                                                                     | [KendoReact](https://www.telerik.com/kendo-react-ui)                                                                                                                                                     |
 | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | React components                 | 50+                                                                                                                                                                                                      | 120+                                                                                                                                                                                                     |
 | Four professional themes         | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
@@ -347,7 +347,7 @@ For any issues you might encounter while working with the KendoReact Inputs, use
 ## Resources
 
 -   [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
--   [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
+-   [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/getting-started)
 -   [Getting Started with the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
 -   [API Reference of the KendoReact Inputs](https://www.telerik.com/kendo-react-ui/components/inputs/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)
 -   [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-inputs)

package/checkbox/Checkbox.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 xe=require("react"),e=require("prop-types"),o=require("@progress/kendo-react-common"),Pe=require("@progress/kendo-react-intl"),I=require("../messages/index.js");function Ve(c){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const r in c)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(c,r);Object.defineProperty(b,r,k.get?k:{enumerable:!0,get:()=>c[r]})}}return b.default=c,Object.freeze(b)}const t=Ve(xe),G=o.createPropsContext(),M=t.forwardRef((c,b)=>{const r=o.usePropsContext(G,c),{ariaDescribedBy:k,ariaLabelledBy:J,checked:O,className:Q,labelClassName:X,children:Y,defaultChecked:Z,disabled:n,defaultValue:ee,id:h,size:v=W.size,rounded:g=W.rounded,label:T,labelPlacement:q,name:z,labelOptional:te,onChange:C,onFocus:y,onBlur:x,tabIndex:ae,value:i,required:p,valid:D,validationMessage:F,validityStyles:K,autoFocus:ne,visited:Ee,touched:Ne,modified:Se,...oe}=r,l=t.useRef(null),R=t.useCallback(()=>{l.current&&l.current.focus()},[]),d=t.useCallback(()=>({element:l.current,focus:R,get name(){return l.current&&l.current.name}}),[R]);t.useImperativeHandle(b,d);const[le,se]=t.useState(Z),[ce,re]=t.useState(ee),w=typeof i=="boolean"||i===null,P=O!==void 0,m=w,V=m?i:ce,E=P?O:m?void 0:le,j=z||h,L=E===void 0&&V,_=L?V:E,f=L||m?i===null?i:void 0:i||V,ie=_===null||f===null,H=o.useId(),de=Pe.useLocalization(),U=a=>de.toLanguageString(a,I.messages[a]),$=U(I.checkboxValidation),ue=U(I.checkboxOptionalText),N=D!==void 0?D:p?!!E:!0;t.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(N?"":F||$)},[N,F,$]);const u=t.useCallback((a,s)=>{!m&&!n&&(re(s),!P&&!n&&se(s)),C&&!n&&o.dispatchEvent(C,a,{...d(),value:s},{value:s})},[P,n,C,m,d]),be=t.useCallback(a=>{const s={target:l.current,currentTarget:l.current};u(s,a)},[u]);o.useKendoPaste(l,{fieldName:j,onValueChange:be,enabled:!!j});const me=t.useCallback(a=>{const s=a.target.checked;u(a,s)},[u,i]),ke=t.useCallback(a=>{if(n)return;const{keyCode:s}=a,ye=a.currentTarget.checked;s===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),u(a,!ye))},[n,u]),pe=t.useCallback(a=>{if(n)return;const{keyCode:s}=a;s===o.Keys.space&&a.preventDefault()},[n]),fe=t.useCallback(a=>{y&&!n&&o.dispatchEvent(y,a,d(),void 0)},[y,n,d]),he=t.useCallback(a=>{x&&!n&&o.dispatchEvent(x,a,d(),void 0)},[x,n,d]),ve=o.useDir(l,r.dir),ge=o.classNames("k-checkbox-wrap",Q),A={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[v]||v}`]:v,[`k-rounded-${o.kendoThemeMaps.roundedMap[g]||g}`]:g,"k-indeterminate":ie,"k-disabled":n,"k-invalid k-invalid":!(N||K!==void 0||K===!0)}),ref:l,name:z,id:h||H,disabled:n,required:p!==void 0?p:!1,tabIndex:o.getTabIndex(ae,n),role:"checkbox",checked:!!_,"aria-describedby":k,"aria-labelledby":J,"aria-disabled":n||void 0,"aria-required":p,autoFocus:ne,...oe,onChange:me,onKeyDown:ke,onKeyUp:pe,onFocus:fe,onBlur:he},Ce=f===void 0?t.createElement("input",{...A}):t.createElement("input",{...A,value:w?void 0:f===null?"":f}),S=T!==void 0?t.createElement("label",{className:o.classNames("k-checkbox-label",X),htmlFor:h||H,style:{userSelect:"none"}},T,te&&t.createElement("span",{className:"k-label-optional"},ue)):null,B=t.createElement("span",{className:ge},Ce,Y);return t.createElement(t.Fragment,null,q==="before"?t.createElement("div",{dir:"rtl"},B,S):q==="after"?t.createElement("div",{dir:"ltr"},B,S):t.createElement("div",{dir:ve},B,S))});M.propTypes={checked:e.bool,className:e.string,defaultChecked:e.bool,defaultValue:e.any,dir:e.string,disabled:e.bool,id:e.string,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","none"]),ariaLabelledBy:e.string,ariaDescribedBy:e.string,label:e.any,labelPlacement:e.string,labelOptional:e.bool,name:e.string,tabIndex:e.number,value:e.any,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,autoFocus:e.bool,onChange:e.func,onFocus:e.func,onBlur:e.func};const W={size:void 0,rounded:void 0};M.displayName="KendoCheckbox";exports.Checkbox=M;exports.CheckboxPropsContext=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const xe=require("react"),e=require("prop-types"),o=require("@progress/kendo-react-common"),Pe=require("@progress/kendo-react-intl"),M=require("../messages/index.js");function Ve(c){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const r in c)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(c,r);Object.defineProperty(b,r,k.get?k:{enumerable:!0,get:()=>c[r]})}}return b.default=c,Object.freeze(b)}const t=Ve(xe),J=o.createPropsContext(),O=t.forwardRef((c,b)=>{const r=o.usePropsContext(J,c),{ariaDescribedBy:k,ariaLabelledBy:Q,checked:T,className:X,labelClassName:Y,children:Z,defaultChecked:ee,disabled:n,defaultValue:te,id:h,size:v=G.size,rounded:C=G.rounded,label:g,labelPlacement:q,name:z,labelOptional:ae,onChange:y,onFocus:x,onBlur:P,tabIndex:ne,value:i,required:p,valid:D,validationMessage:F,validityStyles:K,autoFocus:oe,visited:Ee,touched:Ne,modified:Se,...R}=r,l=t.useRef(null),w=t.useCallback(()=>{l.current&&l.current.focus()},[]),d=t.useCallback(()=>({element:l.current,focus:w,get name(){return l.current&&l.current.name}}),[w]);t.useImperativeHandle(b,d);const[le,se]=t.useState(ee),[ce,re]=t.useState(te),j=typeof i=="boolean"||i===null,V=T!==void 0,m=j,E=m?i:ce,N=V?T:m?void 0:le,L=z||h,_=N===void 0&&E,H=_?E:N,f=_||m?i===null?i:void 0:i||E,ie=H===null||f===null,U=o.useId(),de=Pe.useLocalization(),$=a=>de.toLanguageString(a,M.messages[a]),A=$(M.checkboxValidation),ue=$(M.checkboxOptionalText),S=D!==void 0?D:p?!!N:!0;t.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(S?"":F||A)},[S,F,A]);const u=t.useCallback((a,s)=>{!m&&!n&&(re(s),!V&&!n&&se(s)),y&&!n&&o.dispatchEvent(y,a,{...d(),value:s},{value:s})},[V,n,y,m,d]),be=t.useCallback(a=>{const s={target:l.current,currentTarget:l.current};u(s,a)},[u]);o.useKendoPaste(l,{fieldName:L,onValueChange:be,enabled:!!L});const me=t.useCallback(a=>{const s=a.target.checked;u(a,s)},[u,i]),ke=t.useCallback(a=>{if(n)return;const{keyCode:s}=a,ye=a.currentTarget.checked;s===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),u(a,!ye))},[n,u]),pe=t.useCallback(a=>{if(n)return;const{keyCode:s}=a;s===o.Keys.space&&a.preventDefault()},[n]),fe=t.useCallback(a=>{x&&!n&&o.dispatchEvent(x,a,d(),void 0)},[x,n,d]),he=t.useCallback(a=>{P&&!n&&o.dispatchEvent(P,a,d(),void 0)},[P,n,d]),ve=o.useDir(l,r.dir),Ce=o.classNames("k-checkbox-wrap",X),W={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[v]||v}`]:v,[`k-rounded-${o.kendoThemeMaps.roundedMap[C]||C}`]:C,"k-indeterminate":ie,"k-disabled":n,"k-invalid k-invalid":!(S||K!==void 0||K===!0)}),ref:l,name:z,id:h||U,disabled:n,required:p!==void 0?p:!1,tabIndex:o.getTabIndex(ne,n),checked:!!H,"aria-describedby":k,"aria-labelledby":Q,"aria-label":R["aria-label"]||(g===void 0?"Checkbox":void 0),"aria-disabled":n||void 0,"aria-required":p,autoFocus:oe,...R,onChange:me,onKeyDown:ke,onKeyUp:pe,onFocus:fe,onBlur:he},ge=f===void 0?t.createElement("input",{...W}):t.createElement("input",{...W,value:j?void 0:f===null?"":f}),B=g!==void 0?t.createElement("label",{className:o.classNames("k-checkbox-label",Y),htmlFor:h||U,style:{userSelect:"none"}},g,ae&&t.createElement("span",{className:"k-label-optional"},ue)):null,I=t.createElement("span",{className:Ce},ge,Z);return t.createElement(t.Fragment,null,q==="before"?t.createElement("div",{dir:"rtl"},I,B):q==="after"?t.createElement("div",{dir:"ltr"},I,B):t.createElement("div",{dir:ve},I,B))});O.propTypes={checked:e.bool,className:e.string,defaultChecked:e.bool,defaultValue:e.any,dir:e.string,disabled:e.bool,id:e.string,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","none"]),ariaLabelledBy:e.string,ariaDescribedBy:e.string,label:e.any,labelPlacement:e.string,labelOptional:e.bool,name:e.string,tabIndex:e.number,value:e.any,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,autoFocus:e.bool,onChange:e.func,onFocus:e.func,onBlur:e.func};const G={size:void 0,rounded:void 0};O.displayName="KendoCheckbox";exports.Checkbox=O;exports.CheckboxPropsContext=J;

package/checkbox/Checkbox.mjs

@@ -7,63 +7,63 @@
  */
 import * as e from "react";
 import a from "prop-types";
-import { usePropsContext as Ve, useId as Pe, dispatchEvent as P, useKendoPaste as Ee, Keys as $, useDir as Be, classNames as E, getTabIndex as Ne, kendoThemeMaps as A, createPropsContext as Ie } from "@progress/kendo-react-common";
+import { usePropsContext as Ve, useId as Pe, dispatchEvent as E, useKendoPaste as Ee, Keys as A, useDir as Be, classNames as B, getTabIndex as Ne, kendoThemeMaps as W, createPropsContext as Ie } from "@progress/kendo-react-common";
 import { useLocalization as Fe } from "@progress/kendo-react-intl";
 import { messages as ze, checkboxValidation as Ke, checkboxOptionalText as Me } from "../messages/index.mjs";
-const Se = Ie(), j = e.forwardRef((G, J) => {
-  const B = Ve(Se, G), {
-    ariaDescribedBy: Q,
-    ariaLabelledBy: X,
-    checked: N,
-    className: Y,
-    labelClassName: Z,
-    children: _,
-    defaultChecked: ee,
+const Se = Ie(), G = e.forwardRef((J, Q) => {
+  const N = Ve(Se, J), {
+    ariaDescribedBy: X,
+    ariaLabelledBy: Y,
+    checked: I,
+    className: Z,
+    labelClassName: _,
+    children: ee,
+    defaultChecked: ae,
     disabled: o,
-    defaultValue: ae,
+    defaultValue: te,
     id: b,
-    size: m = W.size,
-    rounded: p = W.rounded,
-    label: I,
+    size: m = j.size,
+    rounded: p = j.rounded,
+    label: k,
     labelPlacement: F,
     name: z,
-    labelOptional: te,
-    onChange: k,
-    onFocus: f,
-    onBlur: h,
-    tabIndex: oe,
+    labelOptional: oe,
+    onChange: f,
+    onFocus: h,
+    onBlur: v,
+    tabIndex: ne,
     value: s,
     required: d,
     valid: K,
     validationMessage: M,
     validityStyles: S,
-    autoFocus: ne,
+    autoFocus: le,
     // Removed to support direct use in Form Field component
     visited: De,
     touched: Te,
     modified: we,
-    ...le
-  } = B, n = e.useRef(null), D = e.useCallback(() => {
+    ...D
+  } = N, n = e.useRef(null), T = e.useCallback(() => {
     n.current && n.current.focus();
   }, []), c = e.useCallback(
     () => ({
       element: n.current,
-      focus: D,
+      focus: T,
       get name() {
         return n.current && n.current.name;
       }
     }),
-    [D]
+    [T]
   );
-  e.useImperativeHandle(J, c);
-  const [se, ce] = e.useState(ee), [re, ie] = e.useState(ae), T = typeof s == "boolean" || s === null, v = N !== void 0, i = T, C = i ? s : re, g = v ? N : i ? void 0 : se, w = z || b, L = g === void 0 && C, O = L ? C : g, u = L || i ? s === null ? s : void 0 : s || C, de = O === null || u === null, q = Pe(), ue = Fe(), R = (t) => ue.toLanguageString(t, ze[t]), H = R(Ke), be = R(Me), y = K !== void 0 ? K : d ? !!g : !0;
+  e.useImperativeHandle(Q, c);
+  const [se, ce] = e.useState(ae), [re, ie] = e.useState(te), w = typeof s == "boolean" || s === null, C = I !== void 0, i = w, g = i ? s : re, y = C ? I : i ? void 0 : se, L = z || b, O = y === void 0 && g, q = O ? g : y, u = O || i ? s === null ? s : void 0 : s || g, de = q === null || u === null, R = Pe(), ue = Fe(), H = (t) => ue.toLanguageString(t, ze[t]), U = H(Ke), be = H(Me), x = K !== void 0 ? K : d ? !!y : !0;
   e.useEffect(() => {
-    n.current && n.current.setCustomValidity && n.current.setCustomValidity(y ? "" : M || H);
-  }, [y, M, H]);
+    n.current && n.current.setCustomValidity && n.current.setCustomValidity(x ? "" : M || U);
+  }, [x, M, U]);
   const r = e.useCallback(
     (t, l) => {
-      !i && !o && (ie(l), !v && !o && ce(l)), k && !o && P(
-        k,
+      !i && !o && (ie(l), !C && !o && ce(l)), f && !o && E(
+        f,
         t,
         {
           ...c(),
@@ -72,7 +72,7 @@ const Se = Ie(), j = e.forwardRef((G, J) => {
         { value: l }
       );
     },
-    [v, o, k, i, c]
+    [C, o, f, i, c]
   ), me = e.useCallback(
     (t) => {
       const l = {
@@ -84,9 +84,9 @@ const Se = Ie(), j = e.forwardRef((G, J) => {
     [r]
   );
   Ee(n, {
-    fieldName: w,
+    fieldName: L,
     onValueChange: me,
-    enabled: !!w
+    enabled: !!L
   });
   const pe = e.useCallback(
     (t) => {
@@ -99,7 +99,7 @@ const Se = Ie(), j = e.forwardRef((G, J) => {
       if (o)
         return;
       const { keyCode: l } = t, xe = t.currentTarget.checked;
-      l === $.space && (t.preventDefault(), t.stopPropagation(), r(t, !xe));
+      l === A.space && (t.preventDefault(), t.stopPropagation(), r(t, !xe));
     },
     [o, r]
   ), fe = e.useCallback(
@@ -107,42 +107,42 @@ const Se = Ie(), j = e.forwardRef((G, J) => {
       if (o)
         return;
       const { keyCode: l } = t;
-      l === $.space && t.preventDefault();
+      l === A.space && t.preventDefault();
     },
     [o]
   ), he = e.useCallback(
     (t) => {
-      f && !o && P(f, t, c(), void 0);
+      h && !o && E(h, t, c(), void 0);
     },
-    [f, o, c]
+    [h, o, c]
   ), ve = e.useCallback(
     (t) => {
-      h && !o && P(h, t, c(), void 0);
+      v && !o && E(v, t, c(), void 0);
     },
-    [h, o, c]
-  ), Ce = Be(n, B.dir), ge = E("k-checkbox-wrap", Y), U = {
+    [v, o, c]
+  ), Ce = Be(n, N.dir), ge = B("k-checkbox-wrap", Z), $ = {
     type: "checkbox",
-    className: E("k-checkbox", {
-      [`k-checkbox-${A.sizeMap[m] || m}`]: m,
-      [`k-rounded-${A.roundedMap[p] || p}`]: p,
+    className: B("k-checkbox", {
+      [`k-checkbox-${W.sizeMap[m] || m}`]: m,
+      [`k-rounded-${W.roundedMap[p] || p}`]: p,
       "k-indeterminate": de,
       "k-disabled": o,
-      "k-invalid k-invalid": !(y || S !== void 0 || S === !0)
+      "k-invalid k-invalid": !(x || S !== void 0 || S === !0)
     }),
     ref: n,
     name: z,
-    id: b || q,
+    id: b || R,
     disabled: o,
     required: d !== void 0 ? d : !1,
-    tabIndex: Ne(oe, o),
-    role: "checkbox",
-    checked: !!O,
-    "aria-describedby": Q,
-    "aria-labelledby": X,
+    tabIndex: Ne(ne, o),
+    checked: !!q,
+    "aria-describedby": X,
+    "aria-labelledby": Y,
+    "aria-label": D["aria-label"] || (k === void 0 ? "Checkbox" : void 0),
     "aria-disabled": o || void 0,
     "aria-required": d,
-    autoFocus: ne,
-    ...le,
+    autoFocus: le,
+    ...D,
     onChange: pe,
     onKeyDown: ke,
     onKeyUp: fe,
@@ -151,20 +151,20 @@ const Se = Ie(), j = e.forwardRef((G, J) => {
   }, ye = (
     // removing value prop is required due to bug in react where
     // value set to undefined override default submit value
-    u === void 0 ? /* @__PURE__ */ e.createElement("input", { ...U }) : /* @__PURE__ */ e.createElement("input", { ...U, value: T ? void 0 : u === null ? "" : u })
-  ), x = I !== void 0 ? /* @__PURE__ */ e.createElement(
+    u === void 0 ? /* @__PURE__ */ e.createElement("input", { ...$ }) : /* @__PURE__ */ e.createElement("input", { ...$, value: w ? void 0 : u === null ? "" : u })
+  ), V = k !== void 0 ? /* @__PURE__ */ e.createElement(
     "label",
     {
-      className: E("k-checkbox-label", Z),
-      htmlFor: b || q,
+      className: B("k-checkbox-label", _),
+      htmlFor: b || R,
       style: { userSelect: "none" }
     },
-    I,
-    te && /* @__PURE__ */ e.createElement("span", { className: "k-label-optional" }, be)
-  ) : null, V = /* @__PURE__ */ e.createElement("span", { className: ge }, ye, _);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, F === "before" ? /* @__PURE__ */ e.createElement("div", { dir: "rtl" }, V, x) : F === "after" ? /* @__PURE__ */ e.createElement("div", { dir: "ltr" }, V, x) : /* @__PURE__ */ e.createElement("div", { dir: Ce }, V, x));
+    k,
+    oe && /* @__PURE__ */ e.createElement("span", { className: "k-label-optional" }, be)
+  ) : null, P = /* @__PURE__ */ e.createElement("span", { className: ge }, ye, ee);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, F === "before" ? /* @__PURE__ */ e.createElement("div", { dir: "rtl" }, P, V) : F === "after" ? /* @__PURE__ */ e.createElement("div", { dir: "ltr" }, P, V) : /* @__PURE__ */ e.createElement("div", { dir: Ce }, P, V));
 });
-j.propTypes = {
+G.propTypes = {
   checked: a.bool,
   className: a.string,
   defaultChecked: a.bool,
@@ -191,12 +191,12 @@ j.propTypes = {
   onFocus: a.func,
   onBlur: a.func
 };
-const W = {
+const j = {
   size: void 0,
   rounded: void 0
 };
-j.displayName = "KendoCheckbox";
+G.displayName = "KendoCheckbox";
 export {
-  j as Checkbox,
+  G as Checkbox,
   Se as CheckboxPropsContext
 };

package/colors/ColorGradient.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 w=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),m=require("../package-metadata.js"),k=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),H=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),L=require("./ColorContrastSvg.js"),G=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function D(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=D(w),A="rgba",S="rgba(255, 255, 255, 1)",b=2,C=5,c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),p=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(m.packageMetadata,{component:"ColorGradient"}),this.licenseMessage=r.getLicenseMessage(m.packageMetadata);const s=t.value||t.defaultValue||o.parseColor(S,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.gradientWrapper&&(this.resizeObserver=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(()=>{this.forceUpdate()}),this.resizeObserver&&this.resizeObserver.observe(this.gradientWrapper)),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid),this.resizeObserver&&this.resizeObserver.disconnect()}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const t={};if(!this.state.isFirstRender){const s=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*s.height,a=this.state.hsva.s*s.width;t.top=`${e}px`,t.left=`${a}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),p=v.fitIntoBounds(t,0,a),E=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(E,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){v.isPresent(o.parseColor(t,"hex"))||(t=S);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),i=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=G.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),"aria-disabled":this.props.disabled?"true":void 0,style:{position:"relative",...this.props.style},ref:this.wrapperRef,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:`k-colorgradient-canvas ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>{this.gradientWrapper=s?s.element:void 0}},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(L.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:`k-hsv-controls ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(k.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(g.colorGradientHueSliderLabel,g.messages[g.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(k.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>{this.alphaSlider=s}}))),l.createElement(H,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(r.WatermarkOverlay,{message:this.licenseMessage}))}};c.displayName="ColorGradient",c.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:void 0};let f=c;const R=r.createPropsContext(),y=r.withIdHOC(r.withPropsContext(R,f));y.displayName="KendoReactColorGradient";exports.ColorGradient=y;exports.ColorGradientPropsContext=R;exports.ColorGradientWithoutContext=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),m=require("../package-metadata.js"),S=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),c=require("./utils/color-cache.js"),H=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),G=require("./ColorContrastSvg.js"),k=require("@progress/kendo-react-intl"),d=require("../messages/index.js");function A(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=A(w),D="rgba",R="rgba(255, 255, 255, 1)",b=2,f=5,p=class p extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else c.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),g=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:g})}else c.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,g=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${g}px`,this.moveDragHandle(g,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(m.packageMetadata,{component:"ColorGradient"}),this.licenseMessage=r.getLicenseMessage(m.packageMetadata);const s=t.value||t.defaultValue||o.parseColor(R,D);this.state=Object.assign({},p.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?p.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.gradientWrapper&&(this.resizeObserver=r.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(()=>{this.forceUpdate()}),this.resizeObserver&&this.resizeObserver.observe(this.gradientWrapper)),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||f,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||f),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||f),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||f,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){c.removeCachedColor(this.state.guid),this.resizeObserver&&this.resizeObserver.disconnect()}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const t=k.provideLocalizationService(this),s={};if(!this.state.isFirstRender){const e=this.getGradientRectMetrics(),a=(1-this.state.hsva.v)*e.height,i=this.state.hsva.s*e.width;s.top=`${a}px`,s.left=`${i}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText||`X: ${Math.round(this.state.hsva.s*100)}, Y: ${Math.round((1-this.state.hsva.v)*100)}`,"aria-valuenow":Math.round((1-this.state.hsva.v)*100),"aria-valuemin":0,"aria-valuemax":100,"aria-label":this.props.ariaLabelHSV||t.toLanguageString(d.colorGradientHSVAreaAriaLabel,d.messages[d.colorGradientHSVAreaAriaLabel]),"aria-orientation":"undefined","aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:s,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),g=v.fitIntoBounds(t,0,a),L=Object.assign({},this.state.hsva,{s:g/a,v:1-h/i});this.handleHsvaChange(L,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||c.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){v.isPresent(o.parseColor(t,"hex"))||(t=R);const e=c.getCachedHsva(s,t)||o.getHSV(t),a=c.getCachedRgba(s,t)||o.getRGBA(t),i=c.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=k.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role||"textbox",className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),"aria-disabled":this.props.disabled?"true":void 0,style:{position:"relative",...this.props.style},ref:this.wrapperRef,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.role==="none"?void 0:this.props.ariaLabel||t.toLanguageString(d.colorGradientAriaLabel,d.messages[d.colorGradientAriaLabel]),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:`k-colorgradient-canvas ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>{this.gradientWrapper=s?s.element:void 0}},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(G.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:`k-hsv-controls ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(S.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(d.colorGradientHueSliderLabel,d.messages[d.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(S.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(d.colorGradientAlphaSliderLabel,d.messages[d.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>{this.alphaSlider=s}}))),l.createElement(H,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format,size:this.props.size,fillMode:this.props.fillMode,rounded:this.props.rounded}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(r.WatermarkOverlay,{message:this.licenseMessage}))}};p.displayName="ColorGradient",p.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string,size:n.oneOf(["small","medium","large",null])},p.defaultProps={opacity:!0,role:"textbox",format:"rgba",size:void 0};let C=p;const y=r.createPropsContext(),E=r.withIdHOC(r.withPropsContext(y,C));E.displayName="KendoReactColorGradient";exports.ColorGradient=E;exports.ColorGradientPropsContext=y;exports.ColorGradientWithoutContext=C;