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