@pie-lib/graphing-solution-set 5.0.1-next.20261004165705 → 5.0.1-next.20261004173930

package/dist/__tests__/coordinates-label.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/mark-label-placement.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/coordinates-label.js

@@ -5,16 +5,16 @@ import { types as n } from "@pie-lib/plot";
 import { color as r } from "@pie-lib/render-ui";
 import { jsx as i } from "react/jsx-runtime";
 import { styled as a } from "@mui/material/styles";
-import o from "@mui/material/InputBase";
 //#region src/coordinates-label.tsx
-var s = a(o)(({ theme: e }) => ({
+var o = a("div")(({ theme: e }) => ({
 	fontFamily: e.typography.fontFamily,
 	fontSize: e.typography.fontSize,
 	borderRadius: "8px",
 	background: e.palette.common.white,
 	color: r.defaults.BLACK,
-	"& .MuiInputBase-input": { padding: 0 }
-})), c = (e, t, n, r) => {
+	lineHeight: "1.4375em",
+	whiteSpace: "nowrap"
+})), s = (e, t, n, r) => {
 	let { scale: i, domain: a, range: o } = e, s = n === o.min ? 16 : n === o.max ? 0 : 8;
 	return i.x(t) + r + 10 >= i.x(a.max) ? {
 		left: i.x(t) - 10 - r,
@@ -23,24 +23,23 @@ var s = a(o)(({ theme: e }) => ({
 		left: i.x(t) + 10,
 		top: i.y(n) - s
 	};
-}, l = ({ x: t, y: n, graphProps: r }) => {
-	let a = `(${e(t)}, ${e(n)})`, o = (a.length || 0) * 6;
-	return /* @__PURE__ */ i(s, {
+}, c = ({ x: t, y: n, graphProps: r }) => {
+	let a = `(${e(t)}, ${e(n)})`, c = (a.length || 0) * 6;
+	return /* @__PURE__ */ i(o, {
 		style: {
 			position: "absolute",
 			pointerEvents: "auto",
-			width: o,
+			width: c,
 			padding: 0,
-			...c(r, t, n, o)
+			...s(r, t, n, c)
 		},
-		value: a,
-		inputProps: { ariaLabel: "naked" }
+		children: a
 	});
 };
-l.propTypes = {
+c.propTypes = {
 	graphProps: n.GraphPropsType,
 	x: t.number,
 	y: t.number
 };
 //#endregion
-export { l as CoordinatesLabel, l as default, c as getLabelPosition };
+export { c as CoordinatesLabel, c as default, s as getLabelPosition };

package/dist/mark-label.js

@@ -1,31 +1,31 @@
 import { roundNumber as e } from "./utils.js";
 import { AutosizeInput as t } from "./autosize-input.js";
 import { useDebounce as n } from "./use-debounce.js";
-import { useCallback as r, useEffect as i, useState as a } from "react";
-import o from "prop-types";
-import { types as s } from "@pie-lib/plot";
-import { color as c } from "@pie-lib/render-ui";
-import l from "@pie-lib/translator";
-import { jsx as u } from "react/jsx-runtime";
-import { styled as d } from "@mui/material/styles";
+import { useCallback as r, useEffect as i, useLayoutEffect as a, useState as o } from "react";
+import s from "prop-types";
+import { types as c } from "@pie-lib/plot";
+import { color as l } from "@pie-lib/render-ui";
+import u from "@pie-lib/translator";
+import { jsx as d } from "react/jsx-runtime";
+import { styled as f } from "@mui/material/styles";
 //#region src/mark-label.tsx
-var { translator: f } = l, p = d(t, { shouldForwardProp: (e) => !["disabled", "markDisabled"].includes(e) })(({ theme: e, disabled: t, markDisabled: n }) => ({ "& input": {
+var { translator: p } = u, m = f(t, { shouldForwardProp: (e) => e !== "markDisabled" })(({ theme: e, disabled: t, markDisabled: n }) => ({ "& input": {
 	float: "right",
 	padding: e.spacing(.5),
 	fontFamily: e.typography.fontFamily,
 	fontSize: e.typography.fontSize,
-	border: `solid 1px ${t ? c.defaults.PRIMARY_DARK : n ? c.disabled() : c.defaults.SECONDARY}`,
+	border: `solid 1px ${t ? l.defaults.PRIMARY_DARK : n ? l.disabled() : l.defaults.SECONDARY}`,
 	borderRadius: "3px",
-	color: n ? c.disabled() : c.defaults.PRIMARY_DARK,
+	color: n ? l.disabled() : l.defaults.PRIMARY_DARK,
 	background: t || n ? e.palette.background.paper : "transparent"
-} })), m = (e, t, n) => {
+} })), h = (e, t, n) => {
 	n ||= {
 		width: 0,
 		height: 0
 	};
 	let { scale: r, domain: i, range: a } = e, o = r.x(t.x) + n.width + 10, s = r.y(t.y) + n.height + 10, c = o >= r.x(i.max) ? "left" : "right";
 	return `${s >= r.y(a.min) ? "top" : "bottom"}-${c}`;
-}, h = (e, t, n, r) => {
+}, g = (e, t, n, r) => {
 	let { scale: i } = e;
 	switch (n ||= {
 		width: 0,
@@ -48,45 +48,60 @@ var { translator: f } = l, p = d(t, { shouldForwardProp: (e) => !["disabled", "m
 			top: i.y(t.y) - 10 - n.height
 		};
 	}
-}, g = (t) => {
-	let [o, s] = a(null), c = r((e) => s(e)), { mark: l, graphProps: d, disabled: g, inputRef: _, language: v } = t, [y, b] = a(l.label), x = (e) => b(e.target.value), S = n(y, 200);
-	i(() => {
-		b(l.label);
-	}, [l.label]), i(() => {
-		typeof S == "string" && S !== l.label && t.onChange(S);
-	}, [S]);
-	let C = o ? o.getBoundingClientRect() : {
+}, _ = (e) => {
+	let [t, n] = o({
 		width: 0,
 		height: 0
-	}, w = {
+	});
+	return a(() => {
+		if (!e) return;
+		let t = () => {
+			let { width: t, height: r } = e.getBoundingClientRect();
+			n((e) => e.width === t && e.height === r ? e : {
+				width: t,
+				height: r
+			});
+		};
+		if (t(), typeof ResizeObserver > "u") return;
+		let r = new ResizeObserver(t);
+		return r.observe(e), () => r.disconnect();
+	}, [e]), t;
+}, v = (t) => {
+	let [a, s] = o(null), c = r((e) => s(e)), { mark: l, graphProps: u, disabled: f, inputRef: v, language: y } = t, [b, x] = o(l.label), S = (e) => x(e.target.value), C = n(b, 200);
+	i(() => {
+		x(l.label);
+	}, [l.label]), i(() => {
+		typeof C == "string" && C !== l.label && t.onChange(C);
+	}, [C]);
+	let w = _(a), T = {
 		position: "fixed",
 		pointerEvents: "auto",
-		...h(d, l, C, m(d, l, C))
-	}, T = g || l.disabled;
-	return /* @__PURE__ */ u(p, {
+		...g(u, l, w, h(u, l, w))
+	}, E = f || l.disabled;
+	return /* @__PURE__ */ d(m, {
 		inputRef: (e) => {
-			c(e), _(e);
+			c(e), v(e);
 		},
-		"aria-label": Number.isFinite(l.x) && Number.isFinite(l.y) ? f.t("graphing.markLabel", {
-			lng: v,
+		"aria-label": Number.isFinite(l.x) && Number.isFinite(l.y) ? p.t("graphing.markLabel", {
+			lng: y,
 			x: e(l.x),
 			y: e(l.y)
-		}) : f.t("graphing.label", { lng: v }),
-		disabled: T,
+		}) : p.t("graphing.label", { lng: y }),
+		disabled: E,
 		markDisabled: l.disabled,
-		value: y,
-		style: w,
-		onChange: x
+		value: b,
+		style: T,
+		onChange: S
 	});
 };
-g.propTypes = {
-	disabled: o.bool,
-	onChange: o.func,
-	graphProps: s.GraphPropsType,
-	inputRef: o.func,
-	language: o.string,
-	mark: o.object,
-	theme: o.object
+v.propTypes = {
+	disabled: s.bool,
+	onChange: s.func,
+	graphProps: c.GraphPropsType,
+	inputRef: s.func,
+	language: s.string,
+	mark: s.object,
+	theme: s.object
 };
 //#endregion
-export { g as MarkLabel, g as default, h as coordinates, m as position };
+export { v as MarkLabel, v as default, g as coordinates, h as position };

package/dist/tools/polygon/component.d.ts

@@ -50,6 +50,7 @@ export declare class RawBaseComponent extends React.Component {
         middle: PropTypes.Requireable<object>;
         labelNode: PropTypes.Requireable<object>;
         labelModeEnabled: PropTypes.Requireable<boolean>;
+        language: PropTypes.Requireable<string>;
         onChangeLabelProps: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeProps: PropTypes.Requireable<(...args: any[]) => any>;
     };

package/dist/tools/polygon/component.js

@@ -9,17 +9,17 @@ import l from "prop-types";
 import { chunk as u, isEmpty as d } from "@pie-element/shared-lodash";
 import { types as f } from "@pie-lib/plot";
 import p from "debug";
-import { jsx as m } from "react/jsx-runtime";
-import h from "react-dom";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import g from "react-dom";
 //#region src/tools/polygon/component.tsx
-var g = /* @__PURE__ */ e(t(), 1), _ = p("pie-lib:graphing-solution-set:polygon"), v = (e, ...t) => u(t, 2).reduce((e, t) => {
+var _ = /* @__PURE__ */ e(t(), 1), v = p("pie-lib:graphing-solution-set:polygon"), y = (e, ...t) => u(t, 2).reduce((e, t) => {
 	if (t.length === 2) {
 		let [n, r] = t;
-		(0, g.default)(Number.isFinite(n.index), "Index must be defined");
+		(0, _.default)(Number.isFinite(n.index), "Index must be defined");
 		let i = n.index;
 		return i >= 0 && e.splice(i, 1, r), e;
 	} else return e;
-}, [...e]), y = class extends c.Component {
+}, [...e]), b = class extends c.Component {
 	static propTypes = {
 		className: l.string,
 		disabled: l.bool,
@@ -38,22 +38,23 @@ var g = /* @__PURE__ */ e(t(), 1), _ = p("pie-lib:graphing-solution-set:polygon"
 		middle: l.object,
 		labelNode: l.object,
 		labelModeEnabled: l.bool,
+		language: l.string,
 		onChangeLabelProps: l.func,
 		onChangeProps: l.func
 	};
 	static defaultProps = { points: [] };
 	dragPoint = (e, t, r) => {
-		_("[dragPoint] from, to:", t, r);
+		v("[dragPoint] from, to:", t, r);
 		let { onChange: i, points: a } = this.props, o = [...a], s = !!(a || []).find((e) => n(e, r));
 		n(t, r) || s || (a[e].label && (r.label = a[e].label), o.splice(e, 1, r), i(o));
 	};
 	dragLine = (e, t) => {
-		_("[dragLine]: ", e, t);
+		v("[dragLine]: ", e, t);
 		let { onChange: n } = this.props;
-		e.from.label && (t.from.label = e.from.label), e.to.label && (t.to.label = e.to.label), n(v(this.props.points, e.from, t.from, e.to, t.to));
+		e.from.label && (t.from.label = e.from.label), e.to.label && (t.to.label = e.to.label), n(y(this.props.points, e.from, t.from, e.to, t.to));
 	};
 	dragPoly = (e, t) => {
-		_("[dragPoly] ", e, t);
+		v("[dragPoly] ", e, t);
 		let { onChange: n } = this.props;
 		t.forEach((n, r) => {
 			e[r].label && (t[r].label = e[r].label);
@@ -61,7 +62,7 @@ var g = /* @__PURE__ */ e(t(), 1), _ = p("pie-lib:graphing-solution-set:polygon"
 	};
 	close = () => {
 		let { points: e, onClosePolygon: t } = this.props;
-		_("[close] ..."), e.length >= 3 ? t() : _("[close] - nope");
+		v("[close] ..."), e.length >= 3 ? t() : v("[close] - nope");
 	};
 	labelChange = (e, t) => {
 		let { points: n, onChangeProps: r } = this.props, i = { ...e };
@@ -98,25 +99,26 @@ var g = /* @__PURE__ */ e(t(), 1), _ = p("pie-lib:graphing-solution-set:polygon"
 	};
 	input = {};
 	render() {
-		let { closed: e, graphProps: t, onChangeLabelProps: n, points: r, middle: i, labelNode: a, labelModeEnabled: l, isSolution: u = !1 } = this.props, d = r && r.length || 0;
-		return a && i && Object.prototype.hasOwnProperty.call(i, "label") && h.createPortal(/* @__PURE__ */ m(s, {
-			inputRef: (e) => this.input[d] = e,
+		let { closed: e, graphProps: t, onChangeLabelProps: n, points: r, middle: i, labelNode: a, labelModeEnabled: l, language: u, isSolution: d = !1 } = this.props, f = r && r.length || 0, p = null;
+		return a && i && Object.prototype.hasOwnProperty.call(i, "label") && (p = g.createPortal(/* @__PURE__ */ m(s, {
+			inputRef: (e) => this.input[f] = e,
 			disabled: !l,
 			mark: i,
 			graphProps: t,
+			language: u,
 			onChange: (e) => n({
 				...i,
 				label: e
 			})
-		}), a), /* @__PURE__ */ m("g", { children: /* @__PURE__ */ m(c.Fragment, { children: /* @__PURE__ */ m(o, {
+		}), a)), /* @__PURE__ */ m("g", { children: /* @__PURE__ */ h(c.Fragment, { children: [/* @__PURE__ */ m(o, {
 			points: r,
 			closed: e,
-			isSolution: u,
+			isSolution: d,
 			graphProps: t,
-			onClick: this.clickPoint.bind(this, i, d)
-		}) }) });
+			onClick: this.clickPoint.bind(this, i, f)
+		}), p] }) });
 	}
-}, b = y, x = class extends c.Component {
+}, x = b, S = class extends c.Component {
 	static propTypes = {
 		...a,
 		graphProps: f.GraphPropsType.isRequired
@@ -157,7 +159,7 @@ var g = /* @__PURE__ */ e(t(), 1), _ = p("pie-lib:graphing-solution-set:polygon"
 		});
 	};
 	closePolygon = () => {
-		_("[closePolygon] ...");
+		v("[closePolygon] ...");
 		let { onComplete: e, mark: t } = this.props;
 		e(t, {
 			...t,
@@ -172,9 +174,9 @@ var g = /* @__PURE__ */ e(t(), 1), _ = p("pie-lib:graphing-solution-set:polygon"
 		});
 	};
 	render() {
-		let { coordinatesOnHover: e, mark: t, graphProps: n, onClick: r, isToolActive: i, labelNode: a, labelModeEnabled: o } = this.props, { mark: s } = this.state;
-		return /* @__PURE__ */ m(b, {
-			...s || t,
+		let { coordinatesOnHover: e, mark: t, graphProps: n, onClick: r, isToolActive: i, labelNode: a, labelModeEnabled: o, language: s } = this.props, { mark: c } = this.state;
+		return /* @__PURE__ */ m(x, {
+			...c || t,
 			coordinatesOnHover: e,
 			onChange: this.change,
 			onChangeLabelProps: this.changeLabelProps,
@@ -186,9 +188,10 @@ var g = /* @__PURE__ */ e(t(), 1), _ = p("pie-lib:graphing-solution-set:polygon"
 			graphProps: n,
 			isToolActive: i,
 			labelNode: a,
-			labelModeEnabled: o
+			labelModeEnabled: o,
+			language: s
 		});
 	}
 };
 //#endregion
-export { b as BaseComponent, y as RawBaseComponent, x as default, v as swap };
+export { x as BaseComponent, b as RawBaseComponent, S as default, y as swap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/graphing-solution-set",
-  "version": "5.0.1-next.20261004165705",
+  "version": "5.0.1-next.20261004173930",
   "description": "Graphing components",
   "repository": {
     "type": "git",
@@ -14,13 +14,13 @@
     "@mapbox/point-geometry": "^1.1.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "5.0.1-next.20261004165705",
-    "@pie-lib/editable-html-tip-tap": "3.0.1-next.20261004165705",
+    "@pie-lib/drag": "5.0.1-next.20261004173930",
+    "@pie-lib/editable-html-tip-tap": "3.0.1-next.20261004173930",
     "@pie-lib/graphing-utils": "4.0.1-next.20261002233132",
-    "@pie-lib/plot": "5.0.1-next.20261004165705",
+    "@pie-lib/plot": "5.0.1-next.20261004173930",
     "@pie-lib/render-ui": "8.0.1-next.20261004165705",
     "@pie-lib/tools": "3.0.1-next.20261002233132",
-    "@pie-lib/translator": "5.0.1-next.20261004041321",
+    "@pie-lib/translator": "5.0.1-next.20261004173930",
     "@visx/axis": "^4.0.0",
     "@visx/clip-path": "^4.0.0",
     "@visx/curve": "^4.0.0",
@@ -40,7 +40,7 @@
     "redux-undo": "^1.1.0",
     "@pie-element/shared-lodash": "0.1.2-next.20261002215153",
     "clsx": "^2.1.1",
-    "@pie-lib/config-ui": "14.0.1-next.20261004165705",
+    "@pie-lib/config-ui": "14.0.1-next.20261004173930",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
     "d3-shape": "^3.2.0"