@patternfly/react-core 4.248.0 → 4.250.0

package/src/next/components/Wizard/__tests__/WizardStep.test.tsx

@@ -1,6 +1,35 @@
 import React from 'react';
+
 import { render, screen } from '@testing-library/react';
+
 import { WizardStep } from '../WizardStep';
+import * as useWizardFooter from '../hooks/useWizardFooter';
+import * as WizardContext from '../WizardContext';
+import { WizardStepProps } from '..';
+
+const testStep: WizardStepProps = {
+  id: 'test-step',
+  name: 'Test step',
+  footer: <>Step footer</>
+};
+const wizardContext: WizardContext.WizardContextProps = {
+  steps: [testStep],
+  currentStep: testStep,
+  currentStepIndex: 1,
+  footer: <>Wizard footer</>,
+  onNext: jest.fn(),
+  onBack: jest.fn(),
+  onClose: jest.fn(),
+  goToStepById: jest.fn(),
+  goToStepByName: jest.fn(),
+  goToStepByIndex: jest.fn(),
+  setFooter: jest.fn(),
+  getStep: jest.fn(),
+  setStep: jest.fn(),
+  toggleStep: jest.fn()
+};
+const useWizardContextSpy = jest.spyOn(WizardContext, 'useWizardContext');
+const useWizardFooterSpy = jest.spyOn(useWizardFooter, 'useWizardFooter');
 
 test('renders without children', () => {
   const { container } = render(<WizardStep id="test-step" name="Test step" />);
@@ -31,3 +60,74 @@ test('uses body props for WizardBody when passed', () => {
 
   expect(screen.getByLabelText('Some label')).toBeVisible();
 });
+
+test('calls useWizardFooter', () => {
+  useWizardContextSpy.mockReturnValueOnce(wizardContext);
+
+  render(<WizardStep {...testStep}>content</WizardStep>);
+  expect(useWizardFooterSpy).toHaveBeenCalledWith(testStep.footer, 'test-step');
+});
+
+test('updates "isDisabled" in context when the value changes', () => {
+  const setStep = jest.fn();
+  useWizardContextSpy.mockReturnValueOnce({ ...wizardContext, setStep });
+
+  render(<WizardStep {...testStep} isDisabled />);
+
+  expect(setStep).toHaveBeenCalledWith({ id: testStep.id, isDisabled: true, isVisited: true });
+});
+
+test('updates "navItem" in context when the value changes', () => {
+  const setStep = jest.fn();
+  const testNavItem = <>Some nav item</>;
+  useWizardContextSpy.mockReturnValueOnce({ ...wizardContext, setStep });
+
+  render(<WizardStep {...testStep} navItem={testNavItem} />);
+
+  expect(setStep).toHaveBeenCalledWith({ id: testStep.id, navItem: testNavItem, isVisited: true });
+});
+
+test('updates "status" in context when the value changes', () => {
+  const setStep = jest.fn();
+  useWizardContextSpy.mockReturnValueOnce({ ...wizardContext, setStep });
+
+  render(<WizardStep {...testStep} status="error" />);
+
+  expect(setStep).toHaveBeenCalledWith({ id: testStep.id, status: 'error', isVisited: true });
+});
+
+test('calls "toggleStep" when isHidden value changes and the previous value was not undefined', () => {
+  const toggleStep = jest.fn();
+  useWizardContextSpy.mockReturnValueOnce({ ...wizardContext, toggleStep });
+
+  render(<WizardStep {...testStep} isHidden />);
+
+  expect(toggleStep).toHaveBeenCalledWith(testStep.id, true);
+});
+
+test('does not call "toggleStep" when isHidden value changes and was previously undefined', () => {
+  const toggleStep = jest.fn();
+  useWizardContextSpy.mockReturnValueOnce({
+    ...wizardContext,
+    toggleStep
+  });
+
+  render(<WizardStep {...testStep} isHidden={undefined} />);
+
+  expect(toggleStep).not.toHaveBeenCalled();
+});
+
+test('does not update "isVisited" value in context when the step was previously visited', () => {
+  const setStep = jest.fn();
+  const visitedTestStep = { ...testStep, isVisited: true };
+  useWizardContextSpy.mockReturnValueOnce({
+    ...wizardContext,
+    currentStep: visitedTestStep,
+    steps: [visitedTestStep],
+    setStep
+  });
+
+  render(<WizardStep {...visitedTestStep} />);
+
+  expect(setStep).not.toHaveBeenCalled();
+});

package/src/next/components/Wizard/__tests__/WizardToggle.test.tsx

@@ -13,13 +13,13 @@ const steps = [
 
 const defaultProps: WizardToggleProps = {
   steps,
-  activeStep: steps[0],
+  currentStep: steps[0],
   footer: <div>Some footer</div>,
   nav: <div>Some nav</div>,
   'aria-label': 'Some label'
 };
 
-test('renders provided footer, nav, and active step content', () => {
+test('renders provided footer, nav, and current step content', () => {
   render(<WizardToggle {...defaultProps} />);
 
   expect(screen.getByText('Some footer')).toBeVisible();
@@ -58,8 +58,8 @@ test('renders only the active step content by default', async () => {
   expect(screen.queryByText('Second step content')).toBeNull;
 });
 
-test('renders all step content when unmountInactiveSteps is false', async () => {
-  render(<WizardToggle {...defaultProps} unmountInactiveSteps={false} />);
+test('renders all step content when hasUnmountedSteps is false', async () => {
+  render(<WizardToggle {...defaultProps} hasUnmountedSteps={false} />);
 
   expect(screen.getByText('First step content')).toBeInTheDocument();
   expect(screen.getByText('Second step content')).toBeInTheDocument();

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

@@ -16,8 +16,7 @@ propComponents:
     'WizardBasicStep',
     'WizardParentStep',
     'WizardSubStep',
-    'DefaultWizardNavProps',
-    'DefaultWizardFooterProps',
+    'WizardNavStepData',
   ]
 beta: true
 ---
@@ -28,7 +27,9 @@ TextInput,
 Drawer,
 DrawerContent,
 Button,
+Title,
 Flex,
+Checkbox,
 DrawerPanelContent,
 DrawerColorVariant,
 DrawerHead,
@@ -38,6 +39,7 @@ DrawerCloseButton
 import {
 Wizard,
 WizardFooter,
+WizardFooterWrapper,
 WizardToggle,
 WizardStep,
 WizardBody,
@@ -66,7 +68,7 @@ The `Wizard`'s `nav` property can be used to build your own navigation.
 export type CustomWizardNavFunction = (
   isExpanded: boolean,
   steps: WizardControlStep[],
-  activeStep: WizardControlStep,
+  currentStep: WizardControlStep,
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavProps>;
 
@@ -79,9 +81,18 @@ type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
 
 ### Kitchen sink
 
-Includes a header, custom footer, sub-steps, step content with a drawer, custom nav item, and nav prevention until step visitation.
+Includes the following:
 
-Custom operations when navigating between steps can be achieved by utilizing `onNext`, `onBack` or `onNavByIndex` properties whose callback functions return the 'id' and 'name' of the currently focused step (currentStep), and the previously focused step (previousStep).
+- Header
+- Custom footer
+- Sub-steps
+- Step content with a drawer
+- Custom navigation item
+- Disabled navigation items until visited
+- Action to toggle visibility of a step
+- Action to toggle navigation item error status
+
+Custom operations when navigating between steps can be achieved by utilizing `onNext`, `onBack`, or `onNavByIndex` properties whose callback functions return the 'id' and 'name' of the currently focused step (currentStep), and the previously focused step (previousStep).
 
 ```noLive
 /** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
@@ -91,33 +102,47 @@ type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: Wiza
 type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
 ```
 
+#
+
+The `WizardStep`'s `navItem` property can be used to build your own nav item for that step.
+
+```noLive
+/** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navItem. */
+export type CustomWizardNavItemFunction = (
+  step: WizardControlStep,
+  currentStep: WizardControlStep,
+  steps: WizardControlStep[],
+  goToStepByIndex: (index: number) => void
+) => React.ReactElement<WizardNavItemProps>;
+```
+
 ```ts file="./WizardKitchenSink.tsx"
 ```
 
 ## Hooks
 
-### useWizardFooter
+### useWizardContext
 
-Used to set a unique footer for the wizard on any given step. See step 3 of [Kitchen sink](#kitchen-sink) for a live example.
+Used to access any property of [WizardContext](#wizardcontextprops):
 
 ```noLive
-import { useWizardFooter } from '@patternfly/react-core/next';
+import { useWizardContext } from '@patternfly/react-core/next';
 
 const StepContent = () => {
-  useWizardFooter(<>Some footer</>);
-  return <>Step content</>;
+  const { currentStep } = useWizardContext();
+  return <>This is the current step: {currentStep}</>;
 }
 ```
 
-### useWizardContext
+### useWizardFooter
 
-Used to access any property of [WizardContext](#wizardcontextprops):
+Used to set a unique footer for the wizard on any given step. See step 3 of [Kitchen sink](#kitchen-sink) for a live example.
 
 ```noLive
-import { useWizardContext } from '@patternfly/react-core/next';
+import { useWizardFooter } from '@patternfly/react-core/next';
 
 const StepContent = () => {
-  const { activeStep } = useWizardContext();
-  return <>This is the active step: {activeStep}</>;
+  useWizardFooter(<>Some footer</>);
+  return <>Step content</>;
 }
 ```

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

@@ -13,9 +13,9 @@ export const WizardBasic: React.FunctionComponent = () => (
       <p>Step 3 content</p>
     </WizardStep>
     <WizardStep name="Fourth step" id="basic-fourth-step">
-      <p>Step 4 content</p>{' '}
+      <p>Step 4 content</p>
     </WizardStep>
-    <WizardStep name="Review" id="basic-review-step" nextButtonText="Finish">
+    <WizardStep name="Review" id="basic-review-step" footer={{ nextButtonText: 'Finish' }}>
       <p>Review step content</p>
     </WizardStep>
   </Wizard>

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

@@ -12,7 +12,7 @@ export const WizardCustomNav: React.FunctionComponent = () => {
   const nav: CustomWizardNavFunction = (
     isExpanded: boolean,
     steps: WizardControlStep[],
-    activeStep: WizardControlStep,
+    currentStep: WizardControlStep,
     goToStepByIndex: (index: number) => void
   ) => (
     <WizardNav isExpanded={isExpanded}>
@@ -21,9 +21,9 @@ export const WizardCustomNav: React.FunctionComponent = () => {
           key={step.id}
           id={step.id}
           content={step.name}
-          isCurrent={activeStep.id === step.id}
+          isCurrent={currentStep.id === step.id}
           isDisabled={step.isDisabled}
-          step={index + 1}
+          stepIndex={index + 1}
           onNavItemClick={goToStepByIndex}
         />
       ))}
@@ -38,7 +38,7 @@ export const WizardCustomNav: React.FunctionComponent = () => {
       <WizardStep name="Second step" id="cnav-second-step">
         <p>Step 2 content</p>
       </WizardStep>
-      <WizardStep name="Review" id="cnav-review-step" nextButtonText="Wrap it up">
+      <WizardStep name="Review" id="cnav-review-step" footer={{ nextButtonText: 'Wrap it up' }}>
         <p>Review step content</p>
       </WizardStep>
     </Wizard>

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

@@ -11,7 +11,8 @@ import {
   DrawerColorVariant,
   DrawerHead,
   DrawerActions,
-  DrawerCloseButton
+  DrawerCloseButton,
+  Checkbox
 } from '@patternfly/react-core';
 import {
   Wizard,
@@ -19,32 +20,55 @@ import {
   WizardBody,
   WizardFooter,
   WizardStepProps,
-  WizardControlStep,
-  useWizardFooter,
   useWizardContext,
   WizardNavStepFunction,
   WizardNavStepData,
   WizardNavItem,
-  WizardHeader
+  WizardHeader,
+  WizardFooterWrapper,
+  WizardNavItemType
 } from '@patternfly/react-core/next';
 
-const CustomWizardFooter = () => {
-  const { activeStep, onNext, onBack, onClose } = useWizardContext();
-  return <WizardFooter activeStep={activeStep} onNext={onNext} onBack={onBack} onClose={onClose} />;
+const StepId = {
+  StepOne: 'sink-step-1',
+  StepTwo: 'sink-step-2',
+  StepTwoSubOne: 'sink-step-2-1',
+  StepTwoSubTwo: 'sink-step-2-2',
+  StepThree: 'sink-step-3',
+  StepFour: 'sink-step-4',
+  ReviewStep: 'sink-review-step'
+};
+
+interface SomeContextProps {
+  isToggleStepChecked: boolean;
+  errorMessage: string | undefined;
+  setIsToggleStepChecked(isHidden: boolean): void;
+  setErrorMessage(error: string | undefined): void;
+}
+
+const SomeContext = React.createContext({} as SomeContextProps);
+
+const SomeContextProvider = ({ children }) => {
+  const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState<string>();
+
+  return (
+    <SomeContext.Provider value={{ isToggleStepChecked, errorMessage, setIsToggleStepChecked, setErrorMessage }}>
+      {children}
+    </SomeContext.Provider>
+  );
 };
 
-const CustomNavItem = () => {
-  const { steps, activeStep, goToStepByIndex } = useWizardContext();
-  const step = (steps.find(step => step.id === 'third-step') || {}) as WizardControlStep;
+const CustomWizardFooter = () => {
+  const { currentStep, currentStepIndex, onNext, onBack, onClose } = useWizardContext();
 
   return (
-    <WizardNavItem
-      id={step.id}
-      content={<span style={{ color: 'var(--pf-global--default-color--200)' }}>Custom item</span>}
-      isCurrent={activeStep.id === step.id}
-      step={steps.indexOf(step) + 1}
-      isDisabled={step.isDisabled || !step.visited}
-      onNavItemClick={goToStepByIndex}
+    <WizardFooter
+      currentStep={currentStep}
+      onNext={onNext}
+      onBack={onBack}
+      onClose={onClose}
+      isBackDisabled={currentStepIndex === 1}
     />
   );
 };
@@ -84,7 +108,7 @@ const StepContentWithDrawer = () => {
   );
 };
 
-const StepWithCustomFooter = () => {
+const StepWithCustomFooter = (props: WizardStepProps) => {
   const { onNext: goToNextStep, onBack, onClose } = useWizardContext();
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -98,7 +122,7 @@ const StepWithCustomFooter = () => {
 
   const footer = React.useMemo(
     () => (
-      <>
+      <WizardFooterWrapper>
         <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
           Async Next
         </Button>
@@ -108,55 +132,97 @@ const StepWithCustomFooter = () => {
         <Button variant="link" onClick={onClose}>
           Cancel
         </Button>
-      </>
+      </WizardFooterWrapper>
     ),
-    [isLoading, onBack, onClose, goToNextStep]
+    [goToNextStep, isLoading, onBack, onClose]
   );
-  useWizardFooter(footer);
 
-  return <>Step 3 content w/ custom async footer</>;
+  return (
+    <WizardStep {...props} footer={footer}>
+      Step 3 content w/ custom async footer
+    </WizardStep>
+  );
 };
 
-const CustomStepFour = (props: WizardStepProps) => <div {...props} id={props.id.toString()} />;
+const StepWithContextActions = (props: WizardStepProps) => {
+  const { isToggleStepChecked, errorMessage, setIsToggleStepChecked, setErrorMessage } = React.useContext(SomeContext);
 
-export const WizardKitchenSink: React.FunctionComponent = () => {
-  const onNext: WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => {
-    // eslint-disable-next-line no-console
-    console.log('currentStep: ', currentStep, '\n previousStep: ', previousStep);
-  };
+  const navItem: WizardNavItemType = React.useCallback(
+    (step, currentStep, steps, goToStepByIndex) => (
+      <WizardNavItem
+        id={step.id}
+        content={step.name}
+        isCurrent={currentStep.id === step.id}
+        stepIndex={steps.indexOf(step) + 1}
+        isDisabled={step.isDisabled || !step.isVisited}
+        isVisited={step.isVisited}
+        onNavItemClick={goToStepByIndex}
+        status={errorMessage ? 'error' : 'default'}
+      />
+    ),
+    [errorMessage]
+  );
 
   return (
-    <Wizard
-      height={400}
-      header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
-      footer={<CustomWizardFooter />}
-      nav={{ forceStepVisit: true, isExpandable: true }}
-      onNext={onNext}
-    >
-      <WizardStep id="sink-first-step" name="First step" body={null}>
-        <StepContentWithDrawer />
-      </WizardStep>
-      <WizardStep
-        id="sink-second-step"
-        name="Second step"
-        steps={[
-          <WizardStep id="sink-sub-step-one" key="substep-one" name="Substep 1">
-            Substep 1 content
-          </WizardStep>,
-          <WizardStep id="sink-sub-step-two" key="substep-two" name="Substep 2">
-            Substep 2 content
-          </WizardStep>
-        ]}
+    <WizardStep {...props} navItem={navItem}>
+      <Checkbox
+        label="Give this step an error status"
+        isChecked={!!errorMessage}
+        onChange={checked => setErrorMessage(checked ? 'Some error message' : undefined)}
+        id="toggle-error-checkbox"
+        name="Toggle Error Checkbox"
+      />
+      <Checkbox
+        label="Toggle visibility of the next step"
+        isChecked={isToggleStepChecked}
+        onChange={checked => setIsToggleStepChecked(checked)}
+        id="toggle-hide-step-checkbox"
+        name="Toggle Hide Step Checkbox"
       />
-      <WizardStep id="sink-third-step" name="Third step" navItem={<CustomNavItem />}>
-        <StepWithCustomFooter />
-      </WizardStep>
-      <CustomStepFour id="sink-fourth-step" name="Fourth step">
-        <WizardBody>Step 4 content</WizardBody>
-      </CustomStepFour>
-      <WizardStep id="sink-review-step" name="Review" nextButtonText="Submit">
-        Review step content
-      </WizardStep>
-    </Wizard>
+    </WizardStep>
+  );
+};
+
+const StepToHide = (props: WizardStepProps) => {
+  const { isToggleStepChecked } = React.useContext(SomeContext);
+  return <WizardStep {...props} isHidden={isToggleStepChecked} />;
+};
+
+export const WizardKitchenSink: React.FunctionComponent = () => {
+  const onNext: WizardNavStepFunction = (_currentStep: WizardNavStepData, _previousStep: WizardNavStepData) => {};
+
+  return (
+    <SomeContextProvider>
+      <Wizard
+        height={400}
+        header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
+        footer={<CustomWizardFooter />}
+        isStepVisitRequired
+        onNext={onNext}
+        hasUnmountedSteps={false}
+      >
+        <WizardStep id={StepId.StepOne} name="Step 1" body={null} status="error">
+          <StepContentWithDrawer />
+        </WizardStep>
+        <WizardStep
+          id={StepId.StepTwo}
+          name="Step 2"
+          steps={[
+            <StepWithContextActions id={StepId.StepTwoSubOne} key={StepId.StepTwoSubOne} name="Substep 1" />,
+            <StepToHide id={StepId.StepTwoSubTwo} key={StepId.StepTwoSubTwo} name="Substep 2">
+              Substep 2 content
+            </StepToHide>
+          ]}
+        />
+        <StepWithCustomFooter
+          id={StepId.StepThree}
+          name="Step 3"
+          navItem={{ content: <span style={{ color: 'var(--pf-global--default-color--200)' }}>Custom item</span> }}
+        />
+        <WizardStep id={StepId.ReviewStep} name="Review" footer={{ nextButtonText: 'Submit' }}>
+          Review step content
+        </WizardStep>
+      </Wizard>
+    </SomeContextProvider>
   );
 };

package/src/next/components/Wizard/hooks/__tests__/useWizardFooter.test.tsx

@@ -5,47 +5,36 @@ import { renderHook } from '@testing-library/react-hooks';
 import { useWizardFooter } from '../useWizardFooter';
 import * as WizardContext from '../../WizardContext';
 
-describe('useWizardFooter', () => {
-  const customFooter = <>My custom footer</>;
-  const useWizardContextSpy = jest.spyOn(WizardContext, 'useWizardContext');
-  const setFooter = jest.fn();
+const customFooter = <>My custom footer</>;
+const useWizardContextSpy = jest.spyOn(WizardContext, 'useWizardContext');
+const setFooter = jest.fn();
 
-  it('sets the footer when one is provided without a stepId', () => {
-    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+test('sets the footer when one is provided without a stepId', () => {
+  useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
 
-    renderHook(() => useWizardFooter(customFooter));
-    expect(setFooter).toHaveBeenCalledWith(customFooter);
-  });
-
-  it(`sets the footer when the provided stepId matches the activeStep's id`, () => {
-    useWizardContextSpy.mockReturnValueOnce({ setFooter, activeStep: { id: 'active-step-id' } } as any);
-
-    renderHook(() => useWizardFooter(customFooter, 'active-step-id'));
-    expect(setFooter).toHaveBeenCalledWith(customFooter);
-  });
-
-  it(`does not set the footer when the provided stepId does not match the activeStep's id`, () => {
-    useWizardContextSpy.mockReturnValueOnce({ setFooter, activeStep: { id: 'active-step-id' } } as any);
+  renderHook(() => useWizardFooter(customFooter));
+  expect(setFooter).toHaveBeenCalledWith(customFooter);
+});
 
-    renderHook(() => useWizardFooter(customFooter, 'some-other-step-id'));
-    expect(setFooter).not.toHaveBeenCalled();
-  });
+test(`sets the footer when the provided stepId matches the currentStep's id`, () => {
+  useWizardContextSpy.mockReturnValueOnce({ setFooter, currentStep: { id: 'curr-step-id' } } as any);
 
-  it('sets the footer to null on unmount', () => {
-    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+  renderHook(() => useWizardFooter(customFooter, 'curr-step-id'));
+  expect(setFooter).toHaveBeenCalledWith(customFooter);
+});
 
-    const { unmount } = renderHook(() => useWizardFooter(customFooter));
-    unmount();
+test(`does not set the footer when the provided stepId does not match the currentStep's id`, () => {
+  useWizardContextSpy.mockReturnValueOnce({ setFooter, currentStep: { id: 'curr-step-id' } } as any);
 
-    expect(setFooter).toHaveBeenCalledWith(null);
-  });
+  renderHook(() => useWizardFooter(customFooter, 'some-other-step-id'));
+  expect(setFooter).not.toHaveBeenCalled();
+});
 
-  it('sets footer with default props instead of react element', () => {
-    const footerProps = { onNext: jest.fn(), onBack: jest.fn(), onClose: jest.fn() };
-    useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
+test('sets the footer to null on unmount', () => {
+  useWizardContextSpy.mockReturnValueOnce({ setFooter } as any);
 
-    renderHook(() => useWizardFooter(footerProps));
+  const { unmount } = renderHook(() => useWizardFooter(customFooter));
+  unmount();
 
-    expect(setFooter).toHaveBeenCalledWith(footerProps);
-  });
+  expect(setFooter).toHaveBeenCalledWith(null);
 });

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

@@ -1,18 +1,18 @@
 import React from 'react';
 
-import { DefaultWizardFooterProps } from '../types';
 import { useWizardContext } from '../WizardContext';
+import { WizardFooterProps } from '../WizardFooter';
 
 /**
  * Set a unique footer for the wizard. stepId is only required if inactive steps are hidden instead of unmounted.
  * @param footer
  * @param stepId
  */
-export const useWizardFooter = (footer: DefaultWizardFooterProps | React.ReactElement, stepId?: string | number) => {
-  const { activeStep, setFooter } = useWizardContext();
+export const useWizardFooter = (footer: React.ReactElement | Partial<WizardFooterProps>, stepId?: string | number) => {
+  const { currentStep, setFooter } = useWizardContext();
 
   React.useEffect(() => {
-    if (!stepId || activeStep.id === stepId) {
+    if (footer && (!stepId || currentStep?.id === stepId)) {
       setFooter(footer);
 
       // Reset the footer on unmount.
@@ -20,5 +20,5 @@ export const useWizardFooter = (footer: DefaultWizardFooterProps | React.ReactEl
         setFooter(null);
       };
     }
-  }, [activeStep, footer, setFooter, stepId]);
+  }, [currentStep, footer, setFooter, stepId]);
 };