@coinbase/cds-mobile-visualization 3.6.1 → 3.6.2

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.6.2 (4/20/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: bar chart enter animation clipping. [[#631](https://github.com/coinbase/cds/pull/631)]
+
 ## 3.6.1 (4/16/2026 PST)
 
 #### 🐞 Fixes

package/dts/chart/bar/BarPlot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarPlot.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarPlot.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,kBAAkB,EAChB,YAAY,GACZ,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,GACb,cAAc,GACd,eAAe,GACf,UAAU,GACV,YAAY,GACZ,cAAc,GACd,mBAAmB,CACtB,GAAG;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,IAAI,CAAC,kBAAkB,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;AAQzD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,oDA2FnB,CAAC"}
+{"version":3,"file":"BarPlot.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/BarPlot.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,kBAAkB,EAChB,YAAY,GACZ,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,GACb,cAAc,GACd,eAAe,GACf,UAAU,GACV,YAAY,GACZ,cAAc,GACd,mBAAmB,CACtB,GAAG;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,IAAI,CAAC,kBAAkB,EAAE,aAAa,GAAG,YAAY,CAAC,CAAC;AAQzD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,oDAmGnB,CAAC"}

package/dts/chart/bar/DefaultBarStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultBarStack.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/DefaultBarStack.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,eAAe,8DA2E3B,CAAC"}
+{"version":3,"file":"DefaultBarStack.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/DefaultBarStack.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,eAAe,8DAqF3B,CAAC"}

package/esm/chart/bar/BarPlot.js

@@ -65,12 +65,21 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
       from: prev.to,
       to: nextPath
     }));
-    clipProgress.value = 0;
-    clipProgress.value = buildTransition(1, animate ? clipUpdateTransition : null);
+    if (drawingArea.width || !drawingArea.height) {
+      clipProgress.value = 1;
+    } else {
+      clipProgress.value = 0;
+      clipProgress.value = buildTransition(1, animate ? clipUpdateTransition : null);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [drawingArea, animate, clipUpdateTransition]);
   const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], [clipPaths.from, clipPaths.to]);
   if (!drawingArea) return;
+
+  // Clip path animation for bar is just for chart size changes, not for
+  // enter transition. One caveat, bar update transitions are staggered
+  // but clip path is not, so some bars could be clipped in rare cases
+
   return /*#__PURE__*/_jsx(Group, {
     clip: animatedClipPath,
     children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {

package/esm/chart/bar/DefaultBarStack.js

@@ -1,5 +1,5 @@
 import { memo, useMemo } from 'react';
-import { Group } from '@shopify/react-native-skia';
+import { Group, Skia } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { getBarPath } from '../utils';
 import { defaultBarEnterTransition, getNormalizedStagger, getStackInitialClipRect, withStaggerDelayTransition } from '../utils/bar';
@@ -28,7 +28,8 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     layout
   } = useCartesianChartContext();
   const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
-  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.enter, normalizedStagger]);
+  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
+  const enterTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterTransition, normalizedStagger), [enterTransition, normalizedStagger]);
   const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [animate, transitions == null ? void 0 : transitions.update, transition, normalizedStagger]);
 
   // Generate target clip path (full bar)
@@ -51,11 +52,15 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     currentPath: targetPath,
     initialPath,
     transitions: {
-      enter: enterTransition,
+      enter: enterTransitionWithStagger,
       update: updateTransition
     }
   });
-  const clipPath = animate ? animatedClipPath : targetPath;
+  const staticClipPath = useMemo(() => {
+    var _Skia$Path$MakeFromSV;
+    return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(targetPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
+  }, [targetPath]);
+  const clipPath = animate ? animatedClipPath : staticClipPath;
   return /*#__PURE__*/_jsx(Group, {
     clip: clipPath,
     children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",