@coinbase/cds-mobile 8.16.4 → 8.17.1

package/CHANGELOG.md

@@ -8,6 +8,22 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.17.1 (10/16/2025 PST)
+
+#### 🐞 Fixes
+
+- Remove console.error() call on action props for Banner. [[#113](https://github.com/coinbase/cds/pull/113)]
+
+## 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

package/dts/banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2E,MAAM,OAAO,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAsB7C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,2GAA2G;IAC3G,OAAO,EAAE,aAAa,CAAC;IACvB,6CAA6C;IAC7C,SAAS,EAAE,QAAQ,CAAC;IACpB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4HAA4H;IAC5H,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,2HAA2H;IAC3H,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;SAGK;IACL,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;SAGK;IACL,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,uDAAuD;IACvD,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,yDAAyD;IACzD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;SAGK;IACL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;SAGK;IACL,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEhF,eAAO,MAAM,MAAM;IAhDjB,2GAA2G;aAClG,aAAa;IACtB,6CAA6C;eAClC,QAAQ;IACnB,uCAAuC;sBACrB,OAAO;IACzB,4HAA4H;oBAC5G,KAAK,CAAC,SAAS;IAC/B,2HAA2H;sBACzG,KAAK,CAAC,SAAS;IACjC,2DAA2D;YACnD,KAAK,CAAC,SAAS;IACvB,wBAAwB;eACb,KAAK,CAAC,SAAS;IAC1B;;;SAGK;kBACS,OAAO;IACrB,gDAAgD;cACtC,MAAM,IAAI;IACpB,gFAAgF;oBAChE,MAAM;IACtB,gCAAgC;YACxB,KAAK,CAAC,SAAS;IACvB;;;SAGK;mBACU,kBAAkB;IACjC,uDAAuD;kCACzB,MAAM;IACpC,yDAAyD;8BAC/B,MAAM;IAChC;;;SAGK;eACM,OAAO;IAClB;;;SAGK;mBACU,SAAS,CAAC,YAAY;gFAkNtC,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2E,MAAM,OAAO,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAsB7C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,2GAA2G;IAC3G,OAAO,EAAE,aAAa,CAAC;IACvB,6CAA6C;IAC7C,SAAS,EAAE,QAAQ,CAAC;IACpB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4HAA4H;IAC5H,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,2HAA2H;IAC3H,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;SAGK;IACL,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;SAGK;IACL,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,uDAAuD;IACvD,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,yDAAyD;IACzD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;SAGK;IACL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;SAGK;IACL,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEhF,eAAO,MAAM,MAAM;IAhDjB,2GAA2G;aAClG,aAAa;IACtB,6CAA6C;eAClC,QAAQ;IACnB,uCAAuC;sBACrB,OAAO;IACzB,4HAA4H;oBAC5G,KAAK,CAAC,SAAS;IAC/B,2HAA2H;sBACzG,KAAK,CAAC,SAAS;IACjC,2DAA2D;YACnD,KAAK,CAAC,SAAS;IACvB,wBAAwB;eACb,KAAK,CAAC,SAAS;IAC1B;;;SAGK;kBACS,OAAO;IACrB,gDAAgD;cACtC,MAAM,IAAI;IACpB,gFAAgF;oBAChE,MAAM;IACtB,gCAAgC;YACxB,KAAK,CAAC,SAAS;IACvB;;;SAGK;mBACU,kBAAkB;IACjC,uDAAuD;kCACzB,MAAM;IACpC,yDAAyD;8BAC/B,MAAM;IAChC;;;SAGK;eACM,OAAO;IAClB;;;SAGK;mBACU,SAAS,CAAC,YAAY;gFAmNtC,CAAC"}

package/esm/banner/Banner.js

@@ -3,7 +3,6 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 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, isValidElement, memo, useCallback, useMemo, useState } from 'react';
 import { variants } from '@coinbase/cds-common/tokens/banner';
-import { isDevelopment } from '@coinbase/cds-utils';
 import { Collapsible } from '../collapsible/Collapsible';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons';
@@ -73,35 +72,33 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(
     iconButtonColor,
     borderColor
   } = variants[variant];
-
-  // Ensure primaryActions are themed to match the variant
   const clonedPrimaryAction = useMemo(() => {
-    if (/*#__PURE__*/isValidElement(primaryAction) && (primaryAction == null ? void 0 : primaryAction.type) === Link) {
+    if (! /*#__PURE__*/isValidElement(primaryAction)) return null;
+    if (primaryAction.type === Link) {
       return /*#__PURE__*/React.cloneElement(primaryAction, _extends({
         font: 'label1',
         color: primaryActionColor,
         testID: testID + "-action--primary"
       }, primaryAction.props));
+    } else {
+      return /*#__PURE__*/React.cloneElement(primaryAction, _extends({
+        testID: testID + "-action--primary"
+      }, primaryAction.props));
     }
-
-    // Throw warning in dev
-    if (/*#__PURE__*/isValidElement(primaryAction) && isDevelopment()) {
-      console.error('Banner primaryAction needs to be a CDS Link component');
-    }
-    return primaryAction;
   }, [primaryAction, primaryActionColor, testID]);
   const clonedSecondaryAction = useMemo(() => {
-    if (/*#__PURE__*/isValidElement(secondaryAction) && secondaryAction.type === Link) {
+    if (! /*#__PURE__*/isValidElement(secondaryAction)) return null;
+    if (secondaryAction.type === Link) {
       return /*#__PURE__*/React.cloneElement(secondaryAction, _extends({
         font: 'label1',
         color: secondaryActionColor,
         testID: testID + "-action--secondary"
       }, secondaryAction.props));
+    } else {
+      return /*#__PURE__*/React.cloneElement(secondaryAction, _extends({
+        testID: testID + "-action--secondary"
+      }, secondaryAction.props));
     }
-    if (/*#__PURE__*/isValidElement(secondaryAction) && isDevelopment()) {
-      console.error('Banner secondaryAction needs to be a CDS Link component');
-    }
-    return secondaryAction;
   }, [secondaryAction, secondaryActionColor, testID]);
   const marginStyles = useMemo(() => ({
     margin,

package/esm/banner/__stories__/Banner.stories.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import { loremIpsum } from '@coinbase/cds-common/internal/data/loremIpsum';
 import { NoopFn as noopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Button } from '../../buttons';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Spacer, VStack } from '../../layout';
 import { Link } from '../../typography/Link';
@@ -91,6 +92,22 @@ const Banners = _ref => {
     }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
       primaryAction: primaryAction,
       secondaryAction: secondaryAction
+    })), /*#__PURE__*/_jsx(Text, {
+      font: "title1",
+      children: "Primary Action is not a Link"
+    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
+      primaryAction: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        children: "Primary Action"
+      })
+    })), /*#__PURE__*/_jsx(Text, {
+      font: "title1",
+      children: "Secondary Action is not a Link"
+    }), /*#__PURE__*/_jsx(Banner, _extends({}, props, {
+      secondaryAction: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        children: "Secondary Action"
+      })
     })), /*#__PURE__*/_jsxs(Text, {
       font: "title1",
       children: [title, " Long Text with Action"]

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.4",
+  "version": "8.17.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -150,7 +150,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.16.4",
+    "@coinbase/cds-common": "^8.17.1",
     "@coinbase/cds-icons": "^5.4.2",
     "@coinbase/cds-illustrations": "^4.24.0",
     "@coinbase/cds-lottie-files": "^3.3.2",