@coinbase/cds-mobile 8.44.2 → 8.45.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.45.0 (2/12/2026 PST)
+
+#### 🚀 Updates
+
+- Add reduce motion support for Tray. [[#386](https://github.com/coinbase/cds/pull/386)]
+
 ## 8.44.2 (2/10/2026 PST)
 
 #### 🐞 Fixes

package/dts/overlays/drawer/Drawer.d.ts

@@ -65,6 +65,12 @@ export type DrawerBaseProps = SharedProps &
      * @deprecated Use TrayStickyFooter as a Tray child instead.
      */
     stickyFooter?: DrawerRenderChildren | React.ReactNode;
+    /**
+     * When true, the drawer opens and closes with an opacity fade instead of
+     * a slide animation. Swipe-to-dismiss gestures remain enabled and use
+     * the slide transform so the drawer follows the user's finger naturally.
+     */
+    reduceMotion?: boolean;
   };
 export type DrawerProps = DrawerBaseProps & {
   styles?: {
@@ -136,6 +142,12 @@ export declare const Drawer: React.MemoExoticComponent<
          * @deprecated Use TrayStickyFooter as a Tray child instead.
          */
         stickyFooter?: DrawerRenderChildren | React.ReactNode;
+        /**
+         * When true, the drawer opens and closes with an opacity fade instead of
+         * a slide animation. Swipe-to-dismiss gestures remain enabled and use
+         * the slide transform so the drawer follows the user's finger naturally.
+         */
+        reduceMotion?: boolean;
       } & {
         styles?: {
           /** Root container element */

package/dts/overlays/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"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"}

package/dts/overlays/drawer/useDrawerAnimation.d.ts

@@ -3,22 +3,39 @@ import type { PinningDirection } from '@coinbase/cds-common';
 export declare const useDrawerAnimation: (
   pin?: PinningDirection | undefined,
   verticalDrawerPercentageOfView?: number | undefined,
+  reduceMotion?: boolean,
 ) => {
   drawerAnimation: Animated.Value;
   animateDrawerOut: Animated.CompositeAnimation;
   animateDrawerIn: Animated.CompositeAnimation;
-  drawerAnimationStyles: {
-    transform: (
-      | {
-          translateY: Animated.AnimatedInterpolation<string | number>;
-          translateX?: undefined;
-        }
-      | {
-          translateX: Animated.AnimatedInterpolation<string | number>;
-          translateY?: undefined;
-        }
-    )[];
-  };
+  animateSnapBack: Animated.CompositeAnimation;
+  drawerAnimationStyles:
+    | {
+        opacity: Animated.Value;
+        transform: (
+          | {
+              translateY: Animated.AnimatedInterpolation<string | number>;
+              translateX?: undefined;
+            }
+          | {
+              translateX: Animated.AnimatedInterpolation<string | number>;
+              translateY?: undefined;
+            }
+        )[];
+      }
+    | {
+        transform: (
+          | {
+              translateY: Animated.AnimatedInterpolation<string | number>;
+              translateX?: undefined;
+            }
+          | {
+              translateX: Animated.AnimatedInterpolation<string | number>;
+              translateY?: undefined;
+            }
+        )[];
+        opacity?: undefined;
+      };
   animateSwipeToClose: Animated.CompositeAnimation;
 };
 //# sourceMappingURL=useDrawerAnimation.d.ts.map

package/dts/overlays/drawer/useDrawerAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerAnimation.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAA+B,MAAM,cAAc,CAAC;AACrE,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAqB7E,eAAO,MAAM,kBAAkB,GAC7B,MAAK,gBAAgB,GAAG,SAAoB,EAC5C,iCAAgC,MAAM,GAAG,SAAiD;;;;;;;;;;;;;;CA2E3F,CAAC"}
+{"version":3,"file":"useDrawerAnimation.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAA+B,MAAM,cAAc,CAAC;AACrE,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAqB7E,eAAO,MAAM,kBAAkB,GAC7B,MAAK,gBAAgB,GAAG,SAAoB,EAC5C,iCAAgC,MAAM,GAAG,SAAiD,EAC1F,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAqHvB,CAAC"}

package/dts/overlays/drawer/useDrawerPanResponder.d.ts

@@ -2,7 +2,7 @@ import type { Animated } from 'react-native';
 import type { PinningDirection } from '@coinbase/cds-common';
 type UseDrawerPanResponderParams = {
   drawerAnimation: Animated.Value;
-  animateDrawerIn: Animated.CompositeAnimation;
+  animateSnapBack: Animated.CompositeAnimation;
   pin: PinningDirection;
   disableCapturePanGestureToDismiss: boolean;
   onBlur?: () => void;
@@ -13,7 +13,7 @@ type UseDrawerPanResponderParams = {
 export declare const useDrawerPanResponder: ({
   pin,
   drawerAnimation,
-  animateDrawerIn,
+  animateSnapBack,
   disableCapturePanGestureToDismiss,
   onBlur,
   handleSwipeToClose,

package/esm/overlays/__stories__/DrawerReduceMotion.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { DefaultDrawer } from './Drawers';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DrawerReduceMotionScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Reduce Motion Drawer",
+      children: /*#__PURE__*/_jsx(DefaultDrawer, {
+        reduceMotion: true,
+        pin: "bottom"
+      })
+    })
+  });
+};
+export default DrawerReduceMotionScreen;

package/esm/overlays/__stories__/Drawers.js

@@ -10,7 +10,8 @@ import { Drawer } from '../drawer/Drawer';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const DefaultDrawer = _ref => {
   let {
-    pin = 'left'
+    pin = 'left',
+    reduceMotion
   } = _ref;
   const [isVisible, setIsVisible] = useState(true);
   const setIsVisibleOff = useCallback(() => setIsVisible(false), [setIsVisible]);
@@ -22,6 +23,7 @@ export const DefaultDrawer = _ref => {
     }), isVisible && /*#__PURE__*/_jsx(Drawer, {
       onCloseComplete: setIsVisibleOff,
       pin: pin,
+      reduceMotion: reduceMotion,
       children: _ref2 => {
         let {
           handleClose

package/esm/overlays/__stories__/TrayReduceMotion.stories.js

@@ -0,0 +1,45 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { Tray } from '../tray/Tray';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const TrayReduceMotionScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Reduce Motion Tray",
+      children: /*#__PURE__*/_jsx(TrayWithReduceMotion, {})
+    })
+  });
+};
+const TrayWithReduceMotion = () => {
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
+  const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
+  const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
+  const trayRef = useRef(null);
+  const handleTrayVisibilityChange = useCallback(e => {
+    console.log('Tray visibility changed:', e);
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleOn,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      reduceMotion: true,
+      handleBarVariant: "inside",
+      onCloseComplete: setIsTrayVisibleOff,
+      onVisibilityChange: handleTrayVisibilityChange,
+      title: "Header",
+      children: /*#__PURE__*/_jsx(VStack, {
+        paddingX: 3,
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie, interdum lorem id, viverra."
+        })
+      })
+    })]
+  });
+};
+export default TrayReduceMotionScreen;

package/esm/overlays/drawer/Drawer.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "style", "styles", "accessibilityRole", "animationType"];
+const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "style", "styles", "accessibilityRole", "animationType"];
 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); }
 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, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -38,6 +38,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
       handleBarAccessibilityLabel = 'Dismiss',
       accessibilityLabel,
       accessibilityLabelledBy,
+      reduceMotion,
       style,
       styles,
       accessibilityRole = 'alert',
@@ -54,9 +55,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
     drawerAnimation,
     animateDrawerOut,
     animateDrawerIn,
+    animateSnapBack,
     drawerAnimationStyles,
     animateSwipeToClose
-  } = useDrawerAnimation(pin, verticalDrawerPercentageOfView);
+  } = useDrawerAnimation(pin, verticalDrawerPercentageOfView, reduceMotion);
   const [opacityAnimation, animateOverlayIn, animateOverlayOut] = useOverlayAnimation(drawerAnimationDefaultDuration);
   const paddingStyles = useDrawerSpacing(pin);
   const isMounted = useRef(false);
@@ -100,7 +102,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
   const panGestureHandlers = useDrawerPanResponder({
     pin,
     drawerAnimation,
-    animateDrawerIn,
+    animateSnapBack,
     disableCapturePanGestureToDismiss,
     onBlur,
     handleSwipeToClose,

package/esm/overlays/drawer/useDrawerAnimation.js

@@ -1,3 +1,4 @@
+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 { useMemo, useRef } from 'react';
 import { Animated, Easing, useWindowDimensions } from 'react-native';
 import { animateDrawerInConfig, animateDrawerOutConfig, drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
@@ -8,7 +9,7 @@ const animateDrawer = {
   animateIn: convertMotionConfig(animateDrawerInConfig),
   animateOut: convertMotionConfig(animateDrawerOutConfig)
 };
-export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView) {
+export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView, reduceMotion) {
   if (pin === void 0) {
     pin = 'bottom';
   }
@@ -19,8 +20,30 @@ export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView)
   const isPinVertical = pin === 'top' || pin === 'bottom';
   const drawerDimension = isPinVertical ? windowDimensions.height * verticalDrawerPercentageOfView : windowDimensions.width * horizontalDrawerPercentageOfView;
   const drawerAnimation = useRef(new Animated.Value(0));
-  const animateDrawerIn = useMemo(() => Animated.timing(drawerAnimation.current, animateDrawer.animateIn), []);
-  const animateDrawerOut = useMemo(() => Animated.timing(drawerAnimation.current, animateDrawer.animateOut), []);
+  // Separate opacity value used when reduceMotion is true so that
+  // open/close-button fades are independent of the transform that
+  // the pan-responder drives during swipe gestures.
+  const contentOpacity = useRef(new Animated.Value(reduceMotion ? 0 : 1));
+  const animateDrawerIn = useMemo(() => {
+    if (reduceMotion) {
+      return Animated.parallel([Animated.timing(drawerAnimation.current, _extends({}, animateDrawer.animateIn, {
+        duration: 0
+      })), Animated.timing(contentOpacity.current, animateDrawer.animateIn)]);
+    }
+    return Animated.timing(drawerAnimation.current, animateDrawer.animateIn);
+  }, [reduceMotion]);
+  const animateDrawerOut = useMemo(() => {
+    if (reduceMotion) {
+      return Animated.timing(contentOpacity.current, animateDrawer.animateOut);
+    }
+    return Animated.timing(drawerAnimation.current, animateDrawer.animateOut);
+  }, [reduceMotion]);
+  const animateSnapBack = useMemo(() => {
+    if (reduceMotion) {
+      return Animated.parallel([Animated.timing(drawerAnimation.current, animateDrawer.animateIn), Animated.timing(contentOpacity.current, animateDrawer.animateIn)]);
+    }
+    return Animated.timing(drawerAnimation.current, animateDrawer.animateIn);
+  }, [reduceMotion]);
 
   /** custom animation config for swipe and fling to close that has no friction and is faster */
   const animateSwipeToClose = useMemo(() => Animated.timing(drawerAnimation.current, {
@@ -62,15 +85,25 @@ export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView)
         };
     }
   }, [pin, drawerDimension]);
+  const drawerAnimationStyles = useMemo(() => {
+    if (reduceMotion) {
+      return {
+        opacity: contentOpacity.current,
+        transform: [translation]
+      };
+    }
+    return {
+      transform: [translation]
+    };
+  }, [reduceMotion, translation]);
   return useMemo(() => {
     return {
       drawerAnimation: drawerAnimation.current,
       animateDrawerOut,
       animateDrawerIn,
-      drawerAnimationStyles: {
-        transform: [translation]
-      },
+      animateSnapBack,
+      drawerAnimationStyles,
       animateSwipeToClose
     };
-  }, [animateDrawerOut, animateDrawerIn, translation, animateSwipeToClose]);
+  }, [animateDrawerOut, animateDrawerIn, animateSnapBack, drawerAnimationStyles, animateSwipeToClose]);
 };

package/esm/overlays/drawer/useDrawerPanResponder.js

@@ -12,7 +12,7 @@ export const useDrawerPanResponder = _ref => {
   let {
     pin,
     drawerAnimation,
-    animateDrawerIn,
+    animateSnapBack,
     disableCapturePanGestureToDismiss,
     onBlur,
     handleSwipeToClose,
@@ -172,10 +172,10 @@ export const useDrawerPanResponder = _ref => {
           onBlur == null || onBlur();
           handleSwipeToClose();
         } else {
-          animateDrawerIn.start();
+          animateSnapBack.start();
         }
       }
     });
-  }, [drawerAnimation, animateDrawerIn, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
+  }, [drawerAnimation, animateSnapBack, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
   return panGestureHandlers;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.44.2",
+  "version": "8.45.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.44.2",
+    "@coinbase/cds-common": "^8.45.0",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",