@patternfly/react-core 4.255.1 → 4.256.0

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

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { WizardNavItemType } from './types';
-import { WizardBody, WizardBodyProps } from './WizardBody';
-import { useWizardFooter } from './hooks/useWizardFooter';
+import { WizardBodyProps } from './WizardBody';
 import { useWizardContext } from './WizardContext';
 import { WizardFooterProps } from './WizardFooter';
 
@@ -23,8 +22,6 @@ export interface WizardStepProps {
   steps?: React.ReactElement<WizardStepProps>[];
   /** Flag to disable the step's navigation item */
   isDisabled?: boolean;
-  /** Flag to represent whether the step has been visited (navigated to) */
-  isVisited?: boolean;
   /** Flag to determine whether the step is hidden */
   isHidden?: boolean;
   /** Replaces the step's navigation item or its properties. */
@@ -35,34 +32,26 @@ export interface WizardStepProps {
   status?: 'default' | 'error';
 }
 
-export const WizardStep = ({ children, body, id, footer, isHidden, isDisabled, navItem, status }: WizardStepProps) => {
-  const { currentStep, setStep, toggleStep } = useWizardContext();
+export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepProps) => {
+  const { activeStep, setStep } = useWizardContext();
+  const { id, name, body, isDisabled, isHidden, navItem, footer, status } = props;
 
-  useWizardFooter(footer, id);
-
-  // Update the controlled step when a change is detected with select properties
-  React.useEffect(() => {
-    if (currentStep?.id === id && (isDisabled || navItem || status || !currentStep?.isVisited)) {
-      setStep({
-        id,
-        ...(isDisabled && { isDisabled }),
-        ...(navItem && { navItem }),
-        ...(status && { status }),
-        // When the current step is active and isn't visited, set as isVisited
-        ...(!currentStep?.isVisited && { isVisited: true })
-      });
-    }
-  }, [id, setStep, currentStep?.id, isDisabled, navItem, status, currentStep?.isVisited]);
-
-  // Toggle visibility when the isHidden flag updates.
-  // Wizard's hasUnmountedSteps prop must be set to false for visibility changes to take effect.
+  // Update step in context when props change or when the step is active has yet to be marked as visited.
   React.useEffect(() => {
-    if (isHidden !== undefined) {
-      toggleStep(id, isHidden);
-    }
-  }, [toggleStep, id, isHidden]);
-
-  return body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
+    setStep({
+      id,
+      name,
+      ...(body && { body }),
+      ...(isDisabled && { isDisabled }),
+      ...(isHidden && { isHidden }),
+      ...(navItem && { navItem }),
+      ...(footer && { footer }),
+      ...(status && { status }),
+      ...(id === activeStep?.id && !activeStep?.isVisited && { isVisited: true })
+    });
+  }, [body, footer, id, isDisabled, isHidden, name, navItem, status, activeStep?.id, activeStep?.isVisited, setStep]);
+
+  return <>{children}</>;
 };
 
 WizardStep.displayName = 'WizardStep';

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

@@ -6,7 +6,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 import { KeyTypes } from '../../../helpers/constants';
-import { WizardNavProps } from '../Wizard';
+import { WizardNavProps, WizardBody, WizardStep, WizardStepProps } from '../Wizard';
 import { WizardControlStep, isWizardSubStep } from './types';
 
 /**
@@ -17,15 +17,13 @@ export interface WizardToggleProps {
   /** List of steps and/or sub-steps */
   steps: WizardControlStep[];
   /** The current step */
-  currentStep: WizardControlStep;
+  activeStep: WizardControlStep;
   /** Wizard footer */
   footer: React.ReactElement;
   /** Wizard navigation */
   nav: React.ReactElement<WizardNavProps>;
   /** The expandable dropdown button's aria-label */
   'aria-label'?: string;
-  /** Flag to unmount inactive steps instead of hiding. Defaults to true */
-  hasUnmountedSteps?: boolean;
   /** Flag to determine whether the dropdown navigation is expanded */
   isNavExpanded?: boolean;
   /** Callback to expand or collapse the dropdown navigation */
@@ -34,25 +32,24 @@ export interface WizardToggleProps {
 
 export const WizardToggle = ({
   steps,
-  currentStep,
+  activeStep,
   footer,
   nav,
   isNavExpanded,
   toggleNavExpanded,
-  hasUnmountedSteps = true,
   'aria-label': ariaLabel = 'Wizard toggle'
 }: WizardToggleProps) => {
-  const isActiveSubStep = isWizardSubStep(currentStep);
+  const isActiveSubStep = isWizardSubStep(activeStep);
   const nonSubSteps = steps.filter(step => !isWizardSubStep(step));
   const wizardToggleIndex =
     nonSubSteps.indexOf(
-      isWizardSubStep(currentStep) ? steps.find(step => step.id === currentStep.parentId) : currentStep
+      isWizardSubStep(activeStep) ? steps.find(step => step.id === activeStep.parentId) : activeStep
     ) + 1;
 
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
       if (isNavExpanded && event.key === KeyTypes.Escape) {
-        toggleNavExpanded();
+        toggleNavExpanded?.();
       }
     },
     [isNavExpanded, toggleNavExpanded]
@@ -68,20 +65,21 @@ export const WizardToggle = ({
     };
   }, [handleKeyClicks]);
 
-  // Only render the current step when hasUnmountedSteps is true
-  const bodyContent = hasUnmountedSteps
-    ? currentStep?.component
-    : steps.map(step => {
-        if (currentStep?.name === step.name) {
-          return step.component;
-        }
+  const bodyContent = steps.map(step => {
+    const props: WizardStepProps = step.component?.props || {};
+    const { children, body, ...propsWithoutChildren } = props;
 
-        return (
-          <div key={step.id} style={{ display: 'none' }}>
-            {step.component}
-          </div>
-        );
-      });
+    return (
+      <React.Fragment key={step.id}>
+        {activeStep?.name === step.name &&
+          (body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : children)}
+
+        <div key={step.id} style={{ display: 'none' }}>
+          <WizardStep {...propsWithoutChildren} />
+        </div>
+      </React.Fragment>
+    );
+  });
 
   return (
     <>
@@ -93,10 +91,10 @@ export const WizardToggle = ({
       >
         <span className={css(styles.wizardToggleList)}>
           <span className={css(styles.wizardToggleListItem)}>
-            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span> {currentStep?.name}
+            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span> {activeStep?.name}
             {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
           </span>
-          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{currentStep?.name}</span>}
+          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
         </span>
 
         <span className={css(styles.wizardToggleIcon)}>

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

@@ -111,7 +111,7 @@ test('renders default nav with custom props', () => {
 
   expect(navElement).toBeVisible();
   expect(navElement).toHaveAttribute('aria-labelledby', 'wizard-id');
-  expect(screen.getByRole('button', { name: 'Test step 1' }).parentElement).toHaveClass('pf-m-expandable');
+  expect(screen.getByRole('button', { name: 'Test step 1, visited' }).parentElement).toHaveClass('pf-m-expandable');
   expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
 });
 
@@ -297,23 +297,3 @@ test('unmounts inactive steps by default', async () => {
   expect(screen.queryByText('Step 1 content')).toBeNull();
   expect(screen.getByText('Step 2 content')).toBeVisible();
 });
-
-test('keeps inactive steps mounted when hasUnmountedSteps is enabled', async () => {
-  const user = userEvent.setup();
-
-  render(
-    <Wizard hasUnmountedSteps={false}>
-      <WizardStep id="step-1" name="Test step 1">
-        Step 1 content
-      </WizardStep>
-      <WizardStep id="step-2" name="Test step 2">
-        Step 2 content
-      </WizardStep>
-    </Wizard>
-  );
-
-  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-
-  expect(screen.getByText('Step 1 content')).toBeInTheDocument();
-  expect(screen.getByText('Step 2 content')).toBeVisible();
-});

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

@@ -15,8 +15,8 @@ test('has no padding className when hasNoBodyPadding is not specified', () => {
   expect(screen.getByText('content')).not.toHaveClass('pf-m-no-padding');
 });
 
-test('has padding className when hasNoBodyPadding is specified', () => {
-  render(<WizardBody hasNoBodyPadding>content</WizardBody>);
+test('has padding className when hasNoPadding is specified', () => {
+  render(<WizardBody hasNoPadding>content</WizardBody>);
   expect(screen.getByText('content')).toHaveClass('pf-m-no-padding');
 });
 

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

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { WizardFooter, WizardFooterProps } from '../WizardFooter';
 
 const defaultProps: WizardFooterProps = {
-  currentStep: { name: 'Step name', id: 'some-id' },
+  activeStep: { name: 'Step name', id: 'some-id', index: 1 },
   onNext: jest.fn(),
   onBack: jest.fn(),
   onClose: jest.fn()
@@ -70,19 +70,19 @@ test('has disabled back button when isBackDisabled is enabled', () => {
   expect(screen.getByRole('button', { name: 'Back' })).toHaveAttribute('disabled');
 });
 
-test('uses currentStep footer properties when specified', () => {
+test('uses activeStep footer properties when specified', () => {
   render(
-    <WizardFooter {...defaultProps} currentStep={{ ...defaultProps.currentStep, footer: { isBackHidden: true } }} />
+    <WizardFooter {...defaultProps} activeStep={{ ...defaultProps.activeStep, footer: { isBackHidden: true } }} />
   );
   expect(screen.queryByRole('button', { name: 'Back' })).toBeNull();
 });
 
-test(`currentStep footer properties take precendence over WizardFooter's`, () => {
+test(`activeStep footer properties take precendence over WizardFooter's`, () => {
   render(
     <WizardFooter
       {...defaultProps}
       nextButtonText="Footer next"
-      currentStep={{ ...defaultProps.currentStep, footer: { nextButtonText: 'Active step next' } }}
+      activeStep={{ ...defaultProps.activeStep, footer: { nextButtonText: 'Active step next' } }}
     />
   );
   expect(screen.queryByRole('button', { name: 'Footer next' })).toBeNull();

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

@@ -2,20 +2,27 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { WizardStep } from '../WizardStep';
-import * as useWizardFooter from '../hooks/useWizardFooter';
+import { WizardStep, WizardStepProps } from '../WizardStep';
 import * as WizardContext from '../WizardContext';
-import { WizardStepProps } from '..';
+import { WizardControlStep } from '..';
 
-const testStep: WizardStepProps = {
+const testStepProps: WizardStepProps = {
   id: 'test-step',
   name: 'Test step',
   footer: <>Step footer</>
 };
+
+const testStep: WizardControlStep = {
+  ...testStepProps,
+  index: 1
+};
+
+const setStep = jest.fn();
+
 const wizardContext: WizardContext.WizardContextProps = {
+  setStep,
   steps: [testStep],
-  currentStep: testStep,
-  currentStepIndex: 1,
+  activeStep: testStep,
   footer: <>Wizard footer</>,
   onNext: jest.fn(),
   onBack: jest.fn(),
@@ -25,11 +32,14 @@ const wizardContext: WizardContext.WizardContextProps = {
   goToStepByIndex: jest.fn(),
   setFooter: jest.fn(),
   getStep: jest.fn(),
-  setStep: jest.fn(),
-  toggleStep: jest.fn()
+  setSteps: jest.fn()
 };
+
 const useWizardContextSpy = jest.spyOn(WizardContext, 'useWizardContext');
-const useWizardFooterSpy = jest.spyOn(useWizardFooter, 'useWizardFooter');
+
+beforeEach(() => {
+  useWizardContextSpy.mockReturnValue(wizardContext);
+});
 
 test('renders without children', () => {
   const { container } = render(<WizardStep id="test-step" name="Test step" />);
@@ -51,83 +61,19 @@ test('excludes WizardBody when body is set to null', () => {
   expect(screen.queryByRole('main')).toBeNull();
 });
 
-test('uses body props for WizardBody when passed', () => {
-  render(
-    <WizardStep id="test-step" name="Test step" body={{ 'aria-label': 'Some label' }}>
-      content
-    </WizardStep>
-  );
-
-  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 });
+  expect(setStep).toHaveBeenCalledWith({ ...testStepProps, 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 });
+  expect(setStep).toHaveBeenCalledWith({ ...testStepProps, 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();
+  expect(setStep).toHaveBeenCalledWith({ ...testStepProps, status: 'error', isVisited: true });
 });

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

@@ -5,20 +5,23 @@ import userEvent from '@testing-library/user-event';
 
 import { KeyTypes } from '../../../../helpers';
 import { WizardToggle, WizardToggleProps } from '../WizardToggle';
+import { WizardControlStep } from '../types';
 
-const steps = [
-  { id: 'id-1', name: 'First step', component: <>First step content</> },
-  { id: 'id-2', name: 'Second step', component: <>Second step content</> }
+const steps: WizardControlStep[] = [
+  { id: 'id-1', name: 'First step', index: 1, component: <>First step content</> },
+  { id: 'id-2', name: 'Second step', index: 2, component: <>Second step content</> }
 ];
 
 const defaultProps: WizardToggleProps = {
   steps,
-  currentStep: steps[0],
+  activeStep: steps[0],
   footer: <div>Some footer</div>,
   nav: <div>Some nav</div>,
   'aria-label': 'Some label'
 };
 
+jest.mock('../WizardStep', () => ({ WizardStep: () => <div>step stub</div> }));
+
 test('renders provided footer, nav, and current step content', () => {
   render(<WizardToggle {...defaultProps} />);
 
@@ -58,13 +61,6 @@ test('renders only the active step content by default', async () => {
   expect(screen.queryByText('Second step content')).toBeNull;
 });
 
-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();
-});
-
 test('has expanded properties when the toggle dropdown button is clicked', async () => {
   const user = userEvent.setup();
 

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

@@ -9,7 +9,7 @@ describe('buildSteps', () => {
     try {
       buildSteps(<div />);
     } catch (error) {
-      expect(error.message).toEqual('Wizard only accepts children of type WizardStep');
+      expect(error.message).toEqual('Wizard only accepts children with required WizardStepProps.');
     }
   });
 
@@ -17,7 +17,7 @@ describe('buildSteps', () => {
     try {
       buildSteps('test' as any);
     } catch (error) {
-      expect(error.message).toEqual('Wizard only accepts children of type WizardStep');
+      expect(error.message).toEqual('Wizard only accepts children with required WizardStepProps.');
     }
   });
 
@@ -57,7 +57,7 @@ describe('buildSteps', () => {
         ]}
       />
     );
-    const [subStep, customSubStep, parentStep] = buildSteps(component);
+    const [parentStep, subStep, customSubStep] = buildSteps(component);
 
     expect((subStep as WizardSubStep).parentId).toEqual('step-1');
     expect((customSubStep as WizardSubStep).parentId).toEqual('step-1');

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

@@ -68,7 +68,7 @@ The `Wizard`'s `nav` property can be used to build your own navigation.
 export type CustomWizardNavFunction = (
   isExpanded: boolean,
   steps: WizardControlStep[],
-  currentStep: WizardControlStep,
+  activeStep: WizardControlStep,
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavProps>;
 
@@ -110,7 +110,7 @@ The `WizardStep`'s `navItem` property can be used to build your own nav item for
 /** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navItem. */
 export type CustomWizardNavItemFunction = (
   step: WizardControlStep,
-  currentStep: WizardControlStep,
+  activeStep: WizardControlStep,
   steps: WizardControlStep[],
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavItemProps>;
@@ -129,8 +129,8 @@ Used to access any property of [WizardContext](#wizardcontextprops):
 import { useWizardContext } from '@patternfly/react-core/next';
 
 const StepContent = () => {
-  const { currentStep } = useWizardContext();
-  return <>This is the current step: {currentStep}</>;
+  const { activeStep } = useWizardContext();
+  return <>This is the current step: {activeStep}</>;
 }
 ```
 

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

@@ -12,18 +12,18 @@ export const WizardCustomNav: React.FunctionComponent = () => {
   const nav: CustomWizardNavFunction = (
     isExpanded: boolean,
     steps: WizardControlStep[],
-    currentStep: WizardControlStep,
+    activeStep: WizardControlStep,
     goToStepByIndex: (index: number) => void
   ) => (
     <WizardNav isExpanded={isExpanded}>
-      {steps.map((step, index) => (
+      {steps.map(step => (
         <WizardNavItem
           key={step.id}
           id={step.id}
           content={step.name}
-          isCurrent={currentStep.id === step.id}
+          isCurrent={activeStep.id === step.id}
           isDisabled={step.isDisabled}
-          stepIndex={index + 1}
+          stepIndex={step.index}
           onNavItemClick={goToStepByIndex}
         />
       ))}