@pie-lib/graphing 4.0.5-next.32 → 4.0.5-next.33

package/dist/mark-label.js

@@ -4,72 +4,74 @@ import n from "./label-svg-icon.js";
 import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
 import s from "prop-types";
 import { types as c } from "@pie-lib/plot";
-import { styled as l, useTheme as u } from "@mui/material/styles";
-import { Fragment as ee, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { color as p } from "@pie-lib/render-ui";
+import { styled as l, useTheme as ee } from "@mui/material/styles";
+import { Fragment as te, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { color as f } from "@pie-lib/render-ui";
 //#region src/mark-label.tsx
-var m = 500, h = 500, g = [
+var ne = 500, p = 500, m = [
 	0,
 	50,
 	120,
 	250,
-	400
-], _ = l("div")(({ theme: e }) => ({
+	400,
+	700,
+	1e3
+], h = 3, g = 30, _ = l("div")(({ theme: e }) => ({
 	float: "right",
 	padding: e.spacing(.5),
 	borderRadius: "4px",
 	fontSize: "10px",
-	backgroundColor: p.defaults.WHITE,
-	color: p.defaults.CORRECT_WITH_ICON,
-	border: `solid 1px ${p.defaults.CORRECT_WITH_ICON}`
+	backgroundColor: f.defaults.WHITE,
+	color: f.defaults.CORRECT_WITH_ICON,
+	border: `solid 1px ${f.defaults.CORRECT_WITH_ICON}`
 })), v = l("div")(({ theme: e }) => ({
 	float: "right",
 	padding: e.spacing(.5),
 	borderRadius: "4px",
 	fontSize: "10px",
-	backgroundColor: p.defaults.WHITE,
-	color: p.defaults.INCORRECT_WITH_ICON,
-	border: `solid 1px ${p.defaults.INCORRECT_WITH_ICON}`
+	backgroundColor: f.defaults.WHITE,
+	color: f.defaults.INCORRECT_WITH_ICON,
+	border: `solid 1px ${f.defaults.INCORRECT_WITH_ICON}`
 })), y = l("div")(({ theme: e }) => ({
 	float: "right",
 	padding: e.spacing(.5),
 	borderRadius: "4px",
 	fontSize: "10px",
-	backgroundColor: p.defaults.WHITE,
-	color: p.defaults.MISSING_WITH_ICON,
-	border: `solid 1px ${p.defaults.MISSING_WITH_ICON}`,
+	backgroundColor: f.defaults.WHITE,
+	color: f.defaults.MISSING_WITH_ICON,
+	border: `solid 1px ${f.defaults.MISSING_WITH_ICON}`,
 	fontWeight: "bold"
 })), b = l("div")(() => ({
 	float: "right",
 	padding: 0,
 	borderRadius: "4px",
 	fontSize: "10px",
-	backgroundColor: p.defaults.WHITE,
-	color: p.defaults.INCORRECT_WITH_ICON,
+	backgroundColor: f.defaults.WHITE,
+	color: f.defaults.INCORRECT_WITH_ICON,
 	fontWeight: "bold"
 })), x = (e, t, n) => ({
 	float: "right",
 	padding: e.spacing(.5),
 	fontFamily: e.typography.fontFamily,
 	fontSize: "10px",
-	border: t ? `solid 1px ${p.defaults.PRIMARY_DARK}` : n ? `solid 1px ${p.disabled()}` : `solid 1px ${p.defaults.SECONDARY}`,
+	border: t ? `solid 1px ${f.defaults.PRIMARY_DARK}` : n ? `solid 1px ${f.disabled()}` : `solid 1px ${f.defaults.SECONDARY}`,
 	borderRadius: "3px",
-	color: n ? p.disabled() : p.defaults.PRIMARY_DARK,
-	backgroundColor: p.defaults.WHITE,
+	color: n ? f.disabled() : f.defaults.PRIMARY_DARK,
+	backgroundColor: f.defaults.WHITE,
 	WebkitOpacity: t ? "1" : void 0,
-	WebkitTextFillColor: n ? p.disabled() : void 0
-}), S = () => ({
+	WebkitTextFillColor: n ? f.disabled() : void 0
+}), re = () => ({
 	padding: "0",
 	border: "none",
 	color: "inherit",
 	fontWeight: "bold"
-}), C = (e, t, n = {
+}), S = (e, t, n = {
 	width: 0,
 	height: 0
 }) => {
 	let { scale: r, domain: i, range: a } = e, o = r.x(t.x) + n.width + 5, s = r.y(t.y) + n.height + 5, c = o >= r.x(i.max) ? "left" : "right";
 	return `${s >= r.y(a.min) ? "top" : "bottom"}-${c}`;
-}, w = (e, t, n = {
+}, C = (e, t, n = {
 	width: 0,
 	height: 0
 }, r) => {
@@ -93,15 +95,22 @@ var m = 500, h = 500, g = [
 		};
 		default: return {};
 	}
-}, T = ({ _ref: t, externalInputRef: n, label: r, disabled: i, inputStyle: a, onChange: o, onBlur: s }) => /* @__PURE__ */ d(e, {
+}, w = (e) => {
+	if (typeof document > "u" || !document.getSelection) return !0;
+	let t = document.getSelection();
+	if (!t || !t.rangeCount || !t.anchorNode) return !1;
+	let n = t.anchorNode;
+	return n === e || n === e.parentNode || e.contains(n);
+}, T = ({ _ref: t, externalInputRef: n, label: r, disabled: i, inputStyle: a, minWidth: o, onChange: s, onBlur: c }) => /* @__PURE__ */ u(e, {
 	inputRef: (e) => {
 		t(e), n(e);
 	},
 	disabled: i,
 	inputStyle: a,
+	minWidth: o,
 	value: r,
-	onChange: o,
-	onBlur: s
+	onChange: s,
+	onBlur: c
 });
 T.propTypes = {
 	_ref: s.func,
@@ -109,82 +118,94 @@ T.propTypes = {
 	label: s.string,
 	disabled: s.bool,
 	inputStyle: s.object,
+	minWidth: s.number,
 	onChange: s.func,
 	onBlur: s.func
 };
 var E = (e) => {
-	let s = a(null), [c, l] = o(null), p = r((e) => {
+	let s = a(null), [c, l] = o(null), f = r((e) => {
 		s.current = e, l(e);
-	}, []), E = u(), { mark: D, graphProps: O, disabled: k, autoFocus: A, inputRef: j } = e, [M, N] = o(D.label), { correctness: P, correctnesslabel: F, correctlabel: I } = D, L = () => !!s.current && typeof document < "u" && document.activeElement === s.current, R = a(D.label === "" && !k && !D.disabled), z = a(0), B = a(D.label), V = () => Date.now() < z.current && !(s.current && s.current.value), H = (e) => N(e.target.value), U = (t) => {
+	}, []), E = ee(), { mark: D, graphProps: O, disabled: k, autoFocus: A, inputRef: j } = e, [M, N] = o(D.label), { correctness: P, correctnesslabel: F, correctlabel: I } = D, L = () => !!s.current && typeof document < "u" && document.activeElement === s.current, R = a(D.label === "" && !k && !D.disabled), z = a(0), B = a(D.label), V = () => Date.now() < z.current && !(s.current && s.current.value), H = a(!1), U = a(!1), W = a(0), ie = (e) => N(e.target.value), G = (t) => {
 		t !== B.current && (B.current = t, e.onChange(t));
-	}, W = r(() => {
-		V() || (R.current = !1, M === "" ? e.onChange("") : M !== D.label && U(M), e.onBlur && e.onBlur());
+	}, ae = r(() => {
+		V() || H.current || U.current || (R.current = !1, M === "" ? e.onChange("") : M !== D.label && G(M), e.onBlur && e.onBlur());
 	}, [
 		M,
 		D.label,
 		e.onChange,
 		e.onBlur
-	]), G = t(M, m);
+	]), K = t(M, ne);
 	i(() => {
 		L() || N(D.label);
 	}, [D.label]), i(() => {
-		typeof G == "string" && G !== D.label && U(G);
-	}, [G]);
-	let K = () => {
+		typeof K == "string" && K !== D.label && G(K);
+	}, [K]);
+	let q = () => {
 		let e = s.current;
-		if (!A && !R.current && !V() || !e || e.disabled || L()) return;
-		e.focus(), L() && (R.current = !1);
-		let t = (e.value || "").length;
-		e.setSelectionRange && e.setSelectionRange(t, t);
+		if (!A && !R.current && !V() || !e || e.disabled) return;
+		let t = L();
+		if (t || (e.focus(), L() && (R.current = !1)), !e.setSelectionRange) return;
+		let n = t && e.value, r = n ? e.selectionStart : (e.value || "").length, i = n ? e.selectionEnd : r;
+		w(e) || e.setSelectionRange(r, i), !(w(e) || W.current >= h) && (W.current += 1, U.current = !0, e.blur(), e.focus(), e.setSelectionRange(r, i), U.current = !1);
 	};
-	i(() => K()), i(() => {
+	i(() => q()), i(() => {
 		if (!A && !R.current) return;
-		z.current ||= Date.now() + h;
-		let e = g.map((e) => setTimeout(K, e));
+		z.current ||= Date.now() + p;
+		let e = m.map((e) => setTimeout(q, e));
 		return () => e.forEach((e) => clearTimeout(e));
+	}, [A]), i(() => {
+		let e = () => {
+			H.current = !0;
+		}, t = () => {
+			H.current && (H.current = !1, q());
+		};
+		return window.addEventListener("blur", e), window.addEventListener("focus", t), () => {
+			window.removeEventListener("blur", e), window.removeEventListener("focus", t);
+		};
 	}, [A]);
-	let q = c ? c.getBoundingClientRect() : {
+	let J = c ? c.getBoundingClientRect() : {
 		width: 0,
 		height: 0
-	}, J = w(O, D, q, C(O, D, q)), Y = {
+	}, Y = C(O, D, J, S(O, D, J)), X = {
 		position: "fixed",
 		pointerEvents: "auto",
 		display: "flex",
 		alignItems: "center",
 		gap: "3px",
-		...J
-	}, X = {
-		...Y,
-		top: J.top + 25
-	}, Z = k || D.disabled, Q = (e, t) => /* @__PURE__ */ d(T, {
-		_ref: p,
+		...Y
+	}, oe = {
+		...X,
+		top: Y.top + 25
+	}, Z = k || D.disabled, Q = (e, t) => /* @__PURE__ */ u(T, {
+		_ref: f,
 		externalInputRef: j,
 		label: t,
 		disabled: Z,
 		inputStyle: e,
-		onChange: H,
-		onBlur: W
-	}), $ = S();
-	return P === "correct" && F === "correct" && I ? /* @__PURE__ */ f(_, {
-		style: Y,
-		children: [/* @__PURE__ */ d(n, { type: "correct" }), Q($, I)]
-	}) : P === "correct" && F === "correct" && !I ? null : P === "correct" && F === "incorrect" ? /* @__PURE__ */ f(ee, { children: [/* @__PURE__ */ f(v, {
-		style: Y,
-		children: [/* @__PURE__ */ d(n, { type: "incorrect" }), M === "" ? /* @__PURE__ */ d(n, {
+		minWidth: Z ? 1 : g,
+		onChange: ie,
+		onBlur: ae
+	}), $ = re();
+	return P === "correct" && F === "correct" && I ? /* @__PURE__ */ d(_, {
+		style: X,
+		children: [/* @__PURE__ */ u(n, { type: "correct" }), Q($, I)]
+	}) : P === "correct" && F === "correct" && !I ? null : P === "correct" && F === "incorrect" ? /* @__PURE__ */ d(te, { children: [/* @__PURE__ */ d(v, {
+		style: X,
+		children: [/* @__PURE__ */ u(n, { type: "incorrect" }), M === "" ? /* @__PURE__ */ u(n, {
 			type: "empty",
 			style: { marginLeft: "3px" }
 		}) : Q($, M)]
-	}), /* @__PURE__ */ d(y, {
-		style: X,
+	}), /* @__PURE__ */ u(y, {
+		style: oe,
 		children: Q($, I)
-	})] }) : P === "missing" ? /* @__PURE__ */ d(y, {
-		style: Y,
+	})] }) : P === "missing" ? /* @__PURE__ */ u(y, {
+		style: X,
 		children: Q($, M)
-	}) : P === "incorrect" ? /* @__PURE__ */ d(b, {
-		style: Y,
+	}) : P === "incorrect" ? /* @__PURE__ */ u(b, {
+		style: X,
 		children: Q($, M)
-	}) : Z && !M ? null : /* @__PURE__ */ d("div", {
-		style: Y,
+	}) : Z && !M ? null : /* @__PURE__ */ u("div", {
+		style: X,
 		children: Q(x(E, k, D.disabled), M)
 	});
 };
@@ -198,4 +219,4 @@ E.propTypes = {
 	mark: s.object
 };
 //#endregion
-export { E as MarkLabel, E as default, w as coordinates, C as position };
+export { E as MarkLabel, E as default, C as coordinates, S as position };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing",
-  "version": "4.0.5-next.32",
+  "version": "4.0.5-next.33",
   "description": "Graphing components",
   "repository": {
     "type": "git",