[StepConnector] Missing index information

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

StepConnector component does not return the current index in mui 5 latest version while it does on material ui/core v 4.12.3.

Expected behavior 🤔

It should return the current StepConnector index so as the user to be able to apply custom behaviour on different StepConectors f.i have conditional dashed lines in certain steps instead of continuous line.

Steps to reproduce 🕹

Steps: I am providing two codesandboxes that reproduce the issue. In the first one I have material-ui/core version 4.12.3 installed. I am logging the props inside a custom StepConnector component and it returns the current number of StepConnector along with some additional props (orientation, alternativeLabel, index, active, completed, disabled) while in the other case while having installed mui 5.4.0 it returns an empty Object. How can I access the index props in the second case since it is no longer provided or a substitute solution is not provided either? Also in the migration guide there is no reference regarding this breaking change.

Here are the demos: Mui 4 StepConnector demo Mui 5 StepConnector demo

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[michaldudak]

Stepper implementation has switched from cloneElement to using context. The correct way to get the information about the index would be to write:

const { index } = React.useContext(StepContext);

This, however, won’t currently work as we don’t export StepContext.

We’ll include StepContext in the module exports to make this possible. As a workaround, for the time being, you can import it directly from “@mui/material/Step/StepContext”

See https://codesandbox.io/s/material-ui-v5-stepconnector-does-not-return-any-index-props-without-passing-it-from-the-instance-forked-bnht2?file=/src/MyStepper.jsx

[michaldudak]

This was a workaround before the fix was made. You can now import StepContext from the Step module:

import { StepContext } from "@mui/material/Step";