@coinbase/cds-mobile 8.16.3 → 8.17.0

package/CHANGELOG.md

@@ -8,6 +8,22 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.17.0 ((10/16/2025, 07:14 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.16.5 (10/16/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix onMount Stepper animations when step other than first is initially active. [[#109](https://github.com/coinbase/cds/pull/109)]
+
+## 8.16.4 (10/15/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix Android Tray handle bar unfocusable issue. [[#99](https://github.com/coinbase/cds/pull/99)] [DX-4932]
+
 ## 8.16.3 (10/14/2025 PST)
 
 #### 🐞 Fixes

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":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAa/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAahF,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gDAAgD;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,UAAU,CAAC,GAAG;IAChD,+CAA+C;IAC/C,QAAQ,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IACjD;;;SAGK;IACL,GAAG,EAAE,gBAAgB,CAAC;IACtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;CACvD,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAM1C,eAAO,MAAM,MAAM;IAvDf,+CAA+C;cACrC,oBAAoB,GAAG,KAAK,CAAC,SAAS;IAChD;;;SAGK;SACA,gBAAgB;IACrB;;;OAGG;6BACsB,OAAO;IAChC;;;OAGG;yCACkC,OAAO;IAC5C;;;SAGK;oBACW,OAAO;IACvB,uDAAuD;qBACtC,MAAM,IAAI;IAC3B;;;OAGG;wCACiC,OAAO;IAC3C,oEAAoE;aAC3D,MAAM,IAAI;IAEnB;;;OAGG;qCAC8B,MAAM;IACvC;;;OAGG;kCAC2B,MAAM;IACpC;;;OAGG;mBACY,oBAAoB,GAAG,KAAK,CAAC,SAAS;6CA6LxD,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAa/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAahF,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gDAAgD;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,UAAU,CAAC,GAAG;IAChD,+CAA+C;IAC/C,QAAQ,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IACjD;;;SAGK;IACL,GAAG,EAAE,gBAAgB,CAAC;IACtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;CACvD,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAM1C,eAAO,MAAM,MAAM;IAvDf,+CAA+C;cACrC,oBAAoB,GAAG,KAAK,CAAC,SAAS;IAChD;;;SAGK;SACA,gBAAgB;IACrB;;;OAGG;6BACsB,OAAO;IAChC;;;OAGG;yCACkC,OAAO;IAC5C;;;SAGK;oBACW,OAAO;IACvB,uDAAuD;qBACtC,MAAM,IAAI;IAC3B;;;OAGG;wCACiC,OAAO;IAC3C,oEAAoE;aAC3D,MAAM,IAAI;IAEnB;;;OAGG;qCAC8B,MAAM;IACvC;;;OAGG;kCAC2B,MAAM;IACpC;;;OAGG;mBACY,oBAAoB,GAAG,KAAK,CAAC,SAAS;6CAwLxD,CAAC"}

package/dts/overlays/handlebar/HandleBar.d.ts

@@ -1,6 +1,10 @@
 import type { ViewProps } from 'react-native';
+export type HandleBarProps = ViewProps & {
+  /** Callback fired when the handlebar is pressed via accessibility action */
+  onAccessibilityPress?: () => void;
+};
 export declare const HandleBar: {
-  (props: ViewProps): import('react/jsx-runtime').JSX.Element;
+  ({ onAccessibilityPress, ...props }: HandleBarProps): import('react/jsx-runtime').JSX.Element;
   displayName: string;
 };
 //# sourceMappingURL=HandleBar.d.ts.map

package/dts/overlays/handlebar/HandleBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HandleBar.d.ts","sourceRoot":"","sources":["../../../src/overlays/handlebar/HandleBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK9C,eAAO,MAAM,SAAS;YAAW,SAAS;;CAazC,CAAC"}
+{"version":3,"file":"HandleBar.d.ts","sourceRoot":"","sources":["../../../src/overlays/handlebar/HandleBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA4B,SAAS,EAAE,MAAM,cAAc,CAAC;AAKxE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC,4EAA4E;IAC5E,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,SAAS;yCAAwC,cAAc;;CAiC3E,CAAC"}

package/esm/overlays/drawer/Drawer.js

@@ -2,7 +2,7 @@ const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures
 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 } from 'react';
-import { Animated, Modal, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { Animated, Modal, Platform, StyleSheet, useWindowDimensions } from 'react-native';
 import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
 import { horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
@@ -118,34 +118,12 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
       overflow: 'hidden'
     }
   });
-  const combinedStyles = [cardStyles.spacing, drawerAnimationStyles];
   useImperativeHandle(ref, () => ({
     handleClose
   }), [handleClose]);
-
-  // this hack clips internal content from overflowing the borderRadius, but also make sure the handlebar still shows if handlebar is enabled
-  const content = useMemo(() => {
-    if (shouldShowHandleBar) {
-      return /*#__PURE__*/_jsxs(View, {
-        children: [/*#__PURE__*/_jsx(HandleBar, {
-          accessibilityLabel: handleBarAccessibilityLabel,
-          accessibilityRole: "button",
-          onAccessibilityTap: handleClose
-        }), /*#__PURE__*/_jsx(Box, {
-          borderRadius: 400,
-          style: shouldShowHandleBar && cardStyles.overflowStyles,
-          children: typeof children === 'function' ? children({
-            handleClose
-          }) : children
-        })]
-      });
-    }
-    return /*#__PURE__*/_jsx(View, {
-      children: typeof children === 'function' ? children({
-        handleClose
-      }) : children
-    });
-  }, [shouldShowHandleBar, cardStyles, children, handleClose, handleBarAccessibilityLabel]);
+  const content = useMemo(() => typeof children === 'function' ? children({
+    handleClose
+  }) : children, [children, handleClose]);
   return /*#__PURE__*/_jsx(Modal, _extends({
     hardwareAccelerated: true,
     transparent: true,
@@ -163,20 +141,27 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
         onTouchStart: handleOverlayPress,
         opacity: opacityAnimation,
         testID: "drawer-overlay"
-      }), /*#__PURE__*/_jsx(Box, _extends({}, getPanGestureHandlers, {
+      }), /*#__PURE__*/_jsxs(Box, _extends({}, getPanGestureHandlers, {
         animated: true,
-        borderRadius: isPinHorizontal ? 0 : 400,
-        bordered: activeColorScheme === 'dark',
-        elevation: 2,
-        maxHeight: !isPinHorizontal ? verticalDrawerMaxHeight : '100%',
-        onAccessibilityEscape: handleClose,
-        pin: pin,
-        style: combinedStyles
+        onAccessibilityEscape: handleClose
         // close modal when user performs the "escape" accessibility gesture
         // https://reactnative.dev/docs/accessibility#onaccessibilityescape-ios
         ,
+        pin: pin,
+        style: drawerAnimationStyles,
         width: isPinHorizontal ? horizontalDrawerWidth : '100%',
-        children: content
+        children: [shouldShowHandleBar && /*#__PURE__*/_jsx(HandleBar, {
+          accessibilityLabel: handleBarAccessibilityLabel,
+          accessibilityRole: "button",
+          onAccessibilityPress: handleClose
+        }), /*#__PURE__*/_jsx(Box, {
+          borderRadius: isPinHorizontal ? 0 : 400,
+          bordered: activeColorScheme === 'dark',
+          elevation: 2,
+          maxHeight: !isPinHorizontal ? verticalDrawerMaxHeight : '100%',
+          style: [cardStyles.spacing, shouldShowHandleBar && cardStyles.overflowStyles],
+          children: content
+        })]
       }))]
     })
   }));

package/esm/overlays/handlebar/HandleBar.js

@@ -1,19 +1,37 @@
+const _excluded = ["onAccessibilityPress"];
 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 from 'react';
-import { StyleSheet, View } from 'react-native';
-import { handleBarHeight, handleBarOffset } from '@coinbase/cds-common/tokens/drawer';
+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 { useCallback } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { handleBarHeight } from '@coinbase/cds-common/tokens/drawer';
 import { useTheme } from '../../hooks/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const HandleBar = props => {
+export const HandleBar = _ref => {
+  let {
+      onAccessibilityPress
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const handleBarBackgroundColor = theme.color.bgSecondary;
   const handleBarStyles = {
-    backgroundColor: handleBarBackgroundColor,
-    marginBottom: theme.space[2]
+    backgroundColor: handleBarBackgroundColor
   };
-  return /*#__PURE__*/_jsx(View, _extends({
+  const touchableAreaStyles = {
+    paddingBottom: theme.space[2],
+    paddingTop: theme.space[2]
+  };
+  const handleAccessibilityAction = useCallback(event => {
+    if (event.nativeEvent.actionName === 'activate') {
+      onAccessibilityPress == null || onAccessibilityPress();
+    }
+  }, [onAccessibilityPress]);
+  return /*#__PURE__*/_jsx(Pressable, _extends({
     accessible: true,
-    style: styles.touchableArea,
+    accessibilityActions: onAccessibilityPress ? [{
+      name: 'activate'
+    }] : undefined,
+    onAccessibilityAction: handleAccessibilityAction,
+    style: [styles.touchableArea, touchableAreaStyles],
     testID: "handleBar"
   }, props, {
     children: /*#__PURE__*/_jsx(View, {
@@ -23,13 +41,7 @@ export const HandleBar = props => {
 };
 const styles = StyleSheet.create({
   touchableArea: {
-    position: 'absolute',
-    top: -handleBarOffset,
-    left: 0,
-    right: 0,
-    height: handleBarOffset,
-    alignItems: 'center',
-    justifyContent: 'flex-end'
+    alignItems: 'center'
   },
   handleBar: {
     width: 64,

package/esm/stepper/Stepper.js

@@ -107,7 +107,7 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   const previousComplete = (_usePreviousValue = usePreviousValue(complete)) != null ? _usePreviousValue : false;
   const previousActiveStepIndex = (_usePreviousValue2 = usePreviousValue(activeStepIndex)) != null ? _usePreviousValue2 : -1;
   const [progressSprings, progressSpringsApi] = useSprings(steps.length, index => ({
-    progress: complete || activeStepIndex >= 0 && index <= activeStepIndex ? 1 : 0,
+    progress: complete ? 1 : 0,
     config: progressSpringConfig,
     immediate: !animate || disableAnimateOnMount && !hasMounted
   }));
@@ -117,7 +117,7 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     let isAnimatingForward = false;
 
     // Case when going from not-complete to complete
-    if (complete !== previousComplete) {
+    if (Boolean(complete) !== previousComplete) {
       if (complete) {
         // Going to complete: animate from activeStepIndex+1 to end
         stepsToAnimate = Array.from({

package/esm/stepper/__stories__/StepperHorizontal.stories.js

@@ -1,4 +1,4 @@
-const _excluded = ["steps", "activeStepId", "title"],
+const _excluded = ["steps", "defaultActiveStepId", "title"],
   _excluded2 = ["onPress"],
   _excluded3 = ["active", "complete", "visited"];
 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); }
@@ -75,14 +75,14 @@ const twoLevelSteps = [{
 const StepperHorizontalExample = _ref => {
   let {
       steps = basicSteps,
-      activeStepId,
+      defaultActiveStepId,
       title
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const [renderKey, setRenderKey] = useState(0);
   const [stepperState, stepperApi] = useStepper({
     steps,
-    defaultActiveStepId: activeStepId
+    defaultActiveStepId
   });
   const [complete, setComplete] = useState(false);
   const activeIndex = stepperState.activeStepId ? steps.findIndex(step => step.id === stepperState.activeStepId) : -1;
@@ -199,7 +199,6 @@ const StepperHorizontalExample = _ref => {
 // ------------------------------------------------------------
 const NoActiveStep = () => {
   return /*#__PURE__*/_jsx(StepperHorizontalExample, {
-    activeStepId: null,
     steps: basicSteps,
     title: "No Active Step"
   });
@@ -242,7 +241,7 @@ const StepperHorizontalScreen = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       title: "Default",
       children: /*#__PURE__*/_jsx(StepperHorizontalExample, {
-        activeStepId: basicSteps[2].id,
+        defaultActiveStepId: basicSteps[2].id,
         steps: basicSteps
       })
     }), /*#__PURE__*/_jsx(Example, {
@@ -258,13 +257,13 @@ const StepperHorizontalScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "No Label Text",
       children: /*#__PURE__*/_jsx(StepperHorizontalExample, {
-        activeStepId: noLabelSteps[0].id,
+        defaultActiveStepId: noLabelSteps[0].id,
         steps: noLabelSteps
       })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Long Text",
       children: /*#__PURE__*/_jsx(StepperHorizontalExample, {
-        activeStepId: longLabelSteps[0].id,
+        defaultActiveStepId: longLabelSteps[0].id,
         steps: longLabelSteps
       })
     }), /*#__PURE__*/_jsx(Example, {
@@ -287,13 +286,13 @@ const StepperHorizontalScreen = () => {
             size: "s"
           }, props));
         },
-        activeStepId: basicSteps[0].id,
+        defaultActiveStepId: basicSteps[0].id,
         steps: basicSteps
       })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Nested Steps",
       children: /*#__PURE__*/_jsx(StepperHorizontalExample, {
-        activeStepId: twoLevelSteps[0].id,
+        defaultActiveStepId: twoLevelSteps[0].id,
         steps: twoLevelSteps
       })
     }), /*#__PURE__*/_jsx(Example, {
@@ -302,22 +301,22 @@ const StepperHorizontalScreen = () => {
         gap: 4,
         children: [/*#__PURE__*/_jsx(StepperHorizontalExample, {
           StepperLabelComponent: null,
-          activeStepId: basicSteps[0].id,
+          defaultActiveStepId: basicSteps[0].id,
           steps: basicSteps,
           title: "StepperLabelComponent = null"
         }), /*#__PURE__*/_jsx(StepperHorizontalExample, {
           StepperProgressComponent: null,
-          activeStepId: basicSteps[0].id,
+          defaultActiveStepId: basicSteps[0].id,
           steps: basicSteps,
           title: "StepperProgressComponent = null"
         }), /*#__PURE__*/_jsx(StepperHorizontalExample, {
           StepperIconComponent: null,
-          activeStepId: basicSteps[0].id,
+          defaultActiveStepId: basicSteps[0].id,
           steps: basicSteps,
           title: "StepperIconComponent = null"
         }), /*#__PURE__*/_jsx(StepperHorizontalExample, {
           StepperHeaderComponent: null,
-          activeStepId: basicSteps[0].id,
+          defaultActiveStepId: basicSteps[0].id,
           steps: basicSteps,
           title: "StepperHeaderComponent = null"
         })]

package/esm/stepper/__stories__/StepperVertical.stories.js

@@ -1,4 +1,4 @@
-const _excluded = ["steps", "activeStepId", "title", "initialComplete", "skipParentSteps", "renderWithApi"];
+const _excluded = ["steps", "defaultActiveStepId", "title", "initialComplete", "skipParentSteps", "renderWithApi"];
 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, { useState } from 'react';
@@ -19,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const StepperVerticalExample = _ref => {
   let {
       steps,
-      activeStepId,
+      defaultActiveStepId,
       title,
       initialComplete,
       skipParentSteps,
@@ -29,7 +29,7 @@ const StepperVerticalExample = _ref => {
   const [renderKey, setRenderKey] = useState(0);
   const [stepperState, stepperApi] = useStepper({
     steps,
-    defaultActiveStepId: activeStepId,
+    defaultActiveStepId,
     skipParentSteps
   });
   const [complete, setComplete] = useState(initialComplete || false);
@@ -164,6 +164,7 @@ const Default = () => {
   }];
   return /*#__PURE__*/_jsx(StepperVerticalExample, {
     completedStepAccessibilityLabel: "Finished",
+    defaultActiveStepId: steps[0].id,
     steps: steps
   });
 };
@@ -186,7 +187,6 @@ const NoActiveStep = () => {
     label: 'Final step'
   }];
   return /*#__PURE__*/_jsx(StepperVerticalExample, {
-    activeStepId: null,
     steps: steps,
     title: "No Active Step"
   });
@@ -330,7 +330,7 @@ const CustomIconsAndStyles = () => {
     label: 'Final step'
   }];
   return /*#__PURE__*/_jsx(StepperVerticalExample, {
-    activeStepId: steps[0].id,
+    defaultActiveStepId: steps[0].id,
     steps: steps,
     styles: {
       progress: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.16.3",
+  "version": "8.17.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -150,7 +150,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.16.3",
+    "@coinbase/cds-common": "^8.17.0",
     "@coinbase/cds-icons": "^5.4.2",
     "@coinbase/cds-illustrations": "^4.24.0",
     "@coinbase/cds-lottie-files": "^3.3.2",