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

package/colors/ColorPicker.mjs

@@ -7,345 +7,362 @@
  */
 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 = {
+import { createPropsContext as Ve, validatePackage as He, usePropsContext as Ue, useAdaptiveModeContext as Ke, canUseDOM as We, Navigation as $e, getActiveElement as Ge, keepFocusInContainer as I, focusFirstFocusableChild as ue, useDir as Me, classNames as G, 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 z } 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 B, 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 = {
   opacity: !0
-}, 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,
+}, ct = {
+  palette: et,
+  tileSize: tt
+}, M = (D) => D !== void 0, st = Ve(), ge = t.forwardRef((D, ke) => {
+  var re, oe;
+  He(Je);
+  const o = Ue(st, D), b = rt(), Z = Ke(), {
+    size: u = k.size,
+    rounded: x = k.rounded,
+    fillMode: S = k.fillMode,
+    gradientSettings: C = k.gradientSettings,
+    paletteSettings: j = k.paletteSettings,
+    flatColorPickerSettings: w,
+    view: d = o.views ? void 0 : k.view,
+    views: c = d ? void 0 : k.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();
+    valid: Ce,
+    disabled: L,
+    tabIndex: Ee,
+    icon: N,
+    svgIcon: O,
+    iconClassName: T,
+    onChange: F,
+    onFocus: V,
+    onBlur: H,
+    onActiveColorClick: U,
+    className: be,
+    adaptive: we,
+    adaptiveTitle: J = b.toLanguageString(pe, B[pe])
+  } = o, s = t.useRef(null), y = t.useRef(null), P = t.useRef(null), f = t.useRef(null), E = t.useRef(), ye = t.useRef(null), [he, Q] = t.useState(!1), [Se, Te] = t.useState(o.defaultValue), [Pe, _e] = t.useState(!1), [_, Re] = t.useState(), K = M(o.value), v = M(o.open), l = K ? o.value : Se, g = v ? o.open : Pe, X = t.useRef(l), Y = t.useCallback(() => {
+    s.current && s.current.focus();
   }, []);
   t.useImperativeHandle(
-    ge,
+    ke,
     () => ({
       // we agreed that each element will have focus method exposed
-      element: l.current,
-      actionElement: be.current,
-      value: i,
-      focus: X
+      element: s.current,
+      actionElement: ye.current,
+      value: l,
+      focus: Y
     }),
-    [i, X]
+    [l, Y]
   );
-  const _e = !!(P && M && P <= M.medium && Ee);
+  const Ae = !!(_ && Z && _ <= Z.medium && we);
   t.useEffect(() => {
-    const e = Ue && window.ResizeObserver && new window.ResizeObserver(Le.bind(void 0));
+    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 d = t.useCallback(
-    (e, c) => {
-      g || (!e && !c && l && l.current && l.current.focus(), Te(e));
+  const r = t.useCallback(
+    (e, i) => {
+      v || (!e && !i && s && s.current && s.current.focus(), _e(e));
     },
-    [g]
-  ), Y = t.useMemo(() => new Ke({
-    root: l,
+    [v]
+  ), ee = t.useMemo(() => new $e({
+    root: s,
     selectors: [".k-colorpicker", ".k-color-picker-popup"],
     tabIndex: 0,
     keyboardEvents: {
       keydown: {
-        Escape: (e, c, n) => {
-          d(!1);
+        Escape: (e, i, n) => {
+          r(!1);
         },
-        Enter: (e, c, n) => {
-          !g && e === l.current && (n.preventDefault(), n.stopPropagation(), d(!0));
+        Enter: (e, i, n) => {
+          !v && e === s.current && (n.preventDefault(), n.stopPropagation(), r(!0));
         },
-        ArrowDown: (e, c, n) => {
-          n.altKey && (n.preventDefault(), n.stopPropagation(), d(!0));
+        ArrowDown: (e, i, n) => {
+          n.altKey && (n.preventDefault(), n.stopPropagation(), r(!0));
         },
-        ArrowUp: (e, c, n) => {
-          n.altKey && (n.preventDefault(), n.stopPropagation(), d(!1));
+        ArrowUp: (e, i, n) => {
+          n.altKey && (n.preventDefault(), n.stopPropagation(), r(!1));
         },
-        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);
+        Tab: (e, i, n) => {
+          var h, le, ie;
+          if (Ge(document) !== s.current) {
+            const ce = (h = P.current) == null ? void 0 : h.wrapperRef.current, A = (le = y.current) == null ? void 0 : le.wrapperRef.current, se = (ie = f.current) == null ? void 0 : ie.element;
+            d === "palette" && ce ? I(n, ce) : d === "gradient" && A ? I(n, A) : d === "combo" && A ? I(n, A.parentElement) : c && se && I(n, se);
           }
         }
       }
     }
-  }), [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(
+  }), [r, v]), Ie = t.useCallback(ee.triggerKeyboardEvent.bind(ee), []), ze = t.useCallback(() => {
+    v || (y.current && y.current.wrapperRef.current ? ue(y.current.wrapperRef.current) : P.current ? P.current.focus() : f.current && f.current.element && ue(f.current.element));
+  }, [v]), R = (e) => X.current = e, te = t.useCallback(
+    (e) => {
+      const i = {
+        value: X.current,
+        nativeEvent: e.nativeEvent,
+        syntheticEvent: e
+      };
+      p(i), r(!g, !0);
+    },
+    [g]
+  ), W = t.useCallback(() => {
+    r(!1, !0);
+  }, [r]), Be = t.useCallback(
     (e) => {
-      H && H.call(void 0, {
+      U && U.call(void 0, {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
-        value: i,
+        value: l,
         target: {
-          element: l.current,
-          value: i
+          element: s.current,
+          value: l
         }
       });
     },
-    [H, i]
-  ), ze = t.useCallback(
+    [U, l]
+  ), De = t.useCallback(
     (e) => {
-      k.current ? (clearTimeout(k.current), k.current = void 0) : Q(!0), O && O.call(void 0, {
+      E.current ? (clearTimeout(E.current), E.current = void 0) : Q(!0), V && V.call(void 0, {
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       });
     },
-    [O]
-  ), Be = t.useCallback(() => {
-    d(!1, !0), Q(!1), k.current = void 0;
-  }, []), De = t.useCallback(
+    [V]
+  ), xe = t.useCallback(() => {
+    r(!1, !0), Q(!1), E.current = void 0;
+  }, []), Le = t.useCallback(
     (e) => {
-      clearTimeout(k.current), k.current = window.setTimeout(Be), F && F.call(void 0, {
+      clearTimeout(E.current), E.current = window.setTimeout(xe), H && H.call(void 0, {
         nativeEvent: e.nativeEvent,
         syntheticEvent: e
       });
     },
-    [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, {
+    [H]
+  ), p = t.useCallback(
+    (e, i) => {
+      var h;
+      const n = i ? e.rgbaValue || "" : (h = e.value) != null ? h : "";
+      K || Te(n), F && F.call(void 0, {
         value: n,
         nativeEvent: e.nativeEvent,
         syntheticEvent: e.syntheticEvent,
         target: {
-          element: l.current,
+          element: s.current,
           value: n
         }
-      });
+      }), r(!1);
     },
-    [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,
+    [K, F]
+  ), ne = t.useCallback(
+    (e) => p(e, !0),
+    [M, p]
+  ), $ = t.useCallback(
+    (e) => /* @__PURE__ */ t.createElement(t.Fragment, null, (d === "combo" || d === "gradient") && /* @__PURE__ */ t.createElement(
+      Xe,
       {
-        ...Z,
+        ...C,
         _adaptive: e,
-        ref: w,
+        ref: y,
         isInsidePopup: !0,
-        size: e ? "large" : s,
+        size: e ? "large" : u,
         fillMode: S,
-        value: i,
-        onChange: f
+        value: l,
+        onChange: p
       }
-    ), (u === "combo" || u === "palette") && /* @__PURE__ */ t.createElement(
-      Qe,
+    ), (d === "combo" || d === "palette") && /* @__PURE__ */ t.createElement(
+      Ye,
       {
         ...j,
-        ref: T,
-        size: e ? "large" : s,
-        value: i,
-        onChange: ee
+        ref: P,
+        size: e ? "large" : u,
+        value: l,
+        onChange: ne
       }
-    ), o && o[0] === "gradient" && o[1] === "palette" && /* @__PURE__ */ t.createElement(
-      A,
+    ), c && c[0] === "gradient" && c[1] === "palette" && /* @__PURE__ */ t.createElement(
+      z,
       {
-        ...b,
-        _gradientSettings: { _adaptive: e },
-        ref: p,
-        size: e ? "large" : s,
+        ...w,
+        _gradientSettings: { _adaptive: e, ...C },
+        ref: f,
+        size: e ? "large" : u,
         views: ["gradient", "palette"],
         activeView: q,
+        setOpen: r,
         showButtons: !e,
-        value: i,
-        onChange: f
+        value: l,
+        onChange: p,
+        setAdaptiveModeValue: R
       }
-    ), o && o[0] === "palette" && o[1] === "gradient" && /* @__PURE__ */ t.createElement(
-      A,
+    ), c && c[0] === "palette" && c[1] === "gradient" && /* @__PURE__ */ t.createElement(
+      z,
       {
-        ...b,
-        _gradientSettings: { _adaptive: e },
-        ref: p,
-        size: e ? "large" : s,
+        ...w,
+        _gradientSettings: { _adaptive: e, ...C },
+        ref: f,
+        size: e ? "large" : u,
         views: ["palette", "gradient"],
+        setOpen: r,
         showButtons: !e,
-        value: i,
-        onChange: f
+        value: l,
+        onChange: p,
+        setAdaptiveModeValue: R
       }
-    ), o && o.includes("gradient") && !o.includes("palette") && /* @__PURE__ */ t.createElement(
-      A,
+    ), c && c.includes("gradient") && !c.includes("palette") && /* @__PURE__ */ t.createElement(
+      z,
       {
-        ...b,
-        _gradientSettings: { _adaptive: e },
-        ref: p,
-        size: e ? "large" : s,
+        ...w,
+        _gradientSettings: { _adaptive: e, ...C },
+        ref: f,
+        size: e ? "large" : u,
         views: ["gradient"],
         showButtons: !e,
-        value: i,
-        onChange: f
+        setOpen: r,
+        value: l,
+        onChange: p,
+        setAdaptiveModeValue: R
       }
-    ), o && o.includes("palette") && !o.includes("gradient") && /* @__PURE__ */ t.createElement(
-      A,
+    ), c && c.includes("palette") && !c.includes("gradient") && /* @__PURE__ */ t.createElement(
+      z,
       {
-        ...b,
-        _gradientSettings: { _adaptive: e },
-        ref: p,
-        size: e ? "large" : s,
+        ...w,
+        _gradientSettings: { _adaptive: e, ...C },
+        ref: f,
+        size: e ? "large" : u,
         views: ["palette"],
         showButtons: !e,
-        value: i,
-        onChange: f
+        setOpen: r,
+        value: l,
+        onChange: p,
+        setAdaptiveModeValue: R
       }
     )),
     [
       q,
       S,
-      b,
-      Z,
-      f,
-      ee,
+      w,
+      C,
+      p,
+      ne,
       j,
-      s,
-      i,
+      r,
       u,
-      o
+      l,
+      d,
+      c
     ]
-  ), xe = t.useCallback(() => {
-    var c;
+  ), Ne = t.useCallback(() => {
+    var i;
     const e = {
-      animation: !!((c = m == null ? void 0 : m.animate) == null || c),
+      animation: !!((i = m == null ? void 0 : m.animate) == null || i),
       title: J,
-      expand: C,
-      onClose: K,
-      windowWidth: P,
+      expand: g,
+      onClose: W,
+      windowWidth: _,
       footer: {
-        cancelText: E.toLanguageString(de, I[de]),
-        onCancel: K,
-        applyText: E.toLanguageString(pe, I[pe]),
-        onApply: U
+        cancelText: b.toLanguageString(fe, B[fe]),
+        onCancel: W,
+        applyText: b.toLanguageString(me, B[me]),
+        onApply: te
       }
     };
-    return /* @__PURE__ */ t.createElement(at, { ...e }, /* @__PURE__ */ t.createElement(rt, { overflowHidden: !0 }, W(!0)));
+    return /* @__PURE__ */ t.createElement(ot, { ...e }, /* @__PURE__ */ t.createElement(lt, { overflowHidden: !0 }, $(!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;
+    g,
+    W,
+    _,
+    b,
+    te,
+    $
+  ]), Oe = t.useCallback((e) => {
+    for (const i of e)
+      Re(i.target.clientWidth);
+  }, []), ae = Me(s, o.dir), Fe = Ce !== !1;
   return /* @__PURE__ */ t.createElement(
     "span",
     {
-      id: r.id,
+      id: o.id,
       role: "combobox",
-      "aria-label": r.ariaLabel,
-      "aria-labelledby": r.ariaLabelledBy,
-      "aria-describedby": r.ariaDescribedBy,
+      "aria-label": o.ariaLabel,
+      "aria-labelledby": o.ariaLabelledBy,
+      "aria-describedby": o.ariaDescribedBy,
       "aria-haspopup": "dialog",
-      "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,
+      "aria-expanded": g,
+      "aria-controls": `k-colorpicker-popup-${(re = o.id) != null ? re : 0}`,
+      "aria-disabled": L ? "true" : void 0,
+      className: G("k-colorpicker", "k-picker", "k-icon-picker", {
+        [`k-picker-${de.sizeMap[u] || u}`]: u,
         [`k-picker-${S}`]: S,
-        [`k-rounded-${se.roundedMap[B] || B}`]: B,
-        "k-invalid": !Ne,
-        "k-disabled": D,
-        "k-focus": we,
-        className: Ce
+        [`k-rounded-${de.roundedMap[x] || x}`]: x,
+        "k-invalid": !Fe,
+        "k-disabled": L,
+        "k-focus": he,
+        className: be
       }),
-      ref: l,
-      tabIndex: Ge(ke, D),
-      title: r.title,
-      onKeyDown: Re,
-      onFocus: ze,
-      onBlur: De,
-      dir: te
+      ref: s,
+      tabIndex: Ze(Ee, L),
+      title: o.title,
+      onKeyDown: Ie,
+      onFocus: De,
+      onBlur: Le,
+      dir: ae
     },
     /* @__PURE__ */ t.createElement(
-      qe,
+      Qe,
       {
-        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(
+        dir: ae,
+        open: g,
+        onOpen: ze,
+        popupAnchor: s.current || void 0,
+        popupSettings: { id: `k-colorpicker-popup-${(oe = o.id) != null ? oe : 0}`, ...m },
+        input: /* @__PURE__ */ t.createElement("span", { onClick: Be, className: "k-input-inner" }, /* @__PURE__ */ t.createElement(
           "span",
           {
-            className: $("k-value-icon", "k-color-preview", {
-              "k-no-color": !i,
-              "k-icon-color-preview": x || L || h
+            className: G("k-value-icon", "k-color-preview", {
+              "k-no-color": !l,
+              "k-icon-color-preview": N || O || T
             })
           },
-          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 } })
+          T && /* @__PURE__ */ t.createElement("span", { className: G("k-color-preview-icon", T) }),
+          !T && (N || O) && /* @__PURE__ */ t.createElement(je, { name: N, icon: O }),
+          /* @__PURE__ */ t.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: l } })
         )),
         button: /* @__PURE__ */ t.createElement(
-          et,
+          nt,
           {
             tabIndex: -1,
             type: "button",
-            onClick: U,
+            onClick: () => r(!g),
             className: "k-input-button",
             rounded: null,
             icon: "caret-alt-down",
-            svgIcon: tt,
-            "aria-label": E.toLanguageString(
-              fe,
-              I[fe]
+            svgIcon: at,
+            "aria-label": b.toLanguageString(
+              ve,
+              B[ve]
             )
           }
         ),
-        content: W(!1),
-        _mobileMode: _e,
-        _actionSheet: xe()
+        content: $(!1),
+        _mobileMode: Ae,
+        _actionSheet: Ne()
       }
     )
   );
 });
-me.propTypes = {
+ge.propTypes = {
   value: a.string,
   defaultValue: a.string,
   disabled: a.bool,
@@ -354,7 +371,7 @@ me.propTypes = {
   dir: a.string,
   id: a.string,
   icon: a.string,
-  svgIcon: Ze,
+  svgIcon: qe,
   ariaLabelledBy: a.string,
   ariaDescribedBy: a.string,
   size: a.oneOf([null, "small", "medium", "large"]),
@@ -364,17 +381,17 @@ me.propTypes = {
   adaptive: a.bool,
   adaptiveTitle: a.string
 };
-const v = {
+const k = {
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   view: "palette",
   views: ["gradient", "palette"],
-  gradientSettings: ot,
-  paletteSettings: lt
+  gradientSettings: it,
+  paletteSettings: ct
 };
-me.displayName = "KendoColorPicker";
+ge.displayName = "KendoColorPicker";
 export {
-  me as ColorPicker,
-  it as ColorPickerPropsContext
+  ge as ColorPicker,
+  st as ColorPickerPropsContext
 };