@progress/kendo-react-inputs/colors/FlatColorPicker.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 U=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),X=require("./ColorPalette.js"),Y=require("./ColorGradient.js"),x=require("../package-metadata.js"),Z=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function p(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const f in e)if(f!=="default"){const B=Object.getOwnPropertyDescriptor(e,f);Object.defineProperty(b,f,B.get?B:{enumerable:!0,get:()=>e[f]})}}return b.default=e,Object.freeze(b)}const t=p(U),L=t.forwardRef((e,b)=>{const f=!n.validatePackage(x.packageMetadata,{component:"FlatColorPicker"}),B=n.getLicenseMessage(x.packageMetadata),h=t.useRef(null),w=t.useRef(null),F=t.useRef(null),{defaultValue:E,showButtons:N=!0,showPreview:z=!0,showClearButton:T=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:S="gradient",size:i="medium"}=e,[v,j]=t.useState((P||"ColorGradient")==="ColorGradient"),[g,V]=t.useState((d!=null?d:[])[0]==="gradient"&&S==="gradient"),[c,y]=t.useState(e.value||E||void 0),[C,M]=t.useState(e.value||E||void 0),_=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const k=Z.useLocalization(),R=t.useCallback(()=>{h.current&&h.current.focus()},[h]);t.useImperativeHandle(h,()=>({element:w.current,focus:R,props:e,value:_}),[_,R,e]),t.useImperativeHandle(b,()=>h.current);const q=t.useCallback(a=>{(a==="ColorGradient"&&!v||a==="ColorPalette"&&v)&&j(!v)},[v]),I=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&S==="gradient"?V(!g):a==="gradient"&&S==="palette"&&V(!0)},[S,g]),D=t.useCallback(a=>{var u;const r=E||void 0;if(y(r),M(r),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const G={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,G)}},[E,e.onPreviewChange]),O=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e._gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),K=t.useCallback(a=>{if(c!==void 0&&M(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),H=t.useCallback(()=>{y(C),e.setOpen&&e.setOpen(!1)},[C]),W=t.useCallback(a=>{if(y(C),e.onPreviewChange){const r={value:C,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[C,e.onPreviewChange]),$=t.useCallback(a=>{var u,G;if((!a.relatedTarget||!((u=w.current)!=null&&u.contains(a.relatedTarget)))&&!((G=e._gradientSettings)!=null&&G._adaptive)&&(!N&&c!==void 0&&M(c),!N&&e.onChange)){const Q={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,Q)}},[c,N,e.onChange]),A=t.useMemo(()=>new n.Navigation({root:w,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),J=t.useCallback(A.triggerKeyboardEvent.bind(A),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:{position:"relative",...e.style},ref:w,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:$,onKeyDown:J},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,selected:g,onClick:()=>I("gradient")}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.paletteIcon,selected:!g,onClick:()=>I("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.paletteIcon,selected:!g,onClick:()=>I("palette")}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,selected:g,onClick:()=>I("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:v,onClick:()=>q("ColorGradient"),icon:"droplet-slider",svgIcon:m.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":k.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!v,onClick:()=>q("ColorPalette"),icon:"palette",svgIcon:m.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},T&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:D,"aria-label":k.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:m.dropletSlashIcon}),z&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":_===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":C===void 0}),onClick:W},t.createElement("span",{className:"k-color-preview-mask",style:{background:C||void 0}})))),f&&t.createElement(n.WatermarkOverlay,{message:B})),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&v||d&&g)&&t.createElement(Y.ColorGradient,{ref:F,role:"none",ariaLabel:void 0,value:c,onChange:O,opacity:e.opacity,format:e.format,size:i,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(P&&!v||d&&!g)&&t.createElement(X.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:O,size:i,...e._paletteSettings})),N&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-start k-actions-horizontal"},t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",size:i,onClick:K},l.messages[l.flatColorPickerApplyBtn]),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:H},l.messages[l.flatColorPickerCancelBtn])))}),ee={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf([null,"small","medium","large"])};L.displayName="KendoFlatColorPicker";L.propTypes=ee;exports.FlatColorPicker=L;