[BUG] Wrong class applied to progtrckr li

[Naghal]

Describe the bug When you have conditionnal steps and the navigation bar is enabled, when a step goes from hidden to visible, the class progtrckr-undefined is added to the last li element instead of progtrckr-todo.

To Reproduce Steps to reproduce the behavior:

1. Have a conditonnal step defined initially
2. Make it a valid condition so it is now visible
3. See, the wrong class is applied to the last list item

Expected behavior The list item should have the proper class or we should have access to a method to refresh the navigation progressbar

Screenshots

Desktop (please complete the following information if applicable):

• OS: [e.g. iOS] Ubuntu 21
• Browser [e.g. chrome, safari] Chrome

Additional context Package version : ^6.0.2 Code to reproduce:

const getSteps = () => {
    return [
      { name: <><FaList /> {t('prp.agreement_details')}</>, component: <AgreementDetails inputProps={inputProps} file={getFile()} paymentIntervals={paymentIntervals} /> },
      ... inputProps('numberOfPayments').value > 1 ? [{ name: <><FaMoneyBillAlt/> {t('prp.employment_info')}</>, component: <EmploymentInfo inputProps={inputProps} cities={cities} states={states} /> }] : [],
      { name: <><FaSearch /> {t('prp.review')}</>, component: <Review inputProps={inputProps} valid={valid} isSubmitting={isSubmitting} file={getFile()} /> },
    ];
  }

return (<Stepper steps={getSteps()} dontValidate />);

[Naghal]

Meanwhile, as a workaround, I am adding the .progtrckr-undefined class in my css as the same as prgtrckr-todo.

.progtrckr-undefined {
  color: silver;
  border-bottom: 4px solid silver;
}

[newbreedofgeek]

@Naghal sorry for the delay.

Glad you found a CSS fix - but we will fix this in code soon. I'll keep the ticket open