@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/charts/ChartAxis.js

@@ -1,115 +1,139 @@
+import { Orientation } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexWrapper, { AlignItems, JustifyContent } from "../containers/FlexWrapper.js";
-import { ChartCategoryLabelMode } from "./types.js";
-import "./constants.js";
-import { getCategoryLabelStride } from "./chartScales.js";
-import { ChartAxisLabelBox, ChartGridLine } from "./ChartPrimitives.js";
+import Flex, { AlignItems, JustifyContent } from "../layout/Flex.js";
+import { CHART_AXIS_LABEL_BOX_CSS, CHART_GRID_LINE_CSS } from "./ChartPrimitives.js";
+import { AXIS_TITLE_BAND, AXIS_TITLE_GAP, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, GRID_LINE_BLEED, PLOT_INSET_RIGHT, VALUE_AXIS_TICK_GAP } from "./constants.js";
+import { clamp, getCategoryLabelStride, getRowLabelStride } from "./chartScales.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartAxis.tsx
-var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, title }) => {
-	const titleBand = title ? 26 : 0;
-	const labelWidth = Math.max(0, marginLeft - titleBand - 12);
-	return /* @__PURE__ */ jsxs("g", {
-		"aria-hidden": true,
-		children: [ticks.map((tick) => /* @__PURE__ */ jsxs("g", {
-			transform: `translate(0, ${scale(tick)})`,
-			children: [showGrid && /* @__PURE__ */ jsx(ChartGridLine, {
-				x1: -12,
-				x2: plotWidth + 12,
+/**
+* @internal Axes for the cartesian charts and Heatmap. No domain line and no tick marks: the grid
+* hairlines carry the structure, and the one at zero is the baseline. Labels render through
+* `Text` (`CAPTION`, `TERTIARY`) in `foreignObject` boxes, truncating with `lineClamp={1}`.
+*/
+/** One label box: a `foreignObject` holding a centered `Text`. */
+function AxisLabel({ x, y, width, height, justify, align, isTabular = false, children }) {
+	return /* @__PURE__ */ jsx("foreignObject", {
+		x,
+		y,
+		width: Math.max(0, width),
+		height,
+		className: CHART_AXIS_LABEL_BOX_CSS,
+		children: /* @__PURE__ */ jsx(Flex, {
+			alignItems: AlignItems.CENTER,
+			justifyContent: justify,
+			fillWidth: true,
+			height: "100%",
+			children: /* @__PURE__ */ jsx(Text, {
+				size: TextSize.CAPTION,
+				variant: TextVariant.TERTIARY,
+				align,
+				lineClamp: 1,
+				isTabular,
+				children
+			})
+		})
+	});
+}
+/** @internal Grid hairlines at every tick, tick labels, and the value axis title. */
+function ChartValueAxis({ ticks, scale, plotWidth, plotHeight, insetLeft, formatter, title }) {
+	const titleBand = title ? AXIS_TITLE_BAND + AXIS_TITLE_GAP : 0;
+	const labelWidth = insetLeft - titleBand - VALUE_AXIS_TICK_GAP;
+	return /* @__PURE__ */ jsxs("g", { children: [ticks.map((tick) => {
+		return /* @__PURE__ */ jsxs("g", {
+			transform: `translate(0, ${Math.round(scale(tick))})`,
+			children: [/* @__PURE__ */ jsx("line", {
+				className: CHART_GRID_LINE_CSS,
+				x1: -GRID_LINE_BLEED,
+				x2: plotWidth + GRID_LINE_BLEED,
 				y1: 0,
 				y2: 0
-			}), labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
-				x: -marginLeft + titleBand,
+			}), labelWidth > 0 && /* @__PURE__ */ jsx(AxisLabel, {
+				x: -insetLeft + titleBand,
 				y: -20 / 2,
 				width: labelWidth,
 				height: 20,
-				children: /* @__PURE__ */ jsx(FlexWrapper, {
-					justifyContent: JustifyContent.END,
-					alignItems: AlignItems.CENTER,
-					fillWidth: true,
-					fillHeight: true,
-					children: /* @__PURE__ */ jsx(Text, {
-						size: TextSize.CAPTION,
-						variant: TextVariant.TERTIARY,
-						align: "right",
-						isEllipsis: true,
-						children: formatter(tick)
-					})
-				})
+				justify: JustifyContent.END,
+				align: "right",
+				isTabular: true,
+				children: formatter(tick)
 			})]
-		}, tick)), title && /* @__PURE__ */ jsx("g", {
-			transform: `translate(${-marginLeft + 18 / 2}, ${plotHeight / 2}) rotate(-90)`,
-			children: /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+		}, tick);
+	}), title && /* @__PURE__ */ jsx("g", {
+		transform: `translate(${-insetLeft + AXIS_TITLE_BAND / 2}, ${plotHeight / 2}) rotate(-90)`,
+		children: /* @__PURE__ */ jsx(AxisLabel, {
+			x: -plotHeight / 2,
+			y: -AXIS_TITLE_BAND / 2,
+			width: plotHeight,
+			height: AXIS_TITLE_BAND,
+			justify: JustifyContent.CENTER,
+			align: "center",
+			children: title
+		})
+	})] });
+}
+/**
+* @internal Category labels with `AUTO` thinning: every label that fits, otherwise every nth
+* (a skipped label is still inferable from its neighbours; a clipped one carries nothing). A
+* rendered label may spread over the run it stands for.
+*/
+function ChartCategoryAxis({ labels, positions, step, plotWidth, plotHeight, orientation, insetLeft = 0, formatter, title }) {
+	const formatted = labels.map(formatter);
+	if (orientation === Orientation.VERTICAL) {
+		const titleBand = title ? AXIS_TITLE_BAND + AXIS_TITLE_GAP : 0;
+		const labelWidth = insetLeft - titleBand - VALUE_AXIS_TICK_GAP;
+		const rowStride = getRowLabelStride(step);
+		return /* @__PURE__ */ jsxs("g", { children: [labelWidth > 0 && formatted.map((label, index) => index % rowStride !== 0 ? null : /* @__PURE__ */ jsx(AxisLabel, {
+			x: -insetLeft + titleBand,
+			y: (positions[index] ?? 0) - step * (rowStride - 1) / 2,
+			width: labelWidth,
+			height: step * rowStride,
+			justify: JustifyContent.END,
+			align: "right",
+			children: label
+		}, labels[index])), title && /* @__PURE__ */ jsx("g", {
+			transform: `translate(${-insetLeft + AXIS_TITLE_BAND / 2}, ${plotHeight / 2}) rotate(-90)`,
+			children: /* @__PURE__ */ jsx(AxisLabel, {
 				x: -plotHeight / 2,
-				y: -18 / 2,
+				y: -AXIS_TITLE_BAND / 2,
 				width: plotHeight,
-				height: 18,
-				children: /* @__PURE__ */ jsx(FlexWrapper, {
-					justifyContent: JustifyContent.CENTER,
-					alignItems: AlignItems.CENTER,
-					fillWidth: true,
-					fillHeight: true,
-					children: /* @__PURE__ */ jsx(Text, {
-						size: TextSize.CAPTION,
-						variant: TextVariant.TERTIARY,
-						align: "center",
-						isEllipsis: true,
-						children: title
-					})
-				})
+				height: AXIS_TITLE_BAND,
+				justify: JustifyContent.CENTER,
+				align: "center",
+				children: title
 			})
-		})]
-	});
-};
-var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, title }) => {
-	const formatted = labels.map(formatter);
-	const stride = mode === ChartCategoryLabelMode.AUTO ? getCategoryLabelStride(formatted, step) : 1;
+		})] });
+	}
+	const stride = getCategoryLabelStride(formatted, step);
 	const labelWidth = step * stride;
 	const labelInset = (labelWidth - step) / 2;
+	const minX = -insetLeft;
+	const maxX = plotWidth + PLOT_INSET_RIGHT;
 	return /* @__PURE__ */ jsxs("g", {
 		transform: `translate(0, ${plotHeight})`,
-		"aria-hidden": true,
 		children: [formatted.map((label, index) => {
 			if (index % stride !== 0) return null;
-			return /* @__PURE__ */ jsx(ChartAxisLabelBox, {
-				x: positions[index] - labelInset,
-				y: 8,
+			const center = (positions[index] ?? 0) + step / 2;
+			const halfText = Math.min(labelWidth, label.length * CAPTION_CHAR_WIDTH_PX) / 2;
+			return /* @__PURE__ */ jsx(AxisLabel, {
+				x: (maxX - minX > halfText * 2 ? clamp(center, minX + halfText, maxX - halfText) : center) - step / 2 - labelInset,
+				y: CATEGORY_AXIS_LABEL_GAP,
 				width: labelWidth,
-				height: 24,
-				children: /* @__PURE__ */ jsx(FlexWrapper, {
-					justifyContent: JustifyContent.CENTER,
-					alignItems: AlignItems.CENTER,
-					fillWidth: true,
-					fillHeight: true,
-					children: /* @__PURE__ */ jsx(Text, {
-						size: TextSize.CAPTION,
-						variant: TextVariant.TERTIARY,
-						align: "center",
-						isEllipsis: mode !== ChartCategoryLabelMode.ALL,
-						children: label
-					})
-				})
-			}, `${index}:${label}`);
-		}), title && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+				height: CATEGORY_AXIS_LABEL_HEIGHT,
+				justify: JustifyContent.CENTER,
+				align: "center",
+				children: label
+			}, labels[index]);
+		}), title && /* @__PURE__ */ jsx(AxisLabel, {
 			x: 0,
-			y: 32,
+			y: CATEGORY_AXIS_LABEL_GAP + CATEGORY_AXIS_LABEL_HEIGHT + AXIS_TITLE_GAP,
 			width: plotWidth,
-			height: 18,
-			children: /* @__PURE__ */ jsx(FlexWrapper, {
-				justifyContent: JustifyContent.CENTER,
-				alignItems: AlignItems.CENTER,
-				fillWidth: true,
-				fillHeight: true,
-				children: /* @__PURE__ */ jsx(Text, {
-					size: TextSize.CAPTION,
-					variant: TextVariant.TERTIARY,
-					align: "center",
-					isEllipsis: true,
-					children: title
-				})
-			})
+			height: AXIS_TITLE_BAND,
+			justify: JustifyContent.CENTER,
+			align: "center",
+			children: title
 		})]
 	});
-};
+}
 //#endregion
 export { ChartCategoryAxis, ChartValueAxis };

package/dist/charts/ChartCategoryTargets.d.ts

@@ -1,28 +1,14 @@
-import type { ChartCategoryTarget } from "./types";
-import type { ChartInteraction } from "./useChartInteraction";
-/**
- * The base hit layer: one transparent target per category, above the marks.
- *
- * Shared by all three charts so hit testing is spelled once. Targets carry no
- * roles and no tab stops — the plot is `role="img"` and its accessible story is
- * the frame's label and description, while pointer users get the tooltip.
- *
- * Every category is hoverable, including one with nothing to show: the cursor
- * still marks where the pointer is over an empty stretch of axis, and the
- * tooltip opens with a "No data" body so the hover always gets an answer.
- *
- * **Only `onMouseEnter` lives here; leaving is the target group's job.** Per-target
- * leave handlers fire on every crossing *within* the plot, so the state fell to
- * null and back on each one — a wasted render between neighbouring bands, and a
- * visible flicker once the mark layer above added a second boundary inside a
- * single category. The group's leave fires exactly once, when the pointer
- * actually leaves the plot.
- */
-interface ChartCategoryTargetsProps {
+import { type ChartCategoryTarget } from "./types.js";
+/** @internal Props of `ChartCategoryTargets`. */
+export interface ChartCategoryTargetsProps {
+    /** One target per category, in category order. */
     targets: ChartCategoryTarget[];
-    interaction: ChartInteraction;
-    /** Supplying this makes the category clickable, cursor included. */
-    onSelect?: (categoryIndex: number) => void;
+    /** Pointer entered a category. */
+    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;
 }
-declare const ChartCategoryTargets: ({ targets, interaction, onSelect }: ChartCategoryTargetsProps) => import("react").JSX.Element;
-export default ChartCategoryTargets;
+/** @internal The category hit layer. */
+export declare function ChartCategoryTargets({ targets, onEnter, onLeave, onSelect, }: ChartCategoryTargetsProps): import("react").JSX.Element;

package/dist/charts/ChartCategoryTargets.js

@@ -1,24 +1,36 @@
 import { ChartTargetShape } from "./types.js";
-import { ChartHitTarget, ChartHitTargetPath } from "./ChartPrimitives.js";
-import { match } from "ts-pattern";
+import { CHART_HIT_TARGET_CSS, leaveUnlessTarget } from "./ChartPrimitives.js";
 import { Fragment, jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/charts/ChartCategoryTargets.tsx
-var ChartCategoryTargets = ({ targets, interaction, onSelect }) => /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
-	const shared = {
-		onMouseEnter: () => interaction.onCategoryEnter(index),
-		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 base hit layer: one transparent target per category above the marks (a band for
+* cartesian charts, the arc outline for a pie). Hover is per category, so a two-pixel mark is as
+* easy to hover as a large one. A target's leave only counts when the pointer leaves the target
+* layers (`leaveUnlessTarget`), so crossing between bands never flickers through "nothing engaged".
+*/
+/** @internal The category hit layer. */
+function ChartCategoryTargets({ targets, onEnter, onLeave, onSelect }) {
+	const className = cx(CHART_HIT_TARGET_CSS, onSelect && "gx-ChartPrimitives-CHART_HIT_TARGET_CLICKABLE_CSS-cjirv6a");
+	return /* @__PURE__ */ jsx(Fragment, { children: targets.map((target, index) => {
+		const handlers = {
+			onMouseEnter: () => onEnter(index),
+			onMouseLeave: (event) => leaveUnlessTarget(event, onLeave),
+			...onSelect && { 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 { ChartCategoryTargets as default };
+export { ChartCategoryTargets };

package/dist/charts/ChartFrame.d.ts

@@ -1,132 +1,85 @@
-import type { ReactNode } from "react";
-import { ChartKind, ChartLegendPlacement } from "./types";
-import type { ChartCategoryTarget, ChartLegendItem, ChartMarkTarget, ChartPlotTooltipModel, ChartTooltipRenderer } from "./types";
-import type { ChartDimensions } from "./useChartDimensions";
-import type { ChartInteraction } from "./useChartInteraction";
-import type { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
-/**
- * The shell every chart renders into: measured root, reserved plot box, SVG and
- * its margin translate, the plot group, the hover targets, the tooltip, the
- * empty state and the legend.
- *
- * **The frame owns the plot translate.** Marks are drawn inside a
- * `translate(margin.left, margin.top)` group, and every coordinate handed to
- * this component — including the tooltip anchor and `placeAwayFromX` — is in
- * that same plot space. Charts never add the margin themselves; three
- * hand-written copies of `+ margin.left` is precisely what drifts silently.
- *
- * Knows nothing about scales, marks or geometry — all of that arrives through
- * `axes` and `children`.
- *
- * @internal Published as a subpath only because this package has no barrel
- * files, not because charts are meant to be composed out of it.
- */
+import { type CSSProperties, type ForwardedRef, type ReactNode, type RefObject } from "react";
+import { type ChartLegendSwatch } from "./ChartLegend.js";
+import { type ChartCategoryTarget, ChartKind, type ChartLegendItem, ChartLegendPlacement, type ChartMarkTarget, type ChartPlotTooltipModel, type ChartTooltipRenderer } from "./types.js";
+import type { ChartDimensions } from "./useChartDimensions.js";
+import type { ChartInteraction } from "./useChartInteraction.js";
+import type { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
+/** @internal Props of `ChartFrame`. */
 export interface ChartFrameProps {
-    /**
-     * The element `useChartDimensions` measures — the *plot box*, not the root.
-     *
-     * Measuring the plot box is what keeps `fillHeight` honest: the legend is a
-     * sibling in the root's flex column, so the box's height is already the space
-     * left over for the plot and no one has to subtract a wrapped legend. Width is
-     * unaffected, the box being `width: 100%` of the root either way.
-     *
-     * Created by the chart, not here: the chart needs the resulting dimensions
-     * during its own render — to size the geometry and to feed
-     * `useChartInteraction` — so the ref has to exist before this component does.
-     * A named prop rather than `ref` because ref-as-a-prop needs React 19 and this
-     * package still supports 18.
-     */
-    containerRef: React.RefObject<HTMLDivElement>;
+    /** The chart's forwarded ref (to the root). */
+    rootRef: ForwardedRef<HTMLDivElement>;
+    /** The plot box, measured by the chart's `useChartDimensions`. */
+    plotRef: RefObject<HTMLDivElement>;
+    /** Passthrough: `id`. */
+    id?: string | undefined;
+    /** Remaining passthrough: `data-*` to the root, `aria-*` to the plot box. */
+    rest: Record<string, unknown>;
+    /** Measured box and insets. */
     dimensions: ChartDimensions;
-    fillWidth?: boolean;
-    fillHeight?: boolean;
+    /** The chart's interaction state. */
     interaction: ChartInteraction;
-    /** Which chart this is. Only used to phrase the default accessible name. */
+    /** Which chart (phrases the default name). */
     kind: ChartKind;
-    /** Categories on the axis, or slices for a pie. Names the plot, so it counts
-     * what is *rendered* rather than what was supplied. */
+    /** Categories (slices, cells) rendered. */
     categoryCount: number;
-    /** Overrides the name derived from {@link kind} and the counts. */
-    ariaLabel?: string;
-    /** Long description, associated with the SVG via `aria-describedby`. */
-    ariaDescription?: string;
-    /**
-     * Axes, drawn inside the plot translate group *before* {@link children}, so
-     * grid lines paint under the marks. Radial charts pass nothing.
-     */
+    /** The `ariaLabel` prop. */
+    ariaLabel?: string | undefined;
+    /** `--gx-chart-aspect-ratio`. */
+    aspectRatio: number;
+    /** Axes, inside the plot group before the marks (grid under marks). */
     axes?: ReactNode;
-    /**
-     * Marks, drawn inside the plot group beneath the hover targets.
-     *
-     * Rendered only once measured, so no caller writes that guard. Note it is
-     * still *evaluated* on the unmeasured pass — as is the geometry it maps over,
-     * which each chart's `useMemo` already runs at a 0×0 plot. Geometry builders
-     * must stay total at zero; they already are.
-     */
+    /** Marks. Rendered once measured. */
     children?: ReactNode;
-    /** HTML painted over the plot and under the tooltip — the donut centre. */
+    /** HTML over the plot, under the tooltip (PieChart's donut center). */
     plotOverlay?: ReactNode;
-    noTooltip?: boolean;
-    /**
-     * Builds one category's tooltip, in plot coordinates.
-     *
-     * A rowless model means "no data here": the category stays hoverable and
-     * the built-in tooltip renders it with a "No data" body. A custom
-     * {@link tooltipRenderer} never receives a rowless model.
-     *
-     * Must be stable; memoize it at the call site.
-     */
+    /** Extra class on the plot box (PieChart: the square plot beside a side legend). */
+    plotClassName?: string | undefined;
+    /** The live-region sentence for a category; defaults to the tooltip heading and rows. */
+    describeCategory?: ((index: number) => string) | undefined;
+    /** The `hasTooltip` prop. */
+    hasTooltip: boolean;
+    /** Builds a category's tooltip in plot coordinates; empty rows mean "No data". */
     buildCategoryTooltip: (index: number) => ChartPlotTooltipModel | null;
-    tooltipRenderer?: ChartTooltipRenderer;
-    /** Row cap for the built-in tooltip body. See {@link BaseChartProps.tooltipMaxItems}. */
-    tooltipMaxItems?: number;
-    /**
-     * One target per category, in plot coordinates and in category order.
-     *
-     * Empty disables interaction entirely, which is what a chart with nothing to
-     * plot passes.
-     */
-    categoryTargets?: ChartCategoryTarget[];
-    /**
-     * One target per rendered mark, painted over {@link categoryTargets} so a
-     * click can name a segment rather than only its column. Omitted by the charts
-     * whose marks are not separately clickable — see `ChartMarkTargets`.
-     */
+    /** The `renderTooltip` prop. */
+    renderTooltip?: ChartTooltipRenderer | undefined;
+    /** One hover target per category. */
+    categoryTargets: ChartCategoryTarget[];
+    /** Click targets per mark. */
     markTargets?: ChartMarkTarget[];
-    /** Applied to both target layers. Radial charts pass their centre translate. */
-    categoryTargetsTransform?: string;
-    /**
-     * Click on a category, by index. Supplying it is what makes the plot
-     * clickable at all — the cursor and the mark layer's handler both follow it.
-     *
-     * Index-based, because building the event needs the chart's own geometry and
-     * vocabulary. The frame knows neither, exactly as with
-     * {@link buildCategoryTooltip}.
-     */
-    onCategorySelect?: (categoryIndex: number) => void;
-    /** Click on one mark, by its index in {@link markTargets}. */
-    onMarkSelect?: (markIndex: number) => void;
-    /** Half a category's width, so the tooltip sits beside the marks. */
+    /** 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;
+    /** Half a category's width (tooltip sits beside it). */
     anchorHalfWidth?: number;
-    /** Radial charts pass their centre, in plot coordinates. */
+    /** Radial charts: their center x, in plot coordinates. */
     placeAwayFromX?: number;
+    /** Tooltip vertical placement. */
     verticalAlign?: ChartTooltipVerticalAlign;
-    /** Each chart defines "empty" for itself; the frame only renders the result. */
+    /** Nothing to plot. */
     isEmpty: boolean;
-    isLoading?: boolean;
-    contentWhenEmpty?: ReactNode;
-    showLegend?: boolean;
+    /** The `isLoading` prop. */
+    isLoading: boolean;
+    /** The `placeholder` prop. */
+    placeholder: string;
+    /** The `hasLegend` prop. */
+    hasLegend: boolean;
+    /** Legend entries. */
     legendItems: ChartLegendItem[];
-    /** Inline cap; the rest collapse behind "+N more". See {@link BaseChartProps.legendMaxItems}. */
-    legendMaxItems?: number;
-    /** Where the legend sits. RIGHT stacks it beside the plot, vertically centred. */
-    legendPlacement?: ChartLegendPlacement;
-    /**
-     * BOTTOM: left padding, defaulting to the left margin so the legend aligns
-     * with the plot rather than the axis gutter. RIGHT: the gap between the plot
-     * box and the legend, defaulting to {@link CHART_LEGEND_SIDE_GAP}.
-     */
-    legendInset?: number;
+    /** Legend placement. */
+    legendPlacement: ChartLegendPlacement;
+    /** Legend swatch shape. */
+    legendSwatch: ChartLegendSwatch;
+    /** Tooltip row swatch shape. Defaults to `CIRCLE` (BarChart passes `SQUARE`). */
+    tooltipSwatch?: ChartLegendSwatch | undefined;
+    /** A chart's own legend in place of the series legend (Heatmap's step legend). */
+    legend?: ReactNode;
+    /** Passthrough: `className` on the root. */
+    className?: string | undefined;
+    /** Passthrough: `style` on the root. */
+    style?: CSSProperties | undefined;
 }
-declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, markTargets, categoryTargetsTransform, onCategorySelect, onMarkSelect, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendMaxItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
-export default ChartFrame;
+/** @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;