@coinbase/cds-mobile 9.6.5 → 9.6.6

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.6.6 (7/14/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: do not animate initial animated caret render. [[#792](https://github.com/coinbase/cds/pull/792)]
+
 ## 9.6.5 (7/13/2026 PST)
 
 #### 🐞 Fixes

package/dts/motion/AnimatedCaret.d.ts

@@ -6,13 +6,12 @@ export type AnimatedCaretBaseProps = SharedProps & {
   rotate: number;
 };
 export type AnimatedCaretProps = AnimatedCaretBaseProps & Partial<Omit<IconProps, 'name'>>;
-export declare const useAnimatedCaretAnimation: () => {
+export declare const useAnimatedCaretAnimation: (rotate: number) => {
   animatedStyles: {
     transform: {
       rotate: Animated.AnimatedInterpolation<string | number>;
     }[];
   };
-  animate: (rotate: number) => void;
 };
 export declare const AnimatedCaret: React.NamedExoticComponent<AnimatedCaretProps>;
 //# sourceMappingURL=AnimatedCaret.d.ts.map

package/dts/motion/AnimatedCaret.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedCaret.d.ts","sourceRoot":"","sources":["../../src/motion/AnimatedCaret.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IACjD,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAE3F,eAAO,MAAM,yBAAyB;;;;;;sBAIzB,MAAM;CAqBlB,CAAC;AAEF,eAAO,MAAM,aAAa,gDA2BxB,CAAC"}
+{"version":3,"file":"AnimatedCaret.d.ts","sourceRoot":"","sources":["../../src/motion/AnimatedCaret.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAG1E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IACjD,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAE3F,eAAO,MAAM,yBAAyB,GAAI,QAAQ,MAAM;;;;;;CA2BvD,CAAC;AAEF,eAAO,MAAM,aAAa,gDAsBxB,CAAC"}

package/esm/motion/AnimatedCaret.js

@@ -1,21 +1,25 @@
 const _excluded = ["rotate", "size", "color", "style"];
 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; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated } from 'react-native';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { animateRotateConfig } from '@coinbase/cds-common/motion/animatedCaret';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const useAnimatedCaretAnimation = () => {
-  const rotateValue = useRef(new Animated.Value(0)).current;
-  const animate = useCallback(rotate => {
+export const useAnimatedCaretAnimation = rotate => {
+  const [rotateValue] = useState(() => new Animated.Value(rotate));
+  const isInitialRender = useRef(true);
+  useEffect(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
     Animated.timing(rotateValue, convertMotionConfig(_extends({}, animateRotateConfig, {
       toValue: rotate
     }))).start();
-  }, [rotateValue]);
+  }, [rotate, rotateValue]);
   const interpolatedRotateValue = rotateValue.interpolate({
     inputRange: [0, 360],
     outputRange: ['0deg', '360deg']
@@ -25,9 +29,8 @@ export const useAnimatedCaretAnimation = () => {
       transform: [{
         rotate: interpolatedRotateValue
       }]
-    },
-    animate
-  }), [interpolatedRotateValue, animate]);
+    }
+  }), [interpolatedRotateValue]);
 };
 export const AnimatedCaret = /*#__PURE__*/memo(function AnimatedCaret(_ref) {
   let {
@@ -38,13 +41,8 @@ export const AnimatedCaret = /*#__PURE__*/memo(function AnimatedCaret(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
-    animatedStyles,
-    animate
-  } = useAnimatedCaretAnimation();
-  const previousRotate = usePreviousValue(rotate);
-  useEffect(() => {
-    if (rotate !== previousRotate) animate(rotate);
-  }, [rotate, previousRotate, animate]);
+    animatedStyles
+  } = useAnimatedCaretAnimation(rotate);
   return (
     /*#__PURE__*/
     // HStack to limit rotate boundary

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.6.5",
+  "version": "9.6.6",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -206,7 +206,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.6.5",
+    "@coinbase/cds-common": "^9.6.6",
     "@coinbase/cds-icons": "^5.20.0",
     "@coinbase/cds-illustrations": "^4.44.0",
     "@coinbase/cds-lottie-files": "^3.3.4",