@mittwald/flow-react-components 1.5.10 → 1.5.12

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs

@@ -2,6 +2,7 @@
 /* */
 import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
 import { useCartesianChartContext } from "../../context.mjs";
+import { useTickLabelWidth } from "../../hooks/useTickLabelWidth.mjs";
 import { TypedYAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -20,17 +21,34 @@ var YAxis = (props) => {
 	const { domain, type = "auto", width, ...rest } = props;
 	const tokens = useDesignTokens();
 	const { layout } = useCartesianChartContext();
-	const isCategoryAxis = type === "category" || type === "auto" && layout === "vertical";
+	const tickLabels = useTickLabelWidth();
+	const isAutoWidth = (width ?? (type === "category" || type === "auto" && layout === "vertical" ? "auto" : void 0)) === "auto";
+	const tickMargin = parseInt(tokens.axis.spacing.value);
+	const tickSize = parseInt(tokens.axis["tick-size"].value);
+	const tickFill = tokens.axis["color"].value;
+	const autoWidth = tickLabels.width === void 0 ? "auto" : tickLabels.width + tickSize + tickMargin;
+	const measuredTick = (tickProps) => {
+		const { payload, index, tickFormatter } = tickProps;
+		const value = `${tickFormatter ? tickFormatter(payload.value, index) : payload.value}${rest.unit ?? ""}`;
+		return /* @__PURE__ */ jsx(Recharts.Text, {
+			...tickProps,
+			ref: tickLabels.labelRef,
+			className: "recharts-cartesian-axis-tick-value",
+			fill: tickFill,
+			width: void 0,
+			children: value
+		});
+	};
 	return /* @__PURE__ */ jsx(Recharts.YAxis, {
 		...rest,
 		allowDataOverflow: true,
 		domain,
 		type,
-		width: width ?? (isCategoryAxis ? "auto" : void 0),
+		width: isAutoWidth ? autoWidth : width,
 		fontSize: tokens.axis["font-size"].value,
-		tick: { fill: tokens.axis["color"].value },
-		tickMargin: parseInt(tokens.axis.spacing.value),
-		tickSize: parseInt(tokens.axis["tick-size"].value)
+		tick: isAutoWidth ? measuredTick : { fill: tickFill },
+		tickMargin,
+		tickSize
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={width ?? (isCategoryAxis ? \"auto\" : undefined)}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,iBACJ,SAAS,cAAe,SAAS,UAAU,WAAW;CAExD,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,UAAU,iBAAiB,SAAS,KAAA;EAC3C,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
+{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\nimport { useTickLabelWidth } from \"@/components/CartesianChart/hooks/useTickLabelWidth\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n  const tickLabels = useTickLabelWidth();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n  const isAutoWidth =\n    (width ?? (isCategoryAxis ? \"auto\" : undefined)) === \"auto\";\n\n  const tickMargin = parseInt(tokens.axis.spacing.value);\n  const tickSize = parseInt(tokens.axis[\"tick-size\"].value);\n  const tickFill = tokens.axis[\"color\"].value;\n\n  /*\n   * Recharts' own `\"auto\"` stays in charge until the labels are measured, so\n   * the first frame is close already.\n   */\n  const autoWidth =\n    tickLabels.width === undefined\n      ? \"auto\"\n      : tickLabels.width + tickSize + tickMargin;\n\n  /*\n   * Recharts' default tick label, plus the measuring ref. Recharts passes a\n   * numeric axis width on to the label, which wraps once the text is wider —\n   * so the label drops it, as it does with `\"auto\"`.\n   */\n  const measuredTick = (tickProps: Recharts.YAxisTickContentProps) => {\n    const { payload, index, tickFormatter } = tickProps;\n    const value = `${tickFormatter ? tickFormatter(payload.value, index) : payload.value}${rest.unit ?? \"\"}`;\n    return (\n      <Recharts.Text\n        {...tickProps}\n        ref={tickLabels.labelRef}\n        className=\"recharts-cartesian-axis-tick-value\"\n        fill={tickFill}\n        width={undefined}\n      >\n        {value}\n      </Recharts.Text>\n    );\n  };\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={isAutoWidth ? autoWidth : width}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={isAutoWidth ? measuredTick : { fill: tickFill }}\n      tickMargin={tickMargin}\n      tickSize={tickSize}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAC5C,MAAM,aAAa,kBAAkB;CAIrC,MAAM,eACH,UAFD,SAAS,cAAe,SAAS,UAAU,WAAW,aAE1B,SAAS,KAAA,QAAgB;CAEvD,MAAM,aAAa,SAAS,OAAO,KAAK,QAAQ,KAAK;CACrD,MAAM,WAAW,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CACxD,MAAM,WAAW,OAAO,KAAK,QAAQ,CAAC;CAMtC,MAAM,YACJ,WAAW,UAAU,KAAA,IACjB,SACA,WAAW,QAAQ,WAAW;CAOpC,MAAM,gBAAgB,cAA8C;EAClE,MAAM,EAAE,SAAS,OAAO,kBAAkB;EAC1C,MAAM,QAAQ,GAAG,gBAAgB,cAAc,QAAQ,OAAO,KAAK,IAAI,QAAQ,QAAQ,KAAK,QAAQ;EACpG,OACE,oBAAC,SAAS,MAAV;GACE,GAAI;GACJ,KAAK,WAAW;GAChB,WAAU;GACV,MAAM;GACN,OAAO,KAAA;GAEN,UAAA;EACY,CAAA;CAEnB;CAEA,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,cAAc,YAAY;EACjC,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,cAAc,eAAe,EAAE,MAAM,SAAS;EACxC;EACF;CACX,CAAA;AAEL"}

package/dist/js/packages/components/src/components/CartesianChart/hooks/useTickLabelWidth.mjs

@@ -0,0 +1,67 @@
+"use client"
+/* */
+import { createFrameResizeObserver } from "../../../lib/dom/createFrameResizeObserver.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/CartesianChart/hooks/useTickLabelWidth.ts
+var measureLabel = (label) => {
+	try {
+		return label.getBBox().width;
+	} catch {
+		return 0;
+	}
+};
+/**
+* Measures the widest tick label of an axis, for an axis that sizes itself to
+* its labels.
+*
+* Replaces recharts' own `width="auto"` measurement, which undersizes the axis
+* in two ways. It reads `getBoundingClientRect()` — screen pixels, which a CSS
+* `zoom` or `transform` on an ancestor scales — and uses the result as SVG user
+* units. And it measures once, so a web font that replaces its fallback after
+* mount widens the labels past the axis. `getBBox()` measures in user units,
+* and a `ResizeObserver` — which tracks an SVG element's bbox — measures again
+* whenever a label changes size: a font swap, a new text, a hidden chart that
+* is shown.
+*
+* Attach the returned ref to every tick label. The width is `undefined` until a
+* label has been measured.
+*
+* @internal
+*/
+var useTickLabelWidth = () => {
+	const labels = useRef(/* @__PURE__ */ new Set());
+	const observer = useRef(null);
+	const [width, setWidth] = useState();
+	const measure = useCallback(() => {
+		const widest = Math.max(0, ...[...labels.current].map(measureLabel));
+		setWidth(widest > 0 ? Math.ceil(widest) : void 0);
+	}, []);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const frameObserver = createFrameResizeObserver(measure);
+		frameObserver.observe(labels.current);
+		observer.current = frameObserver;
+		return () => {
+			frameObserver.disconnect();
+			observer.current = null;
+		};
+	}, [measure]);
+	return {
+		width,
+		labelRef: useCallback((label) => {
+			if (!label) return;
+			labels.current.add(label);
+			observer.current?.observe(labels.current);
+			measure();
+			return () => {
+				labels.current.delete(label);
+				observer.current?.observe(labels.current);
+				measure();
+			};
+		}, [measure])
+	};
+};
+//#endregion
+export { useTickLabelWidth };
+
+//# sourceMappingURL=useTickLabelWidth.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useTickLabelWidth.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTickLabelWidth.mjs","names":[],"sources":["../../../../../../../../src/components/CartesianChart/hooks/useTickLabelWidth.ts"],"sourcesContent":["import {\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  createFrameResizeObserver,\n  type FrameResizeObserver,\n} from \"@/lib/dom/createFrameResizeObserver\";\n\nconst measureLabel = (label: SVGTextElement): number => {\n  try {\n    return label.getBBox().width;\n  } catch {\n    // Firefox throws for an element that is not rendered, and jsdom has no\n    // `getBBox` at all.\n    return 0;\n  }\n};\n\n/**\n * Measures the widest tick label of an axis, for an axis that sizes itself to\n * its labels.\n *\n * Replaces recharts' own `width=\"auto\"` measurement, which undersizes the axis\n * in two ways. It reads `getBoundingClientRect()` — screen pixels, which a CSS\n * `zoom` or `transform` on an ancestor scales — and uses the result as SVG user\n * units. And it measures once, so a web font that replaces its fallback after\n * mount widens the labels past the axis. `getBBox()` measures in user units,\n * and a `ResizeObserver` — which tracks an SVG element's bbox — measures again\n * whenever a label changes size: a font swap, a new text, a hidden chart that\n * is shown.\n *\n * Attach the returned ref to every tick label. The width is `undefined` until a\n * label has been measured.\n *\n * @internal\n */\nexport const useTickLabelWidth = () => {\n  const labels = useRef(new Set<SVGTextElement>());\n  const observer = useRef<FrameResizeObserver>(null);\n  const [width, setWidth] = useState<number>();\n\n  const measure = useCallback(() => {\n    const widest = Math.max(0, ...[...labels.current].map(measureLabel));\n    setWidth(widest > 0 ? Math.ceil(widest) : undefined);\n  }, []);\n\n  useEffect(() => {\n    // jsdom has no `ResizeObserver`.\n    if (typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n    const frameObserver = createFrameResizeObserver(measure);\n    frameObserver.observe(labels.current);\n    observer.current = frameObserver;\n    return () => {\n      frameObserver.disconnect();\n      observer.current = null;\n    };\n  }, [measure]);\n\n  const labelRef: RefCallback<SVGTextElement> = useCallback(\n    (label) => {\n      if (!label) {\n        return;\n      }\n      labels.current.add(label);\n      observer.current?.observe(labels.current);\n      measure();\n      return () => {\n        labels.current.delete(label);\n        observer.current?.observe(labels.current);\n        measure();\n      };\n    },\n    [measure],\n  );\n\n  return { width, labelRef };\n};\n"],"mappings":";;;;;AAYA,IAAM,gBAAgB,UAAkC;CACtD,IAAI;EACF,OAAO,MAAM,QAAQ,CAAC,CAAC;CACzB,QAAQ;EAGN,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,0BAA0B;CACrC,MAAM,SAAS,uBAAO,IAAI,IAAoB,CAAC;CAC/C,MAAM,WAAW,OAA4B,IAAI;CACjD,MAAM,CAAC,OAAO,YAAY,SAAiB;CAE3C,MAAM,UAAU,kBAAkB;EAChC,MAAM,SAAS,KAAK,IAAI,GAAG,GAAG,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,IAAI,YAAY,CAAC;EACnE,SAAS,SAAS,IAAI,KAAK,KAAK,MAAM,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,CAAC;CAEL,gBAAgB;EAEd,IAAI,OAAO,mBAAmB,aAC5B;EAEF,MAAM,gBAAgB,0BAA0B,OAAO;EACvD,cAAc,QAAQ,OAAO,OAAO;EACpC,SAAS,UAAU;EACnB,aAAa;GACX,cAAc,WAAW;GACzB,SAAS,UAAU;EACrB;CACF,GAAG,CAAC,OAAO,CAAC;CAmBZ,OAAO;EAAE;EAAO,UAjB8B,aAC3C,UAAU;GACT,IAAI,CAAC,OACH;GAEF,OAAO,QAAQ,IAAI,KAAK;GACxB,SAAS,SAAS,QAAQ,OAAO,OAAO;GACxC,QAAQ;GACR,aAAa;IACX,OAAO,QAAQ,OAAO,KAAK;IAC3B,SAAS,SAAS,QAAQ,OAAO,OAAO;IACxC,QAAQ;GACV;EACF,GACA,CAAC,OAAO,CAGM;CAAS;AAC3B"}

package/dist/types/components/CartesianChart/hooks/useTickLabelWidth.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.5.10",
+  "version": "1.5.12",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.5.10",
+    "@mittwald/flow-icons": "^1.5.12",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.5.10",
+    "@mittwald/react-tunnel": "^1.5.12",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -139,13 +139,13 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-components-base": "1.5.10",
-    "@mittwald/flow-core": "1.5.10",
-    "@mittwald/flow-design-tokens": "1.5.10",
-    "@mittwald/flow-icons-base": "1.5.10",
+    "@mittwald/flow-components-base": "1.5.12",
+    "@mittwald/flow-core": "1.5.12",
+    "@mittwald/flow-design-tokens": "1.5.12",
+    "@mittwald/flow-icons-base": "1.5.12",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.5.10",
+    "@mittwald/typescript-config": "1.5.12",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -199,7 +199,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.5.10",
+    "@mittwald/flow-icons-pro": "1.5.12",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -223,5 +223,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "04d86e653c22db90eb059b03aa0088e871bd591e"
+  "gitHead": "51db540dfe71c4ccf5a495961edf6280ab68e4db"
 }