@patternfly/react-core 4.274.0 → 4.274.1

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

@@ -1,20 +1,18 @@
 import React from 'react';
-import findLastIndex from 'lodash/findLastIndex';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import {
   isWizardParentStep,
-  WizardNavStepFunction,
-  WizardControlStep,
+  WizardStepType,
   isCustomWizardNav,
   WizardFooterType,
-  WizardNavType
+  WizardNavType,
+  WizardStepChangeScope
 } from './types';
-import { buildSteps, normalizeNavStep } from './utils';
+import { buildSteps } from './utils';
 import { useWizardContext, WizardContextProvider } from './WizardContext';
-import { WizardStepProps } from './WizardStep';
 import { WizardToggle } from './WizardToggle';
 import { WizardNavInternal } from './WizardNavInternal';
 
@@ -25,7 +23,7 @@ import { WizardNavInternal } from './WizardNavInternal';
 
 export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** Step components */
-  children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[];
+  children: React.ReactNode | React.ReactNode[];
   /** Wizard header */
   header?: React.ReactNode;
   /** Wizard footer */
@@ -40,18 +38,21 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   width?: number | string;
   /** Custom height of the wizard */
   height?: number | string;
-  /** Disables navigation items that haven't been visited. Defaults to false */
-  isStepVisitRequired?: boolean;
-  /** Callback function when a step in the navigation is clicked */
-  onNavByIndex?: WizardNavStepFunction;
-  /** Callback function after next button is clicked */
-  onNext?: WizardNavStepFunction;
-  /** Callback function after back button is clicked */
-  onBack?: WizardNavStepFunction;
+  /** Disables steps that haven't been visited. Defaults to false. */
+  isVisitRequired?: boolean;
+  /** Progressively shows steps, where all steps following the active step are hidden. Defaults to false. */
+  isProgressive?: boolean;
+  /** Callback function when navigating between steps */
+  onStepChange?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    currentStep: WizardStepType,
+    prevStep: WizardStepType,
+    scope: WizardStepChangeScope
+  ) => void | Promise<void>;
   /** Callback function to save at the end of the wizard, if not specified uses onClose */
-  onSave?: () => void | Promise<void>;
+  onSave?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
   /** Callback function to close the wizard */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const Wizard = ({
@@ -63,48 +64,61 @@ export const Wizard = ({
   header,
   nav,
   startIndex = 1,
-  isStepVisitRequired = false,
-  onNavByIndex,
-  onNext,
-  onBack,
+  isVisitRequired = false,
+  isProgressive = false,
+  onStepChange,
   onSave,
   onClose,
   ...wrapperProps
 }: WizardProps) => {
   const [activeStepIndex, setActiveStepIndex] = React.useState(startIndex);
   const initialSteps = buildSteps(children);
+  const firstStepRef = React.useRef(initialSteps[startIndex - 1]);
 
-  const goToNextStep = (steps: WizardControlStep[] = initialSteps) => {
-    const newStepIndex = steps.find(step => step.index > activeStepIndex && !step.isHidden && !isWizardParentStep(step))
-      ?.index;
+  // When the startIndex maps to a parent step, focus on the first sub-step
+  React.useEffect(() => {
+    if (isWizardParentStep(firstStepRef.current)) {
+      setActiveStepIndex(startIndex + 1);
+    }
+  }, [startIndex]);
+
+  const goToNextStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
+    const newStep = steps.find(
+      step => step.index > activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
+    );
 
-    if (activeStepIndex >= steps.length || !newStepIndex) {
-      return onSave ? onSave() : onClose?.();
+    if (activeStepIndex >= steps.length || !newStep?.index) {
+      return onSave ? onSave(event) : onClose?.(event);
     }
 
     const currStep = isWizardParentStep(steps[activeStepIndex]) ? steps[activeStepIndex + 1] : steps[activeStepIndex];
     const prevStep = steps[activeStepIndex - 1];
 
-    setActiveStepIndex(newStepIndex);
-    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    setActiveStepIndex(newStep?.index);
+    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Next);
   };
 
-  const goToPrevStep = (steps: WizardControlStep[] = initialSteps) => {
-    const newStepIndex =
-      findLastIndex(
-        steps,
-        (step: WizardControlStep) => step.index < activeStepIndex && !step.isHidden && !isWizardParentStep(step)
-      ) + 1;
+  const goToPrevStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
+    const newStep = [...steps]
+      .reverse()
+      .find(
+        (step: WizardStepType) =>
+          step.index < activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
+      );
     const currStep = isWizardParentStep(steps[activeStepIndex - 2])
       ? steps[activeStepIndex - 3]
       : steps[activeStepIndex - 2];
     const prevStep = steps[activeStepIndex - 1];
 
-    setActiveStepIndex(newStepIndex);
-    return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    setActiveStepIndex(newStep?.index);
+    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Back);
   };
 
-  const goToStepByIndex = (steps: WizardControlStep[] = initialSteps, index: number) => {
+  const goToStepByIndex = (
+    event: React.MouseEvent<HTMLButtonElement>,
+    steps: WizardStepType[] = initialSteps,
+    index: number
+  ) => {
     const lastStepIndex = steps.length + 1;
 
     // Handle index when out of bounds or hidden
@@ -118,25 +132,25 @@ export const Wizard = ({
     const prevStep = steps[activeStepIndex - 1];
 
     setActiveStepIndex(index);
-    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Nav);
   };
 
-  const goToStepById = (steps: WizardControlStep[] = initialSteps, id: number | string) => {
+  const goToStepById = (steps: WizardStepType[] = initialSteps, id: number | string) => {
     const step = steps.find(step => step.id === id);
     const stepIndex = step?.index;
     const lastStepIndex = steps.length + 1;
 
-    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isHidden) {
+    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isDisabled && !step.isHidden) {
       setActiveStepIndex(stepIndex);
     }
   };
 
-  const goToStepByName = (steps: WizardControlStep[] = initialSteps, name: string) => {
+  const goToStepByName = (steps: WizardStepType[] = initialSteps, name: string) => {
     const step = steps.find(step => step.name === name);
     const stepIndex = step?.index;
     const lastStepIndex = steps.length + 1;
 
-    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isHidden) {
+    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isDisabled && !step.isHidden) {
       setActiveStepIndex(stepIndex);
     }
   };
@@ -162,13 +176,17 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} isStepVisitRequired={isStepVisitRequired} />
+        <WizardInternal nav={nav} isVisitRequired={isVisitRequired} isProgressive={isProgressive} />
       </div>
     </WizardContextProvider>
   );
 };
 
-const WizardInternal = ({ nav, isStepVisitRequired }: Pick<WizardProps, 'nav' | 'isStepVisitRequired'>) => {
+const WizardInternal = ({
+  nav,
+  isVisitRequired,
+  isProgressive
+}: Pick<WizardProps, 'nav' | 'isVisitRequired' | 'isProgressive'>) => {
   const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
@@ -177,8 +195,15 @@ const WizardInternal = ({ nav, isStepVisitRequired }: Pick<WizardProps, 'nav' |
       return typeof nav === 'function' ? nav(isNavExpanded, steps, activeStep, goToStepByIndex) : nav;
     }
 
-    return <WizardNavInternal nav={nav} isNavExpanded={isNavExpanded} isStepVisitRequired={isStepVisitRequired} />;
-  }, [activeStep, isStepVisitRequired, goToStepByIndex, isNavExpanded, nav, steps]);
+    return (
+      <WizardNavInternal
+        nav={nav}
+        isNavExpanded={isNavExpanded}
+        isVisitRequired={isVisitRequired}
+        isProgressive={isProgressive}
+      />
+    );
+  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, steps]);
 
   return (
     <WizardToggle

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

@@ -1,22 +1,23 @@
 import React from 'react';
 
-import { isCustomWizardFooter, WizardControlStep, WizardFooterType } from './types';
+import { isCustomWizardFooter, isWizardSubStep, WizardStepType, WizardFooterType } from './types';
 import { getActiveStep } from './utils';
+import { useGetMergedSteps } from './hooks';
 import { WizardFooter, WizardFooterProps } from './WizardFooter';
 
 export interface WizardContextProps {
   /** List of steps */
-  steps: WizardControlStep[];
+  steps: WizardStepType[];
   /** Current step */
-  activeStep: WizardControlStep;
+  activeStep: WizardStepType;
   /** Footer element */
   footer: React.ReactElement;
+  /** Close the wizard */
+  close: () => void;
   /** Navigate to the next step */
-  onNext: () => void | Promise<void>;
+  goToNextStep: () => void | Promise<void>;
   /** Navigate to the previous step */
-  onBack: () => void | Promise<void>;
-  /** Close the wizard */
-  onClose: () => void;
+  goToPrevStep: () => void | Promise<void>;
   /** Navigate to step by ID */
   goToStepById: (id: number | string) => void;
   /** Navigate to step by name */
@@ -26,24 +27,28 @@ export interface WizardContextProps {
   /** Update the footer with any react element */
   setFooter: (footer: React.ReactElement | Partial<WizardFooterProps>) => void;
   /** Get step by ID */
-  getStep: (stepId: number | string) => WizardControlStep;
+  getStep: (stepId: number | string) => WizardStepType;
   /** Set step by ID */
-  setStep: (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) => void;
+  setStep: (step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) => void;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
 
 export interface WizardContextProviderProps {
-  steps: WizardControlStep[];
+  steps: WizardStepType[];
   activeStepIndex: number;
   footer: WizardFooterType;
   children: React.ReactElement;
-  onNext(steps: WizardControlStep[]): void;
-  onBack(steps: WizardControlStep[]): void;
-  onClose(): void;
-  goToStepById(steps: WizardControlStep[], id: number | string): void;
-  goToStepByName(steps: WizardControlStep[], name: string): void;
-  goToStepByIndex(steps: WizardControlStep[], index: number): void;
+  onNext(event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[]): void;
+  onBack(event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[]): void;
+  onClose(event: React.MouseEvent<HTMLButtonElement>): void;
+  goToStepById(steps: WizardStepType[], id: number | string): void;
+  goToStepByName(steps: WizardStepType[], name: string): void;
+  goToStepByIndex(
+    event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>,
+    steps: WizardStepType[],
+    index: number
+  ): void;
 }
 
 export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
@@ -62,25 +67,12 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentFooter, setCurrentFooter] = React.useState(
     typeof initialFooter !== 'function' ? initialFooter : undefined
   );
+  const steps = useGetMergedSteps(initialSteps, currentSteps);
+  const activeStep = React.useMemo(() => getActiveStep(steps, activeStepIndex), [activeStepIndex, steps]);
 
-  // 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 close = React.useCallback(() => onClose(null), [onClose]);
+  const goToNextStep = React.useCallback(() => onNext(null, steps), [onNext, steps]);
+  const goToPrevStep = React.useCallback(() => onBack(null, steps), [onBack, steps]);
 
   const footer = React.useMemo(() => {
     const wizardFooter = activeStep?.footer || currentFooter || initialFooter;
@@ -89,7 +81,7 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
       const customFooter = wizardFooter;
 
       return typeof customFooter === 'function'
-        ? customFooter(activeStep, goToNextStep, goToPrevStep, onClose)
+        ? customFooter(activeStep, goToNextStep, goToPrevStep, close)
         : customFooter;
     }
 
@@ -98,17 +90,17 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         activeStep={activeStep}
         onNext={goToNextStep}
         onBack={goToPrevStep}
-        onClose={onClose}
-        isBackDisabled={activeStep?.id === steps[0]?.id}
+        onClose={close}
+        isBackDisabled={activeStep?.index === 1 || (isWizardSubStep(activeStep) && activeStep?.index === 2)}
         {...wizardFooter}
       />
     );
-  }, [currentFooter, initialFooter, activeStep, goToNextStep, goToPrevStep, onClose, steps]);
+  }, [currentFooter, initialFooter, activeStep, goToNextStep, goToPrevStep, close]);
 
   const getStep = React.useCallback((stepId: string | number) => steps.find(step => step.id === stepId), [steps]);
 
   const setStep = React.useCallback(
-    (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) =>
+    (step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) =>
       setCurrentSteps(prevSteps =>
         prevSteps.map(prevStep => {
           if (prevStep.id === step.id) {
@@ -127,15 +119,18 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         steps,
         activeStep,
         footer,
-        onClose,
+        close,
         getStep,
         setStep,
+        goToNextStep,
+        goToPrevStep,
         setFooter: setCurrentFooter,
-        onNext: goToNextStep,
-        onBack: goToPrevStep,
         goToStepById: React.useCallback(id => goToStepById(steps, id), [goToStepById, steps]),
         goToStepByName: React.useCallback(name => goToStepByName(steps, name), [goToStepByName, steps]),
-        goToStepByIndex: React.useCallback(index => goToStepByIndex(steps, index), [goToStepByIndex, steps])
+        goToStepByIndex: React.useCallback((index: number) => goToStepByIndex(null, steps, index), [
+          goToStepByIndex,
+          steps
+        ])
       }}
     >
       {children}

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

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../../../components/Button';
-import { isCustomWizardFooter, WizardControlStep, WizardNavStepFunction } from './types';
+import { isCustomWizardFooter, WizardStepType } from './types';
 
 /**
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
@@ -12,13 +12,13 @@ import { isCustomWizardFooter, WizardControlStep, WizardNavStepFunction } from '
 
 export interface WizardFooterProps {
   /** The active step */
-  activeStep: WizardControlStep;
+  activeStep: WizardStepType;
   /** Next button callback */
-  onNext: () => WizardNavStepFunction | void | Promise<void>;
+  onNext: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
   /** Back button callback */
-  onBack: () => WizardNavStepFunction | void | Promise<void>;
+  onBack: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
   /** Cancel link callback */
-  onClose: () => void;
+  onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Custom text for the Next button. The current step's nextButtonText takes precedence. */
   nextButtonText?: React.ReactNode;
   /** Custom text for the Back button */
@@ -35,6 +35,10 @@ export interface WizardFooterProps {
   isCancelHidden?: boolean;
 }
 
+/**
+ * Applies default wizard footer styling any number of child elements.
+ */
+
 interface WizardFooterWrapperProps {
   children: React.ReactNode;
 }
@@ -44,7 +48,7 @@ export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
 );
 
 export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
-  const activeStepFooter = !isCustomWizardFooter(activeStep.footer) && activeStep.footer;
+  const activeStepFooter = !isCustomWizardFooter(activeStep?.footer) && activeStep?.footer;
   return <InternalWizardFooter {...internalProps} {...activeStepFooter} />;
 };
 

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

@@ -7,7 +7,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
   /** Callback function called when the X (Close) button is clicked */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Title of the wizard */
   title: string;
   /** Description of the wizard */

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

@@ -11,12 +11,12 @@ import { WizardNavItem } from './WizardNavItem';
  * This component is not exposed to consumers.
  */
 
-interface WizardNavInternalProps extends Pick<WizardProps, 'isStepVisitRequired'> {
+interface WizardNavInternalProps extends Pick<WizardProps, 'isVisitRequired' | 'isProgressive'> {
   nav: Partial<WizardNavProps>;
   isNavExpanded: boolean;
 }
 
-export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: WizardNavInternalProps) => {
+export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavExpanded }: WizardNavInternalProps) => {
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const wizardNavProps: WizardNavProps = {
@@ -31,7 +31,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
     <WizardNav {...wizardNavProps}>
       {steps.map((step, stepIndex) => {
         const hasVisitedNextStep = steps.some(step => step.index > stepIndex + 1 && step.isVisited);
-        const isStepDisabled = step.isDisabled || (isStepVisitRequired && !step.isVisited && !hasVisitedNextStep);
+        const isStepDisabled = step.isDisabled || (isVisitRequired && !step.isVisited && !hasVisitedNextStep);
         const customStepNavItem = isCustomWizardNavItem(step.navItem) && (
           <React.Fragment key={step.id}>
             {typeof step.navItem === 'function' ? step.navItem(step, activeStep, steps, goToStepByIndex) : step.navItem}
@@ -46,7 +46,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
             const subStep = steps.find(step => step.id === subStepId);
             const hasVisitedNextStep = steps.some(step => step.index > subStep.index && step.isVisited);
             const isSubStepDisabled =
-              subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
+              subStep.isDisabled || (isVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
             const customSubStepNavItem = isCustomWizardNavItem(subStep.navItem) && (
               <React.Fragment key={subStep.id}>
                 {typeof subStep.navItem === 'function'
@@ -70,51 +70,59 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
               hasActiveChild = true;
             }
 
-            return (
-              customSubStepNavItem || (
-                <WizardNavItem
-                  key={subStep.id}
-                  id={subStep.id}
-                  content={subStep.name}
-                  isCurrent={activeStep?.id === subStep.id}
-                  isDisabled={isSubStepDisabled}
-                  isVisited={subStep.isVisited}
-                  stepIndex={subStep.index}
-                  onNavItemClick={goToStepByIndex}
-                  status={subStep.status}
-                  {...subStep.navItem}
-                />
-              )
-            );
+            if (!isProgressive || (isProgressive && subStep.index <= activeStep.index)) {
+              return (
+                customSubStepNavItem || (
+                  <WizardNavItem
+                    key={subStep.id}
+                    id={subStep.id}
+                    content={subStep.name}
+                    isCurrent={activeStep?.id === subStep.id}
+                    isDisabled={isSubStepDisabled}
+                    isVisited={subStep.isVisited}
+                    stepIndex={subStep.index}
+                    onClick={() => goToStepByIndex(subStep.index)}
+                    status={subStep.status}
+                    {...subStep.navItem}
+                  />
+                )
+              );
+            }
           });
           const hasEnabledChildren = React.Children.toArray(subNavItems).some(
             child => React.isValidElement(child) && !child.props.isDisabled
           );
 
-          return (
-            customStepNavItem || (
-              <WizardNavItem
-                key={step.id}
-                id={step.id}
-                content={step.name}
-                isExpandable={step.isCollapsible ?? true}
-                isCurrent={hasActiveChild}
-                isDisabled={!hasEnabledChildren}
-                isVisited={step.isVisited}
-                stepIndex={firstSubStepIndex}
-                onNavItemClick={goToStepByIndex}
-                status={step.status}
-                {...step.navItem}
-              >
-                <WizardNav {...wizardNavProps} isInnerList>
-                  {subNavItems}
-                </WizardNav>
-              </WizardNavItem>
-            )
-          );
+          if (!isProgressive || (isProgressive && step.index <= activeStep.index)) {
+            return (
+              customStepNavItem || (
+                <WizardNavItem
+                  key={step.id}
+                  id={step.id}
+                  content={step.name}
+                  isExpandable={step.isExpandable}
+                  isCurrent={hasActiveChild}
+                  isDisabled={!hasEnabledChildren}
+                  isVisited={step.isVisited}
+                  stepIndex={firstSubStepIndex}
+                  onClick={() => goToStepByIndex(firstSubStepIndex)}
+                  status={step.status}
+                  {...step.navItem}
+                >
+                  <WizardNav {...wizardNavProps} isInnerList>
+                    {subNavItems}
+                  </WizardNav>
+                </WizardNavItem>
+              )
+            );
+          }
         }
 
-        if (isWizardBasicStep(step) && !step.isHidden) {
+        if (
+          isWizardBasicStep(step) &&
+          !step.isHidden &&
+          (!isProgressive || (isProgressive && step.index <= activeStep.index))
+        ) {
           return (
             customStepNavItem || (
               <WizardNavItem
@@ -125,7 +133,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
                 isDisabled={isStepDisabled}
                 isVisited={step.isVisited}
                 stepIndex={step.index}
-                onNavItemClick={goToStepByIndex}
+                onClick={() => goToStepByIndex(step.index)}
                 status={step.status}
                 {...step.navItem}
               />

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

@@ -5,9 +5,10 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
+import { OUIAProps, useOUIAProps } from '../../../helpers';
 import { WizardNavItemStatus } from './types';
 
-export interface WizardNavItemProps {
+export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -21,11 +22,13 @@ export interface WizardNavItemProps {
   /** The step index passed into the onNavItemClick callback */
   stepIndex: number;
   /** Callback for when the navigation item is clicked */
-  onNavItemClick?: (stepIndex: number) => any;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, index: number) => any;
   /** Component used to render WizardNavItem */
-  navItemComponent?: 'button' | 'a';
+  component?: 'button' | 'a';
   /** An optional url to use for when using an anchor component */
   href?: string;
+  /** Where to display the linked URL when using an anchor component */
+  target?: React.HTMLAttributeAnchorTarget;
   /** Flag indicating that this NavItem has child steps and is expandable */
   isExpandable?: boolean;
   /** The id for the navigation item */
@@ -34,29 +37,31 @@ export interface WizardNavItemProps {
   status?: 'default' | 'error';
 }
 
-export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
+export const WizardNavItem = ({
   children = null,
   content = '',
   isCurrent = false,
   isDisabled = false,
   isVisited = false,
   stepIndex,
-  onNavItemClick = () => undefined,
-  navItemComponent = 'button',
-  href = null,
+  onClick,
+  component: NavItemComponent = 'button',
+  href,
   isExpandable = false,
   id,
   status = 'default',
-  ...rest
+  target,
+  ouiaId,
+  ouiaSafe = true
 }: WizardNavItemProps) => {
-  const NavItemComponent = navItemComponent;
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
 
   React.useEffect(() => {
     setIsExpanded(isCurrent);
   }, [isCurrent]);
 
-  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+  if (NavItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.error('WizardNavItem: When using an anchor, please provide an href');
   }
@@ -87,12 +92,13 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
       )}
     >
       <NavItemComponent
-        {...rest}
-        {...(navItemComponent === 'a' ? { tabIndex: isDisabled ? -1 : undefined, href } : { disabled: isDisabled })}
+        {...(NavItemComponent === 'a'
+          ? { tabIndex: isDisabled ? -1 : undefined, href, target }
+          : { disabled: isDisabled })}
         {...(id && { id: id.toString() })}
         onClick={e => {
-          e.preventDefault();
-          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(stepIndex);
+          e.stopPropagation();
+          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick?.(e, stepIndex);
         }}
         className={css(
           styles.wizardNavLink,
@@ -103,6 +109,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
         {...(ariaLabel && { 'aria-label': ariaLabel })}
+        {...ouiaProps}
       >
         {isExpandable ? (
           <>