@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/charts/ChartLegend.js

@@ -1,46 +1,144 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { Placement } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import Tooltip, { TooltipPosition, TooltipVariant } from "../tooltip/Tooltip.js";
-import Circle from "../shapes/Circle.js";
-import { ChartMarkState } from "./types.js";
-import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow } from "./ChartPrimitives.js";
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Flex, { AlignItems } from "../layout/Flex.js";
+import Tooltip from "../tooltip/Tooltip.js";
+import { ChartLegendPlacement, ChartMarkState, ChartPalette } from "./types.js";
+import { CHART_MARK_STATE_TO_CSS_MAP } from "./ChartPrimitives.js";
+import Circle, { CircleSize, CircleVariant } from "../shapes/Circle.js";
+import Square, { SquareSize, SquareVariant } from "../shapes/Square.js";
+import { CHART_PALETTE_TO_COLOR_MAP } from "./chartPalette.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/charts/ChartLegend.tsx
 /**
-* Legend for the chart components.
+* @internal The chart legend: one line beneath the plot (`BOTTOM`) or one column beside it
+* (`RIGHT`). Entries that do not fit collapse behind a "+N more" button whose `Tooltip` lists
+* them. The fit is measured, not guessed: a hidden copy of every entry is laid out unconstrained
+* and the visible count is however many real sizes fit beside the trigger.
 *
-* Hovering or focusing an entry isolates its series; leaving releases it.
-*
-* The legend never outgrows the plot. A horizontal legend holds exactly one
-* line of the plot's width; a side-placed legend holds one column of the
-* plot's height. Entries that would not fit collapse behind a "+N more"
-* trigger whose tooltip lists them — still hoverable, so a collapsed series
-* isolates exactly like a visible one. The fit is measured, not guessed: a
-* hidden copy of every entry is laid out unconstrained, and the visible count
-* is however many real sizes fit beside the trigger.
-*
-* Deliberately *not* a visibility toggle: hiding a series would have to rescale
-* the value axis to stay honest — otherwise the remaining bars sit mysteriously
-* short — and that belongs with the geometry layer rather than bolted on here.
-* Isolation only changes opacity, so the domain is untouched and the numbers
-* keep meaning what they did.
+* Entries are list items with no action (no button semantics); hovering one isolates its series,
+* a pointer enhancement (keyboard users hear every series in the announcement). Spacing is
+* padding on each entry (trailing in a row, split above and below in a column so the column
+* centers), not a flex gap, so sweeping across entries never drops the isolation. Isolation changes opacity only; it never rescales the axis.
+*/
+/** @internal Swatch shape: a dot for line series, a square for filled series. */
+var ChartLegendSwatch = /* @__PURE__ */ function(ChartLegendSwatch) {
+	/** `Circle SMALL`: line series. */
+	ChartLegendSwatch["CIRCLE"] = "CIRCLE";
+	/** `Square SMALL`: area, bar, arc and heatmap series. */
+	ChartLegendSwatch["SQUARE"] = "SQUARE";
+	return ChartLegendSwatch;
+}({});
+/**
+* A swatch takes its slot's mark color (`CHART_PALETTE_TO_COLOR_MAP`) through `currentColor`, so
+* the legend always matches the marks (the hue slots that stand in for the old neutrals included).
 */
-var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, verticalExtent, maxItems, onItemEnter, onItemLeave }) => {
-	const rowRef = useRef(null);
+var SwatchColor = /*#__PURE__*/ styled("span")({
+	name: "SwatchColor",
+	class: "gx-ChartLegend-SwatchColor-s1bx0eug",
+	propsAsIs: false
+});
+/** The legend box. `position: relative` anchors the measure layer. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-ChartLegend-r1c62hgg",
+	propsAsIs: false
+});
+/** The visible list. Never wraps: the fit computation guarantees one line (or column). */
+var List = /*#__PURE__*/ styled("ul")({
+	name: "List",
+	class: "gx-ChartLegend-List-l1lgbp5d",
+	propsAsIs: false
+});
+/** Legend placement → list layout. BOTTOM aligns the first entry with the plot's left edge. */
+var CHART_LEGEND_PLACEMENT_TO_LIST_CSS_MAP = {
+	[ChartLegendPlacement.BOTTOM]: "gx-ChartLegend-ChartLegendPlacement_BOTTOM-c681qv5",
+	[ChartLegendPlacement.RIGHT]: "gx-ChartLegend-ChartLegendPlacement_RIGHT-c1l24ron"
+};
+/** Zero-size clip that stops the measure layer's max-content box from adding page overflow. */
+var MeasureClip = /*#__PURE__*/ styled("div")({
+	name: "MeasureClip",
+	class: "gx-ChartLegend-MeasureClip-m4cjheg",
+	propsAsIs: false
+});
+/** Invisible copy of every entry plus the widest trigger, laid out unconstrained. */
+var Measure = /*#__PURE__*/ styled("div")({
+	name: "Measure",
+	class: "gx-ChartLegend-Measure-m1byi1w",
+	propsAsIs: false
+});
+var MEASURE_PLACEMENT_TO_CSS_MAP = {
+	[ChartLegendPlacement.BOTTOM]: "gx-ChartLegend-ChartLegendPlacement_BOTTOM-cixvbm6",
+	[ChartLegendPlacement.RIGHT]: "gx-ChartLegend-ChartLegendPlacement_RIGHT-c1ehakcs"
+};
+/** An entry never shrinks below its content; the fit decides what shows. */
+var ENTRY_CSS = "gx-ChartLegend-ENTRY_CSS-esomlsk";
+/** The "+N more" trigger: a real button, Tab-reachable. */
+var TRIGGER_CSS = "gx-ChartLegend-TRIGGER_CSS-tdc52xq";
+/** The hidden entries, listed in the trigger's tooltip. */
+var OverflowList = /*#__PURE__*/ styled("ul")({
+	name: "OverflowList",
+	class: "gx-ChartLegend-OverflowList-ome95dp",
+	propsAsIs: false
+});
+function Swatch({ item, swatch }) {
+	return /* @__PURE__ */ jsx(SwatchColor, {
+		style: { "--gx-chart-mark-color": item.hex ?? CHART_PALETTE_TO_COLOR_MAP[item.palette ?? ChartPalette.TERTIARY] },
+		children: swatch === "CIRCLE" ? /* @__PURE__ */ jsx(Circle, {
+			size: CircleSize.SMALL,
+			variant: CircleVariant.INHERIT
+		}) : /* @__PURE__ */ jsx(Square, {
+			size: SquareSize.SMALL,
+			variant: SquareVariant.INHERIT
+		})
+	});
+}
+function Entry({ item, swatch, isVertical, state, as = "li", onEnter, onLeave }) {
+	return /* @__PURE__ */ jsxs(Flex, {
+		as,
+		alignItems: AlignItems.CENTER,
+		gap: 8,
+		padding: isVertical ? [4, 0] : [
+			0,
+			16,
+			0,
+			0
+		],
+		className: cx(ENTRY_CSS, CHART_MARK_STATE_TO_CSS_MAP[state]),
+		...onEnter && { onMouseEnter: onEnter },
+		...onLeave && { onMouseLeave: onLeave },
+		children: [/* @__PURE__ */ jsx(Swatch, {
+			item,
+			swatch
+		}), /* @__PURE__ */ jsx(Text, {
+			size: TextSize.BODY_SM,
+			variant: TextVariant.SECONDARY,
+			lineClamp: 1,
+			children: item.label
+		})]
+	});
+}
+/** @internal The chart legend. */
+function ChartLegend({ items, placement, swatch, inset, extent = 0, hoveredKey, onItemEnter, onItemLeave }) {
+	const listRef = useRef(null);
 	const measureRef = useRef(null);
-	/** How many entries fit inline. `null` until the first measurement lands. */
 	const [fitCount, setFitCount] = useState(null);
+	const isVertical = placement === ChartLegendPlacement.RIGHT;
 	const recompute = useCallback(() => {
-		const row = rowRef.current;
+		const list = listRef.current;
 		const measure = measureRef.current;
-		if (!row || !measure) return;
+		if (!list || !measure) return;
 		const rendered = Array.from(measure.children);
 		const trigger = rendered.pop();
 		if (!trigger) return;
-		const available = vertical ? verticalExtent || Number.POSITIVE_INFINITY : row.clientWidth - inset;
-		const sizeOf = (el) => {
-			const rect = el.getBoundingClientRect();
-			return Math.ceil(vertical ? rect.height : rect.width);
+		const available = isVertical ? extent || Number.POSITIVE_INFINITY : list.clientWidth - inset;
+		const sizeOf = (element) => {
+			const rect = element.getBoundingClientRect();
+			return Math.ceil(isVertical ? rect.height : rect.width);
 		};
 		const sizes = rendered.map(sizeOf);
 		if (sizes.reduce((sum, size) => sum + size, 0) <= available) {
@@ -50,117 +148,100 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 		const triggerSize = sizeOf(trigger);
 		let used = 0;
 		let count = 0;
-		for (const [i, size] of sizes.entries()) {
+		for (const [index, size] of sizes.entries()) {
 			used += size;
 			if (used + triggerSize > available) break;
-			count = i + 1;
+			count = index + 1;
 		}
 		setFitCount(Math.max(1, count));
 	}, [
-		inset,
-		vertical,
-		verticalExtent
+		isVertical,
+		extent,
+		inset
 	]);
-	useLayoutEffect(() => {
+	useIsomorphicLayoutEffect(() => {
 		recompute();
-	}, [
-		recompute,
-		items,
-		maxItems
-	]);
-	useLayoutEffect(() => {
-		const row = rowRef.current;
-		if (!row) return;
+	}, [recompute, items]);
+	useIsomorphicLayoutEffect(() => {
+		const list = listRef.current;
+		if (!list || typeof ResizeObserver === "undefined") return;
 		const observer = new ResizeObserver(() => recompute());
-		observer.observe(row);
+		observer.observe(list);
 		return () => observer.disconnect();
 	}, [recompute]);
 	if (items.length === 0) return null;
-	const isInteractive = Boolean(onItemEnter);
-	const activeKey = hoveredKey;
-	const renderItem = (item, verticalPadding) => {
-		const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
-		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Circle, {
-			size: 8,
-			hex: item.color
-		}), /* @__PURE__ */ jsx(Text, {
-			size: TextSize.BODY_SM,
-			children: item.label
-		})] });
-		if (!isInteractive) return /* @__PURE__ */ jsx(ChartLegendItemStatic, {
-			$vertical: verticalPadding,
-			"data-state": state,
-			children: content
-		}, item.key);
-		return /* @__PURE__ */ jsx(ChartLegendItemButton, {
-			type: "button",
-			$vertical: verticalPadding,
-			"data-state": state,
-			onMouseEnter: () => onItemEnter?.(item.key),
-			onMouseLeave: () => onItemLeave?.(),
-			onFocus: () => onItemEnter?.(item.key),
-			onBlur: () => onItemLeave?.(),
-			children: content
-		}, item.key);
+	const stateOf = (key) => hoveredKey === null || key === hoveredKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+	const inline = items.slice(0, fitCount ?? items.length);
+	const overflow = items.slice(inline.length);
+	const isOverflowEngaged = hoveredKey !== null && overflow.some((item) => item.key === hoveredKey);
+	const triggerState = hoveredKey === null || isOverflowEngaged ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+	const variables = {
+		"--gx-chart-legend-inset": `${inset}px`,
+		...isVertical && extent > 0 && { "--gx-chart-legend-extent": `${extent}px` }
 	};
-	const capFromProp = maxItems === void 0 ? items.length : Math.max(1, maxItems);
-	const capFromFit = fitCount === null ? items.length : fitCount;
-	const inlineItems = items.slice(0, Math.min(capFromProp, capFromFit));
-	const overflowItems = items.slice(inlineItems.length);
-	/**
-	* The trigger holds full strength while a *collapsed* series is engaged — the
-	* one visual cue that the isolated series lives behind it — and recedes with
-	* the other entries when a visible one is.
-	*/
-	const isOverflowEngaged = activeKey !== null && overflowItems.some((item) => item.key === activeKey);
-	const triggerState = activeKey === null || isOverflowEngaged ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
-	return /* @__PURE__ */ jsxs(ChartLegendRow, {
-		ref: rowRef,
-		$inset: inset,
-		$vertical: vertical,
-		$extent: verticalExtent,
-		children: [
-			/* @__PURE__ */ jsx(ChartLegendMeasureClip, { children: /* @__PURE__ */ jsxs(ChartLegendMeasure, {
-				ref: measureRef,
-				$vertical: vertical,
-				"aria-hidden": "true",
-				children: [items.map((item) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, {
-					$vertical: vertical,
-					children: [/* @__PURE__ */ jsx(Circle, {
-						size: 8,
-						hex: item.color
-					}), /* @__PURE__ */ jsx(Text, {
-						size: TextSize.BODY_SM,
-						children: item.label
-					})]
-				}, item.key)), /* @__PURE__ */ jsx(ChartLegendItemStatic, {
-					$vertical: vertical,
-					children: /* @__PURE__ */ jsx(Text, {
-						size: TextSize.BODY_SM,
-						variant: TextVariant.SECONDARY,
-						children: `+${items.length - 1} more`
-					})
-				})]
-			}) }),
-			inlineItems.map((item) => renderItem(item, vertical)),
-			overflowItems.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
-				isInteractive: true,
-				position: vertical ? TooltipPosition.RIGHT : TooltipPosition.TOP,
-				variant: TooltipVariant.TERTIARY,
-				body: /* @__PURE__ */ jsx(ChartLegendOverflowList, { children: overflowItems.map((item) => renderItem(item, true)) }),
-				children: /* @__PURE__ */ jsx(ChartLegendItemButton, {
+	return /* @__PURE__ */ jsxs(Root, { children: [/* @__PURE__ */ jsx(MeasureClip, {
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsxs(Measure, {
+			ref: measureRef,
+			className: MEASURE_PLACEMENT_TO_CSS_MAP[placement],
+			children: [items.map((item) => /* @__PURE__ */ jsx(Entry, {
+				as: "div",
+				item,
+				swatch,
+				isVertical,
+				state: ChartMarkState.ACTIVE
+			}, item.key)), /* @__PURE__ */ jsx(Flex, {
+				as: "div",
+				padding: isVertical ? [4, 0] : [
+					0,
+					16,
+					0,
+					0
+				],
+				children: /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					variant: TextVariant.SECONDARY,
+					children: `+${items.length - 1} more`
+				})
+			})]
+		})
+	}), /* @__PURE__ */ jsxs(List, {
+		ref: listRef,
+		className: CHART_LEGEND_PLACEMENT_TO_LIST_CSS_MAP[placement],
+		style: variables,
+		children: [inline.map((item) => /* @__PURE__ */ jsx(Entry, {
+			item,
+			swatch,
+			isVertical,
+			state: stateOf(item.key),
+			onEnter: () => onItemEnter(item.key),
+			onLeave: onItemLeave
+		}, item.key)), overflow.length > 0 && /* @__PURE__ */ jsx(Flex, {
+			as: "li",
+			alignItems: AlignItems.CENTER,
+			className: cx(ENTRY_CSS, CHART_MARK_STATE_TO_CSS_MAP[triggerState]),
+			children: /* @__PURE__ */ jsx(Tooltip, {
+				placement: isVertical ? Placement.RIGHT : Placement.TOP,
+				body: /* @__PURE__ */ jsx(OverflowList, { children: overflow.map((item) => /* @__PURE__ */ jsx(Entry, {
+					item,
+					swatch,
+					isVertical: true,
+					state: stateOf(item.key),
+					onEnter: () => onItemEnter(item.key),
+					onLeave: onItemLeave
+				}, item.key)) }),
+				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
-					$vertical: vertical,
-					"data-state": triggerState,
+					className: TRIGGER_CSS,
 					children: /* @__PURE__ */ jsx(Text, {
 						size: TextSize.BODY_SM,
 						variant: TextVariant.SECONDARY,
-						children: `+${overflowItems.length} more`
+						children: `+${overflow.length} more`
 					})
 				})
 			})
-		]
-	});
-};
+		})]
+	})] });
+}
 //#endregion
-export { ChartLegend as default };
+export { ChartLegend, ChartLegendSwatch };

package/dist/charts/ChartMarkTargets.d.ts

@@ -1,30 +1,14 @@
-import type { ChartMarkTarget } from "./types";
-import type { ChartInteraction } from "./useChartInteraction";
-/**
- * The mark hit layer: one transparent target per rendered mark, above the
- * category targets.
- *
- * Exists so a click can name a single segment — the red block of the 00:00 bar
- * — where the category layer beneath can only name the column. Rendered by the
- * charts that have marks worth distinguishing: BarChart does, LineChart has no
- * segments to hit, and PieChart's category targets already *are* its arcs.
- *
- * **Hover is not refined here.** Each target reports its own category on enter,
- * exactly as the band underneath would, so the tooltip reads the same index
- * whichever layer the pointer is over and holds still while crossing a stack.
- * The banded hover is deliberate — it makes a two-pixel segment as easy to
- * hover as a two-hundred-pixel one — and this layer only adds a finer *click*.
- *
- * Anything the marks do not cover falls through to the category target: the
- * gutters, the plot above a short bar, and the hairline gaps between stack
- * segments. That is the documented fallback, and it is why a segment too small
- * to hit still selects something sensible.
- */
-interface ChartMarkTargetsProps {
+import { type ChartMarkTarget } from "./types.js";
+/** @internal Props of `ChartMarkTargets`. */
+export interface ChartMarkTargetsProps {
+    /** One target per mark. */
     targets: ChartMarkTarget[];
-    interaction: ChartInteraction;
-    /** Supplying this makes the marks clickable, cursor included. */
-    onSelect?: (markIndex: number) => void;
+    /** Pointer entered a mark: engages its category. */
+    onEnter: (categoryIndex: number) => void;
+    /** Pointer left the target layers (moving between targets is not leaving). */
+    onLeave: () => void;
+    /** Click on a mark, by its index in `targets`. */
+    onSelect: (markIndex: number) => void;
 }
-declare const ChartMarkTargets: ({ targets, interaction, onSelect }: ChartMarkTargetsProps) => import("react").JSX.Element;
-export default ChartMarkTargets;
+/** @internal The mark hit layer. */
+export declare function ChartMarkTargets({ targets, onEnter, onLeave, onSelect }: ChartMarkTargetsProps): import("react").JSX.Element;

package/dist/charts/ChartMarkTargets.js

@@ -1,24 +1,37 @@
 import { ChartTargetShape } from "./types.js";
-import { ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
-import { match } from "ts-pattern";
+import { CHART_HIT_TARGET_CLICKABLE_CSS, CHART_HIT_TARGET_CSS, leaveUnlessTarget } from "./ChartPrimitives.js";
 import { Fragment, jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/charts/ChartMarkTargets.tsx
-var ChartMarkTargets = ({ targets, interaction, onSelect }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
-	const shared = {
-		onMouseEnter: () => interaction.onCategoryEnter(target.categoryIndex),
-		onClick: onSelect === void 0 ? void 0 : () => onSelect(index),
-		"data-clickable": onSelect === void 0 ? void 0 : "true"
-	};
-	return match(target).with({ shape: ChartTargetShape.RECT }, (rect) => /* @__PURE__ */ jsx(ChartHitTarget, {
-		x: rect.x,
-		y: rect.y,
-		width: rect.width,
-		height: rect.height,
-		...shared
-	}, rect.key)).with({ shape: ChartTargetShape.PATH }, (path) => /* @__PURE__ */ jsx(ChartHitTargetPath, {
-		d: path.d,
-		...shared
-	}, path.key)).exhaustive();
-}) });
+/**
+* @internal The mark hit layer: one transparent target per rendered mark, above the category
+* targets, so a click can name one segment where the band beneath names only its column. Hover is
+* not refined: each target reports its own category on enter, exactly as the band would. Anything
+* the marks do not cover falls through to the category target. Rendered only when the chart has
+* a click handler (BarChart); LineChart has no per-category segment to hit.
+*/
+/** @internal The mark hit layer. */
+function ChartMarkTargets({ targets, onEnter, onLeave, onSelect }) {
+	const className = cx(CHART_HIT_TARGET_CSS, CHART_HIT_TARGET_CLICKABLE_CSS);
+	return /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
+		const handlers = {
+			onMouseEnter: () => onEnter(target.categoryIndex),
+			onMouseLeave: (event) => leaveUnlessTarget(event, onLeave),
+			onClick: () => onSelect(index)
+		};
+		return target.shape === ChartTargetShape.RECT ? /* @__PURE__ */ jsx("rect", {
+			x: target.x,
+			y: target.y,
+			width: Math.max(0, target.width),
+			height: Math.max(0, target.height),
+			className,
+			...handlers
+		}, target.key) : /* @__PURE__ */ jsx("path", {
+			d: target.d,
+			className,
+			...handlers
+		}, target.key);
+	}) });
+}
 //#endregion
-export { ChartMarkTargets as default };
+export { ChartMarkTargets };