@progress/kendo-react-inputs 10.2.0-develop.2 → 10.2.0-develop.4

package/colors/ColorGradient.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 E=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),H=require("../package-metadata.js"),m=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),w=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),G=require("./ColorContrastSvg.js"),L=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function D(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=D(E),A="rgba",k="rgba(255, 255, 255, 1)",b=2,C=5,c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),p=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(H.packageMetadata,{component:"ColorGradient"});const s=t.value||t.defaultValue||o.parseColor(k,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid)}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const t={};if(!this.state.isFirstRender){const s=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*s.height,a=this.state.hsva.s*s.width;t.top=`${e}px`,t.left=`${a}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),p=v.fitIntoBounds(t,0,a),y=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(y,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){v.isPresent(o.parseColor(t,"hex"))||(t=k);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),i=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=L.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),"aria-disabled":this.props.disabled?"true":void 0,style:{position:"relative",...this.props.style},ref:this.wrapperRef,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:`k-colorgradient-canvas ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>this.gradientWrapper=s?s.element:void 0},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(G.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:`k-hsv-controls ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(m.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(g.colorGradientHueSliderLabel,g.messages[g.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(m.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>this.alphaSlider=s}))),l.createElement(w,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format,size:this.props.size,fillMode:this.props.fillMode}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(r.WatermarkOverlay,null))}};c.displayName="ColorGradient",c.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:"medium"};let f=c;const S=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(S,f));R.displayName="KendoReactColorGradient";exports.ColorGradient=R;exports.ColorGradientPropsContext=S;exports.ColorGradientWithoutContext=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),H=require("../package-metadata.js"),m=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),w=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),G=require("./ColorContrastSvg.js"),L=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function D(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=D(E),A="rgba",k="rgba(255, 255, 255, 1)",b=2,C=5,c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),p=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(H.packageMetadata,{component:"ColorGradient"});const s=t.value||t.defaultValue||o.parseColor(k,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid)}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const t={};if(!this.state.isFirstRender){const s=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*s.height,a=this.state.hsva.s*s.width;t.top=`${e}px`,t.left=`${a}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),p=v.fitIntoBounds(t,0,a),y=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(y,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){v.isPresent(o.parseColor(t,"hex"))||(t=k);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),i=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=L.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),"aria-disabled":this.props.disabled?"true":void 0,style:{position:"relative",...this.props.style},ref:this.wrapperRef,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:`k-colorgradient-canvas ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>{this.gradientWrapper=s?s.element:void 0}},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(G.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:`k-hsv-controls ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(m.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(g.colorGradientHueSliderLabel,g.messages[g.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(m.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>{this.alphaSlider=s}}))),l.createElement(w,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format,size:this.props.size,fillMode:this.props.fillMode}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(r.WatermarkOverlay,null))}};c.displayName="ColorGradient",c.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:"medium"};let f=c;const S=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(S,f));R.displayName="KendoReactColorGradient";exports.ColorGradient=R;exports.ColorGradientPropsContext=S;exports.ColorGradientWithoutContext=f;

package/colors/ColorGradient.mjs

@@ -254,7 +254,9 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
-          ref: (a) => this.gradientWrapper = a ? a.element : void 0
+          ref: (a) => {
+            this.gradientWrapper = a ? a.element : void 0;
+          }
         },
         /* @__PURE__ */ r.createElement(
           "div",
@@ -305,7 +307,9 @@ const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
           disabled: this.props.disabled,
-          ref: (a) => this.alphaSlider = a
+          ref: (a) => {
+            this.alphaSlider = a;
+          }
         }
       ))),
       /* @__PURE__ */ r.createElement(

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

package/colors/ColorPicker.mjs

@@ -7,15 +7,15 @@
  */
 import * as t from "react";
 import a from "prop-types";
-import { createPropsContext as He, validatePackage as We, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as $e, Navigation as Ge, getActiveElement as Me, keepFocusInContainer as I, focusFirstFocusableChild as ue, WatermarkOverlay as Ze, useDir as je, classNames as M, kendoThemeMaps as de, getTabIndex as qe, IconWrap as Je, svgIconPropType as Qe } from "@progress/kendo-react-common";
+import { createPropsContext as He, validatePackage as We, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as $e, Navigation as Ge, getActiveElement as Me, keepFocusInContainer as z, focusFirstFocusableChild as ue, WatermarkOverlay as Ze, useDir as je, classNames as M, kendoThemeMaps as de, getTabIndex as qe, IconWrap as Je, svgIconPropType as Qe } from "@progress/kendo-react-common";
 import { packageMetadata as Xe } from "../package-metadata.mjs";
 import { Picker as Ye } from "./Picker.mjs";
 import { ColorGradient as et } from "./ColorGradient.mjs";
 import { ColorPalette as tt, DEFAULT_PRESET as nt, DEFAULT_TILE_SIZE as at } from "./ColorPalette.mjs";
-import { FlatColorPicker as z } from "./FlatColorPicker.mjs";
+import { FlatColorPicker as B } from "./FlatColorPicker.mjs";
 import { Button as rt } from "@progress/kendo-react-buttons";
 import { caretAltDownIcon as ot } from "@progress/kendo-svg-icons";
-import { colorPickerAdaptiveTitle as pe, messages as B, flatColorPickerCancelBtn as fe, flatColorPickerApplyBtn as me, colorPickerDropdownButtonAriaLabel as ve } from "../messages/index.mjs";
+import { colorPickerAdaptiveTitle as pe, messages as D, flatColorPickerCancelBtn as fe, flatColorPickerApplyBtn as me, colorPickerDropdownButtonAriaLabel as ve } from "../messages/index.mjs";
 import { useLocalization as lt } from "@progress/kendo-react-intl";
 import { AdaptiveMode as it } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as ct } from "@progress/kendo-react-layout";
@@ -24,15 +24,15 @@ const st = {
 }, ut = {
   palette: nt,
   tileSize: at
-}, Z = (D) => D !== void 0, dt = He(), ge = t.forwardRef((D, ke) => {
+}, Z = (L) => L !== void 0, dt = He(), ge = t.forwardRef((L, ke) => {
   var re, oe;
-  const Ce = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, D), b = lt(), j = Ke(), {
+  const Ce = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, L), b = lt(), j = Ke(), {
     size: u = k.size,
-    rounded: L = k.rounded,
-    fillMode: S = k.fillMode,
+    rounded: x = k.rounded,
+    fillMode: _ = k.fillMode,
     gradientSettings: C = k.gradientSettings,
-    paletteSettings: x = k.paletteSettings,
-    flatColorPickerSettings: w,
+    paletteSettings: w = k.paletteSettings,
+    flatColorPickerSettings: y,
     view: d = o.views ? void 0 : k.view,
     views: c = d ? void 0 : k.views,
     activeView: q,
@@ -49,8 +49,8 @@ const st = {
     onActiveColorClick: U,
     className: we,
     adaptive: ye,
-    adaptiveTitle: J = b.toLanguageString(pe, B[pe])
-  } = o, s = t.useRef(null), y = t.useRef(null), T = t.useRef(null), f = t.useRef(null), E = t.useRef(), he = t.useRef(null), [Se, Q] = t.useState(!1), [Pe, Te] = t.useState(o.defaultValue), [_e, Re] = t.useState(!1), [_, Ae] = t.useState(), K = Z(o.value), v = Z(o.open), l = K ? o.value : Pe, g = v ? o.open : _e, X = t.useRef(l), Y = t.useCallback(() => {
+    adaptiveTitle: J = b.toLanguageString(pe, D[pe])
+  } = o, s = t.useRef(null), S = t.useRef(null), T = t.useRef(null), f = t.useRef(null), E = t.useRef(void 0), Se = t.useRef(null), [he, Q] = t.useState(!1), [_e, Pe] = t.useState(o.defaultValue), [Te, Re] = t.useState(!1), [R, Ae] = t.useState(), K = Z(o.value), v = Z(o.open), l = K ? o.value : _e, g = v ? o.open : Te, X = t.useRef(l), Y = t.useCallback(() => {
     s.current && s.current.focus();
   }, []);
   t.useImperativeHandle(
@@ -58,13 +58,13 @@ const st = {
     () => ({
       // we agreed that each element will have focus method exposed
       element: s.current,
-      actionElement: he.current,
+      actionElement: Se.current,
       value: l,
       focus: Y
     }),
     [l, Y]
   );
-  const Ie = !!(_ && j && _ <= j.medium && ye);
+  const Ie = !!(R && j && R <= j.medium && ye);
   t.useEffect(() => {
     const e = $e && window.ResizeObserver && new window.ResizeObserver(Fe.bind(void 0));
     return document != null && document.body && e && e.observe(document.body), () => {
@@ -97,15 +97,15 @@ const st = {
         Tab: (e, i, n) => {
           var h, le, ie;
           if (Me(document) !== s.current) {
-            const ce = (h = T.current) == null ? void 0 : h.wrapperRef.current, A = (le = y.current) == null ? void 0 : le.wrapperRef.current, se = (ie = f.current) == null ? void 0 : ie.element;
-            d === "palette" && ce ? I(n, ce) : d === "gradient" && A ? I(n, A) : d === "combo" && A ? I(n, A.parentElement) : c && se && I(n, se);
+            const ce = (h = T.current) == null ? void 0 : h.wrapperRef.current, I = (le = S.current) == null ? void 0 : le.wrapperRef.current, se = (ie = f.current) == null ? void 0 : ie.element;
+            d === "palette" && ce ? z(n, ce) : d === "gradient" && I ? z(n, I) : d === "combo" && I ? z(n, I.parentElement) : c && se && z(n, se);
           }
         }
       }
     }
   }), [r, v]), ze = t.useCallback(ee.triggerKeyboardEvent.bind(ee), []), Be = t.useCallback(() => {
-    v || (y.current && y.current.wrapperRef.current ? ue(y.current.wrapperRef.current) : T.current ? T.current.focus() : f.current && f.current.element && ue(f.current.element));
-  }, [v]), R = (e) => X.current = e, te = t.useCallback(
+    v || (S.current && S.current.wrapperRef.current ? ue(S.current.wrapperRef.current) : T.current ? T.current.focus() : f.current && f.current.element && ue(f.current.element));
+  }, [v]), A = (e) => X.current = e, te = t.useCallback(
     (e) => {
       const i = {
         value: X.current,
@@ -152,7 +152,7 @@ const st = {
     (e, i) => {
       var h;
       const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
-      K || Te(n), V && V.call(void 0, {
+      K || Pe(n), V && V.call(void 0, {
         value: n,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e.syntheticEvent,
@@ -172,26 +172,27 @@ const st = {
       {
         ...C,
         _adaptive: e,
-        ref: y,
+        ref: S,
         isInsidePopup: !0,
         size: e ? "large" : u,
-        fillMode: S,
+        fillMode: _,
         value: l,
         onChange: p
       }
     ), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
       tt,
       {
-        ...x,
+        ...w,
         ref: T,
         size: e ? "large" : u,
         value: l,
         onChange: ne
       }
     ), c && c[0] === "gradient" && c[1] === "palette" && /* @__PURE__ */ t.createElement(
-      z,
+      B,
       {
-        ...w,
+        ...y,
+        _paletteSettings: w,
         _gradientSettings: { _adaptive: e, ...C },
         ref: f,
         size: e ? "large" : u,
@@ -201,12 +202,13 @@ const st = {
         showButtons: !e,
         value: l,
         onChange: p,
-        setAdaptiveModeValue: R
+        setAdaptiveModeValue: A
       }
     ), c && c[0] === "palette" && c[1] === "gradient" && /* @__PURE__ */ t.createElement(
-      z,
+      B,
       {
-        ...w,
+        ...y,
+        _paletteSettings: w,
         _gradientSettings: { _adaptive: e, ...C },
         ref: f,
         size: e ? "large" : u,
@@ -215,12 +217,12 @@ const st = {
         showButtons: !e,
         value: l,
         onChange: p,
-        setAdaptiveModeValue: R
+        setAdaptiveModeValue: A
       }
     ), c && c.includes("gradient") && !c.includes("palette") && /* @__PURE__ */ t.createElement(
-      z,
+      B,
       {
-        ...w,
+        ...y,
         _gradientSettings: { _adaptive: e, ...C },
         ref: f,
         size: e ? "large" : u,
@@ -229,13 +231,13 @@ const st = {
         setOpen: r,
         value: l,
         onChange: p,
-        setAdaptiveModeValue: R
+        setAdaptiveModeValue: A
       }
     ), c && c.includes("palette") && !c.includes("gradient") && /* @__PURE__ */ t.createElement(
-      z,
+      B,
       {
-        ...w,
-        _paletteSettings: x,
+        ...y,
+        _paletteSettings: w,
         _gradientSettings: { _adaptive: e, ...C },
         ref: f,
         size: e ? "large" : u,
@@ -244,17 +246,17 @@ const st = {
         setOpen: r,
         value: l,
         onChange: p,
-        setAdaptiveModeValue: R
+        setAdaptiveModeValue: A
       }
     ), Ce && /* @__PURE__ */ t.createElement(Ze, null)),
     [
       q,
-      S,
-      w,
+      _,
+      y,
       C,
       p,
       ne,
-      x,
+      w,
       r,
       u,
       l,
@@ -268,11 +270,11 @@ const st = {
       title: J,
       expand: g,
       onClose: $,
-      windowWidth: _,
+      windowWidth: R,
       footer: {
-        cancelText: b.toLanguageString(fe, B[fe]),
+        cancelText: b.toLanguageString(fe, D[fe]),
         onCancel: $,
-        applyText: b.toLanguageString(me, B[me]),
+        applyText: b.toLanguageString(me, D[me]),
         onApply: te
       }
     };
@@ -282,7 +284,7 @@ const st = {
     J,
     g,
     $,
-    _,
+    R,
     b,
     te,
     G
@@ -304,11 +306,11 @@ const st = {
       "aria-disabled": N ? "true" : void 0,
       className: M("k-colorpicker", "k-picker", "k-icon-picker", {
         [`k-picker-${de.sizeMap[u] || u}`]: u,
-        [`k-picker-${S}`]: S,
-        [`k-rounded-${de.roundedMap[L] || L}`]: L,
+        [`k-picker-${_}`]: _,
+        [`k-rounded-${de.roundedMap[x] || x}`]: x,
         "k-invalid": !Ve,
         "k-disabled": N,
-        "k-focus": Se,
+        "k-focus": he,
         className: we
       }),
       ref: s,
@@ -351,7 +353,7 @@ const st = {
             svgIcon: ot,
             "aria-label": b.toLanguageString(
               ve,
-              B[ve]
+              D[ve]
             )
           }
         ),