@coinbase/cds-web 8.44.1 → 8.45.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ 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
+
+- Fix Tray drag elastic. [[#385](https://github.com/coinbase/cds/pull/385)]
+
 ## 8.44.1 (2/10/2026 PST)
 
 #### 🐞 Fixes

package/dts/overlays/tray/Tray.d.ts

@@ -91,6 +91,11 @@ export type TrayBaseProps = {
    * @default true
    */
   restoreFocusOnUnmount?: boolean;
+  /**
+   * When true, the tray will use opacity animation instead of transform animation.
+   * This is useful for supporting reduced motion for accessibility.
+   */
+  reduceMotion?: boolean;
   /**
    * Sets an accessible label for the close button.
    * On web, maps to `aria-label` and defines a string value that labels an interactive element.
@@ -188,6 +193,11 @@ export declare const Tray: React.MemoExoticComponent<
        * @default true
        */
       restoreFocusOnUnmount?: boolean;
+      /**
+       * When true, the tray will use opacity animation instead of transform animation.
+       * This is useful for supporting reduced motion for accessibility.
+       */
+      reduceMotion?: boolean;
       /**
        * Sets an accessible label for the close button.
        * On web, maps to `aria-label` and defines a string value that labels an interactive element.

package/dts/overlays/tray/Tray.d.ts.map

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

package/esm/overlays/tray/Tray.js

@@ -6,7 +6,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { DISMISSAL_DRAG_THRESHOLD, DISMISSAL_VELOCITY_THRESHOLD } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
-import { domMax, LazyMotion, m as motion, useAnimate, useDragControls } from 'framer-motion';
+import { domMax, LazyMotion, m as motion, MotionConfig, useAnimate, useDragControls } from 'framer-motion';
 import { IconButton } from '../../buttons';
 import { cx } from '../../cx';
 import { useDimensions } from '../../hooks/useDimensions';
@@ -108,6 +108,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     accessibilityLabelledBy,
     focusTabIndexElements,
     restoreFocusOnUnmount = true,
+    reduceMotion,
     closeAccessibilityLabel = 'Close',
     closeAccessibilityHint,
     styles,
@@ -144,16 +145,24 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
   }, [onVisibilityChange]);
   const handleClose = useCallback(() => {
     if (!scope.current) return;
-    animate(scope.current, isSideTray ? {
-      x: pin === 'right' ? '100%' : '-100%'
-    } : {
-      y: pin === 'bottom' ? '100%' : '-100%'
-    }, animationConfig.slideOut.transition).then(() => {
+    let finalAnimationValue;
+    if (reduceMotion) {
+      finalAnimationValue = {
+        opacity: 0
+      };
+    } else {
+      finalAnimationValue = isSideTray ? {
+        x: pin === 'right' ? '100%' : '-100%'
+      } : {
+        y: pin === 'bottom' ? '100%' : '-100%'
+      };
+    }
+    animate(scope.current, finalAnimationValue, animationConfig.slideOut.transition).then(() => {
       setIsOpen(false);
       onClose === null || onClose === void 0 || onClose();
       onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete();
     });
-  }, [animate, scope, isSideTray, pin, onClose, onCloseComplete]);
+  }, [animate, scope, isSideTray, pin, onClose, onCloseComplete, reduceMotion]);
   const handleSwipeClose = useCallback(() => {
     if (!scope.current) return;
     animate(scope.current, {
@@ -195,16 +204,30 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       });
     }
   }, [trayHeight, handleSwipeClose, animate, scope]);
-  const initialAnimationValue = useMemo(() => isSideTray ? {
-    x: pin === 'right' ? '100%' : '-100%'
-  } : {
-    y: pin === 'bottom' ? '100%' : '-100%'
-  }, [isSideTray, pin]);
-  const animateValue = useMemo(() => isSideTray ? {
-    x: 0
-  } : {
-    y: 0
-  }, [isSideTray]);
+  const initialAnimationValue = useMemo(() => {
+    if (reduceMotion) {
+      return {
+        opacity: 0
+      };
+    }
+    return isSideTray ? {
+      x: pin === 'right' ? '100%' : '-100%'
+    } : {
+      y: pin === 'bottom' ? '100%' : '-100%'
+    };
+  }, [isSideTray, pin, reduceMotion]);
+  const animateValue = useMemo(() => {
+    if (reduceMotion) {
+      return {
+        opacity: 1
+      };
+    }
+    return isSideTray ? {
+      x: 0
+    } : {
+      y: 0
+    };
+  }, [isSideTray, reduceMotion]);
 
   // Handle bar only shows for bottom-pinned trays (matching mobile behavior)
   const shouldShowHandleBar = showHandleBar && pin === 'bottom';
@@ -263,120 +286,123 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
           onClick: handleOverlayClick,
           style: styles === null || styles === void 0 ? void 0 : styles.overlay,
           testID: "tray-overlay"
-        }), /*#__PURE__*/_jsx(DragMotionProvider, {
-          enabled: !preventDismiss,
-          children: /*#__PURE__*/_jsx(FocusTrap, {
-            focusTabIndexElements: focusTabIndexElements,
-            onEscPress: preventDismiss ? undefined : handleClose,
-            restoreFocusOnUnmount: restoreFocusOnUnmount,
-            children: /*#__PURE__*/_jsx(MotionVStack, {
-              ref: scope,
-              accessibilityLabel: accessibilityLabel,
-              accessibilityLabelledBy: accessibilityLabelledBy,
-              animate: animateValue,
-              "aria-modal": "true",
-              bordered: theme.activeColorScheme === 'dark',
-              className: cx(trayContainerBaseCss, trayContainerPinCss, trayClassNames.container, classNames === null || classNames === void 0 ? void 0 : classNames.container),
-              "data-testid": "tray",
-              drag: !preventDismiss ? 'y' : undefined,
-              dragConstraints: {
-                top: 0,
-                bottom: 0
-              },
-              dragControls: dragControls,
-              dragElastic: {
-                top: 0.5,
-                bottom: 0.5
-              },
-              dragListener: false,
-              elevation: 2,
-              id: id,
-              initial: initialAnimationValue,
-              onClick: e => e.stopPropagation(),
-              onDragEnd: !preventDismiss ? handleDragEnd : undefined,
-              pin: pin,
-              role: role,
-              style: _objectSpread({
-                maxHeight: isSideTray ? undefined : verticalDrawerPercentageOfView,
-                touchAction: !preventDismiss && pin === 'bottom' ? 'none' : undefined
-              }, styles === null || styles === void 0 ? void 0 : styles.container),
-              tabIndex: 0,
-              transition: animationConfig.slideIn.transition,
-              width: isSideTray ? 'min(400px, 100vw)' : undefined,
-              children: /*#__PURE__*/_jsxs(VStack, {
-                ref: observeTraySize,
-                flexGrow: 1,
-                maxWidth: isSideTray ? undefined : '70em',
-                minHeight: 0,
-                width: "100%",
-                children: [(shouldShowTitle || headerContent || shouldShowHandleBar) && /*#__PURE__*/_jsxs(VStack, {
-                  className: cx(shouldShrinkPadding && trayHeaderBorderBaseCss, shouldShrinkPadding && hasScrolledDown && trayHeaderBorderVisibleCss, trayClassNames.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
-                  flexShrink: 0,
-                  overflow: "hidden",
-                  paddingBottom: shouldShrinkPadding ? 0.75 : 1,
-                  paddingTop: !shouldShrinkPadding ? 3 : shouldShowHandleBar ? 0 : isSideTray ? 4 : 2,
-                  style: styles === null || styles === void 0 ? void 0 : styles.header,
-                  children: [shouldShowHandleBar && (preventDismiss ? /*#__PURE__*/_jsx(HandleBar, {
-                    classNames: {
-                      root: cx(trayClassNames.handleBar, classNames === null || classNames === void 0 ? void 0 : classNames.handleBar),
-                      handle: cx(trayClassNames.handleBarHandle, classNames === null || classNames === void 0 ? void 0 : classNames.handleBarHandle)
-                    },
-                    styles: {
-                      root: styles === null || styles === void 0 ? void 0 : styles.handleBar,
-                      handle: styles === null || styles === void 0 ? void 0 : styles.handleBarHandle
-                    }
-                  }) : /*#__PURE__*/_jsx(HandleBar, {
-                    accessibilityHint: closeAccessibilityHint,
-                    accessibilityLabel: closeAccessibilityLabel,
-                    classNames: {
-                      root: cx(trayClassNames.handleBar, classNames === null || classNames === void 0 ? void 0 : classNames.handleBar),
-                      handle: cx(trayClassNames.handleBarHandle, classNames === null || classNames === void 0 ? void 0 : classNames.handleBarHandle)
-                    },
-                    onClose: handleClose,
-                    onPointerDown: e => {
-                      dragControls.start(e);
-                    },
-                    styles: {
-                      root: styles === null || styles === void 0 ? void 0 : styles.handleBar,
-                      handle: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.handleBarHandle), {}, {
-                        touchAction: 'none'
-                      })
-                    }
-                  })), shouldShowTitle && /*#__PURE__*/_jsxs(HStack, {
-                    alignItems: isSideTray ? 'flex-start' : 'center',
-                    justifyContent: title ? 'space-between' : 'flex-end',
-                    paddingX: horizontalPadding,
-                    children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-                      className: cx(trayClassNames.title, classNames === null || classNames === void 0 ? void 0 : classNames.title),
-                      font: "title3",
-                      style: styles === null || styles === void 0 ? void 0 : styles.title,
-                      children: title
-                    }) : title), shouldShowCloseButton && /*#__PURE__*/_jsx(IconButton, {
-                      transparent: true,
-                      accessibilityHint: closeAccessibilityHint,
-                      accessibilityLabel: closeAccessibilityLabel,
-                      className: cx(trayClassNames.closeButton, classNames === null || classNames === void 0 ? void 0 : classNames.closeButton),
-                      margin: isSideTray ? -1.5 : undefined,
-                      name: "close",
-                      onClick: handleClose,
-                      style: styles === null || styles === void 0 ? void 0 : styles.closeButton,
-                      testID: "tray-close-button"
-                    })]
-                  }), headerContent]
-                }), /*#__PURE__*/_jsx(VStack, {
-                  ref: contentRef,
-                  className: cx(trayClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+        }), /*#__PURE__*/_jsx(MotionConfig, {
+          reducedMotion: reduceMotion ? 'always' : undefined,
+          children: /*#__PURE__*/_jsx(DragMotionProvider, {
+            enabled: !preventDismiss,
+            children: /*#__PURE__*/_jsx(FocusTrap, {
+              focusTabIndexElements: focusTabIndexElements,
+              onEscPress: preventDismiss ? undefined : handleClose,
+              restoreFocusOnUnmount: restoreFocusOnUnmount,
+              children: /*#__PURE__*/_jsx(MotionVStack, {
+                ref: scope,
+                accessibilityLabel: accessibilityLabel,
+                accessibilityLabelledBy: accessibilityLabelledBy,
+                animate: animateValue,
+                "aria-modal": "true",
+                bordered: theme.activeColorScheme === 'dark',
+                className: cx(trayContainerBaseCss, trayContainerPinCss, trayClassNames.container, classNames === null || classNames === void 0 ? void 0 : classNames.container),
+                "data-testid": "tray",
+                drag: !preventDismiss ? 'y' : undefined,
+                dragConstraints: {
+                  top: 0,
+                  bottom: 0
+                },
+                dragControls: dragControls,
+                dragElastic: {
+                  top: 0,
+                  bottom: 0.5
+                },
+                dragListener: false,
+                elevation: 2,
+                id: id,
+                initial: initialAnimationValue,
+                onClick: e => e.stopPropagation(),
+                onDragEnd: !preventDismiss ? handleDragEnd : undefined,
+                pin: pin,
+                role: role,
+                style: _objectSpread({
+                  maxHeight: isSideTray ? undefined : verticalDrawerPercentageOfView,
+                  touchAction: !preventDismiss && pin === 'bottom' ? 'none' : undefined
+                }, styles === null || styles === void 0 ? void 0 : styles.container),
+                tabIndex: 0,
+                transition: animationConfig.slideIn.transition,
+                width: isSideTray ? 'min(400px, 100vw)' : undefined,
+                children: /*#__PURE__*/_jsxs(VStack, {
+                  ref: observeTraySize,
                   flexGrow: 1,
+                  maxWidth: isSideTray ? undefined : '70em',
                   minHeight: 0,
-                  overflow: "hidden",
-                  paddingBottom: shouldShrinkPadding ? 0 : 2,
-                  paddingTop: shouldShrinkPadding ? 0 : 1,
-                  paddingX: horizontalPadding,
-                  style: _objectSpread({
-                    overflowY: 'auto'
-                  }, styles === null || styles === void 0 ? void 0 : styles.content),
-                  children: content
-                }), footerContent]
+                  width: "100%",
+                  children: [(shouldShowTitle || headerContent || shouldShowHandleBar) && /*#__PURE__*/_jsxs(VStack, {
+                    className: cx(shouldShrinkPadding && trayHeaderBorderBaseCss, shouldShrinkPadding && hasScrolledDown && trayHeaderBorderVisibleCss, trayClassNames.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
+                    flexShrink: 0,
+                    overflow: "hidden",
+                    paddingBottom: shouldShrinkPadding ? 0.75 : 1,
+                    paddingTop: !shouldShrinkPadding ? 3 : shouldShowHandleBar ? 0 : isSideTray ? 4 : 2,
+                    style: styles === null || styles === void 0 ? void 0 : styles.header,
+                    children: [shouldShowHandleBar && (preventDismiss ? /*#__PURE__*/_jsx(HandleBar, {
+                      classNames: {
+                        root: cx(trayClassNames.handleBar, classNames === null || classNames === void 0 ? void 0 : classNames.handleBar),
+                        handle: cx(trayClassNames.handleBarHandle, classNames === null || classNames === void 0 ? void 0 : classNames.handleBarHandle)
+                      },
+                      styles: {
+                        root: styles === null || styles === void 0 ? void 0 : styles.handleBar,
+                        handle: styles === null || styles === void 0 ? void 0 : styles.handleBarHandle
+                      }
+                    }) : /*#__PURE__*/_jsx(HandleBar, {
+                      accessibilityHint: closeAccessibilityHint,
+                      accessibilityLabel: closeAccessibilityLabel,
+                      classNames: {
+                        root: cx(trayClassNames.handleBar, classNames === null || classNames === void 0 ? void 0 : classNames.handleBar),
+                        handle: cx(trayClassNames.handleBarHandle, classNames === null || classNames === void 0 ? void 0 : classNames.handleBarHandle)
+                      },
+                      onClose: handleClose,
+                      onPointerDown: e => {
+                        dragControls.start(e);
+                      },
+                      styles: {
+                        root: styles === null || styles === void 0 ? void 0 : styles.handleBar,
+                        handle: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.handleBarHandle), {}, {
+                          touchAction: 'none'
+                        })
+                      }
+                    })), shouldShowTitle && /*#__PURE__*/_jsxs(HStack, {
+                      alignItems: isSideTray ? 'flex-start' : 'center',
+                      justifyContent: title ? 'space-between' : 'flex-end',
+                      paddingX: horizontalPadding,
+                      children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+                        className: cx(trayClassNames.title, classNames === null || classNames === void 0 ? void 0 : classNames.title),
+                        font: "title3",
+                        style: styles === null || styles === void 0 ? void 0 : styles.title,
+                        children: title
+                      }) : title), shouldShowCloseButton && /*#__PURE__*/_jsx(IconButton, {
+                        transparent: true,
+                        accessibilityHint: closeAccessibilityHint,
+                        accessibilityLabel: closeAccessibilityLabel,
+                        className: cx(trayClassNames.closeButton, classNames === null || classNames === void 0 ? void 0 : classNames.closeButton),
+                        margin: isSideTray ? -1.5 : undefined,
+                        name: "close",
+                        onClick: handleClose,
+                        style: styles === null || styles === void 0 ? void 0 : styles.closeButton,
+                        testID: "tray-close-button"
+                      })]
+                    }), headerContent]
+                  }), /*#__PURE__*/_jsx(VStack, {
+                    ref: contentRef,
+                    className: cx(trayClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+                    flexGrow: 1,
+                    minHeight: 0,
+                    overflow: "hidden",
+                    paddingBottom: shouldShrinkPadding ? 0 : 2,
+                    paddingTop: shouldShrinkPadding ? 0 : 1,
+                    paddingX: horizontalPadding,
+                    style: _objectSpread({
+                      overflowY: 'auto'
+                    }, styles === null || styles === void 0 ? void 0 : styles.content),
+                    children: content
+                  }), footerContent]
+                })
               })
             })
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.44.1",
+  "version": "8.45.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.44.1",
+    "@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",