@galaxy-io/dls 2.0.0 → 2.0.1

package/dist/charts/ChartLegend.js

@@ -5,13 +5,15 @@ 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 { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
 //#region src/charts/ChartLegend.tsx
 /**
@@ -20,8 +22,13 @@ import { cx } from "@linaria/core";
 * 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.
 *
-* 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
+* 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.
 */
@@ -75,14 +82,27 @@ 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-esomlsk";
+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-tdc52xq";
+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-ome95dp",
+	class: "gx-ChartLegend-OverflowList-o1wv3pdp",
 	propsAsIs: false
 });
 function Swatch({ item, swatch }) {
@@ -97,8 +117,17 @@ function Swatch({ item, swatch }) {
 		})
 	});
 }
-function Entry({ item, swatch, isVertical, state, as = "li", onEnter, onLeave }) {
-	return /* @__PURE__ */ jsxs(Flex, {
+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,
@@ -111,19 +140,17 @@ function Entry({ item, swatch, isVertical, state, as = "li", onEnter, onLeave })
 		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
-		})]
+		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, hoveredKey, onItemEnter, onItemLeave }) {
+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);
 	const [fitCount, setFitCount] = useState(null);
@@ -135,7 +162,7 @@ function ChartLegend({ items, placement, swatch, inset, extent = 0, hoveredKey,
 		const rendered = Array.from(measure.children);
 		const trigger = rendered.pop();
 		if (!trigger) return;
-		const available = isVertical ? extent || Number.POSITIVE_INFINITY : list.clientWidth - inset;
+		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);
@@ -157,7 +184,8 @@ function ChartLegend({ items, placement, swatch, inset, extent = 0, hoveredKey,
 	}, [
 		isVertical,
 		extent,
-		inset
+		inset,
+		hasFilterSlot
 	]);
 	useIsomorphicLayoutEffect(() => {
 		recompute();
@@ -170,14 +198,12 @@ function ChartLegend({ items, placement, swatch, inset, extent = 0, hoveredKey,
 		return () => observer.disconnect();
 	}, [recompute]);
 	if (items.length === 0) return null;
-	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 triggerState = overflow.some((item) => getEntryState(item.key) === ChartMarkState.ACTIVE) ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
 	const variables = {
 		"--gx-chart-legend-inset": `${inset}px`,
-		...isVertical && extent > 0 && { "--gx-chart-legend-extent": `${extent}px` }
+		...isVertical && extent > 0 && isFixedExtent && { "--gx-chart-legend-extent": `${extent}px` }
 	};
 	return /* @__PURE__ */ jsxs(Root, { children: [/* @__PURE__ */ jsx(MeasureClip, {
 		"aria-hidden": "true",
@@ -209,38 +235,49 @@ function ChartLegend({ items, placement, swatch, inset, extent = 0, hoveredKey,
 		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",
-					className: TRIGGER_CSS,
-					children: /* @__PURE__ */ jsx(Text, {
-						size: TextSize.BODY_SM,
-						variant: TextVariant.SECONDARY,
-						children: `+${overflow.length} more`
+		children: [
+			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

package/dist/charts/ChartMarkTargets.d.ts

@@ -7,8 +7,8 @@ export interface ChartMarkTargetsProps {
     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;
+    /** Click on a mark, by its index in `targets` (additive with ⌘ / Ctrl / Shift). */
+    onSelect: (markIndex: number, isAdditive: boolean) => void;
 }
 /** @internal The mark hit layer. */
 export declare function ChartMarkTargets({ targets, onEnter, onLeave, onSelect }: ChartMarkTargetsProps): import("react").JSX.Element;

package/dist/charts/ChartMarkTargets.js

@@ -1,5 +1,6 @@
 import { ChartTargetShape } from "./types.js";
 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
@@ -17,7 +18,7 @@ function ChartMarkTargets({ targets, onEnter, onLeave, onSelect }) {
 		const handlers = {
 			onMouseEnter: () => onEnter(target.categoryIndex),
 			onMouseLeave: (event) => leaveUnlessTarget(event, onLeave),
-			onClick: () => onSelect(index)
+			onClick: (event) => onSelect(index, isAdditiveEvent(event))
 		};
 		return target.shape === ChartTargetShape.RECT ? /* @__PURE__ */ jsx("rect", {
 			x: target.x,

package/dist/charts/Heatmap.js

@@ -99,7 +99,7 @@ function HeatmapLegend({ ramp, min, max, hasEmpty, inset }) {
 }
 /** A grid of cells colored by value along one hue's token ramp. */
 var Heatmap = forwardRef(function Heatmap(props, ref) {
-	const { cells, columns: explicitColumns, rows: explicitRows, color = ChartPalette.PURPLE, labelFormatter, valueDomain, valueFormatter, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, ariaLabel, id, className, style, ...rest } = props;
+	const { cells, columns: explicitColumns, rows: explicitRows, color = ChartPalette.PURPLE, labelFormatter, valueDomain, valueFormatter, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
 	const plotRef = useRef(null);
 	const { formatValue, formatLabel } = useChartFormatters(valueFormatter, labelFormatter);
 	const { columns, rows } = useMemo(() => getHeatmapLabels(cells, explicitColumns, explicitRows), [
@@ -151,8 +151,11 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 		categoryKeys: cellColumnKeys,
 		enableGroupSync: false,
 		selection,
+		isFilterable,
+		defaultSelection,
+		onSelectionChange,
 		categoryMuteState: ChartMarkState.ACTIVE,
-		isDisabled: !(hasTooltip || onSelect) || isLoading || isEmpty,
+		isDisabled: !(hasTooltip || onSelect || isFilterable) || isLoading || isEmpty,
 		isLoading,
 		grid
 	});
@@ -206,16 +209,25 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 		plotWidth,
 		plotHeight
 	]);
-	const handleSelect = useCallback((index) => {
+	const { toggleSelection } = interaction;
+	const handleSelect = useCallback((index, isAdditive = false) => {
 		const cell = geometry.cells[index];
-		if (!cell || !onSelect) return;
-		onSelect({
+		if (!cell) return;
+		onSelect?.({
 			categoryIndex: cell.columnIndex,
 			categoryKey: cell.column,
 			seriesKey: cell.row,
 			...cell.value !== null && { value: cell.value }
 		});
-	}, [geometry.cells, onSelect]);
+		toggleSelection({
+			categoryKey: cell.column,
+			seriesKey: cell.row
+		}, isAdditive);
+	}, [
+		geometry.cells,
+		onSelect,
+		toggleSelection
+	]);
 	const passedAriaLabel = typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0;
 	const resolvedAriaLabel = ariaLabel ?? passedAriaLabel ?? `Heatmap, ${columns.length} columns by ${rows.length} rows`;
 	const aspectRatio = clamp(columns.length / Math.max(1, rows.length), 1, 4);
@@ -256,7 +268,7 @@ var Heatmap = forwardRef(function Heatmap(props, ref) {
 		buildCategoryTooltip,
 		renderTooltip,
 		categoryTargets,
-		onCategorySelect: onSelect && handleSelect,
+		onCategorySelect: onSelect || isFilterable ? handleSelect : void 0,
 		anchorHalfWidth: (geometry.cells[0]?.width ?? 0) / 2,
 		isEmpty,
 		isLoading,

package/dist/charts/LineChart.js

@@ -20,7 +20,8 @@ import { cx } from "@linaria/core";
 * from `ChartPalette`; a `null` reading breaks the line instead of dropping to zero. Hover or
 * keyboard focus works per category column: a cursor rule marks the column, every line shows its
 * dot there, and the tooltip lists every line's value. Clicks and Enter report the category
-* through `onSelect`. It joins `ChartGroupProvider` sync.
+* through `onSelect`; with `isFilterable` they also pin it, and legend clicks pin a line. It joins
+* `ChartGroupProvider` sync.
 *
 * Filled series are `AreaChart`; inline trends without axes are `Sparkline`. The chart fills its
 * parent (2:1 when the parent has no definite height): size it with a `Box`, `Grid` track or
@@ -40,7 +41,7 @@ var DEFAULT_PLACEHOLDER = "No data available";
 * components, no public mode prop (the `MenuRoot` precedent).
 */
 function LineChartRootInner(props, ref) {
-	const { series, lines, categories, curve = ChartCurve.SMOOTH, fill, isStacked, kind, valueFormatter, labelFormatter, valueDomain, axisLabels, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, ariaLabel, id, className, style, ...rest } = props;
+	const { series, lines, categories, curve = ChartCurve.SMOOTH, fill, isStacked, kind, valueFormatter, labelFormatter, valueDomain, axisLabels, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
 	const plotRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
@@ -93,7 +94,10 @@ function LineChartRootInner(props, ref) {
 		seriesKeys,
 		categoryKeys: geometry.categories,
 		selection,
-		isDisabled: !(hasTooltip || onSelect) || isLoading || isEmpty,
+		isFilterable,
+		defaultSelection,
+		onSelectionChange,
+		isDisabled: !(hasTooltip || onSelect || isFilterable) || isLoading || isEmpty,
 		isLoading
 	});
 	const activeColumn = interaction.activeIndex === null ? void 0 : geometry.columns[interaction.activeIndex];
@@ -148,14 +152,20 @@ function LineChartRootInner(props, ref) {
 		width: column.bandWidth,
 		height: plotHeight
 	})), [geometry.columns, plotHeight]);
-	const handleCategorySelect = useCallback((index) => {
+	const { toggleSelection } = interaction;
+	const handleCategorySelect = useCallback((index, isAdditive = false) => {
 		const categoryKey = geometry.categories[index];
-		if (categoryKey === void 0 || !onSelect) return;
-		onSelect({
+		if (categoryKey === void 0) return;
+		onSelect?.({
 			categoryIndex: index,
 			categoryKey
 		});
-	}, [geometry.categories, onSelect]);
+		toggleSelection({ categoryKey }, isAdditive);
+	}, [
+		geometry.categories,
+		onSelect,
+		toggleSelection
+	]);
 	const selectedColumns = geometry.columns.filter((column) => interaction.selectedCategoryIndices.has(column.categoryIndex));
 	const point = (item, keyPrefix = "") => /* @__PURE__ */ jsx("circle", {
 		cx: item.x,
@@ -200,12 +210,13 @@ function LineChartRootInner(props, ref) {
 		buildCategoryTooltip,
 		renderTooltip,
 		categoryTargets,
-		onCategorySelect: onSelect && handleCategorySelect,
+		onCategorySelect: onSelect || isFilterable ? handleCategorySelect : void 0,
 		anchorHalfWidth: geometry.step / 2,
 		isEmpty,
 		isLoading,
 		placeholder,
 		hasLegend,
+		formatCategoryKey: formatLabel,
 		legendItems,
 		legendPlacement: ChartLegendPlacement.BOTTOM,
 		legendSwatch: kind === ChartKind.AREA ? ChartLegendSwatch.SQUARE : ChartLegendSwatch.CIRCLE,

package/dist/charts/PieChart.js

@@ -47,7 +47,7 @@ var CenterBox = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 function PieChartInner(props, ref) {
-	const { series, slices, isSolid = false, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel = DEFAULT_AGGREGATED_LABEL, children, valueFormatter, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, ariaLabel, id, className, style, ...rest } = props;
+	const { series, slices, isSolid = false, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel = DEFAULT_AGGREGATED_LABEL, children, valueFormatter, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, isFilterable = false, defaultSelection, onSelectionChange, ariaLabel, id, className, style, ...rest } = props;
 	const plotRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const dimensions = useChartDimensions(plotRef, PLOT_INSETS);
@@ -93,7 +93,10 @@ function PieChartInner(props, ref) {
 		categoryKeys: arcKeys,
 		enableGroupSync: false,
 		selection,
-		isDisabled: !(hasTooltip || onSelect) || isLoading || isEmpty,
+		isFilterable,
+		defaultSelection,
+		onSelectionChange,
+		isDisabled: !(hasTooltip || onSelect || isFilterable) || isLoading || isEmpty,
 		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {
@@ -123,16 +126,22 @@ function PieChartInner(props, ref) {
 		shape: ChartTargetShape.PATH,
 		d: item.path
 	})), [geometry.arcs]);
-	const handleSelect = useCallback((index) => {
+	const { toggleSelection } = interaction;
+	const handleSelect = useCallback((index, isAdditive = false) => {
 		const item = resolvedSlices[index];
-		if (!item || !onSelect) return;
-		onSelect({
+		if (!item) return;
+		onSelect?.({
 			categoryIndex: index,
 			categoryKey: item.id,
 			seriesKey: item.id,
 			value: item.value
 		});
-	}, [resolvedSlices, onSelect]);
+		toggleSelection({ seriesKey: item.id }, isAdditive);
+	}, [
+		resolvedSlices,
+		onSelect,
+		toggleSelection
+	]);
 	const passedAriaLabel = typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0;
 	const resolvedAriaLabel = ariaLabel ?? passedAriaLabel ?? `${isSolid ? "Pie" : "Donut"} chart, ${resolvedSlices.length} slices`;
 	const hasCenter = !isSolid && children !== void 0 && children !== null && !isEmpty;
@@ -172,7 +181,7 @@ function PieChartInner(props, ref) {
 		renderTooltip,
 		categoryTargets,
 		targetsTransform: centerTransform,
-		onCategorySelect: onSelect && handleSelect,
+		onCategorySelect: onSelect || isFilterable ? handleSelect : void 0,
 		placeAwayFromX: geometry.centerX,
 		verticalAlign: ChartTooltipVerticalAlign.CENTERED,
 		isEmpty,

package/dist/charts/chartSelection.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @internal The filter model behind `isFilterable`: a selection is a list of descriptors
+ * (`ChartSelection`), and a click toggles one. A plain click pins the descriptor alone, or unpins it
+ * when it is already the whole filter; an additive click (⌘ / Ctrl / Shift) adds or removes it.
+ */
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from "react";
+import type { ChartSelection, ChartSelectionInput } from "./types.js";
+/** @internal The selection as a list; `null` and `undefined` are empty. */
+export declare function toSelectionList<TKey extends string>(input: ChartSelectionInput<TKey> | undefined): ChartSelection<TKey>[];
+/** @internal Two descriptors name the same marks: the same fields, the same values. */
+export declare function isSameSelection(a: ChartSelection, b: ChartSelection): boolean;
+/** @internal The filter after one click on `descriptor`. */
+export declare function toggleSelection<TKey extends string>(current: ChartSelection<TKey>[], descriptor: ChartSelection<TKey>, isAdditive: boolean): ChartSelection<TKey>[];
+/** @internal ⌘, Ctrl or Shift held: the click adds to the filter instead of replacing it. */
+export declare function isAdditiveEvent(event: Pick<ReactMouseEvent | ReactKeyboardEvent, "metaKey" | "ctrlKey" | "shiftKey">): boolean;

package/dist/charts/chartSelection.js

@@ -0,0 +1,22 @@
+//#region src/charts/chartSelection.ts
+/** @internal The selection as a list; `null` and `undefined` are empty. */
+function toSelectionList(input) {
+	if (input === void 0 || input === null) return [];
+	return Array.isArray(input) ? input : [input];
+}
+/** @internal Two descriptors name the same marks: the same fields, the same values. */
+function isSameSelection(a, b) {
+	return a.categoryKey === b.categoryKey && a.seriesKey === b.seriesKey;
+}
+/** @internal The filter after one click on `descriptor`. */
+function toggleSelection(current, descriptor, isAdditive) {
+	const isPinned = current.some((item) => isSameSelection(item, descriptor));
+	if (isAdditive) return isPinned ? current.filter((item) => !isSameSelection(item, descriptor)) : [...current, descriptor];
+	return isPinned && current.length === 1 ? [] : [descriptor];
+}
+/** @internal ⌘, Ctrl or Shift held: the click adds to the filter instead of replacing it. */
+function isAdditiveEvent(event) {
+	return event.metaKey || event.ctrlKey || event.shiftKey;
+}
+//#endregion
+export { isAdditiveEvent, isSameSelection, toSelectionList, toggleSelection };

package/dist/charts/constants.d.ts

@@ -97,6 +97,10 @@ export declare const CHART_TOOLTIP_OFFSET: number;
 export declare const CHART_TOOLTIP_MAX_ROWS = 8;
 /** @internal Gap between the plot box and a side-placed legend. */
 export declare const CHART_LEGEND_SIDE_GAP: number;
+/** @internal Height a side legend gives up to its filter chips: the 8px top padding and a 20px `Chip SMALL`. */
+export declare const CHART_LEGEND_FILTER_EXTENT: number;
+/** @internal Widest the filter chips grow (one or two) before their labels truncate; a bottom legend always keeps this much room for them. */
+export declare const CHART_LEGEND_FILTER_MAX_WIDTH = 240;
 /** @internal Height cap of the "+N more" legend list (about eight entries) before it scrolls. */
 export declare const CHART_LEGEND_OVERFLOW_MAX_HEIGHT = 208;
 /** @internal 2:1, the aspect-ratio fallback of cartesian charts and PieChart. */

package/dist/charts/constants.js

@@ -1,4 +1,4 @@
-import { RADIUS, SPACE } from "../theme/tokens/scales.js";
+import { CONTROL_SIZE, RADIUS, SPACE } from "../theme/tokens/scales.js";
 //#region src/charts/constants.ts
 /**
 * @internal Geometry and interaction constants for the chart family.
@@ -107,9 +107,13 @@ var CHART_TOOLTIP_OFFSET = px(SPACE[8]);
 var CHART_TOOLTIP_MAX_ROWS = 8;
 /** @internal Gap between the plot box and a side-placed legend. */
 var CHART_LEGEND_SIDE_GAP = px(SPACE[16]);
+/** @internal Height a side legend gives up to its filter chips: the 8px top padding and a 20px `Chip SMALL`. */
+var CHART_LEGEND_FILTER_EXTENT = px(SPACE[8]) + px(CONTROL_SIZE.xSmall);
+/** @internal Widest the filter chips grow (one or two) before their labels truncate; a bottom legend always keeps this much room for them. */
+var CHART_LEGEND_FILTER_MAX_WIDTH = 240;
 /** @internal Height cap of the "+N more" legend list (about eight entries) before it scrolls. */
 var CHART_LEGEND_OVERFLOW_MAX_HEIGHT = 208;
 /** @internal 2:1, the aspect-ratio fallback of cartesian charts and PieChart. */
 var CHART_DEFAULT_ASPECT_RATIO = 2;
 //#endregion
-export { AREA_FILL_OPACITY, AREA_STACKED_FILL_OPACITY, AUTO_INSET_LEFT_STEP, AXIS_LABEL_GAP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_RATIO, BAR_RADIUS, BAR_RADIUS_NARROW, CAPTION_CHAR_WIDTH_PX, CAPTION_LINE, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CATEGORY_GAP_RATIO, CHART_DEFAULT_ASPECT_RATIO, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_TOOLTIP_MAX_ROWS, CHART_TOOLTIP_OFFSET, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, HEATMAP_CELL_GAP_RATIO, LINE_DASH, LINE_POINT_RADIUS, LINE_STROKE_WIDTH, MAX_AUTO_INSET_LEFT, MAX_BAR_GAP, MAX_CATEGORY_GAP, MAX_HEATMAP_CELL_GAP, MIN_AUTO_INSET_LEFT, MIN_BAR_GAP, MIN_BAR_LENGTH, MIN_CATEGORY_GAP, MIN_CATEGORY_LABEL_GAP, MIN_HEATMAP_CELL_GAP, MIN_VALUE_TICK_SPACING, NARROW_BAR_WIDTH, PIE_SLICE_GAP, PLOT_INSET_BOTTOM, PLOT_INSET_RIGHT, PLOT_INSET_TOP, RADIAL_PLOT_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP };
+export { AREA_FILL_OPACITY, AREA_STACKED_FILL_OPACITY, AUTO_INSET_LEFT_STEP, AXIS_LABEL_GAP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_RATIO, BAR_RADIUS, BAR_RADIUS_NARROW, CAPTION_CHAR_WIDTH_PX, CAPTION_LINE, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CATEGORY_GAP_RATIO, CHART_DEFAULT_ASPECT_RATIO, CHART_LEGEND_FILTER_EXTENT, CHART_LEGEND_FILTER_MAX_WIDTH, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_TOOLTIP_MAX_ROWS, CHART_TOOLTIP_OFFSET, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, HEATMAP_CELL_GAP_RATIO, LINE_DASH, LINE_POINT_RADIUS, LINE_STROKE_WIDTH, MAX_AUTO_INSET_LEFT, MAX_BAR_GAP, MAX_CATEGORY_GAP, MAX_HEATMAP_CELL_GAP, MIN_AUTO_INSET_LEFT, MIN_BAR_GAP, MIN_BAR_LENGTH, MIN_CATEGORY_GAP, MIN_CATEGORY_LABEL_GAP, MIN_HEATMAP_CELL_GAP, MIN_VALUE_TICK_SPACING, NARROW_BAR_WIDTH, PIE_SLICE_GAP, PLOT_INSET_BOTTOM, PLOT_INSET_RIGHT, PLOT_INSET_TOP, RADIAL_PLOT_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP };

package/dist/charts/types.d.ts

@@ -281,8 +281,17 @@ export interface BaseChartProps<TKey extends string> extends AriaAttributes {
     placeholder?: string;
     /** Called when a mark or category is clicked, or Enter / Space is pressed on the active category. Supplying it makes the plot selectable. */
     onSelect?: (event: ChartSelectionEvent<TKey>) => void;
-    /** Which marks read as selected: matching marks hold full strength, the rest recede. Presentational; the chart never writes it. */
+    /**
+     * Click to filter. Clicking a legend entry, a mark or a category pins it (matching marks hold full strength, the rest recede); clicking it again unpins it, clicking another switches to it, and ⌘ / Ctrl / Shift-click adds or removes. While something is pinned, filter chips after the legend name it, one per part; a chip's × drops its part, and Escape on the plot clears the filter.
+     * @default false
+     */
+    isFilterable?: boolean;
+    /** Which marks read as selected: matching marks hold full strength, the rest recede. With `isFilterable`, the controlled filter (pass it with `onSelectionChange`); without, presentational and never written by the chart. */
     selection?: ChartSelectionInput<TKey>;
+    /** Initial filter while uncontrolled, with `isFilterable`. */
+    defaultSelection?: ChartSelectionInput<TKey>;
+    /** With `isFilterable`: called with the new filter when a click, Enter, Escape or the chip's × changes it. An empty array means cleared. */
+    onSelectionChange?: (selection: ChartSelection<TKey>[]) => void;
     /** Accessible name of the chart. @default derived, e.g. Line chart, 12 categories, 3 series */
     ariaLabel?: string;
     /** DOM id on the root `<div>`. */

package/dist/charts/useChartInteraction.d.ts

@@ -1,4 +1,4 @@
-import { ChartMarkState, type ChartSelectionInput } from "./types.js";
+import { ChartMarkState, type ChartSelection, type ChartSelectionInput } from "./types.js";
 /** @internal Inputs of `useChartInteraction`. */
 export interface UseChartInteractionOptions {
     /** Number of categories (slices, cells). A shrinking count clears stale indices. */
@@ -9,8 +9,14 @@ export interface UseChartInteractionOptions {
     categoryKeys?: string[];
     /** Follow and publish to a `ChartGroupProvider`. PieChart and Heatmap pass `false`. @default true */
     enableGroupSync?: boolean;
-    /** The caller's selection. */
+    /** The caller's selection: presentational, or the controlled filter with `isFilterable`. */
     selection?: ChartSelectionInput | undefined;
+    /** Clicks toggle the filter; the filter chips' × and Escape clear it. @default false */
+    isFilterable?: boolean;
+    /** Initial filter while uncontrolled, with `isFilterable`. */
+    defaultSelection?: ChartSelectionInput | undefined;
+    /** Called with the new filter, with `isFilterable`. */
+    onSelectionChange?: ((selection: ChartSelection[]) => void) | undefined;
     /** How off-category marks recede. @default ChartMarkState.MUTED */
     categoryMuteState?: ChartMarkState;
     /** No category interaction (static plot, loading, empty). The legend stays live. */
@@ -39,6 +45,22 @@ export interface ChartInteraction {
     hoveredSeriesKey: string | null;
     /** Categories the selection names outright (persistent cursors). */
     selectedCategoryIndices: ReadonlySet<number>;
+    /** Clicks filter (`isFilterable`). */
+    isFilterable: boolean;
+    /** Something is pinned (or the caller's selection is not empty). */
+    hasSelection: boolean;
+    /** The selection as a list (the pinned filter with `isFilterable`). */
+    selection: readonly ChartSelection[];
+    /** One click on a descriptor: pin, unpin, switch, or (additive) add / remove. No-op unless filterable. */
+    toggleSelection: (descriptor: ChartSelection, isAdditive: boolean) => void;
+    /** Replace the filter (a chip's × dropping one part of a pin). No-op unless filterable. */
+    setSelection: (selection: ChartSelection[]) => void;
+    /** Clear the filter (the chip's ×, Escape). No-op unless filterable. */
+    clearSelection: () => void;
+    /** A legend entry's emphasis: the hovered entry, else whether the selection covers its series. */
+    getSeriesState: (seriesKey: string) => ChartMarkState;
+    /** The series is pinned on its own (`{ seriesKey }` is in the filter): its legend entry reads pressed. */
+    isSeriesPinned: (seriesKey: string) => boolean;
     /** Emphasis of one mark, composed from selection, series and category. */
     getMarkState: (args: ChartMarkStateArgs) => ChartMarkState;
     /** Pointer entered a category's target. */
@@ -63,4 +85,4 @@ export declare function getNextCategoryIndex(current: number, key: string, count
     columns: number;
 }): number | null;
 /** @internal Shared interaction model; see the module comment. */
-export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGroupSync, selection, categoryMuteState, isDisabled, isLoading, grid, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGroupSync, selection, isFilterable, defaultSelection, onSelectionChange, categoryMuteState, isDisabled, isLoading, grid, }: UseChartInteractionOptions): ChartInteraction;