@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/charts/ChartPrimitives.js

@@ -1,417 +1,69 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import "./constants.js";
+import { ChartMarkState } from "./types.js";
 /* empty css                          */
-import { styled } from "@linaria/react";
 //#region src/charts/ChartPrimitives.tsx
 /**
-* Styled leaves shared by the chart components.
-*
-* Linaria evaluates this module at build time, so it may import from
-* `constants.ts` only — a component, framer-motion or Phosphor import here
-* would be dragged into build-time evaluation.
-*
-* **SVG marks carry state as `data-*` attributes, never as `$`-prefixed props.**
-* `@linaria/react` builds its tag allow-list as
-* `new Set([...elements.html, elements.svg])` — the spread is missing on the
-* second array, so `has('rect')` is false, `propsAsIs` turns on, and every prop
-* is forwarded verbatim to the DOM. A `$isDimmed` prop reaches the element and
-* React warns. Attribute selectors sidestep this entirely and keep the CSS
-* static, which suits a zero-runtime setup better anyway.
-*
-* Leaves that receive a ref use plain `styled.x` rather than `withTheme`: the
-* HOC's return type erases the element type, so a mismatched ref would compile.
-*/
-/**
-* Shared emphasis states.
-*
-* Deliberately no transition: emphasis is feedback, and feedback that eases in
-* reads as lag. The states snap.
-*/
-/**
-* Outer container. Receives the measurement ref.
-*
-* `min-width: 0` is load-bearing rather than cosmetic — without it a chart in a
-* flex row feeds its min-content width back into the ResizeObserver and the
-* measurement can oscillate.
-*
-* `$legendRight` rotates the layout: plot box and legend become a row with
-* `align-items: center`, which is the whole of "the legend is vertically
-* centred on the pie" — the pie is inscribed centred in its box, so centring
-* the legend against the box centres it against the pie. It also holds in the
-* other direction: a legend taller than the box centres the *pie* against the
-* legend instead of pinning it to the top.
-*/
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
-var _exp2 = () => ({ $legendRight }) => $legendRight ? "row" : "column";
-var _exp3 = () => ({ $legendRight }) => $legendRight ? "center" : "stretch";
-var _exp4 = () => ({ $legendRight }) => $legendRight ? "center" : "normal";
-var _exp5 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp6 = () => ({ $fillHeight }) => $fillHeight ? "100%" : "auto";
-var ChartRoot = /*#__PURE__*/ styled("div")({
-	name: "ChartRoot",
-	class: "c1hcga6s",
-	propsAsIs: false,
-	vars: {
-		"c1hcga6s-0": [_exp()],
-		"c1hcga6s-1": [_exp2()],
-		"c1hcga6s-2": [_exp3()],
-		"c1hcga6s-3": [_exp4()],
-		"c1hcga6s-4": [_exp5()],
-		"c1hcga6s-5": [_exp6()]
-	}
-});
-/**
-* Holds the plot, anchors the tooltip, and is the element that gets measured.
-*
-* Reserving the box from `aspect-ratio` or an explicit height means a
-* `fillWidth` chart is the right size on its very first paint, instead of
-* rendering at zero height and jumping once the observer reports.
-*
-* **`$fillHeight` is what makes "fill the container" tractable.** The chart root
-* is a flex column of this box plus the legend, and the legend wraps, so its
-* height is not known until after layout. Claiming the remaining track with
-* `flex: 1` lets the browser do that subtraction during its own layout pass —
-* measuring the root and subtracting a measured legend would instead be a
-* second, dependent pass, and one that can oscillate under a ResizeObserver.
-* `min-height: 0` is required with it: a flex item's automatic minimum size is
-* its content, which would let the SVG hold the box open above its track.
-*/
-var _exp7 = () => ({ $legendRight }) => $legendRight ? "auto" : "100%";
-var _exp8 = () => ({ $reservedAspectRatio, $squareFromHeight }) => $squareFromHeight ? "1" : $reservedAspectRatio ?? "auto";
-var _exp9 = () => ({ $reservedHeight, $fillHeight, $legendRight }) => $fillHeight && $legendRight ? "100%" : $reservedHeight ? `${$reservedHeight}px` : "auto";
-var _exp0 = () => ({ $fillHeight, $legendRight, $squareFromHeight }) => $legendRight ? $squareFromHeight ? "0 1 auto" : "1 1 auto" : $fillHeight ? "1 1 0%" : "0 1 auto";
-var _exp1 = () => ({ $fillHeight }) => $fillHeight ? "0" : "auto";
-var ChartPlotBox = /*#__PURE__*/ styled("div")({
-	name: "ChartPlotBox",
-	class: "c1fvbgkp",
-	propsAsIs: false,
-	vars: {
-		"c1fvbgkp-0": [_exp7()],
-		"c1fvbgkp-1": [_exp8()],
-		"c1fvbgkp-2": [_exp9()],
-		"c1fvbgkp-3": [_exp0()],
-		"c1fvbgkp-4": [_exp1()]
-	}
-});
-/**
-* `overflow: visible` lets a value label above a full-height bar paint outside
-* the plot rather than being clipped by the root SVG.
-*/
-var ChartSvg = /*#__PURE__*/ styled("svg")({
-	name: "ChartSvg",
-	class: "c10uj5yt",
-	propsAsIs: false
-});
-var ChartBarPath = /*#__PURE__*/ styled("path")({
-	name: "ChartBarPath",
-	class: "cyuty3o",
-	propsAsIs: true
-});
-var ChartLinePath = /*#__PURE__*/ styled("path")({
-	name: "ChartLinePath",
-	class: "c1ob2op2",
-	propsAsIs: true
-});
-var ChartAreaPath = /*#__PURE__*/ styled("path")({
-	name: "ChartAreaPath",
-	class: "c8c506o",
-	propsAsIs: true
-});
-var ChartPointCircle = /*#__PURE__*/ styled("circle")({
-	name: "ChartPointCircle",
-	class: "ceqlpek",
-	propsAsIs: true
-});
-var ChartArcPath = /*#__PURE__*/ styled("path")({
-	name: "ChartArcPath",
-	class: "c1fcbddl",
-	propsAsIs: true
-});
-/**
-* Hit target, rendered above the marks. Used for both layers — one per category
-* beneath, one per mark above.
-*
-* Hit testing the full column rather than the bars themselves means a two-pixel
-* bar is as easy to hover as a two-hundred-pixel one, and crossing between
-* segments inside a category changes nothing the tooltip reads — so it holds
-* still instead of chasing each segment.
-*
-* The pointer cursor is conditional because the promise is: it appears only
-* where a click actually reports something, and a chart with no `onSelect`
-* keeps the default cursor rather than advertising an interaction it does not
-* have. No focus treatment either — the plot is `role="img"` and its marks are
-* not in the accessibility tree, so there is nothing here to focus yet.
-*/
-var ChartHitTarget = /*#__PURE__*/ styled("rect")({
-	name: "ChartHitTarget",
-	class: "cpcxr59",
-	propsAsIs: true
-});
-/**
-* The radial equivalent, reusing the arc's own `d`.
-*
-* A pie has no category axis to band, so its targets are the arc shapes
-* themselves — drawn again, transparent, above the marks. That keeps hit
-* testing identical across all three charts instead of the pie hit-testing its
-* visible arcs directly.
-*/
-var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
-	name: "ChartHitTargetPath",
-	class: "c1wvzvu4",
-	propsAsIs: true
-});
-/**
-* Solid hairline rather than a dashed rule, and drawn at every tick including
-* zero — the line under the bars is what makes them read as resting on a
-* baseline.
-*/
-var _exp15 = () => ({ theme }) => theme.color.border.primary;
-var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
-	name: "ChartGridLine",
-	class: "c17guewt",
-	propsAsIs: true,
-	vars: { "c17guewt-0": [_exp15()] }
-}));
-/**
-* Vertical rule marking the hovered category on a line chart.
-*
-* `data-selected` steps it up the same neutral ramp rather than introducing a
-* hue: a selection is the *same* mark held rather than previewed, and a colour
-* change would read as a different kind of thing. The state is an attribute
-* rather than a `$` prop for the reason at the top of this file.
-*/
-var _exp16 = () => ({ theme }) => theme.color.border.secondary;
-var _exp17 = () => ({ theme }) => theme.color.opacity.bw32Alt;
-var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
-	name: "ChartCursorLine",
-	class: "cblgiyf",
-	propsAsIs: true,
-	vars: {
-		"cblgiyf-0": [_exp16()],
-		"cblgiyf-1": [_exp17()]
-	}
-}));
-/**
-* Full-height tint over the hovered category's band on a bar chart — the bar
-* counterpart to {@link ChartCursorLine}. A rule reads oddly threaded through
-* wide filled marks; a quiet band behind them marks the same position without
-* touching them.
-*
-* 4% of the foreground, so it survives both themes. Deliberately fainter than
-* the line chart's rule: a band is a large area where a rule is a hairline, and
-* the same value that reads as quiet on one shouts on the other.
-*/
-var _exp18 = () => ({ theme }) => theme.color.opacity.b4Alt;
-var _exp19 = () => ({ theme }) => theme.color.opacity.bw8Alt;
-var ChartCursorBand = withTheme(/*#__PURE__*/ styled("rect")({
-	name: "ChartCursorBand",
-	class: "c1lr03cc",
-	propsAsIs: true,
-	vars: {
-		"c1lr03cc-0": [_exp18()],
-		"c1lr03cc-1": [_exp19()]
-	}
-}));
-var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
-	name: "ChartAxisLabelBox",
-	class: "cizy1s8",
-	propsAsIs: true
-});
-/**
-* Positioned from coordinates already clamped to the chart box.
-*
-* `left`/`top` are transitioned so the tooltip slides between categories rather
-* than teleporting, and it stays mounted while hidden so the fade can actually
-* run — unmounting on hide is why a fade-out never appears.
-*/
-var _exp20 = () => ({ $x }) => `${$x}px`;
-var _exp21 = () => ({ $y }) => `${$y}px`;
-var _exp24 = () => ({ theme }) => theme.color.border.primary;
-var _exp25 = () => ({ theme }) => theme.color.background.tertiary;
-var _exp26 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
-var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ChartTooltipPositioner",
-	class: "c1ukq11d",
-	propsAsIs: false,
-	vars: {
-		"c1ukq11d-0": [_exp20()],
-		"c1ukq11d-1": [_exp21()],
-		"c1ukq11d-2": [_exp24()],
-		"c1ukq11d-3": [_exp25()],
-		"c1ukq11d-4": [_exp26()]
-	}
-}));
-/**
-* Two-column tooltip body: label column, one gutter, value column.
-*
-* A grid rather than per-row `space-between`, so every row shares the same
-* column boundary: the value column is sized by the widest value and every
-* value is guaranteed its full width, while the labels take the remainder and
-* all ellipsize against the same edge. Per-row flex made the label→value gap
-* drift with each label's length, which read as misalignment down the list.
-*/
-var ChartTooltipGrid = /*#__PURE__*/ styled("div")({
-	name: "ChartTooltipGrid",
-	class: "cwcko2m",
-	propsAsIs: false
-});
-/** Swatch + label. `min-width: 0` is what lets the label actually ellipsize. */
-var ChartTooltipLabelCell = /*#__PURE__*/ styled("div")({
-	name: "ChartTooltipLabelCell",
-	class: "cqwhvyz",
-	propsAsIs: false
-});
-/** Right-aligned and never wrapped — the value always shows in full. */
-var ChartTooltipValueCell = /*#__PURE__*/ styled("div")({
-	name: "ChartTooltipValueCell",
-	class: "c1iaray",
-	propsAsIs: false
-});
-/**
-* Content well inside a donut hole.
-*
-* Rendered as HTML positioned over the SVG rather than as `<text>`, so the
-* caller can compose it from the same `Text` and layout primitives as the rest
-* of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
-* behind it.
-*/
-var _exp30 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp31 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp33 = () => ({ $diameter }) => `${$diameter}px`;
-var ChartCenterBox = /*#__PURE__*/ styled("div")({
-	name: "ChartCenterBox",
-	class: "cz6jod1",
-	propsAsIs: false,
-	vars: {
-		"cz6jod1-0": [_exp30()],
-		"cz6jod1-1": [_exp31()],
-		"cz6jod1-2": [_exp33()]
-	}
-});
-/**
-* Sits slightly above centre, over where the bars would be, so the axes stay
-* legible underneath.
-*/
-var _exp34 = () => ({ theme }) => theme.color.border.primary;
-var _exp35 = () => ({ theme }) => theme.color.background.primary;
-var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
-	name: "ChartEmptyOverlay",
-	class: "c1de5mqk",
-	propsAsIs: false,
-	vars: {
-		"c1de5mqk-0": [_exp34()],
-		"c1de5mqk-1": [_exp35()]
-	}
-}));
-/**
-* Aligns the legend under the plot rather than the value-axis gutter.
-*/
-var _exp36 = () => ({ $vertical }) => $vertical ? "column" : "row";
-var _exp37 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
-var _exp38 = () => ({ $vertical }) => $vertical ? "center" : "flex-start";
-var _exp39 = () => ({ $vertical }) => $vertical ? "auto" : "0";
-var _exp40 = () => ({ $vertical }) => $vertical ? "0" : "100%";
-var _exp41 = () => ({ $vertical, $extent }) => $vertical && $extent ? `${$extent}px` : "auto";
-var _exp42 = () => ({ $vertical }) => $vertical ? "0" : "10px";
-var _exp43 = () => ({ $inset }) => `${$inset}px`;
-var ChartLegendRow = /*#__PURE__*/ styled("div")({
-	name: "ChartLegendRow",
-	class: "cjirv6a",
-	propsAsIs: false,
-	vars: {
-		"cjirv6a-0": [_exp36()],
-		"cjirv6a-1": [_exp37()],
-		"cjirv6a-2": [_exp38()],
-		"cjirv6a-3": [_exp39()],
-		"cjirv6a-4": [_exp40()],
-		"cjirv6a-5": [_exp41()],
-		"cjirv6a-6": [_exp42()],
-		"cjirv6a-7": [_exp43()]
-	}
-});
-/**
-* Zero-size clip around the measure layer.
-*
-* `visibility: hidden` suppresses paint but not *overflow*: the measure layer's
-* max-content box still joins the scrollable overflow region of every ancestor
-* up to the nearest scroll container, and the row above cannot clip it. A
-* legend wide enough to collapse therefore handed the page a horizontal
-* scrollbar into empty space — the wider the collapsed entries, the further it
-* scrolled.
-*
-* `overflow: hidden` on a 0×0 box ends the propagation there while leaving
-* descendant layout geometry untouched, so the sizes the fit computation reads
-* are exactly the ones it read before.
-*/
-var ChartLegendMeasureClip = /*#__PURE__*/ styled("div")({
-	name: "ChartLegendMeasureClip",
-	class: "c1armna5",
-	propsAsIs: false
-});
-/**
-* Invisible copy of every legend entry plus a worst-case trigger, laid out
-* unconstrained along the legend's own axis so the fit computation can read
-* real sizes.
-*
-* Absolute and hidden: it must not affect the row's layout, and measuring live
-* entries instead would conflate "what fits" with "what is currently shown".
-*/
-var _exp44 = () => ({ $vertical }) => $vertical ? "column" : "row";
-var _exp45 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
-var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
-	name: "ChartLegendMeasure",
-	class: "cgd77rv",
-	propsAsIs: false,
-	vars: {
-		"cgd77rv-0": [_exp44()],
-		"cgd77rv-1": [_exp45()]
-	}
-});
-/**
-* Column of legend entries collapsed behind the "+N more" trigger, rendered as
-* the body of an interactive tooltip.
-*
-* Scrolls past {@link CHART_LEGEND_OVERFLOW_MAX_HEIGHT} so a fifty-series chart
-* gets a bounded popover rather than one taller than the plot.
-*/
-var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
-	name: "ChartLegendOverflowList",
-	class: "cutidpi",
-	propsAsIs: false
-});
-/**
-* One legend entry, when the legend is interactive.
-*
-* A real `<button>` rather than a styled div so it sits in the tab order:
-* focusing an entry previews its series exactly as hovering does, which is the
-* one keyboard affordance the charts keep — the plot itself is `role="img"` and
-* its marks are not in the accessibility tree. Activating it does nothing;
-* isolation follows the pointer or the focus and releases with it.
-*
-* Shares the mark opacity ramp via `data-state`, so an entry recedes in step
-* with the series it names.
-*
-* The trailing padding is the inter-entry spacing — deliberately padding on
-* the entry rather than a gap on the container, so the hover surfaces of
-* adjacent entries touch and a sweep hands the isolation directly from one
-* series to the next. Trailing only, so the first entry stays flush with the
-* plot's left edge (or the column's top).
-*/
-var _exp48 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
-var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
-	name: "ChartLegendItemButton",
-	class: "ccpczg",
-	propsAsIs: false,
-	vars: { "ccpczg-0": [_exp48()] }
-});
-/** The same row, when the legend is inert — no button semantics to announce.
-* Carries the same trailing padding; see {@link ChartLegendItemButton}. */
-var _exp50 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
-var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
-	name: "ChartLegendItemStatic",
-	class: "c2re25h",
-	propsAsIs: false,
-	vars: { "c2re25h-0": [_exp50()] }
-});
+* @internal SVG mark primitives for the chart family: `css` classes composed with `cx` on plain
+* SVG elements. SVG elements take only `className` and `style` (never `$`-props, which Linaria
+* forwards to SVG tags, and never `data-*` state selectors, Constitution IV.4). A mark's color
+* arrives as the CSS custom property `--gx-chart-mark-color` on its `style`, so a theme
+* switch repaints through CSS with no React render. Chart rows add their own mark classes here.
+*
+* Imports only `t` and `constants.ts` (both safe for wyw's build-time evaluation).
+*/
+/** @internal A series line. */
+var CHART_LINE_CSS = "gx-ChartPrimitives-CHART_LINE_CSS-c1hcga6s";
+/** @internal A dashed line (forecast, target, previous period): a `space[4]` dash and gap. */
+var CHART_LINE_DASHED_CSS = "gx-ChartPrimitives-CHART_LINE_DASHED_CSS-c1fvbgkp";
+/** @internal An area fill under a line (AreaChart). `fill-opacity`, so mark states still apply. */
+var CHART_AREA_CSS = "gx-ChartPrimitives-CHART_AREA_CSS-c10uj5yt";
+/** @internal Overlapping areas (AreaChart): the 1.x 12% fill, so lines behind stay readable. */
+var CHART_AREA_OVERLAP_CSS = "gx-ChartPrimitives-CHART_AREA_OVERLAP_CSS-cyuty3o";
+/** @internal Stacked area bands (AreaChart): a firmer fill, since bands never overlap. */
+var CHART_AREA_STACKED_CSS = "gx-ChartPrimitives-CHART_AREA_STACKED_CSS-c1ob2op2";
+/** @internal A bar (BarChart, Sparkline bars). */
+var CHART_BAR_CSS = "gx-ChartPrimitives-CHART_BAR_CSS-c8c506o";
+/** @internal A pie arc. */
+var CHART_ARC_CSS = "gx-ChartPrimitives-CHART_ARC_CSS-ceqlpek";
+/** @internal A point dot, haloed by the canvas so it reads over the line. */
+var CHART_POINT_CSS = "gx-ChartPrimitives-CHART_POINT_CSS-c1fcbddl";
+/** @internal A filled heatmap cell: its ramp step arrives as `--gx-chart-mark-color`. */
+var HEATMAP_CELL_CSS = "gx-ChartPrimitives-HEATMAP_CELL_CSS-hpcxr59";
+/** @internal An empty heatmap cell (no reading): a hairline outline, distinct from the lowest step. */
+var HEATMAP_EMPTY_CELL_CSS = "gx-ChartPrimitives-HEATMAP_EMPTY_CELL_CSS-h1wvzvu4";
+/** @internal The engaged heatmap cell: an outline, so the rest keep their color for comparison. */
+var HEATMAP_ACTIVE_CELL_CSS = "gx-ChartPrimitives-HEATMAP_ACTIVE_CELL_CSS-h17guewt";
+/** @internal Emphasis of a mark. No transition: emphasis is feedback and snaps. */
+var CHART_MARK_STATE_TO_CSS_MAP = {
+	[ChartMarkState.ACTIVE]: "gx-ChartPrimitives-ChartMarkState_ACTIVE-cblgiyf",
+	[ChartMarkState.MUTED]: "gx-ChartPrimitives-ChartMarkState_MUTED-c1lr03cc",
+	[ChartMarkState.DIMMED]: "gx-ChartPrimitives-ChartMarkState_DIMMED-cizy1s8"
+};
+/** @internal A value grid hairline, drawn at every tick including zero. */
+var CHART_GRID_LINE_CSS = "gx-ChartPrimitives-CHART_GRID_LINE_CSS-c1ukq11d";
+/** @internal The rule at the engaged category (LineChart, AreaChart): one crisp pixel column. */
+var CHART_CURSOR_LINE_CSS = "gx-ChartPrimitives-CHART_CURSOR_LINE_CSS-cwcko2m";
+/** @internal The rule held at a selected category: one step firmer on the same neutral ramp. */
+var CHART_CURSOR_LINE_SELECTED_CSS = "gx-ChartPrimitives-CHART_CURSOR_LINE_SELECTED_CSS-cqwhvyz";
+/** @internal The band behind the engaged category (BarChart). */
+var CHART_CURSOR_BAND_CSS = "gx-ChartPrimitives-CHART_CURSOR_BAND_CSS-c1iaray";
+/** @internal The band held at a selected category. */
+var CHART_CURSOR_BAND_SELECTED_CSS = "gx-ChartPrimitives-CHART_CURSOR_BAND_SELECTED_CSS-cz6jod1";
+/** @internal A transparent hit target above the marks. */
+var CHART_HIT_TARGET_CSS = "gx-ChartPrimitives-CHART_HIT_TARGET_CSS-c1de5mqk";
+/** @internal A hit target that reports a click (`onSelect` set). */
+var CHART_HIT_TARGET_CLICKABLE_CSS = "gx-ChartPrimitives-CHART_HIT_TARGET_CLICKABLE_CSS-cjirv6a";
+/** @internal A `foreignObject` holding an axis label (`Text`). */
+var CHART_AXIS_LABEL_BOX_CSS = "gx-ChartPrimitives-CHART_AXIS_LABEL_BOX_CSS-c1armna5";
+/**
+* @internal A target's `mouseleave`: calls `onLeave` only when the pointer left the target layers,
+* not when it crossed into a neighbouring target, so the engaged category never flickers through
+* "nothing" between bands.
+*/
+function leaveUnlessTarget(event, onLeave) {
+	const next = event.relatedTarget;
+	const layers = event.currentTarget.parentElement;
+	if (next instanceof Element && layers?.contains(next) && next.classList.contains("gx-ChartPrimitives-CHART_HIT_TARGET_CSS-c1de5mqk")) return;
+	onLeave();
+}
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };
+export { CHART_ARC_CSS, CHART_AREA_CSS, CHART_AREA_OVERLAP_CSS, CHART_AREA_STACKED_CSS, CHART_AXIS_LABEL_BOX_CSS, CHART_BAR_CSS, CHART_CURSOR_BAND_CSS, CHART_CURSOR_BAND_SELECTED_CSS, CHART_CURSOR_LINE_CSS, CHART_CURSOR_LINE_SELECTED_CSS, CHART_GRID_LINE_CSS, CHART_HIT_TARGET_CLICKABLE_CSS, CHART_HIT_TARGET_CSS, CHART_LINE_CSS, CHART_LINE_DASHED_CSS, CHART_MARK_STATE_TO_CSS_MAP, CHART_POINT_CSS, HEATMAP_ACTIVE_CELL_CSS, HEATMAP_CELL_CSS, HEATMAP_EMPTY_CELL_CSS, leaveUnlessTarget };

package/dist/charts/ChartTooltip.d.ts

@@ -1,30 +1,24 @@
-import type { ChartTooltipModel, ChartTooltipRenderer } from "./types";
-import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition";
-/**
- * Positioned tooltip shared by the chart components.
- *
- * The positioner wraps a custom `renderer` too, so a caller replacing the body
- * still gets collision handling — in V1 the custom path received no positioning
- * at all and had to reimplement it.
- */
-interface ChartTooltipProps {
-    /**
-     * The model to display, or `null` when nothing is active.
-     *
-     * The element stays mounted while hidden so the fade can run; unmounting on
-     * hide is why a fade-out never appears.
-     */
+import { ChartLegendSwatch } from "./ChartLegend.js";
+import type { ChartTooltipModel, ChartTooltipRenderer } from "./types.js";
+import { type ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
+/** @internal Props of `ChartTooltip`. */
+export interface ChartTooltipProps {
+    /** The model to show (anchor in plot-box coordinates), or `null` when nothing is engaged. */
     model: ChartTooltipModel | null;
+    /** Plot box width. */
     containerWidth: number;
+    /** Plot box height. */
     containerHeight: number;
-    /** Half a category's width, so the tooltip sits beside the bars, not over them. */
-    anchorHalfWidth?: number;
-    /** Radial charts pass their centre so the tooltip is pushed outward. */
-    placeAwayFromX?: number;
-    verticalAlign?: ChartTooltipVerticalAlign;
-    renderer?: ChartTooltipRenderer;
-    /** Cap on built-in body rows; the rest collapse into "+N more". */
-    maxItems?: number;
+    /** Half a category's width, so the tooltip sits beside the marks. */
+    anchorHalfWidth?: number | undefined;
+    /** Radial charts pass their center so the tooltip moves outward. */
+    placeAwayFromX?: number | undefined;
+    /** Vertical placement. */
+    verticalAlign?: ChartTooltipVerticalAlign | undefined;
+    /** Replaces the body. */
+    renderTooltip?: ChartTooltipRenderer | undefined;
+    /** Row swatch shape, matching the chart's legend. Defaults to `CIRCLE`. */
+    swatch?: ChartLegendSwatch | undefined;
 }
-declare const ChartTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, maxItems, }: ChartTooltipProps) => import("react").JSX.Element;
-export default ChartTooltip;
+/** @internal The chart tooltip body and positioner. */
+export declare function ChartTooltip({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderTooltip, swatch, }: ChartTooltipProps): import("react").JSX.Element;