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

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,

package/colors/HexInput.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";const u=require("react"),i=require("./utils/color-parser.js"),o=require("./utils/misc.js"),c=require("../input/Input.js");function h(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=h(u);class l extends a.Component{constructor(e){super(e),this.onChange=t=>{const s=t.target.value,n=i.parseColor(s,"rgba");this.setState({hex:s}),o.isPresent(n)&&this.props.onHexChange(s,n,t)},this.onBlur=()=>{o.isPresent(i.parseColor(this.state.hex,"rgba"))||this.setState({hex:this.state.originalHex})},this.state={hex:this.props.hex,originalHex:this.props.hex}}render(){return a.createElement(c.Input,{value:this.state.hex,onChange:this.onChange,onBlur:this.onBlur,disabled:this.props.disabled})}static getDerivedStateFromProps(e,t){return e.hex!==t.originalHex?{hex:e.hex,originalHex:e.hex}:null}}module.exports=l;
+"use client";"use strict";const c=require("react"),o=require("./utils/color-parser.js"),i=require("./utils/misc.js"),l=require("../textbox/Textbox.js");function h(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=h(c);class u extends a.Component{constructor(e){super(e),this.onChange=t=>{const s=t.target.value,n=o.parseColor(s,"rgba");this.setState({hex:s}),i.isPresent(n)&&this.props.onHexChange(s,n,t)},this.onBlur=()=>{i.isPresent(o.parseColor(this.state.hex,"rgba"))||this.setState({hex:this.state.originalHex})},this.state={hex:this.props.hex,originalHex:this.props.hex}}render(){return a.createElement(l.TextBox,{value:this.state.hex,onChange:this.onChange,onBlur:this.onBlur,disabled:this.props.disabled,className:"k-hex-value"})}static getDerivedStateFromProps(e,t){return e.hex!==t.originalHex?{hex:e.hex,originalHex:e.hex}:null}}module.exports=u;

package/colors/HexInput.mjs

@@ -7,26 +7,27 @@
  */
 "use client";
 import * as i from "react";
-import { parseColor as o } from "./utils/color-parser.mjs";
-import { isPresent as a } from "./utils/misc.mjs";
-import { Input as n } from "../input/Input.mjs";
+import { parseColor as a } from "./utils/color-parser.mjs";
+import { isPresent as o } from "./utils/misc.mjs";
+import { TextBox as h } from "../textbox/Textbox.mjs";
 class p extends i.Component {
   constructor(e) {
     super(e), this.onChange = (t) => {
-      const r = t.target.value, s = o(r, "rgba");
-      this.setState({ hex: r }), a(s) && this.props.onHexChange(r, s, t);
+      const s = t.target.value, r = a(s, "rgba");
+      this.setState({ hex: s }), o(r) && this.props.onHexChange(s, r, t);
     }, this.onBlur = () => {
-      a(o(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
+      o(a(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
     }, this.state = { hex: this.props.hex, originalHex: this.props.hex };
   }
   render() {
     return /* @__PURE__ */ i.createElement(
-      n,
+      h,
       {
         value: this.state.hex,
         onChange: this.onChange,
         onBlur: this.onBlur,
-        disabled: this.props.disabled
+        disabled: this.props.disabled,
+        className: "k-hex-value"
       }
     );
   }