feat(ui): allow Wizard to take an initialStepId

The wizard now accepts an optional initialStepId prop. When passed,
that becomes the active step on mount; when omitted, the existing
"first registered step becomes default" behavior is preserved.

This is the hook the host needs to land server-derived initial step
logic later — e.g., ConfigureSSO computing the initial step from
the user's enterprise connection state. Hosts that don't pass it
work unchanged.

Author: iagodahlem

packages/ui/src/components/ConfigureSSO/elements/Wizard/Wizard.tsx

@@ -5,16 +5,25 @@ import { useWizard, WizardContext } from './WizardContext';
 
 interface RootProps {
   children: React.ReactNode;
+  /**
+   * Initial active step id. When provided, the wizard mounts with this
+   * step active. When omitted, the first registered step becomes the
+   * default — useful when steps are statically known and order is the
+   * source of truth, or when the host derives the initial step from
+   * external state (e.g., a server-state hook) and passes it down.
+   */
+  initialStepId?: string;
 }
 
-const Root = ({ children }: RootProps): JSX.Element => {
+const Root = ({ children, initialStepId }: RootProps): JSX.Element => {
   const parentWizard = React.useContext(WizardContext);
   const isNested = parentWizard !== null;
 
   return (
     <RootInner
       parentWizard={parentWizard}
       isNested={isNested}
+      initialStepId={initialStepId}
     >
       {children}
     </RootInner>
@@ -24,15 +33,17 @@ const Root = ({ children }: RootProps): JSX.Element => {
 interface RootInnerProps {
   parentWizard: WizardContextValue | null;
   isNested: boolean;
+  initialStepId?: string;
   children: React.ReactNode;
 }
 
-const RootInner = ({ parentWizard, isNested, children }: RootInnerProps): JSX.Element => {
+const RootInner = ({ parentWizard, isNested, initialStepId, children }: RootInnerProps): JSX.Element => {
   // Stable registry of mounted Steps. Insertion order = JSX order =
   // display order
   const [activeSteps, setActiveSteps] = React.useState<WizardActiveStep[]>([]);
-  // Active step id. Defaults to the first registered step's id
-  const [currentStepId, setCurrentStepId] = React.useState<string | undefined>(undefined);
+  // Active step id. Defaults to the first registered step's id when
+  // `initialStepId` is omitted; otherwise mounts with the explicit id.
+  const [currentStepId, setCurrentStepId] = React.useState<string | undefined>(initialStepId);
 
   const registerStep = React.useCallback((step: WizardActiveStep) => {
     setActiveSteps(prev => {
@@ -171,6 +182,11 @@ Step.displayName = 'Wizard.Step';
  * are provided by the host layout via `useWizard()`. Each step owns
  * its own footer via `<Step.Footer>`, which reads the nearest wizard
  * via `useWizard()` so nested-wizard fall-through works automatically.
+ *
+ * When mounted without `initialStepId`, the wizard defaults to the
+ * first registered step. When `initialStepId` is provided, the wizard
+ * starts on that step instead — useful for resuming a flow from
+ * server-derived state.
  */
 export const Wizard = Object.assign(Root, {
   Step,