@progress/kendo-react-inputs 9.4.0-develop.9 → 9.4.1-develop.1

package/colors/FlatColorPicker.js

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

package/colors/FlatColorPicker.mjs

@@ -5,293 +5,297 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as e from "react";
+import * as a from "react";
 import l from "prop-types";
-import { validatePackage as Z, Navigation as p, getActiveElement as S, disableNavigatableContainer as K, keepFocusInContainer as ee, focusFirstFocusableChild as ae, enableNavigatableContainer as te, getTabIndex as le, classNames as L, kendoThemeMaps as oe } from "@progress/kendo-react-common";
-import { ButtonGroup as G, Button as s } from "@progress/kendo-react-buttons";
-import { dropletSliderIcon as M, paletteIcon as V, dropletSlashIcon as ne } from "@progress/kendo-svg-icons";
-import { ColorPalette as ie } from "./ColorPalette.mjs";
-import { ColorGradient as re } from "./ColorGradient.mjs";
-import { packageMetadata as ce } from "../package-metadata.mjs";
+import { validatePackage as p, Navigation as ee, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as ae, focusFirstFocusableChild as te, enableNavigatableContainer as le, getTabIndex as ne, classNames as V, kendoThemeMaps as oe } from "@progress/kendo-react-common";
+import { ButtonGroup as M, Button as s } from "@progress/kendo-react-buttons";
+import { dropletSliderIcon as L, paletteIcon as G, dropletSlashIcon as ie } from "@progress/kendo-svg-icons";
+import { ColorPalette as re } from "./ColorPalette.mjs";
+import { ColorGradient as ce } from "./ColorGradient.mjs";
+import { packageMetadata as de } from "../package-metadata.mjs";
 import { useLocalization as se } from "@progress/kendo-react-intl";
-import { flatColorPickerColorGradientBtn as b, messages as d, flatColorPickerColorPaletteBtn as f, flatColorPickerClearBtn as T, flatColorPickerCancelBtn as de, flatColorPickerApplyBtn as ue } from "../messages/index.mjs";
-const A = e.forwardRef((a, D) => {
-  Z(ce);
-  const h = e.useRef(null), y = e.useRef(null), H = e.useRef(null), {
-    defaultValue: u,
+import { flatColorPickerColorGradientBtn as C, messages as u, flatColorPickerColorPaletteBtn as k, flatColorPickerClearBtn as T, flatColorPickerCancelBtn as ue, flatColorPickerApplyBtn as ve } from "../messages/index.mjs";
+const D = a.forwardRef((e, O) => {
+  p(de);
+  const f = a.useRef(null), y = a.useRef(null), H = a.useRef(null), {
+    defaultValue: b,
     showButtons: w = !0,
     showPreview: q = !0,
-    showClearButton: O = !0,
-    view: E = a.views ? void 0 : "ColorGradient",
-    views: i = E ? void 0 : ["gradient", "palette"],
+    showClearButton: $ = !0,
+    view: h = e.views ? void 0 : "ColorGradient",
+    views: r = h ? void 0 : ["gradient", "palette"],
     activeView: P = "gradient",
     size: o = "medium"
-  } = a, [v, $] = e.useState(
-    (E || "ColorGradient") === "ColorGradient"
-  ), [c, _] = e.useState(
-    (i != null ? i : [])[0] === "gradient" && P === "gradient"
-  ), [n, C] = e.useState(a.value || u || void 0), [g, N] = e.useState(a.value || u || void 0), B = a.value !== void 0 ? a.value : void 0;
-  e.useEffect(() => {
-    C(a.value);
-  }, [a.value]);
-  const m = se(), x = e.useCallback(() => {
-    h.current && h.current.focus();
-  }, [h]);
-  e.useImperativeHandle(
-    h,
+  } = e, [v, j] = a.useState(
+    (h || "ColorGradient") === "ColorGradient"
+  ), [d, x] = a.useState(
+    (r != null ? r : [])[0] === "gradient" && P === "gradient"
+  ), [i, E] = a.useState(e.value || b || void 0), [g, I] = a.useState(e.value || b || void 0), B = e.value !== void 0 ? e.value : void 0;
+  a.useEffect(() => {
+    E(e.value);
+  }, [e.value]);
+  const m = se(), R = a.useCallback(() => {
+    f.current && f.current.focus();
+  }, [f]);
+  a.useImperativeHandle(
+    f,
     () => ({
       element: y.current,
-      focus: x,
-      props: a,
+      focus: R,
+      props: e,
       value: B
     }),
-    [B, x, a]
-  ), e.useImperativeHandle(D, () => h.current);
-  const R = e.useCallback(
+    [B, R, e]
+  ), a.useImperativeHandle(O, () => f.current);
+  const A = a.useCallback(
     (t) => {
-      (t === "ColorGradient" && !v || t === "ColorPalette" && v) && $(!v);
+      (t === "ColorGradient" && !v || t === "ColorPalette" && v) && j(!v);
     },
     [v]
-  ), I = e.useCallback(
+  ), N = a.useCallback(
     (t) => {
-      t === "gradient" && !c || t === "palette" && c || t === "palette" && P === "gradient" ? _(!c) : t === "gradient" && P === "palette" && _(!0);
+      t === "gradient" && !d || t === "palette" && d || t === "palette" && P === "gradient" ? x(!d) : t === "gradient" && P === "palette" && x(!0);
     },
-    [P, c]
-  ), j = e.useCallback(
+    [P, d]
+  ), J = a.useCallback(
     (t) => {
-      if (u ? (C(u), N(u)) : (C(void 0), N(void 0)), a.onPreviewChange) {
-        const r = {
-          value: u || void 0,
+      var c;
+      const n = b || void 0;
+      if (E(n), I(n), (c = e._gradientSettings) != null && c._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(n), e.onPreviewChange) {
+        const S = {
+          value: n,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onPreviewChange.call(void 0, r);
+        e.onPreviewChange.call(void 0, S);
       }
     },
-    [u, a.onPreviewChange]
-  ), z = e.useCallback(
+    [b, e.onPreviewChange]
+  ), z = a.useCallback(
     (t) => {
-      if (C(t.value), a.onPreviewChange) {
-        const r = {
+      var n;
+      if (E(t.value), e.onPreviewChange) {
+        const c = {
           value: t.value,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t.syntheticEvent
         };
-        a.onPreviewChange.call(void 0, r);
+        e.onPreviewChange.call(void 0, c);
       }
+      (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
     },
-    [a.onPreviewChange]
-  ), J = e.useCallback(
+    [e.onPreviewChange]
+  ), Q = a.useCallback(
     (t) => {
-      if (n !== void 0 && N(n), a.onChange) {
-        const r = {
-          value: n,
+      if (i !== void 0 && I(i), e.onChange) {
+        const n = {
+          value: i,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onChange.call(void 0, r);
+        e.onChange.call(void 0, n);
       }
     },
-    [n, a.onChange]
-  ), Q = e.useCallback(() => {
-    C(g);
-  }, [g]), U = e.useCallback(
+    [i, e.onChange]
+  ), U = a.useCallback(() => {
+    E(g), e.setOpen && e.setOpen(!1);
+  }, [g]), W = a.useCallback(
     (t) => {
-      if (C(g), a.onPreviewChange) {
-        const r = {
+      if (E(g), e.onPreviewChange) {
+        const n = {
           value: g,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onPreviewChange.call(void 0, r);
+        e.onPreviewChange.call(void 0, n);
       }
     },
-    [g, a.onPreviewChange]
-  ), W = e.useCallback(
+    [g, e.onPreviewChange]
+  ), X = a.useCallback(
     (t) => {
-      var k;
-      if ((!t.relatedTarget || !((k = y.current) != null && k.contains(t.relatedTarget))) && (!w && n !== void 0 && N(n), !w && a.onChange)) {
-        const Y = {
-          value: n,
+      var c, S;
+      if ((!t.relatedTarget || !((c = y.current) != null && c.contains(t.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
+        const Z = {
+          value: i,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onChange.call(void 0, Y);
+        e.onChange.call(void 0, Z);
       }
     },
-    [n, w, a.onChange]
-  ), F = e.useMemo(
-    () => new p({
+    [i, w, e.onChange]
+  ), F = a.useMemo(
+    () => new ee({
       root: y,
       selectors: [".k-coloreditor"],
       tabIndex: 0,
       keyboardEvents: {
         keydown: {
-          Tab: (t, r, k) => {
-            S(document) === t ? K(t) : ee(k, t);
+          Tab: (t, n, c) => {
+            _(document) === t ? K(t) : ae(c, t);
           },
-          Enter: (t, r, k) => {
-            S(document) === t && (ae(t), te(t));
+          Enter: (t, n, c) => {
+            _(document) === t && (te(t), le(t));
           },
-          Escape: (t, r, k) => {
-            S(document) !== t && (t.focus(), K(t));
+          Escape: (t, n, c) => {
+            _(document) !== t && (t.focus(), K(t));
           }
         }
       }
     }),
     []
-  ), X = e.useCallback(F.triggerKeyboardEvent.bind(F), []);
-  return /* @__PURE__ */ e.createElement(
+  ), Y = a.useCallback(F.triggerKeyboardEvent.bind(F), []);
+  return /* @__PURE__ */ a.createElement(
     "div",
     {
-      id: a.id,
+      id: e.id,
       role: "textbox",
-      "aria-label": a.ariaLabel,
-      "aria-labelledby": a.ariaLabelledBy,
-      "aria-disabled": a.disabled ? "true" : void 0,
-      style: a.style,
+      "aria-label": e.ariaLabel,
+      "aria-labelledby": e.ariaLabelledBy,
+      "aria-disabled": e.disabled ? "true" : void 0,
+      style: e.style,
       ref: y,
-      tabIndex: le(a.tabIndex, a.disabled),
-      className: L(
+      tabIndex: ne(e.tabIndex, e.disabled),
+      className: V(
         "k-flatcolorpicker k-coloreditor",
         {
           [`k-coloreditor-${oe.sizeMap[o] || o}`]: o,
-          "k-disabled": a.disabled
+          "k-disabled": e.disabled
         },
-        a.className
+        e.className
       ),
-      onBlur: W,
-      onKeyDown: X
+      onBlur: X,
+      onKeyDown: Y
     },
-    a.header || /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, i && i[0] === "gradient" && i[1] === "palette" && /* @__PURE__ */ e.createElement(G, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
+    e.header || /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ a.createElement(M, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          b,
-          d[b]
+          C,
+          u[C]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
-        svgIcon: M,
-        selected: c,
-        onClick: () => I("gradient")
+        svgIcon: L,
+        selected: d,
+        onClick: () => N("gradient")
       }
-    ), /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          f,
-          d[f]
+          k,
+          u[k]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
-        svgIcon: V,
-        selected: !c,
-        onClick: () => I("palette")
+        svgIcon: G,
+        selected: !d,
+        onClick: () => N("palette")
       }
-    )), i && i[0] === "palette" && i[1] === "gradient" && /* @__PURE__ */ e.createElement(G, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
+    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(M, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          f,
-          d[f]
+          k,
+          u[k]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
-        svgIcon: V,
-        selected: !c,
-        onClick: () => I("palette")
+        svgIcon: G,
+        selected: !d,
+        onClick: () => N("palette")
       }
-    ), /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          b,
-          d[b]
+          C,
+          u[C]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
-        svgIcon: M,
-        selected: c,
-        onClick: () => I("gradient")
+        svgIcon: L,
+        selected: d,
+        onClick: () => N("gradient")
       }
-    )), E && /* @__PURE__ */ e.createElement(G, { className: "k-button-group-flat" }, /* @__PURE__ */ e.createElement(
+    )), h && /* @__PURE__ */ a.createElement(M, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          b,
-          d[b]
+          C,
+          u[C]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
         selected: v,
-        onClick: () => R("ColorGradient"),
+        onClick: () => A("ColorGradient"),
         icon: "droplet-slider",
-        svgIcon: M
+        svgIcon: L
       }
-    ), /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         "aria-label": m.toLanguageString(
-          f,
-          d[f]
+          k,
+          u[k]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
         selected: !v,
-        onClick: () => R("ColorPalette"),
+        onClick: () => A("ColorPalette"),
         icon: "palette",
-        svgIcon: V
+        svgIcon: G
       }
-    ))), /* @__PURE__ */ e.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, O && /* @__PURE__ */ e.createElement(
+    ))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, $ && /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         fillMode: "flat",
         size: o,
-        onClick: j,
+        onClick: J,
         "aria-label": m.toLanguageString(
           T,
-          d[T]
+          u[T]
         ),
         icon: "droplet-slash",
-        svgIcon: ne
+        svgIcon: ie
       }
-    ), q && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement(
+    ), q && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
       "span",
       {
-        className: L("k-coloreditor-preview-color", "k-color-preview", {
+        className: V("k-coloreditor-preview-color", "k-color-preview", {
           "k-no-color": B === void 0
         })
       },
-      /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ a.createElement(
         "span",
         {
           className: "k-color-preview-mask",
-          style: { background: n || void 0 }
+          style: { background: i || void 0 }
         }
       )
-    ), /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ a.createElement(
       "span",
       {
-        className: L("k-coloreditor-current-color", "k-color-preview", {
+        className: V("k-coloreditor-current-color", "k-color-preview", {
           "k-no-color": g === void 0
         }),
-        onClick: U
+        onClick: W
       },
-      /* @__PURE__ */ e.createElement(
+      /* @__PURE__ */ a.createElement(
         "span",
         {
           className: "k-color-preview-mask",
@@ -299,42 +303,43 @@ const A = e.forwardRef((a, D) => {
         }
       )
     )))),
-    /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, (E && v || i && c) && /* @__PURE__ */ e.createElement(
-      re,
+    /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && v || r && d) && /* @__PURE__ */ a.createElement(
+      ce,
       {
         ref: H,
         role: "none",
         ariaLabel: void 0,
-        value: n,
+        value: i,
         onChange: z,
-        opacity: a.opacity,
-        format: a.format,
+        opacity: e.opacity,
+        format: e.format,
         size: o,
-        _adaptive: a._gradientSettings ? a._gradientSettings._adaptive : void 0
+        _adaptive: e._gradientSettings ? e._gradientSettings._adaptive : void 0,
+        ...e._gradientSettings
       }
-    ), (E && !v || i && !c) && /* @__PURE__ */ e.createElement(
-      ie,
+    ), (h && !v || r && !d) && /* @__PURE__ */ a.createElement(
+      re,
       {
         ariaDisabled: !0,
         ariaLabelledBy: "required_label",
-        value: n,
+        value: i,
         onChange: z,
         size: o
       }
     )),
-    w && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ e.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: Q }, d[de]), /* @__PURE__ */ e.createElement(
+    w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ a.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, u[ue]), /* @__PURE__ */ a.createElement(
       s,
       {
         type: "button",
         themeColor: "primary",
         className: "k-coloreditor-apply",
         size: o,
-        onClick: J
+        onClick: Q
       },
-      d[ue]
+      u[ve]
     ))
   );
-}), ve = {
+}), ge = {
   id: l.string,
   style: l.any,
   className: l.string,
@@ -356,8 +361,8 @@ const A = e.forwardRef((a, D) => {
   views: l.array,
   size: l.oneOf([null, "small", "medium", "large"])
 };
-A.displayName = "KendoFlatColorPicker";
-A.propTypes = ve;
+D.displayName = "KendoFlatColorPicker";
+D.propTypes = ge;
 export {
-  A as FlatColorPicker
+  D as FlatColorPicker
 };

package/colors/Picker.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 r=require("react"),a=require("@progress/kendo-react-popup"),u=require("@progress/kendo-react-common");function s(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const n=s(r),m="bottom",p="top",i=e=>{const o=e.popupSettings||{},t=e.dir==="rtl"?"right":"left",c=n.useMemo(()=>({horizontal:t,vertical:m}),[t]),l=n.useMemo(()=>({horizontal:t,vertical:p}),[t]);return n.createElement(n.Fragment,null,e.input,e.button,!e._mobileMode&&n.createElement(a.Popup,{style:{...(o||{}).style,direction:e.dir},...o,anchor:e.popupAnchor,anchorAlign:c,popupAlign:l,show:e.open,onOpen:e.onOpen,onClose:e.onClose,className:u.classNames(o.className),popupClass:"k-colorpicker-popup k-color-picker-popup"},e.content),e._mobileMode&&e._actionSheet)};i.displayName="KendoPickerComponent";exports.Picker=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),r=require("@progress/kendo-react-popup"),u=require("@progress/kendo-react-common");function s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const o=s(a),m="bottom",d="top",i=e=>{const n=e.popupSettings||{},t=e.dir==="rtl"?"right":"left",c=o.useMemo(()=>({horizontal:t,vertical:m}),[t]),l=o.useMemo(()=>({horizontal:t,vertical:d}),[t]);return o.createElement(o.Fragment,null,e.input,e.button,!e._mobileMode&&o.createElement(r.Popup,{style:{...(n||{}).style,direction:e.dir},...n,anchor:e.popupAnchor,anchorAlign:c,popupAlign:l,show:e.open,onOpen:e.onOpen,onClose:e.onClose,className:u.classNames(n.className),popupClass:"k-colorpicker-popup"},e.content),e._mobileMode&&e._actionSheet)};i.displayName="KendoPickerComponent";exports.Picker=i;

package/colors/Picker.mjs

@@ -5,36 +5,36 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as e from "react";
-import { Popup as l } from "@progress/kendo-react-popup";
+import * as o from "react";
+import { Popup as c } from "@progress/kendo-react-popup";
 import { classNames as a } from "@progress/kendo-react-common";
-const m = "bottom", r = "top", s = (o) => {
-  const n = o.popupSettings || {}, t = o.dir === "rtl" ? "right" : "left", c = e.useMemo(
+const m = "bottom", r = "top", s = (e) => {
+  const n = e.popupSettings || {}, t = e.dir === "rtl" ? "right" : "left", i = o.useMemo(
     () => ({ horizontal: t, vertical: m }),
     [t]
-  ), i = e.useMemo(
+  ), l = o.useMemo(
     () => ({ horizontal: t, vertical: r }),
     [t]
   );
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, o.input, o.button, !o._mobileMode && /* @__PURE__ */ e.createElement(
-    l,
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, e.input, e.button, !e._mobileMode && /* @__PURE__ */ o.createElement(
+    c,
     {
       style: {
         ...(n || {}).style,
-        direction: o.dir
+        direction: e.dir
       },
       ...n,
-      anchor: o.popupAnchor,
-      anchorAlign: c,
-      popupAlign: i,
-      show: o.open,
-      onOpen: o.onOpen,
-      onClose: o.onClose,
+      anchor: e.popupAnchor,
+      anchorAlign: i,
+      popupAlign: l,
+      show: e.open,
+      onOpen: e.onOpen,
+      onClose: e.onClose,
       className: a(n.className),
-      popupClass: "k-colorpicker-popup k-color-picker-popup"
+      popupClass: "k-colorpicker-popup"
     },
-    o.content
-  ), o._mobileMode && o._actionSheet);
+    e.content
+  ), e._mobileMode && e._actionSheet);
 };
 s.displayName = "KendoPickerComponent";
 export {