@progress/kendo-react-inputs 10.3.0-develop.1 → 11.0.0-develop.10

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"),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:Z.DEFAULT_PRESET,tileSize:Z.DEFAULT_TILE_SIZE},$=f=>f!==void 0,fe=n.createPropsContext(),J=t.forwardRef((f,S)=>{var ie,ce;const w=!n.validatePackage(Le.packageMetadata,{component:"ColorPicker"}),r=n.usePropsContext(fe,f),_=He.useLocalization(),Q=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:X,popupSettings:m,valid:ge,disabled:x,tabIndex:ve,icon:q,svgIcon:V,iconClassName:F,onChange:H,onFocus:M,onBlur:W,onActiveColorClick:U,className:ke,adaptive:me,adaptiveTitle:Y=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle])}=r,u=t.useRef(null),R=t.useRef(null),B=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||void 0),[Pe,ye]=t.useState(!1),[O,Se]=t.useState(),j=$(r.value),C=$(r.open),i=j?r.value:Ee,b=C?r.open:Pe,te=t.useRef(i),ne=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(S,()=>({element:u.current,actionElement:Ce.current,value:i,focus:ne}),[i,ne]);const _e=!!(O&&Q&&O<=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,c)=>{C||(!e&&!c&&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,c,a)=>{l(!1)},Enter:(e,c,a)=>{!C&&e===u.current&&(a.preventDefault(),a.stopPropagation(),l(!0))},ArrowDown:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),l(!0))},ArrowUp:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),l(!1))},Tab:(e,c,a)=>{var A,se,ue;if(n.getActiveElement(document)!==u.current){const de=(A=B.current)==null?void 0:A.wrapperRef.current,z=(se=R.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"&&z?n.keepFocusInContainer(a,z):g==="combo"&&z?n.keepFocusInContainer(a,z.parentElement):s&&pe&&n.keepFocusInContainer(a,pe)}}}}}),[l,C]),he=t.useCallback(ae.triggerKeyboardEvent.bind(ae),[]),Te=t.useCallback(()=>{C||(R.current&&R.current.wrapperRef.current?n.focusFirstFocusableChild(R.current.wrapperRef.current):B.current?B.current.focus():k.current&&k.current.element&&n.focusFirstFocusableChild(k.current.element))},[C]),D=e=>te.current=e,re=t.useCallback(e=>{const c={value:te.current,nativeEvent:e.nativeEvent,syntheticEvent:e};v(c),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:i,target:{element:u.current,value:i}})},[U,i]),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,c)=>{var A;const a=c?e.rgbaValue||"":(A=e.value)!=null?A:"";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:R,isInsidePopup:!0,size:e?"large":p,fillMode:I,value:i,onChange:v}),(g==="combo"||g==="palette")&&t.createElement(Z.ColorPalette,{...h,ref:B,size:e?"large":p,value:i,onChange:oe}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["gradient","palette"],activeView:X,setOpen:l,showButtons:!e,value:i,onChange:v,setAdaptiveModeValue:D}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["palette","gradient"],setOpen:l,showButtons:!e,value:i,onChange:v,setAdaptiveModeValue:D}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(L.FlatColorPicker,{...T,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["gradient"],showButtons:!e,setOpen:l,value:i,onChange:v,setAdaptiveModeValue:D}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["palette"],showButtons:!e,setOpen:l,value:i,onChange:v,setAdaptiveModeValue:D}),w&&t.createElement(n.WatermarkOverlay,null)),[X,I,T,P,v,oe,h,l,p,i,g,s]),Be=t.useCallback(()=>{var c;const e={animation:!!((c=m==null?void 0:m.animate)==null||c),title:Y,expand:b,onClose:G,windowWidth:O,footer:{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:G,applyText:_.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,O,_,re,K]),Oe=t.useCallback(e=>{for(const c of e)Se(c.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-${(ie=r.id)!=null?ie: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":be,className:ke}),ref:u,tabIndex:n.getTabIndex(ve,x),title:r.title,onKeyDown:he,onFocus:Ae,onBlur:Fe,dir:le},t.createElement(Ne.Picker,{dir:le,open:b,onOpen:Te,popupAnchor:u.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(ce=r.id)!=null?ce: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":!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:()=>l(!b),className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:Ve.caretAltDownIcon,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:K(!1),_mobileMode:_e,_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"),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;

package/colors/ColorPicker.mjs

@@ -6,8 +6,8 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as t from "react";
-import a from "prop-types";
-import { createPropsContext as He, validatePackage as We, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as $e, Navigation as Ge, getActiveElement as Me, keepFocusInContainer as z, focusFirstFocusableChild as ue, WatermarkOverlay as Ze, useDir as je, classNames as M, kendoThemeMaps as de, getTabIndex as qe, IconWrap as Je, svgIconPropType as Qe } from "@progress/kendo-react-common";
+import r from "prop-types";
+import { createPropsContext as He, validatePackage as We, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as $e, Navigation as Ge, getActiveElement as Me, keepFocusInContainer as z, focusFirstFocusableChild as de, WatermarkOverlay as Ze, useDir as je, classNames as Z, kendoThemeMaps as pe, 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";
@@ -15,7 +15,7 @@ import { ColorPalette as tt, DEFAULT_PRESET as nt, DEFAULT_TILE_SIZE as at } fro
 import { FlatColorPicker as B } from "./FlatColorPicker.mjs";
 import { Button as rt } from "@progress/kendo-react-buttons";
 import { caretAltDownIcon as ot } from "@progress/kendo-svg-icons";
-import { colorPickerAdaptiveTitle as pe, messages as D, flatColorPickerCancelBtn as fe, flatColorPickerApplyBtn as me, colorPickerDropdownButtonAriaLabel as ve } from "../messages/index.mjs";
+import { colorPickerAdaptiveTitle as fe, messages as D, flatColorPickerCancelBtn as me, flatColorPickerApplyBtn as ve, colorPickerDropdownButtonAriaLabel as ge } from "../messages/index.mjs";
 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";
@@ -24,9 +24,9 @@ const st = {
 }, ut = {
   palette: nt,
   tileSize: at
-}, Z = (L) => L !== void 0, dt = He(), ge = t.forwardRef((L, ke) => {
-  var re, oe;
-  const Ce = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, L), b = lt(), j = Ke(), {
+}, j = (L) => L !== void 0, dt = He(), ke = t.forwardRef((L, Ce) => {
+  var oe, le;
+  const Ee = !We(Xe, { component: "ColorPicker" }), o = Ue(dt, L), b = lt(), q = Ke(), {
     size: u = k.size,
     rounded: x = k.rounded,
     fillMode: _ = k.fillMode,
@@ -35,11 +35,11 @@ const st = {
     flatColorPickerSettings: y,
     view: d = o.views ? void 0 : k.view,
     views: c = d ? void 0 : k.views,
-    activeView: q,
-    popupSettings: m,
-    valid: Ee,
+    activeView: J,
+    popupSettings: v,
+    valid: be,
     disabled: N,
-    tabIndex: be,
+    tabIndex: we,
     icon: O,
     svgIcon: F,
     iconClassName: P,
@@ -47,77 +47,77 @@ const st = {
     onFocus: H,
     onBlur: W,
     onActiveColorClick: U,
-    className: we,
-    adaptive: ye,
-    adaptiveTitle: J = b.toLanguageString(pe, D[pe])
-  } = o, s = t.useRef(null), S = t.useRef(null), T = t.useRef(null), f = t.useRef(null), E = t.useRef(void 0), Se = t.useRef(null), [he, Q] = t.useState(!1), [_e, Pe] = t.useState(o.defaultValue || void 0), [Te, Re] = t.useState(!1), [R, Ae] = t.useState(), K = Z(o.value), v = Z(o.open), l = K ? o.value : _e, g = v ? o.open : Te, X = t.useRef(l), Y = t.useCallback(() => {
+    className: ye,
+    adaptive: Se,
+    adaptiveTitle: Q = b.toLanguageString(fe, D[fe])
+  } = o, s = t.useRef(null), S = t.useRef(null), T = t.useRef(null), m = t.useRef(null), E = t.useRef(void 0), he = t.useRef(null), [_e, X] = t.useState(!1), [Pe, Te] = t.useState(o.defaultValue || void 0), [Re, Ae] = t.useState(!1), [R, Ie] = t.useState(), K = j(o.value), g = j(o.open), l = K ? o.value : Pe, p = g ? o.open : Re, Y = t.useRef(l), ee = t.useCallback(() => {
     s.current && s.current.focus();
   }, []);
   t.useImperativeHandle(
-    ke,
+    Ce,
     () => ({
       // we agreed that each element will have focus method exposed
       element: s.current,
-      actionElement: Se.current,
+      actionElement: he.current,
       value: l,
-      focus: Y
+      focus: ee
     }),
-    [l, Y]
+    [l, ee]
   );
-  const Ie = !!(R && j && R <= j.medium && ye);
+  const $ = !!(R && q && R <= q.medium && Se);
   t.useEffect(() => {
     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(
+  const a = t.useCallback(
     (e, i) => {
-      v || (!e && !i && s && s.current && s.current.focus(), Re(e));
+      g || (!e && !i && s && s.current && s.current.focus(), Ae(e));
     },
-    [v]
-  ), ee = t.useMemo(() => new Ge({
+    [g]
+  ), te = t.useMemo(() => new Ge({
     root: s,
     selectors: [".k-colorpicker", ".k-color-picker-popup"],
     tabIndex: 0,
     keyboardEvents: {
       keydown: {
         Escape: (e, i, n) => {
-          r(!1);
+          a(!1);
         },
         Enter: (e, i, n) => {
-          !v && e === s.current && (n.preventDefault(), n.stopPropagation(), r(!0));
+          !g && e === s.current && (n.preventDefault(), n.stopPropagation(), a(!0));
         },
         ArrowDown: (e, i, n) => {
-          n.altKey && (n.preventDefault(), n.stopPropagation(), r(!0));
+          n.altKey && (n.preventDefault(), n.stopPropagation(), a(!0));
         },
         ArrowUp: (e, i, n) => {
-          n.altKey && (n.preventDefault(), n.stopPropagation(), r(!1));
+          n.altKey && (n.preventDefault(), n.stopPropagation(), a(!1));
         },
         Tab: (e, i, n) => {
-          var h, le, ie;
+          var h, ie, ce;
           if (Me(document) !== s.current) {
-            const ce = (h = T.current) == null ? void 0 : h.wrapperRef.current, I = (le = S.current) == null ? void 0 : le.wrapperRef.current, se = (ie = f.current) == null ? void 0 : ie.element;
-            d === "palette" && ce ? z(n, ce) : d === "gradient" && I ? z(n, I) : d === "combo" && I ? z(n, I.parentElement) : c && se && z(n, se);
+            const se = (h = T.current) == null ? void 0 : h.wrapperRef.current, I = (ie = S.current) == null ? void 0 : ie.wrapperRef.current, ue = (ce = m.current) == null ? void 0 : ce.element;
+            d === "palette" && se ? z(n, se) : d === "gradient" && I ? z(n, I) : d === "combo" && I ? z(n, I.parentElement) : c && ue && z(n, ue);
           }
         }
       }
     }
-  }), [r, v]), ze = t.useCallback(ee.triggerKeyboardEvent.bind(ee), []), Be = t.useCallback(() => {
-    v || (S.current && S.current.wrapperRef.current ? ue(S.current.wrapperRef.current) : T.current ? T.current.focus() : f.current && f.current.element && ue(f.current.element));
-  }, [v]), A = (e) => X.current = e, te = t.useCallback(
+  }), [a, g]), ze = t.useCallback(te.triggerKeyboardEvent.bind(te), []), Be = t.useCallback(() => {
+    g || (S.current && S.current.wrapperRef.current ? de(S.current.wrapperRef.current) : T.current ? T.current.focus() : m.current && m.current.element && de(m.current.element));
+  }, [g]), A = (e) => Y.current = e, ne = t.useCallback(
     (e) => {
       const i = {
-        value: X.current,
+        value: Y.current,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       };
-      p(i), r(!g, !0);
+      f(i), a(!p, !0);
     },
-    [g]
-  ), $ = t.useCallback(() => {
-    r(!1, !0);
-  }, [r]), De = t.useCallback(
+    [p]
+  ), G = t.useCallback(() => {
+    a(!1, !0);
+  }, [a]), De = t.useCallback(
     (e) => {
       U && U.call(void 0, {
         syntheticEvent: e,
@@ -132,14 +132,14 @@ const st = {
     [U, l]
   ), Le = t.useCallback(
     (e) => {
-      E.current ? (clearTimeout(E.current), E.current = void 0) : Q(!0), H && H.call(void 0, {
+      E.current ? (clearTimeout(E.current), E.current = void 0) : (X(!0), $ && !p && a(!0)), H && H.call(void 0, {
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       });
     },
-    [H]
+    [$, H, p, a]
   ), xe = t.useCallback(() => {
-    r(!1, !0), Q(!1), E.current = void 0;
+    a(!1, !0), X(!1), E.current = void 0;
   }, []), Ne = t.useCallback(
     (e) => {
       clearTimeout(E.current), E.current = window.setTimeout(xe), W && W.call(void 0, {
@@ -148,11 +148,11 @@ const st = {
       });
     },
     [W]
-  ), p = t.useCallback(
+  ), f = t.useCallback(
     (e, i) => {
       var h;
       const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
-      K || Pe(n), V && V.call(void 0, {
+      K || Te(n), V && V.call(void 0, {
         value: n,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e.syntheticEvent,
@@ -160,13 +160,13 @@ const st = {
           element: s.current,
           value: n
         }
-      }), r(!1);
+      }), a(!1);
     },
     [K, V]
-  ), ne = t.useCallback(
-    (e) => p(e, !0),
-    [Z, p]
-  ), G = t.useCallback(
+  ), ae = t.useCallback(
+    (e) => f(e, !0),
+    [j, f]
+  ), M = t.useCallback(
     (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
       et,
       {
@@ -177,7 +177,7 @@ const st = {
         size: e ? "large" : u,
         fillMode: _,
         value: l,
-        onChange: p
+        onChange: f
       }
     ), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
       tt,
@@ -186,7 +186,7 @@ const st = {
         ref: T,
         size: e ? "large" : u,
         value: l,
-        onChange: ne
+        onChange: ae
       }
     ), c && c[0] === "gradient" && c[1] === "palette" && /* @__PURE__ */ t.createElement(
       B,
@@ -194,14 +194,14 @@ const st = {
         ...y,
         _paletteSettings: w,
         _gradientSettings: { _adaptive: e, ...C },
-        ref: f,
+        ref: m,
         size: e ? "large" : u,
         views: ["gradient", "palette"],
-        activeView: q,
-        setOpen: r,
+        activeView: J,
+        setOpen: a,
         showButtons: !e,
         value: l,
-        onChange: p,
+        onChange: f,
         setAdaptiveModeValue: A
       }
     ), c && c[0] === "palette" && c[1] === "gradient" && /* @__PURE__ */ t.createElement(
@@ -210,13 +210,13 @@ const st = {
         ...y,
         _paletteSettings: w,
         _gradientSettings: { _adaptive: e, ...C },
-        ref: f,
+        ref: m,
         size: e ? "large" : u,
         views: ["palette", "gradient"],
-        setOpen: r,
+        setOpen: a,
         showButtons: !e,
         value: l,
-        onChange: p,
+        onChange: f,
         setAdaptiveModeValue: A
       }
     ), c && c.includes("gradient") && !c.includes("palette") && /* @__PURE__ */ t.createElement(
@@ -224,13 +224,13 @@ const st = {
       {
         ...y,
         _gradientSettings: { _adaptive: e, ...C },
-        ref: f,
+        ref: m,
         size: e ? "large" : u,
         views: ["gradient"],
         showButtons: !e,
-        setOpen: r,
+        setOpen: a,
         value: l,
-        onChange: p,
+        onChange: f,
         setAdaptiveModeValue: A
       }
     ), c && c.includes("palette") && !c.includes("gradient") && /* @__PURE__ */ t.createElement(
@@ -239,25 +239,25 @@ const st = {
         ...y,
         _paletteSettings: w,
         _gradientSettings: { _adaptive: e, ...C },
-        ref: f,
+        ref: m,
         size: e ? "large" : u,
         views: ["palette"],
         showButtons: !e,
-        setOpen: r,
+        setOpen: a,
         value: l,
-        onChange: p,
+        onChange: f,
         setAdaptiveModeValue: A
       }
-    ), Ce && /* @__PURE__ */ t.createElement(Ze, null)),
+    ), Ee && /* @__PURE__ */ t.createElement(Ze, null)),
     [
-      q,
+      J,
       _,
       y,
       C,
-      p,
-      ne,
+      f,
+      ae,
       w,
-      r,
+      a,
       u,
       l,
       d,
@@ -266,32 +266,32 @@ const st = {
   ), Oe = t.useCallback(() => {
     var i;
     const e = {
-      animation: !!((i = m == null ? void 0 : m.animate) == null || i),
-      title: J,
-      expand: g,
-      onClose: $,
+      animation: !!((i = v == null ? void 0 : v.animate) == null || i),
+      title: Q,
+      expand: p,
+      onClose: G,
       windowWidth: R,
       footer: {
-        cancelText: b.toLanguageString(fe, D[fe]),
-        onCancel: $,
-        applyText: b.toLanguageString(me, D[me]),
-        onApply: te
+        cancelText: b.toLanguageString(me, D[me]),
+        onCancel: G,
+        applyText: b.toLanguageString(ve, D[ve]),
+        onApply: ne
       }
     };
-    return /* @__PURE__ */ t.createElement(it, { ...e }, /* @__PURE__ */ t.createElement(ct, null, G(!0)));
+    return /* @__PURE__ */ t.createElement(it, { ...e }, /* @__PURE__ */ t.createElement(ct, null, M(!0)));
   }, [
-    m == null ? void 0 : m.animate,
-    J,
-    g,
-    $,
+    v == null ? void 0 : v.animate,
+    Q,
+    p,
+    G,
     R,
     b,
-    te,
-    G
+    ne,
+    M
   ]), Fe = t.useCallback((e) => {
     for (const i of e)
-      Ae(i.target.clientWidth);
-  }, []), ae = je(s, o.dir), Ve = Ee !== !1;
+      Ie(i.target.clientWidth);
+  }, []), re = je(s, o.dir), Ve = be !== !1;
   return /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -301,43 +301,43 @@ const st = {
       "aria-labelledby": o.ariaLabelledBy,
       "aria-describedby": o.ariaDescribedBy,
       "aria-haspopup": "dialog",
-      "aria-expanded": g,
-      "aria-controls": `k-colorpicker-popup-${(re = o.id) != null ? re : 0}`,
+      "aria-expanded": p,
+      "aria-controls": `k-colorpicker-popup-${(oe = o.id) != null ? oe : 0}`,
       "aria-disabled": N ? "true" : void 0,
-      className: M("k-colorpicker", "k-picker", "k-icon-picker", {
-        [`k-picker-${de.sizeMap[u] || u}`]: u,
+      className: Z("k-colorpicker", "k-picker", "k-icon-picker", {
+        [`k-picker-${pe.sizeMap[u] || u}`]: u,
         [`k-picker-${_}`]: _,
-        [`k-rounded-${de.roundedMap[x] || x}`]: x,
+        [`k-rounded-${pe.roundedMap[x] || x}`]: x,
         "k-invalid": !Ve,
         "k-disabled": N,
-        "k-focus": he,
-        className: we
+        "k-focus": _e,
+        className: ye
       }),
       ref: s,
-      tabIndex: qe(be, N),
+      tabIndex: qe(we, N),
       title: o.title,
       onKeyDown: ze,
       onFocus: Le,
       onBlur: Ne,
-      dir: ae
+      dir: re
     },
     /* @__PURE__ */ t.createElement(
       Ye,
       {
-        dir: ae,
-        open: g,
+        dir: re,
+        open: p,
         onOpen: Be,
         popupAnchor: s.current || void 0,
-        popupSettings: { id: `k-colorpicker-popup-${(oe = o.id) != null ? oe : 0}`, ...m },
+        popupSettings: { id: `k-colorpicker-popup-${(le = o.id) != null ? le : 0}`, ...v },
         input: /* @__PURE__ */ t.createElement("span", { onClick: De, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
           "span",
           {
-            className: M("k-value-icon", "k-color-preview", {
+            className: Z("k-value-icon", "k-color-preview", {
               "k-no-color": !l,
               "k-icon-color-preview": O || F || P
             })
           },
-          P && /* @__PURE__ */ t.createElement("span", { className: M("k-color-preview-icon", P) }),
+          P && /* @__PURE__ */ t.createElement("span", { className: Z("k-color-preview-icon", P) }),
           !P && (O || F) && /* @__PURE__ */ t.createElement(Je, { name: O, icon: F }),
           /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
         )),
@@ -346,42 +346,43 @@ const st = {
           {
             tabIndex: -1,
             type: "button",
-            onClick: () => r(!g),
+            onClick: () => a(!p),
             className: "k-input-button",
             rounded: null,
             icon: "caret-alt-down",
             svgIcon: ot,
             "aria-label": b.toLanguageString(
-              ve,
-              D[ve]
+              ge,
+              D[ge]
             )
           }
         ),
-        content: G(!1),
-        _mobileMode: Ie,
+        content: M(!1),
+        _mobileMode: $,
         _actionSheet: Oe()
       }
     )
   );
 });
-ge.propTypes = {
-  value: a.string,
-  defaultValue: a.string,
-  disabled: a.bool,
-  view: a.oneOf(["gradient", "palette", "combo"]),
-  views: a.arrayOf(a.oneOf(["gradient", "palette"])),
-  dir: a.string,
-  id: a.string,
-  icon: a.string,
+ke.propTypes = {
+  value: r.string,
+  defaultValue: r.string,
+  disabled: r.bool,
+  view: r.oneOf(["gradient", "palette", "combo"]),
+  views: r.arrayOf(r.oneOf(["gradient", "palette"])),
+  dir: r.string,
+  id: r.string,
+  icon: r.string,
   svgIcon: Qe,
-  ariaLabelledBy: a.string,
-  ariaDescribedBy: a.string,
-  size: a.oneOf([null, "small", "medium", "large"]),
-  rounded: a.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: a.oneOf([null, "solid", "flat", "outline"]),
-  className: a.string,
-  adaptive: a.bool,
-  adaptiveTitle: a.string
+  ariaLabelledBy: r.string,
+  ariaDescribedBy: r.string,
+  size: r.oneOf([null, "small", "medium", "large"]),
+  rounded: r.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: r.oneOf([null, "solid", "flat", "outline"]),
+  className: r.string,
+  adaptive: r.bool,
+  adaptiveTitle: r.string,
+  adaptiveSubtitle: r.string
 };
 const k = {
   size: "medium",
@@ -392,8 +393,8 @@ const k = {
   gradientSettings: st,
   paletteSettings: ut
 };
-ge.displayName = "KendoColorPicker";
+ke.displayName = "KendoColorPicker";
 export {
-  ge as ColorPicker,
+  ke as ColorPicker,
   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"),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 v=Object.getOwnPropertyDescriptor(e,b);Object.defineProperty(h,b,v.get?v:{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"}),v=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"),[g,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(()=>{v.current&&v.current.focus()},[v]);t.useImperativeHandle(v,()=>({element:B.current,focus:L,props:e,value:_}),[_,L,e]),t.useImperativeHandle(h,()=>v.current);const R=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&z(!C)},[C]),S=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&N==="gradient"?V(!g):a==="gradient"&&N==="palette"&&V(!0)},[N,g]),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:g,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:!g,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:!g,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:g,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&&g)&&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&&!g)&&t.createElement(Q.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:q,size:i,...e._paletteSettings})),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;
+"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 v=Object.getOwnPropertyDescriptor(e,b);Object.defineProperty(h,b,v.get?v:{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"}),v=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"),[g,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(()=>{v.current&&v.current.focus()},[v]);t.useImperativeHandle(v,()=>({element:B.current,focus:L,props:e,value:_}),[_,L,e]),t.useImperativeHandle(h,()=>v.current);const R=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&z(!C)},[C]),S=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&N==="gradient"?V(!g):a==="gradient"&&N==="palette"&&V(!0)},[N,g]),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:g,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:!g,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:!g,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:g,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&&g)&&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&&!g)&&t.createElement(Q.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:q,size:i,...e._paletteSettings})),w&&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:j},l.messages[l.flatColorPickerApplyBtn]),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:D},l.messages[l.flatColorPickerCancelBtn])))}),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;