@progress/kendo-react-inputs 9.4.0-develop.23 → 9.4.0-develop.3

package/colors/ColorPalette.mjs

@@ -5,33 +5,34 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import * as i from "react";
 import s from "prop-types";
-import { ColorPaletteService as S } from "./utils/color-palette.service.mjs";
-import { KEYS as l, validatePackage as w, classNames as u, kendoThemeMaps as E, getTabIndex as k, dispatchEvent as y, createPropsContext as R, withIdHOC as F, withPropsContext as N } from "@progress/kendo-react-common";
-import { packageMetadata as P } from "../package-metadata.mjs";
-import { PALETTEPRESETS as T } from "./models/palette-presets.mjs";
-import { isPresent as I } from "./utils/misc.mjs";
-import { parseColor as D } from "./utils/color-parser.mjs";
-const z = 24, f = 10, L = "office", a = class a extends i.Component {
+import { ColorPaletteService as E } from "./utils/color-palette.service.mjs";
+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, m = 10, z = "office", n = class n extends i.Component {
   constructor(t) {
     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.key) {
-        case l.down:
+        case a.down:
           this.handleCellNavigation(0, 1);
           break;
-        case l.up:
+        case a.up:
           this.handleCellNavigation(0, -1);
           break;
-        case l.right:
+        case a.right:
           this.handleCellNavigation(1, 0);
           break;
-        case l.left:
+        case a.left:
           this.handleCellNavigation(-1, 0);
           break;
-        case l.enter:
+        case a.enter:
           this.handleEnter(e);
           break;
         default:
@@ -44,7 +45,7 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
       this.paletteService && (this.setState({ focusedColor: this.state.selectedColor || this.paletteService.colorRows[0][0] }), this.props.onFocus && this.props.onFocus.call(void 0, e));
     }, this.onBlur = () => {
       this.setState({ focusedColor: void 0 });
-    }, w(P), this.state = {
+    }, k(I), this.state = {
       selectedColor: this.props.value !== void 0 ? this.props.value : this.props.defaultValue ? this.props.defaultValue : void 0,
       isFirstRender: !0
     };
@@ -56,29 +57,22 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
    * @hidden
    */
   render() {
-    const t = this.getPaletteInfo(), e = this.paletteService = new S();
+    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);
+    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: u(
-          "k-colorpalette",
-          {
-            [`k-colorpalette-${E.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
-            "k-disabled": this.props.disabled
-          },
-          this.props.className
-        ),
+        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: k(this.props.tabIndex, this.props.disabled),
+        tabIndex: R(this.props.tabIndex, this.props.disabled),
         ref: this.wrapperRef
       },
       /* @__PURE__ */ i.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ i.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
@@ -113,7 +107,7 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
     this.isUncontrolled && this.setState({ selectedColor: this.state.focusedColor }), this.dispatchChangeEvent(this.state.focusedColor, t);
   }
   dispatchChangeEvent(t, e) {
-    y(this.props.onChange, e, this, { value: t, rgbaValue: D(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 +117,33 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
   }
   getPaletteInfo() {
     if (typeof this.props.palette == "string") {
-      const t = T[this.props.palette];
-      return I(t) ? {
+      const t = D[this.props.palette];
+      return L(t) ? {
         colors: t.colors,
-        columns: this.props.columns || t.columns || f
+        columns: this.props.columns || t.columns || m
       } : { colors: [], columns: 0 };
     }
-    return { colors: this.props.palette || [], columns: this.props.columns || f };
+    return { colors: this.props.palette || [], columns: this.props.columns || m };
   }
   renderRows(t, e, o) {
-    return t.map((r, n) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: n }, this.renderColumns(r, n, 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 n = o !== void 0 && o.row === e, C = o && o.col, m = r !== void 0 && r.row === e, g = r && r.col;
+    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 h = n && C === c, v = u("k-colorpalette-tile", {
-        "k-selected": h,
-        "k-focus": m && g === c
+      const f = l && g === c, w = C("k-colorpalette-tile", {
+        "k-selected": f,
+        "k-focus": v && b === c
       });
       return /* @__PURE__ */ i.createElement(
         "td",
         {
           role: "gridcell",
-          className: v,
+          className: w,
           "aria-label": d,
-          "aria-selected": h ? !0 : this.props.disabled ? void 0 : !1,
-          style: { backgroundColor: d },
-          onClick: (b) => this.onColorClick(d, b),
+          "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
         }
@@ -160,7 +154,7 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
     return `${this.guid}_${t.row}_${t.col}`;
   }
 };
-a.displayName = "ColorPalette", a.propTypes = {
+n.displayName = "ColorPalette", n.propTypes = {
   palette: s.oneOfType([s.arrayOf(s.string.isRequired), s.string]),
   columns: s.number,
   tileSize: s.any,
@@ -173,26 +167,24 @@ a.displayName = "ColorPalette", a.propTypes = {
   id: s.string,
   ariaLabelledBy: s.string,
   ariaDescribedBy: s.string,
-  className: s.string,
-  size: s.oneOf(["small", "medium", "large", null])
-}, a.defaultProps = {
-  palette: L,
-  tileSize: z,
-  size: "medium"
+  className: s.string
+}, n.defaultProps = {
+  palette: z,
+  tileSize: x
 };
-let p = a;
-const U = R(), B = F(
-  N(
-    U,
+let p = n;
+const B = N(), A = P(
+  T(
+    B,
     p
   )
 );
-B.displayName = "KendoReactColorPalette";
+A.displayName = "KendoReactColorPalette";
 export {
-  B as ColorPalette,
-  U as ColorPalettePropsContext,
+  A as ColorPalette,
+  B as ColorPalettePropsContext,
   p as ColorPaletteWithoutContext,
-  f as DEFAULT_COLUMNS_COUNT,
-  L as DEFAULT_PRESET,
-  z as DEFAULT_TILE_SIZE
+  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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Be=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),Oe=require("../package-metadata.js"),De=require("./Picker.js"),ze=require("./ColorGradient.js"),K=require("./ColorPalette.js"),B=require("./FlatColorPicker.js"),Ne=require("@progress/kendo-react-buttons"),Le=require("@progress/kendo-svg-icons"),u=require("../messages/index.js"),xe=require("@progress/kendo-react-intl"),qe=require("../common/AdaptiveMode.js"),He=require("@progress/kendo-react-layout");function Ve(p){const y=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const a in p)if(a!=="default"){const k=Object.getOwnPropertyDescriptor(p,a);Object.defineProperty(y,a,k.get?k:{enumerable:!0,get:()=>p[a]})}}return y.default=p,Object.freeze(y)}const t=Ve(Be),Me={opacity:!0},Ue={palette:K.DEFAULT_PRESET,tileSize:K.DEFAULT_TILE_SIZE},G=p=>p!==void 0,ue=n.createPropsContext(),W=t.forwardRef((p,y)=>{var re,oe;n.validatePackage(Oe.packageMetadata);const a=n.usePropsContext(ue,p),k=xe.useLocalization(),$=n.useAdaptiveModeContext(),{size:d=E.size,rounded:O=E.rounded,fillMode:_=E.fillMode,gradientSettings:Z=E.gradientSettings,paletteSettings:J=E.paletteSettings,flatColorPickerSettings:S,view:f=a.views?void 0:E.view,views:l=f?void 0:E.views,activeView:Q,popupSettings:C,valid:de,disabled:D,tabIndex:pe,icon:z,svgIcon:N,iconClassName:R,onChange:L,onFocus:x,onBlur:q,onActiveColorClick:H,className:fe,adaptive:ge,adaptiveTitle:X=k.toLanguageString(u.colorPickerAdaptiveTitle,u.messages[u.colorPickerAdaptiveTitle])}=a,i=t.useRef(null),T=t.useRef(null),A=t.useRef(null),v=t.useRef(null),w=t.useRef(),ke=t.useRef(null),[ve,Y]=t.useState(!1),[me,Ce]=t.useState(a.defaultValue),[be,Ee]=t.useState(!1),[I,we]=t.useState(),V=G(a.value),b=G(a.open),c=V?a.value:me,P=b?a.open:be,ee=t.useCallback(()=>{i.current&&i.current.focus()},[]);t.useImperativeHandle(y,()=>({element:i.current,actionElement:ke.current,value:c,focus:ee}),[c,ee]);const Pe=!!(I&&$&&I<=$.medium&&ge);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Ie.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const g=t.useCallback((e,s)=>{b||(!e&&!s&&i&&i.current&&i.current.focus(),Ee(e))},[b]),te=t.useMemo(()=>new n.Navigation({root:i,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,s,r)=>{g(!1)},Enter:(e,s,r)=>{!b&&e===i.current&&(r.preventDefault(),r.stopPropagation(),g(!0))},ArrowDown:(e,s,r)=>{r.altKey&&(r.preventDefault(),r.stopPropagation(),g(!0))},ArrowUp:(e,s,r)=>{r.altKey&&(r.preventDefault(),r.stopPropagation(),g(!1))},Tab:(e,s,r)=>{var h,le,ie;if(n.getActiveElement(document)!==i.current){const ce=(h=A.current)==null?void 0:h.wrapperRef.current,F=(le=T.current)==null?void 0:le.wrapperRef.current,se=(ie=v.current)==null?void 0:ie.element;f==="palette"&&ce?n.keepFocusInContainer(r,ce):f==="gradient"&&F?n.keepFocusInContainer(r,F):f==="combo"&&F?n.keepFocusInContainer(r,F.parentElement):l&&se&&n.keepFocusInContainer(r,se)}}}}}),[g,b]),ye=t.useCallback(te.triggerKeyboardEvent.bind(te),[]),Se=t.useCallback(()=>{b||(T.current&&T.current.wrapperRef.current?n.focusFirstFocusableChild(T.current.wrapperRef.current):A.current?A.current.focus():v.current&&v.current.element&&n.focusFirstFocusableChild(v.current.element))},[b]),M=t.useCallback(()=>{g(!P,!0)},[P]),U=t.useCallback(()=>{g(!1,!0)},[g]),Te=t.useCallback(e=>{H&&H.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:c,target:{element:i.current,value:c}})},[H,c]),he=t.useCallback(e=>{w.current?(clearTimeout(w.current),w.current=void 0):Y(!0),x&&x.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[x]),_e=t.useCallback(()=>{g(!1,!0),Y(!1),w.current=void 0},[]),Re=t.useCallback(e=>{clearTimeout(w.current),w.current=window.setTimeout(_e),q&&q.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[q]),m=t.useCallback((e,s)=>{var h;const r=s?e.rgbaValue||"":(h=e.value)!=null?h:"";V||Ce(r),L&&L.call(void 0,{value:r,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:i.current,value:r}})},[V,L]),ne=t.useCallback(e=>m(e,!0),[G,m]),j=t.useCallback(e=>t.createElement(t.Fragment,null,(f==="combo"||f==="gradient")&&t.createElement(ze.ColorGradient,{...Z,_adaptive:e,ref:T,isInsidePopup:!0,size:e?"large":d,fillMode:_,value:c,onChange:m}),(f==="combo"||f==="palette")&&t.createElement(K.ColorPalette,{...J,ref:A,size:e?"large":d,value:c,onChange:ne}),l&&l[0]==="gradient"&&l[1]==="palette"&&t.createElement(B.FlatColorPicker,{...S,_gradientSettings:{_adaptive:e},ref:v,size:e?"large":d,views:["gradient","palette"],activeView:Q,showButtons:!e,value:c,onChange:m}),l&&l[0]==="palette"&&l[1]==="gradient"&&t.createElement(B.FlatColorPicker,{...S,_gradientSettings:{_adaptive:e},ref:v,size:e?"large":d,views:["palette","gradient"],showButtons:!e,value:c,onChange:m}),l&&l.includes("gradient")&&!l.includes("palette")&&t.createElement(B.FlatColorPicker,{...S,_gradientSettings:{_adaptive:e},ref:v,size:e?"large":d,views:["gradient"],showButtons:!e,value:c,onChange:m}),l&&l.includes("palette")&&!l.includes("gradient")&&t.createElement(B.FlatColorPicker,{...S,_gradientSettings:{_adaptive:e},ref:v,size:e?"large":d,views:["palette"],showButtons:!e,value:c,onChange:m})),[Q,_,S,Z,m,ne,J,d,c,f,l]),Ae=t.useCallback(()=>{var s;const e={animation:!!((s=C==null?void 0:C.animate)==null||s),title:X,expand:P,onClose:U,windowWidth:I,footer:{cancelText:k.toLanguageString(u.flatColorPickerCancelBtn,u.messages[u.flatColorPickerCancelBtn]),onCancel:U,applyText:k.toLanguageString(u.flatColorPickerApplyBtn,u.messages[u.flatColorPickerApplyBtn]),onApply:M}};return t.createElement(qe.AdaptiveMode,{...e},t.createElement(He.ActionSheetContent,{overflowHidden:!0},j(!0)))},[C==null?void 0:C.animate,X,P,U,I,k,M,j]),Ie=t.useCallback(e=>{for(const s of e)we(s.target.clientWidth)},[]),ae=n.useDir(i,a.dir),Fe=de!==!1;return t.createElement("span",{id:a.id,role:"combobox","aria-label":a.ariaLabel,"aria-labelledby":a.ariaLabelledBy,"aria-describedby":a.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":P,"aria-controls":`k-colorpicker-popup-${(re=a.id)!=null?re:0}`,"aria-disabled":D?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[d]||d}`]:d,[`k-picker-${_}`]:_,[`k-rounded-${n.kendoThemeMaps.roundedMap[O]||O}`]:O,"k-invalid":!Fe,"k-disabled":D,"k-focus":ve,className:fe}),ref:i,tabIndex:n.getTabIndex(pe,D),title:a.title,onKeyDown:ye,onFocus:he,onBlur:Re,dir:ae},t.createElement(De.Picker,{dir:ae,open:P,onOpen:Se,popupAnchor:i.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(oe=a.id)!=null?oe:0}`,...C},input:t.createElement("span",{onClick:Te,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!c,"k-icon-color-preview":z||N||R})},R&&t.createElement("span",{className:n.classNames("k-color-preview-icon",R)}),!R&&(z||N)&&t.createElement(n.IconWrap,{name:z,icon:N}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:c}}))),button:t.createElement(Ne.Button,{tabIndex:-1,type:"button",onClick:M,className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:Le.caretAltDownIcon,"aria-label":k.toLanguageString(u.colorPickerDropdownButtonAriaLabel,u.messages[u.colorPickerDropdownButtonAriaLabel])}),content:j(!1),_mobileMode:Pe,_actionSheet:Ae()}))});W.propTypes={value:o.string,defaultValue:o.string,disabled:o.bool,view:o.oneOf(["gradient","palette","combo"]),views:o.arrayOf(o.oneOf(["gradient","palette"])),dir:o.string,id:o.string,icon:o.string,svgIcon:n.svgIconPropType,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,adaptive:o.bool,adaptiveTitle:o.string};const E={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",views:["gradient","palette"],gradientSettings:Me,paletteSettings:Ue};W.displayName="KendoColorPicker";exports.ColorPicker=W;exports.ColorPickerPropsContext=ue;
+"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;