@coinbase/cds-mobile-visualization 3.4.0 → 3.6.2

package/esm/chart/bar/index.js

@@ -6,4 +6,5 @@ export * from './BarStack';
 export * from './BarStackGroup';
 export * from './DefaultBar';
 export * from './DefaultBarStack';
+export * from './PercentageBarChart';
 // codegen:end

package/esm/chart/utils/bar.js

@@ -63,6 +63,15 @@ export const defaultBarEnterTransition = _extends({}, defaultTransition, {
   staggerDelay: 250
 });
 
+/**
+ * Default bar enter opacity transition.
+ * `{ type: 'timing', duration: 200 }`
+ */
+export const defaultBarEnterOpacityTransition = {
+  type: 'timing',
+  duration: 200
+};
+
 /**
  * Calculates the size adjustment needed for bars when accounting for gaps between them.
  * This function helps determine how much to reduce each bar's width to accommodate

package/esm/chart/utils/transition.js

@@ -173,8 +173,12 @@ export const usePathTransition = _ref => {
     transitions,
     transition = defaultTransition
   } = _ref;
-  const updateTransition = (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition;
-  const enterTransition = transitions == null ? void 0 : transitions.enter;
+  const transitionRef = useRef({
+    enter: transitions == null ? void 0 : transitions.enter,
+    update: (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition
+  });
+  transitionRef.current.enter = transitions == null ? void 0 : transitions.enter;
+  transitionRef.current.update = (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition;
   const targetPathRef = useRef(initialPath != null ? initialPath : currentPath);
   const isFirstAnimation = useRef(!!initialPath);
   const interpolatorRef = useRef(null);
@@ -193,7 +197,11 @@ export const usePathTransition = _ref => {
         fromPath = interpolatorRef.current(p);
       }
       targetPathRef.current = currentPath;
-      const activeTransition = isFirstAnimation.current && enterTransition !== undefined ? enterTransition : updateTransition;
+      const {
+        enter,
+        update
+      } = transitionRef.current;
+      const activeTransition = isFirstAnimation.current && enter !== undefined ? enter : update;
       isFirstAnimation.current = false;
       if (activeTransition === null) {
         var _Skia$Path$MakeFromSV2;
@@ -215,7 +223,7 @@ export const usePathTransition = _ref => {
       progress.value = 0;
       progress.value = buildTransition(1, activeTransition);
     }
-  }, [currentPath, updateTransition, enterTransition, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared, result]);
+  }, [currentPath, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared, result]);
   useAnimatedReaction(() => ({
     p: progress.value,
     to: fallbackPathShared.value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0",
+  "version": "3.6.2",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.62.1",
+    "@coinbase/cds-common": "^8.66.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.62.1",
+    "@coinbase/cds-mobile": "^8.66.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,9 +57,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.62.1",
+    "@coinbase/cds-common": "^8.66.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.62.1",
+    "@coinbase/cds-mobile": "^8.66.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",