@patternfly/react-core 4.255.1 → 4.256.0

package/src/components/TreeView/examples/TreeView.md

@@ -3,7 +3,6 @@ id: Tree view
 section: components
 cssPrefix: pf-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
-beta: true
 ---
 
 import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';

package/src/components/Wizard/Wizard.tsx

@@ -18,9 +18,9 @@ export interface WizardStep {
   name: React.ReactNode;
   /** The component to render in the main body */
   component?: any;
-  /** @beta The content to render in the drawer panel (use when hasDrawer prop is set on the wizard).   */
+  /** The content to render in the drawer panel (use when hasDrawer prop is set on the wizard).   */
   drawerPanelContent?: any;
-  /** @beta Custom drawer toggle button that opens the drawer. */
+  /** Custom drawer toggle button that opens the drawer. */
   drawerToggleButton?: React.ReactNode;
   /** Setting to true hides the side nav and footer */
   isFinishedStep?: boolean;
@@ -108,9 +108,9 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   isNavExpandable?: boolean;
   /** Callback function to signal the current step in the wizard */
   onCurrentStepChanged?: (step: WizardStep) => void;
-  /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
   hasDrawer?: boolean;
-  /** @beta Flag indicating the wizard drawer is expanded */
+  /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
 }
 

package/src/components/Wizard/WizardToggle.tsx

@@ -29,9 +29,9 @@ export interface WizardToggleProps {
   mainAriaLabel?: string;
   /** If the wizard is in-page */
   isInPage?: boolean;
-  /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
   hasDrawer?: boolean;
-  /** @beta Flag indicating the wizard drawer is expanded */
+  /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
 }
 

package/src/components/Wizard/examples/Wizard.md

@@ -134,8 +134,10 @@ class IncrementallyEnabledStepsWizard extends React.Component {
       stepIdReached: 1
     };
     this.onNext = ({ id }) => {
+      const [, orderIndex] = id.split('-');
+
       this.setState({
-        stepIdReached: this.state.stepIdReached < id ? id : this.state.stepIdReached
+        stepIdReached: this.state.stepIdReached < orderIndex ? orderIndex : this.state.stepIdReached
       });
     };
     this.closeWizard = () => {
@@ -147,27 +149,27 @@ class IncrementallyEnabledStepsWizard extends React.Component {
     const { stepIdReached } = this.state;
 
     const steps = [
-      { id: 'incrementally-enabled-1', name: 'First step', component: <p>Step 1 content</p> },
+      { id: 'incrementallyEnabled-1', name: 'First step', component: <p>Step 1 content</p> },
       {
-        id: 'incrementally-enabled-2',
+        id: 'incrementallyEnabled-2',
         name: 'Second step',
         component: <p>Step 2 content</p>,
         canJumpTo: stepIdReached >= 2
       },
       {
-        id: 'incrementally-enabled-3',
+        id: 'incrementallyEnabled-3',
         name: 'Third step',
         component: <p>Step 3 content</p>,
         canJumpTo: stepIdReached >= 3
       },
       {
-        id: 'incrementally-enabled-4',
+        id: 'incrementallyEnabled-4',
         name: 'Fourth step',
         component: <p>Step 4 content</p>,
         canJumpTo: stepIdReached >= 4
       },
       {
-        id: 'incrementally-enabled-5',
+        id: 'incrementallyEnabled-5',
         name: 'Review',
         component: <p>Review step content</p>,
         nextButtonText: 'Finish',
@@ -312,8 +314,10 @@ class ValidationWizard extends React.Component {
 
     this.onNext = ({ id, name }, { prevId, prevName }) => {
       console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
+      const [, orderIndex] = id.split('-');
+
       this.setState({
-        stepIdReached: this.state.stepIdReached < id ? id : this.state.stepIdReached
+        stepIdReached: this.state.stepIdReached < orderIndex ? orderIndex : this.state.stepIdReached
       });
       this.areAllStepsValid();
     };
@@ -897,7 +901,7 @@ class WizardInModal extends React.Component {
 
 ### Wizard with drawer
 
-```js isBeta
+```js
 import React from 'react';
 import {
   Button,

package/src/demos/MultipleFileUploadDemos.md

@@ -1,7 +1,6 @@
 ---
 id: File upload - multiple
 section: components
-beta: true
 ---
 
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -1,7 +1,6 @@
 ---
 id: Notification drawer
 section: components
-beta: true
 ---
 
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';

package/src/next/components/Wizard/Wizard.tsx

@@ -42,8 +42,6 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   height?: number | string;
   /** Disables navigation items that haven't been visited. Defaults to false */
   isStepVisitRequired?: boolean;
-  /** Flag to unmount inactive steps instead of hiding. Defaults to true */
-  hasUnmountedSteps?: boolean;
   /** Callback function when a step in the navigation is clicked */
   onNavByIndex?: WizardNavStepFunction;
   /** Callback function after next button is clicked */
@@ -66,7 +64,6 @@ export const Wizard = ({
   nav,
   startIndex = 1,
   isStepVisitRequired = false,
-  hasUnmountedSteps = true,
   onNavByIndex,
   onNext,
   onBack,
@@ -74,42 +71,37 @@ export const Wizard = ({
   onClose,
   ...wrapperProps
 }: WizardProps) => {
-  const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
+  const [activeStepIndex, setActiveStepIndex] = React.useState(startIndex);
   const initialSteps = buildSteps(children);
 
   const goToNextStep = (steps: WizardControlStep[] = initialSteps) => {
-    const newStepIndex =
-      steps.findIndex((step, index) => index + 1 > currentStepIndex && !step.isHidden && !isWizardParentStep(step)) + 1;
+    const newStepIndex = steps.find(step => step.index > activeStepIndex && !step.isHidden && !isWizardParentStep(step))
+      ?.index;
 
-    if (currentStepIndex >= steps.length || !newStepIndex) {
+    if (activeStepIndex >= steps.length || !newStepIndex) {
       return onSave ? onSave() : onClose?.();
     }
 
-    const currStep = isWizardParentStep(steps[currentStepIndex])
-      ? steps[currentStepIndex + 1]
-      : steps[currentStepIndex];
-    const prevStep = steps[currentStepIndex - 1];
-
-    setCurrentStepIndex(newStepIndex);
+    const currStep = isWizardParentStep(steps[activeStepIndex]) ? steps[activeStepIndex + 1] : steps[activeStepIndex];
+    const prevStep = steps[activeStepIndex - 1];
 
-    return onNext?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
+    setActiveStepIndex(newStepIndex);
+    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
   };
 
   const goToPrevStep = (steps: WizardControlStep[] = initialSteps) => {
     const newStepIndex =
       findLastIndex(
         steps,
-        (step: WizardControlStep, index: number) =>
-          index + 1 < currentStepIndex && !step.isHidden && !isWizardParentStep(step)
+        (step: WizardControlStep) => step.index < activeStepIndex && !step.isHidden && !isWizardParentStep(step)
       ) + 1;
-    const currStep = isWizardParentStep(steps[currentStepIndex - 2])
-      ? steps[currentStepIndex - 3]
-      : steps[currentStepIndex - 2];
-    const prevStep = steps[currentStepIndex - 1];
-
-    setCurrentStepIndex(newStepIndex);
+    const currStep = isWizardParentStep(steps[activeStepIndex - 2])
+      ? steps[activeStepIndex - 3]
+      : steps[activeStepIndex - 2];
+    const prevStep = steps[activeStepIndex - 1];
 
-    return onBack?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
+    setActiveStepIndex(newStepIndex);
+    return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
   };
 
   const goToStepByIndex = (steps: WizardControlStep[] = initialSteps, index: number) => {
@@ -120,46 +112,40 @@ export const Wizard = ({
       index = 1;
     } else if (index > lastStepIndex) {
       index = lastStepIndex;
-    } else if (steps[index - 1].isHidden) {
-      // eslint-disable-next-line no-console
-      console.error('Wizard: Unable to navigate to hidden step.');
     }
 
     const currStep = steps[index - 1];
-    const prevStep = steps[currentStepIndex - 1];
-    setCurrentStepIndex(index);
+    const prevStep = steps[activeStepIndex - 1];
 
-    return onNavByIndex?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
+    setActiveStepIndex(index);
+    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
   };
 
   const goToStepById = (steps: WizardControlStep[] = initialSteps, id: number | string) => {
-    const stepIndex = steps.findIndex(step => step.id === id) + 1;
+    const step = steps.find(step => step.id === id);
+    const stepIndex = step?.index;
+    const lastStepIndex = steps.length + 1;
 
-    if (stepIndex > 0 && stepIndex < steps.length + 1 && !steps[stepIndex].isHidden) {
-      setCurrentStepIndex(stepIndex);
-    } else {
-      // eslint-disable-next-line no-console
-      console.error(`Wizard: Unable to navigate to step with id: ${id}.`);
+    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isHidden) {
+      setActiveStepIndex(stepIndex);
     }
   };
 
   const goToStepByName = (steps: WizardControlStep[] = initialSteps, name: string) => {
-    const stepIndex = initialSteps.findIndex(step => step.name === name) + 1;
+    const step = steps.find(step => step.name === name);
+    const stepIndex = step?.index;
+    const lastStepIndex = steps.length + 1;
 
-    if (stepIndex > 0 && stepIndex < steps.length + 1 && !steps[stepIndex].isHidden) {
-      setCurrentStepIndex(stepIndex);
-    } else {
-      // eslint-disable-next-line no-console
-      console.error(`Wizard: Unable to navigate to step with name: ${name}.`);
+    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isHidden) {
+      setActiveStepIndex(stepIndex);
     }
   };
 
   return (
     <WizardContextProvider
       steps={initialSteps}
-      currentStepIndex={currentStepIndex}
+      activeStepIndex={activeStepIndex}
       footer={footer}
-      isStepVisitRequired={isStepVisitRequired}
       onNext={goToNextStep}
       onBack={goToPrevStep}
       onClose={onClose}
@@ -176,37 +162,32 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} hasUnmountedSteps={hasUnmountedSteps} isStepVisitRequired={isStepVisitRequired} />
+        <WizardInternal nav={nav} isStepVisitRequired={isStepVisitRequired} />
       </div>
     </WizardContextProvider>
   );
 };
 
-const WizardInternal = ({
-  nav,
-  hasUnmountedSteps,
-  isStepVisitRequired
-}: Pick<WizardProps, 'nav' | 'hasUnmountedSteps' | 'isStepVisitRequired'>) => {
-  const { currentStep, steps, footer, goToStepByIndex } = useWizardContext();
+const WizardInternal = ({ nav, isStepVisitRequired }: Pick<WizardProps, 'nav' | 'isStepVisitRequired'>) => {
+  const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
   const wizardNav = React.useMemo(() => {
     if (isCustomWizardNav(nav)) {
-      return typeof nav === 'function' ? nav(isNavExpanded, steps, currentStep, goToStepByIndex) : nav;
+      return typeof nav === 'function' ? nav(isNavExpanded, steps, activeStep, goToStepByIndex) : nav;
     }
 
     return <WizardNavInternal nav={nav} isNavExpanded={isNavExpanded} isStepVisitRequired={isStepVisitRequired} />;
-  }, [currentStep, isStepVisitRequired, goToStepByIndex, isNavExpanded, nav, steps]);
+  }, [activeStep, isStepVisitRequired, goToStepByIndex, isNavExpanded, nav, steps]);
 
   return (
     <WizardToggle
       nav={wizardNav}
       footer={footer}
       steps={steps}
-      currentStep={currentStep}
+      activeStep={activeStep}
       isNavExpanded={isNavExpanded}
       toggleNavExpanded={() => setIsNavExpanded(prevIsExpanded => !prevIsExpanded)}
-      hasUnmountedSteps={hasUnmountedSteps}
     />
   );
 };

package/src/next/components/Wizard/WizardBody.tsx

@@ -10,7 +10,7 @@ import { css } from '@patternfly/react-styles';
 export interface WizardBodyProps {
   children: React.ReactNode | React.ReactNode[];
   /** Set to true to remove the default body padding */
-  hasNoBodyPadding?: boolean;
+  hasNoPadding?: boolean;
   /** An aria-label to use for the wrapper element */
   'aria-label'?: string;
   /** Sets the aria-labelledby attribute for the wrapper element */
@@ -21,13 +21,13 @@ export interface WizardBodyProps {
 
 export const WizardBody = ({
   children,
-  hasNoBodyPadding = false,
+  hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   component: WrapperComponent = 'div'
 }: WizardBodyProps) => (
   <WrapperComponent aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
-    <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+    <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
   </WrapperComponent>
 );
 

package/src/next/components/Wizard/WizardContext.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 
-import { isCustomWizardFooter, isWizardParentStep, WizardControlStep, WizardFooterType } from './types';
-import { getCurrentStep } from './utils';
+import { isCustomWizardFooter, WizardControlStep, WizardFooterType } from './types';
+import { getActiveStep } from './utils';
 import { WizardFooter, WizardFooterProps } from './WizardFooter';
 
 export interface WizardContextProps {
   /** List of steps */
   steps: WizardControlStep[];
   /** Current step */
-  currentStep: WizardControlStep;
-  /** Current step index */
-  currentStepIndex: number;
+  activeStep: WizardControlStep;
   /** Footer element */
   footer: React.ReactElement;
   /** Navigate to the next step */
@@ -31,17 +29,14 @@ export interface WizardContextProps {
   getStep: (stepId: number | string) => WizardControlStep;
   /** Set step by ID */
   setStep: (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) => void;
-  /** Toggle step visibility by ID */
-  toggleStep: (stepId: number | string, isHidden: boolean) => void;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
 
 export interface WizardContextProviderProps {
   steps: WizardControlStep[];
-  currentStepIndex: number;
+  activeStepIndex: number;
   footer: WizardFooterType;
-  isStepVisitRequired: boolean;
   children: React.ReactElement;
   onNext(steps: WizardControlStep[]): void;
   onBack(steps: WizardControlStep[]): void;
@@ -54,8 +49,7 @@ export interface WizardContextProviderProps {
 export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
   steps: initialSteps,
   footer: initialFooter,
-  currentStepIndex,
-  isStepVisitRequired,
+  activeStepIndex,
   children,
   onNext,
   onBack,
@@ -64,43 +58,58 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   goToStepByName,
   goToStepByIndex
 }) => {
-  const [steps, setSteps] = React.useState(initialSteps);
+  const [currentSteps, setCurrentSteps] = React.useState(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState(
     typeof initialFooter !== 'function' ? initialFooter : undefined
   );
-  const currentStep = getCurrentStep(steps, currentStepIndex);
+
+  // Combined initial and current state steps
+  const steps = React.useMemo(
+    () =>
+      currentSteps.map((currentStepProps, index) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { isVisited, ...initialStepProps } = initialSteps[index];
+
+        return {
+          ...currentStepProps,
+          ...initialStepProps
+        };
+      }),
+    [initialSteps, currentSteps]
+  );
+  const activeStep = getActiveStep(steps, activeStepIndex);
 
   const goToNextStep = React.useCallback(() => onNext(steps), [onNext, steps]);
   const goToPrevStep = React.useCallback(() => onBack(steps), [onBack, steps]);
 
   const footer = React.useMemo(() => {
-    const wizardFooter = currentFooter || initialFooter;
+    const wizardFooter = activeStep?.footer || currentFooter || initialFooter;
 
     if (isCustomWizardFooter(wizardFooter)) {
       const customFooter = wizardFooter;
 
       return typeof customFooter === 'function'
-        ? customFooter(currentStep, goToNextStep, goToPrevStep, onClose)
+        ? customFooter(activeStep, goToNextStep, goToPrevStep, onClose)
         : customFooter;
     }
 
     return (
       <WizardFooter
-        currentStep={currentStep}
+        activeStep={activeStep}
         onNext={goToNextStep}
         onBack={goToPrevStep}
         onClose={onClose}
-        isBackDisabled={currentStep?.id === steps[0]?.id}
+        isBackDisabled={activeStep?.id === steps[0]?.id}
         {...wizardFooter}
       />
     );
-  }, [currentFooter, initialFooter, currentStep, goToNextStep, goToPrevStep, onClose, steps]);
+  }, [currentFooter, initialFooter, activeStep, goToNextStep, goToPrevStep, onClose, steps]);
 
   const getStep = React.useCallback((stepId: string | number) => steps.find(step => step.id === stepId), [steps]);
 
   const setStep = React.useCallback(
     (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) =>
-      setSteps(prevSteps =>
+      setCurrentSteps(prevSteps =>
         prevSteps.map(prevStep => {
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
@@ -112,56 +121,15 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
     []
   );
 
-  const toggleStep = React.useCallback(
-    (stepId: string | number, isHidden: boolean) =>
-      setSteps(prevSteps => {
-        let stepToHide: WizardControlStep;
-
-        return prevSteps.map(prevStep => {
-          if (prevStep.id === stepId) {
-            // Don't hide the currently active step or its parent (if a sub-step).
-            if (
-              isHidden &&
-              (currentStep.id === prevStep.id ||
-                (isWizardParentStep(prevStep) && prevStep.subStepIds.includes(currentStep.id)))
-            ) {
-              // eslint-disable-next-line no-console
-              console.error('Wizard: Unable to hide the current step or its parent.');
-              return prevStep;
-            }
-
-            stepToHide = { ...prevStep, isHidden };
-            return stepToHide;
-          }
-
-          // When isStepVisitRequired is enabled, if the step was previously hidden and not visited yet,
-          // when it is shown, all steps beyond it should be disabled to ensure it is visited.
-          if (
-            isStepVisitRequired &&
-            stepToHide?.isHidden === false &&
-            !stepToHide?.isVisited &&
-            prevSteps.indexOf(stepToHide) < prevSteps.indexOf(prevStep)
-          ) {
-            return { ...prevStep, isVisited: false };
-          }
-
-          return prevStep;
-        });
-      }),
-    [currentStep.id, isStepVisitRequired]
-  );
-
   return (
     <WizardContext.Provider
       value={{
         steps,
-        currentStep,
-        currentStepIndex,
+        activeStep,
         footer,
         onClose,
         getStep,
         setStep,
-        toggleStep,
         setFooter: setCurrentFooter,
         onNext: goToNextStep,
         onBack: goToPrevStep,

package/src/next/components/Wizard/WizardFooter.tsx

@@ -11,8 +11,8 @@ import { isCustomWizardFooter, WizardControlStep, WizardNavStepFunction } from '
  */
 
 export interface WizardFooterProps {
-  /** The current step */
-  currentStep: WizardControlStep;
+  /** The active step */
+  activeStep: WizardControlStep;
   /** Next button callback */
   onNext: () => WizardNavStepFunction | void;
   /** Back button callback */
@@ -43,9 +43,9 @@ export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
   <footer className={css(styles.wizardFooter)}>{children}</footer>
 );
 
-export const WizardFooter = ({ currentStep, ...internalProps }: WizardFooterProps) => {
-  const currentStepFooter = !isCustomWizardFooter(currentStep.footer) && currentStep.footer;
-  return <InternalWizardFooter {...internalProps} {...currentStepFooter} />;
+export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
+  const activeStepFooter = !isCustomWizardFooter(activeStep.footer) && activeStep.footer;
+  return <InternalWizardFooter {...internalProps} {...activeStepFooter} />;
 };
 
 const InternalWizardFooter = ({
@@ -59,7 +59,7 @@ const InternalWizardFooter = ({
   nextButtonText = 'Next',
   backButtonText = 'Back',
   cancelButtonText = 'Cancel'
-}: Omit<WizardFooterProps, 'currentStep'>) => (
+}: Omit<WizardFooterProps, 'activeStep'>) => (
   <WizardFooterWrapper>
     <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
       {nextButtonText}

package/src/next/components/Wizard/WizardNavInternal.tsx

@@ -17,7 +17,7 @@ interface WizardNavInternalProps extends Pick<WizardProps, 'isStepVisitRequired'
 }
 
 export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: WizardNavInternalProps) => {
-  const { currentStep, steps, goToStepByIndex } = useWizardContext();
+  const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const wizardNavProps: WizardNavProps = {
     isExpanded: isNavExpanded,
@@ -29,27 +29,28 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
 
   return (
     <WizardNav {...wizardNavProps}>
-      {steps.map((step, index) => {
-        const stepIndex = index + 1;
+      {steps.map((step, stepIndex) => {
+        const hasVisitedNextStep = steps.some(step => step.index > stepIndex + 1 && step.isVisited);
+        const isStepDisabled = step.isDisabled || (isStepVisitRequired && !step.isVisited && !hasVisitedNextStep);
         const customStepNavItem = isCustomWizardNavItem(step.navItem) && (
           <React.Fragment key={step.id}>
-            {typeof step.navItem === 'function'
-              ? step.navItem(step, currentStep, steps, goToStepByIndex)
-              : step.navItem}
+            {typeof step.navItem === 'function' ? step.navItem(step, activeStep, steps, goToStepByIndex) : step.navItem}
           </React.Fragment>
         );
 
         if (isWizardParentStep(step) && !step.isHidden) {
-          let firstSubStepIndex;
+          let firstSubStepIndex: number;
           let hasActiveChild = false;
 
           const subNavItems = step.subStepIds?.map((subStepId, subStepIndex) => {
             const subStep = steps.find(step => step.id === subStepId);
-            const subStepOrderIndex = steps.indexOf(subStep) + 1;
+            const hasVisitedNextStep = steps.some(step => step.index > subStep.index && step.isVisited);
+            const isSubStepDisabled =
+              subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
             const customSubStepNavItem = isCustomWizardNavItem(subStep.navItem) && (
               <React.Fragment key={subStep.id}>
                 {typeof subStep.navItem === 'function'
-                  ? subStep.navItem(subStep, currentStep, steps, goToStepByIndex)
+                  ? subStep.navItem(subStep, activeStep, steps, goToStepByIndex)
                   : subStep.navItem}
               </React.Fragment>
             );
@@ -61,11 +62,11 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
 
             // Store the first sub-step index so that when its parent is clicked, the first sub-step is focused
             if (subStepIndex === 0) {
-              firstSubStepIndex = subStepOrderIndex;
+              firstSubStepIndex = subStep.index;
             }
 
             // When a sub-step is active, use this flag to set the parent step as active (isCurrent)
-            if (currentStep?.id === subStep.id) {
+            if (activeStep?.id === subStep.id) {
               hasActiveChild = true;
             }
 
@@ -75,10 +76,10 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
                   key={subStep.id}
                   id={subStep.id}
                   content={subStep.name}
-                  isCurrent={currentStep?.id === subStep.id}
-                  isDisabled={subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited)}
+                  isCurrent={activeStep?.id === subStep.id}
+                  isDisabled={isSubStepDisabled}
                   isVisited={subStep.isVisited}
-                  stepIndex={subStepOrderIndex}
+                  stepIndex={subStep.index}
                   onNavItemClick={goToStepByIndex}
                   status={subStep.status}
                   {...subStep.navItem}
@@ -120,10 +121,10 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
                 key={step.id}
                 id={step.id}
                 content={step.name}
-                isCurrent={currentStep?.id === step.id}
-                isDisabled={step.isDisabled || (isStepVisitRequired && !step.isVisited)}
+                isCurrent={activeStep?.id === step.id}
+                isDisabled={isStepDisabled}
                 isVisited={step.isVisited}
-                stepIndex={stepIndex}
+                stepIndex={step.index}
                 onNavItemClick={goToStepByIndex}
                 status={step.status}
                 {...step.navItem}