@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/charts/ChartLegend.d.ts

@@ -1,51 +1,40 @@
-import type { ChartLegendItem } from "./types";
-interface ChartLegendProps {
+import { type ReactNode } from "react";
+import { type ChartLegendItem, ChartLegendPlacement, ChartMarkState } from "./types.js";
+/** @internal Swatch shape: a dot for line series, a square for filled series. */
+export declare enum ChartLegendSwatch {
+    /** `Circle SMALL`: line series. */
+    CIRCLE = "CIRCLE",
+    /** `Square SMALL`: area, bar, arc and heatmap series. */
+    SQUARE = "SQUARE"
+}
+/** @internal Props of `ChartLegend`. */
+export interface ChartLegendProps {
+    /** Entries in series order. */
     items: ChartLegendItem[];
-    /** Left padding aligning the legend with the plot, not the axis gutter. */
+    /** Line (BOTTOM) or column (RIGHT). */
+    placement: ChartLegendPlacement;
+    /** Swatch shape. */
+    swatch: ChartLegendSwatch;
+    /** BOTTOM: left padding that aligns the legend with the plot. */
     inset: number;
-    /** Series key currently hovered anywhere in the chart. */
-    hoveredKey?: string | null;
-    /** Stack entries in a column — the side-placed layout. */
-    vertical?: boolean;
-    /**
-     * Plot box height in px — the vertical legend's fit extent. Height needs to
-     * arrive as a number because, unlike width, a percentage of the root's
-     * auto height is indefinite and computes to nothing. Absent (or 0, the
-     * unmeasured plot) there is no height constraint and every entry renders.
-     */
-    verticalExtent?: number;
-    /**
-     * Stricter cap on inline entries, on top of the automatic fit. The legend
-     * already collapses whatever won't fit inside the plot's extent — width for
-     * the horizontal layout, height for the side-placed one — behind the
-     * "+N more" trigger; this only lowers that number further.
-     */
-    maxItems?: number;
-    /**
-     * Supplying these makes the legend interactive. Omit them and it renders as
-     * inert text, with no button semantics for a screen reader to announce.
-     */
-    onItemEnter?: (key: string) => void;
-    onItemLeave?: () => void;
+    /** RIGHT: the plot height the column fits into (0 = unconstrained). */
+    extent?: number;
+    /** RIGHT: the column is `extent` tall with its entries centered; off, it hugs the entries (a Reset follows them). @default true */
+    isFixedExtent?: boolean;
+    /** An entry's emphasis: the hovered entry, else whether the selection covers its series. */
+    getEntryState: (key: string) => ChartMarkState;
+    /** The entry's series is pinned on its own: its toggle reads pressed. */
+    isEntryPinned?: (key: string) => boolean;
+    /** Filterable charts: keep a slot after the entries for the filter chip. @default false */
+    hasFilterSlot?: boolean;
+    /** The filter chip, or `null` while nothing is pinned (the slot keeps its space). */
+    filter?: ReactNode;
+    /** Click on an entry (filterable charts); supplying it makes each inline entry a toggle button. */
+    onItemClick?: ((key: string, isAdditive: boolean) => void) | undefined;
+    /** Pointer entered an entry. */
+    onItemEnter: (key: string) => void;
+    /** Pointer left an entry. */
+    onItemLeave: () => void;
 }
-/**
- * Legend for the chart components.
- *
- * 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.
- */
-declare const ChartLegend: ({ items, inset, hoveredKey, vertical, verticalExtent, maxItems, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
-export default ChartLegend;
+/** @internal The chart legend. */
+export declare function ChartLegend({ items, placement, swatch, inset, extent, isFixedExtent, hasFilterSlot, filter, getEntryState, isEntryPinned, onItemClick, onItemEnter, onItemLeave, }: ChartLegendProps): ReactNode;

package/dist/charts/ChartLegend.js

@@ -1,46 +1,171 @@
+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 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 "./constants.js";
+import { isAdditiveEvent } from "./chartSelection.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 { Fragment as Fragment$1, 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. Hovering one previews its series (a pointer enhancement; keyboard users
+* hear every series in the announcement). On a filterable chart each entry is also a toggle button
+* (`aria-pressed`): a click pins its series, ⌘ / Ctrl / Shift-click adds or removes it. Entries
+* collapsed behind "+N more" stay hover-only (a tooltip holds no controls). A filterable chart's
+* legend ends in a slot for its filter chip, right after the last entry (under the column when
+* RIGHT): the slot always keeps its height, and a bottom legend always keeps room for the chip's
+* width, so pinning never moves an entry. 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.
 */
-var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, verticalExtent, maxItems, onItemEnter, onItemLeave }) => {
-	const rowRef = useRef(null);
+/** @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 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"
+};
+/** The filter chips' slot: one or two chips, truncating at its cap, never taller than the row it sets. */
+var FilterSlot = /*#__PURE__*/ styled("li")({
+	name: "FilterSlot",
+	class: "gx-ChartLegend-FilterSlot-fsomlsk",
+	propsAsIs: false
+});
+/** BOTTOM: a 20px row the chip fits; RIGHT: the chip under the column, 8px below the last entry. */
+var FILTER_SLOT_PLACEMENT_TO_CSS_MAP = {
+	[ChartLegendPlacement.BOTTOM]: "gx-ChartLegend-ChartLegendPlacement_BOTTOM-cdc52xq",
+	[ChartLegendPlacement.RIGHT]: "gx-ChartLegend-ChartLegendPlacement_RIGHT-cme95dp"
+};
+/** An entry never shrinks below its content; the fit decides what shows. */
+var ENTRY_CSS = "gx-ChartLegend-ENTRY_CSS-e1lt2566";
+/** A filterable entry's toggle: the swatch and label as one button, ring on keyboard focus. */
+var ENTRY_BUTTON_CSS = "gx-ChartLegend-ENTRY_BUTTON_CSS-e1btzd6s";
+/** The "+N more" trigger: a real button, Tab-reachable. */
+var TRIGGER_CSS = "gx-ChartLegend-TRIGGER_CSS-t1hkz6fn";
+/** The hidden entries, listed in the trigger's tooltip. */
+var OverflowList = /*#__PURE__*/ styled("ul")({
+	name: "OverflowList",
+	class: "gx-ChartLegend-OverflowList-o1wv3pdp",
+	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", isPinned = false, onEnter, onLeave, onClick }) {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Swatch, {
+		item,
+		swatch
+	}), /* @__PURE__ */ jsx(Text, {
+		size: TextSize.BODY_SM,
+		variant: isPinned ? TextVariant.PRIMARY : TextVariant.SECONDARY,
+		lineClamp: 1,
+		children: item.label
+	})] });
+	return /* @__PURE__ */ jsx(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: onClick ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-pressed": isPinned,
+			className: ENTRY_BUTTON_CSS,
+			onClick: (event) => onClick(isAdditiveEvent(event)),
+			children: content
+		}) : content
+	});
+}
+/** @internal The chart legend. */
+function ChartLegend({ items, placement, swatch, inset, extent = 0, isFixedExtent = true, hasFilterSlot = false, filter = null, getEntryState, isEntryPinned, onItemClick, 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 - (hasFilterSlot ? 240 : 0);
+		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 +175,110 @@ 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));
 	}, [
+		isVertical,
+		extent,
 		inset,
-		vertical,
-		verticalExtent
+		hasFilterSlot
 	]);
-	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 inline = items.slice(0, fitCount ?? items.length);
+	const overflow = items.slice(inline.length);
+	const triggerState = overflow.some((item) => getEntryState(item.key) === ChartMarkState.ACTIVE) ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+	const variables = {
+		"--gx-chart-legend-inset": `${inset}px`,
+		...isVertical && extent > 0 && isFixedExtent && { "--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,
+	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: [
-			/* @__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, {
-					type: "button",
-					$vertical: vertical,
-					"data-state": triggerState,
-					children: /* @__PURE__ */ jsx(Text, {
-						size: TextSize.BODY_SM,
-						variant: TextVariant.SECONDARY,
-						children: `+${overflowItems.length} more`
+			inline.map((item) => /* @__PURE__ */ jsx(Entry, {
+				item,
+				swatch,
+				isVertical,
+				state: getEntryState(item.key),
+				isPinned: isEntryPinned?.(item.key) ?? false,
+				onEnter: () => onItemEnter(item.key),
+				onLeave: onItemLeave,
+				onClick: onItemClick && ((isAdditive) => onItemClick(item.key, isAdditive))
+			}, 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: getEntryState(item.key),
+						isPinned: isEntryPinned?.(item.key) ?? false,
+						onEnter: () => onItemEnter(item.key),
+						onLeave: onItemLeave
+					}, item.key)) }),
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: TRIGGER_CSS,
+						children: /* @__PURE__ */ jsx(Text, {
+							size: TextSize.BODY_SM,
+							variant: TextVariant.SECONDARY,
+							children: `+${overflow.length} more`
+						})
 					})
 				})
+			}),
+			hasFilterSlot && /* @__PURE__ */ jsx(FilterSlot, {
+				className: FILTER_SLOT_PLACEMENT_TO_CSS_MAP[placement],
+				"aria-hidden": filter === null || void 0,
+				children: filter
 			})
 		]
-	});
-};
+	})] });
+}
 //#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` (additive with ⌘ / Ctrl / Shift). */
+    onSelect: (markIndex: number, isAdditive: boolean) => 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,38 @@
 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 { isAdditiveEvent } from "./chartSelection.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: (event) => onSelect(index, isAdditiveEvent(event))
+		};
+		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 };