@galaxy-io/dls 2.0.0 → 2.0.1

package/dist/charts/BarChart.js

@@ -49,7 +49,7 @@ function visualOrder(components) {
 	return [...indexed].sort((a, b) => rank(a) - rank(b) || a.index - b.index).map(({ component }) => component);
 }
 function BarChartInner(props, ref) {
-	const { series, groups, normalization = "NONE", minSegmentLength = 0, valueFormatter, labelFormatter, valueDomain, axisLabels, hasLegend = true, hasTooltip = true, renderTooltip, isLoading = false, placeholder = DEFAULT_PLACEHOLDER, onSelect, selection, ariaLabel, id, className, style, ...rest } = props;
+	const { series, groups, normalization = "NONE", minSegmentLength = 0, 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 axisValueFormatter = normalization === "PERCENT" && valueFormatter === void 0 ? PERCENT_AXIS_FORMATTER : valueFormatter;
@@ -107,7 +107,10 @@ function BarChartInner(props, ref) {
 		categoryKeys,
 		categoryMuteState: ChartMarkState.DIMMED,
 		selection,
-		isDisabled: !(hasTooltip || onSelect) || isLoading || isEmpty,
+		isFilterable,
+		defaultSelection,
+		onSelectionChange,
+		isDisabled: !(hasTooltip || onSelect || isFilterable) || isLoading || isEmpty,
 		isLoading
 	});
 	const seriesKeyOf = useCallback((rect) => isStacked ? rect.componentKey : rect.metric, [isStacked]);
@@ -174,29 +177,41 @@ function BarChartInner(props, ref) {
 		width: rect.width,
 		height: rect.height
 	})), [geometry.rects]);
-	const handleCategorySelect = useCallback((index) => {
+	const { toggleSelection } = interaction;
+	const handleCategorySelect = useCallback((index, isAdditive = false) => {
 		const group = groups[index];
-		if (!group || !onSelect) return;
-		onSelect({
+		if (!group) return;
+		onSelect?.({
 			categoryIndex: index,
 			categoryKey: group.label
 		});
-	}, [groups, onSelect]);
-	const handleMarkSelect = useCallback((index) => {
+		toggleSelection({ categoryKey: group.label }, isAdditive);
+	}, [
+		groups,
+		onSelect,
+		toggleSelection
+	]);
+	const handleMarkSelect = useCallback((index, isAdditive = false) => {
 		const rect = geometry.rects[index];
 		const group = groups[rect?.groupIndex ?? -1];
-		if (!rect || !group || !onSelect) return;
-		onSelect({
+		if (!rect || !group) return;
+		const seriesKey = seriesKeyOf(rect);
+		onSelect?.({
 			categoryIndex: rect.groupIndex,
 			categoryKey: group.label,
-			seriesKey: seriesKeyOf(rect),
+			seriesKey,
 			value: rect.value
 		});
+		toggleSelection({
+			categoryKey: group.label,
+			seriesKey
+		}, isAdditive);
 	}, [
 		geometry.rects,
 		groups,
 		onSelect,
-		seriesKeyOf
+		seriesKeyOf,
+		toggleSelection
 	]);
 	const activeBand = interaction.activeIndex === null ? void 0 : geometry.bands[interaction.activeIndex];
 	return /* @__PURE__ */ jsxs(ChartFrame, {
@@ -236,13 +251,14 @@ function BarChartInner(props, ref) {
 		renderTooltip,
 		categoryTargets,
 		markTargets,
-		onCategorySelect: onSelect && handleCategorySelect,
-		onMarkSelect: onSelect && handleMarkSelect,
+		onCategorySelect: onSelect || isFilterable ? handleCategorySelect : void 0,
+		onMarkSelect: onSelect || isFilterable ? handleMarkSelect : void 0,
 		anchorHalfWidth: categoryStep / 2,
 		isEmpty,
 		isLoading,
 		placeholder,
 		hasLegend,
+		formatCategoryKey: formatLabel,
 		legendItems,
 		legendPlacement: ChartLegendPlacement.BOTTOM,
 		legendSwatch: ChartLegendSwatch.SQUARE,

package/dist/charts/ChartCategoryTargets.d.ts

@@ -7,8 +7,8 @@ export interface ChartCategoryTargetsProps {
     onEnter: (categoryIndex: number) => void;
     /** Pointer left the target layers (moving between targets is not leaving). */
     onLeave: () => void;
-    /** Click on a category; supplying it makes the targets clickable. */
-    onSelect?: ((categoryIndex: number) => void) | undefined;
+    /** Click on a category (additive with ⌘ / Ctrl / Shift); supplying it makes the targets clickable. */
+    onSelect?: ((categoryIndex: number, isAdditive: boolean) => void) | undefined;
 }
 /** @internal The category hit layer. */
 export declare function ChartCategoryTargets({ targets, onEnter, onLeave, onSelect, }: ChartCategoryTargetsProps): import("react").JSX.Element;

package/dist/charts/ChartCategoryTargets.js

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

package/dist/charts/ChartFrame.d.ts

@@ -48,10 +48,10 @@ export interface ChartFrameProps {
     markTargets?: ChartMarkTarget[];
     /** Transform applied to both target layers (radial charts: their center). */
     targetsTransform?: string;
-    /** Category chosen by click, Enter or Space. Supplying it makes the plot selectable. */
-    onCategorySelect?: ((categoryIndex: number) => void) | undefined;
-    /** Mark clicked, by index in `markTargets`. */
-    onMarkSelect?: ((markIndex: number) => void) | undefined;
+    /** Category chosen by click, Enter or Space (additive with ⌘ / Ctrl / Shift). Supplying it makes the plot selectable. */
+    onCategorySelect?: ((categoryIndex: number, isAdditive: boolean) => void) | undefined;
+    /** Mark clicked, by index in `markTargets` (additive with ⌘ / Ctrl / Shift). */
+    onMarkSelect?: ((markIndex: number, isAdditive: boolean) => void) | undefined;
     /** Half a category's width (tooltip sits beside it). */
     anchorHalfWidth?: number;
     /** Radial charts: their center x, in plot coordinates. */
@@ -76,10 +76,12 @@ export interface ChartFrameProps {
     tooltipSwatch?: ChartLegendSwatch | undefined;
     /** A chart's own legend in place of the series legend (Heatmap's step legend). */
     legend?: ReactNode;
+    /** Names a raw category key in the filter chip (the chart's `labelFormatter`). @default the key */
+    formatCategoryKey?: ((key: string) => string) | undefined;
     /** Passthrough: `className` on the root. */
     className?: string | undefined;
     /** Passthrough: `style` on the root. */
     style?: CSSProperties | undefined;
 }
 /** @internal The chart shell. */
-export declare function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, legendSwatch, tooltipSwatch, legend, }: ChartFrameProps): import("react").JSX.Element;
+export declare function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, legendSwatch, tooltipSwatch, legend, formatCategoryKey, }: ChartFrameProps): import("react").JSX.Element;

package/dist/charts/ChartFrame.js

@@ -1,7 +1,9 @@
 import Skeleton, { SkeletonVariant } from "../feedback/Skeleton.js";
 import { ChartKind, ChartLegendPlacement } from "./types.js";
-import { CHART_LEGEND_SIDE_GAP } from "./constants.js";
+import { CHART_LEGEND_FILTER_EXTENT, CHART_LEGEND_SIDE_GAP } from "./constants.js";
+import Chip, { ChipSize } from "../chips/Chip.js";
 import EmptyState, { EmptyStateSize } from "../feedback/EmptyState.js";
+import { isAdditiveEvent } from "./chartSelection.js";
 import { ChartCategoryTargets } from "./ChartCategoryTargets.js";
 import { ChartLegend } from "./ChartLegend.js";
 import { ChartMarkTargets } from "./ChartMarkTargets.js";
@@ -11,12 +13,16 @@ import { styled } from "@linaria/react";
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
+import { FunnelSimpleIcon } from "@phosphor-icons/react";
 //#region src/charts/ChartFrame.tsx
 /**
 * @internal The shell every chart renders into: the root (sizing, legend placement, passthrough),
 * the measured plot box (one tab stop when interactive), the SVG and its inset translate, axes,
 * marks, hit targets, the in-chart tooltip, the empty and loading overlays, the live region and
-* the legend. It knows nothing about scales or geometry: axes and marks arrive as nodes, and every
+* the legend. On a filterable chart dismissible filter chips follow the legend entries while
+* something is pinned. One pin shows a chip per part ("06:00" and "Failed" for one segment): a
+* chip's × drops that part and keeps the other. Several pins collapse into one "3 filters" chip
+* (the list in its tooltip) whose × clears them all. It knows nothing about scales or geometry: axes and marks arrive as nodes, and every
 * coordinate handed to it is in plot space (the frame adds the insets once).
 *
 * Sizing: the root fills its parent (`width` / `height: 100%`); against a parent of indefinite
@@ -54,9 +60,27 @@ var Overlay = /*#__PURE__*/ styled("div")({
 });
 /** A standalone `Skeleton RECT` that takes the whole plot box. */
 var LOADING_SKELETON_CSS = "gx-ChartFrame-LOADING_SKELETON_CSS-l1oi7u1q";
+/**
+* A chart's own legend (Heatmap's steps) with the filter chip after it. Both carry the legend's 8px
+* top padding and center on each other, so the chip centers on the legend's text line.
+*/
+var CustomLegendBar = /*#__PURE__*/ styled("div")({
+	name: "CustomLegendBar",
+	class: "gx-ChartFrame-CustomLegendBar-c1jrxj0u",
+	propsAsIs: false
+});
+/**
+* The chips after a chart's own legend. Its height (the 8px top padding and a 20px chip) is kept
+* while nothing is pinned, so the plot above never moves when a chip appears.
+*/
+var CustomFilterSlot = /*#__PURE__*/ styled("div")({
+	name: "CustomFilterSlot",
+	class: "gx-ChartFrame-CustomFilterSlot-celuo85",
+	propsAsIs: false
+});
 var LiveRegion = /*#__PURE__*/ styled("div")({
 	name: "LiveRegion",
-	class: "gx-ChartFrame-LiveRegion-l1jrxj0u",
+	class: "gx-ChartFrame-LiveRegion-lvgwxyl",
 	propsAsIs: false
 });
 /** The default accessible name, phrased once so the charts cannot drift. */
@@ -85,7 +109,7 @@ var NAVIGATION_KEYS = new Set([
 	"End"
 ]);
 /** @internal The chart shell. */
-function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, legendSwatch, tooltipSwatch, legend }) {
+function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions, interaction, kind, categoryCount, ariaLabel, aspectRatio, axes, children, plotOverlay, plotClassName, describeCategory, hasTooltip, buildCategoryTooltip, renderTooltip, categoryTargets, markTargets, targetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, placeholder, hasLegend, legendItems, legendPlacement, legendSwatch, tooltipSwatch, legend, formatCategoryKey }) {
 	const { width, height, insets, isMeasured } = dimensions;
 	const [announcement, setAnnouncement] = useState("");
 	const { rootPassthrough, plotAria } = useMemo(() => {
@@ -138,17 +162,29 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 			if (event.key === " ") event.preventDefault();
 			if (onCategorySelect && interaction.activeIndex !== null) {
 				event.preventDefault();
-				onCategorySelect(interaction.activeIndex);
+				onCategorySelect(interaction.activeIndex, isAdditiveEvent(event));
 			}
 			return;
 		}
-		if (event.key === "Escape" && interaction.activeIndex !== null) {
+		if (event.key !== "Escape") return;
+		if (interaction.activeIndex !== null) {
 			event.preventDefault();
 			event.stopPropagation();
 			interaction.onKeyboardClear();
 			setAnnouncement("");
+		} else if (interaction.isFilterable && interaction.hasSelection) {
+			event.preventDefault();
+			event.stopPropagation();
+			interaction.clearSelection();
+			setAnnouncement("Filter cleared.");
 		}
 	};
+	const handleLegendClick = (seriesKey, isAdditive) => interaction.toggleSelection({ seriesKey }, isAdditive);
+	const handleFilterDismiss = (rest) => {
+		if (rest === null) interaction.clearSelection();
+		else interaction.setSelection([rest]);
+		if (isInteractive) plotRef.current?.focus();
+	};
 	const handleFocus = (event) => {
 		if (event.target !== event.currentTarget) return;
 		let isKeyboardFocus = true;
@@ -174,6 +210,55 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 		"aria-label": resolvedAriaLabel
 	};
 	const isSkeleton = isLoading && isEmpty;
+	const isSideLegend = legendPlacement === ChartLegendPlacement.RIGHT;
+	const categoryLabel = (key) => formatCategoryKey?.(key) ?? key;
+	const seriesLabel = (key) => legendItems.find((item) => item.key === key)?.label ?? key;
+	const describePin = (pin) => [pin.categoryKey === void 0 ? void 0 : categoryLabel(pin.categoryKey), pin.seriesKey === void 0 ? void 0 : seriesLabel(pin.seriesKey)].filter((part) => part !== void 0).join(" · ");
+	/** One chip per part of a single pin; one "N filters" chip for several. */
+	const filterChipParts = (() => {
+		const pins = interaction.selection;
+		const [pin] = pins;
+		if (!interaction.isFilterable || pin === void 0) return [];
+		if (pins.length > 1) return [{
+			key: "all",
+			label: `${pins.length} filters`,
+			rest: null
+		}];
+		const parts = [];
+		if (pin.categoryKey !== void 0) parts.push({
+			key: "category",
+			label: categoryLabel(pin.categoryKey),
+			rest: pin.seriesKey === void 0 ? null : { seriesKey: pin.seriesKey }
+		});
+		if (pin.seriesKey !== void 0) parts.push({
+			key: "series",
+			label: seriesLabel(pin.seriesKey),
+			rest: pin.categoryKey === void 0 ? null : { categoryKey: pin.categoryKey }
+		});
+		return parts;
+	})();
+	const filterChip = filterChipParts.length === 0 ? null : filterChipParts.map((part, index) => /* @__PURE__ */ jsx(Chip, {
+		size: ChipSize.SMALL,
+		...index === 0 && { icon: FunnelSimpleIcon },
+		label: part.label,
+		tooltip: part.key === "all" ? interaction.selection.map(describePin).join(", ") : "",
+		onDismiss: () => handleFilterDismiss(part.rest)
+	}, part.key));
+	const legendNode = !hasLegend || isSkeleton ? null : legend ?? /* @__PURE__ */ jsx(ChartLegend, {
+		items: legendItems,
+		placement: legendPlacement,
+		swatch: legendSwatch,
+		inset: isSideLegend ? CHART_LEGEND_SIDE_GAP : insets.left,
+		extent: isSideLegend ? Math.max(0, height - (interaction.isFilterable ? CHART_LEGEND_FILTER_EXTENT : 0)) : 0,
+		isFixedExtent: !interaction.isFilterable,
+		hasFilterSlot: interaction.isFilterable,
+		filter: filterChip,
+		getEntryState: interaction.getSeriesState,
+		isEntryPinned: interaction.isSeriesPinned,
+		onItemClick: interaction.isFilterable ? handleLegendClick : void 0,
+		onItemEnter: interaction.onSeriesEnter,
+		onItemLeave: interaction.onSeriesLeave
+	});
 	const hasTargets = isMeasured && isInteractive && categoryTargets.length > 0;
 	const rootStyle = {
 		"--gx-chart-aspect-ratio": aspectRatio,
@@ -186,77 +271,67 @@ function ChartFrame({ rootRef, plotRef, id, className, style, rest, dimensions,
 		"aria-busy": isLoading || void 0,
 		className: cx(CHART_LEGEND_PLACEMENT_TO_CSS_MAP[legendPlacement], className),
 		style: rootStyle,
-		children: [
-			/* @__PURE__ */ jsxs(PlotBox, {
-				...plotAriaRest,
-				...plotA11yProps,
-				ref: plotRef,
-				className: cx(isInteractive && PLOT_INTERACTIVE_CSS, plotClassName),
-				children: [
-					isMeasured && !isSkeleton && /* @__PURE__ */ jsx(ChartSvg, {
-						"aria-hidden": "true",
-						width,
-						height,
-						children: /* @__PURE__ */ jsxs("g", {
-							transform: `translate(${insets.left}, ${insets.top})`,
-							children: [
-								axes,
-								/* @__PURE__ */ jsx("g", { children }),
-								hasTargets && /* @__PURE__ */ jsxs("g", {
-									transform: targetsTransform,
-									children: [/* @__PURE__ */ jsx(ChartCategoryTargets, {
-										targets: categoryTargets,
-										onEnter: interaction.onCategoryEnter,
-										onLeave: interaction.onCategoryLeave,
-										onSelect: onCategorySelect
-									}), onMarkSelect && markTargets && markTargets.length > 0 && /* @__PURE__ */ jsx(ChartMarkTargets, {
-										targets: markTargets,
-										onEnter: interaction.onCategoryEnter,
-										onLeave: interaction.onCategoryLeave,
-										onSelect: onMarkSelect
-									})]
-								})
-							]
-						})
-					}),
-					isMeasured && !isSkeleton && plotOverlay,
-					isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(EmptyState, {
-						size: EmptyStateSize.SMALL,
-						header: placeholder,
-						role: "status"
-					}) }),
-					isSkeleton && /* @__PURE__ */ jsx(Skeleton, {
-						variant: SkeletonVariant.RECT,
-						className: LOADING_SKELETON_CSS
-					}),
-					isMeasured && hasTooltip && !isSkeleton && /* @__PURE__ */ jsx(ChartTooltip, {
-						model: tooltipModel,
-						containerWidth: width,
-						containerHeight: height,
-						anchorHalfWidth,
-						placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + insets.left,
-						verticalAlign,
-						renderTooltip,
-						swatch: tooltipSwatch
-					}),
-					/* @__PURE__ */ jsx(LiveRegion, {
-						"aria-live": "polite",
-						children: announcement
+		children: [/* @__PURE__ */ jsxs(PlotBox, {
+			...plotAriaRest,
+			...plotA11yProps,
+			ref: plotRef,
+			className: cx(isInteractive && PLOT_INTERACTIVE_CSS, plotClassName),
+			children: [
+				isMeasured && !isSkeleton && /* @__PURE__ */ jsx(ChartSvg, {
+					"aria-hidden": "true",
+					width,
+					height,
+					children: /* @__PURE__ */ jsxs("g", {
+						transform: `translate(${insets.left}, ${insets.top})`,
+						children: [
+							axes,
+							/* @__PURE__ */ jsx("g", { children }),
+							hasTargets && /* @__PURE__ */ jsxs("g", {
+								transform: targetsTransform,
+								children: [/* @__PURE__ */ jsx(ChartCategoryTargets, {
+									targets: categoryTargets,
+									onEnter: interaction.onCategoryEnter,
+									onLeave: interaction.onCategoryLeave,
+									onSelect: onCategorySelect
+								}), onMarkSelect && markTargets && markTargets.length > 0 && /* @__PURE__ */ jsx(ChartMarkTargets, {
+									targets: markTargets,
+									onEnter: interaction.onCategoryEnter,
+									onLeave: interaction.onCategoryLeave,
+									onSelect: onMarkSelect
+								})]
+							})
+						]
 					})
-				]
-			}),
-			hasLegend && !isSkeleton && legend,
-			hasLegend && !isSkeleton && legend === void 0 && /* @__PURE__ */ jsx(ChartLegend, {
-				items: legendItems,
-				placement: legendPlacement,
-				swatch: legendSwatch,
-				inset: legendPlacement === ChartLegendPlacement.RIGHT ? CHART_LEGEND_SIDE_GAP : insets.left,
-				extent: legendPlacement === ChartLegendPlacement.RIGHT ? height : 0,
-				hoveredKey: interaction.hoveredSeriesKey,
-				onItemEnter: interaction.onSeriesEnter,
-				onItemLeave: interaction.onSeriesLeave
-			})
-		]
+				}),
+				isMeasured && !isSkeleton && plotOverlay,
+				isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(EmptyState, {
+					size: EmptyStateSize.SMALL,
+					header: placeholder,
+					role: "status"
+				}) }),
+				isSkeleton && /* @__PURE__ */ jsx(Skeleton, {
+					variant: SkeletonVariant.RECT,
+					className: LOADING_SKELETON_CSS
+				}),
+				isMeasured && hasTooltip && !isSkeleton && /* @__PURE__ */ jsx(ChartTooltip, {
+					model: tooltipModel,
+					containerWidth: width,
+					containerHeight: height,
+					anchorHalfWidth,
+					placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + insets.left,
+					verticalAlign,
+					renderTooltip,
+					swatch: tooltipSwatch
+				}),
+				/* @__PURE__ */ jsx(LiveRegion, {
+					"aria-live": "polite",
+					children: announcement
+				})
+			]
+		}), legendNode !== null && (interaction.isFilterable && legend !== void 0 ? /* @__PURE__ */ jsxs(CustomLegendBar, { children: [legendNode, /* @__PURE__ */ jsx(CustomFilterSlot, {
+			"aria-hidden": filterChip === null || void 0,
+			children: filterChip
+		})] }) : legendNode)]
 	});
 }
 //#endregion

package/dist/charts/ChartLegend.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type ChartLegendItem, ChartLegendPlacement } from "./types.js";
+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. */
@@ -19,12 +19,22 @@ export interface ChartLegendProps {
     inset: number;
     /** RIGHT: the plot height the column fits into (0 = unconstrained). */
     extent?: number;
-    /** The series key being isolated. */
-    hoveredKey: string | null;
+    /** 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;
 }
 /** @internal The chart legend. */
-export declare function ChartLegend({ items, placement, swatch, inset, extent, hoveredKey, onItemEnter, onItemLeave, }: ChartLegendProps): ReactNode;
+export declare function ChartLegend({ items, placement, swatch, inset, extent, isFixedExtent, hasFilterSlot, filter, getEntryState, isEntryPinned, onItemClick, onItemEnter, onItemLeave, }: ChartLegendProps): ReactNode;