@coinbase/cds-web 8.66.1 → 9.0.0-rc.1

package/esm/visualizations/chart/point/Point.js

@@ -0,0 +1,201 @@
+const _excluded = ["dataX", "dataY", "xAxisId", "yAxisId", "fill", "radius", "opacity", "onClick", "className", "style", "classNames", "styles", "stroke", "strokeWidth", "accessibilityLabel", "label", "LabelComponent", "labelPosition", "labelOffset", "labelFont", "testID", "animate", "transitions", "transition"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
+import { cx } from '../../../index';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultAccessoryEnterTransition, defaultTransition, getTransition, projectPoint } from '../utils';
+import { DefaultPointLabel } from './DefaultPointLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const containerCss = "containerCss-c1av2uu0";
+const innerPointCss = "innerPointCss-i1nwh6qx";
+
+/**
+ * Props for point label components.
+ */
+
+export const Point = /*#__PURE__*/memo(_ref => {
+  let {
+      dataX,
+      dataY,
+      xAxisId,
+      yAxisId,
+      fill = 'var(--color-fgPrimary)',
+      radius = 5,
+      opacity,
+      onClick,
+      className,
+      style,
+      classNames,
+      styles,
+      stroke = 'var(--color-bg)',
+      strokeWidth = 2,
+      accessibilityLabel,
+      label,
+      LabelComponent = DefaultPointLabel,
+      labelPosition = 'center',
+      labelOffset = radius * 2,
+      labelFont,
+      testID,
+      animate: animateProp,
+      transitions,
+      transition
+    } = _ref,
+    svgProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    getXScale,
+    getYScale,
+    animate: animationEnabled,
+    drawingArea
+  } = useCartesianChartContext();
+  const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animationEnabled;
+  const enterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.enter]);
+  const updateTransition = useMemo(() => getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.update, transition]);
+  const xScale = getXScale(xAxisId);
+  const yScale = getYScale(yAxisId);
+  const pixelCoordinate = useMemo(() => {
+    if (!xScale || !yScale) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [xScale, yScale, dataX, dataY]);
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+  }, [pixelCoordinate, drawingArea]);
+  const innerPoint = useMemo(() => {
+    const mergedStyles = _objectSpread(_objectSpread({
+      cursor: onClick !== undefined ? 'pointer' : undefined
+    }, style), styles === null || styles === void 0 ? void 0 : styles.point);
+
+    // interaction animations to scale radius of point
+    const variants = {
+      hovered: {
+        r: radius * 1.2
+      },
+      pressed: {
+        r: radius * 0.9
+      },
+      default: {
+        r: radius
+      }
+    };
+    const handleKeyDown = onClick ? event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onClick(event, {
+          dataX,
+          dataY,
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        });
+      }
+    } : undefined;
+    if (!animate) {
+      return /*#__PURE__*/_jsx("circle", _objectSpread({
+        "aria-label": accessibilityLabel,
+        className: cx(innerPointCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.point),
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y,
+        fill: fill,
+        onClick: onClick ? event => onClick(event, {
+          dataX,
+          dataY,
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        }) : undefined,
+        onKeyDown: handleKeyDown,
+        r: radius,
+        role: onClick ? 'button' : undefined,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        style: mergedStyles,
+        tabIndex: onClick ? 0 : -1
+      }, svgProps));
+    }
+    return /*#__PURE__*/_jsx(motion.circle, _objectSpread({
+      animate: {
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y
+      },
+      'aria-label': accessibilityLabel,
+      className: cx(innerPointCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.point),
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      "aria-label": accessibilityLabel,
+      className: cx(innerPointCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.point),
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: fill,
+      onClick: onClick ? event => onClick(event, {
+        dataX,
+        dataY,
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      }) : undefined,
+      onKeyDown: handleKeyDown,
+      r: radius,
+      role: onClick ? 'button' : undefined,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      style: mergedStyles,
+      tabIndex: onClick ? 0 : -1,
+      transition: {
+        cx: updateTransition,
+        cy: updateTransition
+      },
+      variants: variants,
+      whileHover: onClick ? 'hovered' : 'default',
+      whileTap: onClick ? 'pressed' : 'default'
+    }, svgProps));
+  }, [style, styles === null || styles === void 0 ? void 0 : styles.point, classNames === null || classNames === void 0 ? void 0 : classNames.point, fill, animate, radius, className, onClick, stroke, strokeWidth, svgProps, dataX, dataY, pixelCoordinate.x, pixelCoordinate.y, accessibilityLabel, updateTransition]);
+  if (!xScale || !yScale) {
+    return;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    opacity: isWithinDrawingArea ? 1 : 0,
+    children: /*#__PURE__*/_jsxs(motion.g, {
+      animate: {
+        opacity: 1
+      },
+      initial: animate ? {
+        opacity: 0
+      } : false,
+      transition: {
+        opacity: enterTransition
+      },
+      children: [/*#__PURE__*/_jsx("g", {
+        className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+        "data-testid": testID,
+        opacity: opacity,
+        style: styles === null || styles === void 0 ? void 0 : styles.root,
+        children: innerPoint
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        dataX: dataX,
+        dataY: dataY,
+        fill: fill,
+        font: labelFont,
+        offset: labelOffset,
+        position: labelPosition,
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y,
+        children: label
+      })]
+    })
+  });
+});
+import "./Point.css";

package/esm/visualizations/chart/point/index.js

@@ -0,0 +1,2 @@
+export * from './DefaultPointLabel';
+export * from './Point';

package/esm/visualizations/chart/scrubber/DefaultScrubberBeacon.js

@@ -0,0 +1,154 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { m as motion, useAnimate } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { defaultTransition, getTransition, instantTransition, projectPoint } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultRadius = 5;
+const defaultStrokeWidth = 2;
+const defaultStroke = 'var(--color-bg)';
+const pulseOpacityStart = 0.5;
+const pulseOpacityEnd = 0;
+const pulseRadiusStartMultiplier = 2;
+const pulseRadiusEndMultiplier = 3;
+const defaultPulseTransition = {
+  duration: 1.6,
+  ease: [0.0, 0.0, 0.0, 1.0]
+};
+const defaultPulseRepeatDelay = 0.4;
+export const DefaultScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesId,
+    color: colorProp,
+    dataX,
+    dataY,
+    isIdle,
+    idlePulse,
+    animate: animateProp,
+    transitions,
+    opacity = 1,
+    radius = defaultRadius,
+    stroke = defaultStroke,
+    strokeWidth = defaultStrokeWidth,
+    className,
+    style,
+    testID = "".concat(seriesId, "-beacon")
+  } = _ref;
+  const [scope, animateFn] = useAnimate();
+  const {
+    animate: animateContext,
+    getSeries,
+    getXScale,
+    getYScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const animate = animateProp !== null && animateProp !== void 0 ? animateProp : animateContext;
+  const targetSeries = getSeries(seriesId);
+  const xScale = getXScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.xAxisId);
+  const yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
+  const color = useMemo(() => {
+    var _ref2;
+    return (_ref2 = colorProp !== null && colorProp !== void 0 ? colorProp : targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.color) !== null && _ref2 !== void 0 ? _ref2 : 'var(--color-fgPrimary)';
+  }, [colorProp, targetSeries]);
+  const prevIsIdle = usePreviousValue(isIdle);
+  const isIdleTransition = prevIsIdle !== undefined && isIdle !== prevIsIdle;
+  const updateTransition = useMemo(() => {
+    if (isIdleTransition) return instantTransition;
+    if (!isIdle) return instantTransition;
+    return getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.update, animate, defaultTransition);
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.update, isIdle, animate, isIdleTransition]);
+  const pulseTransition = useMemo(() => {
+    var _transitions$pulse;
+    return (_transitions$pulse = transitions === null || transitions === void 0 ? void 0 : transitions.pulse) !== null && _transitions$pulse !== void 0 ? _transitions$pulse : defaultPulseTransition;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.pulse]);
+  const pulseRepeatDelay = useMemo(() => {
+    var _transitions$pulseRep;
+    return (_transitions$pulseRep = transitions === null || transitions === void 0 ? void 0 : transitions.pulseRepeatDelay) !== null && _transitions$pulseRep !== void 0 ? _transitions$pulseRep : defaultPulseRepeatDelay;
+  }, [transitions === null || transitions === void 0 ? void 0 : transitions.pulseRepeatDelay]);
+  const pixelCoordinate = useMemo(() => {
+    if (!xScale || !yScale) return;
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [dataX, dataY, xScale, yScale]);
+  const pulseRadiusStart = radius * pulseRadiusStartMultiplier;
+  const pulseRadiusEnd = radius * pulseRadiusEndMultiplier;
+  useImperativeHandle(ref, () => ({
+    pulse: () => {
+      // Only pulse when idle and idlePulse is not enabled
+      if (isIdle && !idlePulse && scope.current) {
+        animateFn(scope.current, {
+          opacity: [pulseOpacityStart, pulseOpacityEnd],
+          r: [pulseRadiusStart, pulseRadiusEnd]
+        }, pulseTransition);
+      }
+    }
+  }), [isIdle, idlePulse, scope, animateFn, pulseTransition, pulseRadiusStart, pulseRadiusEnd]);
+
+  // Create continuous pulse transition by repeating the base pulse transition with delay
+  const continuousPulseTransition = useMemo(() => _objectSpread(_objectSpread({}, pulseTransition), {}, {
+    repeat: Infinity,
+    repeatDelay: pulseRepeatDelay
+  }), [pulseTransition, pulseRepeatDelay]);
+  const shouldPulse = isIdle && idlePulse;
+  const isWithinDrawingArea = useMemo(() => {
+    if (!pixelCoordinate) return false;
+    return pixelCoordinate.x >= drawingArea.x && pixelCoordinate.x <= drawingArea.x + drawingArea.width && pixelCoordinate.y >= drawingArea.y && pixelCoordinate.y <= drawingArea.y + drawingArea.height;
+  }, [pixelCoordinate, drawingArea]);
+  if (!pixelCoordinate) return;
+  const pulseCircle = /*#__PURE__*/_jsx(motion.circle, {
+    ref: scope,
+    animate: shouldPulse ? {
+      opacity: [pulseOpacityStart, pulseOpacityEnd],
+      r: [pulseRadiusStart, pulseRadiusEnd],
+      transition: continuousPulseTransition
+    } : {
+      opacity: pulseOpacityEnd,
+      r: pulseRadiusStart
+    },
+    cx: 0,
+    cy: 0,
+    "data-testid": "".concat(testID, "-pulse"),
+    fill: color,
+    initial: {
+      opacity: shouldPulse ? pulseOpacityStart : pulseOpacityEnd,
+      r: pulseRadiusStart
+    }
+  });
+  return /*#__PURE__*/_jsxs("g", {
+    "data-testid": testID,
+    opacity: isWithinDrawingArea ? opacity : 0,
+    children: [isIdle && /*#__PURE__*/_jsx(motion.g, {
+      animate: {
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      },
+      initial: false,
+      transition: updateTransition !== null && updateTransition !== void 0 ? updateTransition : instantTransition,
+      children: pulseCircle
+    }), /*#__PURE__*/_jsx(motion.circle, {
+      animate: {
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y
+      },
+      className: className,
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: color,
+      initial: false,
+      r: radius,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      style: style,
+      transition: updateTransition !== null && updateTransition !== void 0 ? updateTransition : instantTransition
+    })]
+  });
+}));

package/esm/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -0,0 +1,57 @@
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label", "transition", "y"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { m as motion } from 'framer-motion';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const labelVerticalInset = 3.5;
+const labelHorizontalInset = 4;
+/**
+ * DefaultScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon (i.e. a point on the series pinned to the scrubber position).
+ */
+export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      background = 'var(--color-bg',
+      color = 'var(--color-fgPrimary)',
+      elevated = true,
+      borderRadius = 4,
+      font = 'label1',
+      verticalAlignment = 'middle',
+      inset = {
+        left: labelHorizontalInset,
+        right: labelHorizontalInset,
+        top: labelVerticalInset,
+        bottom: labelVerticalInset
+      },
+      label,
+      transition,
+      y
+    } = _ref,
+    chartTextProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(motion.g, {
+    animate: {
+      y
+    },
+    initial: false,
+    transition: transition,
+    children: /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+      disableRepositioning: true,
+      background: background,
+      borderRadius: borderRadius,
+      color: color,
+      elevated: elevated,
+      font: font,
+      inset: inset,
+      verticalAlignment: verticalAlignment,
+      y: transition ? 0 : y
+    }, chartTextProps), {}, {
+      children: label
+    }))
+  });
+});

package/esm/visualizations/chart/scrubber/DefaultScrubberLabel.js

@@ -0,0 +1,48 @@
+const _excluded = ["dx", "dy"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DefaultReferenceLineLabel } from '../line';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultScrubberLabel is the default label component for the scrubber line.
+ * In vertical layout, it positions the label above the scrubber line.
+ * In horizontal layout, it centers the label in the chart's right inset.
+ */
+export const DefaultScrubberLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      dx: dxProp,
+      dy: dyProp
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    drawingArea,
+    layout,
+    width: chartWidth
+  } = useCartesianChartContext();
+  const isHorizontalLayout = layout === 'horizontal';
+  const dx = useMemo(() => {
+    if (dxProp !== undefined) return dxProp;
+    if (isHorizontalLayout) {
+      const drawingAreaEnd = drawingArea.x + drawingArea.width;
+      const rightOffset = chartWidth - drawingAreaEnd;
+      return rightOffset / 2;
+    }
+    return 0;
+  }, [drawingArea.width, drawingArea.x, dxProp, isHorizontalLayout, chartWidth]);
+  const dy = useMemo(() => {
+    if (dyProp !== undefined) return dyProp;
+    if (isHorizontalLayout) return 0;
+    return -0.5 * drawingArea.y;
+  }, [dyProp, isHorizontalLayout, drawingArea.y]);
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _objectSpread({
+    dx: dx,
+    dy: dy
+  }, props));
+});

package/esm/visualizations/chart/scrubber/Scrubber.js

@@ -0,0 +1,200 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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, useImperativeHandle, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { ReferenceLine } from '../line';
+import { defaultAccessoryEnterTransition, getPointOnScale, getTransition, 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";
+/**
+ * Unified component that manages all scrubber elements (beacons, line, labels).
+ */
+export const Scrubber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    seriesIds,
+    hideBeaconLabels,
+    hideLine,
+    label,
+    accessibilityLabel,
+    lineStroke,
+    BeaconComponent = DefaultScrubberBeacon,
+    BeaconLabelComponent,
+    LineComponent,
+    LabelComponent = DefaultScrubberLabel,
+    labelElevated,
+    hideOverlay,
+    overlayOffset = 2,
+    beaconLabelMinGap,
+    beaconLabelHorizontalOffset,
+    beaconLabelPreferredSide,
+    labelFont,
+    labelBoundsInset,
+    beaconLabelFont,
+    testID,
+    idlePulse,
+    beaconTransitions,
+    transitions = beaconTransitions,
+    beaconStroke,
+    styles,
+    classNames
+  } = _ref;
+  const beaconGroupRef = React.useRef(null);
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    layout,
+    getXScale,
+    getYScale,
+    getXAxis,
+    getYAxis,
+    animate,
+    series,
+    drawingArea,
+    dataLength
+  } = useCartesianChartContext();
+
+  // Expose imperative handle with pulse method
+  useImperativeHandle(ref, () => ({
+    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 {
+    dataValue,
+    dataIndex
+  } = useMemo(() => {
+    const categoryAxisIsX = layout !== 'horizontal';
+    const indexScale = categoryAxisIsX ? getXScale() : getYScale();
+    const indexAxis = categoryAxisIsX ? getXAxis() : getYAxis();
+    if (!indexScale) return {
+      dataValue: undefined,
+      dataIndex: undefined
+    };
+    const dataIndex = scrubberPosition !== null && scrubberPosition !== void 0 ? scrubberPosition : Math.max(0, dataLength - 1);
+
+    // Convert index to actual data value if axis has data
+    let dataValue;
+    if (indexAxis !== null && indexAxis !== void 0 && indexAxis.data && Array.isArray(indexAxis.data) && indexAxis.data[dataIndex] !== undefined) {
+      const val = indexAxis.data[dataIndex];
+      dataValue = typeof val === 'string' ? dataIndex : val;
+    } else {
+      dataValue = dataIndex;
+    }
+    return {
+      dataValue,
+      dataIndex
+    };
+  }, [getXScale, getYScale, getXAxis, getYAxis, scrubberPosition, dataLength, layout]);
+
+  // Compute resolved accessibility label
+  const resolvedAccessibilityLabel = useMemo(() => {
+    if (dataIndex === undefined) return undefined;
+
+    // If accessibilityLabel is provided, use it
+    if (accessibilityLabel) {
+      return typeof accessibilityLabel === 'function' ? accessibilityLabel(dataIndex) : accessibilityLabel;
+    }
+
+    // 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]);
+  const groupEnterTransition = useMemo(() => getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultAccessoryEnterTransition), [transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate]);
+  const shouldAnimateGroup = animate && groupEnterTransition !== null;
+  const categoryAxisIsX = layout !== 'horizontal';
+  const showBeaconLabels = !hideBeaconLabels && categoryAxisIsX && beaconLabels.length > 0;
+  const indexScale = categoryAxisIsX ? getXScale() : getYScale();
+  if (!indexScale) return null;
+  const pixelPos = dataValue !== undefined && indexScale ? getPointOnScale(dataValue, indexScale) : undefined;
+  return /*#__PURE__*/_jsxs(motion.g, _objectSpread(_objectSpread({
+    "aria-atomic": "true",
+    "aria-label": resolvedAccessibilityLabel,
+    "aria-live": "polite",
+    "data-component": "scrubber-group",
+    "data-testid": testID,
+    role: "status"
+  }, shouldAnimateGroup ? {
+    animate: {
+      opacity: 1,
+      transition: groupEnterTransition
+    },
+    initial: {
+      opacity: 0
+    }
+  } : {}), {}, {
+    children: [!hideOverlay && scrubberPosition !== undefined && pixelPos !== undefined && /*#__PURE__*/_jsx("rect", {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.overlay,
+      fill: "var(--color-bg)",
+      height: categoryAxisIsX ? drawingArea.height + overlayOffset * 2 : drawingArea.y + drawingArea.height - pixelPos + overlayOffset,
+      opacity: 0.8,
+      style: styles === null || styles === void 0 ? void 0 : styles.overlay,
+      width: categoryAxisIsX ? drawingArea.x + drawingArea.width - pixelPos + overlayOffset : drawingArea.width + overlayOffset * 2,
+      x: categoryAxisIsX ? pixelPos : drawingArea.x - overlayOffset,
+      y: categoryAxisIsX ? drawingArea.y - overlayOffset : pixelPos
+    }), !hideLine && scrubberPosition !== undefined && dataValue !== undefined && dataIndex !== undefined && /*#__PURE__*/_jsx(ReferenceLine, _objectSpread({
+      LabelComponent: LabelComponent,
+      LineComponent: LineComponent,
+      classNames: {
+        label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
+        line: classNames === null || classNames === void 0 ? void 0 : classNames.line
+      },
+      label: typeof label === 'function' ? label(dataIndex) : label,
+      labelBoundsInset: labelBoundsInset,
+      labelElevated: labelElevated,
+      labelFont: labelFont,
+      stroke: lineStroke,
+      styles: {
+        label: styles === null || styles === void 0 ? void 0 : styles.label,
+        line: styles === null || styles === void 0 ? void 0 : styles.line
+      }
+    }, categoryAxisIsX ? {
+      dataX: dataValue
+    } : {
+      dataY: dataValue
+    })), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
+      ref: beaconGroupRef,
+      BeaconComponent: BeaconComponent,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.beacon,
+      idlePulse: idlePulse,
+      seriesIds: filteredSeriesIds,
+      stroke: beaconStroke,
+      style: styles === null || styles === void 0 ? void 0 : styles.beacon,
+      testID: testID,
+      transitions: transitions
+    }), showBeaconLabels && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
+      BeaconLabelComponent: BeaconLabelComponent,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.beaconLabel,
+      labelFont: beaconLabelFont,
+      labelHorizontalOffset: beaconLabelHorizontalOffset,
+      labelMinGap: beaconLabelMinGap,
+      labelPreferredSide: beaconLabelPreferredSide,
+      labels: beaconLabels,
+      style: styles === null || styles === void 0 ? void 0 : styles.beaconLabel,
+      transitions: transitions
+    })]
+  }));
+}));