@coinbase/cds-web-visualization 3.4.0-beta.9 → 3.4.0

package/esm/chart/utils/transition.js

@@ -5,10 +5,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { useEffect, useRef } from 'react';
 import { interpolatePath } from 'd3-interpolate-path';
-import { animate, useMotionValue, useTransform } from 'framer-motion';
+import { animate, useMotionValue } from 'framer-motion';
 
 /**
- * Default transition configuration used across all chart components.
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120, mass: 4 }`
  */
 export const defaultTransition = {
   type: 'spring',
@@ -17,6 +18,15 @@ export const defaultTransition = {
   mass: 4
 };
 
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export const instantTransition = {
+  type: 'tween',
+  duration: 0
+};
+
 /**
  * Duration in seconds for accessory elements to fade in.
  */
@@ -27,85 +37,102 @@ export const accessoryFadeTransitionDuration = 0.15;
  */
 export const accessoryFadeTransitionDelay = 0.35;
 
+/**
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'tween', duration: 0.15, delay: 0.35 }`
+ */
+export const defaultAccessoryEnterTransition = {
+  type: 'tween',
+  duration: accessoryFadeTransitionDuration,
+  delay: accessoryFadeTransitionDelay
+};
+
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export const getTransition = (value, animate, defaultValue) => {
+  if (!animate || value === null) return null;
+  return value !== null && value !== void 0 ? value : defaultValue;
+};
+
 /**
  * Hook for path animation state and transitions.
  *
  * @param currentPath - Current target path to animate to
  * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
- * @param transition - Transition configuration
+ * @param transitions - Transition configuration for enter and update animations
  * @returns MotionValue containing the current interpolated path string
  *
  * @example
  * // Simple path transition
  * const animatedPath = usePathTransition({
  *   currentPath: d ?? '',
- *   transition: {
- *     type: 'spring',
- *     stiffness: 300,
- *     damping: 20
- *   }
+ *   transitions: {
+ *     update: { type: 'spring', stiffness: 300, damping: 20 },
+ *   },
  * });
  *
  * @example
- * // Time based animation
+ * // Enter animation with different initial config (like DefaultBar)
  * const animatedPath = usePathTransition({
  *   currentPath: targetPath,
  *   initialPath: baselinePath,
- *   transition: {
- *     type: 'tween',
- *     duration: 0.3,
- *     ease: 'easeInOut'
- *   }
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 0.5 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 },
+ *   },
  * });
  */
 export const usePathTransition = _ref => {
   let {
     currentPath,
     initialPath,
+    transitions,
     transition = defaultTransition
   } = _ref;
-  const isInitialRender = useRef(true);
+  const updateTransition = (transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition;
+  const enterTransition = transitions === null || transitions === void 0 ? void 0 : transitions.enter;
   const previousPathRef = useRef(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
-  const targetPathRef = useRef(currentPath);
+  const targetPathRef = useRef(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
   const animationRef = useRef(null);
-  const progress = useMotionValue(0);
-
-  // Derive the interpolated path from progress using useTransform
-  const interpolatedPath = useTransform(progress, latest => {
-    const pathInterpolator = interpolatePath(previousPathRef.current, targetPathRef.current);
-    return pathInterpolator(latest);
-  });
+  const isFirstAnimation = useRef(!!initialPath);
+  const animatedPath = useMotionValue(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
   useEffect(() => {
-    // Only proceed if the target path has actually changed
     if (targetPathRef.current !== currentPath) {
-      // Cancel any ongoing animation before starting a new one
-      const wasAnimating = !!animationRef.current;
+      const currentVisualPath = animatedPath.get();
       if (animationRef.current) {
-        animationRef.current.cancel();
+        animationRef.current.stop();
         animationRef.current = null;
-      }
-      const currentInterpolatedPath = interpolatedPath.get();
-
-      // If we were animating and the interpolated path is different from both start and end,
-      // use it as the starting point for the next animation (smooth interruption)
-      const isInterpolatedPosition = currentInterpolatedPath !== previousPathRef.current && currentInterpolatedPath !== currentPath;
-      if (wasAnimating && isInterpolatedPosition) {
-        previousPathRef.current = currentInterpolatedPath;
+        previousPathRef.current = currentVisualPath;
       }
       targetPathRef.current = currentPath;
-      progress.set(0);
-      animationRef.current = animate(progress, 1, _objectSpread(_objectSpread({}, transition), {}, {
+      const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
+      isFirstAnimation.current = false;
+      if (activeTransition === null) {
+        animatedPath.set(currentPath);
+        previousPathRef.current = currentPath;
+        animationRef.current = null;
+        return;
+      }
+      const pathInterpolator = interpolatePath(previousPathRef.current, currentPath);
+      animationRef.current = animate(0, 1, _objectSpread(_objectSpread({}, activeTransition), {}, {
+        onUpdate: latest => {
+          animatedPath.set(pathInterpolator(latest));
+        },
         onComplete: () => {
+          animatedPath.set(currentPath);
           previousPathRef.current = currentPath;
+          animationRef.current = null;
         }
       }));
-      isInitialRender.current = false;
     }
     return () => {
       if (animationRef.current) {
-        animationRef.current.cancel();
+        animationRef.current.stop();
       }
     };
-  }, [currentPath, transition, progress, interpolatedPath]);
-  return interpolatedPath;
+  }, [currentPath, updateTransition, enterTransition, animatedPath]);
+  return animatedPath;
 };

package/esm/sparkline/Sparkline.js

@@ -15,7 +15,8 @@ import { SparklineAreaPattern } from './SparklineAreaPattern';
 import { SparklinePath } from './SparklinePath';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/esm/sparkline/SparklineArea.js

@@ -1,7 +1,8 @@
 import React, { forwardRef, memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @deprecated Use AreaChart instead.
+ * @deprecated Use AreaChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/esm/sparkline/SparklineGradient.js

@@ -2,7 +2,8 @@ import React, { forwardRef, memo } from 'react';
 import { Sparkline } from './Sparkline';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/esm/sparkline/__figma__/Sparkline.figma.js

@@ -5,7 +5,7 @@ import { figma } from '@figma/code-connect';
 import { Sparkline } from '../Sparkline';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(Sparkline, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-15040&m=dev', {
-  imports: ["import { Sparkline } from '@coinbase/cds-web-visualization';", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';"],
+  imports: ["import { Sparkline } from '@coinbase/cds-web-visualization'", "import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath'"],
   example: () => {
     const data = [20, 30, 5, 45, 0];
     // @ts-expect-error: useSparklinePath is not typed correctly

package/esm/sparkline/sparkline-interactive/SparklineInteractive.js

@@ -312,6 +312,7 @@ function SparklineInteractiveWithGeneric(_ref4) {
 }
 
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);

package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js

@@ -8,7 +8,7 @@ import { figma } from '@figma/code-connect';
 import { SparklineInteractive } from '../SparklineInteractive';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14858&m=dev', {
-  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/esm/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.js

@@ -9,7 +9,7 @@ import { SparklineInteractive } from '../../sparkline-interactive/SparklineInter
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SparklineInteractiveHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=320-14931&m=dev', {
-  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization';", "import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  imports: ["import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'", "import { SparklineInteractive } from '@coinbase/cds-web-visualization'"],
   props: {
     compact: figma.boolean('compact'),
     disableScrubbing: figma.boolean('scrubbing', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.4.0-beta.9",
+  "version": "3.4.0",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",
@@ -38,10 +38,11 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.32.3",
+    "@coinbase/cds-common": "^8.62.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
-    "@coinbase/cds-web": "^8.32.3",
+    "@coinbase/cds-web": "^8.62.1",
+    "framer-motion": "^10.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -58,13 +59,13 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.32.3",
+    "@coinbase/cds-common": "^8.62.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
-    "@coinbase/cds-web": "^8.32.3",
-    "@figma/code-connect": "^1.3.4",
+    "@coinbase/cds-web": "^8.62.1",
     "@linaria/core": "^3.0.0-beta.22",
     "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1"
+    "@types/react-dom": "^18.3.1",
+    "framer-motion": "^10.18.0"
   }
 }