@ledgerhq/lumen-ui-rnative-visualization 0.1.12 → 0.1.14

package/dist/typescript/src/lib/Components/Scrubber/types.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { DrawingArea } from '../../utils/types';
 export type ScrubberContextValue = {
     /**
      * Whether scrubbing interactions are enabled.
@@ -32,12 +33,104 @@ export type ScrubberProviderProps = {
      */
     onScrubberPositionChange?: (index: number | undefined) => void;
 };
-export type ScrubberProps = {
+export type ChartTooltipItemData = {
+    /**
+     * Label displayed on the left side of the row.
+     */
+    label: string | number;
+    /**
+     * Value displayed on the right side of the row.
+     */
+    value: string | number;
+};
+export type ChartTooltipItemProps = ChartTooltipItemData & {
+    /**
+     * X position in SVG coordinate space.
+     * @default 0
+     */
+    x?: number;
+    /**
+     * Y midline position in SVG coordinate space.
+     * @default 0
+     */
+    y?: number;
     /**
-     * Formats a label string shown above the reference line for a given data index.
-     * When omitted, no label is rendered.
+     * Width allocated to this row, used to right-align the value text.
      */
-    label?: (dataIndex: number) => string;
+    width: number;
+    /**
+     * Optional callback ref forwarded to the label `<Text>` element.
+     * Useful to measure the label's natural width via `getBBox` for auto-fit layouts.
+     */
+    labelRef?: (el: SvgBBoxElement | null) => void;
+    /**
+     * Optional callback ref forwarded to the value `<Text>` element.
+     * Useful to measure the value's natural width via `getBBox` for auto-fit layouts.
+     */
+    valueRef?: (el: SvgBBoxElement | null) => void;
+};
+/**
+ * Minimal interface for an SVG element that supports `getBBox`.
+ * Handles both react-native-svg (returns `Rect | undefined`) and web DOM SVG
+ * (returns `DOMRect` synchronously or a Promise on native bridge).
+ */
+export type SvgBBoxElement = {
+    getBBox: () => {
+        width: number;
+    } | undefined | Promise<{
+        width: number;
+    } | undefined>;
+};
+export type ScrubberTooltipLayoutProps = {
+    /**
+     * Horizontal gap in pixels between the scrubber line and the tooltip box.
+     * @default 10
+     */
+    offset?: number;
+    /**
+     * Minimum width in pixels. The tooltip auto-fits to the rendered content
+     * but never collapses below this floor; raise it to avoid jitter when
+     * value length changes between indices.
+     * @default 80
+     */
+    minWidth?: number;
+};
+export type ScrubberTooltipProps = ScrubberTooltipLayoutProps & {
+    /**
+     * Horizontal pixel position of the scrubber line within the SVG coordinate
+     * space. Used to place the tooltip left or right of the line.
+     */
+    pixelX: number;
+    /**
+     * Bounding box of the chart's drawing area (x, y, width, height). Used to
+     * constrain the tooltip so it never overflows the chart boundaries.
+     */
+    drawingArea: DrawingArea;
+    /**
+     * Optional title displayed at the top of the tooltip. Omit to render
+     * the tooltip without a title row.
+     */
+    title?: string | number;
+    /**
+     * List of label/value pairs rendered as rows inside the tooltip body.
+     */
+    items: ChartTooltipItemData[];
+};
+/**
+ * Return value of the `tooltip` callback on {@link ScrubberProps}.
+ */
+export type ScrubberTooltipContent = ScrubberTooltipLayoutProps & {
+    /**
+     * Optional header. Static value or callback per data index.
+     * A callback may return `undefined` to suppress the title.
+     */
+    title?: string | number | ((index: number) => string | number | undefined);
+    /**
+     * Tooltip rows for this index. Return an empty array to hide the tooltip.
+     */
+    items: ChartTooltipItemData[];
+};
+export type ScrubberProps = {
     /**
      * Hides the vertical reference line.
      * @default false
@@ -53,5 +146,11 @@ export type ScrubberProps = {
      * @default false
      */
     showBeacons?: boolean;
+    /**
+     * Produces tooltip content for the active data index. When set, {@link DefaultScrubberTooltip}
+     * is rendered. Optional `offset` and `minWidth` on the returned object tune layout.
+     * Return `{ items: [] }` to hide the tooltip at an index.
+     */
+    tooltip?: (dataIndex: number) => ScrubberTooltipContent;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/lib/Components/Scrubber/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Scrubber/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Scrubber/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,GAAG;IACzD;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,MACL;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GACjB,SAAS,GACT,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,GAAG;IAC9D;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,GAAG;IAChE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;IAC3E;;OAEG;IACH,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,sBAAsB,CAAC;CACzD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative-visualization",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -31,7 +31,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.3",
+    "@ledgerhq/lumen-utils-shared": "0.1.4",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0"
@@ -44,8 +44,8 @@
   },
   "peerDependencies": {
     "@types/react": "^19.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.14",
-    "@ledgerhq/lumen-ui-rnative": "0.1.35",
+    "@ledgerhq/lumen-design-core": "0.1.15",
+    "@ledgerhq/lumen-ui-rnative": "0.1.37",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-svg": "^15.0.0",

package/src/lib/Components/CartesianChart/CartesianChart.tsx

@@ -30,7 +30,6 @@ export function CartesianChart({
   const [measuredWidth, setMeasuredWidth] = useState<number | undefined>(width);
 
   const needsMeasurement = width === undefined;
-
   const handleLayout = useCallback(
     (e: LayoutChangeEvent) => {
       if (needsMeasurement) {

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.tsx

@@ -0,0 +1,54 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+import { memo } from 'react';
+import { G, Text as SvgText } from 'react-native-svg';
+
+import type { ChartTooltipItemProps } from '../types';
+import { PADDING_X } from './constants';
+
+/**
+ * Memoized so it only re-renders when one of its primitive props actually
+ * changes. Combined with the stable per-index ref callbacks built in
+ * `DefaultScrubberTooltip`, this keeps the row out of the per-scrub-frame
+ * reconciliation path when its label / value / position have not changed.
+ */
+export const ChartTooltipItem = memo(function ChartTooltipItem({
+  label,
+  value,
+  x = 0,
+  y = 0,
+  width,
+  labelRef,
+  valueRef,
+}: Readonly<ChartTooltipItemProps>) {
+  const { theme } = useTheme();
+
+  return (
+    <G>
+      <SvgText
+        ref={labelRef}
+        x={x + PADDING_X}
+        y={y}
+        textAnchor='start'
+        alignmentBaseline='central'
+        fill={theme.colors.text.muted}
+        fontSize={theme.typographies.body4.fontSize}
+        fontFamily={theme.fontFamilies.sans}
+      >
+        {String(label)}
+      </SvgText>
+      <SvgText
+        ref={valueRef}
+        x={x + width - PADDING_X}
+        y={y}
+        textAnchor='end'
+        alignmentBaseline='central'
+        fill={theme.colors.text.base}
+        fontSize={theme.typographies.body4.fontSize}
+        fontWeight={theme.typographies.body4.fontWeight}
+        fontFamily={theme.fontFamilies.sans}
+      >
+        {String(value)}
+      </SvgText>
+    </G>
+  );
+});

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.test.tsx

@@ -0,0 +1,259 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { render } from '@testing-library/react-native';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { CartesianChart } from '../../CartesianChart';
+import { ScrubberContextProvider } from '../context';
+import { Scrubber } from '../Scrubber';
+import type { ScrubberContextValue, ScrubberTooltipContent } from '../types';
+
+const sampleSeries = [
+  { id: 's1', stroke: '#7B61FF', data: [10, 20, 30, 40, 50] },
+];
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+    {children}
+  </ThemeProvider>
+);
+
+const activeScrubberContext: ScrubberContextValue = {
+  enableScrubbing: true,
+  scrubberPosition: 2,
+  onScrubberPositionChange: () => undefined,
+};
+
+const idleScrubberContext: ScrubberContextValue = {
+  enableScrubbing: true,
+  scrubberPosition: undefined,
+  onScrubberPositionChange: () => undefined,
+};
+
+const renderTooltip = ({
+  scrubberProps = { tooltip: () => ({ items: [] }) },
+  scrubberContext = activeScrubberContext,
+  width = 400,
+  height = 200,
+}: {
+  scrubberProps?: ComponentProps<typeof Scrubber>;
+  scrubberContext?: ScrubberContextValue;
+  width?: number;
+  height?: number;
+} = {}) =>
+  render(
+    <Wrapper>
+      <CartesianChart series={sampleSeries} width={width} height={height}>
+        <ScrubberContextProvider value={scrubberContext}>
+          <Scrubber {...scrubberProps} />
+        </ScrubberContextProvider>
+      </CartesianChart>
+    </Wrapper>,
+  );
+
+describe('DefaultScrubberTooltip', () => {
+  it('renders nothing when no scrubber position is active', () => {
+    const { queryByTestId } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'Date', value: 'Jan' }] }),
+      },
+      scrubberContext: idleScrubberContext,
+    });
+    expect(queryByTestId('chart-tooltip')).toBeNull();
+  });
+
+  it('renders nothing when items callback returns an empty array', () => {
+    const { queryByTestId } = renderTooltip({
+      scrubberProps: { tooltip: () => ({ items: [] }) },
+    });
+    expect(queryByTestId('chart-tooltip')).toBeNull();
+  });
+
+  it('renders the tooltip group when scrubber is active and items are provided', () => {
+    const { getByTestId } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'Date', value: 'Jan' }] }),
+      },
+    });
+    expect(getByTestId('chart-tooltip')).toBeTruthy();
+  });
+
+  it('renders the background rect', () => {
+    const { getByTestId } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'Date', value: 'Jan' }] }),
+      },
+    });
+    expect(getByTestId('chart-tooltip-rect')).toBeTruthy();
+  });
+
+  it('renders item label and value text', () => {
+    const { getByText } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'Date', value: 'Jan' }] }),
+      },
+    });
+    expect(getByText('Date')).toBeTruthy();
+    expect(getByText('Jan')).toBeTruthy();
+  });
+
+  it('renders multiple items', () => {
+    const { getByText } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({
+          items: [
+            { label: 'Date', value: 'Jan' },
+            { label: 'Price', value: '$10' },
+          ],
+        }),
+      },
+    });
+    expect(getByText('Date')).toBeTruthy();
+    expect(getByText('Jan')).toBeTruthy();
+    expect(getByText('Price')).toBeTruthy();
+    expect(getByText('$10')).toBeTruthy();
+  });
+
+  it('passes the active data index to the tooltip callback', () => {
+    const tooltip = jest.fn().mockReturnValue({
+      items: [{ label: 'i', value: '0' }],
+    }) as unknown as (index: number) => ScrubberTooltipContent;
+    renderTooltip({ scrubberProps: { tooltip } });
+    expect(tooltip).toHaveBeenCalledWith(
+      activeScrubberContext.scrubberPosition,
+    );
+  });
+
+  it('suppresses the tooltip when items returns empty for the active index', () => {
+    const { queryByTestId } = renderTooltip({
+      scrubberProps: { tooltip: () => ({ items: [] }) },
+    });
+    expect(queryByTestId('chart-tooltip')).toBeNull();
+  });
+
+  describe('positioning logic', () => {
+    const defaultTooltip = (): ScrubberTooltipContent => ({
+      items: [{ label: 'Date', value: 'Jan' }],
+    });
+
+    const scrubberAt = (position: number): ScrubberContextValue => ({
+      enableScrubbing: true,
+      scrubberPosition: position,
+      onScrubberPositionChange: () => undefined,
+    });
+
+    it('places tooltip to the right of the scrubber when mid-chart', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: { tooltip: defaultTooltip },
+        scrubberContext: scrubberAt(2),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(210);
+    });
+
+    it('flips tooltip left when right side would overflow (index 3)', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ ...defaultTooltip(), minWidth: 120 }),
+        },
+        scrubberContext: scrubberAt(3),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(145);
+    });
+
+    it('flips at the rightmost scrubber position (index 4)', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ ...defaultTooltip(), minWidth: 120 }),
+        },
+        scrubberContext: scrubberAt(4),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(220);
+    });
+
+    it('custom offset shifts the no-flip tooltip position', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ ...defaultTooltip(), offset: 20 }),
+        },
+        scrubberContext: scrubberAt(2),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(220);
+    });
+
+    it('wider minWidth can trigger a flip that the default width would not', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ ...defaultTooltip(), minWidth: 200 }),
+        },
+        scrubberContext: scrubberAt(2),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(50);
+    });
+  });
+
+  describe('title in tooltip content', () => {
+    it('renders a static string title', () => {
+      const { getByTestId, getByText } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({
+            title: 'My Title',
+            items: [{ label: 'T', value: 'V' }],
+          }),
+        },
+      });
+      expect(getByTestId('chart-tooltip-title')).toBeTruthy();
+      expect(getByText('My Title')).toBeTruthy();
+    });
+
+    it('renders the title returned by a callback', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({
+            title: (i: number) => `Index ${i}`,
+            items: [{ label: 'T', value: 'V' }],
+          }),
+        },
+      });
+      expect(getByTestId('chart-tooltip-title')).toBeTruthy();
+    });
+
+    it('passes the active data index to the title callback', () => {
+      const title = jest.fn().mockReturnValue('Title') as unknown as (
+        index: number,
+      ) => string;
+      renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({
+            title,
+            items: [{ label: 'T', value: 'V' }],
+          }),
+        },
+      });
+      expect(title).toHaveBeenCalledWith(
+        activeScrubberContext.scrubberPosition,
+      );
+    });
+
+    it('does not render a title element when title is undefined', () => {
+      const { queryByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ items: [{ label: 'T', value: 'V' }] }),
+        },
+      });
+      expect(queryByTestId('chart-tooltip-title')).toBeNull();
+    });
+
+    it('does not render a title element when title callback returns undefined', () => {
+      const { queryByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({
+            title: () => undefined,
+            items: [{ label: 'T', value: 'V' }],
+          }),
+        },
+      });
+      expect(queryByTestId('chart-tooltip-title')).toBeNull();
+    });
+  });
+});

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.tsx

@@ -0,0 +1,105 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+import { G, Rect, Text as SvgText } from 'react-native-svg';
+
+import type { ScrubberTooltipProps } from '../types';
+import { ChartTooltipItem } from './ChartTooltipItem';
+import {
+  BORDER_RADIUS,
+  DEFAULT_OFFSET,
+  DEFAULT_TOOLTIP_MIN_WIDTH,
+  PADDING_X,
+  PADDING_Y,
+  ROW_GAP,
+  ROW_HEIGHT,
+} from './constants';
+import {
+  computeItemsBaseY,
+  computeTooltipHeight,
+  computeTooltipWidth,
+  computeTooltipX,
+  useBuildRefSetters,
+  useTooltipMeasurement,
+} from './utils';
+
+/**
+ * Default structured tooltip anchored to the scrubber line.
+ *
+ * The tooltip auto-fits its width to the rendered content via `getBBox`,
+ * with `minWidth` acting as an optional minimum width override. Use with
+ * {@link ScrubberProps.tooltip}; layout options (`offset`, `minWidth`) belong
+ * on the object returned from the `tooltip` callback. Return `{ items: [] }`
+ * from the callback to hide the tooltip at a given index.
+ */
+export function DefaultScrubberTooltip({
+  pixelX,
+  drawingArea,
+  title,
+  items,
+  offset = DEFAULT_OFFSET,
+  minWidth = DEFAULT_TOOLTIP_MIN_WIDTH,
+}: Readonly<ScrubberTooltipProps>) {
+  const { theme } = useTheme();
+
+  const hasTitle = title !== undefined;
+
+  const { widths, titleRef, labelRefs, valueRefs } = useTooltipMeasurement(
+    items,
+    hasTitle,
+    title,
+  );
+
+  const labelRefSetters = useBuildRefSetters(labelRefs, items.length);
+  const valueRefSetters = useBuildRefSetters(valueRefs, items.length);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  const tooltipWidth = computeTooltipWidth(widths, hasTitle, minWidth);
+  const tooltipX = computeTooltipX(pixelX, offset, tooltipWidth, drawingArea);
+  const tooltipHeight = computeTooltipHeight(items.length, hasTitle);
+  const itemsBaseY = computeItemsBaseY(drawingArea.y, hasTitle);
+
+  return (
+    <G testID='chart-tooltip' opacity={widths === null ? 0 : 1}>
+      <Rect
+        testID='chart-tooltip-rect'
+        x={tooltipX}
+        y={drawingArea.y}
+        width={tooltipWidth}
+        height={tooltipHeight}
+        rx={BORDER_RADIUS}
+        fill={theme.colors.bg.muted}
+      />
+      {hasTitle && (
+        <SvgText
+          ref={(el) => {
+            titleRef.current = el as unknown as (typeof titleRef)['current'];
+          }}
+          testID='chart-tooltip-title'
+          x={tooltipX + PADDING_X}
+          y={drawingArea.y + PADDING_Y + ROW_HEIGHT / 2}
+          alignmentBaseline='central'
+          fill={theme.colors.text.base}
+          fontSize={theme.typographies.body4.fontSize}
+          fontWeight={theme.typographies.body4.fontWeight}
+          fontFamily={theme.fontFamilies.sans}
+        >
+          {String(title)}
+        </SvgText>
+      )}
+      {items.map((item, i) => (
+        <ChartTooltipItem
+          key={i}
+          label={item.label}
+          value={item.value}
+          x={tooltipX}
+          y={itemsBaseY + i * (ROW_HEIGHT + ROW_GAP) + ROW_HEIGHT / 2}
+          width={tooltipWidth}
+          labelRef={labelRefSetters[i]}
+          valueRef={valueRefSetters[i]}
+        />
+      ))}
+    </G>
+  );
+}

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/constants.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_OFFSET = 10;
+export const DEFAULT_TOOLTIP_MIN_WIDTH = 80;
+export const PADDING_X = 8;
+export const PADDING_Y = 8;
+export const ROW_HEIGHT = 16;
+export const ROW_GAP = 6;
+export const TITLE_GAP = 6;
+export const BORDER_RADIUS = 4;
+export const LABEL_VALUE_GAP = 12;