@progress/kendo-react-inputs 14.5.0-develop.14 → 14.5.0-develop.15

package/colors/ColorPicker.mjs

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

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: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;
+"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),_=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:N=!0,showPreview:z=!0,showClearButton:T=!0,view:E=e.views?void 0:"ColorGradient",views:d=E?void 0:["gradient","palette"],activeView:S="gradient",size:i=void 0,rounded:j=void 0}=e,[C,D]=t.useState((E||"ColorGradient")==="ColorGradient"),[v,V]=t.useState((d!=null?d:[])[0]==="gradient"&&S==="gradient"),[c,y]=t.useState(e.value||P||void 0),[k,M]=t.useState(e.value||P||void 0),L=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const g=p.useLocalization(),A=t.useCallback(()=>{h.current&&h.current.focus()},[h]);t.useImperativeHandle(h,()=>({element:w.current,focus:A,props:e,value:L}),[L,A,e]),t.useImperativeHandle(b,()=>h.current);const R=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&D(!C)},[C]),I=t.useCallback(a=>{a==="gradient"&&!v||a==="palette"&&v||a==="palette"&&S==="gradient"?V(!v):a==="gradient"&&S==="palette"&&V(!0)},[S,v]),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]),q=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)&&(!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]),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||g.toLanguageString(l.flatColorPickerAriaLabel,l.messages[l.flatColorPickerAriaLabel]),"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":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),size:i,fillMode:"flat",svgIcon:m.dropletSliderIcon,className:v?"k-selected":void 0,onClick:()=>I("gradient")}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),size:i,fillMode:"flat",svgIcon:m.paletteIcon,className:v?void 0:"k-selected",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":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),fillMode:"flat",size:i,svgIcon:m.paletteIcon,className:v?void 0:"k-selected",onClick:()=>I("palette")}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),fillMode:"flat",size:i,svgIcon:m.dropletSliderIcon,className:v?"k-selected":void 0,onClick:()=>I("gradient")})),E&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),fillMode:"flat",size:i,className:C?"k-selected":void 0,onClick:()=>R("ColorGradient"),icon:"droplet-slider",svgIcon:m.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":g.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),fillMode:"flat",size:i,className:C?void 0:"k-selected",onClick:()=>R("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":g.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":L===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&&v)&&t.createElement(Z.ColorGradient,{ref:F,role:"none",ariaLabel:void 0,value:c,onChange:q,opacity:e.opacity,format:e.format,size:i,rounded:j,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(E&&!C||d&&!v)&&t.createElement(Y.ColorPalette,{value:c,onChange:q,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},g.toLanguageString(l.flatColorPickerApplyBtn,l.messages[l.flatColorPickerApplyBtn])),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",onClick:W},g.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"])};_.displayName="KendoFlatColorPicker";_.propTypes=te;exports.FlatColorPicker=_;