@coinbase/cds-mobile 8.16.2 → 8.16.4

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 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
+
+- Fix Stepper progress bars not rendering for initially set active step ID. [[#106](https://github.com/coinbase/cds/pull/106)]
+
 ## 8.16.2 (10/10/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 ? 1 : 0,
+    progress: complete || activeStepIndex >= 0 && index <= activeStepIndex ? 1 : 0,
     config: progressSpringConfig,
     immediate: !animate || disableAnimateOnMount && !hasMounted
   }));

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

@@ -248,6 +248,13 @@ const StepperHorizontalScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "No Active Step",
       children: /*#__PURE__*/_jsx(NoActiveStep, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Initial Active Step",
+      children: /*#__PURE__*/_jsx(Stepper, {
+        activeStepId: basicSteps[1].id,
+        direction: "horizontal",
+        steps: basicSteps
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "No Label Text",
       children: /*#__PURE__*/_jsx(StepperHorizontalExample, {

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

@@ -192,6 +192,30 @@ const NoActiveStep = () => {
   });
 };
 
+// ------------------------------------------------------------
+// Initial active step
+// ------------------------------------------------------------
+const InitialActiveStep = () => {
+  const steps = [{
+    id: 'first-step',
+    label: 'First step'
+  }, {
+    id: 'second-step',
+    label: 'Second step'
+  }, {
+    id: 'third-step',
+    label: 'Third step'
+  }, {
+    id: 'final-step',
+    label: 'Final step'
+  }];
+  return /*#__PURE__*/_jsx(Stepper, {
+    activeStepId: steps[1].id,
+    direction: "vertical",
+    steps: steps
+  });
+};
+
 // ------------------------------------------------------------
 // Nested Steps
 // ------------------------------------------------------------
@@ -557,6 +581,9 @@ const StepperVerticalScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "No Active Step",
       children: /*#__PURE__*/_jsx(NoActiveStep, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Initial Active Step",
+      children: /*#__PURE__*/_jsx(InitialActiveStep, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Nested Steps",
       children: /*#__PURE__*/_jsx(NestedSteps, {})

package/package.json

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