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

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

package/colors/FlatColorPicker.mjs

@@ -7,34 +7,34 @@
  */
 import * as a from "react";
 import l from "prop-types";
-import { validatePackage as le, getLicenseMessage as ne, Navigation as oe, getActiveElement as _, 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";
-import { ColorGradient as me } from "./ColorGradient.mjs";
+import { validatePackage as oe, getLicenseMessage as ie, Navigation as re, getActiveElement as L, disableNavigatableContainer as K, focusFirstFocusableChild as ce, enableNavigatableContainer as se, keepFocusInContainer as de, classNames as _, kendoThemeMaps as ve, getTabIndex as ue, WatermarkOverlay as ge } from "@progress/kendo-react-common";
+import { ButtonGroup as M, Button as v } from "@progress/kendo-react-buttons";
+import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as me } from "@progress/kendo-svg-icons";
+import { ColorPalette as ke } from "./ColorPalette.mjs";
+import { ColorGradient as Ce } from "./ColorGradient.mjs";
 import { packageMetadata as O } from "../package-metadata.mjs";
-import { useLocalization as ke } from "@progress/kendo-react-intl";
-import { flatColorPickerColorGradientBtn as k, messages as v, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as T, flatColorPickerApplyBtn as Ce, flatColorPickerCancelBtn as fe } from "../messages/index.mjs";
-const D = a.forwardRef((e, H) => {
-  const W = !le(O, { component: "FlatColorPicker" }), q = ne(O), f = a.useRef(null), y = a.useRef(null), $ = a.useRef(null), {
+import { useLocalization as fe } from "@progress/kendo-react-intl";
+import { flatColorPickerColorGradientBtn as k, messages as u, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as T, flatColorPickerApplyBtn as D, flatColorPickerCancelBtn as H } from "../messages/index.mjs";
+const W = a.forwardRef((e, q) => {
+  const $ = !oe(O, { component: "FlatColorPicker" }), j = ie(O), f = a.useRef(null), y = a.useRef(null), J = a.useRef(null), {
     defaultValue: b,
     showButtons: w = !0,
-    showPreview: j = !0,
-    showClearButton: J = !0,
+    showPreview: Q = !0,
+    showClearButton: U = !0,
     view: h = e.views ? void 0 : "ColorGradient",
     views: r = h ? void 0 : ["gradient", "palette"],
     activeView: P = "gradient",
     size: o = void 0,
-    rounded: Q = void 0
-  } = e, [u, U] = a.useState(
+    rounded: X = void 0
+  } = e, [g, Y] = a.useState(
     (h || "ColorGradient") === "ColorGradient"
   ), [s, 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;
+  ), [i, E] = a.useState(e.value || b || void 0), [m, 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 = ke(), R = a.useCallback(() => {
+  const d = fe(), R = a.useCallback(() => {
     f.current && f.current.focus();
   }, [f]);
   a.useImperativeHandle(
@@ -46,18 +46,18 @@ const D = a.forwardRef((e, H) => {
       value: B
     }),
     [B, R, e]
-  ), a.useImperativeHandle(H, () => f.current);
+  ), a.useImperativeHandle(q, () => f.current);
   const A = a.useCallback(
     (t) => {
-      (t === "ColorGradient" && !u || t === "ColorPalette" && u) && U(!u);
+      (t === "ColorGradient" && !g || t === "ColorPalette" && g) && Y(!g);
     },
-    [u]
+    [g]
   ), N = a.useCallback(
     (t) => {
       t === "gradient" && !s || t === "palette" && s || t === "palette" && P === "gradient" ? x(!s) : t === "gradient" && P === "palette" && x(!0);
     },
     [P, s]
-  ), X = a.useCallback(
+  ), Z = a.useCallback(
     (t) => {
       var c;
       const n = b || void 0;
@@ -85,7 +85,7 @@ const D = a.forwardRef((e, H) => {
       (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
     },
     [e.onPreviewChange]
-  ), Y = a.useCallback(
+  ), p = a.useCallback(
     (t) => {
       if (i !== void 0 && I(i), e.onChange) {
         const n = {
@@ -97,54 +97,54 @@ const D = a.forwardRef((e, H) => {
       }
     },
     [i, e.onChange]
-  ), Z = a.useCallback(() => {
-    E(g), e.setOpen && e.setOpen(!1);
-  }, [g]), p = a.useCallback(
+  ), ee = a.useCallback(() => {
+    E(m), e.setOpen && e.setOpen(!1);
+  }, [m]), ae = a.useCallback(
     (t) => {
-      if (E(g), e.onPreviewChange) {
+      if (E(m), e.onPreviewChange) {
         const n = {
-          value: g,
+          value: m,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
         e.onPreviewChange.call(void 0, n);
       }
     },
-    [g, e.onPreviewChange]
-  ), ee = a.useCallback(
+    [m, e.onPreviewChange]
+  ), te = a.useCallback(
     (t) => {
       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 te = {
+        const ne = {
           value: i,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        e.onChange.call(void 0, te);
+        e.onChange.call(void 0, ne);
       }
     },
     [i, w, e.onChange]
   ), z = a.useMemo(
-    () => new oe({
+    () => new re({
       root: y,
       selectors: [".k-coloreditor"],
       tabIndex: 0,
       keyboardEvents: {
         keydown: {
           Tab: (t, n, c) => {
-            _(document) === t ? K(t) : ce(c, t);
+            L(document) === t ? K(t) : de(c, t);
           },
           Enter: (t, n, c) => {
-            _(document) === t && (ie(t), re(t));
+            L(document) === t && (ce(t), se(t));
           },
           Escape: (t, n, c) => {
-            _(document) !== t && (t.focus(), K(t));
+            L(document) !== t && (t.focus(), K(t));
           }
         }
       }
     }),
     []
-  ), ae = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
+  ), le = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
   return /* @__PURE__ */ a.createElement(
     "div",
     {
@@ -155,25 +155,25 @@ const D = a.forwardRef((e, H) => {
       "aria-disabled": e.disabled ? "true" : void 0,
       style: { position: "relative", ...e.style },
       ref: y,
-      tabIndex: de(e.tabIndex, e.disabled),
-      className: M(
+      tabIndex: ue(e.tabIndex, e.disabled),
+      className: _(
         "k-flatcolorpicker k-coloreditor",
         {
-          [`k-coloreditor-${se.sizeMap[o] || o}`]: o,
+          [`k-coloreditor-${ve.sizeMap[o] || o}`]: o,
           "k-disabled": e.disabled
         },
         e.className
       ),
-      onBlur: ee,
-      onKeyDown: ae
+      onBlur: te,
+      onKeyDown: le
     },
-    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(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
-      d,
+    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(
+      v,
       {
         type: "button",
-        "aria-label": m.toLanguageString(
+        "aria-label": d.toLanguageString(
           k,
-          v[k]
+          u[k]
         ),
         togglable: !0,
         size: o,
@@ -183,12 +183,12 @@ const D = a.forwardRef((e, H) => {
         onClick: () => N("gradient")
       }
     ), /* @__PURE__ */ a.createElement(
-      d,
+      v,
       {
         type: "button",
-        "aria-label": m.toLanguageString(
+        "aria-label": d.toLanguageString(
           C,
-          v[C]
+          u[C]
         ),
         togglable: !0,
         size: o,
@@ -197,13 +197,13 @@ const D = a.forwardRef((e, H) => {
         selected: !s,
         onClick: () => N("palette")
       }
-    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
-      d,
+    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(M, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+      v,
       {
         type: "button",
-        "aria-label": m.toLanguageString(
+        "aria-label": d.toLanguageString(
           C,
-          v[C]
+          u[C]
         ),
         togglable: !0,
         fillMode: "flat",
@@ -213,12 +213,12 @@ const D = a.forwardRef((e, H) => {
         onClick: () => N("palette")
       }
     ), /* @__PURE__ */ a.createElement(
-      d,
+      v,
       {
         type: "button",
-        "aria-label": m.toLanguageString(
+        "aria-label": d.toLanguageString(
           k,
-          v[k]
+          u[k]
         ),
         togglable: !0,
         fillMode: "flat",
@@ -227,56 +227,56 @@ const D = a.forwardRef((e, H) => {
         selected: s,
         onClick: () => N("gradient")
       }
-    )), h && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
-      d,
+    )), h && /* @__PURE__ */ a.createElement(M, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+      v,
       {
         type: "button",
-        "aria-label": m.toLanguageString(
+        "aria-label": d.toLanguageString(
           k,
-          v[k]
+          u[k]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
-        selected: u,
+        selected: g,
         onClick: () => A("ColorGradient"),
         icon: "droplet-slider",
         svgIcon: V
       }
     ), /* @__PURE__ */ a.createElement(
-      d,
+      v,
       {
         type: "button",
-        "aria-label": m.toLanguageString(
+        "aria-label": d.toLanguageString(
           C,
-          v[C]
+          u[C]
         ),
         togglable: !0,
         fillMode: "flat",
         size: o,
-        selected: !u,
+        selected: !g,
         onClick: () => A("ColorPalette"),
         icon: "palette",
         svgIcon: G
       }
-    ))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, J && /* @__PURE__ */ a.createElement(
-      d,
+    ))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, U && /* @__PURE__ */ a.createElement(
+      v,
       {
         type: "button",
         fillMode: "flat",
         size: o,
-        onClick: X,
-        "aria-label": m.toLanguageString(
+        onClick: Z,
+        "aria-label": d.toLanguageString(
           T,
-          v[T]
+          u[T]
         ),
         icon: "droplet-slash",
-        svgIcon: ue
+        svgIcon: me
       }
-    ), j && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
+    ), Q && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
       "span",
       {
-        className: M("k-coloreditor-preview-color", "k-color-preview", {
+        className: _("k-coloreditor-preview-color", "k-color-preview", {
           "k-no-color": B === void 0
         })
       },
@@ -290,23 +290,23 @@ const D = a.forwardRef((e, H) => {
     ), /* @__PURE__ */ a.createElement(
       "span",
       {
-        className: M("k-coloreditor-current-color", "k-color-preview", {
-          "k-no-color": g === void 0
+        className: _("k-coloreditor-current-color", "k-color-preview", {
+          "k-no-color": m === void 0
         }),
-        onClick: p
+        onClick: ae
       },
       /* @__PURE__ */ a.createElement(
         "span",
         {
           className: "k-color-preview-mask",
-          style: { background: g || void 0 }
+          style: { background: m || void 0 }
         }
       )
-    ))), W && /* @__PURE__ */ a.createElement(ve, { message: q })),
-    /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && u || r && s) && /* @__PURE__ */ a.createElement(
-      me,
+    ))), $ && /* @__PURE__ */ a.createElement(ge, { message: j })),
+    /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && g || r && s) && /* @__PURE__ */ a.createElement(
+      Ce,
       {
-        ref: $,
+        ref: J,
         role: "none",
         ariaLabel: void 0,
         value: i,
@@ -314,12 +314,12 @@ const D = a.forwardRef((e, H) => {
         opacity: e.opacity,
         format: e.format,
         size: o,
-        rounded: Q,
+        rounded: X,
         _adaptive: e._gradientSettings ? e._gradientSettings._adaptive : void 0,
         ...e._gradientSettings
       }
-    ), (h && !u || r && !s) && /* @__PURE__ */ a.createElement(
-      ge,
+    ), (h && !g || r && !s) && /* @__PURE__ */ a.createElement(
+      ke,
       {
         ariaDisabled: !0,
         ariaLabelledBy: "required_label",
@@ -330,15 +330,15 @@ const D = a.forwardRef((e, H) => {
       }
     )),
     w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ a.createElement(
-      d,
+      v,
       {
         type: "button",
         themeColor: "primary",
         className: "k-coloreditor-apply",
-        onClick: Y
+        onClick: p
       },
-      v[Ce]
-    ), /* @__PURE__ */ a.createElement(d, { type: "button", className: "k-coloreditor-cancel", onClick: Z }, v[fe]))
+      d.toLanguageString(D, u[D])
+    ), /* @__PURE__ */ a.createElement(v, { type: "button", className: "k-coloreditor-cancel", onClick: ee }, d.toLanguageString(H, u[H])))
   );
 }), be = {
   id: l.string,
@@ -362,8 +362,8 @@ const D = a.forwardRef((e, H) => {
   views: l.array,
   size: l.oneOf(["small", "medium", "large"])
 };
-D.displayName = "KendoFlatColorPicker";
-D.propTypes = be;
+W.displayName = "KendoFlatColorPicker";
+W.propTypes = be;
 export {
-  D as FlatColorPicker
+  W as FlatColorPicker
 };

package/colors/interfaces/ColorPickerProps.d.ts

@@ -251,4 +251,10 @@ export interface ColorPickerProps {
      * ```
      */
     adaptiveSubtitle?: string;
+    /**
+     * Specifies whether action buttons (Apply/Cancel) will be rendered in the popup footer.
+     *
+     * @default true
+     */
+    showButtons?: boolean;
 }

package/common/AdaptiveMode.d.ts

@@ -10,7 +10,7 @@ import * as React from 'react';
 /** @hidden */
 export interface AdaptiveModeProps extends ActionSheetProps {
     windowWidth?: number;
-    footer: {
+    footer?: {
         cancelText: string;
         onCancel: () => void;
         applyText: string;

package/common/AdaptiveMode.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 k=require("react"),s=require("@progress/kendo-react-layout"),v=require("@progress/kendo-svg-icons"),i=require("@progress/kendo-react-buttons"),y=require("@progress/kendo-react-common");function h(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,l.get?l:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const n=h(k),C=e=>{const{windowWidth:t=0,children:a,navigatable:l,navigatableElements:d,expand:u,animation:m,title:p,subTitle:b,footer:o,onClose:r}=e,f=()=>n.createElement(i.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",size:"large",themeColor:"primary",svgIcon:v.checkIcon,onClick:r}),c=y.useAdaptiveModeContext(),g={navigatable:l||!1,navigatableElements:d||[],expand:u,animation:m,suffixActions:f(),onClose:r,animationStyles:c&&t<=c.small?{top:0,width:"100%",height:"100%"}:void 0,title:p,subTitle:b,className:"k-adaptive-actionsheet",position:c&&t<=c.small?"fullscreen":void 0};return n.createElement(s.ActionSheet,{...g},a,n.createElement(s.ActionSheetFooter,{className:"k-actions k-actions-stretched"},n.createElement(i.Button,{size:"large",className:"k-coloreditor-cancel","aria-label":o.cancelText,onClick:o.onCancel},o.cancelText),n.createElement(i.Button,{themeColor:"primary",size:"large",className:"k-coloreditor-apply","aria-label":o.applyText,onClick:o.onApply},o.applyText)))};exports.AdaptiveMode=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),s=require("@progress/kendo-react-layout"),v=require("@progress/kendo-svg-icons"),i=require("@progress/kendo-react-buttons"),y=require("@progress/kendo-react-common");function h(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,l.get?l:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const n=h(k),C=e=>{const{windowWidth:a=0,children:o,navigatable:l,navigatableElements:d,expand:u,animation:m,title:p,subTitle:b,footer:t,onClose:r}=e,f=()=>n.createElement(i.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",size:"large",themeColor:"primary",svgIcon:v.checkIcon,onClick:r}),c=y.useAdaptiveModeContext(),g={navigatable:l||!1,navigatableElements:d||[],expand:u,animation:m,suffixActions:f(),onClose:r,animationStyles:c&&a<=c.small?{top:0,width:"100%",height:"100%"}:void 0,title:p,subTitle:b,className:"k-adaptive-actionsheet",position:c&&a<=c.small?"fullscreen":void 0};return n.createElement(s.ActionSheet,{...g},o,t&&n.createElement(s.ActionSheetFooter,{className:"k-actions k-actions-stretched"},n.createElement(i.Button,{size:"large",className:"k-coloreditor-cancel","aria-label":t.cancelText,onClick:t.onCancel},t.cancelText),n.createElement(i.Button,{themeColor:"primary",size:"large",className:"k-coloreditor-apply","aria-label":t.applyText,onClick:t.onApply},t.applyText)))};exports.AdaptiveMode=C;

package/common/AdaptiveMode.mjs

@@ -48,7 +48,7 @@ const E = (i) => {
     className: "k-adaptive-actionsheet",
     position: a && l <= a.small ? "fullscreen" : void 0
   };
-  return /* @__PURE__ */ t.createElement(v, { ...b }, r, /* @__PURE__ */ t.createElement(x, { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ t.createElement(
+  return /* @__PURE__ */ t.createElement(v, { ...b }, r, e && /* @__PURE__ */ t.createElement(x, { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ t.createElement(
     o,
     {
       size: "large",