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

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"),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(void 0),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;

package/colors/ColorPicker.mjs

@@ -50,7 +50,7 @@ const st = {
     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(() => {
+  } = o, s = t.useRef(null), y = t.useRef(null), T = t.useRef(null), f = t.useRef(null), E = t.useRef(void 0), 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(() => {
     s.current && s.current.focus();
   }, []);
   t.useImperativeHandle(