@progress/kendo-react-inputs 14.0.0-develop.1 → 14.0.0-develop.2

package/checkbox/Checkbox.mjs

@@ -7,11 +7,11 @@
  */
 import * as e from "react";
 import a from "prop-types";
-import { createPropsContext as Ve, usePropsContext as Pe, useId as Ee, dispatchEvent as P, useKendoPaste as Be, Keys as _, useDir as Ne, classNames as E, getTabIndex as Ie, kendoThemeMaps as $ } from "@progress/kendo-react-common";
+import { usePropsContext as Ve, useId as Pe, dispatchEvent as P, useKendoPaste as Ee, Keys as _, useDir as Be, classNames as E, getTabIndex as Ne, kendoThemeMaps as $, createPropsContext as Ie } from "@progress/kendo-react-common";
 import { useLocalization as Fe } from "@progress/kendo-react-intl";
 import { messages as ze, checkboxValidation as Ke, checkboxOptionalText as Me } from "../messages/index.mjs";
-const Se = Ve(), W = e.forwardRef((j, G) => {
-  const B = Pe(Se, j), {
+const Se = Ie(), W = e.forwardRef((j, G) => {
+  const B = Ve(Se, j), {
     ariaDescribedBy: J,
     ariaLabelledBy: Q,
     checked: N,
@@ -56,7 +56,7 @@ const Se = Ve(), W = e.forwardRef((j, G) => {
     [D]
   );
   e.useImperativeHandle(G, c);
-  const [se, ce] = e.useState(ee), [re, ie] = e.useState(ae), T = typeof s == "boolean" || s === null, v = N !== void 0, i = T, C = i ? s : re, g = v ? N : i ? void 0 : se, w = z || b, L = g === void 0 && C, O = L ? C : g, u = L || i ? s === null ? s : void 0 : s || C, de = O === null || u === null, q = Ee(), ue = Fe(), R = (t) => ue.toLanguageString(t, ze[t]), H = R(Ke), be = R(Me), y = K !== void 0 ? K : d ? !!g : !0;
+  const [se, ce] = e.useState(ee), [re, ie] = e.useState(ae), T = typeof s == "boolean" || s === null, v = N !== void 0, i = T, C = i ? s : re, g = v ? N : i ? void 0 : se, w = z || b, L = g === void 0 && C, O = L ? C : g, u = L || i ? s === null ? s : void 0 : s || C, de = O === null || u === null, q = Pe(), ue = Fe(), R = (t) => ue.toLanguageString(t, ze[t]), H = R(Ke), be = R(Me), y = K !== void 0 ? K : d ? !!g : !0;
   e.useEffect(() => {
     n.current && n.current.setCustomValidity && n.current.setCustomValidity(y ? "" : M || H);
   }, [y, M, H]);
@@ -83,7 +83,7 @@ const Se = Ve(), W = e.forwardRef((j, G) => {
     },
     [r]
   );
-  Be(n, {
+  Ee(n, {
     fieldName: w,
     onValueChange: me,
     enabled: !!w
@@ -120,7 +120,7 @@ const Se = Ve(), W = e.forwardRef((j, G) => {
       h && !o && P(h, t, c(), void 0);
     },
     [h, o, c]
-  ), Ce = Ne(n, B.dir), ge = E("k-checkbox-wrap", X), U = {
+  ), Ce = Be(n, B.dir), ge = E("k-checkbox-wrap", X), U = {
     type: "checkbox",
     className: E("k-checkbox", {
       [`k-checkbox-${$.sizeMap[m] || m}`]: m,
@@ -134,7 +134,7 @@ const Se = Ve(), W = e.forwardRef((j, G) => {
     id: b || q,
     disabled: o,
     required: d !== void 0 ? d : !1,
-    tabIndex: Ie(oe, o),
+    tabIndex: Ne(oe, o),
     role: "checkbox",
     checked: !!O,
     "aria-describedby": J,

package/colors/ColorGradient.mjs

@@ -7,7 +7,7 @@
  */
 import * as r from "react";
 import o from "prop-types";
-import { withIdHOC as F, createPropsContext as G, withPropsContext as M, validatePackage as A, getLicenseMessage as _, canUseDOM as N, Navigation as f, getActiveElement as b, disableNavigatableContainer as C, focusFirstFocusableChild as I, enableNavigatableContainer as T, keepFocusInContainer as O, TABBABLE_ELEMENTS as z, getTabIndex as k, classNames as B, kendoThemeMaps as P, Draggable as V, WatermarkOverlay as K } from "@progress/kendo-react-common";
+import { withIdHOC as F, withPropsContext as G, createPropsContext as M, validatePackage as A, getLicenseMessage as _, canUseDOM as N, Navigation as f, getActiveElement as b, disableNavigatableContainer as C, focusFirstFocusableChild as I, enableNavigatableContainer as T, keepFocusInContainer as O, TABBABLE_ELEMENTS as z, getTabIndex as k, classNames as B, kendoThemeMaps as P, Draggable as V, WatermarkOverlay as K } from "@progress/kendo-react-common";
 import { packageMetadata as R } from "../package-metadata.mjs";
 import { Slider as S } from "../slider/Slider.mjs";
 import { isPresent as y, fitIntoBounds as E } from "./utils/misc.mjs";
@@ -358,8 +358,8 @@ h.displayName = "ColorGradient", h.propTypes = {
   size: void 0
 };
 let m = h;
-const ie = G(), re = F(
-  M(
+const ie = M(), re = F(
+  G(
     ie,
     m
   )

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 xe=require("react"),r=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 T=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const P in g)if(P!=="default"){const F=Object.getOwnPropertyDescriptor(g,P);Object.defineProperty(T,P,F.get?F:{enumerable:!0,get:()=>g[P]})}}return T.default=g,Object.freeze(T)}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,T)=>{var ue,de;const P=!n.validatePackage(ke.packageMetadata,{component:"ColorPicker"}),F=n.getLicenseMessage(ke.packageMetadata),l=n.usePropsContext(me,g),_=We.useLocalization(),Y=n.useAdaptiveModeContext(),{size:p=w.size,rounded:C=w.rounded,fillMode:x=w.fillMode,gradientSettings:y=w.gradientSettings,paletteSettings:h=w.paletteSettings,flatColorPickerSettings:R,view:f=l.views?void 0:w.view,views:s=f?void 0:w.views,activeView:ee,popupSettings:b,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=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle]),adaptiveSubtitle:ne}=l,u=t.useRef(null),A=t.useRef(null),O=t.useRef(null),m=t.useRef(null),S=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),E=J(l.open),i=G?l.value:Se,v=E?l.open:_e,oe=t.useRef(i),re=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(T,()=>({element:u.current,actionElement:Pe.current,value:i,focus:re}),[i,re]);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 o=t.useCallback((e,c)=>{E||(!e&&!c&&u&&u.current&&u.current.focus(),he(e))},[E]),le=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)=>{!E&&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 I,pe,ge;if(n.getActiveElement(document)!==u.current){const fe=(I=O.current)==null?void 0:I.wrapperRef.current,z=(pe=A.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)}}}}}),[o,E]),Ae=t.useCallback(le.triggerKeyboardEvent.bind(le),[]),Ie=t.useCallback(()=>{E||(A.current&&A.current.wrapperRef.current?n.focusFirstFocusableChild(A.current.wrapperRef.current):O.current?O.current.focus():m.current&&m.current.element&&n.focusFirstFocusableChild(m.current.element))},[E]),L=e=>oe.current=e,ie=t.useCallback(e=>{const c={value:oe.current,nativeEvent:e.nativeEvent,syntheticEvent:e};k(c),o(!v,!0)},[v]),$=t.useCallback(()=>{o(!1,!0)},[o]),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=>{S.current?(clearTimeout(S.current),S.current=void 0):(ae(!0),K&&!v&&o(!0)),W&&W.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[K,W,v,o]),Oe=t.useCallback(()=>{o(!1,!0),ae(!1),S.current=void 0},[]),De=t.useCallback(e=>{clearTimeout(S.current),S.current=window.setTimeout(Oe),U&&U.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[U]),k=t.useCallback((e,c)=>{var I;const a=c?e.rgbaValue||"":(I=e.value)!=null?I:"";G||Te(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),o(!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,{...y,_adaptive:e,ref:A,isInsidePopup:!0,size:e?"large":p,value:i,onChange:k}),(f==="combo"||f==="palette")&&t.createElement(Q.ColorPalette,{...h,ref:O,size:e?"large":p,value:i,onChange:ce}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["gradient","palette"],activeView:ee,setOpen:o,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["palette","gradient"],setOpen:o,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(N.FlatColorPicker,{...R,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["gradient"],showButtons:!e,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["palette"],showButtons:!e,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:L}),P&&t.createElement(n.WatermarkOverlay,{message:F})),[ee,x,R,y,k,ce,h,o,p,i,f,s]),Le=t.useCallback(()=>{var c;const e={animation:!!((c=b==null?void 0:b.animate)==null||c),title:te,subTitle:ne,expand:v,onClose:$,windowWidth:D,footer:{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:$,applyText:_.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:ie}};return t.createElement(Ue.AdaptiveMode,{...e},t.createElement(je.ActionSheetContent,null,Z(!0)))},[b==null?void 0:b.animate,te,ne,v,$,D,_,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-${x}`]:x,[`k-rounded-${n.kendoThemeMaps.roundedMap[C]||C}`]:C,"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}`,...b},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:()=>o(!v),className:"k-input-button",icon:"caret-alt-down",svgIcon:He.caretAltDownIcon,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:Z(!1),_mobileMode:K,_actionSheet:Le()}))});X.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:n.svgIconPropType,ariaLabelledBy:r.string,ariaDescribedBy:r.string,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large","full","none"]),fillMode:r.oneOf(["solid","flat","outline"]),className:r.string,adaptive:r.bool,adaptiveTitle:r.string,adaptiveSubtitle:r.string};const w={size:void 0,rounded:void 0,fillMode:void 0,view:"palette",views:["gradient","palette"],gradientSettings:Ke,paletteSettings:$e};X.displayName="KendoColorPicker";exports.ColorPicker=X;exports.ColorPickerPropsContext=me;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const xe=require("react"),r=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 T=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const P in g)if(P!=="default"){const F=Object.getOwnPropertyDescriptor(g,P);Object.defineProperty(T,P,F.get?F:{enumerable:!0,get:()=>g[P]})}}return T.default=g,Object.freeze(T)}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,T)=>{var ue,de;const P=!n.validatePackage(ke.packageMetadata,{component:"ColorPicker"}),F=n.getLicenseMessage(ke.packageMetadata),l=n.usePropsContext(me,g),_=We.useLocalization(),Y=n.useAdaptiveModeContext(),{size:p=w.size,rounded:C=w.rounded,fillMode:x=w.fillMode,gradientSettings:y=w.gradientSettings,paletteSettings:h=w.paletteSettings,flatColorPickerSettings:R,view:f=l.views?void 0:w.view,views:s=f?void 0:w.views,activeView:ee,popupSettings:b,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=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle]),adaptiveSubtitle:ne}=l,u=t.useRef(null),A=t.useRef(null),O=t.useRef(null),m=t.useRef(null),S=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),E=J(l.open),i=G?l.value:Se,v=E?l.open:_e,oe=t.useRef(i),re=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(T,()=>({element:u.current,actionElement:Pe.current,value:i,focus:re}),[i,re]);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 o=t.useCallback((e,c)=>{E||(!e&&!c&&u&&u.current&&u.current.focus(),he(e))},[E]),le=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)=>{!E&&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 I,pe,ge;if(n.getActiveElement(document)!==u.current){const fe=(I=O.current)==null?void 0:I.wrapperRef.current,z=(pe=A.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)}}}}}),[o,E]),Ae=t.useCallback(le.triggerKeyboardEvent.bind(le),[]),Ie=t.useCallback(()=>{E||(A.current&&A.current.wrapperRef.current?n.focusFirstFocusableChild(A.current.wrapperRef.current):O.current?O.current.focus():m.current&&m.current.element&&n.focusFirstFocusableChild(m.current.element))},[E]),L=e=>oe.current=e,ie=t.useCallback(e=>{const c={value:oe.current,nativeEvent:e.nativeEvent,syntheticEvent:e};k(c),o(!v,!0)},[v]),$=t.useCallback(()=>{o(!1,!0)},[o]),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=>{S.current?(clearTimeout(S.current),S.current=void 0):(ae(!0),K&&!v&&o(!0)),W&&W.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[K,W,v,o]),Oe=t.useCallback(()=>{o(!1,!0),ae(!1),S.current=void 0},[]),De=t.useCallback(e=>{clearTimeout(S.current),S.current=window.setTimeout(Oe),U&&U.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[U]),k=t.useCallback((e,c)=>{var I;const a=c?e.rgbaValue||"":(I=e.value)!=null?I:"";G||Te(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),o(!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,{...y,_adaptive:e,ref:A,isInsidePopup:!0,size:e?"large":p,value:i,onChange:k}),(f==="combo"||f==="palette")&&t.createElement(Q.ColorPalette,{...h,ref:O,size:e?"large":p,value:i,onChange:ce}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["gradient","palette"],activeView:ee,setOpen:o,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["palette","gradient"],setOpen:o,showButtons:!e,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(N.FlatColorPicker,{...R,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["gradient"],showButtons:!e,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:L}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(N.FlatColorPicker,{...R,_paletteSettings:h,_gradientSettings:{_adaptive:e,...y},ref:m,size:e?"large":p,rounded:C,views:["palette"],showButtons:!e,setOpen:o,value:i,onChange:k,setAdaptiveModeValue:L}),P&&t.createElement(n.WatermarkOverlay,{message:F})),[ee,x,R,y,k,ce,h,o,p,i,f,s]),Le=t.useCallback(()=>{var c;const e={animation:!!((c=b==null?void 0:b.animate)==null||c),title:te,subTitle:ne,expand:v,onClose:$,windowWidth:D,footer:{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:$,applyText:_.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:ie}};return t.createElement(Ue.AdaptiveMode,{...e},t.createElement(je.ActionSheetContent,null,Z(!0)))},[b==null?void 0:b.animate,te,ne,v,$,D,_,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-${x}`]:x,[`k-rounded-${n.kendoThemeMaps.roundedMap[C]||C}`]:C,"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}`,...b},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:()=>o(!v),className:"k-input-button",icon:"caret-alt-down",svgIcon:He.caretAltDownIcon,size:p,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:Z(!1),_mobileMode:K,_actionSheet:Le()}))});X.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:n.svgIconPropType,ariaLabelledBy:r.string,ariaDescribedBy:r.string,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large","full","none"]),fillMode:r.oneOf(["solid","flat","outline"]),className:r.string,adaptive:r.bool,adaptiveTitle:r.string,adaptiveSubtitle:r.string};const w={size:void 0,rounded:void 0,fillMode:void 0,view:"palette",views:["gradient","palette"],gradientSettings:Ke,paletteSettings:$e};X.displayName="KendoColorPicker";exports.ColorPicker=X;exports.ColorPickerPropsContext=me;

package/colors/ColorPicker.mjs

@@ -7,7 +7,7 @@
  */
 import * as t from "react";
 import r from "prop-types";
-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, getTabIndex as Ye, classNames as Z, kendoThemeMaps as fe, IconWrap as et, svgIconPropType as tt } from "@progress/kendo-react-common";
+import { 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 pe, WatermarkOverlay as Je, useDir as Qe, getTabIndex as Xe, classNames as Z, kendoThemeMaps as fe, IconWrap as Ye, createPropsContext 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";
@@ -24,9 +24,9 @@ const pt = {
 }, ft = {
   palette: ot,
   tileSize: rt
-}, j = (D) => D !== void 0, mt = Ke(), Ee = t.forwardRef((D, be) => {
+}, j = (D) => D !== void 0, mt = et(), Ee = t.forwardRef((D, be) => {
   var ie, le;
-  const we = !$e(me, { component: "ColorPicker" }), Se = Ge(me), o = Me(mt, D), w = st(), q = Ze(), {
+  const we = !Ke(me, { component: "ColorPicker" }), Se = $e(me), o = Ge(mt, D), w = st(), q = Me(), {
     size: u = C.size,
     rounded: v = C.rounded,
     fillMode: x = C.fillMode,
@@ -67,7 +67,7 @@ const pt = {
   );
   const $ = !!(R && q && R <= q.medium && Te);
   t.useEffect(() => {
-    const e = je && window.ResizeObserver && new window.ResizeObserver(We.bind(void 0));
+    const e = Ze && 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();
     };
@@ -77,7 +77,7 @@ const pt = {
       k || (!e && !l && s && s.current && s.current.focus(), Be(e));
     },
     [k]
-  ), ne = t.useMemo(() => new qe({
+  ), ne = t.useMemo(() => new je({
     root: s,
     selectors: [".k-colorpicker", ".k-color-picker-popup"],
     tabIndex: 0,
@@ -97,7 +97,7 @@ const pt = {
         },
         Tab: (e, l, n) => {
           var h, ce, se;
-          if (Je(document) !== s.current) {
+          if (qe(document) !== s.current) {
             const ue = (h = P.current) == null ? void 0 : h.wrapperRef.current, I = (ce = _.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);
           }
@@ -252,7 +252,7 @@ const pt = {
         onChange: f,
         setAdaptiveModeValue: A
       }
-    ), we && /* @__PURE__ */ t.createElement(Qe, { message: Se })),
+    ), we && /* @__PURE__ */ t.createElement(Je, { message: Se })),
     [
       J,
       x,
@@ -297,7 +297,7 @@ const pt = {
   ]), We = t.useCallback((e) => {
     for (const l of e)
       Le(l.target.clientWidth);
-  }, []), oe = Xe(s, o.dir), Ue = ye !== !1;
+  }, []), oe = Qe(s, o.dir), Ue = ye !== !1;
   return /* @__PURE__ */ t.createElement(
     "span",
     {
@@ -320,7 +320,7 @@ const pt = {
         className: he
       }),
       ref: s,
-      tabIndex: Ye(_e, N),
+      tabIndex: Xe(_e, N),
       title: o.title,
       onKeyDown: De,
       onFocus: Oe,
@@ -344,7 +344,7 @@ const pt = {
             })
           },
           T && /* @__PURE__ */ t.createElement("span", { className: Z("k-color-preview-icon", T) }),
-          !T && (O || F) && /* @__PURE__ */ t.createElement(et, { name: O, icon: F }),
+          !T && (O || F) && /* @__PURE__ */ t.createElement(Ye, { name: O, icon: F }),
           /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: i } })
         )),
         button: /* @__PURE__ */ t.createElement(
@@ -356,6 +356,7 @@ const pt = {
             className: "k-input-button",
             icon: "caret-alt-down",
             svgIcon: ct,
+            size: u,
             "aria-label": w.toLanguageString(
               Ce,
               L[Ce]

package/colors/FlatColorPicker.mjs

@@ -7,7 +7,7 @@
  */
 import * as a from "react";
 import l from "prop-types";
-import { validatePackage as le, getLicenseMessage as ne, Navigation as oe, getActiveElement as B, disableNavigatableContainer as K, focusFirstFocusableChild as ie, enableNavigatableContainer as re, keepFocusInContainer as ce, classNames as M, getTabIndex as se, kendoThemeMaps as de, WatermarkOverlay as ve } from "@progress/kendo-react-common";
+import { validatePackage as le, getLicenseMessage as ne, Navigation as oe, getActiveElement as B, disableNavigatableContainer as K, focusFirstFocusableChild as ie, enableNavigatableContainer as re, keepFocusInContainer as ce, classNames as M, kendoThemeMaps as se, getTabIndex as de, WatermarkOverlay as ve } from "@progress/kendo-react-common";
 import { ButtonGroup as L, Button as d } from "@progress/kendo-react-buttons";
 import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as ue } from "@progress/kendo-svg-icons";
 import { ColorPalette as ge } from "./ColorPalette.mjs";
@@ -155,11 +155,11 @@ const D = a.forwardRef((e, H) => {
       "aria-disabled": e.disabled ? "true" : void 0,
       style: { position: "relative", ...e.style },
       ref: y,
-      tabIndex: se(e.tabIndex, e.disabled),
+      tabIndex: de(e.tabIndex, e.disabled),
       className: M(
         "k-flatcolorpicker k-coloreditor",
         {
-          [`k-coloreditor-${de.sizeMap[o] || o}`]: o,
+          [`k-coloreditor-${se.sizeMap[o] || o}`]: o,
           "k-disabled": e.disabled
         },
         e.className