@progress/kendo-react-inputs 9.4.0-develop.2 → 9.4.0-develop.20

package/colors/ColorPicker.mjs

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