@patternfly/react-core 4.255.1 → 4.256.0

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

@@ -19,14 +19,11 @@ import {
   WizardStep,
   WizardBody,
   WizardFooter,
-  WizardStepProps,
   useWizardContext,
-  WizardNavStepFunction,
-  WizardNavStepData,
-  WizardNavItem,
   WizardHeader,
   WizardFooterWrapper,
-  WizardNavItemType
+  WizardNavStepFunction,
+  WizardNavStepData
 } from '@patternfly/react-core/next';
 
 const StepId = {
@@ -45,30 +42,34 @@ interface SomeContextProps {
   setIsToggleStepChecked(isHidden: boolean): void;
   setErrorMessage(error: string | undefined): void;
 }
+type SomeContextRenderProps = Pick<SomeContextProps, 'isToggleStepChecked' | 'errorMessage'>;
+interface SomeContextProviderProps {
+  children: (context: SomeContextRenderProps) => React.ReactElement;
+}
 
 const SomeContext = React.createContext({} as SomeContextProps);
 
-const SomeContextProvider = ({ children }) => {
+const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
   const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState<string>();
 
   return (
     <SomeContext.Provider value={{ isToggleStepChecked, errorMessage, setIsToggleStepChecked, setErrorMessage }}>
-      {children}
+      {children({ isToggleStepChecked, errorMessage })}
     </SomeContext.Provider>
   );
 };
 
 const CustomWizardFooter = () => {
-  const { currentStep, currentStepIndex, onNext, onBack, onClose } = useWizardContext();
+  const { activeStep, onNext, onBack, onClose } = useWizardContext();
 
   return (
     <WizardFooter
-      currentStep={currentStep}
+      activeStep={activeStep}
       onNext={onNext}
       onBack={onBack}
       onClose={onClose}
-      isBackDisabled={currentStepIndex === 1}
+      isBackDisabled={activeStep.index === 1}
     />
   );
 };
@@ -108,7 +109,7 @@ const StepContentWithDrawer = () => {
   );
 };
 
-const StepWithCustomFooter = (props: WizardStepProps) => {
+const CustomStepThreeFooter = () => {
   const { onNext: goToNextStep, onBack, onClose } = useWizardContext();
   const [isLoading, setIsLoading] = React.useState(false);
 
@@ -120,51 +121,26 @@ const StepWithCustomFooter = (props: WizardStepProps) => {
     goToStep();
   }
 
-  const footer = React.useMemo(
-    () => (
-      <WizardFooterWrapper>
-        <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
-          Async Next
-        </Button>
-        <Button variant="secondary" onClick={onBack}>
-          Back
-        </Button>
-        <Button variant="link" onClick={onClose}>
-          Cancel
-        </Button>
-      </WizardFooterWrapper>
-    ),
-    [goToNextStep, isLoading, onBack, onClose]
-  );
-
   return (
-    <WizardStep {...props} footer={footer}>
-      Step 3 content w/ custom async footer
-    </WizardStep>
+    <WizardFooterWrapper>
+      <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
+        Async Next
+      </Button>
+      <Button variant="secondary" onClick={onBack} isDisabled={isLoading}>
+        Back
+      </Button>
+      <Button variant="link" onClick={onClose} isDisabled={isLoading}>
+        Cancel
+      </Button>
+    </WizardFooterWrapper>
   );
 };
 
-const StepWithContextActions = (props: WizardStepProps) => {
+const StepContentWithActions = () => {
   const { isToggleStepChecked, errorMessage, setIsToggleStepChecked, setErrorMessage } = React.useContext(SomeContext);
 
-  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 (
-    <WizardStep {...props} navItem={navItem}>
+    <>
       <Checkbox
         label="Give this step an error status"
         isChecked={!!errorMessage}
@@ -179,50 +155,63 @@ const StepWithContextActions = (props: WizardStepProps) => {
         id="toggle-hide-step-checkbox"
         name="Toggle Hide Step Checkbox"
       />
-    </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>
+      {({ isToggleStepChecked, errorMessage }) => (
+        <Wizard
+          height={400}
+          header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
+          footer={<CustomWizardFooter />}
+          onNext={onNext}
+          isStepVisitRequired
+        >
+          <WizardStep id={StepId.StepOne} name="Step 1" body={null} status="error">
+            <StepContentWithDrawer />
+          </WizardStep>
+          <WizardStep
+            id={StepId.StepTwo}
+            name="Step 2"
+            steps={[
+              <WizardStep
+                status={errorMessage ? 'error' : 'default'}
+                id={StepId.StepTwoSubOne}
+                key={StepId.StepTwoSubOne}
+                name="Substep 1"
+              >
+                <StepContentWithActions />
+              </WizardStep>,
+              <WizardStep
+                id={StepId.StepTwoSubTwo}
+                key={StepId.StepTwoSubTwo}
+                name="Substep 2"
+                isHidden={isToggleStepChecked}
+              >
+                Substep 2 content
+              </WizardStep>
+            ]}
+          />
+          <WizardStep
+            id={StepId.StepThree}
+            name="Step 3"
+            navItem={{
+              content: <span style={{ color: 'var(--pf-global--default-color--200)' }}>Custom item</span>
+            }}
+            footer={<CustomStepThreeFooter />}
+          >
+            Step 3 content w/ custom async footer
+          </WizardStep>
+          <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

@@ -16,15 +16,15 @@ test('sets the footer when one is provided without a stepId', () => {
   expect(setFooter).toHaveBeenCalledWith(customFooter);
 });
 
-test(`sets the footer when the provided stepId matches the currentStep's id`, () => {
-  useWizardContextSpy.mockReturnValueOnce({ setFooter, currentStep: { id: 'curr-step-id' } } as any);
+test(`sets the footer when the provided stepId matches the activeStep's id`, () => {
+  useWizardContextSpy.mockReturnValueOnce({ setFooter, activeStep: { id: 'curr-step-id' } } as any);
 
   renderHook(() => useWizardFooter(customFooter, 'curr-step-id'));
   expect(setFooter).toHaveBeenCalledWith(customFooter);
 });
 
-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);
+test(`does not set the footer when the provided stepId does not match the activeStep's id`, () => {
+  useWizardContextSpy.mockReturnValueOnce({ setFooter, activeStep: { id: 'curr-step-id' } } as any);
 
   renderHook(() => useWizardFooter(customFooter, 'some-other-step-id'));
   expect(setFooter).not.toHaveBeenCalled();

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

@@ -9,10 +9,10 @@ import { WizardFooterProps } from '../WizardFooter';
  * @param stepId
  */
 export const useWizardFooter = (footer: React.ReactElement | Partial<WizardFooterProps>, stepId?: string | number) => {
-  const { currentStep, setFooter } = useWizardContext();
+  const { activeStep, setFooter } = useWizardContext();
 
   React.useEffect(() => {
-    if (footer && (!stepId || currentStep?.id === stepId)) {
+    if (footer && (!stepId || activeStep?.id === stepId)) {
       setFooter(footer);
 
       // Reset the footer on unmount.
@@ -20,5 +20,5 @@ export const useWizardFooter = (footer: React.ReactElement | Partial<WizardFoote
         setFooter(null);
       };
     }
-  }, [currentStep, footer, setFooter, stepId]);
+  }, [activeStep, footer, setFooter, stepId]);
 };

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

@@ -7,6 +7,8 @@ export interface WizardBasicStep {
   name: React.ReactNode;
   /** Unique identifier */
   id: string | number;
+  /** Order index of step (starts at 1) */
+  index: number;
   /** Flag to disable the step's navigation item */
   isDisabled?: boolean;
   /** Flag to represent whether the step has been visited (navigated to) */
@@ -64,21 +66,21 @@ export type WizardNavItemType = Partial<WizardNavItemProps> | CustomWizardNavIte
 export type CustomWizardNavFunction = (
   isExpanded: boolean,
   steps: WizardControlStep[],
-  currentStep: WizardControlStep,
+  activeStep: WizardControlStep,
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavProps>;
 
 /** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navigation item. */
 export type CustomWizardNavItemFunction = (
   step: WizardControlStep,
-  currentStep: WizardControlStep,
+  activeStep: WizardControlStep,
   steps: WizardControlStep[],
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavItemProps>;
 
 /** Callback for the Wizard's 'footer' property. Returns element which replaces the Wizard's default footer. */
 export type CustomWizardFooterFunction = (
-  currentStep: WizardControlStep,
+  activeStep: WizardControlStep,
   onNext: () => void,
   onBack: () => void,
   onClose: () => void

package/src/next/components/Wizard/utils.ts

@@ -9,27 +9,37 @@ import { WizardStep, WizardStepProps } from './WizardStep';
  * @returns WizardControlStep[]
  */
 export const buildSteps = (children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[]) =>
-  React.Children.toArray(children).reduce((acc: WizardControlStep[], child: React.ReactChild | React.ReactFragment) => {
+  React.Children.toArray(children).reduce((acc: WizardControlStep[], child: React.ReactNode) => {
     if (isWizardStep(child)) {
-      const { steps: subSteps, id } = child.props;
-
-      acc.push({
-        component: child,
-        ...normalizeStep(child.props),
-        ...(subSteps && {
-          subStepIds: subSteps?.map(subStep => {
-            acc.push({
-              ...normalizeStep(subStep.props),
-              component: subStep,
-              parentId: id
-            });
-
-            return subStep.props.id;
-          })
-        })
-      });
+      const { steps: subSteps, id, isHidden, isDisabled } = child.props;
+      const subControlledSteps: WizardControlStep[] = [];
+      const stepIndex = acc.length + 1;
+
+      acc.push(
+        {
+          index: stepIndex,
+          component: child,
+          ...(stepIndex === 1 && { isVisited: true }),
+          ...(subSteps && {
+            subStepIds: subSteps?.map((subStep, subStepIndex) => {
+              subControlledSteps.push({
+                isHidden,
+                isDisabled,
+                component: subStep,
+                parentId: id,
+                index: stepIndex + subStepIndex + 1,
+                ...normalizeStep(subStep.props)
+              });
+
+              return subStep.props.id;
+            })
+          }),
+          ...normalizeStep(child.props)
+        },
+        ...subControlledSteps
+      );
     } else {
-      throw new Error('Wizard only accepts children of type WizardStep');
+      throw new Error('Wizard only accepts children with required WizardStepProps.');
     }
 
     return acc;
@@ -45,14 +55,14 @@ export function isWizardStep(
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const normalizeStep = ({ children, steps, body, ...controlStep }: WizardStepProps): WizardControlStep =>
+export const normalizeStep = ({ children, steps, ...controlStep }: WizardStepProps): Omit<WizardControlStep, 'index'> =>
   controlStep;
 
-export const normalizeNavStep = (navStep: WizardControlStep, steps: WizardControlStep[]): WizardNavStepData => ({
+export const normalizeNavStep = (navStep: WizardControlStep): WizardNavStepData => ({
   id: navStep.id,
-  name: navStep.name.toString(),
-  index: steps.indexOf(navStep) + 1
+  index: navStep.index,
+  name: navStep.name.toString()
 });
 
-export const getCurrentStep = (steps: WizardControlStep[], currentStepIndex: number) =>
-  steps.find((_, index) => index + 1 === currentStepIndex);
+export const getActiveStep = (steps: WizardControlStep[], activeStepIndex: number) =>
+  steps.find(step => step.index === activeStepIndex);