@progress/kendo-react-inputs/colors/ColorPicker.js

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

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