@patternfly/react-core 4.249.0 → 4.250.0

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

@@ -1,17 +1,16 @@
 import React from 'react';
 
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-
-import { DefaultWizardFooterProps, isCustomWizardFooter, WizardControlStep } from './types';
-import { getActiveStep } from './utils';
-import { WizardFooter } from './WizardFooter';
+import { isCustomWizardFooter, isWizardParentStep, WizardControlStep, WizardFooterType } from './types';
+import { getCurrentStep } from './utils';
+import { WizardFooter, WizardFooterProps } from './WizardFooter';
 
 export interface WizardContextProps {
   /** List of steps */
   steps: WizardControlStep[];
-  /** Active step */
-  activeStep: WizardControlStep;
+  /** Current step */
+  currentStep: WizardControlStep;
+  /** Current step index */
+  currentStepIndex: number;
   /** Footer element */
   footer: React.ReactElement;
   /** Navigate to the next step */
@@ -27,38 +26,36 @@ export interface WizardContextProps {
   /** Navigate to step by index */
   goToStepByIndex: (index: number) => void;
   /** Update the footer with any react element */
-  setFooter: (footer: DefaultWizardFooterProps | React.ReactElement) => void;
+  setFooter: (footer: React.ReactElement | Partial<WizardFooterProps>) => void;
+  /** Get step by ID */
+  getStep: (stepId: number | string) => WizardControlStep;
+  /** Set step by ID */
+  setStep: (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) => void;
+  /** Toggle step visibility by ID */
+  toggleStep: (stepId: number | string, isHidden: boolean) => void;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
 
-interface WizardContextRenderProps {
-  steps: WizardControlStep[];
-  activeStep: WizardControlStep;
-  footer: React.ReactElement;
-  onNext(): void;
-  onBack(): void;
-  onClose(): void;
-}
-
 export interface WizardContextProviderProps {
   steps: WizardControlStep[];
   currentStepIndex: number;
-  footer: DefaultWizardFooterProps | React.ReactElement;
-  children: React.ReactElement | ((props: WizardContextRenderProps) => React.ReactElement);
-  onNext(): void;
-  onBack(): void;
+  footer: WizardFooterType;
+  isStepVisitRequired: boolean;
+  children: React.ReactElement;
+  onNext(steps: WizardControlStep[]): void;
+  onBack(steps: WizardControlStep[]): void;
   onClose(): void;
-  goToStepById(id: number | string): void;
-  goToStepByName(name: string): void;
-  goToStepByIndex(index: number): void;
+  goToStepById(steps: WizardControlStep[], id: number | string): void;
+  goToStepByName(steps: WizardControlStep[], name: string): void;
+  goToStepByIndex(steps: WizardControlStep[], index: number): void;
 }
 
-// eslint-disable-next-line patternfly-react/no-anonymous-functions
 export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
   steps: initialSteps,
   footer: initialFooter,
   currentStepIndex,
+  isStepVisitRequired,
   children,
   onNext,
   onBack,
@@ -68,61 +65,116 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   goToStepByIndex
 }) => {
   const [steps, setSteps] = React.useState(initialSteps);
-  const [footer, setFooter] = React.useState(initialFooter);
-  const activeStep = getActiveStep(steps, currentStepIndex);
-
-  const wizardFooter = React.useMemo(
-    () =>
-      isCustomWizardFooter(footer) ? (
-        <div className={css(styles.wizardFooter)}>{footer}</div>
-      ) : (
-        <WizardFooter
-          activeStep={activeStep}
-          onNext={onNext}
-          onBack={onBack}
-          onClose={onClose}
-          disableBackButton={activeStep?.id === steps[0]?.id}
-          {...footer}
-        />
-      ),
-    [activeStep, footer, onBack, onClose, onNext, steps]
+  const [currentFooter, setCurrentFooter] = React.useState(
+    typeof initialFooter !== 'function' ? initialFooter : undefined
   );
+  const currentStep = getCurrentStep(steps, currentStepIndex);
+
+  const goToNextStep = React.useCallback(() => onNext(steps), [onNext, steps]);
+  const goToPrevStep = React.useCallback(() => onBack(steps), [onBack, steps]);
+
+  const footer = React.useMemo(() => {
+    const wizardFooter = currentFooter || initialFooter;
+
+    if (isCustomWizardFooter(wizardFooter)) {
+      const customFooter = wizardFooter;
+
+      return typeof customFooter === 'function'
+        ? customFooter(currentStep, goToNextStep, goToPrevStep, onClose)
+        : customFooter;
+    }
+
+    return (
+      <WizardFooter
+        currentStep={currentStep}
+        onNext={goToNextStep}
+        onBack={goToPrevStep}
+        onClose={onClose}
+        isBackDisabled={currentStep?.id === steps[0]?.id}
+        {...wizardFooter}
+      />
+    );
+  }, [currentFooter, initialFooter, currentStep, goToNextStep, goToPrevStep, onClose, steps]);
 
-  // When the active step changes and the newly active step isn't visited, set the visited flag to true.
-  React.useEffect(() => {
-    if (activeStep && !activeStep?.visited) {
+  const getStep = React.useCallback((stepId: string | number) => steps.find(step => step.id === stepId), [steps]);
+
+  const setStep = React.useCallback(
+    (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) =>
       setSteps(prevSteps =>
-        prevSteps.map(step => {
-          if (step.id === activeStep.id) {
-            return { ...step, visited: true };
+        prevSteps.map(prevStep => {
+          if (prevStep.id === step.id) {
+            return { ...prevStep, ...step };
           }
 
-          return step;
+          return prevStep;
         })
-      );
-    }
-  }, [activeStep]);
+      ),
+    []
+  );
+
+  const toggleStep = React.useCallback(
+    (stepId: string | number, isHidden: boolean) =>
+      setSteps(prevSteps => {
+        let stepToHide: WizardControlStep;
+
+        return prevSteps.map(prevStep => {
+          if (prevStep.id === stepId) {
+            // Don't hide the currently active step or its parent (if a sub-step).
+            if (
+              isHidden &&
+              (currentStep.id === prevStep.id ||
+                (isWizardParentStep(prevStep) && prevStep.subStepIds.includes(currentStep.id)))
+            ) {
+              // eslint-disable-next-line no-console
+              console.error('Wizard: Unable to hide the current step or its parent.');
+              return prevStep;
+            }
+
+            stepToHide = { ...prevStep, isHidden };
+            return stepToHide;
+          }
+
+          // When isStepVisitRequired is enabled, if the step was previously hidden and not visited yet,
+          // when it is shown, all steps beyond it should be disabled to ensure it is visited.
+          if (
+            isStepVisitRequired &&
+            stepToHide?.isHidden === false &&
+            !stepToHide?.isVisited &&
+            prevSteps.indexOf(stepToHide) < prevSteps.indexOf(prevStep)
+          ) {
+            return { ...prevStep, isVisited: false };
+          }
+
+          return prevStep;
+        });
+      }),
+    [currentStep.id, isStepVisitRequired]
+  );
 
   return (
     <WizardContext.Provider
       value={{
         steps,
-        activeStep,
-        footer: wizardFooter,
-        onNext,
-        onBack,
+        currentStep,
+        currentStepIndex,
+        footer,
         onClose,
-        goToStepById,
-        goToStepByName,
-        goToStepByIndex,
-        setFooter
+        getStep,
+        setStep,
+        toggleStep,
+        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])
       }}
     >
-      {typeof children === 'function'
-        ? children({ activeStep, steps, footer: wizardFooter, onNext, onBack, onClose })
-        : children}
+      {children}
     </WizardContext.Provider>
   );
 };
 
+WizardContextProvider.displayName = 'WizardContextProvider';
+
 export const useWizardContext = () => React.useContext(WizardContext);

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

@@ -4,60 +4,82 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../../../components/Button';
-import { WizardControlStep, WizardNavStepFunction } from './types';
+import { isCustomWizardFooter, WizardControlStep, WizardNavStepFunction } 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.
  */
 
 export interface WizardFooterProps {
-  /** The currently active WizardStep */
-  activeStep: WizardControlStep;
+  /** The current step */
+  currentStep: WizardControlStep;
   /** Next button callback */
   onNext: () => WizardNavStepFunction | void;
   /** Back button callback */
   onBack: () => WizardNavStepFunction | void;
   /** Cancel link callback */
   onClose: () => void;
-  /** Custom text for the Next button. The activeStep's nextButtonText takes precedence. */
+  /** Custom text for the Next button. The current step's nextButtonText takes precedence. */
   nextButtonText?: React.ReactNode;
   /** Custom text for the Back button */
   backButtonText?: React.ReactNode;
   /** Custom text for the Cancel link */
   cancelButtonText?: React.ReactNode;
-  /** Optional flag to disable the first step's back button */
-  disableBackButton?: boolean;
+  /** Flag to disable the next button */
+  isNextDisabled?: boolean;
+  /** Flag to disable the back button */
+  isBackDisabled?: boolean;
+  /** True to hide the Back button */
+  isBackHidden?: boolean;
+  /** True to hide the Cancel button */
+  isCancelHidden?: boolean;
 }
 
-export const WizardFooter = ({
+interface WizardFooterWrapperProps {
+  children: React.ReactNode;
+}
+
+export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
+  <footer className={css(styles.wizardFooter)}>{children}</footer>
+);
+
+export const WizardFooter = ({ currentStep, ...internalProps }: WizardFooterProps) => {
+  const currentStepFooter = !isCustomWizardFooter(currentStep.footer) && currentStep.footer;
+  return <InternalWizardFooter {...internalProps} {...currentStepFooter} />;
+};
+
+const InternalWizardFooter = ({
   onNext,
   onBack,
   onClose,
-  activeStep,
-  disableBackButton,
+  isNextDisabled,
+  isBackDisabled,
+  isBackHidden,
+  isCancelHidden,
   nextButtonText = 'Next',
   backButtonText = 'Back',
   cancelButtonText = 'Cancel'
-}: WizardFooterProps) => (
-  <footer className={css(styles.wizardFooter)}>
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={activeStep?.disableNext}>
-      {activeStep?.nextButtonText || nextButtonText}
+}: Omit<WizardFooterProps, 'currentStep'>) => (
+  <WizardFooterWrapper>
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
+      {nextButtonText}
     </Button>
 
-    {!activeStep?.hideBackButton && (
-      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={disableBackButton}>
+    {!isBackHidden && (
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled}>
         {backButtonText}
       </Button>
     )}
 
-    {!activeStep?.hideCancelButton && (
+    {!isCancelHidden && (
       <div className={styles.wizardFooterCancel}>
         <Button variant={ButtonVariant.link} onClick={onClose}>
           {cancelButtonText}
         </Button>
       </div>
     )}
-  </footer>
+  </WizardFooterWrapper>
 );
 
+WizardFooterWrapper.displayName = 'WizardFooterWrapper';
 WizardFooter.displayName = 'WizardFooter';

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

@@ -15,7 +15,7 @@ export interface WizardHeaderProps {
   /** Component type of the description */
   descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
-  hideClose?: boolean;
+  isCloseHidden?: boolean;
   /** Aria-label applied to the X (Close) button */
   closeButtonAriaLabel?: string;
   /** id for the title */
@@ -28,21 +28,23 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   onClose = () => undefined,
   title,
   description,
-  hideClose,
+  isCloseHidden,
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'p',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
-    {!hideClose && (
+    {!isCloseHidden && (
       <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
         <TimesIcon aria-hidden="true" />
       </Button>
     )}
+
     <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
       {title || <>&nbsp;</>}
     </Title>
+
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}
@@ -50,4 +52,5 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
     )}
   </div>
 );
+
 WizardHeader.displayName = 'WizardHeader';

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

@@ -5,14 +5,14 @@ import { css } from '@patternfly/react-styles';
 export interface WizardNavProps {
   /** children should be WizardNavItem components */
   children?: any;
-  /** Aria-label applied to the nav element */
+  /** Aria-label applied to the navigation element */
   'aria-label'?: string;
-  /** Sets the aria-labelledby attribute on the nav element */
+  /** Sets the aria-labelledby attribute on the navigation element */
   'aria-labelledby'?: string;
-  /** Whether the nav is expanded */
+  /** Whether the navigation is expanded */
   isExpanded?: boolean;
-  /** True to return the inner list without the wrapping nav element */
-  returnList?: boolean;
+  /** True to return the inner list without the wrapping navigation element */
+  isInnerList?: boolean;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
@@ -20,12 +20,10 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isExpanded = false,
-  returnList = false
+  isInnerList = false
 }: WizardNavProps) => {
-  const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
-
-  if (returnList) {
-    return innerList;
+  if (isInnerList) {
+    return <ol className={css(styles.wizardNavList)}>{children}</ol>;
   }
 
   return (
@@ -38,4 +36,5 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
     </nav>
   );
 };
+
 WizardNav.displayName = 'WizardNav';

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

@@ -0,0 +1,137 @@
+import React from 'react';
+
+import { isCustomWizardNavItem, isWizardBasicStep, isWizardParentStep } from './types';
+import { WizardProps } from './Wizard';
+import { useWizardContext } from './WizardContext';
+import { WizardNav, WizardNavProps } from './WizardNav';
+import { WizardNavItem } from './WizardNavItem';
+
+/**
+ * Hosts deafult wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
+ * This component is not exposed to consumers.
+ */
+
+interface WizardNavInternalProps extends Pick<WizardProps, 'isStepVisitRequired'> {
+  nav: Partial<WizardNavProps>;
+  isNavExpanded: boolean;
+}
+
+export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: WizardNavInternalProps) => {
+  const { currentStep, steps, goToStepByIndex } = useWizardContext();
+
+  const wizardNavProps: WizardNavProps = {
+    isExpanded: isNavExpanded,
+    'aria-label': nav?.['aria-label'] || 'Wizard steps',
+    ...(nav?.['aria-labelledby'] && {
+      'aria-labelledby': nav['aria-labelledby']
+    })
+  };
+
+  return (
+    <WizardNav {...wizardNavProps}>
+      {steps.map((step, index) => {
+        const stepIndex = index + 1;
+        const customStepNavItem = isCustomWizardNavItem(step.navItem) && (
+          <React.Fragment key={step.id}>
+            {typeof step.navItem === 'function'
+              ? step.navItem(step, currentStep, steps, goToStepByIndex)
+              : step.navItem}
+          </React.Fragment>
+        );
+
+        if (isWizardParentStep(step) && !step.isHidden) {
+          let firstSubStepIndex;
+          let hasActiveChild = false;
+
+          const subNavItems = step.subStepIds?.map((subStepId, subStepIndex) => {
+            const subStep = steps.find(step => step.id === subStepId);
+            const subStepOrderIndex = steps.indexOf(subStep) + 1;
+            const customSubStepNavItem = isCustomWizardNavItem(subStep.navItem) && (
+              <React.Fragment key={subStep.id}>
+                {typeof subStep.navItem === 'function'
+                  ? subStep.navItem(subStep, currentStep, steps, goToStepByIndex)
+                  : subStep.navItem}
+              </React.Fragment>
+            );
+
+            // Don't render the sub-step navigation item if the hidden property is enabled
+            if (subStep.isHidden) {
+              return;
+            }
+
+            // Store the first sub-step index so that when its parent is clicked, the first sub-step is focused
+            if (subStepIndex === 0) {
+              firstSubStepIndex = subStepOrderIndex;
+            }
+
+            // When a sub-step is active, use this flag to set the parent step as active (isCurrent)
+            if (currentStep?.id === subStep.id) {
+              hasActiveChild = true;
+            }
+
+            return (
+              customSubStepNavItem || (
+                <WizardNavItem
+                  key={subStep.id}
+                  id={subStep.id}
+                  content={subStep.name}
+                  isCurrent={currentStep?.id === subStep.id}
+                  isDisabled={subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited)}
+                  isVisited={subStep.isVisited}
+                  stepIndex={subStepOrderIndex}
+                  onNavItemClick={goToStepByIndex}
+                  status={subStep.status}
+                  {...subStep.navItem}
+                />
+              )
+            );
+          });
+          const hasEnabledChildren = React.Children.toArray(subNavItems).some(
+            child => React.isValidElement(child) && !child.props.isDisabled
+          );
+
+          return (
+            customStepNavItem || (
+              <WizardNavItem
+                key={step.id}
+                id={step.id}
+                content={step.name}
+                isExpandable={true}
+                isCurrent={hasActiveChild}
+                isDisabled={!hasEnabledChildren}
+                isVisited={step.isVisited}
+                stepIndex={firstSubStepIndex}
+                onNavItemClick={goToStepByIndex}
+                status={step.status}
+                {...step.navItem}
+              >
+                <WizardNav {...wizardNavProps} isInnerList>
+                  {subNavItems}
+                </WizardNav>
+              </WizardNavItem>
+            )
+          );
+        }
+
+        if (isWizardBasicStep(step) && !step.isHidden) {
+          return (
+            customStepNavItem || (
+              <WizardNavItem
+                key={step.id}
+                id={step.id}
+                content={step.name}
+                isCurrent={currentStep?.id === step.id}
+                isDisabled={step.isDisabled || (isStepVisitRequired && !step.isVisited)}
+                isVisited={step.isVisited}
+                stepIndex={stepIndex}
+                onNavItemClick={goToStepByIndex}
+                status={step.status}
+                {...step.navItem}
+              />
+            )
+          );
+        }
+      })}
+    </WizardNav>
+  );
+};