@progress/kendo-react-inputs 8.2.0-develop.29 → 8.2.0-develop.30

package/colors/ColorPalette.mjs

@@ -6,20 +6,20 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as l from "react";
+import * as i from "react";
 import s from "prop-types";
 import { ColorPaletteService as E } from "./utils/color-palette.service.mjs";
-import { Keys as a, validatePackage as k, classNames as m, getTabIndex as F, dispatchEvent as N, createPropsContext as P, withIdHOC as R, withPropsContext as T } from "@progress/kendo-react-common";
+import { KEYS as a, validatePackage as k, classNames as C, getTabIndex as R, dispatchEvent as F, createPropsContext as N, withIdHOC as P, withPropsContext as T } from "@progress/kendo-react-common";
 import { packageMetadata as I } from "../package-metadata.mjs";
 import { PALETTEPRESETS as D } from "./models/palette-presets.mjs";
 import { isPresent as L } from "./utils/misc.mjs";
 import { parseColor as U } from "./utils/color-parser.mjs";
-const x = 24, g = 10, z = "office", n = class n extends l.Component {
+const x = 24, m = 10, z = "office", n = class n extends i.Component {
   constructor(t) {
-    super(t), this.wrapper = null, this.paletteService = null, this.focus = () => {
-      this.wrapper && this.wrapper.focus();
+    super(t), this.wrapperRef = i.createRef(), this.paletteService = null, this.focus = () => {
+      this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
     }, this.onKeyDown = (e) => {
-      switch (e.keyCode) {
+      switch (e.key) {
         case a.down:
           this.handleCellNavigation(0, 1);
           break;
@@ -62,23 +62,23 @@ const x = 24, g = 10, z = "office", n = class n extends l.Component {
   render() {
     const t = this.getPaletteInfo(), e = this.paletteService = new E();
     e.setColorMatrix(t.colors, t.columns);
-    const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor), i = m("k-colorpalette", { "k-disabled": this.props.disabled }, this.props.className);
-    return t.colors.length ? /* @__PURE__ */ l.createElement(
+    const o = e.getCellCoordsFor(this.state.selectedColor), r = e.getCellCoordsFor(this.state.focusedColor), l = C("k-colorpalette", { "k-disabled": this.props.disabled }, this.props.className);
+    return t.colors.length ? /* @__PURE__ */ i.createElement(
       "div",
       {
         id: this.props.id,
         role: "grid",
-        className: i,
+        className: l,
         onFocus: this.onFocus,
         onBlur: this.onBlur,
         onKeyDown: this.onKeyDown,
         "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? "true" : void 0),
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
-        tabIndex: F(this.props.tabIndex, this.props.disabled),
-        ref: (d) => this.wrapper = d
+        tabIndex: R(this.props.tabIndex, this.props.disabled),
+        ref: this.wrapperRef
       },
-      /* @__PURE__ */ l.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ l.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
+      /* @__PURE__ */ i.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ i.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
     ) : "";
   }
   /**
@@ -110,7 +110,7 @@ const x = 24, g = 10, z = "office", n = class n extends l.Component {
     this.isUncontrolled && this.setState({ selectedColor: this.state.focusedColor }), this.dispatchChangeEvent(this.state.focusedColor, t);
   }
   dispatchChangeEvent(t, e) {
-    N(this.props.onChange, e, this, { value: t, rgbaValue: U(t, "rgba") });
+    F(this.props.onChange, e, this, { value: t, rgbaValue: U(t, "rgba") });
   }
   get focusedColorCooridanates() {
     return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : void 0;
@@ -123,33 +123,33 @@ const x = 24, g = 10, z = "office", n = class n extends l.Component {
       const t = D[this.props.palette];
       return L(t) ? {
         colors: t.colors,
-        columns: this.props.columns || t.columns || g
+        columns: this.props.columns || t.columns || m
       } : { colors: [], columns: 0 };
     } else
-      return { colors: this.props.palette || [], columns: this.props.columns || g };
+      return { colors: this.props.palette || [], columns: this.props.columns || m };
   }
   renderRows(t, e, o) {
-    return t.map((r, i) => /* @__PURE__ */ l.createElement("tr", { role: "row", key: i }, this.renderColumns(r, i, e, o)));
+    return t.map((r, l) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: l }, this.renderColumns(r, l, e, o)));
   }
   renderColumns(t, e, o, r) {
-    const i = o !== void 0 && o.row === e, d = o && o.col, v = r !== void 0 && r.row === e, b = r && r.col, u = typeof this.props.tileSize != "number" ? this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize }, f = u.width + "px", S = u.height + "px";
-    return t.map((p, c) => {
-      const C = i && d === c, w = m(
+    const l = o !== void 0 && o.row === e, g = o && o.col, v = r !== void 0 && r.row === e, b = r && r.col, h = typeof this.props.tileSize != "number" ? this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize }, u = h.width + "px", S = h.height + "px";
+    return t.map((d, c) => {
+      const f = l && g === c, w = C(
         "k-colorpalette-tile",
         {
-          "k-selected": C,
+          "k-selected": f,
           "k-focus": v && b === c
         }
       );
-      return /* @__PURE__ */ l.createElement(
+      return /* @__PURE__ */ i.createElement(
         "td",
         {
           role: "gridcell",
           className: w,
-          "aria-label": p,
-          "aria-selected": C ? !0 : this.props.disabled ? void 0 : !1,
-          style: { backgroundColor: p, width: f, height: S, minWidth: f },
-          onClick: (y) => this.onColorClick(p, y),
+          "aria-label": d,
+          "aria-selected": f ? !0 : this.props.disabled ? void 0 : !1,
+          style: { backgroundColor: d, width: u, height: S, minWidth: u },
+          onClick: (y) => this.onColorClick(d, y),
           id: this.createCellId({ row: e, col: c }),
           key: c
         }
@@ -178,14 +178,14 @@ n.displayName = "ColorPalette", n.propTypes = {
   palette: z,
   tileSize: x
 };
-let h = n;
-const B = P(), A = R(T(B, h));
+let p = n;
+const B = N(), A = P(T(B, p));
 A.displayName = "KendoReactColorPalette";
 export {
   A as ColorPalette,
   B as ColorPalettePropsContext,
-  h as ColorPaletteWithoutContext,
-  g as DEFAULT_COLUMNS_COUNT,
+  p as ColorPaletteWithoutContext,
+  m as DEFAULT_COLUMNS_COUNT,
   z as DEFAULT_PRESET,
   x as DEFAULT_TILE_SIZE
 };

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
 };