@patternfly/react-core 5.0.0-alpha.4 → 5.0.0-alpha.41

package/src/next/components/Select/examples/SelectTypeahead.tsx

@@ -23,9 +23,9 @@ export const SelectBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('');
   const [inputValue, setInputValue] = React.useState<string>('');
-  const [filterValue, setFilterValue] = React.useState<string>('');
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
 
   const menuRef = React.useRef<HTMLDivElement>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
@@ -34,21 +34,30 @@ export const SelectBasic: React.FunctionComponent = () => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
     // Filter menu items based on the text input value when one exists
-    if (filterValue) {
+    if (inputValue) {
       newSelectOptions = initialSelectOptions.filter(menuItem =>
         String(menuItem.children)
           .toLowerCase()
-          .includes(filterValue.toLowerCase())
+          .includes(inputValue.toLowerCase())
       );
 
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
-        newSelectOptions = [{ isDisabled: true, children: 'No results found' }];
+        newSelectOptions = [
+          { isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }
+        ];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
       }
     }
 
     setSelectOptions(newSelectOptions);
-  }, [filterValue]);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
+  }, [inputValue]);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -58,18 +67,17 @@ export const SelectBasic: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
 
-    if (itemId) {
+    if (itemId && itemId !== 'no results') {
       setInputValue(itemId as string);
-      setFilterValue(itemId as string);
       setSelected(itemId as string);
     }
     setIsOpen(false);
     setFocusedItemIndex(null);
+    setActiveItem(null);
   };
 
-  const onTextInputChange = (value: string) => {
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
-    setFilterValue(value);
   };
 
   const handleMenuArrowKeys = (key: string) => {
@@ -95,36 +103,39 @@ export const SelectBasic: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
+      const focusedItem = selectOptions.filter(option => !option.isDisabled)[indexToFocus];
+      setActiveItem(`select-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter(menuItem => !menuItem.isDisabled);
+    const enabledMenuItems = selectOptions.filter(option => !option.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
     switch (event.key) {
       // Select the first available option
       case 'Enter':
-        if (isOpen) {
+        if (isOpen && focusedItem.itemId !== 'no results') {
           setInputValue(String(focusedItem.children));
           setSelected(String(focusedItem.children));
         }
 
         setIsOpen(prevIsOpen => !prevIsOpen);
         setFocusedItemIndex(null);
+        setActiveItem(null);
 
         break;
       case 'Tab':
       case 'Escape':
         setIsOpen(false);
+        setActiveItem(null);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
+        event.preventDefault();
         handleMenuArrowKeys(event.key);
         break;
-      default:
-        !isOpen && setIsOpen(true);
     }
   };
 
@@ -140,6 +151,10 @@ export const SelectBasic: React.FunctionComponent = () => {
           autoComplete="off"
           innerRef={textInputRef}
           placeholder="Select a state"
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
         />
 
         <TextInputGroupUtilities>
@@ -149,7 +164,7 @@ export const SelectBasic: React.FunctionComponent = () => {
               onClick={() => {
                 setSelected('');
                 setInputValue('');
-                setFilterValue('');
+                textInputRef?.current?.focus();
               }}
               aria-label="Clear input value"
             >
@@ -170,17 +185,17 @@ export const SelectBasic: React.FunctionComponent = () => {
       onSelect={onSelect}
       onOpenChange={() => {
         setIsOpen(false);
-        setFilterValue('');
       }}
       toggle={toggle}
     >
-      <SelectList>
+      <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
             key={option.itemId || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
             onClick={() => setSelected(option.itemId)}
+            id={`select-typeahead-${option.itemId.replace(' ', '-')}`}
             {...option}
             ref={null}
           />

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/WizardBody.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
+import { WizardContext } from './WizardContext';
+import { debounce } from '../../../helpers/util';
+import { getResizeObserver } from '../../../helpers/resizeObserver';
 
 /**
  * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
@@ -11,9 +14,13 @@ export interface WizardBodyProps {
   children: React.ReactNode | React.ReactNode[];
   /** Set to true to remove the default body padding */
   hasNoPadding?: boolean;
-  /** An aria-label to use for the wrapper element */
+  /** Adds an accessible name to the wrapper element when the content overflows and renders
+   * a scrollbar.
+   */
   'aria-label'?: string;
-  /** Sets the aria-labelledby attribute for the wrapper element */
+  /** Adds an accessible name to the wrapper element by passing the the id of one or more elements.
+   * The aria-labelledby will only be applied when the content overflows and renders a scrollbar.
+   */
   'aria-labelledby'?: string;
   /** Component used as the wrapping content container */
   component?: React.ElementType;
@@ -24,11 +31,53 @@ export const WizardBody = ({
   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, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
-  </WrapperComponent>
-);
+  component = 'div'
+}: WizardBodyProps) => {
+  const [hasScrollbar, setHasScrollbar] = React.useState(false);
+  const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
+  const wrapperRef = React.useRef(null);
+  const WrapperComponent = component;
+  const { activeStep } = React.useContext(WizardContext);
+  const defaultAriaLabel = ariaLabel || `${activeStep?.name} content`;
+
+  React.useEffect(() => {
+    const resize = () => {
+      if (wrapperRef?.current) {
+        const { offsetWidth, offsetHeight, scrollHeight } = wrapperRef.current;
+
+        if (previousWidth !== offsetWidth) {
+          setPreviousWidth(offsetWidth);
+          setHasScrollbar(offsetHeight < scrollHeight);
+        }
+      }
+    };
+
+    const handleResizeWithDelay = debounce(resize, 250);
+    let observer = () => {};
+
+    if (wrapperRef?.current) {
+      observer = getResizeObserver(wrapperRef.current, handleResizeWithDelay);
+      const { offsetHeight, scrollHeight } = wrapperRef.current;
+
+      setHasScrollbar(offsetHeight < scrollHeight);
+      setPreviousWidth((wrapperRef.current as HTMLElement).offsetWidth);
+    }
+
+    return () => {
+      observer();
+    };
+  }, []);
+
+  return (
+    <WrapperComponent
+      ref={wrapperRef}
+      {...(component === 'div' && hasScrollbar && { role: 'region' })}
+      {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
+      className={css(styles.wizardMain)}
+    >
+      <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
+    </WrapperComponent>
+  );
+};
 
 WizardBody.displayName = 'WizardBody';

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

@@ -1,22 +1,21 @@
 import React from 'react';
 
-import { isCustomWizardFooter, WizardControlStep, WizardFooterType } from './types';
-import { getActiveStep } from './utils';
+import { isCustomWizardFooter, isWizardSubStep, WizardStepType, WizardFooterType } from './types';
 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 +25,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> = ({
@@ -58,29 +61,24 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   goToStepByName,
   goToStepByIndex
 }) => {
-  const [currentSteps, setCurrentSteps] = React.useState(initialSteps);
-  const [currentFooter, setCurrentFooter] = React.useState(
-    typeof initialFooter !== 'function' ? initialFooter : undefined
-  );
+  const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
+  const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
   // 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
-        };
-      }),
+      currentSteps.map((currentStepProps, index) => ({
+        ...currentStepProps,
+        ...initialSteps[index]
+      })),
     [initialSteps, currentSteps]
   );
-  const activeStep = getActiveStep(steps, activeStepIndex);
 
-  const goToNextStep = React.useCallback(() => onNext(steps), [onNext, steps]);
-  const goToPrevStep = React.useCallback(() => onBack(steps), [onBack, steps]);
+  const activeStep = React.useMemo(() => steps.find(step => step.index === activeStepIndex), [activeStepIndex, 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 +87,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 +96,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 +125,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 */