@progress/kendo-react-inputs 7.4.0 → 7.5.0-develop.2

package/colors/ColorInput.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";const u=require("react"),l=require("../numerictextbox/NumericTextBox.js"),m=require("./HexInput.js"),x=require("@progress/kendo-react-buttons"),o=require("@progress/kendo-react-labels"),k=require("@progress/kendo-svg-icons"),c=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function f(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const a=f(u),r=["rgba","rgb","hex"];class g extends a.Component{constructor(e){super(e),this.onRgbaRChange=t=>{this.dispatchRgbaChange({r:t.value},t)},this.onRgbaGChange=t=>{this.dispatchRgbaChange({g:t.value},t)},this.onRgbaBChange=t=>{this.dispatchRgbaChange({b:t.value},t)},this.onRgbaAChange=t=>{this.dispatchRgbaChange({a:t.value},t)},this.state={inputMode:e.defaultInputMode||r[1]}}render(){const e=c.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientHex]),n=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),p=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientG]),d=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientB]),h=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientA]),b=e.toLanguageString(s.colorGradientToggleInputsButton,s.messages[s.colorGradientToggleInputsButton]);return a.createElement("div",{className:"k-colorgradient-inputs k-hstack"},a.createElement("div",{className:"k-vstack"},a.createElement(x.Button,{"aria-label":b,fillMode:"flat",icon:"caret-alt-expand",svgIcon:k.caretAltExpandIcon,className:"k-colorgradient-toggle-mode k-icon-button",onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement("span",{className:"k-hex-value k-textbox k-input"},a.createElement(m,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled})),a.createElement(o.Label,{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&a.createElement(a.Fragment,null,a.createElement("div",{className:"k-vstack"},a.createElement(l.NumericTextBox,{inputType:"number",value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled}),a.createElement(o.Label,{className:"k-colorgradient-input-label"},n)),a.createElement("div",{className:"k-vstack"},a.createElement(l.NumericTextBox,{inputType:"number",value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled}),a.createElement(o.Label,{className:"k-colorgradient-input-label"},p)),a.createElement("div",{className:"k-vstack"},a.createElement(l.NumericTextBox,{inputType:"number",value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled}),a.createElement(o.Label,{className:"k-colorgradient-input-label"},d))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(l.NumericTextBox,{inputType:"number",value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled}),this.props.opacity&&a.createElement(o.Label,{className:"k-colorgradient-input-label"},h)))}dispatchRgbaChange(e,t){let n={...this.props.rgba};e.r!==void 0&&(n.r=e.r),e.g!==void 0&&(n.g=e.g),e.b!==void 0&&(n.b=e.b),e.a!==void 0&&(n.a=e.a),this.props.onRgbaChange(n,t)}onToggleModeChange(){const e=r.length-1===r.indexOf(this.state.inputMode)?0:r.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:r[e]});else{const t=r[e]==="rgba"?e+1:e;this.setState({inputMode:r[t]})}}}c.registerForIntl(g);c.registerForLocalization(g);module.exports=g;
+"use client";"use strict";const b=require("react"),o=require("../numerictextbox/NumericTextBox.js"),u=require("./HexInput.js"),m=require("@progress/kendo-react-buttons"),x=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function k(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const a=k(b),r=["rgba","rgb","hex"];class c extends a.Component{constructor(e){super(e),this.onRgbaRChange=t=>{this.dispatchRgbaChange({r:t.value},t)},this.onRgbaGChange=t=>{this.dispatchRgbaChange({g:t.value},t)},this.onRgbaBChange=t=>{this.dispatchRgbaChange({b:t.value},t)},this.onRgbaAChange=t=>{this.dispatchRgbaChange({a:t.value},t)},this.state={inputMode:e.defaultInputMode||r[1]}}render(){const e=l.provideLocalizationService(this),t=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientHex]),n=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientR]),g=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientG]),p=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientB]),d=e.toLanguageString(s.colorGradientR,s.messages[s.colorGradientA]),h=e.toLanguageString(s.colorGradientToggleInputsButton,s.messages[s.colorGradientToggleInputsButton]);return a.createElement("div",{className:"k-colorgradient-inputs k-hstack"},a.createElement("div",{className:"k-vstack"},a.createElement(m.Button,{"aria-label":h,fillMode:"flat",icon:"caret-alt-expand",svgIcon:x.caretAltExpandIcon,className:"k-colorgradient-toggle-mode",onClick:this.onToggleModeChange.bind(this)})),this.state.inputMode==="hex"&&a.createElement("div",{className:"k-vstack k-flex-1"},a.createElement("span",{className:"k-hex-value k-textbox k-input"},a.createElement(u,{hex:this.props.hex,onHexChange:this.props.onHexChange,disabled:this.props.disabled})),a.createElement("label",{className:"k-colorgradient-input-label"},t)),(this.state.inputMode==="rgb"||this.state.inputMode==="rgba")&&a.createElement(a.Fragment,null,a.createElement("div",{className:"k-vstack"},a.createElement(o.NumericTextBox,{inputType:"number",value:this.props.rgba.r,ariaLabel:String(this.props.rgba.r),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaRChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},n)),a.createElement("div",{className:"k-vstack"},a.createElement(o.NumericTextBox,{inputType:"number",value:this.props.rgba.g,ariaLabel:String(this.props.rgba.g),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaGChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},g)),a.createElement("div",{className:"k-vstack"},a.createElement(o.NumericTextBox,{inputType:"number",value:this.props.rgba.b,ariaLabel:String(this.props.rgba.b),min:0,max:255,spinners:!1,format:"n",onChange:this.onRgbaBChange,disabled:this.props.disabled}),a.createElement("label",{className:"k-colorgradient-input-label"},p))),this.state.inputMode==="rgba"&&a.createElement("div",{className:"k-vstack"},this.props.opacity&&a.createElement(o.NumericTextBox,{inputType:"number",value:this.props.rgba.a,ariaLabel:String(this.props.rgba.a),min:0,max:1,step:.01,spinners:!1,format:"n2",onChange:this.onRgbaAChange,disabled:this.props.disabled}),this.props.opacity&&a.createElement("label",{className:"k-colorgradient-input-label"},d)))}dispatchRgbaChange(e,t){let n={...this.props.rgba};e.r!==void 0&&(n.r=e.r),e.g!==void 0&&(n.g=e.g),e.b!==void 0&&(n.b=e.b),e.a!==void 0&&(n.a=e.a),this.props.onRgbaChange(n,t)}onToggleModeChange(){const e=r.length-1===r.indexOf(this.state.inputMode)?0:r.indexOf(this.state.inputMode)+1;if(this.props.opacity)this.setState({inputMode:r[e]});else{const t=r[e]==="rgba"?e+1:e;this.setState({inputMode:r[t]})}}}l.registerForIntl(c);l.registerForLocalization(c);module.exports=c;

package/colors/ColorInput.mjs

@@ -6,48 +6,47 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
-import { NumericTextBox as g } from "../numerictextbox/NumericTextBox.mjs";
-import b from "./HexInput.mjs";
-import { Button as u } from "@progress/kendo-react-buttons";
-import { Label as o } from "@progress/kendo-react-labels";
-import { caretAltExpandIcon as f } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as x, registerForIntl as k, registerForLocalization as v } from "@progress/kendo-react-intl";
-import { colorGradientR as n, messages as r, colorGradientHex as C, colorGradientG as E, colorGradientB as M, colorGradientA as R, colorGradientToggleInputsButton as l } from "../messages/index.mjs";
+import * as a from "react";
+import { NumericTextBox as o } from "../numerictextbox/NumericTextBox.mjs";
+import m from "./HexInput.mjs";
+import { Button as b } from "@progress/kendo-react-buttons";
+import { caretAltExpandIcon as u } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as x, registerForIntl as f, registerForLocalization as k } from "@progress/kendo-react-intl";
+import { colorGradientR as n, messages as r, colorGradientHex as v, colorGradientG as C, colorGradientB as E, colorGradientA as M, colorGradientToggleInputsButton as l } from "../messages/index.mjs";
 const i = ["rgba", "rgb", "hex"];
-class p extends t.Component {
+class g extends a.Component {
   constructor(e) {
-    super(e), this.onRgbaRChange = (a) => {
-      this.dispatchRgbaChange({ r: a.value }, a);
-    }, this.onRgbaGChange = (a) => {
-      this.dispatchRgbaChange({ g: a.value }, a);
-    }, this.onRgbaBChange = (a) => {
-      this.dispatchRgbaChange({ b: a.value }, a);
-    }, this.onRgbaAChange = (a) => {
-      this.dispatchRgbaChange({ a: a.value }, a);
+    super(e), this.onRgbaRChange = (t) => {
+      this.dispatchRgbaChange({ r: t.value }, t);
+    }, this.onRgbaGChange = (t) => {
+      this.dispatchRgbaChange({ g: t.value }, t);
+    }, this.onRgbaBChange = (t) => {
+      this.dispatchRgbaChange({ b: t.value }, t);
+    }, this.onRgbaAChange = (t) => {
+      this.dispatchRgbaChange({ a: t.value }, t);
     }, this.state = { inputMode: e.defaultInputMode || i[1] };
   }
   render() {
-    const e = x(this), a = e.toLanguageString(n, r[C]), s = e.toLanguageString(n, r[n]), c = e.toLanguageString(n, r[E]), h = e.toLanguageString(n, r[M]), d = e.toLanguageString(n, r[R]), m = e.toLanguageString(l, r[l]);
-    return /* @__PURE__ */ t.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
-      u,
+    const e = x(this), t = e.toLanguageString(n, r[v]), s = e.toLanguageString(n, r[n]), p = e.toLanguageString(n, r[C]), c = e.toLanguageString(n, r[E]), h = e.toLanguageString(n, r[M]), d = e.toLanguageString(l, r[l]);
+    return /* @__PURE__ */ a.createElement("div", { className: "k-colorgradient-inputs k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
+      b,
       {
-        "aria-label": m,
+        "aria-label": d,
         fillMode: "flat",
         icon: "caret-alt-expand",
-        svgIcon: f,
-        className: "k-colorgradient-toggle-mode k-icon-button",
+        svgIcon: u,
+        className: "k-colorgradient-toggle-mode",
         onClick: this.onToggleModeChange.bind(this)
       }
-    )), this.state.inputMode === "hex" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ t.createElement("span", { className: "k-hex-value k-textbox k-input" }, /* @__PURE__ */ t.createElement(
-      b,
+    )), this.state.inputMode === "hex" && /* @__PURE__ */ a.createElement("div", { className: "k-vstack k-flex-1" }, /* @__PURE__ */ a.createElement("span", { className: "k-hex-value k-textbox k-input" }, /* @__PURE__ */ a.createElement(
+      m,
       {
         hex: this.props.hex,
         onHexChange: this.props.onHexChange,
         disabled: this.props.disabled
       }
-    )), /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, a)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
-      g,
+    )), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, t)), (this.state.inputMode === "rgb" || this.state.inputMode === "rgba") && /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
+      o,
       {
         inputType: "number",
         value: this.props.rgba.r,
@@ -59,8 +58,8 @@ class p extends t.Component {
         onChange: this.onRgbaRChange,
         disabled: this.props.disabled
       }
-    ), /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
-      g,
+    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, s)), /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
+      o,
       {
         inputType: "number",
         value: this.props.rgba.g,
@@ -72,8 +71,8 @@ class p extends t.Component {
         onChange: this.onRgbaGChange,
         disabled: this.props.disabled
       }
-    ), /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, c)), /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ t.createElement(
-      g,
+    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, p)), /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, /* @__PURE__ */ a.createElement(
+      o,
       {
         inputType: "number",
         value: this.props.rgba.b,
@@ -85,8 +84,8 @@ class p extends t.Component {
         onChange: this.onRgbaBChange,
         disabled: this.props.disabled
       }
-    ), /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, h))), this.state.inputMode === "rgba" && /* @__PURE__ */ t.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ t.createElement(
-      g,
+    ), /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, c))), this.state.inputMode === "rgba" && /* @__PURE__ */ a.createElement("div", { className: "k-vstack" }, this.props.opacity && /* @__PURE__ */ a.createElement(
+      o,
       {
         inputType: "number",
         value: this.props.rgba.a,
@@ -99,24 +98,24 @@ class p extends t.Component {
         onChange: this.onRgbaAChange,
         disabled: this.props.disabled
       }
-    ), this.props.opacity && /* @__PURE__ */ t.createElement(o, { className: "k-colorgradient-input-label" }, d)));
+    ), this.props.opacity && /* @__PURE__ */ a.createElement("label", { className: "k-colorgradient-input-label" }, h)));
   }
-  dispatchRgbaChange(e, a) {
+  dispatchRgbaChange(e, t) {
     let s = { ...this.props.rgba };
-    e.r !== void 0 && (s.r = e.r), e.g !== void 0 && (s.g = e.g), e.b !== void 0 && (s.b = e.b), e.a !== void 0 && (s.a = e.a), this.props.onRgbaChange(s, a);
+    e.r !== void 0 && (s.r = e.r), e.g !== void 0 && (s.g = e.g), e.b !== void 0 && (s.b = e.b), e.a !== void 0 && (s.a = e.a), this.props.onRgbaChange(s, t);
   }
   onToggleModeChange() {
     const e = i.length - 1 === i.indexOf(this.state.inputMode) ? 0 : i.indexOf(this.state.inputMode) + 1;
     if (this.props.opacity)
       this.setState({ inputMode: i[e] });
     else {
-      const a = i[e] === "rgba" ? e + 1 : e;
-      this.setState({ inputMode: i[a] });
+      const t = i[e] === "rgba" ? e + 1 : e;
+      this.setState({ inputMode: i[t] });
     }
   }
 }
-k(p);
-v(p);
+f(g);
+k(g);
 export {
-  p as default
+  g as default
 };

package/colors/ColorPalette.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 T=require("react"),s=require("prop-types"),N=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),R=require("../package-metadata.js"),D=require("./models/palette-presets.js"),I=require("./utils/misc.js"),L=require("./utils/color-parser.js");function O(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const a=O(T),b=24,C=10,m="office",c=class c extends a.Component{constructor(t){super(t),this.wrapper=null,this.paletteService=null,this.focus=()=>{this.wrapper&&this.wrapper.focus()},this.onKeyDown=e=>{switch(e.keyCode){case r.Keys.down:this.handleCellNavigation(0,1);break;case r.Keys.up:this.handleCellNavigation(0,-1);break;case r.Keys.right:this.handleCellNavigation(1,0);break;case r.Keys.left:this.handleCellNavigation(-1,0);break;case r.Keys.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{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})},r.validatePackage(R.packageMetadata),this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new N.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor),l=r.classNames("k-colorpalette",{"k-disabled":this.props.disabled},this.props.className);return t.colors.length?a.createElement("div",{id:this.props.id,role:"grid",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:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:h=>this.wrapper=h},a.createElement("table",{className:"k-colorpalette-table",role:"presentation"},a.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:L.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=D.PALETTEPRESETS[this.props.palette];return I.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||C}:{colors:[],columns:0}}else return{colors:this.props.palette||[],columns:this.props.columns||C}}renderRows(t,e,o){return t.map((i,l)=>a.createElement("tr",{role:"row",key:l},this.renderColumns(i,l,e,o)))}renderColumns(t,e,o,i){const l=o!==void 0&&o.row===e,h=o&&o.col,E=i!==void 0&&i.row===e,w=i&&i.col,f=typeof this.props.tileSize!="number"?this.props.tileSize:{width:this.props.tileSize,height:this.props.tileSize},g=f.width+"px",P=f.height+"px";return t.map((u,d)=>{const v=l&&h===d,k=r.classNames("k-colorpalette-tile",{"k-selected":v,"k-focus":E&&w===d});return a.createElement("td",{role:"gridcell",className:k,"aria-label":u,"aria-selected":v?!0:this.props.disabled?void 0:!1,style:{backgroundColor:u,width:g,height:P,minWidth:g},onClick:F=>this.onColorClick(u,F),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};c.displayName="ColorPalette",c.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string},c.defaultProps={palette:m,tileSize:b};let p=c;const S=r.createPropsContext(),y=r.withIdHOC(r.withPropsContext(S,p));y.displayName="KendoReactColorPalette";exports.ColorPalette=y;exports.ColorPalettePropsContext=S;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=C;exports.DEFAULT_PRESET=m;exports.DEFAULT_TILE_SIZE=b;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),s=require("prop-types"),N=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),R=require("../package-metadata.js"),D=require("./models/palette-presets.js"),I=require("./utils/misc.js"),L=require("./utils/color-parser.js");function O(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const a=O(T),b=24,C=10,m="office",c=class c extends a.Component{constructor(t){super(t),this.wrapper=null,this.paletteService=null,this.focus=()=>{this.wrapper&&this.wrapper.focus()},this.onKeyDown=e=>{switch(e.keyCode){case r.Keys.down:this.handleCellNavigation(0,1);break;case r.Keys.up:this.handleCellNavigation(0,-1);break;case r.Keys.right:this.handleCellNavigation(1,0);break;case r.Keys.left:this.handleCellNavigation(-1,0);break;case r.Keys.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{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})},r.validatePackage(R.packageMetadata),this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new N.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor),l=r.classNames("k-colorpalette",{"k-disabled":this.props.disabled},this.props.className);return t.colors.length?a.createElement("div",{id:this.props.id,role:"grid",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:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:h=>this.wrapper=h},a.createElement("table",{className:"k-colorpalette-table",role:"presentation"},a.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:L.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=D.PALETTEPRESETS[this.props.palette];return I.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||C}:{colors:[],columns:0}}else return{colors:this.props.palette||[],columns:this.props.columns||C}}renderRows(t,e,o){return t.map((i,l)=>a.createElement("tr",{role:"row",key:l},this.renderColumns(i,l,e,o)))}renderColumns(t,e,o,i){const l=o!==void 0&&o.row===e,h=o&&o.col,E=i!==void 0&&i.row===e,w=i&&i.col,f=typeof this.props.tileSize!="number"?this.props.tileSize:{width:this.props.tileSize,height:this.props.tileSize},g=f.width+"px",P=f.height+"px";return t.map((u,d)=>{const v=l&&h===d,k=r.classNames("k-colorpalette-tile",{"k-selected":v,"k-focus":E&&w===d});return a.createElement("td",{role:"gridcell",className:k,"aria-label":u,"aria-selected":v?!0:this.props.disabled?void 0:!1,style:{backgroundColor:u,width:g,height:P,minWidth:g},onClick:F=>this.onColorClick(u,F),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};c.displayName="ColorPalette",c.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string},c.defaultProps={palette:m,tileSize:b};let p=c;const S=r.createPropsContext(),y=r.withIdHOC(r.withPropsContext(S,p));y.displayName="KendoReactColorPalette";exports.ColorPalette=y;exports.ColorPalettePropsContext=S;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=C;exports.DEFAULT_PRESET=m;exports.DEFAULT_TILE_SIZE=b;

package/colors/ColorPalette.mjs

@@ -49,7 +49,7 @@ const x = 24, g = 10, z = "office", n = class n extends l.Component {
     }, this.onBlur = () => {
       this.setState({ focusedColor: void 0 });
     }, k(I), this.state = {
-      selectedColor: this.props.value !== void 0 ? this.props.value : this.props.defaultValue,
+      selectedColor: this.props.value !== void 0 ? this.props.value : this.props.defaultValue ? this.props.defaultValue : void 0,
       isFirstRender: !0
     };
   }

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 j=require("react"),l=require("prop-types"),m=require("@progress/kendo-react-common"),d=require("@progress/kendo-react-buttons"),h=require("@progress/kendo-svg-icons"),_=require("./ColorPalette.js"),z=require("./ColorGradient.js"),D=require("../package-metadata.js"),H=require("@progress/kendo-react-intl"),n=require("../messages/index.js");function A(e){const v=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(v,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return v.default=e,Object.freeze(v)}const t=A(j),S="rgba(255, 255, 255, 1)",y=t.forwardRef((e,v)=>{m.validatePackage(D.packageMetadata);const o=t.useRef(null),r=t.useRef(null),G=t.useRef(null),{defaultValue:s=S,showButtons:k=!0,showPreview:R=!0,showClearButton:q=!0}=e,[u,L]=t.useState((e.view||"ColorGradient")==="ColorGradient"),[c,g]=t.useState(e.value||s),[C,b]=t.useState(e.value||s),E=e.value!==void 0?e.value:C;t.useEffect(()=>{g(e.value||s)},[e.value,s]);const f=H.useLocalization(),P=t.useCallback(()=>{o.current&&o.current.focus()},[o]);t.useImperativeHandle(o,()=>({element:r.current,focus:P,props:e,value:E}),[E,P,e]),t.useImperativeHandle(v,()=>o.current);const w=t.useCallback(a=>{(a==="ColorGradient"&&!u||a==="ColorPalette"&&u)&&L(!u)},[u]),x=t.useCallback(a=>{if(g(s),e.onPreviewChange){const i={value:s,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,i)}},[s,e.onPreviewChange]),B=t.useCallback(a=>{if(g(a.value),e.onPreviewChange){const i={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,i)}},[e.onPreviewChange]),F=t.useCallback(a=>{if(b(c),e.onChange){const i={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,i)}},[c,e.onChange]),M=t.useCallback(()=>{b(S)},[]),T=t.useCallback(a=>{if(g(C),e.onPreviewChange){const i={value:C,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,i)}},[C,e.onPreviewChange]),N=t.useCallback(a=>{r.current&&!(a.nativeEvent.target instanceof HTMLInputElement)&&r.current.focus()},[r]),V=t.useCallback(a=>{var I;if((!a.relatedTarget||!((I=r.current)!=null&&I.contains(a.relatedTarget)))&&(k||b(c),!k&&e.onChange)){const O={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,O)}},[c,k,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:r,tabIndex:m.getTabIndex(e.tabIndex,e.disabled),className:m.classNames("k-flatcolorpicker k-coloreditor",{"k-disabled":e.disabled},e.className),onBlur:V},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(d.ButtonGroup,{className:"k-button-group-flat"},t.createElement(d.Button,{type:"button","aria-label":f.toLanguageString(n.flatColorPickerColorGradientBtn,n.messages[n.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",selected:u,onClick:()=>w("ColorGradient"),icon:"droplet-slider",svgIcon:h.dropletSliderIcon}),t.createElement(d.Button,{type:"button","aria-label":f.toLanguageString(n.flatColorPickerColorPaletteBtn,n.messages[n.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",selected:!u,onClick:()=>w("ColorPalette"),icon:"palette",svgIcon:h.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},q&&t.createElement(d.Button,{type:"button",fillMode:"flat",onClick:x,"aria-label":f.toLanguageString(n.flatColorPickerClearBtn,n.messages[n.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:h.dropletSlashIcon}),R&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:"k-coloreditor-preview-color k-color-preview",style:{background:c}}),t.createElement("span",{className:"k-coloreditor-current-color k-color-preview",style:{background:C},onClick:T})))),t.createElement("div",{className:"k-coloreditor-views k-vstack"},u?t.createElement(z.ColorGradient,{ref:G,role:"none",tabIndex:-1,ariaLabel:void 0,value:c,onChange:B,onFocus:N,opacity:e.opacity,format:e.format}):t.createElement(_.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:B,onFocus:N})),k&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end"},t.createElement(d.Button,{type:"button",className:"k-coloreditor-cancel",onClick:M},n.messages[n.flatColorPickerCancelBtn]),t.createElement(d.Button,{type:"button",className:"k-coloreditor-apply k-primary",onClick:F},n.messages[n.flatColorPickerApplyBtn]))))}),K={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=K;exports.FlatColorPicker=y;
+"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;

package/colors/FlatColorPicker.mjs

@@ -8,99 +8,99 @@
 "use client";
 import * as e from "react";
 import l from "prop-types";
-import { validatePackage as q, getTabIndex as D, classNames as K } from "@progress/kendo-react-common";
-import { ButtonGroup as _, Button as u } from "@progress/kendo-react-buttons";
-import { dropletSliderIcon as j, paletteIcon as J, dropletSlashIcon as O } from "@progress/kendo-svg-icons";
-import { ColorPalette as Q } from "./ColorPalette.mjs";
-import { ColorGradient as U } from "./ColorGradient.mjs";
-import { packageMetadata as W } from "../package-metadata.mjs";
-import { useLocalization as X } from "@progress/kendo-react-intl";
-import { flatColorPickerColorGradientBtn as w, messages as v, flatColorPickerColorPaletteBtn as B, flatColorPickerClearBtn as N, flatColorPickerCancelBtn as Y, flatColorPickerApplyBtn as Z } from "../messages/index.mjs";
-const I = "rgba(255, 255, 255, 1)", L = e.forwardRef((a, G) => {
-  q(W);
-  const s = e.useRef(null), i = e.useRef(null), S = e.useRef(null), { defaultValue: r = I, showButtons: C = !0, showPreview: x = !0, showClearButton: R = !0 } = a, [c, F] = e.useState((a.view || "ColorGradient") === "ColorGradient"), [o, m] = e.useState(a.value || r), [d, k] = e.useState(a.value || r), g = a.value !== void 0 ? a.value : d;
+import { validatePackage as q, getTabIndex as D, classNames as b } from "@progress/kendo-react-common";
+import { ButtonGroup as K, Button as u } from "@progress/kendo-react-buttons";
+import { dropletSliderIcon as _, paletteIcon as j, dropletSlashIcon as J } from "@progress/kendo-svg-icons";
+import { ColorPalette as O } from "./ColorPalette.mjs";
+import { ColorGradient as Q } from "./ColorGradient.mjs";
+import { packageMetadata as U } from "../package-metadata.mjs";
+import { useLocalization as W } from "@progress/kendo-react-intl";
+import { flatColorPickerColorGradientBtn as N, messages as m, flatColorPickerColorPaletteBtn as B, flatColorPickerClearBtn as I, flatColorPickerCancelBtn as X, flatColorPickerApplyBtn as Y } from "../messages/index.mjs";
+const L = e.forwardRef((a, G) => {
+  q(U);
+  const v = e.useRef(null), s = e.useRef(null), S = e.useRef(null), { defaultValue: n, showButtons: C = !0, showPreview: x = !0, showClearButton: R = !0 } = a, [c, F] = e.useState((a.view || "ColorGradient") === "ColorGradient"), [o, d] = e.useState(a.value || n || void 0), [r, k] = e.useState(a.value || n || void 0), f = a.value !== void 0 ? a.value : void 0;
   e.useEffect(() => {
-    m(a.value || r);
-  }, [a.value, r]);
-  const f = X(), b = e.useCallback(
+    d(a.value);
+  }, [a.value]);
+  const g = W(), h = e.useCallback(
     () => {
-      s.current && s.current.focus();
+      v.current && v.current.focus();
     },
-    [s]
+    [v]
   );
-  e.useImperativeHandle(s, () => ({
-    element: i.current,
-    focus: b,
+  e.useImperativeHandle(v, () => ({
+    element: s.current,
+    focus: h,
     props: a,
-    value: g
-  }), [g, b, a]), e.useImperativeHandle(G, () => s.current);
-  const h = e.useCallback(
+    value: f
+  }), [f, h, a]), e.useImperativeHandle(G, () => v.current);
+  const E = e.useCallback(
     (t) => {
       (t === "ColorGradient" && !c || t === "ColorPalette" && c) && F(!c);
     },
     [c]
   ), V = e.useCallback(
     (t) => {
-      if (m(r), a.onPreviewChange) {
-        const n = {
-          value: r,
+      if (n ? (d(n), k(n)) : (d(void 0), k(void 0)), a.onPreviewChange) {
+        const i = {
+          value: n || void 0,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onPreviewChange.call(void 0, n);
+        a.onPreviewChange.call(void 0, i);
       }
     },
-    [r, a.onPreviewChange]
-  ), E = e.useCallback(
+    [n, a.onPreviewChange]
+  ), y = e.useCallback(
     (t) => {
-      if (m(t.value), a.onPreviewChange) {
-        const n = {
+      if (d(t.value), a.onPreviewChange) {
+        const i = {
           value: t.value,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t.syntheticEvent
         };
-        a.onPreviewChange.call(void 0, n);
+        a.onPreviewChange.call(void 0, i);
       }
     },
     [a.onPreviewChange]
   ), T = e.useCallback(
     (t) => {
-      if (k(o), a.onChange) {
-        const n = {
+      if (o !== void 0 && k(o), a.onChange) {
+        const i = {
           value: o,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onChange.call(void 0, n);
+        a.onChange.call(void 0, i);
       }
     },
     [o, a.onChange]
   ), M = e.useCallback(
     () => {
-      k(I);
+      d(r);
     },
-    []
-  ), H = e.useCallback(
+    [r]
+  ), z = e.useCallback(
     (t) => {
-      if (m(d), a.onPreviewChange) {
-        const n = {
-          value: d,
+      if (d(r), a.onPreviewChange) {
+        const i = {
+          value: r,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onPreviewChange.call(void 0, n);
+        a.onPreviewChange.call(void 0, i);
       }
     },
-    [d, a.onPreviewChange]
-  ), y = e.useCallback(
+    [r, a.onPreviewChange]
+  ), w = e.useCallback(
     (t) => {
-      i.current && !(t.nativeEvent.target instanceof HTMLInputElement) && i.current.focus();
+      s.current && !(t.nativeEvent.target instanceof HTMLInputElement) && s.current.focus();
     },
-    [i]
-  ), z = e.useCallback(
+    [s]
+  ), H = e.useCallback(
     (t) => {
       var P;
-      if ((!t.relatedTarget || !((P = i.current) != null && P.contains(t.relatedTarget))) && (C || k(o), !C && a.onChange)) {
+      if ((!t.relatedTarget || !((P = s.current) != null && P.contains(t.relatedTarget))) && (!C && o !== void 0 && k(o), !C && a.onChange)) {
         const A = {
           value: o,
           nativeEvent: t.nativeEvent,
@@ -120,46 +120,46 @@ const I = "rgba(255, 255, 255, 1)", L = e.forwardRef((a, G) => {
       "aria-labelledby": a.ariaLabelledBy,
       "aria-disabled": a.disabled ? "true" : void 0,
       style: a.style,
-      ref: i,
+      ref: s,
       tabIndex: D(a.tabIndex, a.disabled),
-      className: K(
+      className: b(
         "k-flatcolorpicker k-coloreditor",
         {
           "k-disabled": a.disabled
         },
         a.className
       ),
-      onBlur: z
+      onBlur: H
     },
-    /* @__PURE__ */ e.createElement(e.Fragment, null, a.header || /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, /* @__PURE__ */ e.createElement(_, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement(e.Fragment, null, a.header || /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, /* @__PURE__ */ e.createElement(K, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
       u,
       {
         type: "button",
-        "aria-label": f.toLanguageString(
-          w,
-          v[w]
+        "aria-label": g.toLanguageString(
+          N,
+          m[N]
         ),
         togglable: !0,
         fillMode: "flat",
         selected: c,
-        onClick: () => h("ColorGradient"),
+        onClick: () => E("ColorGradient"),
         icon: "droplet-slider",
-        svgIcon: j
+        svgIcon: _
       }
     ), /* @__PURE__ */ e.createElement(
       u,
       {
         type: "button",
-        "aria-label": f.toLanguageString(
+        "aria-label": g.toLanguageString(
           B,
-          v[B]
+          m[B]
         ),
         togglable: !0,
         fillMode: "flat",
         selected: !c,
-        onClick: () => h("ColorPalette"),
+        onClick: () => E("ColorPalette"),
         icon: "palette",
-        svgIcon: J
+        svgIcon: j
       }
     ))), /* @__PURE__ */ e.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, R && /* @__PURE__ */ e.createElement(
       u,
@@ -167,29 +167,29 @@ const I = "rgba(255, 255, 255, 1)", L = e.forwardRef((a, G) => {
         type: "button",
         fillMode: "flat",
         onClick: V,
-        "aria-label": f.toLanguageString(
-          N,
-          v[N]
+        "aria-label": g.toLanguageString(
+          I,
+          m[I]
         ),
         icon: "droplet-slash",
-        svgIcon: O
+        svgIcon: J
       }
-    ), x && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: o } }), /* @__PURE__ */ e.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: d }, onClick: H })))), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, c ? /* @__PURE__ */ e.createElement(
-      U,
+    ), x && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement("span", { className: b("k-coloreditor-preview-color", "k-color-preview", { "k-no-color": f === void 0 }) }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: o || void 0 } })), /* @__PURE__ */ e.createElement("span", { className: b("k-coloreditor-current-color", "k-color-preview", { "k-no-color": r === void 0 }), onClick: z }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: r || void 0 } }))))), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, c ? /* @__PURE__ */ e.createElement(
+      Q,
       {
         ref: S,
         role: "none",
         tabIndex: -1,
         ariaLabel: void 0,
         value: o,
-        onChange: E,
-        onFocus: y,
+        onChange: y,
+        onFocus: w,
         opacity: a.opacity,
         format: a.format
       }
-    ) : /* @__PURE__ */ e.createElement(Q, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: o, onChange: E, onFocus: y })), C && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" }, /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: M }, v[Y]), /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-apply k-primary", onClick: T }, v[Z])))
+    ) : /* @__PURE__ */ e.createElement(O, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: o, onChange: y, onFocus: w })), C && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: M }, m[X]), /* @__PURE__ */ e.createElement(u, { type: "button", themeColor: "primary", className: "k-coloreditor-apply", onClick: T }, m[Y])))
   );
-}), $ = {
+}), Z = {
   id: l.string,
   style: l.any,
   className: l.string,
@@ -210,7 +210,7 @@ const I = "rgba(255, 255, 255, 1)", L = e.forwardRef((a, G) => {
   showButtons: l.bool
 };
 L.displayName = "KendoFlatColorPicker";
-L.propTypes = $;
+L.propTypes = Z;
 export {
   L as FlatColorPicker
 };

package/colors/Picker.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 i=require("react"),l=require("@progress/kendo-react-popup"),s=require("@progress/kendo-react-common");function u(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const o=u(i),m="bottom",d="top",r=e=>{const n=e.popupSettings||{},t=e.dir==="rtl"?"right":"left",c=o.useMemo(()=>({horizontal:t,vertical:m}),[t]),a=o.useMemo(()=>({horizontal:t,vertical:d}),[t]);return o.createElement(o.Fragment,null,e.input,e.button,o.createElement(l.Popup,{style:{...(n||{}).style,direction:e.dir},...n,anchor:e.popupAnchor,anchorAlign:c,popupAlign:a,show:e.open,onOpen:e.onOpen,onClose:e.onClose,className:s.classNames("k-reset",n.className)},e.content))};r.displayName="KendoPickerComponent";exports.Picker=r;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),i=require("@progress/kendo-react-popup"),u=require("@progress/kendo-react-common");function s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const o=s(a),p="bottom",m="top",r=e=>{const n=e.popupSettings||{},t=e.dir==="rtl"?"right":"left",c=o.useMemo(()=>({horizontal:t,vertical:p}),[t]),l=o.useMemo(()=>({horizontal:t,vertical:m}),[t]);return o.createElement(o.Fragment,null,e.input,e.button,o.createElement(i.Popup,{style:{...(n||{}).style,direction:e.dir},...n,anchor:e.popupAnchor,anchorAlign:c,popupAlign:l,show:e.open,onOpen:e.onOpen,onClose:e.onClose,className:u.classNames(n.className),popupClass:"k-color-picker-popup"},e.content))};r.displayName="KendoPickerComponent";exports.Picker=r;

package/colors/Picker.mjs

@@ -6,32 +6,33 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-import { Popup as l } from "@progress/kendo-react-popup";
+import * as o from "react";
+import { Popup as i } from "@progress/kendo-react-popup";
 import { classNames as a } from "@progress/kendo-react-common";
 const r = "bottom", s = "top", m = (t) => {
-  const o = t.popupSettings || {}, n = t.dir === "rtl" ? "right" : "left", c = e.useMemo(
-    () => ({ horizontal: n, vertical: r }),
-    [n]
-  ), i = e.useMemo(
-    () => ({ horizontal: n, vertical: s }),
-    [n]
+  const n = t.popupSettings || {}, e = t.dir === "rtl" ? "right" : "left", c = o.useMemo(
+    () => ({ horizontal: e, vertical: r }),
+    [e]
+  ), l = o.useMemo(
+    () => ({ horizontal: e, vertical: s }),
+    [e]
   );
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, t.input, t.button, /* @__PURE__ */ e.createElement(
-    l,
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, t.input, t.button, /* @__PURE__ */ o.createElement(
+    i,
     {
       style: {
-        ...(o || {}).style,
+        ...(n || {}).style,
         direction: t.dir
       },
-      ...o,
+      ...n,
       anchor: t.popupAnchor,
       anchorAlign: c,
-      popupAlign: i,
+      popupAlign: l,
       show: t.open,
       onOpen: t.onOpen,
       onClose: t.onClose,
-      className: a("k-reset", o.className)
+      className: a(n.className),
+      popupClass: "k-color-picker-popup"
     },
     t.content
   ));