@progress/kendo-react-inputs 15.1.1-develop.2 → 15.2.0-develop.1

package/colors/FlatColorPicker.mjs

@@ -7,57 +7,57 @@
  */
 import * as a from "react";
 import l from "prop-types";
-import { validatePackage as ie, getLicenseMessage as re, Navigation as ce, getActiveElement as B, disableNavigatableContainer as K, focusFirstFocusableChild as se, enableNavigatableContainer as de, keepFocusInContainer as ve, classNames as M, kendoThemeMaps as ue, getTabIndex as ge, WatermarkOverlay as me } from "@progress/kendo-react-common";
-import { ButtonGroup as _, Button as u } from "@progress/kendo-react-buttons";
-import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as ke } from "@progress/kendo-svg-icons";
-import { ColorPalette as Ce } from "./ColorPalette.mjs";
-import { ColorGradient as fe } from "./ColorGradient.mjs";
+import { validatePackage as oe, getLicenseMessage as ie, Navigation as re, getActiveElement as L, disableNavigatableContainer as K, focusFirstFocusableChild as ce, enableNavigatableContainer as se, keepFocusInContainer as de, classNames as M, kendoThemeMaps as ve, getTabIndex as ue, WatermarkOverlay as ge } from "@progress/kendo-react-common";
+import { ButtonGroup as _, Button as v } from "@progress/kendo-react-buttons";
+import { dropletSliderIcon as V, paletteIcon as G, dropletSlashIcon as me } from "@progress/kendo-svg-icons";
+import { ColorPalette as ke } from "./ColorPalette.mjs";
+import { ColorGradient as Ce } from "./ColorGradient.mjs";
 import { packageMetadata as O } from "../package-metadata.mjs";
-import { useLocalization as be } from "@progress/kendo-react-intl";
-import { flatColorPickerAriaLabel as T, messages as v, flatColorPickerColorGradientBtn as k, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as D, flatColorPickerApplyBtn as H, flatColorPickerCancelBtn as W } from "../messages/index.mjs";
-const $ = a.forwardRef((e, j) => {
-  const q = !ie(O, { component: "FlatColorPicker" }), J = re(O), f = a.useRef(null), y = a.useRef(null), Q = a.useRef(null), {
+import { useLocalization as fe } from "@progress/kendo-react-intl";
+import { flatColorPickerColorGradientBtn as k, messages as u, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as T, flatColorPickerApplyBtn as D, flatColorPickerCancelBtn as H } from "../messages/index.mjs";
+const W = a.forwardRef((e, $) => {
+  const j = !oe(O, { component: "FlatColorPicker" }), q = ie(O), f = a.useRef(null), y = a.useRef(null), J = a.useRef(null), {
     defaultValue: b,
     showButtons: w = !0,
-    showPreview: U = !0,
-    showClearButton: X = !0,
+    showPreview: Q = !0,
+    showClearButton: U = !0,
     view: h = e.views ? void 0 : "ColorGradient",
     views: r = h ? void 0 : ["gradient", "palette"],
-    activeView: P = "gradient",
+    activeView: N = "gradient",
     size: o = void 0,
-    rounded: Y = void 0
-  } = e, [g, Z] = a.useState(
+    rounded: X = void 0
+  } = e, [g, Y] = a.useState(
     (h || "ColorGradient") === "ColorGradient"
   ), [s, x] = a.useState(
-    (r != null ? r : [])[0] === "gradient" && P === "gradient"
-  ), [i, E] = a.useState(e.value || b || void 0), [m, I] = a.useState(e.value || b || void 0), L = e.value !== void 0 ? e.value : void 0;
+    (r != null ? r : [])[0] === "gradient" && N === "gradient"
+  ), [i, E] = a.useState(e.value || b || void 0), [m, I] = a.useState(e.value || b || void 0), B = e.value !== void 0 ? e.value : void 0;
   a.useEffect(() => {
     E(e.value);
   }, [e.value]);
-  const d = be(), A = a.useCallback(() => {
+  const d = fe(), R = a.useCallback(() => {
     f.current && f.current.focus();
   }, [f]);
   a.useImperativeHandle(
     f,
     () => ({
       element: y.current,
-      focus: A,
+      focus: R,
       props: e,
-      value: L
+      value: B
     }),
-    [L, A, e]
-  ), a.useImperativeHandle(j, () => f.current);
-  const R = a.useCallback(
+    [B, R, e]
+  ), a.useImperativeHandle($, () => f.current);
+  const A = a.useCallback(
     (t) => {
-      (t === "ColorGradient" && !g || t === "ColorPalette" && g) && Z(!g);
+      (t === "ColorGradient" && !g || t === "ColorPalette" && g) && Y(!g);
     },
     [g]
-  ), N = a.useCallback(
+  ), P = a.useCallback(
     (t) => {
-      t === "gradient" && !s || t === "palette" && s || t === "palette" && P === "gradient" ? x(!s) : t === "gradient" && P === "palette" && x(!0);
+      t === "gradient" && !s || t === "palette" && s || t === "palette" && N === "gradient" ? x(!s) : t === "gradient" && N === "palette" && x(!0);
     },
-    [P, s]
-  ), p = a.useCallback(
+    [N, s]
+  ), Z = a.useCallback(
     (t) => {
       var c;
       const n = b || void 0;
@@ -85,7 +85,7 @@ const $ = a.forwardRef((e, j) => {
       (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
     },
     [e.onPreviewChange]
-  ), ee = a.useCallback(
+  ), p = a.useCallback(
     (t) => {
       if (i !== void 0 && I(i), e.onChange) {
         const n = {
@@ -97,9 +97,9 @@ const $ = a.forwardRef((e, j) => {
       }
     },
     [i, e.onChange]
-  ), ae = a.useCallback(() => {
+  ), ee = a.useCallback(() => {
     E(m), e.setOpen && e.setOpen(!1);
-  }, [m]), te = a.useCallback(
+  }, [m]), ae = a.useCallback(
     (t) => {
       if (E(m), e.onPreviewChange) {
         const n = {
@@ -111,167 +111,167 @@ const $ = a.forwardRef((e, j) => {
       }
     },
     [m, e.onPreviewChange]
-  ), le = a.useCallback(
+  ), te = a.useCallback(
     (t) => {
       var c, S;
       if ((!t.relatedTarget || !((c = y.current) != null && c.contains(t.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
-        const oe = {
+        const ne = {
           value: i,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        e.onChange.call(void 0, oe);
+        e.onChange.call(void 0, ne);
       }
     },
     [i, w, e.onChange]
   ), z = a.useMemo(
-    () => new ce({
+    () => new re({
       root: y,
       selectors: [".k-coloreditor"],
       tabIndex: 0,
       keyboardEvents: {
         keydown: {
           Tab: (t, n, c) => {
-            B(document) === t ? K(t) : ve(c, t);
+            L(document) === t ? K(t) : de(c, t);
           },
           Enter: (t, n, c) => {
-            B(document) === t && (se(t), de(t));
+            L(document) === t && (ce(t), se(t));
           },
           Escape: (t, n, c) => {
-            B(document) !== t && (t.focus(), K(t));
+            L(document) !== t && (t.focus(), K(t));
           }
         }
       }
     }),
     []
-  ), ne = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
+  ), le = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
   return /* @__PURE__ */ a.createElement(
     "div",
     {
       id: e.id,
       role: "textbox",
-      "aria-label": e.ariaLabel || d.toLanguageString(T, v[T]),
+      "aria-label": e.ariaLabel,
       "aria-labelledby": e.ariaLabelledBy,
       "aria-disabled": e.disabled ? "true" : void 0,
       style: { position: "relative", ...e.style },
       ref: y,
-      tabIndex: ge(e.tabIndex, e.disabled),
+      tabIndex: ue(e.tabIndex, e.disabled),
       className: M(
         "k-flatcolorpicker k-coloreditor",
         {
-          [`k-coloreditor-${ue.sizeMap[o] || o}`]: o,
+          [`k-coloreditor-${ve.sizeMap[o] || o}`]: o,
           "k-disabled": e.disabled
         },
         e.className
       ),
-      onBlur: le,
-      onKeyDown: ne
+      onBlur: te,
+      onKeyDown: le
     },
     e.header || /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ a.createElement(_, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
-      u,
+      v,
       {
         type: "button",
         "aria-label": d.toLanguageString(
           k,
-          v[k]
+          u[k]
         ),
         size: o,
         fillMode: "flat",
         svgIcon: V,
         className: s ? "k-selected" : void 0,
-        onClick: () => N("gradient")
+        onClick: () => P("gradient")
       }
     ), /* @__PURE__ */ a.createElement(
-      u,
+      v,
       {
         type: "button",
         "aria-label": d.toLanguageString(
           C,
-          v[C]
+          u[C]
         ),
         size: o,
         fillMode: "flat",
         svgIcon: G,
         className: s ? void 0 : "k-selected",
-        onClick: () => N("palette")
+        onClick: () => P("palette")
       }
     )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(_, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
-      u,
+      v,
       {
         type: "button",
         "aria-label": d.toLanguageString(
           C,
-          v[C]
+          u[C]
         ),
         fillMode: "flat",
         size: o,
         svgIcon: G,
         className: s ? void 0 : "k-selected",
-        onClick: () => N("palette")
+        onClick: () => P("palette")
       }
     ), /* @__PURE__ */ a.createElement(
-      u,
+      v,
       {
         type: "button",
         "aria-label": d.toLanguageString(
           k,
-          v[k]
+          u[k]
         ),
         fillMode: "flat",
         size: o,
         svgIcon: V,
         className: s ? "k-selected" : void 0,
-        onClick: () => N("gradient")
+        onClick: () => P("gradient")
       }
     )), h && /* @__PURE__ */ a.createElement(_, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
-      u,
+      v,
       {
         type: "button",
         "aria-label": d.toLanguageString(
           k,
-          v[k]
+          u[k]
         ),
         fillMode: "flat",
         size: o,
         className: g ? "k-selected" : void 0,
-        onClick: () => R("ColorGradient"),
+        onClick: () => A("ColorGradient"),
         icon: "droplet-slider",
         svgIcon: V
       }
     ), /* @__PURE__ */ a.createElement(
-      u,
+      v,
       {
         type: "button",
         "aria-label": d.toLanguageString(
           C,
-          v[C]
+          u[C]
         ),
         fillMode: "flat",
         size: o,
         className: g ? void 0 : "k-selected",
-        onClick: () => R("ColorPalette"),
+        onClick: () => A("ColorPalette"),
         icon: "palette",
         svgIcon: G
       }
-    ))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, X && /* @__PURE__ */ a.createElement(
-      u,
+    ))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, U && /* @__PURE__ */ a.createElement(
+      v,
       {
         type: "button",
         fillMode: "flat",
         size: o,
-        onClick: p,
+        onClick: Z,
         "aria-label": d.toLanguageString(
-          D,
-          v[D]
+          T,
+          u[T]
         ),
         icon: "droplet-slash",
-        svgIcon: ke
+        svgIcon: me
       }
-    ), U && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
+    ), Q && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
       "span",
       {
         className: M("k-coloreditor-preview-color", "k-color-preview", {
-          "k-no-color": L === void 0
+          "k-no-color": B === void 0
         })
       },
       /* @__PURE__ */ a.createElement(
@@ -287,7 +287,7 @@ const $ = a.forwardRef((e, j) => {
         className: M("k-coloreditor-current-color", "k-color-preview", {
           "k-no-color": m === void 0
         }),
-        onClick: te
+        onClick: ae
       },
       /* @__PURE__ */ a.createElement(
         "span",
@@ -296,11 +296,11 @@ const $ = a.forwardRef((e, j) => {
           style: { background: m || void 0 }
         }
       )
-    ))), q && /* @__PURE__ */ a.createElement(me, { message: J })),
+    ))), j && /* @__PURE__ */ a.createElement(ge, { message: q })),
     /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && g || r && s) && /* @__PURE__ */ a.createElement(
-      fe,
+      Ce,
       {
-        ref: Q,
+        ref: J,
         role: "none",
         ariaLabel: void 0,
         value: i,
@@ -308,12 +308,12 @@ const $ = a.forwardRef((e, j) => {
         opacity: e.opacity,
         format: e.format,
         size: o,
-        rounded: Y,
+        rounded: X,
         _adaptive: e._gradientSettings ? e._gradientSettings._adaptive : void 0,
         ...e._gradientSettings
       }
     ), (h && !g || r && !s) && /* @__PURE__ */ a.createElement(
-      Ce,
+      ke,
       {
         value: i,
         onChange: F,
@@ -322,23 +322,23 @@ const $ = a.forwardRef((e, j) => {
       }
     )),
     w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ a.createElement(
-      u,
+      v,
       {
         type: "button",
         themeColor: "primary",
         className: "k-coloreditor-apply",
-        onClick: ee
+        onClick: p
       },
       d.toLanguageString(
-        H,
-        v[H]
+        D,
+        u[D]
       )
-    ), /* @__PURE__ */ a.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: ae }, d.toLanguageString(
-      W,
-      v[W]
+    ), /* @__PURE__ */ a.createElement(v, { type: "button", className: "k-coloreditor-cancel", onClick: ee }, d.toLanguageString(
+      H,
+      u[H]
     )))
   );
-}), he = {
+}), be = {
   id: l.string,
   style: l.any,
   className: l.string,
@@ -360,8 +360,8 @@ const $ = a.forwardRef((e, j) => {
   views: l.array,
   size: l.oneOf(["small", "medium", "large"])
 };
-$.displayName = "KendoFlatColorPicker";
-$.propTypes = he;
+W.displayName = "KendoFlatColorPicker";
+W.propTypes = be;
 export {
-  $ as FlatColorPicker
+  W as FlatColorPicker
 };