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

package/colors/ColorPalette.mjs

@@ -6,76 +6,78 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as R from "react";
-import { useRef as O, useMemo as U, useState as V, useEffect as re, useCallback as p, useImperativeHandle as M } from "react";
+import { useRef as O, useMemo as U, useState as V, useEffect as le, useCallback as p, useImperativeHandle as M } from "react";
 import l from "prop-types";
-import { ColorPaletteService as se } from "./utils/color-palette.service.mjs";
-import { withIdHOC as le, createPropsContext as ne, usePropsContext as ae, dispatchEvent as _, classNames as H, getTabIndex as ce } from "@progress/kendo-react-common";
-import { PALETTEPRESETS as ie } from "./models/palette-presets.mjs";
+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 { parseColor as $ } from "./utils/color-parser.mjs";
-const ue = 24, de = 10, fe = "office", F = {
-  palette: fe,
-  columns: de,
-  tileSize: ue
-}, Ce = ne(), we = (m) => {
-  if (Array.isArray(m))
-    return m;
-  if (typeof m == "string") {
-    const P = ie[m];
-    if (P)
-      return P.colors;
+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;
   }
   return [];
-}, v = R.forwardRef((m, P) => {
-  const K = ae(Ce, m), {
-    palette: I = F.palette,
-    columns: S = F.columns,
-    tileSize: c = F.tileSize,
+}, v = R.forwardRef((w, E) => {
+  const j = ie(ge, w), {
+    palette: A = L.palette,
+    columns: F = L.columns,
+    tileSize: c = L.tileSize,
     value: y,
-    defaultValue: j,
+    defaultValue: q,
     disabled: i = !1,
-    tabIndex: q,
+    tabIndex: W,
     onChange: g,
-    onFocus: D,
-    className: W,
-    size: L,
-    id: Z,
-    ariaLabelledBy: G,
-    ariaDescribedBy: J
-  } = K, k = O(null), Q = O({
+    onFocus: S,
+    className: Z,
+    size: D,
+    id: G,
+    ariaLabelledBy: J,
+    ariaDescribedBy: Q
+  } = j, k = O(null), X = O({
     focus: () => {
       var o;
       (o = k.current) == null || o.focus();
     },
     wrapperRef: k
-  }), A = S != null ? S : F.columns, f = U(() => we(I), [I]), t = U(() => {
-    const o = new se();
-    return o.setColorMatrix(f, A), o;
-  }, [f, A]), [C, T] = V(() => y !== void 0 ? y : j || ""), [x, b] = V(""), h = y !== void 0;
-  re(() => {
+  }), 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(() => {
     h && T(y);
   }, [y, h]);
-  const X = p(
+  const Y = p(
     (o) => {
       if (i || f.length === 0)
         return;
-      const u = C || f[0];
-      b(u), D && D(o);
+      const u = m || f[0];
+      b(u), S && S(o);
     },
-    [i, f, C, D]
-  ), Y = p(() => {
+    [i, f, m, S]
+  ), ee = p(() => {
     b("");
-  }, []), ee = p(
+  }, []), oe = p(
     (o) => {
       if (i)
         return;
-      const { key: u } = o, r = () => x || C || f[0], w = (s, e) => s < 0 ? e : s > e ? 0 : s;
+      const { key: u } = o, r = () => x || m || f[0], C = (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 = w(e.col + 1, d), a = t.colorRows[e.row][n];
+              const d = t.colorRows[e.row].length - 1, n = C(e.col + 1, d), a = t.colorRows[e.row][n];
               a && b(a);
             }
           }
@@ -85,7 +87,7 @@ const ue = 24, de = 10, fe = "office", F = {
           {
             const s = r(), e = t.getCellCoordsFor(s);
             if (e && t.colorRows[e.row]) {
-              const d = t.colorRows[e.row].length - 1, n = w(e.col - 1, d), a = t.colorRows[e.row][n];
+              const d = t.colorRows[e.row].length - 1, n = C(e.col - 1, d), a = t.colorRows[e.row][n];
               a && b(a);
             }
           }
@@ -95,8 +97,8 @@ const ue = 24, de = 10, fe = "office", F = {
           {
             const s = r(), e = t.getCellCoordsFor(s);
             if (e) {
-              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);
+              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);
             }
           }
           break;
@@ -105,8 +107,8 @@ const ue = 24, de = 10, fe = "office", F = {
           {
             const s = r(), e = t.getCellCoordsFor(s);
             if (e) {
-              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);
+              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);
             }
           }
           break;
@@ -125,24 +127,24 @@ const ue = 24, de = 10, fe = "office", F = {
           break;
       }
     },
-    [i, x, C, f, t, h, g]
+    [i, x, m, f, t, h, g]
   ), N = p(
     (o, u) => {
       if (i)
         return;
       const r = o;
       if (h || T(r), g) {
-        const w = $(r, "rgba");
+        const C = $(r, "rgba");
         _(g, u, null, {
           value: r,
-          rgbaValue: w || ""
+          rgbaValue: C || ""
         });
       }
     },
     [i, g, h]
-  ), 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", {
+  ), 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", {
         "k-selected": s,
         "k-focus": e
       }), n = {
@@ -156,13 +158,13 @@ const ue = 24, de = 10, fe = "office", F = {
           className: d,
           style: n,
           "aria-label": r,
-          "aria-selected": s ? "true" : "false",
+          "aria-selected": s ? "true" : void 0,
           onClick: (a) => N(r, a)
         }
       );
     }),
-    [C, x, c, N]
-  ), oe = p(() => t.colorRows.map((u, r) => /* @__PURE__ */ R.createElement("tr", { key: u[0] || r, role: "row" }, B(u, r))), [t, B]), z = p(
+    [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(
     () => ({
       focus: () => {
         var o;
@@ -172,29 +174,30 @@ const ue = 24, de = 10, fe = "office", F = {
     }),
     []
   );
-  M(Q, z), M(P, z);
-  const te = H("k-colorpalette", W, {
+  M(X, B), M(E, B);
+  const re = H("k-colorpalette", Z, {
     "k-disabled": i,
-    "k-colorpalette-sm": L === "small",
-    "k-colorpalette-md": L === "medium",
-    "k-colorpalette-lg": L === "large"
-  });
+    "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: te,
-      tabIndex: ce(q, i),
-      id: Z,
-      "aria-labelledby": G,
-      "aria-describedby": J,
+      className: re,
+      tabIndex: ue(W, i),
+      id: G,
+      "aria-label": se.toLanguageString(K, me[K]),
+      "aria-labelledby": J,
+      "aria-describedby": Q,
       "aria-disabled": i ? "true" : void 0,
-      onFocus: X,
-      onBlur: Y,
-      onKeyDown: ee
+      onFocus: Y,
+      onBlur: ee,
+      onKeyDown: oe
     },
-    /* @__PURE__ */ R.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ R.createElement("tbody", null, oe()))
+    /* @__PURE__ */ R.createElement("table", { className: "k-colorpalette-table", role: "none" }, /* @__PURE__ */ R.createElement("tbody", null, te()))
   );
 });
 v.displayName = "ColorPalette";
@@ -214,17 +217,17 @@ v.propTypes = {
   className: l.string,
   size: l.oneOf(["small", "medium", "large"])
 };
-const pe = le(
+const he = ae(
   v
 );
-pe.displayName = "KendoReactColorPalette";
-const ke = v;
+he.displayName = "KendoReactColorPalette";
+const Fe = v;
 export {
-  pe as ColorPalette,
-  Ce as ColorPalettePropsContext,
-  ke as ColorPaletteWithoutContext,
-  de as DEFAULT_COLUMNS_COUNT,
-  fe as DEFAULT_PRESET,
-  ue as DEFAULT_TILE_SIZE,
-  F as defaultColorPaletteProps
+  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
 };

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