@coinbase/cds-web-visualization 3.4.0-beta.1 → 3.4.0-beta.11

package/esm/chart/scrubber/Scrubber.js

@@ -3,89 +3,82 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
+import React, { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
-import { axisTickLabelsInitialAnimationVariants } from '../axis';
 import { useCartesianChartContext } from '../ChartProvider';
 import { ReferenceLine } from '../line';
-import { getPointOnScale, useScrubberContext } from '../utils';
-import { ScrubberBeacon } from './ScrubberBeacon';
-import { ScrubberBeaconLabel } from './ScrubberBeaconLabel';
+import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, getPointOnScale, useScrubberContext } from '../utils';
+import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
+import { DefaultScrubberLabel } from './DefaultScrubberLabel';
+import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
+import { ScrubberBeaconLabelGroup } from './ScrubberBeaconLabelGroup';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const minGap = 2;
-
-/**
- * Configuration for scrubber functionality across chart components.
- * Provides consistent API with smart defaults and component customization.
- */
-
 /**
- * Unified component that manages all scrubber elements (beacons, line, labels)
- * with intelligent collision detection and consistent positioning.
+ * Unified component that manages all scrubber elements (beacons, line, labels).
  */
 export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     seriesIds,
     hideLine,
     label,
+    accessibilityLabel,
     lineStroke,
-    labelProps,
-    BeaconComponent,
+    BeaconComponent = DefaultScrubberBeacon,
     BeaconLabelComponent,
     LineComponent,
+    LabelComponent = DefaultScrubberLabel,
+    labelElevated,
     hideOverlay,
     overlayOffset = 2,
+    beaconLabelMinGap,
+    beaconLabelHorizontalOffset,
+    labelFont,
+    labelBoundsInset,
+    beaconLabelFont,
     testID,
     idlePulse,
+    beaconTransitions,
     styles,
     classNames
   } = _ref;
-  const scrubberGroupRef = useRef(null);
-  const ScrubberBeaconRefs = useRefMap();
+  const beaconGroupRef = React.useRef(null);
   const {
     scrubberPosition
   } = useScrubberContext();
   const {
     getXScale,
-    getYScale,
-    getSeriesData,
     getXAxis,
     animate,
     series,
-    drawingArea
+    drawingArea,
+    dataLength
   } = useCartesianChartContext();
-  const getStackedSeriesData = getSeriesData; // getSeriesData now returns stacked data
-
-  // Track label dimensions for collision detection
-  const [labelDimensions, setLabelDimensions] = useState(new Map());
 
   // Expose imperative handle with pulse method
   useImperativeHandle(ref, () => ({
     pulse: () => {
-      // Pulse all registered scrubber beacons
-      Object.values(ScrubberBeaconRefs.refs).forEach(beaconRef => {
-        beaconRef === null || beaconRef === void 0 || beaconRef.pulse();
-      });
+      var _beaconGroupRef$curre;
+      (_beaconGroupRef$curre = beaconGroupRef.current) === null || _beaconGroupRef$curre === void 0 || _beaconGroupRef$curre.pulse();
     }
   }));
+  const filteredSeriesIds = useMemo(() => {
+    if (seriesIds === undefined) {
+      var _series$map;
+      return (_series$map = series === null || series === void 0 ? void 0 : series.map(s => s.id)) !== null && _series$map !== void 0 ? _series$map : [];
+    }
+    return seriesIds;
+  }, [series, seriesIds]);
   const {
     dataX,
     dataIndex
   } = useMemo(() => {
-    var _series$reduce;
     const xScale = getXScale();
     const xAxis = getXAxis();
     if (!xScale) return {
       dataX: undefined,
       dataIndex: undefined
     };
-    const maxDataLength = (_series$reduce = series === null || series === void 0 ? void 0 : series.reduce((max, s) => {
-      var _seriesData$length;
-      const seriesData = getStackedSeriesData(s.id) || getSeriesData(s.id);
-      return Math.max(max, (_seriesData$length = seriesData === null || seriesData === void 0 ? void 0 : seriesData.length) !== null && _seriesData$length !== void 0 ? _seriesData$length : 0);
-    }, 0)) !== null && _series$reduce !== void 0 ? _series$reduce : 0;
-    const dataIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, maxDataLength - 1);
+    const dataIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, dataLength - 1);
 
     // Convert index to actual x value if axis has data
     let dataX;
@@ -99,317 +92,60 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       dataX,
       dataIndex
     };
-  }, [getXScale, getXAxis, series, scrubberPosition, getStackedSeriesData, getSeriesData]);
-  const beaconPositions = useMemo(() => {
-    var _series$filter$map$fi, _series$filter;
-    const xScale = getXScale();
-    if (!xScale || dataX === undefined || dataIndex === undefined) return [];
-    return (_series$filter$map$fi = series === null || series === void 0 || (_series$filter = series.filter(s => {
-      if (seriesIds === undefined) return true;
-      return seriesIds.includes(s.id);
-    })) === null || _series$filter === void 0 ? void 0 : _series$filter.map(s => {
-      const sourceData = getStackedSeriesData(s.id) || getSeriesData(s.id);
-
-      // Use dataIndex to get the y value from the series data array
-      const stuff = sourceData === null || sourceData === void 0 ? void 0 : sourceData[dataIndex];
-      let dataY;
-      if (Array.isArray(stuff)) {
-        dataY = stuff[stuff.length - 1];
-      } else if (typeof stuff === 'number') {
-        dataY = stuff;
-      }
-      if (dataY !== undefined) {
-        const yScale = getYScale(s.yAxisId);
-        if (!yScale) {
-          return undefined;
-        }
-        const pixelY = getPointOnScale(dataY, yScale);
-        const resolvedLabel = typeof s.label === 'function' ? s.label(dataIndex) : s.label;
-        return {
-          x: dataX,
-          y: dataY,
-          label: resolvedLabel,
-          pixelY,
-          targetSeries: s
-        };
-      }
-    }).filter(beacon => beacon !== undefined)) !== null && _series$filter$map$fi !== void 0 ? _series$filter$map$fi : [];
-  }, [getXScale, dataX, dataIndex, series, seriesIds, getStackedSeriesData, getSeriesData, getYScale]);
-  const labelVerticalInset = 2;
-  const labelHorizontalInset = 4;
-
-  // Calculate optimal label positioning strategy
-  const labelPositioning = useMemo(() => {
-    // Get current beacon IDs that are actually being rendered
-    const currentBeaconIds = new Set(beaconPositions.map(beacon => beacon === null || beacon === void 0 ? void 0 : beacon.targetSeries.id).filter(Boolean));
-
-    // Only use dimensions for beacons that are currently being rendered
-    const dimensions = Array.from(labelDimensions.values()).filter(dim => currentBeaconIds.has(dim.id));
-    if (dimensions.length === 0) return {
-      strategy: 'auto',
-      adjustments: new Map()
-    };
-    const adjustments = new Map();
-
-    // Sort by Y position to handle overlaps systematically
-    const sortedDimensions = [...dimensions].sort((a, b) => a.preferredY - b.preferredY);
+  }, [getXScale, getXAxis, scrubberPosition, dataLength]);
 
-    // Determine if we need to switch sides globally based on overflow
-    let globalSide = 'right';
-    const anchorRadius = 10; // Same as used in ScrubberBeaconLabel
-    const bufferPx = 5; // Small buffer to prevent premature switching
+  // Compute resolved accessibility label
+  const resolvedAccessibilityLabel = useMemo(() => {
+    if (dataIndex === undefined) return undefined;
 
-    // Safety check for valid bounds
-    if (drawingArea.width <= 0 || drawingArea.height <= 0) {
-      globalSide = 'right'; // Default to right if bounds are invalid
-    } else {
-      // Check if labels would overflow when positioned on the right side
-      // Account for anchor radius and padding when calculating right edge
-      const wouldOverflow = sortedDimensions.some(dim => {
-        const labelRightEdge = dim.preferredX + anchorRadius + labelHorizontalInset + dim.width + bufferPx;
-        return labelRightEdge > drawingArea.x + drawingArea.width;
-      });
-      globalSide = wouldOverflow ? 'left' : 'right';
-    }
-
-    // Initialize all labels at their preferred positions
-    for (const dim of sortedDimensions) {
-      adjustments.set(dim.id, {
-        x: dim.preferredX,
-        y: dim.preferredY,
-        side: globalSide
-      });
-    }
-
-    // Check for collisions and resolve them
-    const maxIterations = 10;
-    let iteration = 0;
-    while (iteration < maxIterations) {
-      let hasCollisions = false;
-      iteration++;
-
-      // Sort by current Y position for systematic collision resolution
-      const currentPositions = sortedDimensions.map(dim => _objectSpread(_objectSpread({}, dim), {}, {
-        currentY: adjustments.get(dim.id).y
-      })).sort((a, b) => a.currentY - b.currentY);
-
-      // Check adjacent labels for overlaps
-      for (let i = 0; i < currentPositions.length - 1; i++) {
-        const current = currentPositions[i];
-        const next = currentPositions[i + 1];
-        const currentAdjustment = adjustments.get(current.id);
-        const nextAdjustment = adjustments.get(next.id);
-
-        // Calculate required separation
-        const requiredSeparation = current.height / 2 + next.height / 2 + minGap;
-        const currentSeparation = nextAdjustment.y - currentAdjustment.y;
-        if (currentSeparation < requiredSeparation) {
-          hasCollisions = true;
-          const deficit = requiredSeparation - currentSeparation;
-
-          // Move labels apart - split the adjustment
-          const offsetPerLabel = deficit / 2;
-          adjustments.set(current.id, _objectSpread(_objectSpread({}, currentAdjustment), {}, {
-            y: currentAdjustment.y - offsetPerLabel
-          }));
-          adjustments.set(next.id, _objectSpread(_objectSpread({}, nextAdjustment), {}, {
-            y: nextAdjustment.y + offsetPerLabel
-          }));
-        }
-      }
-      if (!hasCollisions) {
-        break;
-      }
+    // If accessibilityLabel is provided, use it
+    if (accessibilityLabel) {
+      return typeof accessibilityLabel === 'function' ? accessibilityLabel(dataIndex) : accessibilityLabel;
     }
 
-    // After collision resolution, ensure all labels are within bounds
-    const labelIds = Array.from(adjustments.keys());
-
-    // Group labels that are close together or overlapping
-    // This prevents distant labels from being unnecessarily shifted
-    const findConnectedGroups = () => {
-      const groups = [];
-      const visited = new Set();
-      for (const id of labelIds) {
-        if (visited.has(id)) continue;
-        const group = [id];
-        visited.add(id);
-        const queue = [id];
-        while (queue.length > 0) {
-          const currentId = queue.shift();
-          const currentAdjustment = adjustments.get(currentId);
-          const currentDim = sortedDimensions.find(d => d.id === currentId);
-
-          // Check if this label overlaps or is close to any other unvisited label
-          for (const otherId of labelIds) {
-            if (visited.has(otherId)) continue;
-            const otherAdjustment = adjustments.get(otherId);
-            const otherDim = sortedDimensions.find(d => d.id === otherId);
-
-            // Calculate distance between labels
-            const distance = Math.abs(currentAdjustment.y - otherAdjustment.y);
-            const minDistance = (currentDim.height + otherDim.height) / 2 + minGap * 2;
-
-            // Labels are considered connected if they're close enough to potentially overlap
-            if (distance <= minDistance) {
-              visited.add(otherId);
-              group.push(otherId);
-              queue.push(otherId);
-            }
-          }
-        }
-        groups.push(group);
-      }
-      return groups;
-    };
-    const connectedGroups = findConnectedGroups();
-
-    // Process each connected group independently
-    for (const groupIds of connectedGroups) {
-      // Check if any labels in this group are outside bounds
-      const groupOutOfBounds = groupIds.some(id => {
-        const adjustment = adjustments.get(id);
-        const dim = sortedDimensions.find(d => d.id === id);
-        const labelTop = adjustment.y - dim.height / 2;
-        const labelBottom = adjustment.y + dim.height / 2;
-        return labelTop < drawingArea.y || labelBottom > drawingArea.y + drawingArea.height;
-      });
-      if (groupOutOfBounds) {
-        // Get labels in this group sorted by their preferred Y position
-        const groupLabels = groupIds.map(id => ({
-          id,
-          dim: sortedDimensions.find(d => d.id === id),
-          preferredY: sortedDimensions.find(d => d.id === id).preferredY,
-          currentY: adjustments.get(id).y
-        })).sort((a, b) => a.preferredY - b.preferredY);
-
-        // Calculate total height needed for this group
-        const totalLabelHeight = groupLabels.reduce((sum, label) => sum + label.dim.height, 0);
-        const totalGaps = (groupLabels.length - 1) * minGap;
-        const totalNeeded = totalLabelHeight + totalGaps;
-        if (totalNeeded > drawingArea.height) {
-          // Not enough space - use compressed equal spacing as fallback
-          const compressedGap = Math.max(2, (drawingArea.height - totalLabelHeight) / Math.max(1, groupLabels.length - 1));
-          let currentY = drawingArea.y + groupLabels[0].dim.height / 2;
-          for (const label of groupLabels) {
-            adjustments.set(label.id, _objectSpread(_objectSpread({}, adjustments.get(label.id)), {}, {
-              y: currentY
-            }));
-            currentY += label.dim.height + compressedGap;
-          }
-        } else {
-          // Enough space - use minimal displacement algorithm for this group
-          const finalPositions = [...groupLabels];
-
-          // Ensure minimum spacing between adjacent labels in this group
-          for (let i = 1; i < finalPositions.length; i++) {
-            const prev = finalPositions[i - 1];
-            const current = finalPositions[i];
-
-            // Calculate minimum Y position for current label
-            const minCurrentY = prev.preferredY + prev.dim.height / 2 + minGap + current.dim.height / 2;
-            if (current.preferredY < minCurrentY) {
-              // Need to push this label down
-              current.preferredY = minCurrentY;
-            }
-          }
-
-          // Check if this specific group fits within bounds, if not shift only this group
-          const groupTop = finalPositions[0].preferredY - finalPositions[0].dim.height / 2;
-          const groupBottom = finalPositions[finalPositions.length - 1].preferredY + finalPositions[finalPositions.length - 1].dim.height / 2;
-          let shiftAmount = 0;
-          if (groupTop < drawingArea.y) {
-            // Group is too high, shift down
-            shiftAmount = drawingArea.y - groupTop;
-          } else if (groupBottom > drawingArea.y + drawingArea.height) {
-            // Group is too low, shift up
-            shiftAmount = drawingArea.y + drawingArea.height - groupBottom;
-          }
-
-          // Apply final positions with shift only to this group
-          for (const label of finalPositions) {
-            const finalY = label.preferredY + shiftAmount;
-
-            // Final bounds check for individual labels
-            const clampedY = Math.max(drawingArea.y + label.dim.height / 2, Math.min(drawingArea.y + drawingArea.height - label.dim.height / 2, finalY));
-            adjustments.set(label.id, _objectSpread(_objectSpread({}, adjustments.get(label.id)), {}, {
-              y: clampedY
-            }));
-          }
-        }
-      }
-    }
-    return {
-      strategy: globalSide,
-      adjustments
-    };
-  }, [beaconPositions, labelDimensions, drawingArea]);
-
-  // Callback for labels to register their dimensions
-  const registerLabelDimensions = useCallback((id, width, height, x, y) => {
-    setLabelDimensions(prev => {
-      const existing = prev.get(id);
-      const newDimensions = {
-        id,
-        width,
-        height,
-        preferredX: x,
-        preferredY: y
-      };
-
-      // Only update if dimensions actually changed
-      if (existing && existing.width === width && existing.height === height && existing.preferredX === x && existing.preferredY === y) {
-        return prev;
-      }
-      const next = new Map(prev);
-      next.set(id, newDimensions);
-      return next;
-    });
-  }, []);
-
-  // Callback to create ref handlers for scrubber beacons
-  const createScrubberBeaconRef = useCallback(seriesId => {
-    return beaconRef => {
-      if (beaconRef) {
-        ScrubberBeaconRefs.registerRef(seriesId, beaconRef);
-      }
-    };
-  }, [ScrubberBeaconRefs]);
-
-  // synchronize label positioning state when the position of any scrubber beacons change
-  useEffect(() => {
-    const currentBeaconIds = new Set(beaconPositions.map(beacon => beacon === null || beacon === void 0 ? void 0 : beacon.targetSeries.id).filter(Boolean));
-    setLabelDimensions(prev => {
-      const next = new Map();
-      for (const [id, dimensions] of prev) {
-        if (currentBeaconIds.has(id)) {
-          next.set(id, dimensions);
-        }
-      }
-      return next;
-    });
-  }, [beaconPositions]);
+    // Otherwise, if label resolves to a string, use that
+    const resolvedLabel = typeof label === 'function' ? label(dataIndex) : label;
+    return typeof resolvedLabel === 'string' ? resolvedLabel : undefined;
+  }, [accessibilityLabel, label, dataIndex]);
+  const beaconLabels = useMemo(() => {
+    var _series$filter$filter;
+    return (_series$filter$filter = series === null || series === void 0 ? void 0 : series.filter(s => filteredSeriesIds.includes(s.id)).filter(s => s.label !== undefined && s.label.length > 0).map(s => ({
+      seriesId: s.id,
+      label: s.label,
+      color: s.color
+    }))) !== null && _series$filter$filter !== void 0 ? _series$filter$filter : [];
+  }, [series, filteredSeriesIds]);
 
   // Check if we have at least the default X scale
   const defaultXScale = getXScale();
   if (!defaultXScale) return null;
-
-  // Use custom components if provided
-  const ScrubberLineComponent = LineComponent !== null && LineComponent !== void 0 ? LineComponent : ReferenceLine;
-  const ScrubberBeaconComponent = BeaconComponent !== null && BeaconComponent !== void 0 ? BeaconComponent : ScrubberBeacon;
-  const ScrubberBeaconLabelComponent = BeaconLabelComponent !== null && BeaconLabelComponent !== void 0 ? BeaconLabelComponent : ScrubberBeaconLabel;
   const pixelX = dataX !== undefined && defaultXScale ? getPointOnScale(dataX, defaultXScale) : undefined;
   return /*#__PURE__*/_jsxs(motion.g, _objectSpread(_objectSpread({
-    ref: scrubberGroupRef,
+    "aria-atomic": "true",
+    "aria-label": resolvedAccessibilityLabel,
+    "aria-live": "polite",
     "data-component": "scrubber-group",
-    "data-testid": testID
+    "data-testid": testID,
+    role: "status"
   }, animate ? {
-    animate: 'animate',
-    exit: 'exit',
-    initial: 'initial',
-    variants: axisTickLabelsInitialAnimationVariants
+    animate: {
+      opacity: 1,
+      transition: {
+        duration: accessoryFadeTransitionDuration,
+        delay: accessoryFadeTransitionDelay
+      }
+    },
+    exit: {
+      opacity: 0,
+      transition: {
+        duration: accessoryFadeTransitionDuration
+      }
+    },
+    initial: {
+      opacity: 0
+    }
   } : {}), {}, {
-    children: [!hideOverlay && dataX !== undefined && scrubberPosition !== undefined && pixelX !== undefined && /*#__PURE__*/_jsx("rect", {
+    children: [!hideOverlay && scrubberPosition !== undefined && pixelX !== undefined && /*#__PURE__*/_jsx("rect", {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.overlay,
       fill: "var(--color-bg)",
       height: drawingArea.height + overlayOffset * 2,
@@ -418,66 +154,36 @@ export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       width: drawingArea.x + drawingArea.width - pixelX + overlayOffset,
       x: pixelX,
       y: drawingArea.y - overlayOffset
-    }), !hideLine && scrubberPosition !== undefined && dataX !== undefined && /*#__PURE__*/_jsx(ScrubberLineComponent, {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.line,
+    }), !hideLine && scrubberPosition !== undefined && dataX !== undefined && /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: LabelComponent,
+      LineComponent: LineComponent,
+      classNames: {
+        label: classNames === null || classNames === void 0 ? void 0 : classNames.line
+      },
       dataX: dataX,
       label: typeof label === 'function' ? label(dataIndex) : label,
-      labelProps: _objectSpread({
-        verticalAlignment: 'middle',
-        // Place in the middle vertically by default
-        dy: -0.5 * drawingArea.y
-      }, labelProps),
+      labelBoundsInset: labelBoundsInset,
+      labelElevated: labelElevated,
+      labelFont: labelFont,
       stroke: lineStroke,
-      style: styles === null || styles === void 0 ? void 0 : styles.line
-    }), beaconPositions.map(beacon => {
-      var _beacon$targetSeries, _beacon$targetSeries2;
-      if (!beacon) return null;
-      const adjustment = labelPositioning.adjustments.get(beacon.targetSeries.id);
-      const dotStroke = ((_beacon$targetSeries = beacon.targetSeries) === null || _beacon$targetSeries === void 0 ? void 0 : _beacon$targetSeries.color) || 'var(--color-fgPrimary)';
-      return /*#__PURE__*/_jsxs("g", {
-        "data-component": "scrubber-beacon",
-        children: [/*#__PURE__*/_jsx(ScrubberBeaconComponent, {
-          ref: createScrubberBeaconRef(beacon.targetSeries.id),
-          className: classNames === null || classNames === void 0 ? void 0 : classNames.beacon,
-          color: (_beacon$targetSeries2 = beacon.targetSeries) === null || _beacon$targetSeries2 === void 0 ? void 0 : _beacon$targetSeries2.color,
-          dataX: beacon.x,
-          dataY: beacon.y,
-          idlePulse: idlePulse,
-          seriesId: beacon.targetSeries.id,
-          style: styles === null || styles === void 0 ? void 0 : styles.beacon,
-          testID: testID ? "".concat(testID, "-").concat(beacon.targetSeries.id, "-dot") : undefined
-        }), beacon.label && pixelX !== undefined && ((_adjustment$x, _adjustment$y, _adjustment$side) => {
-          const finalAnchorX = (_adjustment$x = adjustment === null || adjustment === void 0 ? void 0 : adjustment.x) !== null && _adjustment$x !== void 0 ? _adjustment$x : pixelX;
-          const finalAnchorY = (_adjustment$y = adjustment === null || adjustment === void 0 ? void 0 : adjustment.y) !== null && _adjustment$y !== void 0 ? _adjustment$y : beacon.pixelY;
-          const finalSide = (_adjustment$side = adjustment === null || adjustment === void 0 ? void 0 : adjustment.side) !== null && _adjustment$side !== void 0 ? _adjustment$side : labelPositioning.strategy;
-          return /*#__PURE__*/_jsx(ScrubberBeaconLabelComponent, {
-            background: "var(--color-bg)",
-            bounds: drawingArea,
-            className: classNames === null || classNames === void 0 ? void 0 : classNames.beaconLabel,
-            color: dotStroke,
-            dx: finalSide === 'right' ? 16 : -16,
-            horizontalAlignment: finalSide === 'right' ? 'left' : 'right',
-            inset: {
-              left: labelHorizontalInset,
-              right: labelHorizontalInset,
-              top: labelVerticalInset,
-              bottom: labelVerticalInset
-            },
-            onDimensionsChange: _ref2 => {
-              let {
-                width,
-                height
-              } = _ref2;
-              return registerLabelDimensions(beacon.targetSeries.id, width, height, pixelX, beacon.pixelY);
-            },
-            style: styles === null || styles === void 0 ? void 0 : styles.beaconLabel,
-            testID: testID ? "".concat(testID, "-").concat(beacon.targetSeries.id, "-label") : undefined,
-            x: finalAnchorX,
-            y: finalAnchorY,
-            children: beacon.label
-          });
-        })()]
-      }, beacon.targetSeries.id);
+      styles: {
+        label: styles === null || styles === void 0 ? void 0 : styles.line
+      }
+    }), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+      ref: beaconGroupRef,
+      BeaconComponent: BeaconComponent,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.beacon,
+      idlePulse: idlePulse,
+      seriesIds: filteredSeriesIds,
+      style: styles === null || styles === void 0 ? void 0 : styles.beacon,
+      testID: testID,
+      transitions: beaconTransitions
+    }), beaconLabels.length > 0 && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      labelFont: beaconLabelFont,
+      labelHorizontalOffset: beaconLabelHorizontalOffset,
+      labelMinGap: beaconLabelMinGap,
+      labels: beaconLabels
     })]
   }));
 }));