@progress/kendo-react-inputs 14.5.0-develop.9 → 15.0.0-develop.1

package/colors/ColorPicker.mjs

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