@progress/kendo-react-inputs 15.2.0-develop.1 → 15.2.0-develop.3

package/colors/ColorGradient.mjs

@@ -7,35 +7,35 @@
  */
 import * as r from "react";
 import o from "prop-types";
-import { withIdHOC as F, withPropsContext as N, createPropsContext as _, validatePackage as I, getLicenseMessage as T, canUseDOM as O, Navigation as C, getActiveElement as b, disableNavigatableContainer as k, focusFirstFocusableChild as z, enableNavigatableContainer as V, keepFocusInContainer as B, TABBABLE_ELEMENTS as P, getTabIndex as S, classNames as K, kendoThemeMaps as U, Draggable as W, WatermarkOverlay as $ } from "@progress/kendo-react-common";
+import { withIdHOC as G, withPropsContext as A, createPropsContext as N, validatePackage as _, getLicenseMessage as I, canUseDOM as T, Navigation as C, getActiveElement as u, disableNavigatableContainer as k, focusFirstFocusableChild as O, enableNavigatableContainer as z, keepFocusInContainer as V, TABBABLE_ELEMENTS as B, getTabIndex as S, classNames as P, kendoThemeMaps as K, Draggable as U, WatermarkOverlay as W } from "@progress/kendo-react-common";
 import { packageMetadata as R } from "../package-metadata.mjs";
 import { Slider as y } from "../slider/Slider.mjs";
 import { isPresent as E, fitIntoBounds as w } from "./utils/misc.mjs";
-import { getHSV as m, getRGBA as p, getColorFromHue as c, getColorFromRGBA as X, parseColor as d, getColorFromHSV as Y } from "./utils/color-parser.mjs";
-import { cacheHex as j, cacheRgba as q, removeCachedColor as J, cacheHsva as Q, getCachedHsva as Z, getCachedRgba as ee, getCachedHex as te } from "./utils/color-cache.mjs";
-import se from "./ColorInput.mjs";
-import { ColorContrastLabels as ae } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as ie } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as L } from "@progress/kendo-react-intl";
-import { colorGradientHSVAreaAriaLabel as x, messages as g, colorGradientAriaLabel as H, colorGradientHueSliderLabel as D, colorGradientAlphaSliderLabel as G } from "../messages/index.mjs";
-const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h extends r.Component {
+import { getHSV as b, getRGBA as p, getColorFromHue as c, getColorFromRGBA as $, parseColor as d, getColorFromHSV as X } from "./utils/color-parser.mjs";
+import { cacheHex as Y, cacheRgba as j, removeCachedColor as q, cacheHsva as J, getCachedHsva as Q, getCachedRgba as Z, getCachedHex as ee } from "./utils/color-cache.mjs";
+import te from "./ColorInput.mjs";
+import { ColorContrastLabels as se } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as ae } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as x } from "@progress/kendo-react-intl";
+import { colorGradientHSVAreaAriaLabel as H, messages as m, colorGradientHueSliderLabel as L, colorGradientAlphaSliderLabel as D } from "../messages/index.mjs";
+const ie = "rgba", M = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
   constructor(t) {
     super(t), this.wrapperRef = r.createRef(), this.hsvGradientRef = r.createRef(), this.showLicenseWatermark = !1, this.focus = () => {
       this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
     }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
-        const n = m(s);
+        const n = b(s);
         this.setState({ hsva: n, backgroundColor: c(n.h), rgba: p(s), hex: e });
       } else
-        j(this.state.guid, s, e);
+        Y(this.state.guid, s, e);
       this.dispatchChangeEvent(s, i, i.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const i = X(e);
+      const i = $(e);
       if (this.isUncontrolled) {
-        const n = m(i), l = d(i, "hex");
+        const n = b(i), l = d(i, "hex");
         this.setState({ hsva: n, backgroundColor: c(n.h), rgba: e, hex: l });
       } else
-        q(this.state.guid, i, e);
+        j(this.state.guid, i, e);
       this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
     }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
@@ -69,8 +69,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
     }, this.onKeyDown = (e) => {
       var s;
       (s = this.navigation) == null || s.triggerKeyboardEvent(e);
-    }, this.showLicenseWatermark = !I(R, { component: "ColorGradient" }), this.licenseMessage = T(R);
-    const a = t.value || t.defaultValue || d(M, re);
+    }, this.showLicenseWatermark = !_(R, { component: "ColorGradient" }), this.licenseMessage = I(R);
+    const a = t.value || t.defaultValue || d(M, ie);
     this.state = Object.assign({}, h.getStateFromValue(a), {
       isFirstRender: !0,
       guid: this.props.id
@@ -86,7 +86,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   componentDidMount() {
-    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = O && window.ResizeObserver && new window.ResizeObserver(() => {
+    if (this.setAlphaSliderBackground(this.state.backgroundColor), this.state.isFirstRender && this.setState({ isFirstRender: !1 }), this.gradientWrapper && (this.resizeObserver = T && window.ResizeObserver && new window.ResizeObserver(() => {
       this.forceUpdate();
     }), this.resizeObserver && this.resizeObserver.observe(this.gradientWrapper)), this.wrapperRef && this.hsvGradientRef) {
       let t = 0, a = 0;
@@ -97,16 +97,16 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
         keyboardEvents: {
           keydown: {
             ArrowDown: (e, s, i) => {
-              a = i.shiftKey ? this.props.gradientSliderSmallStep || v : this.props.gradientSliderStep || u, this.onHsvGradientValueChange(e, 0, a);
+              a = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, 0, a);
             },
             ArrowUp: (e, s, i) => {
-              a = i.shiftKey ? -(this.props.gradientSliderSmallStep || v) : -(this.props.gradientSliderStep || u), this.onHsvGradientValueChange(e, 0, a);
+              a = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, 0, a);
             },
             ArrowLeft: (e, s, i) => {
-              t = i.shiftKey ? -(this.props.gradientSliderSmallStep || v) : -(this.props.gradientSliderStep || u), this.onHsvGradientValueChange(e, t, 0);
+              t = i.shiftKey ? -(this.props.gradientSliderSmallStep || g) : -(this.props.gradientSliderStep || v), this.onHsvGradientValueChange(e, t, 0);
             },
             ArrowRight: (e, s, i) => {
-              t = i.shiftKey ? this.props.gradientSliderSmallStep || v : this.props.gradientSliderStep || u, this.onHsvGradientValueChange(e, t, 0);
+              t = i.shiftKey ? this.props.gradientSliderSmallStep || g : this.props.gradientSliderStep || v, this.onHsvGradientValueChange(e, t, 0);
             }
           }
         }
@@ -119,13 +119,13 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
       keyboardEvents: {
         keydown: {
           Tab: (t, a, e) => {
-            b(document) === t ? k(t) : B(e, t, P);
+            u(document) === t ? k(t) : V(e, t, B);
           },
           Enter: (t, a, e) => {
-            b(document) === t && (z(t), V(t));
+            u(document) === t && (O(t), z(t));
           },
           Escape: (t, a, e) => {
-            b(document) !== t && (t.focus(), k(t));
+            u(document) !== t && (t.focus(), k(t));
           }
         }
       }
@@ -135,7 +135,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   componentWillUnmount() {
-    J(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
+    q(this.state.guid), this.resizeObserver && this.resizeObserver.disconnect();
   }
   /**
    * @hidden
@@ -147,7 +147,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   renderRectangleDragHandle() {
-    const t = L(this), a = {};
+    const t = x(this), a = {};
     if (!this.state.isFirstRender) {
       const e = this.getGradientRectMetrics(), s = (1 - this.state.hsva.v) * e.height, i = this.state.hsva.s * e.width;
       a.top = `${s}px`, a.left = `${i}px`;
@@ -162,9 +162,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
         "aria-valuenow": Math.round((1 - this.state.hsva.v) * 100),
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": this.props.ariaLabelHSV || t.toLanguageString(x, g[x]),
+        "aria-label": this.props.ariaLabelHSV || t.toLanguageString(H, m[H]),
         "aria-orientation": "undefined",
-        "aria-disabled": this.props.disabled ? "true" : void 0,
         className: "k-hsv-draghandle k-draghandle",
         style: a,
         onKeyDown: this.onHsvGradientKeyDown
@@ -175,18 +174,18 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   moveDragHandle(t, a) {
-    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = w(a, 0, i), l = w(t, 0, s), A = Object.assign({}, this.state.hsva, {
+    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = w(a, 0, i), l = w(t, 0, s), F = Object.assign({}, this.state.hsva, {
       s: l / s,
       v: 1 - n / i
     });
-    this.handleHsvaChange(A, {}, {});
+    this.handleHsvaChange(F, {}, {});
   }
   /**
    * @hidden
    */
   handleHsvaChange(t, a, e) {
-    const s = Y(t), i = d(s, "hex");
-    this.isUncontrolled || Q(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: c(t.h), rgba: p(s), hex: i }), this.dispatchChangeEvent(s, a, e);
+    const s = X(t), i = d(s, "hex");
+    this.isUncontrolled || J(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: c(t.h), rgba: p(s), hex: i }), this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
@@ -204,7 +203,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    */
   static getStateFromValue(t, a) {
     E(d(t, "hex")) || (t = M);
-    const e = Z(a, t) || m(t), s = ee(a, t) || p(t), i = te(a, t) || d(t, "hex"), n = c(e.h);
+    const e = Q(a, t) || b(t), s = Z(a, t) || p(t), i = ee(a, t) || d(t, "hex"), n = c(e.h);
     return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
@@ -229,16 +228,16 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
    * @hidden
    */
   render() {
-    const t = L(this);
+    const t = x(this);
     return /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
         role: this.props.role || "textbox",
-        className: K(
+        className: P(
           "k-colorgradient",
           {
-            [`k-colorgradient-${U.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-colorgradient-${K.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-disabled": this.props.disabled
           },
           this.props.className
@@ -247,14 +246,14 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
         style: { position: "relative", ...this.props.style },
         ref: this.wrapperRef,
         tabIndex: S(this.props.tabIndex, this.props.disabled),
-        "aria-label": this.props.role === "none" ? void 0 : this.props.ariaLabel || t.toLanguageString(H, g[H]),
+        "aria-label": this.props.role === "none" ? void 0 : this.props.ariaLabel,
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown
       },
       /* @__PURE__ */ r.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
-        W,
+        U,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
@@ -272,7 +271,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
           this.renderRectangleDragHandle()
         )
       ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
-        ie,
+        ae,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
@@ -291,8 +290,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
           className: "k-hue-slider k-colorgradient-slider",
           disabled: this.props.disabled,
           ariaLabel: t.toLanguageString(
-            D,
-            g[D]
+            L,
+            m[L]
           )
         }
       ), this.props.opacity && /* @__PURE__ */ r.createElement(
@@ -305,8 +304,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
           max: 100,
           step: 1,
           ariaLabel: t.toLanguageString(
-            G,
-            g[G]
+            D,
+            m[D]
           ),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
@@ -317,7 +316,7 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
         }
       ))),
       /* @__PURE__ */ r.createElement(
-        se,
+        te,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -331,8 +330,8 @@ const re = "rgba", M = "rgba(255, 255, 255, 1)", v = 2, u = 5, h = class h exten
           rounded: this.props.rounded
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ r.createElement(ae, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba }),
-      this.showLicenseWatermark && /* @__PURE__ */ r.createElement($, { message: this.licenseMessage })
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(se, { bgColor: p(this.props.backgroundColor), rgba: this.state.rgba }),
+      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(W, { message: this.licenseMessage })
     );
   }
 };
@@ -360,15 +359,15 @@ h.displayName = "ColorGradient", h.propTypes = {
   size: void 0
 };
 let f = h;
-const oe = _(), ne = F(
-  N(
-    oe,
+const re = N(), oe = G(
+  A(
+    re,
     f
   )
 );
-ne.displayName = "KendoReactColorGradient";
+oe.displayName = "KendoReactColorGradient";
 export {
-  ne as ColorGradient,
-  oe as ColorGradientPropsContext,
+  oe as ColorGradient,
+  re as ColorGradientPropsContext,
   f as ColorGradientWithoutContext
 };

package/colors/ColorPalette.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 n=require("react"),s=require("prop-types"),se=require("./utils/color-palette.service.js"),w=require("@progress/kendo-react-common"),ne=require("./models/palette-presets.js"),M=require("./utils/color-parser.js"),ae=require("@progress/kendo-react-intl"),O=require("../messages/index.js");function ce(c){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const P in c)if(P!=="default"){const E=Object.getOwnPropertyDescriptor(c,P);Object.defineProperty(p,P,E.get?E:{enumerable:!0,get:()=>c[P]})}}return p.default=c,Object.freeze(p)}const k=ce(n),B=24,j=10,V="office",v={palette:V,columns:j,tileSize:B},H=w.createPropsContext(),ie=c=>{if(Array.isArray(c))return c;if(typeof c=="string"){const p=ne.PALETTEPRESETS[c];if(p)return p.colors}return[]},D=k.forwardRef((c,p)=>{const P=w.usePropsContext(H,c),{palette:E=v.palette,columns:F=v.columns,tileSize:u=v.tileSize,value:x,defaultValue:K,disabled:d=!1,tabIndex:W,onChange:h,onFocus:A,className:Z,size:I,id:G,ariaLabelledBy:J,ariaDescribedBy:Q}=P,S=n.useRef(null),X=n.useRef({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),_=F!=null?F:v.columns,b=n.useMemo(()=>ie(E),[E]),t=n.useMemo(()=>{const o=new se.ColorPaletteService;return o.setColorMatrix(b,_),o},[b,_]),[g,N]=n.useState(()=>x!==void 0?x:K||""),[L,R]=n.useState(""),y=x!==void 0;n.useEffect(()=>{y&&N(x)},[x,y]);const Y=n.useCallback(o=>{if(d||b.length===0)return;const f=g||b[0];R(f),A&&A(o)},[d,b,g,A]),ee=n.useCallback(()=>{R("")},[]),oe=n.useCallback(o=>{if(d)return;const{key:f}=o,r=()=>L||g||b[0],m=(l,e)=>l<0?e:l>e?0:l;switch(f){case"ArrowRight":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col+1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowLeft":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col-1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowDown":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e){const C=t.colorRows.length-1,a=m(e.row+1,C),i=Math.min(e.col,t.colorRows[a].length-1),T=t.colorRows[a][i];T&&R(T)}}break;case"ArrowUp":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e){const C=t.colorRows.length-1,a=m(e.row-1,C),i=Math.min(e.col,t.colorRows[a].length-1),T=t.colorRows[a][i];T&&R(T)}}break;case"Enter":o.preventDefault();{const l=r();if(l&&(y||N(l),h)){const e=M.parseColor(l,"rgba");w.dispatchEvent(h,o,null,{value:l,rgbaValue:e||""})}}break}},[d,L,g,b,t,y,h]),U=n.useCallback((o,f)=>{if(d)return;const r=o;if(y||N(r),h){const m=M.parseColor(r,"rgba");w.dispatchEvent(h,f,null,{value:r,rgbaValue:m||""})}},[d,h,y]),q=n.useCallback((o,f)=>o.map((r,m)=>{const l=g&&r.toLowerCase()===g.toLowerCase(),e=L&&r.toLowerCase()===L.toLowerCase(),C=w.classNames("k-colorpalette-tile",{"k-selected":l,"k-focus":e}),a={backgroundColor:r};return typeof u=="number"?(a.width=`${u}px`,a.height=`${u}px`):u&&typeof u=="object"&&("width"in u&&(a.width=`${u.width}px`),"height"in u&&(a.height=`${u.height}px`)),k.createElement("td",{key:r,role:"gridcell",className:C,style:a,"aria-label":r,"aria-selected":l?"true":void 0,onClick:i=>U(r,i)})}),[g,L,u,U]),te=n.useCallback(()=>t.colorRows.map((f,r)=>k.createElement("tr",{key:f[0]||r,role:"row"},q(f,r))),[t,q]),z=n.useCallback(()=>({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),[]);n.useImperativeHandle(X,z),n.useImperativeHandle(p,z);const re=w.classNames("k-colorpalette",Z,{"k-disabled":d,"k-colorpalette-sm":I==="small","k-colorpalette-md":I==="medium","k-colorpalette-lg":I==="large"}),le=ae.useLocalization();return k.createElement("div",{ref:S,role:"grid",className:re,tabIndex:w.getTabIndex(W,d),id:G,"aria-label":le.toLanguageString(O.colorPaletteAriaLabel,O.messages[O.colorPaletteAriaLabel]),"aria-labelledby":J,"aria-describedby":Q,"aria-disabled":d?"true":void 0,onFocus:Y,onBlur:ee,onKeyDown:oe},k.createElement("table",{className:"k-colorpalette-table",role:"none"},k.createElement("tbody",null,te())))});D.displayName="ColorPalette";D.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string,size:s.oneOf(["small","medium","large"])};const $=w.withIdHOC(D);$.displayName="KendoReactColorPalette";const ue=D;exports.ColorPalette=$;exports.ColorPalettePropsContext=H;exports.ColorPaletteWithoutContext=ue;exports.DEFAULT_COLUMNS_COUNT=j;exports.DEFAULT_PRESET=V;exports.DEFAULT_TILE_SIZE=B;exports.defaultColorPaletteProps=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),s=require("prop-types"),le=require("./utils/color-palette.service.js"),w=require("@progress/kendo-react-common"),se=require("./models/palette-presets.js"),q=require("./utils/color-parser.js");function ne(c){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const h in c)if(h!=="default"){const E=Object.getOwnPropertyDescriptor(c,h);Object.defineProperty(p,h,E.get?E:{enumerable:!0,get:()=>c[h]})}}return p.default=c,Object.freeze(p)}const k=ne(n),z=24,B=10,j="office",L={palette:j,columns:B,tileSize:z},V=w.createPropsContext(),ae=c=>{if(Array.isArray(c))return c;if(typeof c=="string"){const p=se.PALETTEPRESETS[c];if(p)return p.colors}return[]},D=k.forwardRef((c,p)=>{const h=w.usePropsContext(V,c),{palette:E=L.palette,columns:F=L.columns,tileSize:u=L.tileSize,value:x,defaultValue:$,disabled:d=!1,tabIndex:K,onChange:P,onFocus:I,className:W,size:N,id:Z,ariaLabelledBy:G,ariaDescribedBy:J,ariaLabel:Q}=h,S=n.useRef(null),X=n.useRef({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),_=F!=null?F:L.columns,b=n.useMemo(()=>ae(E),[E]),t=n.useMemo(()=>{const o=new le.ColorPaletteService;return o.setColorMatrix(b,_),o},[b,_]),[g,O]=n.useState(()=>x!==void 0?x:$||""),[T,R]=n.useState(""),y=x!==void 0;n.useEffect(()=>{y&&O(x)},[x,y]);const Y=n.useCallback(o=>{if(d||b.length===0)return;const f=g||b[0];R(f),I&&I(o)},[d,b,g,I]),ee=n.useCallback(()=>{R("")},[]),oe=n.useCallback(o=>{if(d)return;const{key:f}=o,r=()=>T||g||b[0],m=(l,e)=>l<0?e:l>e?0:l;switch(f){case"ArrowRight":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col+1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowLeft":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e&&t.colorRows[e.row]){const C=t.colorRows[e.row].length-1,a=m(e.col-1,C),i=t.colorRows[e.row][a];i&&R(i)}}break;case"ArrowDown":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e){const C=t.colorRows.length-1,a=m(e.row+1,C),i=Math.min(e.col,t.colorRows[a].length-1),v=t.colorRows[a][i];v&&R(v)}}break;case"ArrowUp":o.preventDefault();{const l=r(),e=t.getCellCoordsFor(l);if(e){const C=t.colorRows.length-1,a=m(e.row-1,C),i=Math.min(e.col,t.colorRows[a].length-1),v=t.colorRows[a][i];v&&R(v)}}break;case"Enter":o.preventDefault();{const l=r();if(l&&(y||O(l),P)){const e=q.parseColor(l,"rgba");w.dispatchEvent(P,o,null,{value:l,rgbaValue:e||""})}}break}},[d,T,g,b,t,y,P]),A=n.useCallback((o,f)=>{if(d)return;const r=o;if(y||O(r),P){const m=q.parseColor(r,"rgba");w.dispatchEvent(P,f,null,{value:r,rgbaValue:m||""})}},[d,P,y]),U=n.useCallback((o,f)=>o.map((r,m)=>{const l=g&&r.toLowerCase()===g.toLowerCase(),e=T&&r.toLowerCase()===T.toLowerCase(),C=w.classNames("k-colorpalette-tile",{"k-selected":l,"k-focus":e}),a={backgroundColor:r};return typeof u=="number"?(a.width=`${u}px`,a.height=`${u}px`):u&&typeof u=="object"&&("width"in u&&(a.width=`${u.width}px`),"height"in u&&(a.height=`${u.height}px`)),k.createElement("td",{key:r,role:"gridcell",className:C,style:a,"aria-label":r,"aria-selected":l?"true":void 0,onClick:i=>A(r,i)})}),[g,T,u,A]),te=n.useCallback(()=>t.colorRows.map((f,r)=>k.createElement("tr",{key:f[0]||r,role:"row"},U(f,r))),[t,U]),M=n.useCallback(()=>({focus:()=>{var o;(o=S.current)==null||o.focus()},wrapperRef:S}),[]);n.useImperativeHandle(X,M),n.useImperativeHandle(p,M);const re=w.classNames("k-colorpalette",W,{"k-disabled":d,"k-colorpalette-sm":N==="small","k-colorpalette-md":N==="medium","k-colorpalette-lg":N==="large"});return k.createElement("div",{ref:S,role:"grid",className:re,tabIndex:w.getTabIndex(K,d),id:Z,"aria-label":Q,"aria-labelledby":G,"aria-describedby":J,"aria-disabled":d?"true":void 0,onFocus:Y,onBlur:ee,onKeyDown:oe},k.createElement("table",{className:"k-colorpalette-table",role:"none"},k.createElement("tbody",null,te())))});D.displayName="ColorPalette";D.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string,size:s.oneOf(["small","medium","large"])};const H=w.withIdHOC(D);H.displayName="KendoReactColorPalette";const ce=D;exports.ColorPalette=H;exports.ColorPalettePropsContext=V;exports.ColorPaletteWithoutContext=ce;exports.DEFAULT_COLUMNS_COUNT=B;exports.DEFAULT_PRESET=j;exports.DEFAULT_TILE_SIZE=z;exports.defaultColorPaletteProps=L;

package/colors/ColorPalette.mjs

@@ -6,78 +6,77 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as R from "react";
-import { useRef as O, useMemo as U, useState as V, useEffect as le, useCallback as p, useImperativeHandle as M } from "react";
+import { useRef as O, useMemo as U, useState as V, useEffect as se, useCallback as p, useImperativeHandle as M } from "react";
 import l from "prop-types";
-import { ColorPaletteService as ne } from "./utils/color-palette.service.mjs";
-import { withIdHOC as ae, createPropsContext as ce, usePropsContext as ie, dispatchEvent as _, classNames as H, getTabIndex as ue } from "@progress/kendo-react-common";
-import { PALETTEPRESETS as de } from "./models/palette-presets.mjs";
+import { ColorPaletteService as le } from "./utils/color-palette.service.mjs";
+import { withIdHOC as ne, createPropsContext as ae, usePropsContext as ce, dispatchEvent as _, classNames as H, getTabIndex as ie } from "@progress/kendo-react-common";
+import { PALETTEPRESETS as ue } from "./models/palette-presets.mjs";
 import { parseColor as $ } from "./utils/color-parser.mjs";
-import { useLocalization as fe } from "@progress/kendo-react-intl";
-import { colorPaletteAriaLabel as K, messages as me } from "../messages/index.mjs";
-const Ce = 24, pe = 10, we = "office", L = {
-  palette: we,
-  columns: pe,
-  tileSize: Ce
-}, ge = ce(), be = (w) => {
-  if (Array.isArray(w))
-    return w;
-  if (typeof w == "string") {
-    const E = de[w];
-    if (E)
-      return E.colors;
+const de = 24, fe = 10, Ce = "office", v = {
+  palette: Ce,
+  columns: fe,
+  tileSize: de
+}, we = ae(), pe = (m) => {
+  if (Array.isArray(m))
+    return m;
+  if (typeof m == "string") {
+    const P = ue[m];
+    if (P)
+      return P.colors;
   }
   return [];
-}, v = R.forwardRef((w, E) => {
-  const j = ie(ge, w), {
-    palette: A = L.palette,
-    columns: F = L.columns,
-    tileSize: c = L.tileSize,
+}, F = R.forwardRef((m, P) => {
+  const K = ce(we, m), {
+    palette: I = v.palette,
+    columns: L = v.columns,
+    tileSize: c = v.tileSize,
     value: y,
-    defaultValue: q,
+    defaultValue: j,
     disabled: i = !1,
-    tabIndex: W,
+    tabIndex: q,
     onChange: g,
     onFocus: S,
-    className: Z,
+    className: W,
     size: D,
-    id: G,
-    ariaLabelledBy: J,
-    ariaDescribedBy: Q
-  } = j, k = O(null), X = O({
+    id: Z,
+    ariaLabelledBy: G,
+    ariaDescribedBy: J,
+    ariaLabel: Q
+  } = K, k = O(null), X = O({
     focus: () => {
       var o;
       (o = k.current) == null || o.focus();
     },
     wrapperRef: k
-  }), I = F != null ? F : L.columns, f = U(() => be(A), [A]), t = U(() => {
-    const o = new ne();
-    return o.setColorMatrix(f, I), o;
-  }, [f, I]), [m, T] = V(() => y !== void 0 ? y : q || ""), [x, b] = V(""), h = y !== void 0;
-  le(() => {
+  }), A = L != null ? L : v.columns, f = U(() => pe(I), [I]), t = U(() => {
+    const o = new le();
+    return o.setColorMatrix(f, A), o;
+  }, [f, A]), [C, T] = V(() => y !== void 0 ? y : j || ""), [x, b] = V(""), h = y !== void 0;
+  se(() => {
     h && T(y);
   }, [y, h]);
   const Y = p(
     (o) => {
       if (i || f.length === 0)
         return;
-      const u = m || f[0];
+      const u = C || f[0];
       b(u), S && S(o);
     },
-    [i, f, m, S]
+    [i, f, C, S]
   ), ee = p(() => {
     b("");
   }, []), oe = p(
     (o) => {
       if (i)
         return;
-      const { key: u } = o, r = () => x || m || f[0], C = (s, e) => s < 0 ? e : s > e ? 0 : s;
+      const { key: u } = o, r = () => x || C || f[0], w = (s, e) => s < 0 ? e : s > e ? 0 : s;
       switch (u) {
         case "ArrowRight":
           o.preventDefault();
           {
             const s = r(), e = t.getCellCoordsFor(s);
             if (e && t.colorRows[e.row]) {
-              const d = t.colorRows[e.row].length - 1, n = C(e.col + 1, d), a = t.colorRows[e.row][n];
+              const d = t.colorRows[e.row].length - 1, n = w(e.col + 1, d), a = t.colorRows[e.row][n];
               a && b(a);
             }
           }
@@ -87,7 +86,7 @@ const Ce = 24, pe = 10, we = "office", L = {
           {
             const s = r(), e = t.getCellCoordsFor(s);
             if (e && t.colorRows[e.row]) {
-              const d = t.colorRows[e.row].length - 1, n = C(e.col - 1, d), a = t.colorRows[e.row][n];
+              const d = t.colorRows[e.row].length - 1, n = w(e.col - 1, d), a = t.colorRows[e.row][n];
               a && b(a);
             }
           }
@@ -97,8 +96,8 @@ const Ce = 24, pe = 10, we = "office", L = {
           {
             const s = r(), e = t.getCellCoordsFor(s);
             if (e) {
-              const d = t.colorRows.length - 1, n = C(e.row + 1, d), a = Math.min(e.col, t.colorRows[n].length - 1), P = t.colorRows[n][a];
-              P && b(P);
+              const d = t.colorRows.length - 1, n = w(e.row + 1, d), a = Math.min(e.col, t.colorRows[n].length - 1), E = t.colorRows[n][a];
+              E && b(E);
             }
           }
           break;
@@ -107,8 +106,8 @@ const Ce = 24, pe = 10, we = "office", L = {
           {
             const s = r(), e = t.getCellCoordsFor(s);
             if (e) {
-              const d = t.colorRows.length - 1, n = C(e.row - 1, d), a = Math.min(e.col, t.colorRows[n].length - 1), P = t.colorRows[n][a];
-              P && b(P);
+              const d = t.colorRows.length - 1, n = w(e.row - 1, d), a = Math.min(e.col, t.colorRows[n].length - 1), E = t.colorRows[n][a];
+              E && b(E);
             }
           }
           break;
@@ -127,24 +126,24 @@ const Ce = 24, pe = 10, we = "office", L = {
           break;
       }
     },
-    [i, x, m, f, t, h, g]
+    [i, x, C, f, t, h, g]
   ), N = p(
     (o, u) => {
       if (i)
         return;
       const r = o;
       if (h || T(r), g) {
-        const C = $(r, "rgba");
+        const w = $(r, "rgba");
         _(g, u, null, {
           value: r,
-          rgbaValue: C || ""
+          rgbaValue: w || ""
         });
       }
     },
     [i, g, h]
-  ), z = p(
-    (o, u) => o.map((r, C) => {
-      const s = m && r.toLowerCase() === m.toLowerCase(), e = x && r.toLowerCase() === x.toLowerCase(), d = H("k-colorpalette-tile", {
+  ), B = p(
+    (o, u) => o.map((r, w) => {
+      const s = C && r.toLowerCase() === C.toLowerCase(), e = x && r.toLowerCase() === x.toLowerCase(), d = H("k-colorpalette-tile", {
         "k-selected": s,
         "k-focus": e
       }), n = {
@@ -163,8 +162,8 @@ const Ce = 24, pe = 10, we = "office", L = {
         }
       );
     }),
-    [m, x, c, N]
-  ), te = p(() => t.colorRows.map((u, r) => /* @__PURE__ */ R.createElement("tr", { key: u[0] || r, role: "row" }, z(u, r))), [t, z]), B = p(
+    [C, x, c, N]
+  ), te = p(() => t.colorRows.map((u, r) => /* @__PURE__ */ R.createElement("tr", { key: u[0] || r, role: "row" }, B(u, r))), [t, B]), z = p(
     () => ({
       focus: () => {
         var o;
@@ -174,24 +173,24 @@ const Ce = 24, pe = 10, we = "office", L = {
     }),
     []
   );
-  M(X, B), M(E, B);
-  const re = H("k-colorpalette", Z, {
+  M(X, z), M(P, z);
+  const re = H("k-colorpalette", W, {
     "k-disabled": i,
     "k-colorpalette-sm": D === "small",
     "k-colorpalette-md": D === "medium",
     "k-colorpalette-lg": D === "large"
-  }), se = fe();
+  });
   return /* @__PURE__ */ R.createElement(
     "div",
     {
       ref: k,
       role: "grid",
       className: re,
-      tabIndex: ue(W, i),
-      id: G,
-      "aria-label": se.toLanguageString(K, me[K]),
-      "aria-labelledby": J,
-      "aria-describedby": Q,
+      tabIndex: ie(q, i),
+      id: Z,
+      "aria-label": Q,
+      "aria-labelledby": G,
+      "aria-describedby": J,
       "aria-disabled": i ? "true" : void 0,
       onFocus: Y,
       onBlur: ee,
@@ -200,8 +199,8 @@ const Ce = 24, pe = 10, we = "office", L = {
     /* @__PURE__ */ R.createElement("table", { className: "k-colorpalette-table", role: "none" }, /* @__PURE__ */ R.createElement("tbody", null, te()))
   );
 });
-v.displayName = "ColorPalette";
-v.propTypes = {
+F.displayName = "ColorPalette";
+F.propTypes = {
   palette: l.oneOfType([l.arrayOf(l.string.isRequired), l.string]),
   columns: l.number,
   tileSize: l.any,
@@ -217,17 +216,17 @@ v.propTypes = {
   className: l.string,
   size: l.oneOf(["small", "medium", "large"])
 };
-const he = ae(
-  v
+const me = ne(
+  F
 );
-he.displayName = "KendoReactColorPalette";
-const Fe = v;
+me.displayName = "KendoReactColorPalette";
+const xe = F;
 export {
-  he as ColorPalette,
-  ge as ColorPalettePropsContext,
-  Fe as ColorPaletteWithoutContext,
-  pe as DEFAULT_COLUMNS_COUNT,
-  we as DEFAULT_PRESET,
-  Ce as DEFAULT_TILE_SIZE,
-  L as defaultColorPaletteProps
+  me as ColorPalette,
+  we as ColorPalettePropsContext,
+  xe as ColorPaletteWithoutContext,
+  fe as DEFAULT_COLUMNS_COUNT,
+  Ce as DEFAULT_PRESET,
+  de as DEFAULT_TILE_SIZE,
+  v as defaultColorPaletteProps
 };

package/colors/ColorPicker.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 Me=require("react"),r=require("prop-types"),n=require("@progress/kendo-react-common"),be=require("../package-metadata.js"),Ve=require("./Picker.js"),He=require("./ColorGradient.js"),Y=require("./ColorPalette.js"),q=require("./FlatColorPicker.js"),We=require("@progress/kendo-react-buttons"),Ue=require("@progress/kendo-svg-icons"),d=require("../messages/index.js"),je=require("@progress/kendo-react-intl"),Ge=require("../common/AdaptiveMode.js"),Ke=require("@progress/kendo-react-layout");function $e(g){const T=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const P in g)if(P!=="default"){const F=Object.getOwnPropertyDescriptor(g,P);Object.defineProperty(T,P,F.get?F:{enumerable:!0,get:()=>g[P]})}}return T.default=g,Object.freeze(T)}const t=$e(Me),Ze={opacity:!0},Je={palette:Y.DEFAULT_PRESET,tileSize:Y.DEFAULT_TILE_SIZE},X=g=>g!==void 0,Ee=n.createPropsContext(),ee=t.forwardRef((g,T)=>{var fe,ge;const P=!n.validatePackage(be.packageMetadata,{component:"ColorPicker"}),F=n.getLicenseMessage(be.packageMetadata),l=n.usePropsContext(Ee,g),_=je.useLocalization(),te=n.useAdaptiveModeContext(),{size:p=w.size,rounded:C=w.rounded,fillMode:M=w.fillMode,gradientSettings:y=w.gradientSettings,paletteSettings:R=w.paletteSettings,flatColorPickerSettings:A,view:v=l.views?void 0:w.view,views:u=v?void 0:w.views,activeView:ne,popupSettings:b,valid:we,disabled:V,tabIndex:Pe,icon:H,svgIcon:W,iconClassName:O,onChange:U,onFocus:j,onBlur:G,onActiveColorClick:K,className:ye,adaptive:Se,adaptiveTitle:ae=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle]),adaptiveSubtitle:oe,showButtons:S=!0}=l,c=t.useRef(null),I=t.useRef(null),L=t.useRef(null),m=t.useRef(null),h=t.useRef(void 0),re=t.useRef(null),[he,le]=t.useState(!1),[Te,_e]=t.useState(l.defaultValue||void 0),[Re,Ae]=t.useState(!1),[D,Ie]=t.useState(),$=X(l.value),E=X(l.open),i=$?l.value:Te,f=E?l.open:Re,ie=t.useRef(i),z=t.useCallback(()=>{c.current&&c.current.focus()},[]);t.useImperativeHandle(T,()=>({element:c.current,actionElement:re.current,value:i,focus:z}),[i,z]);const ce=t.useRef(null);t.useImperativeHandle(ce,()=>({element:c.current,actionElement:re.current,value:i,focus:z}),[i,z]),n.useWebMcpRegister("colorpicker",ce,l,l.webMcp);const Z=!!(D&&te&&D<=te.medium&&Se);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(xe.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const o=t.useCallback((e,s)=>{E||(!e&&!s&&c&&c.current&&c.current.focus(),Ae(e))},[E]),se=t.useMemo(()=>new n.Navigation({root:c,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,s,a)=>{o(!1)},Enter:(e,s,a)=>{!E&&e===c.current&&(a.preventDefault(),a.stopPropagation(),o(!0))},ArrowDown:(e,s,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),o(!0))},ArrowUp:(e,s,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),o(!1))},Tab:(e,s,a)=>{var B,ve,ke;if(n.getActiveElement(document)!==c.current){const me=(B=L.current)==null?void 0:B.wrapperRef.current,x=(ve=I.current)==null?void 0:ve.wrapperRef.current,Ce=(ke=m.current)==null?void 0:ke.element;v==="palette"&&me?n.keepFocusInContainer(a,me):v==="gradient"&&x?n.keepFocusInContainer(a,x):v==="combo"&&x?n.keepFocusInContainer(a,x.parentElement):u&&Ce&&n.keepFocusInContainer(a,Ce)}}}}}),[o,E]),Be=t.useCallback(se.triggerKeyboardEvent.bind(se),[]),Fe=t.useCallback(()=>{E||(I.current&&I.current.wrapperRef.current?n.focusFirstFocusableChild(I.current.wrapperRef.current):L.current?L.current.focus():m.current&&m.current.element&&n.focusFirstFocusableChild(m.current.element))},[E]),N=e=>ie.current=e,ue=t.useCallback(e=>{const s={value:ie.current,nativeEvent:e.nativeEvent,syntheticEvent:e};k(s),o(!f,!0)},[f]),J=t.useCallback(()=>{o(!1,!0)},[o]),Oe=t.useCallback(e=>{K&&K.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:{element:c.current,value:i}})},[K,i]),Le=t.useCallback(e=>{h.current?(clearTimeout(h.current),h.current=void 0):(le(!0),Z&&!f&&o(!0)),j&&j.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[Z,j,f,o]),De=t.useCallback(()=>{o(!1,!0),le(!1),h.current=void 0},[]),ze=t.useCallback(e=>{clearTimeout(h.current),h.current=window.setTimeout(De),G&&G.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[G]),k=t.useCallback((e,s)=>{var B;const a=s?e.rgbaValue||"":(B=e.value)!=null?B:"";$||_e(a),U&&U.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:c.current,value:a}}),o(!1)},[$,U]),de=t.useCallback(e=>k(e,!0),[X,k]),Q=t.useCallback(e=>t.createElement(t.Fragment,null,(v==="combo"||v==="gradient")&&t.createElement(He.ColorGradient,{...y,_adaptive:e,ref:I,isInsidePopup:!0,role:"none",ariaLabel:void 0,size:e?"large":p,value:i,onChange:k}),(v==="combo"||v==="palette")&&t.createElement(Y.ColorPalette,{...R,ref:L,size:e?"large":p,value:i,onChange:de}),u&&u[0]==="gradient"&&u[1]==="palette"&&t.createElement(q.FlatColorPicker,{...A,_paletteSettings:R,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["gradient","palette"],activeView:ne,setOpen:o,showButtons:e?!1:S,value:i,onChange:k,setAdaptiveModeValue:N}),u&&u[0]==="palette"&&u[1]==="gradient"&&t.createElement(q.FlatColorPicker,{...A,_paletteSettings:R,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["palette","gradient"],setOpen:o,showButtons:e?!1:S,value:i,onChange:k,setAdaptiveModeValue:N}),u&&u.includes("gradient")&&!u.includes("palette")&&t.createElement(q.FlatColorPicker,{...A,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["gradient"],showButtons:e?!1:S,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:N}),u&&u.includes("palette")&&!u.includes("gradient")&&t.createElement(q.FlatColorPicker,{...A,_paletteSettings:R,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["palette"],showButtons:e?!1:S,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:N}),P&&t.createElement(n.WatermarkOverlay,{message:F})),[ne,M,A,y,k,de,R,o,p,i,v,u]),Ne=t.useCallback(()=>{var s;const e={animation:!!((s=b==null?void 0:b.animate)==null||s),title:ae,subTitle:oe,expand:f,onClose:J,windowWidth:D,footer:S?{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:J,applyText:_.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:ue}:void 0};return t.createElement(Ge.AdaptiveMode,{...e},t.createElement(Ke.ActionSheetContent,null,Q(!0)))},[b==null?void 0:b.animate,ae,oe,f,J,D,S,_,ue,Q]),xe=t.useCallback(e=>{for(const s of e)Ie(s.target.clientWidth)},[]),pe=n.useDir(c,l.dir),qe=we!==!1;return t.createElement("span",{id:l.id,role:"combobox","aria-label":l.ariaLabel,"aria-labelledby":l.ariaLabelledBy,"aria-describedby":l.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":f,"aria-controls":f?`k-colorpicker-popup-${(fe=l.id)!=null?fe:0}`:void 0,"aria-disabled":V?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-picker-${M}`]:M,[`k-rounded-${n.kendoThemeMaps.roundedMap[C]||C}`]:C,"k-invalid":!qe,"k-disabled":V,"k-focus":he,className:ye}),ref:c,tabIndex:n.getTabIndex(Pe,V),title:l.title,onKeyDown:Be,onFocus:Le,onBlur:ze,dir:pe},t.createElement(Ve.Picker,{dir:pe,open:f,onOpen:Fe,popupAnchor:c.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(ge=l.id)!=null?ge:0}`,...b},input:t.createElement("span",{onClick:Oe,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!i,"k-icon-color-preview":H||W||O})},O&&t.createElement("span",{className:n.classNames("k-color-preview-icon",O)}),!O&&(H||W)&&t.createElement(n.IconWrap,{name:H,icon:W}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:i}}))),button:t.createElement(We.Button,{tabIndex:-1,type:"button",onClick:()=>o(!f),className:"k-input-button",icon:"chevron-down",svgIcon:Ue.chevronDownIcon,size:p,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:Q(!1),_mobileMode:Z,_actionSheet:Ne()}))});ee.propTypes={value:r.string,defaultValue:r.string,disabled:r.bool,view:r.oneOf(["gradient","palette","combo"]),views:r.arrayOf(r.oneOf(["gradient","palette"])),dir:r.string,id:r.string,icon:r.string,svgIcon:n.svgIconPropType,ariaLabelledBy:r.string,ariaDescribedBy:r.string,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large","full","none"]),fillMode:r.oneOf(["solid","flat","outline"]),className:r.string,adaptive:r.bool,adaptiveTitle:r.string,adaptiveSubtitle:r.string};const w={size:void 0,rounded:void 0,fillMode:void 0,view:"palette",views:["gradient","palette"],gradientSettings:Ze,paletteSettings:Je};ee.displayName="KendoColorPicker";exports.ColorPicker=ee;exports.ColorPickerPropsContext=Ee;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Me=require("react"),l=require("prop-types"),a=require("@progress/kendo-react-common"),be=require("../package-metadata.js"),Ve=require("./Picker.js"),He=require("./ColorGradient.js"),Y=require("./ColorPalette.js"),M=require("./FlatColorPicker.js"),We=require("@progress/kendo-react-buttons"),Ue=require("@progress/kendo-svg-icons"),n=require("../messages/index.js"),je=require("@progress/kendo-react-intl"),Ge=require("../common/AdaptiveMode.js"),Ke=require("@progress/kendo-react-layout");function $e(g){const T=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const y in g)if(y!=="default"){const B=Object.getOwnPropertyDescriptor(g,y);Object.defineProperty(T,y,B.get?B:{enumerable:!0,get:()=>g[y]})}}return T.default=g,Object.freeze(T)}const t=$e(Me),Ze={opacity:!0},Je={palette:Y.DEFAULT_PRESET,tileSize:Y.DEFAULT_TILE_SIZE},X=g=>g!==void 0,Ee=a.createPropsContext(),ee=t.forwardRef((g,T)=>{var fe,ge;const y=!a.validatePackage(be.packageMetadata,{component:"ColorPicker"}),B=a.getLicenseMessage(be.packageMetadata),i=a.usePropsContext(Ee,g),v=je.useLocalization(),te=a.useAdaptiveModeContext(),{size:p=w.size,rounded:b=w.rounded,fillMode:V=w.fillMode,gradientSettings:S=w.gradientSettings,paletteSettings:A=w.paletteSettings,flatColorPickerSettings:R,view:k=i.views?void 0:w.view,views:d=k?void 0:w.views,activeView:ae,popupSettings:E,valid:Pe,disabled:F,tabIndex:we,icon:H,svgIcon:W,iconClassName:O,onChange:U,onFocus:j,onBlur:G,onActiveColorClick:K,className:ye,adaptive:Se,adaptiveTitle:ne=v.toLanguageString(n.colorPickerAdaptiveTitle,n.messages[n.colorPickerAdaptiveTitle]),adaptiveSubtitle:re,showButtons:h=!0}=i,s=t.useRef(null),_=t.useRef(null),D=t.useRef(null),C=t.useRef(null),L=t.useRef(void 0),oe=t.useRef(null),[he,le]=t.useState(!1),[Le,Te]=t.useState(i.defaultValue||void 0),[Ae,Re]=t.useState(!1),[z,_e]=t.useState(),$=X(i.value),P=X(i.open),c=$?i.value:Le,f=P?i.open:Ae,ie=t.useRef(c),N=t.useCallback(()=>{s.current&&s.current.focus()},[]);t.useImperativeHandle(T,()=>({element:s.current,actionElement:oe.current,value:c,focus:N}),[c,N]);const ce=t.useRef(null);t.useImperativeHandle(ce,()=>({element:s.current,actionElement:oe.current,value:c,focus:N}),[c,N]),a.useWebMcpRegister("colorpicker",ce,i,i.webMcp);const Z=!!(z&&te&&z<=te.medium&&Se);t.useEffect(()=>{const e=a.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(xe.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const o=t.useCallback((e,u)=>{P||(!e&&!u&&s&&s.current&&s.current.focus(),Re(e))},[P]),se=t.useMemo(()=>new a.Navigation({root:s,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,u,r)=>{o(!1)},Enter:(e,u,r)=>{!P&&e===s.current&&(r.preventDefault(),r.stopPropagation(),o(!0))},ArrowDown:(e,u,r)=>{r.altKey&&(r.preventDefault(),r.stopPropagation(),o(!0))},ArrowUp:(e,u,r)=>{r.altKey&&(r.preventDefault(),r.stopPropagation(),o(!1))},Tab:(e,u,r)=>{var I,ve,ke;if(a.getActiveElement(document)!==s.current){const me=(I=D.current)==null?void 0:I.wrapperRef.current,q=(ve=_.current)==null?void 0:ve.wrapperRef.current,Ce=(ke=C.current)==null?void 0:ke.element;k==="palette"&&me?a.keepFocusInContainer(r,me):k==="gradient"&&q?a.keepFocusInContainer(r,q):k==="combo"&&q?a.keepFocusInContainer(r,q.parentElement):d&&Ce&&a.keepFocusInContainer(r,Ce)}}}}}),[o,P]),Ie=t.useCallback(se.triggerKeyboardEvent.bind(se),[]),Be=t.useCallback(()=>{P||(_.current&&_.current.wrapperRef.current?a.focusFirstFocusableChild(_.current.wrapperRef.current):D.current?D.current.focus():C.current&&C.current.element&&a.focusFirstFocusableChild(C.current.element))},[P]),x=e=>ie.current=e,ue=t.useCallback(e=>{const u={value:ie.current,nativeEvent:e.nativeEvent,syntheticEvent:e};m(u),o(!f,!0)},[f]),J=t.useCallback(()=>{o(!1,!0)},[o]),Fe=t.useCallback(e=>{K&&K.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:c,target:{element:s.current,value:c}})},[K,c]),Oe=t.useCallback(e=>{L.current?(clearTimeout(L.current),L.current=void 0):(le(!0),Z&&!f&&o(!0)),j&&j.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[Z,j,f,o]),De=t.useCallback(()=>{o(!1,!0),le(!1),L.current=void 0},[]),ze=t.useCallback(e=>{clearTimeout(L.current),L.current=window.setTimeout(De),G&&G.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[G]),m=t.useCallback((e,u)=>{var I;const r=u?e.rgbaValue||"":(I=e.value)!=null?I:"";$||Te(r),U&&U.call(void 0,{value:r,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:s.current,value:r}}),o(!1)},[$,U]),de=t.useCallback(e=>m(e,!0),[X,m]),Q=t.useCallback(e=>t.createElement(t.Fragment,null,(k==="combo"||k==="gradient")&&t.createElement(He.ColorGradient,{...S,_adaptive:e,ref:_,isInsidePopup:!0,role:"none",ariaLabel:void 0,size:e?"large":p,value:c,onChange:m}),(k==="combo"||k==="palette")&&t.createElement(Y.ColorPalette,{...A,ref:D,size:e?"large":p,value:c,onChange:de}),d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(M.FlatColorPicker,{ariaLabel:v.toLanguageString(n.flatColorPickerAriaLabel,n.messages[n.flatColorPickerAriaLabel]),...R,paletteSettings:A,gradientSettings:{_adaptive:e,...S},ref:C,size:e?"large":p,rounded:b,views:["gradient","palette"],activeView:ae,setOpen:o,showButtons:e?!1:h,value:c,onChange:m,setAdaptiveModeValue:x}),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(M.FlatColorPicker,{ariaLabel:v.toLanguageString(n.flatColorPickerAriaLabel,n.messages[n.flatColorPickerAriaLabel]),...R,paletteSettings:A,gradientSettings:{_adaptive:e,...S},ref:C,size:e?"large":p,rounded:b,views:["palette","gradient"],setOpen:o,showButtons:e?!1:h,value:c,onChange:m,setAdaptiveModeValue:x}),d&&d.includes("gradient")&&!d.includes("palette")&&t.createElement(M.FlatColorPicker,{ariaLabel:v.toLanguageString(n.flatColorPickerAriaLabel,n.messages[n.flatColorPickerAriaLabel]),...R,gradientSettings:{_adaptive:e,...S},ref:C,size:e?"large":p,rounded:b,views:["gradient"],showButtons:e?!1:h,setOpen:o,value:c,onChange:m,setAdaptiveModeValue:x}),d&&d.includes("palette")&&!d.includes("gradient")&&t.createElement(M.FlatColorPicker,{ariaLabel:v.toLanguageString(n.flatColorPickerAriaLabel,n.messages[n.flatColorPickerAriaLabel]),...R,paletteSettings:A,gradientSettings:{_adaptive:e,...S},ref:C,size:e?"large":p,rounded:b,views:["palette"],showButtons:e?!1:h,setOpen:o,value:c,onChange:m,setAdaptiveModeValue:x}),y&&t.createElement(a.WatermarkOverlay,{message:B})),[ae,V,R,S,m,de,A,o,p,c,k,d]),Ne=t.useCallback(()=>{var u;const e={animation:!!((u=E==null?void 0:E.animate)==null||u),title:ne,subTitle:re,expand:f,onClose:J,windowWidth:z,footer:h?{cancelText:v.toLanguageString(n.flatColorPickerCancelBtn,n.messages[n.flatColorPickerCancelBtn]),onCancel:J,applyText:v.toLanguageString(n.flatColorPickerApplyBtn,n.messages[n.flatColorPickerApplyBtn]),onApply:ue}:void 0};return t.createElement(Ge.AdaptiveMode,{...e},t.createElement(Ke.ActionSheetContent,null,Q(!0)))},[E==null?void 0:E.animate,ne,re,f,J,z,h,v,ue,Q]),xe=t.useCallback(e=>{for(const u of e)_e(u.target.clientWidth)},[]),pe=a.useDir(s,i.dir),qe=Pe!==!1;return t.createElement("span",{id:i.id,role:"combobox","aria-label":i.ariaLabel,"aria-labelledby":i.ariaLabelledBy,"aria-describedby":i.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":f,"aria-controls":f?`k-colorpicker-popup-${(fe=i.id)!=null?fe:0}`:void 0,"aria-disabled":F?"true":void 0,className:a.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${a.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-picker-${V}`]:V,[`k-rounded-${a.kendoThemeMaps.roundedMap[b]||b}`]:b,"k-invalid":!qe,"k-disabled":F,"k-focus":he,className:ye}),ref:s,tabIndex:a.getTabIndex(we,F),title:i.title,onKeyDown:Ie,onFocus:Oe,onBlur:ze,dir:pe},t.createElement(Ve.Picker,{dir:pe,open:f,onOpen:Be,popupAnchor:s.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(ge=i.id)!=null?ge:0}`,...E},input:t.createElement("span",{onClick:Fe,className:"k-input-inner"},t.createElement("span",{className:a.classNames("k-value-icon","k-color-preview",{"k-no-color":!c,"k-icon-color-preview":H||W||O})},O&&t.createElement("span",{className:a.classNames("k-color-preview-icon",O)}),!O&&(H||W)&&t.createElement(a.IconWrap,{name:H,icon:W}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:c}}))),button:t.createElement(We.Button,{tabIndex:-1,type:"button",onClick:()=>o(!f),className:"k-input-button",disabled:F,icon:"chevron-down",svgIcon:Ue.chevronDownIcon,size:p,"aria-label":v.toLanguageString(n.colorPickerDropdownButtonAriaLabel,n.messages[n.colorPickerDropdownButtonAriaLabel])}),content:Q(!1),_mobileMode:Z,_actionSheet:Ne()}))});ee.propTypes={value:l.string,defaultValue:l.string,disabled:l.bool,view:l.oneOf(["gradient","palette","combo"]),views:l.arrayOf(l.oneOf(["gradient","palette"])),dir:l.string,id:l.string,icon:l.string,svgIcon:a.svgIconPropType,ariaLabelledBy:l.string,ariaDescribedBy:l.string,size:l.oneOf(["small","medium","large"]),rounded:l.oneOf(["small","medium","large","full","none"]),fillMode:l.oneOf(["solid","flat","outline"]),className:l.string,adaptive:l.bool,adaptiveTitle:l.string,adaptiveSubtitle:l.string};const w={size:void 0,rounded:void 0,fillMode:void 0,view:"palette",views:["gradient","palette"],gradientSettings:Ze,paletteSettings:Je};ee.displayName="KendoColorPicker";exports.ColorPicker=ee;exports.ColorPickerPropsContext=Ee;