@progress/kendo-react-inputs 12.1.1-develop.4 → 12.1.1-develop.5

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

package/colors/ColorPicker.mjs

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