@progress/kendo-react-inputs 9.4.0-develop.24 → 9.4.0-develop.4

package/colors/ColorPicker.mjs

@@ -5,390 +5,247 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as t from "react";
-import a from "prop-types";
-import { createPropsContext as Ve, validatePackage as He, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as We, Navigation as $e, getActiveElement as Ge, keepFocusInContainer as R, focusFirstFocusableChild as ue, useDir as Me, classNames as W, kendoThemeMaps as de, getTabIndex as Ze, IconWrap as je, svgIconPropType as qe } from "@progress/kendo-react-common";
-import { packageMetadata as Je } from "../package-metadata.mjs";
-import { Picker as Qe } from "./Picker.mjs";
-import { ColorGradient as Xe } from "./ColorGradient.mjs";
-import { ColorPalette as Ye, DEFAULT_PRESET as et, DEFAULT_TILE_SIZE as tt } from "./ColorPalette.mjs";
-import { FlatColorPicker as A } from "./FlatColorPicker.mjs";
-import { Button as nt } from "@progress/kendo-react-buttons";
-import { caretAltDownIcon as at } from "@progress/kendo-svg-icons";
-import { colorPickerAdaptiveTitle as pe, messages as I, flatColorPickerCancelBtn as fe, flatColorPickerApplyBtn as me, colorPickerDropdownButtonAriaLabel as ve } from "../messages/index.mjs";
-import { useLocalization as rt } from "@progress/kendo-react-intl";
-import { AdaptiveMode as ot } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as lt } from "@progress/kendo-react-layout";
-const it = {
+"use client";
+import * as e from "react";
+import o from "prop-types";
+import { createPropsContext as fe, validatePackage as me, usePropsContext as ve, Navigation as ke, getActiveElement as ge, keepFocusInContainer as h, focusFirstFocusableChild as be, useDir as Ee, classNames as A, kendoThemeMaps as _, getTabIndex as Ce, IconWrap as we, svgIconPropType as ye } from "@progress/kendo-react-common";
+import { packageMetadata as Te } from "../package-metadata.mjs";
+import { Picker as Se } from "./Picker.mjs";
+import { ColorGradient as Pe } from "./ColorGradient.mjs";
+import { ColorPalette as Ie, DEFAULT_PRESET as Re, DEFAULT_TILE_SIZE as De } from "./ColorPalette.mjs";
+import { Button as Ne } from "@progress/kendo-react-buttons";
+import { caretAltDownIcon as he } from "@progress/kendo-svg-icons";
+import { colorPickerDropdownButtonAriaLabel as K, messages as Ae } from "../messages/index.mjs";
+import { useLocalization as Fe } from "@progress/kendo-react-intl";
+const Le = {
   opacity: !0
-}, ct = {
-  palette: et,
-  tileSize: tt
-}, $ = (z) => z !== void 0, st = Ve(), ge = t.forwardRef((z, ke) => {
-  var re, oe;
-  He(Je);
-  const r = Ue(st, z), E = rt(), G = Ke(), {
-    size: u = k.size,
-    rounded: B = k.rounded,
-    fillMode: h = k.fillMode,
-    gradientSettings: M = k.gradientSettings,
-    paletteSettings: Z = k.paletteSettings,
-    flatColorPickerSettings: b,
-    view: d = r.views ? void 0 : k.view,
-    views: c = d ? void 0 : k.views,
-    activeView: j,
-    popupSettings: m,
-    valid: Ce,
-    disabled: D,
-    tabIndex: Ee,
-    icon: x,
-    svgIcon: L,
-    iconClassName: S,
-    onChange: N,
-    onFocus: O,
-    onBlur: F,
-    onActiveColorClick: V,
-    className: be,
-    adaptive: we,
-    adaptiveTitle: q = E.toLanguageString(pe, I[pe])
-  } = r, s = t.useRef(null), w = t.useRef(null), T = t.useRef(null), f = t.useRef(null), C = t.useRef(), ye = t.useRef(null), [he, J] = t.useState(!1), [Se, Te] = t.useState(r.defaultValue), [Pe, _e] = t.useState(!1), [P, Re] = t.useState(), H = $(r.value), v = $(r.open), o = H ? r.value : Se, g = v ? r.open : Pe, Q = t.useRef(o), X = t.useCallback(() => {
-    s.current && s.current.focus();
+}, xe = {
+  palette: Re,
+  tileSize: De
+}, F = (b) => b !== void 0, Be = fe(), U = e.forwardRef((b, G) => {
+  me(Te);
+  const a = ve(Be, b), $ = Fe(), {
+    size: E = d.size,
+    rounded: C = d.rounded,
+    fillMode: L = d.fillMode,
+    gradientSettings: W = d.gradientSettings,
+    paletteSettings: Z = d.paletteSettings,
+    view: s = d.view,
+    popupSettings: j,
+    valid: q,
+    disabled: w,
+    tabIndex: J,
+    icon: y,
+    svgIcon: T,
+    iconClassName: m,
+    onChange: S,
+    onFocus: P,
+    onBlur: I,
+    onActiveColorClick: R,
+    className: Q
+  } = a, r = e.useRef(null), f = e.useRef(null), v = e.useRef(null), p = e.useRef(), X = e.useRef(null), [Y, x] = e.useState(!1), [ee, te] = e.useState(a.defaultValue), [ne, oe] = e.useState(!1), D = F(a.value), c = F(a.open), l = D ? a.value : ee, k = c ? a.open : ne, B = e.useCallback(() => {
+    r.current && r.current.focus();
   }, []);
-  t.useImperativeHandle(
-    ke,
+  e.useImperativeHandle(
+    G,
     () => ({
       // we agreed that each element will have focus method exposed
-      element: s.current,
-      actionElement: ye.current,
-      value: o,
-      focus: X
+      element: r.current,
+      actionElement: X.current,
+      value: l,
+      focus: B
     }),
-    [o, X]
+    [l, B]
   );
-  const Ae = !!(P && G && P <= G.medium && we);
-  t.useEffect(() => {
-    const e = We && window.ResizeObserver && new window.ResizeObserver(Oe.bind(void 0));
-    return document != null && document.body && e && e.observe(document.body), () => {
-      document != null && document.body && e && e.disconnect();
-    };
-  }, []);
-  const l = t.useCallback(
-    (e, i) => {
-      v || (!e && !i && s && s.current && s.current.focus(), _e(e));
+  const u = e.useCallback(
+    (t, i) => {
+      c || (!t && !i && r && r.current && r.current.focus(), oe(t));
     },
-    [v]
-  ), Y = t.useMemo(() => new $e({
-    root: s,
+    [c]
+  ), M = e.useMemo(() => new ke({
+    root: r,
     selectors: [".k-colorpicker", ".k-color-picker-popup"],
     tabIndex: 0,
     keyboardEvents: {
       keydown: {
-        Escape: (e, i, n) => {
-          l(!1);
+        Escape: (t, i, n) => {
+          u(!1);
         },
-        Enter: (e, i, n) => {
-          !v && e === s.current && (n.preventDefault(), n.stopPropagation(), l(!0));
+        Enter: (t, i, n) => {
+          !c && t === r.current && (n.preventDefault(), n.stopPropagation(), u(!0));
         },
-        ArrowDown: (e, i, n) => {
-          n.altKey && (n.preventDefault(), n.stopPropagation(), l(!0));
+        ArrowDown: (t, i, n) => {
+          n.altKey && (n.preventDefault(), n.stopPropagation(), u(!0));
         },
-        ArrowUp: (e, i, n) => {
-          n.altKey && (n.preventDefault(), n.stopPropagation(), l(!1));
+        ArrowUp: (t, i, n) => {
+          n.altKey && (n.preventDefault(), n.stopPropagation(), u(!1));
         },
-        Tab: (e, i, n) => {
-          var y, le, ie;
-          if (Ge(document) !== s.current) {
-            const ce = (y = T.current) == null ? void 0 : y.wrapperRef.current, _ = (le = w.current) == null ? void 0 : le.wrapperRef.current, se = (ie = f.current) == null ? void 0 : ie.element;
-            d === "palette" && ce ? R(n, ce) : d === "gradient" && _ ? R(n, _) : d === "combo" && _ ? R(n, _.parentElement) : c && se && R(n, se);
+        Tab: (t, i, n) => {
+          var z, H;
+          if (ge(document) !== r.current) {
+            const V = (z = v.current) == null ? void 0 : z.wrapperRef.current, g = (H = f.current) == null ? void 0 : H.wrapperRef.current;
+            s === "palette" && V ? h(n, V) : s === "gradient" && g ? h(n, g) : s === "combo" && g && h(n, g.parentElement);
           }
         }
       }
     }
-  }), [l, v]), Ie = t.useCallback(Y.triggerKeyboardEvent.bind(Y), []), ze = t.useCallback(() => {
-    v || (w.current && w.current.wrapperRef.current ? ue(w.current.wrapperRef.current) : T.current ? T.current.focus() : f.current && f.current.element && ue(f.current.element));
-  }, [v]), ee = (e) => Q.current = e, te = t.useCallback(
-    (e) => {
-      const i = {
-        value: Q.current,
-        nativeEvent: e.nativeEvent,
-        syntheticEvent: e
-      };
-      p(i), l(!g, !0);
-    },
-    [g]
-  ), U = t.useCallback(() => {
-    l(!1, !0);
-  }, [l]), Be = t.useCallback(
-    (e) => {
-      V && V.call(void 0, {
-        syntheticEvent: e,
-        nativeEvent: e.nativeEvent,
-        value: o,
-        target: {
-          element: s.current,
-          value: o
-        }
+  }), [u, c]), ae = e.useCallback(M.triggerKeyboardEvent.bind(M), []), re = e.useCallback(() => {
+    c || (f.current && f.current.wrapperRef.current ? be(f.current.wrapperRef.current) : v.current && v.current.focus());
+  }, [c]), le = e.useCallback(() => {
+    u(!k, !0);
+  }, [k]), ie = e.useCallback(
+    (t) => {
+      R && R.call(void 0, {
+        syntheticEvent: t,
+        nativeEvent: t.nativeEvent,
+        value: l
       });
     },
-    [V, o]
-  ), De = t.useCallback(
-    (e) => {
-      C.current ? (clearTimeout(C.current), C.current = void 0) : J(!0), O && O.call(void 0, {
-        nativeEvent: e.nativeEvent,
-        syntheticEvent: e
+    [R, l]
+  ), se = e.useCallback(
+    (t) => {
+      p.current ? (clearTimeout(p.current), p.current = void 0) : x(!0), P && P.call(void 0, {
+        nativeEvent: t.nativeEvent,
+        syntheticEvent: t
       });
     },
-    [O]
-  ), xe = t.useCallback(() => {
-    l(!1, !0), J(!1), C.current = void 0;
-  }, []), Le = t.useCallback(
-    (e) => {
-      clearTimeout(C.current), C.current = window.setTimeout(xe), F && F.call(void 0, {
-        nativeEvent: e.nativeEvent,
-        syntheticEvent: e
+    [P]
+  ), ce = e.useCallback(() => {
+    u(!1, !0), x(!1), p.current = void 0;
+  }, []), ue = e.useCallback(
+    (t) => {
+      clearTimeout(p.current), p.current = window.setTimeout(ce), I && I.call(void 0, {
+        nativeEvent: t.nativeEvent,
+        syntheticEvent: t
       });
     },
-    [F]
-  ), p = t.useCallback(
-    (e, i) => {
-      var y;
-      const n = i ? e.rgbaValue || "" : (y = e.value) != null ? y : "";
-      H || Te(n), N && N.call(void 0, {
+    [I]
+  ), N = e.useCallback(
+    (t, i) => {
+      const n = i ? t.rgbaValue : t.value;
+      D || te(n), S && S.call(void 0, {
         value: n,
-        nativeEvent: e.nativeEvent,
-        syntheticEvent: e.syntheticEvent,
-        target: {
-          element: s.current,
-          value: n
-        }
-      }), l(!1);
+        nativeEvent: t.nativeEvent,
+        syntheticEvent: t.syntheticEvent
+      });
     },
-    [H, N]
-  ), ne = t.useCallback(
-    (e) => p(e, !0),
-    [$, p]
-  ), K = t.useCallback(
-    (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
-      Xe,
-      {
-        ...M,
-        _adaptive: e,
-        ref: w,
-        isInsidePopup: !0,
-        size: e ? "large" : u,
-        fillMode: h,
-        value: o,
-        onChange: p
-      }
-    ), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
-      Ye,
-      {
-        ...Z,
-        ref: T,
-        size: e ? "large" : u,
-        value: o,
-        onChange: ne
-      }
-    ), c && c[0] === "gradient" && c[1] === "palette" && /* @__PURE__ */ t.createElement(
-      A,
-      {
-        ...b,
-        _gradientSettings: { _adaptive: e },
-        ref: f,
-        size: e ? "large" : u,
-        views: ["gradient", "palette"],
-        activeView: j,
-        setOpen: l,
-        showButtons: !e,
-        value: o,
-        onChange: p
-      }
-    ), c && c[0] === "palette" && c[1] === "gradient" && /* @__PURE__ */ t.createElement(
-      A,
-      {
-        ...b,
-        _gradientSettings: { _adaptive: e },
-        ref: f,
-        size: e ? "large" : u,
-        views: ["palette", "gradient"],
-        setOpen: l,
-        showButtons: !e,
-        value: o,
-        onChange: p
-      }
-    ), c && c.includes("gradient") && !c.includes("palette") && /* @__PURE__ */ t.createElement(
-      A,
-      {
-        ...b,
-        _gradientSettings: { _adaptive: e },
-        ref: f,
-        size: e ? "large" : u,
-        views: ["gradient"],
-        showButtons: !e,
-        setOpen: l,
-        value: o,
-        onChange: p,
-        setAdaptiveModeValue: ee
-      }
-    ), c && c.includes("palette") && !c.includes("gradient") && /* @__PURE__ */ t.createElement(
-      A,
-      {
-        ...b,
-        _gradientSettings: { _adaptive: e },
-        ref: f,
-        size: e ? "large" : u,
-        views: ["palette"],
-        showButtons: !e,
-        setOpen: l,
-        value: o,
-        onChange: p,
-        setAdaptiveModeValue: ee
-      }
-    )),
-    [
-      j,
-      h,
-      b,
-      M,
-      p,
-      ne,
-      Z,
-      u,
-      o,
-      d,
-      c
-    ]
-  ), Ne = t.useCallback(() => {
-    var i;
-    const e = {
-      animation: !!((i = m == null ? void 0 : m.animate) == null || i),
-      title: q,
-      expand: g,
-      onClose: U,
-      windowWidth: P,
-      footer: {
-        cancelText: E.toLanguageString(fe, I[fe]),
-        onCancel: U,
-        applyText: E.toLanguageString(me, I[me]),
-        onApply: te
-      }
-    };
-    return /* @__PURE__ */ t.createElement(ot, { ...e }, /* @__PURE__ */ t.createElement(lt, { overflowHidden: !0 }, K(!0)));
-  }, [
-    m == null ? void 0 : m.animate,
-    q,
-    g,
-    U,
-    P,
-    E,
-    te,
-    K
-  ]), Oe = t.useCallback((e) => {
-    for (const i of e)
-      Re(i.target.clientWidth);
-  }, []), ae = Me(s, r.dir), Fe = Ce !== !1;
-  return /* @__PURE__ */ t.createElement(
+    [D, S]
+  ), pe = e.useCallback(
+    (t) => N(t, !0),
+    [F, N]
+  ), O = Ee(r, a.dir), de = q !== !1;
+  return /* @__PURE__ */ e.createElement(
     "span",
     {
-      id: r.id,
+      id: a.id,
       role: "combobox",
-      "aria-label": r.ariaLabel,
-      "aria-labelledby": r.ariaLabelledBy,
-      "aria-describedby": r.ariaDescribedBy,
+      "aria-label": a.ariaLabel,
+      "aria-labelledby": a.ariaLabelledBy,
+      "aria-describedby": a.ariaDescribedBy,
       "aria-haspopup": "dialog",
-      "aria-expanded": g,
-      "aria-controls": `k-colorpicker-popup-${(re = r.id) != null ? re : 0}`,
-      "aria-disabled": D ? "true" : void 0,
-      className: W("k-colorpicker", "k-picker", "k-icon-picker", {
-        [`k-picker-${de.sizeMap[u] || u}`]: u,
-        [`k-picker-${h}`]: h,
-        [`k-rounded-${de.roundedMap[B] || B}`]: B,
-        "k-invalid": !Fe,
-        "k-disabled": D,
-        "k-focus": he,
-        className: be
+      "aria-expanded": k,
+      "aria-disabled": w ? "true" : void 0,
+      className: A("k-colorpicker", "k-picker", "k-icon-picker", {
+        [`k-picker-${_.sizeMap[E] || E}`]: E,
+        [`k-picker-${L}`]: L,
+        [`k-rounded-${_.roundedMap[C] || C}`]: C,
+        "k-invalid": !de,
+        "k-disabled": w,
+        "k-focus": Y,
+        className: Q
       }),
-      ref: s,
-      tabIndex: Ze(Ee, D),
-      title: r.title,
-      onKeyDown: Ie,
-      onFocus: De,
-      onBlur: Le,
-      dir: ae
+      ref: r,
+      tabIndex: Ce(J, w),
+      title: a.title,
+      onKeyDown: ae,
+      onFocus: se,
+      onBlur: ue,
+      dir: O
     },
-    /* @__PURE__ */ t.createElement(
-      Qe,
+    /* @__PURE__ */ e.createElement(
+      Se,
       {
-        dir: ae,
-        open: g,
-        onOpen: ze,
-        popupAnchor: s.current || void 0,
-        popupSettings: { id: `k-colorpicker-popup-${(oe = r.id) != null ? oe : 0}`, ...m },
-        input: /* @__PURE__ */ t.createElement("span", { onClick: Be, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
+        dir: O,
+        open: k,
+        onOpen: re,
+        popupAnchor: r.current || void 0,
+        popupSettings: { ...j },
+        input: /* @__PURE__ */ e.createElement("span", { onClick: ie, className: "k-input-inner" }, /* @__PURE__ */ e.createElement(
           "span",
           {
-            className: W("k-value-icon", "k-color-preview", {
-              "k-no-color": !o,
-              "k-icon-color-preview": x || L || S
+            className: A("k-value-icon", "k-color-preview", {
+              "k-no-color": !l,
+              "k-icon-color-preview": y || T || m
             })
           },
-          S && /* @__PURE__ */ t.createElement("span", { className: W("k-color-preview-icon", S) }),
-          !S && (x || L) && /* @__PURE__ */ t.createElement(je, { name: x, icon: L }),
-          /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: o } })
+          m && /* @__PURE__ */ e.createElement("span", { className: A("k-color-preview-icon", m) }),
+          !m && (y || T) && /* @__PURE__ */ e.createElement(we, { name: y, icon: T }),
+          /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
         )),
-        button: /* @__PURE__ */ t.createElement(
-          nt,
+        button: /* @__PURE__ */ e.createElement(
+          Ne,
           {
             tabIndex: -1,
             type: "button",
-            onClick: () => l(!g),
+            onClick: le,
             className: "k-input-button",
             rounded: null,
             icon: "caret-alt-down",
-            svgIcon: at,
-            "aria-label": E.toLanguageString(
-              ve,
-              I[ve]
+            svgIcon: he,
+            "aria-label": $.toLanguageString(
+              K,
+              Ae[K]
             )
           }
         ),
-        content: K(!1),
-        _mobileMode: Ae,
-        _actionSheet: Ne()
+        content: /* @__PURE__ */ e.createElement(e.Fragment, null, (s === "combo" || s === "gradient") && /* @__PURE__ */ e.createElement(
+          Pe,
+          {
+            ...W,
+            ref: f,
+            isInsidePopup: !0,
+            value: l,
+            onChange: N
+          }
+        ), (s === "combo" || s === "palette") && /* @__PURE__ */ e.createElement(
+          Ie,
+          {
+            ...Z,
+            ref: v,
+            value: l,
+            onChange: pe
+          }
+        ))
       }
     )
   );
 });
-ge.propTypes = {
-  value: a.string,
-  defaultValue: a.string,
-  disabled: a.bool,
-  view: a.oneOf(["gradient", "palette", "combo"]),
-  views: a.arrayOf(a.oneOf(["gradient", "palette"])),
-  dir: a.string,
-  id: a.string,
-  icon: a.string,
-  svgIcon: qe,
-  ariaLabelledBy: a.string,
-  ariaDescribedBy: a.string,
-  size: a.oneOf([null, "small", "medium", "large"]),
-  rounded: a.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: a.oneOf([null, "solid", "flat", "outline"]),
-  className: a.string,
-  adaptive: a.bool,
-  adaptiveTitle: a.string
+U.propTypes = {
+  value: o.string,
+  defaultValue: o.string,
+  disabled: o.bool,
+  view: o.oneOf(["gradient", "palette", "combo"]),
+  dir: o.string,
+  id: o.string,
+  icon: o.string,
+  svgIcon: ye,
+  ariaLabelledBy: o.string,
+  ariaDescribedBy: o.string,
+  size: o.oneOf([null, "small", "medium", "large"]),
+  rounded: o.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: o.oneOf([null, "solid", "flat", "outline"]),
+  className: o.string
 };
-const k = {
+const d = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   view: "palette",
-  views: ["gradient", "palette"],
-  gradientSettings: it,
-  paletteSettings: ct
+  gradientSettings: Le,
+  paletteSettings: xe
 };
-ge.displayName = "KendoColorPicker";
+U.displayName = "KendoColorPicker";
 export {
-  ge as ColorPicker,
-  st as ColorPickerPropsContext
+  U as ColorPicker,
+  Be 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 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 v in e)if(v!=="default"){const f=Object.getOwnPropertyDescriptor(e,v);Object.defineProperty(h,v,f.get?f:{enumerable:!0,get:()=>e[v]})}}return h.default=e,Object.freeze(h)}const t=Y(J),_=t.forwardRef((e,h)=>{r.validatePackage(W.packageMetadata);const v=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"),[g,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(()=>{v.current&&v.current.focus()},[v]);t.useImperativeHandle(v,()=>({element:f.current,focus:V,props:e,value:G}),[G,V,e]),t.useImperativeHandle(h,()=>v.current);const L=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&z(!C)},[C]),N=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&w==="gradient"?M(!g):a==="gradient"&&w==="palette"&&M(!0)},[w,g]),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:g,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:!g,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:!g,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:g,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&&g)&&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}),(P&&!C||d&&!g)&&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=_;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),o=require("prop-types"),l=require("@progress/kendo-react-common"),g=require("@progress/kendo-react-buttons"),E=require("@progress/kendo-svg-icons"),j=require("./ColorPalette.js"),A=require("./ColorGradient.js"),D=require("../package-metadata.js"),z=require("@progress/kendo-react-intl"),n=require("../messages/index.js");function K(e){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const u=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(b,c,u.get?u:{enumerable:!0,get:()=>e[c]})}}return b.default=e,Object.freeze(b)}const a=K(O),P=a.forwardRef((e,b)=>{l.validatePackage(D.packageMetadata);const c=a.useRef(null),u=a.useRef(null),S=a.useRef(null),{defaultValue:s,showButtons:m=!0,showPreview:G=!0,showClearButton:R=!0}=e,[v,q]=a.useState((e.view||"ColorGradient")==="ColorGradient"),[r,C]=a.useState(e.value||s||void 0),[d,f]=a.useState(e.value||s||void 0),h=e.value!==void 0?e.value:void 0;a.useEffect(()=>{C(e.value)},[e.value]);const y=z.useLocalization(),w=a.useCallback(()=>{c.current&&c.current.focus()},[c]);a.useImperativeHandle(c,()=>({element:u.current,focus:w,props:e,value:h}),[h,w,e]),a.useImperativeHandle(b,()=>c.current);const B=a.useCallback(t=>{(t==="ColorGradient"&&!v||t==="ColorPalette"&&v)&&q(!v)},[v]),L=a.useCallback(t=>{if(s?(C(s),f(s)):(C(void 0),f(void 0)),e.onPreviewChange){const i={value:s||void 0,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onPreviewChange.call(void 0,i)}},[s,e.onPreviewChange]),N=a.useCallback(t=>{if(C(t.value),e.onPreviewChange){const i={value:t.value,nativeEvent:t.nativeEvent,syntheticEvent:t.syntheticEvent};e.onPreviewChange.call(void 0,i)}},[e.onPreviewChange]),_=a.useCallback(t=>{if(r!==void 0&&f(r),e.onChange){const i={value:r,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onChange.call(void 0,i)}},[r,e.onChange]),x=a.useCallback(()=>{C(d)},[d]),M=a.useCallback(t=>{if(C(d),e.onPreviewChange){const i={value:d,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onPreviewChange.call(void 0,i)}},[d,e.onPreviewChange]),T=a.useCallback(t=>{var k;if((!t.relatedTarget||!((k=u.current)!=null&&k.contains(t.relatedTarget)))&&(!m&&r!==void 0&&f(r),!m&&e.onChange)){const V={value:r,nativeEvent:t.nativeEvent,syntheticEvent:t};e.onChange.call(void 0,V)}},[r,m,e.onChange]),I=a.useMemo(()=>new l.Navigation({root:u,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(t,i,k)=>{l.getActiveElement(document)===t?l.disableNavigatableContainer(t):l.keepFocusInContainer(k,t)},Enter:(t,i,k)=>{l.getActiveElement(document)===t&&(l.focusFirstFocusableChild(t),l.enableNavigatableContainer(t))},Escape:(t,i,k)=>{l.getActiveElement(document)!==t&&(t.focus(),l.disableNavigatableContainer(t))}}}}),[]),F=a.useCallback(I.triggerKeyboardEvent.bind(I),[]);return a.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:u,tabIndex:l.getTabIndex(e.tabIndex,e.disabled),className:l.classNames("k-flatcolorpicker k-coloreditor",{"k-disabled":e.disabled},e.className),onBlur:T,onKeyDown:F},e.header||a.createElement("div",{className:"k-coloreditor-header k-hstack"},a.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},a.createElement(g.ButtonGroup,{className:"k-button-group-flat"},a.createElement(g.Button,{type:"button","aria-label":y.toLanguageString(n.flatColorPickerColorGradientBtn,n.messages[n.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",selected:v,onClick:()=>B("ColorGradient"),icon:"droplet-slider",svgIcon:E.dropletSliderIcon}),a.createElement(g.Button,{type:"button","aria-label":y.toLanguageString(n.flatColorPickerColorPaletteBtn,n.messages[n.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",selected:!v,onClick:()=>B("ColorPalette"),icon:"palette",svgIcon:E.paletteIcon}))),a.createElement("div",{className:"k-spacer"}),a.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},R&&a.createElement(g.Button,{type:"button",fillMode:"flat",onClick:L,"aria-label":y.toLanguageString(n.flatColorPickerClearBtn,n.messages[n.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:E.dropletSlashIcon}),G&&a.createElement("div",{className:"k-coloreditor-preview k-vstack"},a.createElement("span",{className:l.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":h===void 0})},a.createElement("span",{className:"k-color-preview-mask",style:{background:r||void 0}})),a.createElement("span",{className:l.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":d===void 0}),onClick:M},a.createElement("span",{className:"k-color-preview-mask",style:{background:d||void 0}}))))),a.createElement("div",{className:"k-coloreditor-views k-vstack"},v?a.createElement(A.ColorGradient,{ref:S,role:"none",ariaLabel:void 0,value:r,onChange:N,opacity:e.opacity,format:e.format}):a.createElement(j.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:r,onChange:N})),m&&a.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},a.createElement(g.Button,{type:"button",className:"k-coloreditor-cancel",onClick:x},n.messages[n.flatColorPickerCancelBtn]),a.createElement(g.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",onClick:_},n.messages[n.flatColorPickerApplyBtn])))}),H={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};P.displayName="KendoFlatColorPicker";P.propTypes=H;exports.FlatColorPicker=P;