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