@patternfly/react-core 4.274.0 → 4.275.0

package/src/components/Select/SelectToggle.tsx

@@ -8,7 +8,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { findTabbableElements } from '../../helpers/util';
 import { KeyTypes } from '../../helpers/constants';
 
-export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
+export interface SelectToggleProps extends Omit<React.HTMLProps<HTMLElement>, 'ref'> {
   /** HTML ID of dropdown toggle */
   id: string;
   /** Anything which can be rendered as dropdown toggle */
@@ -59,9 +59,11 @@ export interface SelectToggleProps extends React.HTMLProps<HTMLElement> {
   hasFooter?: boolean;
   /** @hide Internal callback for handling focus when typeahead toggle button clicked. */
   onClickTypeaheadToggleButton?: () => void;
+  /** @hide Internal ref for the select toggle */
+  innerRef?: React.Ref<any>;
 }
 
-export class SelectToggle extends React.Component<SelectToggleProps> {
+class SelectToggleBase extends React.Component<SelectToggleProps> {
   static displayName = 'SelectToggle';
   private toggle: React.RefObject<HTMLDivElement> | React.RefObject<HTMLButtonElement>;
 
@@ -88,7 +90,11 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
     super(props);
     const { variant } = props;
     const isTypeahead = variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti;
-    this.toggle = isTypeahead ? React.createRef<HTMLDivElement>() : React.createRef<HTMLButtonElement>();
+    if (this.props.innerRef) {
+      this.toggle = this.props.innerRef as React.RefObject<HTMLButtonElement> | React.RefObject<HTMLDivElement>;
+    } else {
+      this.toggle = isTypeahead ? React.createRef<HTMLDivElement>() : React.createRef<HTMLButtonElement>();
+    }
   }
 
   componentDidMount() {
@@ -265,6 +271,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
       hasFooter,
       footerRef,
       toggleIndicator,
+      innerRef,
       ...props
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
@@ -363,3 +370,7 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
     );
   }
 }
+
+export const SelectToggle = React.forwardRef((props: SelectToggleProps, ref: React.Ref<any>) => (
+  <SelectToggleBase innerRef={ref} {...props} />
+));

package/src/components/Select/examples/Select.md

@@ -31,6 +31,8 @@ class SingleSelectInput extends React.Component {
       <SelectOption key={7} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isToggleIcon: false,
       isOpen: false,
@@ -53,6 +55,7 @@ class SingleSelectInput extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -97,6 +100,7 @@ class SingleSelectInput extends React.Component {
           Title
         </span>
         <Select
+          toggleRef={this.toggleRef}
           toggleIcon={isToggleIcon && <CubeIcon />}
           variant={SelectVariant.single}
           aria-label="Select Input"
@@ -158,6 +162,8 @@ class SingleSelectDescription extends React.Component {
       { value: 'Other', disabled: false }
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
@@ -178,6 +184,7 @@ class SingleSelectDescription extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -202,6 +209,7 @@ class SingleSelectDescription extends React.Component {
           placeholderText="Select an option"
           aria-label="Select Input with descriptions"
           onToggle={this.onToggle}
+          toggleRef={this.toggleRef}
           onSelect={this.onSelect}
           selections={selected}
           isOpen={isOpen}
@@ -238,6 +246,8 @@ class GroupedSingleSelectInput extends React.Component {
       selected: null
     };
 
+    this.toggleRef = React.createRef();
+
     this.onToggle = isOpen => {
       this.setState({
         isOpen
@@ -249,6 +259,7 @@ class GroupedSingleSelectInput extends React.Component {
         selected: selection,
         isOpen: false
       });
+      this.toggleRef.current.focus();
     };
 
     this.clearSelection = () => {
@@ -284,6 +295,7 @@ class GroupedSingleSelectInput extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           onToggle={this.onToggle}
           onSelect={this.onSelect}
           selections={selected}
@@ -319,6 +331,8 @@ class ValidatedSelect extends React.Component {
       <SelectOption key={6} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
@@ -352,6 +366,7 @@ class ValidatedSelect extends React.Component {
       this.setState({
         validated: validatedState
       });
+      this.toggleRef.current.focus();
     };
 
     this.clearSelection = () => {
@@ -372,6 +387,7 @@ class ValidatedSelect extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           placeholderText="Select an option"
           aria-label="Select Input with validation"
           onToggle={this.onToggle}
@@ -728,6 +744,8 @@ class FilteringSingleSelectInput extends React.Component {
       isInputFilterPersisted: false
     };
 
+    this.toggleRef = React.createRef();
+
     this.options = [
       <SelectGroup label="Status" key="group1">
         <SelectOption key={0} value="Running" />
@@ -749,6 +767,7 @@ class FilteringSingleSelectInput extends React.Component {
 
     this.onSelect = (event, selection) => {
       this.setState({ selected: selection, isOpen: false }), console.log('selected: ', selection);
+      this.toggleRef.current.focus();
     };
 
     this.onFilter = (_, textInput) => {
@@ -805,6 +824,7 @@ class FilteringSingleSelectInput extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           onToggle={this.onToggle}
           onSelect={this.onSelect}
           selections={selected}
@@ -2460,6 +2480,8 @@ class SelectWithFooter extends React.Component {
       <SelectOption key={7} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isToggleIcon: false,
       isOpen: false,
@@ -2482,6 +2504,7 @@ class SelectWithFooter extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -2503,6 +2526,7 @@ class SelectWithFooter extends React.Component {
         </span>
         <Select
           toggleIcon={isToggleIcon && <CubeIcon />}
+          toggleRef={this.toggleRef}
           variant={SelectVariant.single}
           aria-label="Select Input"
           onToggle={this.onToggle}
@@ -2630,6 +2654,8 @@ class SelectViewMore extends React.Component {
       <SelectOption key={6} value="Other" />
     ];
 
+    this.toggleRef = React.createRef();
+
     this.state = {
       isOpen: false,
       selected: null,
@@ -2651,6 +2677,7 @@ class SelectViewMore extends React.Component {
           isOpen: false
         });
         console.log('selected:', selection);
+        this.toggleRef.current.focus();
       }
     };
 
@@ -2686,6 +2713,7 @@ class SelectViewMore extends React.Component {
         </span>
         <Select
           variant={SelectVariant.single}
+          toggleRef={this.toggleRef}
           aria-label="Select Input"
           onToggle={this.onToggle}
           onSelect={this.onSelect}

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 */