@progress/kendo-react-inputs 9.4.0-develop.22 → 9.4.0-develop.24

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

package/colors/ColorPicker.mjs

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