@progress/kendo-react-inputs 9.5.0 → 10.0.0-develop.2

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

package/colors/ColorPicker.mjs

@@ -7,29 +7,28 @@
  */
 import * as t from "react";
 import a from "prop-types";
-import { createPropsContext as Ve, validatePackage as He, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as We, Navigation as $e, getActiveElement as Ge, keepFocusInContainer as I, focusFirstFocusableChild as ue, useDir as Me, classNames as G, kendoThemeMaps as de, getTabIndex as Ze, IconWrap as je, svgIconPropType as qe } from "@progress/kendo-react-common";
-import { packageMetadata as Je } from "../package-metadata.mjs";
-import { Picker as Qe } from "./Picker.mjs";
-import { ColorGradient as Xe } from "./ColorGradient.mjs";
-import { ColorPalette as Ye, DEFAULT_PRESET as et, DEFAULT_TILE_SIZE as tt } from "./ColorPalette.mjs";
+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 G, 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 { Button as nt } from "@progress/kendo-react-buttons";
-import { caretAltDownIcon as at } from "@progress/kendo-svg-icons";
+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 { useLocalization as rt } from "@progress/kendo-react-intl";
-import { AdaptiveMode as ot } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as lt } from "@progress/kendo-react-layout";
-const it = {
+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";
+const st = {
   opacity: !0
-}, ct = {
-  palette: et,
-  tileSize: tt
-}, M = (D) => D !== void 0, st = Ve(), ge = t.forwardRef((D, ke) => {
+}, ut = {
+  palette: nt,
+  tileSize: at
+}, M = (D) => D !== void 0, dt = He(), ge = t.forwardRef((D, ke) => {
   var re, oe;
-  He(Je);
-  const o = Ue(st, D), b = rt(), Z = Ke(), {
+  const Ce = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, D), b = lt(), Z = Ke(), {
     size: u = k.size,
-    rounded: x = k.rounded,
+    rounded: L = k.rounded,
     fillMode: S = k.fillMode,
     gradientSettings: C = k.gradientSettings,
     paletteSettings: j = k.paletteSettings,
@@ -38,20 +37,20 @@ const it = {
     views: c = d ? void 0 : k.views,
     activeView: q,
     popupSettings: m,
-    valid: Ce,
-    disabled: L,
-    tabIndex: Ee,
+    valid: Ee,
+    disabled: x,
+    tabIndex: be,
     icon: N,
     svgIcon: O,
-    iconClassName: T,
+    iconClassName: P,
     onChange: F,
     onFocus: V,
     onBlur: H,
-    onActiveColorClick: U,
-    className: be,
-    adaptive: we,
+    onActiveColorClick: W,
+    className: we,
+    adaptive: ye,
     adaptiveTitle: J = b.toLanguageString(pe, B[pe])
-  } = o, s = t.useRef(null), y = t.useRef(null), P = t.useRef(null), f = t.useRef(null), E = t.useRef(), ye = t.useRef(null), [he, Q] = t.useState(!1), [Se, Te] = t.useState(o.defaultValue), [Pe, _e] = t.useState(!1), [_, Re] = t.useState(), K = M(o.value), v = M(o.open), l = K ? o.value : Se, g = v ? o.open : Pe, 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(), he = t.useRef(null), [Se, Q] = t.useState(!1), [Pe, Te] = t.useState(o.defaultValue), [_e, Re] = t.useState(!1), [_, Ae] = t.useState(), U = M(o.value), v = M(o.open), l = U ? o.value : Pe, g = v ? o.open : _e, X = t.useRef(l), Y = t.useCallback(() => {
     s.current && s.current.focus();
   }, []);
   t.useImperativeHandle(
@@ -59,25 +58,25 @@ const it = {
     () => ({
       // we agreed that each element will have focus method exposed
       element: s.current,
-      actionElement: ye.current,
+      actionElement: he.current,
       value: l,
       focus: Y
     }),
     [l, Y]
   );
-  const Ae = !!(_ && Z && _ <= Z.medium && we);
+  const Ie = !!(_ && Z && _ <= Z.medium && ye);
   t.useEffect(() => {
-    const e = We && window.ResizeObserver && new window.ResizeObserver(Oe.bind(void 0));
+    const e = $e && window.ResizeObserver && new window.ResizeObserver(Fe.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, i) => {
-      v || (!e && !i && s && s.current && s.current.focus(), _e(e));
+      v || (!e && !i && s && s.current && s.current.focus(), Re(e));
     },
     [v]
-  ), ee = t.useMemo(() => new $e({
+  ), ee = t.useMemo(() => new Ge({
     root: s,
     selectors: [".k-colorpicker", ".k-color-picker-popup"],
     tabIndex: 0,
@@ -97,15 +96,15 @@ const it = {
         },
         Tab: (e, i, n) => {
           var h, le, ie;
-          if (Ge(document) !== s.current) {
-            const ce = (h = P.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;
+          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);
           }
         }
       }
     }
-  }), [r, v]), Ie = t.useCallback(ee.triggerKeyboardEvent.bind(ee), []), ze = t.useCallback(() => {
-    v || (y.current && y.current.wrapperRef.current ? ue(y.current.wrapperRef.current) : P.current ? P.current.focus() : f.current && f.current.element && ue(f.current.element));
+  }), [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(
     (e) => {
       const i = {
@@ -116,11 +115,11 @@ const it = {
       p(i), r(!g, !0);
     },
     [g]
-  ), W = t.useCallback(() => {
+  ), K = t.useCallback(() => {
     r(!1, !0);
-  }, [r]), Be = t.useCallback(
+  }, [r]), De = t.useCallback(
     (e) => {
-      U && U.call(void 0, {
+      W && W.call(void 0, {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         value: l,
@@ -130,8 +129,8 @@ const it = {
         }
       });
     },
-    [U, l]
-  ), De = t.useCallback(
+    [W, l]
+  ), Le = t.useCallback(
     (e) => {
       E.current ? (clearTimeout(E.current), E.current = void 0) : Q(!0), V && V.call(void 0, {
         nativeEvent: e.nativeEvent,
@@ -141,7 +140,7 @@ const it = {
     [V]
   ), xe = t.useCallback(() => {
     r(!1, !0), Q(!1), E.current = void 0;
-  }, []), Le = t.useCallback(
+  }, []), Ne = t.useCallback(
     (e) => {
       clearTimeout(E.current), E.current = window.setTimeout(xe), H && H.call(void 0, {
         nativeEvent: e.nativeEvent,
@@ -153,7 +152,7 @@ const it = {
     (e, i) => {
       var h;
       const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
-      K || Te(n), F && F.call(void 0, {
+      U || Te(n), F && F.call(void 0, {
         value: n,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e.syntheticEvent,
@@ -163,13 +162,13 @@ const it = {
         }
       }), r(!1);
     },
-    [K, F]
+    [U, F]
   ), ne = t.useCallback(
     (e) => p(e, !0),
     [M, p]
   ), $ = t.useCallback(
     (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
-      Xe,
+      et,
       {
         ...C,
         _adaptive: e,
@@ -181,10 +180,10 @@ const it = {
         onChange: p
       }
     ), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
-      Ye,
+      tt,
       {
         ...j,
-        ref: P,
+        ref: T,
         size: e ? "large" : u,
         value: l,
         onChange: ne
@@ -246,7 +245,7 @@ const it = {
         onChange: p,
         setAdaptiveModeValue: R
       }
-    )),
+    ), Ce && /* @__PURE__ */ t.createElement(Ze, null)),
     [
       q,
       S,
@@ -261,35 +260,35 @@ const it = {
       d,
       c
     ]
-  ), Ne = t.useCallback(() => {
+  ), Oe = t.useCallback(() => {
     var i;
     const e = {
       animation: !!((i = m == null ? void 0 : m.animate) == null || i),
       title: J,
       expand: g,
-      onClose: W,
+      onClose: K,
       windowWidth: _,
       footer: {
         cancelText: b.toLanguageString(fe, B[fe]),
-        onCancel: W,
+        onCancel: K,
         applyText: b.toLanguageString(me, B[me]),
         onApply: te
       }
     };
-    return /* @__PURE__ */ t.createElement(ot, { ...e }, /* @__PURE__ */ t.createElement(lt, { overflowHidden: !0 }, $(!0)));
+    return /* @__PURE__ */ t.createElement(it, { ...e }, /* @__PURE__ */ t.createElement(ct, { overflowHidden: !0 }, $(!0)));
   }, [
     m == null ? void 0 : m.animate,
     J,
     g,
-    W,
+    K,
     _,
     b,
     te,
     $
-  ]), Oe = t.useCallback((e) => {
+  ]), Fe = t.useCallback((e) => {
     for (const i of e)
-      Re(i.target.clientWidth);
-  }, []), ae = Me(s, o.dir), Fe = Ce !== !1;
+      Ae(i.target.clientWidth);
+  }, []), ae = je(s, o.dir), Ve = Ee !== !1;
   return /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -301,46 +300,46 @@ const it = {
       "aria-haspopup": "dialog",
       "aria-expanded": g,
       "aria-controls": `k-colorpicker-popup-${(re = o.id) != null ? re : 0}`,
-      "aria-disabled": L ? "true" : void 0,
+      "aria-disabled": x ? "true" : void 0,
       className: G("k-colorpicker", "k-picker", "k-icon-picker", {
         [`k-picker-${de.sizeMap[u] || u}`]: u,
         [`k-picker-${S}`]: S,
-        [`k-rounded-${de.roundedMap[x] || x}`]: x,
-        "k-invalid": !Fe,
-        "k-disabled": L,
-        "k-focus": he,
-        className: be
+        [`k-rounded-${de.roundedMap[L] || L}`]: L,
+        "k-invalid": !Ve,
+        "k-disabled": x,
+        "k-focus": Se,
+        className: we
       }),
       ref: s,
-      tabIndex: Ze(Ee, L),
+      tabIndex: qe(be, x),
       title: o.title,
-      onKeyDown: Ie,
-      onFocus: De,
-      onBlur: Le,
+      onKeyDown: ze,
+      onFocus: Le,
+      onBlur: Ne,
       dir: ae
     },
     /* @__PURE__ */ t.createElement(
-      Qe,
+      Ye,
       {
         dir: ae,
         open: g,
-        onOpen: ze,
+        onOpen: Be,
         popupAnchor: s.current || void 0,
         popupSettings: { id: `k-colorpicker-popup-${(oe = o.id) != null ? oe : 0}`, ...m },
-        input: /* @__PURE__ */ t.createElement("span", { onClick: Be, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
+        input: /* @__PURE__ */ t.createElement("span", { onClick: De, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
           "span",
           {
             className: G("k-value-icon", "k-color-preview", {
               "k-no-color": !l,
-              "k-icon-color-preview": N || O || T
+              "k-icon-color-preview": N || O || P
             })
           },
-          T && /* @__PURE__ */ t.createElement("span", { className: G("k-color-preview-icon", T) }),
-          !T && (N || O) && /* @__PURE__ */ t.createElement(je, { name: N, icon: O }),
+          P && /* @__PURE__ */ t.createElement("span", { className: G("k-color-preview-icon", P) }),
+          !P && (N || O) && /* @__PURE__ */ t.createElement(Je, { name: N, icon: O }),
           /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
         )),
         button: /* @__PURE__ */ t.createElement(
-          nt,
+          rt,
           {
             tabIndex: -1,
             type: "button",
@@ -348,7 +347,7 @@ const it = {
             className: "k-input-button",
             rounded: null,
             icon: "caret-alt-down",
-            svgIcon: at,
+            svgIcon: ot,
             "aria-label": b.toLanguageString(
               ve,
               B[ve]
@@ -356,8 +355,8 @@ const it = {
           }
         ),
         content: $(!1),
-        _mobileMode: Ae,
-        _actionSheet: Ne()
+        _mobileMode: Ie,
+        _actionSheet: Oe()
       }
     )
   );
@@ -371,7 +370,7 @@ ge.propTypes = {
   dir: a.string,
   id: a.string,
   icon: a.string,
-  svgIcon: qe,
+  svgIcon: Qe,
   ariaLabelledBy: a.string,
   ariaDescribedBy: a.string,
   size: a.oneOf([null, "small", "medium", "large"]),
@@ -387,11 +386,11 @@ const k = {
   fillMode: "solid",
   view: "palette",
   views: ["gradient", "palette"],
-  gradientSettings: it,
-  paletteSettings: ct
+  gradientSettings: st,
+  paletteSettings: ut
 };
 ge.displayName = "KendoColorPicker";
 export {
   ge as ColorPicker,
-  st as ColorPickerPropsContext
+  dt as ColorPickerPropsContext
 };

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