@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/charts/ChartPrimitives.d.ts

@@ -0,0 +1,195 @@
+/**
+ * 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.
+ */
+export declare const ChartRoot: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $fillWidth?: boolean;
+    $fillHeight?: boolean;
+}>;
+/**
+ * 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.
+ */
+export declare const ChartPlotBox: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $reservedHeight?: number;
+    $reservedAspectRatio?: number;
+    $fillHeight?: boolean;
+}>;
+/**
+ * `overflow: visible` lets a value label above a full-height bar paint outside
+ * the plot rather than being clipped by the root SVG.
+ */
+export declare const ChartSvg: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGSVGElement> & Record<never, unknown>>;
+/**
+ * Cancels the restore delay for every mark beneath it while a category is
+ * engaged. See {@link markState}.
+ */
+export declare const ChartPlotGroup: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGGElement> & Record<never, unknown>>;
+export declare const ChartBarPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+export declare const ChartLinePath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+export declare const ChartAreaPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+export declare const ChartPointCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & Record<never, unknown>>;
+export declare const ChartArcPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
+/**
+ * Per-category hit target, rendered above the marks.
+ *
+ * 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 fires no events at all — so the tooltip holds
+ * still instead of chasing each segment.
+ */
+export declare const ChartHitTarget: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
+/** Full-plot backdrop; clicking it clears a pinned category. */
+export declare const ChartBackdrop: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
+/**
+ * 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.
+ */
+export declare const ChartGridLine: import("react").ComponentType<Pick<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | keyof import("react").SVGLineElementAttributes<SVGLineElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/** Vertical rule marking the hovered category on a line chart. */
+export declare const ChartCursorLine: import("react").ComponentType<Pick<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, "as" | keyof import("react").SVGLineElementAttributes<SVGLineElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").SVGLineElementAttributes<SVGLineElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+export declare const ChartAxisLabelBox: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGForeignObjectElement> & Record<never, unknown>>;
+/**
+ * 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.
+ */
+export declare const ChartTooltipPositioner: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $x: number;
+    $y: number;
+    $isVisible: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as" | "$x" | "$y" | "$isVisible"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $x: number;
+    $y: number;
+    $isVisible: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $x: number;
+    $y: number;
+    $isVisible: boolean;
+} & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/**
+ * 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.
+ */
+export declare const ChartCenterBox: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $centerX: number;
+    $centerY: number;
+    $diameter: number;
+}>;
+/**
+ * Sits slightly above centre, over where the bars would be, so the axes stay
+ * legible underneath.
+ */
+export declare const ChartEmptyOverlay: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as"> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}> & {
+    __wyw_meta: unknown;
+} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme: import("../theme").Theme;
+} & {
+    as?: React.ElementType;
+}>, {}>;
+/**
+ * Aligns the legend under the plot rather than the value-axis gutter.
+ *
+ * Also cancels the restore delay for its entries while the legend is dimming,
+ * exactly as {@link ChartPlotGroup} does for the marks. The legend renders
+ * *outside* the SVG, so the plot group's selector cannot reach it — without this
+ * the marks dim instantly while their legend entries sit through the full
+ * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
+ */
+export declare const ChartLegendRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    $inset: number;
+}>;
+/**
+ * One legend entry, when the legend is interactive.
+ *
+ * A real `<button>` rather than a styled div: it is clickable, so it has to be
+ * reachable and operable by keyboard. `aria-pressed` carries the pinned state —
+ * the only thing here a screen reader can truthfully announce, since the plot
+ * itself is `role="img"` and its marks are not in the accessibility tree.
+ *
+ * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
+ * with the series it names.
+ */
+export declare const ChartLegendItemButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+/** The same row, when the legend is inert — no button semantics to announce. */
+export declare const ChartLegendItemStatic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/charts/ChartPrimitives.js

@@ -0,0 +1,268 @@
+import { withTheme } from "../theme/GalaxyTheme.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 ramp.
+*
+* The delay asymmetry is deliberate and load-bearing: highlighting is instant,
+* but restoring waits, so sweeping the pointer across categories reads as one
+* gesture instead of a strobe. The plot sets `data-active` while any category is
+* engaged, which cancels the delay for the whole subtree.
+*/
+/**
+* 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.
+*/
+var _exp = () => ({ $fillWidth }) => $fillWidth ? "flex" : "inline-flex";
+var _exp2 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
+var _exp3 = () => ({ $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()]
+	}
+});
+/**
+* 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 _exp4 = () => ({ $reservedAspectRatio }) => $reservedAspectRatio ?? "auto";
+var _exp5 = () => ({ $reservedHeight }) => $reservedHeight ? `${$reservedHeight}px` : "auto";
+var _exp6 = () => ({ $fillHeight }) => $fillHeight ? "1 1 0%" : "0 1 auto";
+var _exp7 = () => ({ $fillHeight }) => $fillHeight ? "0" : "auto";
+var ChartPlotBox = /*#__PURE__*/ styled("div")({
+	name: "ChartPlotBox",
+	class: "c1fvbgkp",
+	propsAsIs: false,
+	vars: {
+		"c1fvbgkp-0": [_exp4()],
+		"c1fvbgkp-1": [_exp5()],
+		"c1fvbgkp-2": [_exp6()],
+		"c1fvbgkp-3": [_exp7()]
+	}
+});
+/**
+* `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
+});
+/**
+* Cancels the restore delay for every mark beneath it while a category is
+* engaged. See {@link markState}.
+*/
+var ChartPlotGroup = /*#__PURE__*/ styled("g")({
+	name: "ChartPlotGroup",
+	class: "cyuty3o",
+	propsAsIs: true
+});
+var ChartBarPath = /*#__PURE__*/ styled("path")({
+	name: "ChartBarPath",
+	class: "c1ob2op2",
+	propsAsIs: true
+});
+var ChartLinePath = /*#__PURE__*/ styled("path")({
+	name: "ChartLinePath",
+	class: "c8c506o",
+	propsAsIs: true
+});
+var ChartAreaPath = /*#__PURE__*/ styled("path")({
+	name: "ChartAreaPath",
+	class: "ceqlpek",
+	propsAsIs: true
+});
+var ChartPointCircle = /*#__PURE__*/ styled("circle")({
+	name: "ChartPointCircle",
+	class: "c1fcbddl",
+	propsAsIs: true
+});
+var ChartArcPath = /*#__PURE__*/ styled("path")({
+	name: "ChartArcPath",
+	class: "cpcxr59",
+	propsAsIs: true
+});
+/**
+* Per-category hit target, rendered above the marks.
+*
+* 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 fires no events at all — so the tooltip holds
+* still instead of chasing each segment.
+*/
+var ChartHitTarget = /*#__PURE__*/ styled("rect")({
+	name: "ChartHitTarget",
+	class: "c1wvzvu4",
+	propsAsIs: true
+});
+/** Full-plot backdrop; clicking it clears a pinned category. */
+var ChartBackdrop = /*#__PURE__*/ styled("rect")({
+	name: "ChartBackdrop",
+	class: "c17guewt",
+	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 _exp11 = () => ({ theme }) => theme.color.border.primary;
+var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
+	name: "ChartGridLine",
+	class: "cblgiyf",
+	propsAsIs: true,
+	vars: { "cblgiyf-0": [_exp11()] }
+}));
+/** Vertical rule marking the hovered category on a line chart. */
+var _exp12 = () => ({ theme }) => theme.color.border.secondary;
+var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
+	name: "ChartCursorLine",
+	class: "c1lr03cc",
+	propsAsIs: true,
+	vars: { "c1lr03cc-0": [_exp12()] }
+}));
+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 _exp13 = () => ({ $x }) => `${$x}px`;
+var _exp14 = () => ({ $y }) => `${$y}px`;
+var _exp17 = () => ({ theme }) => theme.color.border.primary;
+var _exp18 = () => ({ theme }) => theme.color.background.primary;
+var _exp19 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ChartTooltipPositioner",
+	class: "c1ukq11d",
+	propsAsIs: false,
+	vars: {
+		"c1ukq11d-0": [_exp13()],
+		"c1ukq11d-1": [_exp14()],
+		"c1ukq11d-2": [_exp17()],
+		"c1ukq11d-3": [_exp18()],
+		"c1ukq11d-4": [_exp19()]
+	}
+}));
+/**
+* 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 _exp23 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp24 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp26 = () => ({ $diameter }) => `${$diameter}px`;
+var ChartCenterBox = /*#__PURE__*/ styled("div")({
+	name: "ChartCenterBox",
+	class: "cwcko2m",
+	propsAsIs: false,
+	vars: {
+		"cwcko2m-0": [_exp23()],
+		"cwcko2m-1": [_exp24()],
+		"cwcko2m-2": [_exp26()]
+	}
+});
+/**
+* Sits slightly above centre, over where the bars would be, so the axes stay
+* legible underneath.
+*/
+var _exp27 = () => ({ theme }) => theme.color.border.primary;
+var _exp28 = () => ({ theme }) => theme.color.background.tertiary;
+var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
+	name: "ChartEmptyOverlay",
+	class: "cqwhvyz",
+	propsAsIs: false,
+	vars: {
+		"cqwhvyz-0": [_exp27()],
+		"cqwhvyz-1": [_exp28()]
+	}
+}));
+/**
+* Aligns the legend under the plot rather than the value-axis gutter.
+*
+* Also cancels the restore delay for its entries while the legend is dimming,
+* exactly as {@link ChartPlotGroup} does for the marks. The legend renders
+* *outside* the SVG, so the plot group's selector cannot reach it — without this
+* the marks dim instantly while their legend entries sit through the full
+* {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
+*/
+var _exp29 = () => ({ $inset }) => `${$inset}px`;
+var ChartLegendRow = /*#__PURE__*/ styled("div")({
+	name: "ChartLegendRow",
+	class: "c1iaray",
+	propsAsIs: false,
+	vars: { "c1iaray-0": [_exp29()] }
+});
+/**
+* One legend entry, when the legend is interactive.
+*
+* A real `<button>` rather than a styled div: it is clickable, so it has to be
+* reachable and operable by keyboard. `aria-pressed` carries the pinned state —
+* the only thing here a screen reader can truthfully announce, since the plot
+* itself is `role="img"` and its marks are not in the accessibility tree.
+*
+* Shares the mark opacity ramp via `data-state`, so an entry recedes in step
+* with the series it names.
+*/
+var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
+	name: "ChartLegendItemButton",
+	class: "cz6jod1",
+	propsAsIs: false
+});
+/** The same row, when the legend is inert — no button semantics to announce. */
+var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
+	name: "ChartLegendItemStatic",
+	class: "c1de5mqk",
+	propsAsIs: false
+});
+//#endregion
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBackdrop, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };

package/dist/charts/ChartTooltip.d.ts

@@ -1,7 +1,28 @@
-import type { ChartTooltipData, ChartValueFormatter } from "./types";
-interface ChartTooltipProps {
-    data: ChartTooltipData | null;
-    valueFormatter?: ChartValueFormatter;
+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 ChartHoverTooltipProps {
+    /**
+     * 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.
+     */
+    model: ChartTooltipModel | null;
+    containerWidth: number;
+    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;
 }
-declare const ChartTooltip: ({ data, valueFormatter }: ChartTooltipProps) => import("react").JSX.Element | null;
-export default ChartTooltip;
+declare const ChartHoverTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, }: ChartHoverTooltipProps) => import("react").JSX.Element;
+export default ChartHoverTooltip;

package/dist/charts/ChartTooltip.js

@@ -1,66 +1,72 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import FlexItem from "../containers/FlexItem.js";
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
 import Circle from "../shapes/Circle.js";
-import { defaultValueFormatter } from "./utils.js";
-/* empty css                       */
-import { styled } from "@linaria/react";
+import { useChartTooltipPosition } from "./useChartTooltipPosition.js";
+import { ChartTooltipPositioner } from "./ChartPrimitives.js";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartTooltip.tsx
-var _exp = () => ({ $x }) => $x;
-var _exp2 = () => ({ $y }) => $y;
-var _exp3 = () => ({ theme }) => theme.color.background.secondary;
-var _exp4 = () => ({ theme }) => theme.color.border.secondary;
-var _exp5 = () => ({ $visible }) => $visible ? 1 : 0;
-var TooltipContainer = withTheme(/*#__PURE__*/ styled("div")({
-	name: "TooltipContainer",
-	class: "ttysfji",
-	propsAsIs: false,
-	vars: {
-		"ttysfji-0": [_exp(), "px"],
-		"ttysfji-1": [_exp2(), "px"],
-		"ttysfji-2": [_exp3()],
-		"ttysfji-3": [_exp4()],
-		"ttysfji-4": [_exp5()]
-	}
-}));
-var ChartTooltip = ({ data, valueFormatter = defaultValueFormatter }) => {
-	if (!data) return null;
-	return /* @__PURE__ */ jsx(TooltipContainer, {
-		$x: data.x,
-		$y: data.y,
-		$visible: true,
-		children: /* @__PURE__ */ jsxs(FlexWrapper, {
+var ChartHoverTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer }) => {
+	const [retained, setRetained] = useState(model);
+	if (model !== null && model !== retained) setRetained(model);
+	const { tooltipRef, x, y, isMeasured } = useChartTooltipPosition({
+		anchorX: model?.anchorX ?? retained?.anchorX ?? 0,
+		anchorY: model?.anchorY ?? retained?.anchorY ?? 0,
+		containerWidth,
+		containerHeight,
+		anchorHalfWidth,
+		placeAwayFromX,
+		verticalAlign
+	});
+	const displayed = model ?? retained;
+	return /* @__PURE__ */ jsx(ChartTooltipPositioner, {
+		ref: tooltipRef,
+		$x: x,
+		$y: y,
+		$isVisible: model !== null && isMeasured,
+		role: "tooltip",
+		"aria-hidden": model === null,
+		children: !displayed ? null : renderer ? renderer(displayed) : /* @__PURE__ */ jsxs(FlexWrapper, {
 			direction: FlexDirection.COLUMN,
-			gap: 6,
+			gap: 8,
+			fillWidth: true,
 			children: [/* @__PURE__ */ jsx(Text, {
 				size: TextSize.BODY_SM,
-				weight: TextWeight.MEDIUM,
-				children: data.label
-			}), data.items.map((item) => /* @__PURE__ */ jsxs(FlexWrapper, {
-				alignItems: AlignItems.CENTER,
-				justifyContent: JustifyContent.SPACE_BETWEEN,
-				gap: 32,
+				variant: TextVariant.TERTIARY,
+				children: displayed.label
+			}), /* @__PURE__ */ jsx(FlexWrapper, {
+				direction: FlexDirection.COLUMN,
+				gap: 6,
 				fillWidth: true,
-				children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+				children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(FlexWrapper, {
 					alignItems: AlignItems.CENTER,
-					gap: 6,
-					children: [/* @__PURE__ */ jsx(Circle, {
-						size: 8,
-						hex: item.color
+					justifyContent: JustifyContent.SPACE_BETWEEN,
+					gap: 16,
+					fillWidth: true,
+					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+						alignItems: AlignItems.CENTER,
+						gap: 6,
+						children: [/* @__PURE__ */ jsx(FlexItem, {
+							shrink: 0,
+							children: /* @__PURE__ */ jsx(Circle, {
+								size: 8,
+								hex: row.color
+							})
+						}), /* @__PURE__ */ jsx(Text, {
+							size: TextSize.BODY_SM,
+							isEllipsis: true,
+							children: row.label
+						})]
 					}), /* @__PURE__ */ jsx(Text, {
-						size: TextSize.CAPTION,
-						variant: TextVariant.PRIMARY,
-						children: item.seriesName
+						size: TextSize.BODY_SM,
+						weight: TextWeight.MEDIUM,
+						children: row.formattedValue
 					})]
-				}), /* @__PURE__ */ jsx(Text, {
-					size: TextSize.CAPTION,
-					weight: TextWeight.MEDIUM,
-					children: valueFormatter(item.value)
-				})]
-			}, item.seriesKey))]
+				}, row.key))
+			})]
 		})
 	});
 };
 //#endregion
-export { ChartTooltip as default };
+export { ChartHoverTooltip as default };