@progress/kendo-react-inputs 8.2.0-develop.9 → 8.2.0

package/colors/ColorPicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ce=require("react"),a=require("prop-types"),n=require("@progress/kendo-react-common"),ie=require("../package-metadata.js"),ue=require("./Picker.js"),de=require("./ColorGradient.js"),B=require("./ColorPalette.js"),pe=require("@progress/kendo-react-buttons"),fe=require("@progress/kendo-svg-icons"),L=require("../messages/index.js"),me=require("@progress/kendo-react-intl");function ke(l){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const o in l)if(o!=="default"){const b=Object.getOwnPropertyDescriptor(l,o);Object.defineProperty(k,o,b.get?b:{enumerable:!0,get:()=>l[o]})}}return k.default=l,Object.freeze(k)}const e=ke(ce),be={opacity:!0},ge={palette:B.DEFAULT_PRESET,tileSize:B.DEFAULT_TILE_SIZE},A=l=>l!==void 0,z=n.createPropsContext(),M=e.forwardRef((l,k)=>{n.validatePackage(ie.packageMetadata);const o=n.usePropsContext(z,l),b=me.useLocalization(),{size:C=m.size,rounded:E=m.rounded,fillMode:q=m.fillMode,gradientSettings:F=m.gradientSettings,paletteSettings:H=m.paletteSettings,view:g=m.view,popupSettings:V,valid:j,disabled:y,tabIndex:G,icon:P,svgIcon:S,iconClassName:v,onChange:T,onFocus:w,onBlur:I,onActiveColorClick:R,className:U}=o,r=e.useRef(null),D=e.useRef(null),N=e.useRef(null),d=e.useRef(),$=e.useRef(null),[W,x]=e.useState(!1),[Z,J]=e.useState(o.defaultValue),[Q,X]=e.useState(!1),O=A(o.value),i=A(o.open),c=O?o.value:Z,p=i?o.open:Q,K=e.useCallback(()=>{r.current&&r.current.focus()},[]);e.useImperativeHandle(k,()=>({element:r.current,actionElement:$.current,value:c,focus:K}),[c,K]);const u=e.useCallback((t,f)=>{i||(!t&&!f&&r&&r.current&&r.current.focus(),X(t))},[i]),Y=e.useCallback(t=>{const{altKey:f,keyCode:s}=t;if(s===n.Keys.esc){u(!1);return}if(s===n.Keys.enter&&!i){t.preventDefault(),t.stopPropagation(),u(!p);return}f&&(s===n.Keys.up||s===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),s===n.Keys.up&&r&&r.current&&(r.current.focus(),u(!1)),s===n.Keys.down&&u(!0))},[p,i]),ee=e.useCallback(()=>{i||(D.current?D.current.focus():N.current&&N.current.focus())},[i]),te=e.useCallback(()=>{u(!p,!0)},[p]),ne=e.useCallback(t=>{R&&R.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:c})},[R,c]),oe=e.useCallback(t=>{d.current?(clearTimeout(d.current),d.current=void 0):x(!0),w&&w.call(void 0,{nativeEvent:t.nativeEvent,syntheticEvent:t})},[w]),ae=e.useCallback(()=>{u(!1,!0),x(!1),d.current=void 0},[]),re=e.useCallback(t=>{clearTimeout(d.current),d.current=window.setTimeout(ae),I&&I.call(void 0,{nativeEvent:t.nativeEvent,syntheticEvent:t})},[I]),h=e.useCallback((t,f)=>{const s=f?t.rgbaValue:t.value;O||J(s),f&&u(!1),T&&T.call(void 0,{value:s,nativeEvent:t.nativeEvent,syntheticEvent:t.syntheticEvent})},[O,T]),le=e.useCallback(t=>h(t,!0),[A,h]),_=n.useDir(r,o.dir),se=j!==!1;return e.createElement("span",{id:o.id,role:"combobox","aria-label":o.ariaLabel,"aria-labelledby":o.ariaLabelledBy,"aria-describedby":o.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":p,"aria-disabled":y?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[C]||C}`]:C,[`k-picker-${q}`]:q,[`k-rounded-${n.kendoThemeMaps.roundedMap[E]||E}`]:E,"k-invalid":!se,"k-disabled":y,"k-focus":W,className:U}),ref:r,tabIndex:n.getTabIndex(G,y),title:o.title,onKeyDown:Y,onFocus:oe,onBlur:re,dir:_},e.createElement(ue.Picker,{dir:_,open:p,onOpen:ee,popupAnchor:r.current||void 0,popupSettings:{...V},input:e.createElement("span",{onClick:ne,className:"k-input-inner"},e.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!c,"k-icon-color-preview":P||S||v})},v&&e.createElement("span",{className:n.classNames("k-color-preview-icon",v)}),!v&&(P||S)&&e.createElement(n.IconWrap,{name:P,icon:S}),e.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:c}}))),button:e.createElement(pe.Button,{tabIndex:-1,type:"button",onClick:te,className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:fe.caretAltDownIcon,"aria-label":b.toLanguageString(L.colorPickerDropdownButtonAriaLabel,L.messages[L.colorPickerDropdownButtonAriaLabel])}),content:e.createElement(e.Fragment,null,(g==="combo"||g==="gradient")&&e.createElement(de.ColorGradient,{...F,tabIndex:0,ref:D,value:c,onChange:h}),(g==="combo"||g==="palette")&&e.createElement(B.ColorPalette,{...H,ref:N,value:c,onChange:le}))}))});M.propTypes={value:a.string,defaultValue:a.string,disabled:a.bool,view:a.oneOf(["gradient","palette","combo"]),dir:a.string,id:a.string,icon:a.string,svgIcon:n.svgIconPropType,ariaLabelledBy:a.string,ariaDescribedBy:a.string,size:a.oneOf([null,"small","medium","large"]),rounded:a.oneOf([null,"small","medium","large","full"]),fillMode:a.oneOf([null,"solid","flat","outline"]),className:a.string};const m={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",gradientSettings:be,paletteSettings:ge};M.displayName="KendoColorPicker";exports.ColorPicker=M;exports.ColorPickerPropsContext=z;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const fe=require("react"),r=require("prop-types"),o=require("@progress/kendo-react-common"),ke=require("../package-metadata.js"),me=require("./Picker.js"),ge=require("./ColorGradient.js"),M=require("./ColorPalette.js"),be=require("@progress/kendo-react-buttons"),ve=require("@progress/kendo-svg-icons"),F=require("../messages/index.js"),Ee=require("@progress/kendo-react-intl");function Ce(c){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const a in c)if(a!=="default"){const b=Object.getOwnPropertyDescriptor(c,a);Object.defineProperty(m,a,b.get?b:{enumerable:!0,get:()=>c[a]})}}return m.default=c,Object.freeze(m)}const e=Ce(fe),ye={opacity:!0},Pe={palette:M.DEFAULT_PRESET,tileSize:M.DEFAULT_TILE_SIZE},L=c=>c!==void 0,K=o.createPropsContext(),B=e.forwardRef((c,m)=>{o.validatePackage(ke.packageMetadata);const a=o.usePropsContext(K,c),b=Ee.useLocalization(),{size:P=k.size,rounded:T=k.rounded,fillMode:q=k.fillMode,gradientSettings:U=k.gradientSettings,paletteSettings:$=k.paletteSettings,view:u=k.view,popupSettings:W,valid:Z,disabled:w,tabIndex:J,icon:S,svgIcon:I,iconClassName:v,onChange:R,onFocus:D,onBlur:N,onActiveColorClick:h,className:Q}=a,l=e.useRef(null),g=e.useRef(null),E=e.useRef(null),f=e.useRef(),X=e.useRef(null),[Y,x]=e.useState(!1),[ee,te]=e.useState(a.defaultValue),[ne,oe]=e.useState(!1),A=L(a.value),d=L(a.open),i=A?a.value:ee,C=d?a.open:ne,_=e.useCallback(()=>{l.current&&l.current.focus()},[]);e.useImperativeHandle(m,()=>({element:l.current,actionElement:X.current,value:i,focus:_}),[i,_]);const p=e.useCallback((t,s)=>{d||(!t&&!s&&l&&l.current&&l.current.focus(),oe(t))},[d]),z=e.useMemo(()=>new o.Navigation({root:l,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(t,s,n)=>{p(!1)},Enter:(t,s,n)=>{!d&&t===l.current&&(n.preventDefault(),n.stopPropagation(),p(!0))},ArrowDown:(t,s,n)=>{n.altKey&&(n.preventDefault(),n.stopPropagation(),p(!0))},ArrowUp:(t,s,n)=>{n.altKey&&(n.preventDefault(),n.stopPropagation(),p(!1))},Tab:(t,s,n)=>{var V,j;if(o.getActiveElement(document)!==l.current){const G=(V=E.current)==null?void 0:V.wrapperRef.current,y=(j=g.current)==null?void 0:j.wrapperRef.current;u==="palette"&&G?o.keepFocusInContainer(n,G):u==="gradient"&&y?o.keepFocusInContainer(n,y):u==="combo"&&y&&o.keepFocusInContainer(n,y.parentElement)}}}}}),[p,d]),ae=e.useCallback(z.triggerKeyboardEvent.bind(z),[]),re=e.useCallback(()=>{d||(g.current&&g.current.wrapperRef.current?o.focusFirstFocusableChild(g.current.wrapperRef.current):E.current&&E.current.focus())},[d]),le=e.useCallback(()=>{p(!C,!0)},[C]),ce=e.useCallback(t=>{h&&h.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:i})},[h,i]),ie=e.useCallback(t=>{f.current?(clearTimeout(f.current),f.current=void 0):x(!0),D&&D.call(void 0,{nativeEvent:t.nativeEvent,syntheticEvent:t})},[D]),se=e.useCallback(()=>{p(!1,!0),x(!1),f.current=void 0},[]),ue=e.useCallback(t=>{clearTimeout(f.current),f.current=window.setTimeout(se),N&&N.call(void 0,{nativeEvent:t.nativeEvent,syntheticEvent:t})},[N]),O=e.useCallback((t,s)=>{const n=s?t.rgbaValue:t.value;A||te(n),R&&R.call(void 0,{value:n,nativeEvent:t.nativeEvent,syntheticEvent:t.syntheticEvent})},[A,R]),de=e.useCallback(t=>O(t,!0),[L,O]),H=o.useDir(l,a.dir),pe=Z!==!1;return e.createElement("span",{id:a.id,role:"combobox","aria-label":a.ariaLabel,"aria-labelledby":a.ariaLabelledBy,"aria-describedby":a.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":C,"aria-disabled":w?"true":void 0,className:o.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${o.kendoThemeMaps.sizeMap[P]||P}`]:P,[`k-picker-${q}`]:q,[`k-rounded-${o.kendoThemeMaps.roundedMap[T]||T}`]:T,"k-invalid":!pe,"k-disabled":w,"k-focus":Y,className:Q}),ref:l,tabIndex:o.getTabIndex(J,w),title:a.title,onKeyDown:ae,onFocus:ie,onBlur:ue,dir:H},e.createElement(me.Picker,{dir:H,open:C,onOpen:re,popupAnchor:l.current||void 0,popupSettings:{...W},input:e.createElement("span",{onClick:ce,className:"k-input-inner"},e.createElement("span",{className:o.classNames("k-value-icon","k-color-preview",{"k-no-color":!i,"k-icon-color-preview":S||I||v})},v&&e.createElement("span",{className:o.classNames("k-color-preview-icon",v)}),!v&&(S||I)&&e.createElement(o.IconWrap,{name:S,icon:I}),e.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:i}}))),button:e.createElement(be.Button,{tabIndex:-1,type:"button",onClick:le,className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:ve.caretAltDownIcon,"aria-label":b.toLanguageString(F.colorPickerDropdownButtonAriaLabel,F.messages[F.colorPickerDropdownButtonAriaLabel])}),content:e.createElement(e.Fragment,null,(u==="combo"||u==="gradient")&&e.createElement(ge.ColorGradient,{...U,ref:g,isInsidePopup:!0,value:i,onChange:O}),(u==="combo"||u==="palette")&&e.createElement(M.ColorPalette,{...$,ref:E,value:i,onChange:de}))}))});B.propTypes={value:r.string,defaultValue:r.string,disabled:r.bool,view:r.oneOf(["gradient","palette","combo"]),dir:r.string,id:r.string,icon:r.string,svgIcon:o.svgIconPropType,ariaLabelledBy:r.string,ariaDescribedBy:r.string,size:r.oneOf([null,"small","medium","large"]),rounded:r.oneOf([null,"small","medium","large","full"]),fillMode:r.oneOf([null,"solid","flat","outline"]),className:r.string};const k={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",gradientSettings:ye,paletteSettings:Pe};B.displayName="KendoColorPicker";exports.ColorPicker=B;exports.ColorPickerPropsContext=K;

package/colors/ColorPicker.mjs

@@ -7,246 +7,262 @@
  */
 "use client";
 import * as e from "react";
-import n from "prop-types";
-import { createPropsContext as se, validatePackage as ce, usePropsContext as ue, Keys as p, useDir as de, classNames as h, kendoThemeMaps as H, getTabIndex as pe, IconWrap as fe, svgIconPropType as me } from "@progress/kendo-react-common";
-import { packageMetadata as ke } from "../package-metadata.mjs";
-import { Picker as ve } from "./Picker.mjs";
-import { ColorGradient as be } from "./ColorGradient.mjs";
-import { ColorPalette as ge, DEFAULT_PRESET as Ee, DEFAULT_TILE_SIZE as Ce } from "./ColorPalette.mjs";
-import { Button as ye } from "@progress/kendo-react-buttons";
-import { caretAltDownIcon as Te } from "@progress/kendo-svg-icons";
-import { colorPickerDropdownButtonAriaLabel as O, messages as Se } from "../messages/index.mjs";
-import { useLocalization as we } from "@progress/kendo-react-intl";
-const Ie = {
+import o from "prop-types";
+import { createPropsContext as fe, validatePackage as me, usePropsContext as ve, Navigation as ke, getActiveElement as ge, keepFocusInContainer as h, focusFirstFocusableChild as be, useDir as Ee, classNames as A, kendoThemeMaps as _, getTabIndex as Ce, IconWrap as we, svgIconPropType as ye } from "@progress/kendo-react-common";
+import { packageMetadata as Te } from "../package-metadata.mjs";
+import { Picker as Se } from "./Picker.mjs";
+import { ColorGradient as Pe } from "./ColorGradient.mjs";
+import { ColorPalette as Ie, DEFAULT_PRESET as Re, DEFAULT_TILE_SIZE as De } from "./ColorPalette.mjs";
+import { Button as Ne } from "@progress/kendo-react-buttons";
+import { caretAltDownIcon as he } from "@progress/kendo-svg-icons";
+import { colorPickerDropdownButtonAriaLabel as K, messages as Ae } from "../messages/index.mjs";
+import { useLocalization as Fe } from "@progress/kendo-react-intl";
+const Le = {
   opacity: !0
-}, Pe = {
-  palette: Ee,
-  tileSize: Ce
-}, L = (v) => v !== void 0, De = se(), z = e.forwardRef((v, M) => {
-  ce(ke);
-  const o = ue(De, v), V = we(), {
-    size: b = f.size,
-    rounded: g = f.rounded,
-    fillMode: A = f.fillMode,
-    gradientSettings: _ = f.gradientSettings,
-    paletteSettings: K = f.paletteSettings,
-    view: m = f.view,
-    popupSettings: G,
-    valid: U,
-    disabled: E,
-    tabIndex: $,
-    icon: C,
-    svgIcon: y,
-    iconClassName: k,
-    onChange: T,
-    onFocus: S,
-    onBlur: w,
-    onActiveColorClick: I,
-    className: W
-  } = o, a = e.useRef(null), P = e.useRef(null), D = e.useRef(null), c = e.useRef(), Z = e.useRef(null), [j, x] = e.useState(!1), [q, J] = e.useState(o.defaultValue), [Q, X] = e.useState(!1), N = L(o.value), i = L(o.open), l = N ? o.value : q, u = i ? o.open : Q, B = e.useCallback(
+}, xe = {
+  palette: Re,
+  tileSize: De
+}, F = (b) => b !== void 0, Be = fe(), U = e.forwardRef((b, G) => {
+  me(Te);
+  const a = ve(Be, b), $ = Fe(), {
+    size: E = d.size,
+    rounded: C = d.rounded,
+    fillMode: L = d.fillMode,
+    gradientSettings: W = d.gradientSettings,
+    paletteSettings: Z = d.paletteSettings,
+    view: s = d.view,
+    popupSettings: j,
+    valid: q,
+    disabled: w,
+    tabIndex: J,
+    icon: y,
+    svgIcon: T,
+    iconClassName: m,
+    onChange: S,
+    onFocus: P,
+    onBlur: I,
+    onActiveColorClick: R,
+    className: Q
+  } = a, r = e.useRef(null), f = e.useRef(null), v = e.useRef(null), p = e.useRef(), X = e.useRef(null), [Y, x] = e.useState(!1), [ee, te] = e.useState(a.defaultValue), [ne, oe] = e.useState(!1), D = F(a.value), c = F(a.open), l = D ? a.value : ee, k = c ? a.open : ne, B = e.useCallback(
     () => {
-      a.current && a.current.focus();
+      r.current && r.current.focus();
     },
     []
   );
-  e.useImperativeHandle(M, () => ({
+  e.useImperativeHandle(G, () => ({
     // we agreed that each element will have focus method exposed
-    element: a.current,
-    actionElement: Z.current,
+    element: r.current,
+    actionElement: X.current,
     value: l,
     focus: B
   }), [l, B]);
-  const s = e.useCallback(
-    (t, d) => {
-      i || (!t && !d && a && a.current && a.current.focus(), X(t));
+  const u = e.useCallback(
+    (t, i) => {
+      c || (!t && !i && r && r.current && r.current.focus(), oe(t));
     },
-    [i]
-  ), Y = e.useCallback(
-    (t) => {
-      const { altKey: d, keyCode: r } = t;
-      if (r === p.esc) {
-        s(!1);
-        return;
-      }
-      if (r === p.enter && !i) {
-        t.preventDefault(), t.stopPropagation(), s(!u);
-        return;
+    [c]
+  ), M = e.useMemo(
+    () => new ke({
+      root: r,
+      selectors: [".k-colorpicker", ".k-color-picker-popup"],
+      tabIndex: 0,
+      keyboardEvents: {
+        keydown: {
+          Escape: (t, i, n) => {
+            u(!1);
+          },
+          Enter: (t, i, n) => {
+            !c && t === r.current && (n.preventDefault(), n.stopPropagation(), u(!0));
+          },
+          ArrowDown: (t, i, n) => {
+            n.altKey && (n.preventDefault(), n.stopPropagation(), u(!0));
+          },
+          ArrowUp: (t, i, n) => {
+            n.altKey && (n.preventDefault(), n.stopPropagation(), u(!1));
+          },
+          Tab: (t, i, n) => {
+            var z, H;
+            if (ge(document) !== r.current) {
+              const V = (z = v.current) == null ? void 0 : z.wrapperRef.current, g = (H = f.current) == null ? void 0 : H.wrapperRef.current;
+              s === "palette" && V ? h(n, V) : s === "gradient" && g ? h(n, g) : s === "combo" && g && h(n, g.parentElement);
+            }
+          }
+        }
       }
-      d && (r === p.up || r === p.down) && (t.preventDefault(), t.stopPropagation(), r === p.up && a && a.current && (a.current.focus(), s(!1)), r === p.down && s(!0));
-    },
-    [u, i]
-  ), ee = e.useCallback(
+    }),
+    [u, c]
+  ), ae = e.useCallback(M.triggerKeyboardEvent.bind(M), []), re = e.useCallback(
     () => {
-      i || (P.current ? P.current.focus() : D.current && D.current.focus());
+      c || (f.current && f.current.wrapperRef.current ? be(f.current.wrapperRef.current) : v.current && v.current.focus());
     },
-    [i]
-  ), te = e.useCallback(
+    [c]
+  ), le = e.useCallback(
     () => {
-      s(!u, !0);
+      u(!k, !0);
     },
-    [u]
-  ), ne = e.useCallback(
+    [k]
+  ), ie = e.useCallback(
     (t) => {
-      I && I.call(void 0, {
+      R && R.call(void 0, {
         syntheticEvent: t,
         nativeEvent: t.nativeEvent,
         value: l
       });
     },
-    [I, l]
-  ), oe = e.useCallback(
+    [R, l]
+  ), se = e.useCallback(
     (t) => {
-      c.current ? (clearTimeout(c.current), c.current = void 0) : x(!0), S && S.call(void 0, {
+      p.current ? (clearTimeout(p.current), p.current = void 0) : x(!0), P && P.call(void 0, {
         nativeEvent: t.nativeEvent,
         syntheticEvent: t
       });
     },
-    [S]
-  ), ae = e.useCallback(
+    [P]
+  ), ce = e.useCallback(
     () => {
-      s(!1, !0), x(!1), c.current = void 0;
+      u(!1, !0), x(!1), p.current = void 0;
     },
     []
-  ), re = e.useCallback(
+  ), ue = e.useCallback(
     (t) => {
-      clearTimeout(c.current), c.current = window.setTimeout(ae), w && w.call(void 0, {
+      clearTimeout(p.current), p.current = window.setTimeout(ce), I && I.call(void 0, {
         nativeEvent: t.nativeEvent,
         syntheticEvent: t
       });
     },
-    [w]
-  ), R = e.useCallback(
-    (t, d) => {
-      const r = d ? t.rgbaValue : t.value;
-      N || J(r), d && s(!1), T && T.call(void 0, {
-        value: r,
+    [I]
+  ), N = e.useCallback(
+    (t, i) => {
+      const n = i ? t.rgbaValue : t.value;
+      D || te(n), S && S.call(void 0, {
+        value: n,
         nativeEvent: t.nativeEvent,
         syntheticEvent: t.syntheticEvent
       });
     },
-    [N, T]
-  ), le = e.useCallback(
-    (t) => R(t, !0),
-    [L, R]
-  ), F = de(a, o.dir), ie = U !== !1;
+    [D, S]
+  ), pe = e.useCallback(
+    (t) => N(t, !0),
+    [F, N]
+  ), O = Ee(r, a.dir), de = q !== !1;
   return /* @__PURE__ */ e.createElement(
     "span",
     {
-      id: o.id,
+      id: a.id,
       role: "combobox",
-      "aria-label": o.ariaLabel,
-      "aria-labelledby": o.ariaLabelledBy,
-      "aria-describedby": o.ariaDescribedBy,
+      "aria-label": a.ariaLabel,
+      "aria-labelledby": a.ariaLabelledBy,
+      "aria-describedby": a.ariaDescribedBy,
       "aria-haspopup": "dialog",
-      "aria-expanded": u,
-      "aria-disabled": E ? "true" : void 0,
-      className: h(
+      "aria-expanded": k,
+      "aria-disabled": w ? "true" : void 0,
+      className: A(
         "k-colorpicker",
         "k-picker",
         "k-icon-picker",
         {
-          [`k-picker-${H.sizeMap[b] || b}`]: b,
-          [`k-picker-${A}`]: A,
-          [`k-rounded-${H.roundedMap[g] || g}`]: g,
-          "k-invalid": !ie,
-          "k-disabled": E,
-          "k-focus": j,
-          className: W
+          [`k-picker-${_.sizeMap[E] || E}`]: E,
+          [`k-picker-${L}`]: L,
+          [`k-rounded-${_.roundedMap[C] || C}`]: C,
+          "k-invalid": !de,
+          "k-disabled": w,
+          "k-focus": Y,
+          className: Q
         }
       ),
-      ref: a,
-      tabIndex: pe($, E),
-      title: o.title,
-      onKeyDown: Y,
-      onFocus: oe,
-      onBlur: re,
-      dir: F
+      ref: r,
+      tabIndex: Ce(J, w),
+      title: a.title,
+      onKeyDown: ae,
+      onFocus: se,
+      onBlur: ue,
+      dir: O
     },
     /* @__PURE__ */ e.createElement(
-      ve,
+      Se,
       {
-        dir: F,
-        open: u,
-        onOpen: ee,
-        popupAnchor: a.current || void 0,
-        popupSettings: { ...G },
-        input: /* @__PURE__ */ e.createElement("span", { onClick: ne, className: "k-input-inner" }, /* @__PURE__ */ e.createElement(
+        dir: O,
+        open: k,
+        onOpen: re,
+        popupAnchor: r.current || void 0,
+        popupSettings: { ...j },
+        input: /* @__PURE__ */ e.createElement("span", { onClick: ie, className: "k-input-inner" }, /* @__PURE__ */ e.createElement(
           "span",
           {
-            className: h(
+            className: A(
               "k-value-icon",
               "k-color-preview",
               {
                 "k-no-color": !l,
-                "k-icon-color-preview": C || y || k
+                "k-icon-color-preview": y || T || m
               }
             )
           },
-          k && /* @__PURE__ */ e.createElement("span", { className: h("k-color-preview-icon", k) }),
-          !k && (C || y) && /* @__PURE__ */ e.createElement(fe, { name: C, icon: y }),
+          m && /* @__PURE__ */ e.createElement("span", { className: A("k-color-preview-icon", m) }),
+          !m && (y || T) && /* @__PURE__ */ e.createElement(we, { name: y, icon: T }),
           /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
         )),
         button: /* @__PURE__ */ e.createElement(
-          ye,
+          Ne,
           {
             tabIndex: -1,
             type: "button",
-            onClick: te,
+            onClick: le,
             className: "k-input-button",
             rounded: null,
             icon: "caret-alt-down",
-            svgIcon: Te,
-            "aria-label": V.toLanguageString(O, Se[O])
+            svgIcon: he,
+            "aria-label": $.toLanguageString(K, Ae[K])
           }
         ),
-        content: /* @__PURE__ */ e.createElement(e.Fragment, null, (m === "combo" || m === "gradient") && /* @__PURE__ */ e.createElement(
-          be,
+        content: /* @__PURE__ */ e.createElement(e.Fragment, null, (s === "combo" || s === "gradient") && /* @__PURE__ */ e.createElement(
+          Pe,
           {
-            ..._,
-            tabIndex: 0,
-            ref: P,
+            ...W,
+            ref: f,
+            isInsidePopup: !0,
             value: l,
-            onChange: R
+            onChange: N
           }
-        ), (m === "combo" || m === "palette") && /* @__PURE__ */ e.createElement(
-          ge,
+        ), (s === "combo" || s === "palette") && /* @__PURE__ */ e.createElement(
+          Ie,
           {
-            ...K,
-            ref: D,
+            ...Z,
+            ref: v,
             value: l,
-            onChange: le
+            onChange: pe
           }
         ))
       }
     )
   );
 });
-z.propTypes = {
-  value: n.string,
-  defaultValue: n.string,
-  disabled: n.bool,
-  view: n.oneOf(["gradient", "palette", "combo"]),
-  dir: n.string,
-  id: n.string,
-  icon: n.string,
-  svgIcon: me,
-  ariaLabelledBy: n.string,
-  ariaDescribedBy: n.string,
-  size: n.oneOf([null, "small", "medium", "large"]),
-  rounded: n.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: n.oneOf([null, "solid", "flat", "outline"]),
-  className: n.string
+U.propTypes = {
+  value: o.string,
+  defaultValue: o.string,
+  disabled: o.bool,
+  view: o.oneOf(["gradient", "palette", "combo"]),
+  dir: o.string,
+  id: o.string,
+  icon: o.string,
+  svgIcon: ye,
+  ariaLabelledBy: o.string,
+  ariaDescribedBy: o.string,
+  size: o.oneOf([null, "small", "medium", "large"]),
+  rounded: o.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: o.oneOf([null, "solid", "flat", "outline"]),
+  className: o.string
 };
-const f = {
+const d = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   view: "palette",
-  gradientSettings: Ie,
-  paletteSettings: Pe
+  gradientSettings: Le,
+  paletteSettings: xe
 };
-z.displayName = "KendoColorPicker";
+U.displayName = "KendoColorPicker";
 export {
-  z as ColorPicker,
-  De as ColorPickerPropsContext
+  U as ColorPicker,
+  Be as ColorPickerPropsContext
 };

package/colors/FlatColorPicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),l=require("prop-types"),g=require("@progress/kendo-react-common"),C=require("@progress/kendo-react-buttons"),E=require("@progress/kendo-svg-icons"),j=require("./ColorPalette.js"),z=require("./ColorGradient.js"),_=require("../package-metadata.js"),D=require("@progress/kendo-react-intl"),o=require("../messages/index.js");function H(e){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(k,r,c.get?c:{enumerable:!0,get:()=>e[r]})}}return k.default=e,Object.freeze(k)}const t=H(O),y=t.forwardRef((e,k)=>{g.validatePackage(_.packageMetadata);const r=t.useRef(null),c=t.useRef(null),S=t.useRef(null),{defaultValue:i,showButtons:m=!0,showPreview:G=!0,showClearButton:R=!0}=e,[u,q]=t.useState((e.view||"ColorGradient")==="ColorGradient"),[n,v]=t.useState(e.value||i||void 0),[s,f]=t.useState(e.value||i||void 0),b=e.value!==void 0?e.value:void 0;t.useEffect(()=>{v(e.value)},[e.value]);const h=D.useLocalization(),P=t.useCallback(()=>{r.current&&r.current.focus()},[r]);t.useImperativeHandle(r,()=>({element:c.current,focus:P,props:e,value:b}),[b,P,e]),t.useImperativeHandle(k,()=>r.current);const w=t.useCallback(a=>{(a==="ColorGradient"&&!u||a==="ColorPalette"&&u)&&q(!u)},[u]),L=t.useCallback(a=>{if(i?(v(i),f(i)):(v(void 0),f(void 0)),e.onPreviewChange){const d={value:i||void 0,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,d)}},[i,e.onPreviewChange]),B=t.useCallback(a=>{if(v(a.value),e.onPreviewChange){const d={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,d)}},[e.onPreviewChange]),x=t.useCallback(a=>{if(n!==void 0&&f(n),e.onChange){const d={value:n,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,d)}},[n,e.onChange]),F=t.useCallback(()=>{v(s)},[s]),M=t.useCallback(a=>{if(v(s),e.onPreviewChange){const d={value:s,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,d)}},[s,e.onPreviewChange]),N=t.useCallback(a=>{c.current&&!(a.nativeEvent.target instanceof HTMLInputElement)&&c.current.focus()},[c]),T=t.useCallback(a=>{var I;if((!a.relatedTarget||!((I=c.current)!=null&&I.contains(a.relatedTarget)))&&(!m&&n!==void 0&&f(n),!m&&e.onChange)){const V={value:n,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,V)}},[n,m,e.onChange]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:e.style,ref:c,tabIndex:g.getTabIndex(e.tabIndex,e.disabled),className:g.classNames("k-flatcolorpicker k-coloreditor",{"k-disabled":e.disabled},e.className),onBlur:T},t.createElement(t.Fragment,null,e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},t.createElement(C.ButtonGroup,{className:"k-button-group-flat"},t.createElement(C.Button,{type:"button","aria-label":h.toLanguageString(o.flatColorPickerColorGradientBtn,o.messages[o.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",selected:u,onClick:()=>w("ColorGradient"),icon:"droplet-slider",svgIcon:E.dropletSliderIcon}),t.createElement(C.Button,{type:"button","aria-label":h.toLanguageString(o.flatColorPickerColorPaletteBtn,o.messages[o.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",selected:!u,onClick:()=>w("ColorPalette"),icon:"palette",svgIcon:E.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},R&&t.createElement(C.Button,{type:"button",fillMode:"flat",onClick:L,"aria-label":h.toLanguageString(o.flatColorPickerClearBtn,o.messages[o.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:E.dropletSlashIcon}),G&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:g.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":b===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:n||void 0}})),t.createElement("span",{className:g.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":s===void 0}),onClick:M},t.createElement("span",{className:"k-color-preview-mask",style:{background:s||void 0}}))))),t.createElement("div",{className:"k-coloreditor-views k-vstack"},u?t.createElement(z.ColorGradient,{ref:S,role:"none",tabIndex:-1,ariaLabel:void 0,value:n,onChange:B,onFocus:N,opacity:e.opacity,format:e.format}):t.createElement(j.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:n,onChange:B,onFocus:N})),m&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},t.createElement(C.Button,{type:"button",className:"k-coloreditor-cancel",onClick:F},o.messages[o.flatColorPickerCancelBtn]),t.createElement(C.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",onClick:x},o.messages[o.flatColorPickerApplyBtn]))))}),A={id:l.string,style:l.any,className:l.string,value:l.string,defaultValue:l.string,onPreviewChange:l.func,onChange:l.func,opacity:l.bool,format:l.any,tabIndex:l.number,ariaLabel:l.string,ariaLabelledBy:l.string,disabled:l.bool,view:l.any,header:l.any,showClearButton:l.bool,showPreview:l.bool,showButtons:l.bool};y.displayName="KendoFlatColorPicker";y.propTypes=A;exports.FlatColorPicker=y;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),o=require("prop-types"),l=require("@progress/kendo-react-common"),g=require("@progress/kendo-react-buttons"),E=require("@progress/kendo-svg-icons"),j=require("./ColorPalette.js"),A=require("./ColorGradient.js"),D=require("../package-metadata.js"),z=require("@progress/kendo-react-intl"),n=require("../messages/index.js");function K(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const u=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(b,c,u.get?u:{enumerable:!0,get:()=>e[c]})}}return b.default=e,Object.freeze(b)}const a=K(O),P=a.forwardRef((e,b)=>{l.validatePackage(D.packageMetadata);const c=a.useRef(null),u=a.useRef(null),S=a.useRef(null),{defaultValue:s,showButtons:m=!0,showPreview:G=!0,showClearButton:R=!0}=e,[v,q]=a.useState((e.view||"ColorGradient")==="ColorGradient"),[r,C]=a.useState(e.value||s||void 0),[d,f]=a.useState(e.value||s||void 0),h=e.value!==void 0?e.value:void 0;a.useEffect(()=>{C(e.value)},[e.value]);const y=z.useLocalization(),w=a.useCallback(()=>{c.current&&c.current.focus()},[c]);a.useImperativeHandle(c,()=>({element:u.current,focus:w,props:e,value:h}),[h,w,e]),a.useImperativeHandle(b,()=>c.current);const B=a.useCallback(t=>{(t==="ColorGradient"&&!v||t==="ColorPalette"&&v)&&q(!v)},[v]),L=a.useCallback(t=>{if(s?(C(s),f(s)):(C(void 0),f(void 0)),e.onPreviewChange){const i={value:s||void 0,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onPreviewChange.call(void 0,i)}},[s,e.onPreviewChange]),N=a.useCallback(t=>{if(C(t.value),e.onPreviewChange){const i={value:t.value,nativeEvent:t.nativeEvent,syntheticEvent:t.syntheticEvent};e.onPreviewChange.call(void 0,i)}},[e.onPreviewChange]),_=a.useCallback(t=>{if(r!==void 0&&f(r),e.onChange){const i={value:r,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onChange.call(void 0,i)}},[r,e.onChange]),x=a.useCallback(()=>{C(d)},[d]),M=a.useCallback(t=>{if(C(d),e.onPreviewChange){const i={value:d,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onPreviewChange.call(void 0,i)}},[d,e.onPreviewChange]),T=a.useCallback(t=>{var k;if((!t.relatedTarget||!((k=u.current)!=null&&k.contains(t.relatedTarget)))&&(!m&&r!==void 0&&f(r),!m&&e.onChange)){const V={value:r,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onChange.call(void 0,V)}},[r,m,e.onChange]),I=a.useMemo(()=>new l.Navigation({root:u,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(t,i,k)=>{l.getActiveElement(document)===t?l.disableNavigatableContainer(t):l.keepFocusInContainer(k,t)},Enter:(t,i,k)=>{l.getActiveElement(document)===t&&(l.focusFirstFocusableChild(t),l.enableNavigatableContainer(t))},Escape:(t,i,k)=>{l.getActiveElement(document)!==t&&(t.focus(),l.disableNavigatableContainer(t))}}}}),[]),F=a.useCallback(I.triggerKeyboardEvent.bind(I),[]);return a.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:e.style,ref:u,tabIndex:l.getTabIndex(e.tabIndex,e.disabled),className:l.classNames("k-flatcolorpicker k-coloreditor",{"k-disabled":e.disabled},e.className),onBlur:T,onKeyDown:F},e.header||a.createElement("div",{className:"k-coloreditor-header k-hstack"},a.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},a.createElement(g.ButtonGroup,{className:"k-button-group-flat"},a.createElement(g.Button,{type:"button","aria-label":y.toLanguageString(n.flatColorPickerColorGradientBtn,n.messages[n.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",selected:v,onClick:()=>B("ColorGradient"),icon:"droplet-slider",svgIcon:E.dropletSliderIcon}),a.createElement(g.Button,{type:"button","aria-label":y.toLanguageString(n.flatColorPickerColorPaletteBtn,n.messages[n.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",selected:!v,onClick:()=>B("ColorPalette"),icon:"palette",svgIcon:E.paletteIcon}))),a.createElement("div",{className:"k-spacer"}),a.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},R&&a.createElement(g.Button,{type:"button",fillMode:"flat",onClick:L,"aria-label":y.toLanguageString(n.flatColorPickerClearBtn,n.messages[n.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:E.dropletSlashIcon}),G&&a.createElement("div",{className:"k-coloreditor-preview k-vstack"},a.createElement("span",{className:l.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":h===void 0})},a.createElement("span",{className:"k-color-preview-mask",style:{background:r||void 0}})),a.createElement("span",{className:l.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":d===void 0}),onClick:M},a.createElement("span",{className:"k-color-preview-mask",style:{background:d||void 0}}))))),a.createElement("div",{className:"k-coloreditor-views k-vstack"},v?a.createElement(A.ColorGradient,{ref:S,role:"none",ariaLabel:void 0,value:r,onChange:N,opacity:e.opacity,format:e.format}):a.createElement(j.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:r,onChange:N})),m&&a.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},a.createElement(g.Button,{type:"button",className:"k-coloreditor-cancel",onClick:x},n.messages[n.flatColorPickerCancelBtn]),a.createElement(g.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",onClick:_},n.messages[n.flatColorPickerApplyBtn])))}),H={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool};P.displayName="KendoFlatColorPicker";P.propTypes=H;exports.FlatColorPicker=P;