@progress/kendo-react-inputs 9.0.0-develop.2 → 9.0.0-develop.4

package/colors/FlatColorPicker.mjs

@@ -18,22 +18,25 @@ import { useLocalization as ae } from "@progress/kendo-react-intl";
 import { flatColorPickerColorGradientBtn as I, messages as m, flatColorPickerColorPaletteBtn as G, flatColorPickerClearBtn as L, flatColorPickerCancelBtn as te, flatColorPickerApplyBtn as oe } from "../messages/index.mjs";
 const S = e.forwardRef((a, x) => {
   q(ee);
-  const v = e.useRef(null), C = e.useRef(null), R = e.useRef(null), { defaultValue: r, showButtons: k = !0, showPreview: V = !0, showClearButton: F = !0 } = a, [c, T] = e.useState((a.view || "ColorGradient") === "ColorGradient"), [l, s] = e.useState(a.value || r || void 0), [i, b] = e.useState(a.value || r || void 0), f = a.value !== void 0 ? a.value : void 0;
+  const v = e.useRef(null), C = e.useRef(null), R = e.useRef(null), { defaultValue: r, showButtons: k = !0, showPreview: V = !0, showClearButton: F = !0 } = a, [c, T] = e.useState(
+    (a.view || "ColorGradient") === "ColorGradient"
+  ), [l, s] = e.useState(a.value || r || void 0), [i, b] = e.useState(a.value || r || void 0), f = a.value !== void 0 ? a.value : void 0;
   e.useEffect(() => {
     s(a.value);
   }, [a.value]);
-  const g = ae(), y = e.useCallback(
-    () => {
-      v.current && v.current.focus();
-    },
-    [v]
-  );
-  e.useImperativeHandle(v, () => ({
-    element: C.current,
-    focus: y,
-    props: a,
-    value: f
-  }), [f, y, a]), e.useImperativeHandle(x, () => v.current);
+  const g = ae(), y = e.useCallback(() => {
+    v.current && v.current.focus();
+  }, [v]);
+  e.useImperativeHandle(
+    v,
+    () => ({
+      element: C.current,
+      focus: y,
+      props: a,
+      value: f
+    }),
+    [f, y, a]
+  ), e.useImperativeHandle(x, () => v.current);
   const w = e.useCallback(
     (t) => {
       (t === "ColorGradient" && !c || t === "ColorPalette" && c) && T(!c);
@@ -75,12 +78,9 @@ const S = e.forwardRef((a, x) => {
       }
     },
     [l, a.onChange]
-  ), K = e.useCallback(
-    () => {
-      s(i);
-    },
-    [i]
-  ), z = e.useCallback(
+  ), K = e.useCallback(() => {
+    s(i);
+  }, [i]), z = e.useCallback(
     (t) => {
       if (s(i), a.onPreviewChange) {
         const n = {
@@ -190,7 +190,36 @@ const S = e.forwardRef((a, x) => {
         icon: "droplet-slash",
         svgIcon: Z
       }
-    ), V && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement("span", { className: E("k-coloreditor-preview-color", "k-color-preview", { "k-no-color": f === void 0 }) }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: l || void 0 } })), /* @__PURE__ */ e.createElement("span", { className: E("k-coloreditor-current-color", "k-color-preview", { "k-no-color": i === void 0 }), onClick: z }, /* @__PURE__ */ e.createElement("span", { className: "k-color-preview-mask", style: { background: i || void 0 } }))))),
+    ), V && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        className: E("k-coloreditor-preview-color", "k-color-preview", {
+          "k-no-color": f === void 0
+        })
+      },
+      /* @__PURE__ */ e.createElement(
+        "span",
+        {
+          className: "k-color-preview-mask",
+          style: { background: l || void 0 }
+        }
+      )
+    ), /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        className: E("k-coloreditor-current-color", "k-color-preview", {
+          "k-no-color": i === void 0
+        }),
+        onClick: z
+      },
+      /* @__PURE__ */ e.createElement(
+        "span",
+        {
+          className: "k-color-preview-mask",
+          style: { background: i || void 0 }
+        }
+      )
+    )))),
     /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, c ? /* @__PURE__ */ e.createElement(
       p,
       {
@@ -202,8 +231,25 @@ const S = e.forwardRef((a, x) => {
         opacity: a.opacity,
         format: a.format
       }
-    ) : /* @__PURE__ */ e.createElement($, { ariaDisabled: !0, ariaLabelledBy: "required_label", value: l, onChange: P })),
-    k && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: K }, m[te]), /* @__PURE__ */ e.createElement(u, { type: "button", themeColor: "primary", className: "k-coloreditor-apply", onClick: M }, m[oe]))
+    ) : /* @__PURE__ */ e.createElement(
+      $,
+      {
+        ariaDisabled: !0,
+        ariaLabelledBy: "required_label",
+        value: l,
+        onChange: P
+      }
+    )),
+    k && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ e.createElement(u, { type: "button", className: "k-coloreditor-cancel", onClick: K }, m[te]), /* @__PURE__ */ e.createElement(
+      u,
+      {
+        type: "button",
+        themeColor: "primary",
+        className: "k-coloreditor-apply",
+        onClick: M
+      },
+      m[oe]
+    ))
   );
 }), le = {
   id: o.string,