cloudmr-ux 4.8.6 → 4.8.7

package/dist/CmrComponents/tk-dualrange/TKDualRange.js

@@ -10,12 +10,71 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import "./tk-dual-range.css";
 var clamp = function (v, lo, hi) { return Math.max(lo, Math.min(hi, v)); };
+// Display REAL-space values; use scientific notation for small non-zero values
+// so they don't display as "0.000". Use type="text" because type="number" can
+// show "0" for very small values instead of scientific notation.
+function fmt(v, precision) {
+    if (!Number.isFinite(v))
+        return "";
+    return v !== 0 && Math.abs(v) < 0.01
+        ? Number(v).toExponential(precision)
+        : v.toFixed(precision);
+}
+function parse(s) {
+    var n = Number(s);
+    return Number.isFinite(n) ? n : NaN;
+}
+/**
+ * A text input that holds a local string draft while the user is typing,
+ * committing only on blur or Enter. This lets the user type multi-digit and
+ * decimal values without mid-entry validation snapping the field.
+ * Shows a small red "Out of range" message when the committed value falls
+ * outside [lo, hi].
+ */
+function DeferredInput(_a) {
+    var committed = _a.committed, onCommit = _a.onCommit, lo = _a.lo, hi = _a.hi, className = _a.className;
+    var _b = useState(committed), draft = _b[0], setDraft = _b[1];
+    var _c = useState(false), focused = _c[0], setFocused = _c[1];
+    var _d = useState(null), error = _d[0], setError = _d[1];
+    // Sync external changes into the field only when the user is not typing.
+    useEffect(function () {
+        if (!focused)
+            setDraft(committed);
+    }, [committed, focused]);
+    var commit = function (value) {
+        var n = Number(value);
+        if (!Number.isFinite(n)) {
+            setError("\"".concat(value, "\" is not a valid number"));
+        }
+        else if (n < lo || n > hi) {
+            setError("".concat(value.trim(), " is out of range"));
+        }
+        else {
+            setError(null);
+        }
+        onCommit(value);
+        // After commit the parent re-formats, so sync back to avoid a stale draft.
+        setDraft(committed);
+    };
+    return (_jsxs("div", __assign({ className: "tkdr__input-wrap" }, { children: [_jsx("input", { className: "".concat(className !== null && className !== void 0 ? className : "").concat(error ? " tkdr__num--error" : ""), type: "text", inputMode: "decimal", value: draft, onChange: function (e) { return setDraft(e.target.value); }, onFocus: function () {
+                    setFocused(true);
+                    setError(null);
+                }, onBlur: function (e) {
+                    setFocused(false);
+                    commit(e.target.value);
+                }, onKeyDown: function (e) {
+                    if (e.key === "Enter") {
+                        e.target.blur();
+                    }
+                } }), error && _jsx("span", __assign({ className: "tkdr__error" }, { children: error }))] })));
+}
 export default function TKDualRange(_a) {
     var _b;
     var _c = _a.name, name = _c === void 0 ? "Values" : _c, minDomain = _a.minDomain, maxDomain = _a.maxDomain, valueLow = _a.valueLow, valueHigh = _a.valueHigh, onChangeLow = _a.onChangeLow, onChangeHigh = _a.onChangeHigh, _d = _a.transform, transform = _d === void 0 ? function (x) { return x; } : _d, _e = _a.inverse, inverse = _e === void 0 ? function (y) { return y; } : _e, step = _a.step, _f = _a.precision, precision = _f === void 0 ? 3 : _f, _g = _a.accentColor, accentColor = _g === void 0 ? "#580f8b" : _g;
-    // Map domain & current values into RENDER space (like TestKarts)
+    // Map domain & current values into RENDER space
     var tMin = transform(minDomain);
     var tMax = transform(maxDomain);
     var tLow = transform(valueLow);
@@ -23,7 +82,7 @@ export default function TKDualRange(_a) {
     var span = Math.max(1e-12, tMax - tMin);
     var pct = function (t) { return ((t - tMin) / span) * 100; };
     var s = step !== null && step !== void 0 ? step : Math.max(span * 0.001, Number.EPSILON);
-    // Keep ends from crossing; clamp in REAL space against the other end
+    // Keep ends from crossing; clamp in REAL space against the other end.
     var handleLowRender = function (nextRender) {
         var nextReal = clamp(inverse(nextRender), minDomain, valueHigh);
         onChangeLow(nextReal);
@@ -32,37 +91,13 @@ export default function TKDualRange(_a) {
         var nextReal = clamp(inverse(nextRender), valueLow, maxDomain);
         onChangeHigh(nextReal);
     };
-    // Display REAL-space values (matching the color bar); use scientific notation for
-    // small non-zero values so they don't display as "0.000". Use type="text" because
-    // type="number" can show "0" for very small values instead of scientific notation.
-    var fmt = function (v) {
-        return Number.isFinite(v)
-            ? v !== 0 && Math.abs(v) < 0.01
-                ? Number(v).toExponential(precision)
-                : v.toFixed(precision)
-            : "";
-    };
-    var parse = function (s) {
-        var n = Number(s);
-        return Number.isFinite(n) ? n : NaN;
-    };
-    return (_jsxs("div", __assign({ className: "tkdr" }, { children: [_jsxs("div", __assign({ className: "tkdr__row tkdr__row--ends" }, { children: [_jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Min" })), _jsx("input", { className: "tkdr__num", type: "text", inputMode: "decimal", value: fmt(valueLow), onChange: function (e) {
-                                    var n = parse(e.target.value);
-                                    if (!Number.isFinite(n))
-                                        return;
-                                    onChangeLow(clamp(n, minDomain, valueHigh));
-                                }, onBlur: function (e) {
-                                    var n = parse(e.target.value);
+    return (_jsxs("div", __assign({ className: "tkdr" }, { children: [_jsxs("div", __assign({ className: "tkdr__row tkdr__row--ends" }, { children: [_jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Min" })), _jsx(DeferredInput, { className: "tkdr__num", committed: fmt(valueLow, precision), lo: minDomain, hi: valueHigh, onCommit: function (raw) {
+                                    var n = parse(raw);
                                     if (!Number.isFinite(n))
                                         return;
                                     onChangeLow(clamp(n, minDomain, valueHigh));
-                                } })] })), _jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Max" })), _jsx("input", { className: "tkdr__num", type: "text", inputMode: "decimal", value: fmt(valueHigh), onChange: function (e) {
-                                    var n = parse(e.target.value);
-                                    if (!Number.isFinite(n))
-                                        return;
-                                    onChangeHigh(clamp(n, valueLow, maxDomain));
-                                }, onBlur: function (e) {
-                                    var n = parse(e.target.value);
+                                } })] })), _jsxs("div", __assign({ className: "tkdr__group" }, { children: [_jsx("span", __assign({ className: "tkdr__hint" }, { children: "Max" })), _jsx(DeferredInput, { className: "tkdr__num", committed: fmt(valueHigh, precision), lo: valueLow, hi: maxDomain, onCommit: function (raw) {
+                                    var n = parse(raw);
                                     if (!Number.isFinite(n))
                                         return;
                                     onChangeHigh(clamp(n, valueLow, maxDomain));

package/dist/CmrComponents/tk-dualrange/tk-dual-range.css

@@ -140,3 +140,25 @@
   font-weight: 400;
   font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
 }
+
+/* wrapper that stacks the input + error text */
+.tkdr__input-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+/* red outline when the value is invalid */
+.tkdr__num--error {
+  border-color: #d32f2f;
+  outline-color: #d32f2f;
+}
+
+/* small red validation message */
+.tkdr__error {
+  font-size: 0.7rem;
+  color: #d32f2f;
+  line-height: 1;
+  white-space: nowrap;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "4.8.6",
+  "version": "4.8.7",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",