@coinbase/cds-common 8.16.4 → 8.17.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.17.0 (10/16/2025 PST)
+
+#### 🚀 Updates
+
+- Update useStepper to not set initialActiveId if not passed in. [[#109](https://github.com/coinbase/cds/pull/109)]
+
 ## 8.16.4 ((10/15/2025, 07:38 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/stepper/useStepper.d.ts

@@ -33,7 +33,7 @@ export type StepperApi = {
  *
  * @param options - The options for the stepper.
  * @param options.steps - The array of steps data.
- * @param options.defaultActiveStepId - The default active step ID. If not provided, the first step will be used.
+ * @param options.defaultActiveStepId - The default active step ID.
  * @param options.skipParentSteps - If true, steps containing sub-steps will never be made active.
  * @returns A tuple where the first element is the stepper state and the second element is an API for manipulating the stepper state.
  */

package/dts/stepper/useStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStepper.d.ts","sourceRoot":"","sources":["../../src/stepper/useStepper.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,gBAAgB,GAAG,gBAAgB,IAAI;IACjF,+BAA+B;IAC/B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,gIAAgI;IAChI,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,sFAAsF;IACtF,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,kEAAkE;IAClE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qIAAqI;IACrI,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,0IAA0I;IAC1I,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iEAAiE;IACjE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,QAAQ,SAAS,gBAAgB,GAAG,gBAAgB,EAAE,kDAI9E,cAAc,CAAC,QAAQ,CAAC,KAAG,CAAC,YAAY,EAAE,UAAU,CA4ItD,CAAC"}
+{"version":3,"file":"useStepper.d.ts","sourceRoot":"","sources":["../../src/stepper/useStepper.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,gBAAgB,GAAG,gBAAgB,IAAI;IACjF,+BAA+B;IAC/B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,gIAAgI;IAChI,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,sFAAsF;IACtF,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,kEAAkE;IAClE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qIAAqI;IACrI,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,0IAA0I;IAC1I,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iEAAiE;IACjE,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,QAAQ,SAAS,gBAAgB,GAAG,gBAAgB,EAAE,kDAI9E,cAAc,CAAC,QAAQ,CAAC,KAAG,CAAC,YAAY,EAAE,UAAU,CA4FtD,CAAC"}

package/esm/stepper/useStepper.js

@@ -6,7 +6,7 @@ import { flattenSteps } from './utils';
  *
  * @param options - The options for the stepper.
  * @param options.steps - The array of steps data.
- * @param options.defaultActiveStepId - The default active step ID. If not provided, the first step will be used.
+ * @param options.defaultActiveStepId - The default active step ID.
  * @param options.skipParentSteps - If true, steps containing sub-steps will never be made active.
  * @returns A tuple where the first element is the stepper state and the second element is an API for manipulating the stepper state.
  */
@@ -22,10 +22,8 @@ export const useStepper = _ref => {
     for (let i = fromIndex; i < flatSteps.length; i++) {
       const step = flatSteps[i];
       const isParentStep = step.subSteps && step.subSteps.length > 0;
-      const canUseStep = !skipParentSteps || !isParentStep;
-      if (canUseStep) {
-        return step;
-      }
+      const invalidStep = skipParentSteps && isParentStep;
+      if (!invalidStep) return step;
     }
     return null;
   }, [flatSteps, skipParentSteps]);
@@ -33,53 +31,22 @@ export const useStepper = _ref => {
     for (let i = fromIndex; i >= 0; i--) {
       const step = flatSteps[i];
       const isParentStep = step.subSteps && step.subSteps.length > 0;
-      const canUseStep = !skipParentSteps || !isParentStep;
-      if (canUseStep) {
-        return step;
-      }
+      const invalidStep = skipParentSteps && isParentStep;
+      if (!invalidStep) return step;
     }
     return null;
   }, [flatSteps, skipParentSteps]);
-  const getInitialActiveStepId = useCallback(() => {
-    if (flatSteps.length === 0 || defaultActiveStepId === null) {
-      return null;
-    }
-    if (defaultActiveStepId) {
-      const defaultStepInFlat = flatSteps.find(step => step.id === defaultActiveStepId);
-      if (defaultStepInFlat) {
-        const isParentStep = defaultStepInFlat.subSteps && defaultStepInFlat.subSteps.length > 0;
-        const canUseStep = !skipParentSteps || !isParentStep;
-        if (canUseStep) {
-          return defaultStepInFlat.id;
-        }
-
-        // If it's a parent step and we skip parent steps, find next valid step from this position
-        const defaultStepIndex = flatSteps.findIndex(step => step.id === defaultActiveStepId);
-        const nextValidStep = findNextStep(defaultStepIndex);
-        if (nextValidStep) {
-          return nextValidStep.id;
-        }
-      }
-    }
-
-    // Fallback to first valid step
-    const firstValidStep = findNextStep(0);
-    return firstValidStep ? firstValidStep.id : null;
-  }, [defaultActiveStepId, flatSteps, skipParentSteps, findNextStep]);
-  const [activeStepId, setActiveStepId] = useState(getInitialActiveStepId());
+  const [activeStepId, setActiveStepId] = useState(defaultActiveStepId !== null && defaultActiveStepId !== void 0 ? defaultActiveStepId : null);
   const goToStep = useCallback(stepId => {
     const targetIndex = flatSteps.findIndex(step => step.id === stepId);
-    if (targetIndex === -1) {
-      return;
-    }
+    if (targetIndex === -1) return;
     const targetStep = flatSteps[targetIndex];
-
     // If skipParentSteps is enabled, don't allow navigation to parent steps
     if (skipParentSteps && targetStep.subSteps && targetStep.subSteps.length > 0) {
       return;
     }
     setActiveStepId(targetStep.id);
-  }, [flatSteps, setActiveStepId, skipParentSteps]);
+  }, [flatSteps, skipParentSteps]);
   const goNextStep = useCallback(() => {
     setActiveStepId(currentActiveStepId => {
       if (currentActiveStepId === null) {
@@ -88,29 +55,20 @@ export const useStepper = _ref => {
       }
       const activeStepIndex = flatSteps.findIndex(step => step.id === currentActiveStepId);
       const nextStep = findNextStep(activeStepIndex + 1);
-      if (nextStep) {
-        return nextStep.id;
-      } else {
-        return currentActiveStepId;
-      }
+      if (nextStep) return nextStep.id;
+      return currentActiveStepId;
     });
-  }, [flatSteps, findNextStep]);
+  }, [findNextStep, flatSteps]);
   const goPreviousStep = useCallback(() => {
     setActiveStepId(currentActiveStepId => {
-      if (currentActiveStepId === null) {
-        return null;
-      }
+      if (currentActiveStepId === null) return null;
       const activeStepIndex = flatSteps.findIndex(step => step.id === currentActiveStepId);
       const previousStep = findPreviousStep(activeStepIndex - 1);
-      if (previousStep) {
-        return previousStep.id;
-      }
+      if (previousStep) return previousStep.id;
       return currentActiveStepId;
     });
-  }, [flatSteps, findPreviousStep]);
-  const reset = useCallback(() => {
-    setActiveStepId(getInitialActiveStepId());
-  }, [getInitialActiveStepId, setActiveStepId]);
+  }, [findPreviousStep, flatSteps]);
+  const reset = useCallback(() => setActiveStepId(defaultActiveStepId !== null && defaultActiveStepId !== void 0 ? defaultActiveStepId : null), [defaultActiveStepId, setActiveStepId]);
   const state = useMemo(() => ({
     activeStepId
   }), [activeStepId]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.16.4",
+  "version": "8.17.0",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@coinbase/cds-icons": "^5.4.2",
     "@coinbase/cds-illustrations": "^4.24.0",
-    "@coinbase/cds-mcp-server": "^8.16.4",
+    "@coinbase/cds-mcp-server": "^8.17.0",
     "@coinbase/cds-utils": "^2.3.3",
     "@modelcontextprotocol/sdk": "^1.13.1",
     "d3-array": "^3.2.4",