@coinbase/cds-mobile 8.16.2 → 8.16.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.16.3 (10/14/2025 PST)
12
+
13
+ #### 🐞 Fixes
14
+
15
+ - Fix Stepper progress bars not rendering for initially set active step ID. [[#106](https://github.com/coinbase/cds/pull/106)]
16
+
11
17
  ## 8.16.2 (10/10/2025 PST)
12
18
 
13
19
  #### 🐞 Fixes
@@ -107,7 +107,7 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
107
107
  const previousComplete = (_usePreviousValue = usePreviousValue(complete)) != null ? _usePreviousValue : false;
108
108
  const previousActiveStepIndex = (_usePreviousValue2 = usePreviousValue(activeStepIndex)) != null ? _usePreviousValue2 : -1;
109
109
  const [progressSprings, progressSpringsApi] = useSprings(steps.length, index => ({
110
- progress: complete ? 1 : 0,
110
+ progress: complete || activeStepIndex >= 0 && index <= activeStepIndex ? 1 : 0,
111
111
  config: progressSpringConfig,
112
112
  immediate: !animate || disableAnimateOnMount && !hasMounted
113
113
  }));
@@ -248,6 +248,13 @@ const StepperHorizontalScreen = () => {
248
248
  }), /*#__PURE__*/_jsx(Example, {
249
249
  title: "No Active Step",
250
250
  children: /*#__PURE__*/_jsx(NoActiveStep, {})
251
+ }), /*#__PURE__*/_jsx(Example, {
252
+ title: "Initial Active Step",
253
+ children: /*#__PURE__*/_jsx(Stepper, {
254
+ activeStepId: basicSteps[1].id,
255
+ direction: "horizontal",
256
+ steps: basicSteps
257
+ })
251
258
  }), /*#__PURE__*/_jsx(Example, {
252
259
  title: "No Label Text",
253
260
  children: /*#__PURE__*/_jsx(StepperHorizontalExample, {
@@ -192,6 +192,30 @@ const NoActiveStep = () => {
192
192
  });
193
193
  };
194
194
 
195
+ // ------------------------------------------------------------
196
+ // Initial active step
197
+ // ------------------------------------------------------------
198
+ const InitialActiveStep = () => {
199
+ const steps = [{
200
+ id: 'first-step',
201
+ label: 'First step'
202
+ }, {
203
+ id: 'second-step',
204
+ label: 'Second step'
205
+ }, {
206
+ id: 'third-step',
207
+ label: 'Third step'
208
+ }, {
209
+ id: 'final-step',
210
+ label: 'Final step'
211
+ }];
212
+ return /*#__PURE__*/_jsx(Stepper, {
213
+ activeStepId: steps[1].id,
214
+ direction: "vertical",
215
+ steps: steps
216
+ });
217
+ };
218
+
195
219
  // ------------------------------------------------------------
196
220
  // Nested Steps
197
221
  // ------------------------------------------------------------
@@ -557,6 +581,9 @@ const StepperVerticalScreen = () => {
557
581
  }), /*#__PURE__*/_jsx(Example, {
558
582
  title: "No Active Step",
559
583
  children: /*#__PURE__*/_jsx(NoActiveStep, {})
584
+ }), /*#__PURE__*/_jsx(Example, {
585
+ title: "Initial Active Step",
586
+ children: /*#__PURE__*/_jsx(InitialActiveStep, {})
560
587
  }), /*#__PURE__*/_jsx(Example, {
561
588
  title: "Nested Steps",
562
589
  children: /*#__PURE__*/_jsx(NestedSteps, {})
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "8.16.2",
3
+ "version": "8.16.3",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -150,7 +150,7 @@
150
150
  "react-native-svg": "^14.1.0"
151
151
  },
152
152
  "dependencies": {
153
- "@coinbase/cds-common": "^8.16.2",
153
+ "@coinbase/cds-common": "^8.16.3",
154
154
  "@coinbase/cds-icons": "^5.4.2",
155
155
  "@coinbase/cds-illustrations": "^4.24.0",
156
156
  "@coinbase/cds-lottie-files": "^3.3.2",