@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

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

@@ -1,22 +1,22 @@
 import React from 'react';
 
-import { isCustomWizardFooter, WizardControlStep, WizardFooterType } from './types';
+import { isCustomWizardFooter, isWizardSubStep, WizardStepType, WizardFooterType } from './types';
 import { getActiveStep } from './utils';
 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 +26,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> = ({
@@ -66,21 +70,17 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   // 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 activeStep = React.useMemo(() => getActiveStep(steps, activeStepIndex), [activeStepIndex, steps]);
 
-  const goToNextStep = React.useCallback(() => onNext(steps), [onNext, steps]);
-  const goToPrevStep = React.useCallback(() => onBack(steps), [onBack, 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 +89,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 +98,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 +127,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 */

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

@@ -11,12 +11,12 @@ import { WizardNavItem } from './WizardNavItem';
  * This component is not exposed to consumers.
  */
 
-interface WizardNavInternalProps extends Pick<WizardProps, 'isStepVisitRequired'> {
+interface WizardNavInternalProps extends Pick<WizardProps, 'isVisitRequired' | 'isProgressive'> {
   nav: Partial<WizardNavProps>;
   isNavExpanded: boolean;
 }
 
-export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: WizardNavInternalProps) => {
+export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavExpanded }: WizardNavInternalProps) => {
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const wizardNavProps: WizardNavProps = {
@@ -31,7 +31,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
     <WizardNav {...wizardNavProps}>
       {steps.map((step, stepIndex) => {
         const hasVisitedNextStep = steps.some(step => step.index > stepIndex + 1 && step.isVisited);
-        const isStepDisabled = step.isDisabled || (isStepVisitRequired && !step.isVisited && !hasVisitedNextStep);
+        const isStepDisabled = step.isDisabled || (isVisitRequired && !step.isVisited && !hasVisitedNextStep);
         const customStepNavItem = isCustomWizardNavItem(step.navItem) && (
           <React.Fragment key={step.id}>
             {typeof step.navItem === 'function' ? step.navItem(step, activeStep, steps, goToStepByIndex) : step.navItem}
@@ -46,7 +46,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
             const subStep = steps.find(step => step.id === subStepId);
             const hasVisitedNextStep = steps.some(step => step.index > subStep.index && step.isVisited);
             const isSubStepDisabled =
-              subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
+              subStep.isDisabled || (isVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
             const customSubStepNavItem = isCustomWizardNavItem(subStep.navItem) && (
               <React.Fragment key={subStep.id}>
                 {typeof subStep.navItem === 'function'
@@ -70,51 +70,59 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
               hasActiveChild = true;
             }
 
-            return (
-              customSubStepNavItem || (
-                <WizardNavItem
-                  key={subStep.id}
-                  id={subStep.id}
-                  content={subStep.name}
-                  isCurrent={activeStep?.id === subStep.id}
-                  isDisabled={isSubStepDisabled}
-                  isVisited={subStep.isVisited}
-                  stepIndex={subStep.index}
-                  onNavItemClick={goToStepByIndex}
-                  status={subStep.status}
-                  {...subStep.navItem}
-                />
-              )
-            );
+            if (!isProgressive || (isProgressive && subStep.index <= activeStep.index)) {
+              return (
+                customSubStepNavItem || (
+                  <WizardNavItem
+                    key={subStep.id}
+                    id={subStep.id}
+                    content={subStep.name}
+                    isCurrent={activeStep?.id === subStep.id}
+                    isDisabled={isSubStepDisabled}
+                    isVisited={subStep.isVisited}
+                    stepIndex={subStep.index}
+                    onClick={() => goToStepByIndex(subStep.index)}
+                    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={step.isCollapsible ?? true}
-                isCurrent={hasActiveChild}
-                isDisabled={!hasEnabledChildren}
-                isVisited={step.isVisited}
-                stepIndex={firstSubStepIndex}
-                onNavItemClick={goToStepByIndex}
-                status={step.status}
-                {...step.navItem}
-              >
-                <WizardNav {...wizardNavProps} isInnerList>
-                  {subNavItems}
-                </WizardNav>
-              </WizardNavItem>
-            )
-          );
+          if (!isProgressive || (isProgressive && step.index <= activeStep.index)) {
+            return (
+              customStepNavItem || (
+                <WizardNavItem
+                  key={step.id}
+                  id={step.id}
+                  content={step.name}
+                  isExpandable={step.isExpandable}
+                  isCurrent={hasActiveChild}
+                  isDisabled={!hasEnabledChildren}
+                  isVisited={step.isVisited}
+                  stepIndex={firstSubStepIndex}
+                  onClick={() => goToStepByIndex(firstSubStepIndex)}
+                  status={step.status}
+                  {...step.navItem}
+                >
+                  <WizardNav {...wizardNavProps} isInnerList>
+                    {subNavItems}
+                  </WizardNav>
+                </WizardNavItem>
+              )
+            );
+          }
         }
 
-        if (isWizardBasicStep(step) && !step.isHidden) {
+        if (
+          isWizardBasicStep(step) &&
+          !step.isHidden &&
+          (!isProgressive || (isProgressive && step.index <= activeStep.index))
+        ) {
           return (
             customStepNavItem || (
               <WizardNavItem
@@ -125,7 +133,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
                 isDisabled={isStepDisabled}
                 isVisited={step.isVisited}
                 stepIndex={step.index}
-                onNavItemClick={goToStepByIndex}
+                onClick={() => goToStepByIndex(step.index)}
                 status={step.status}
                 {...step.navItem}
               />

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

@@ -5,9 +5,10 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
+import { OUIAProps, useOUIAProps } from '../../../helpers';
 import { WizardNavItemStatus } from './types';
 
-export interface WizardNavItemProps {
+export interface WizardNavItemProps extends OUIAProps {
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -21,11 +22,13 @@ export interface WizardNavItemProps {
   /** The step index passed into the onNavItemClick callback */
   stepIndex: number;
   /** Callback for when the navigation item is clicked */
-  onNavItemClick?: (stepIndex: number) => any;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, index: number) => any;
   /** Component used to render WizardNavItem */
-  navItemComponent?: 'button' | 'a';
+  component?: 'button' | 'a';
   /** An optional url to use for when using an anchor component */
   href?: string;
+  /** Where to display the linked URL when using an anchor component */
+  target?: React.HTMLAttributeAnchorTarget;
   /** Flag indicating that this NavItem has child steps and is expandable */
   isExpandable?: boolean;
   /** The id for the navigation item */
@@ -34,29 +37,31 @@ export interface WizardNavItemProps {
   status?: 'default' | 'error';
 }
 
-export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
+export const WizardNavItem = ({
   children = null,
   content = '',
   isCurrent = false,
   isDisabled = false,
   isVisited = false,
   stepIndex,
-  onNavItemClick = () => undefined,
-  navItemComponent = 'button',
-  href = null,
+  onClick,
+  component: NavItemComponent = 'button',
+  href,
   isExpandable = false,
   id,
   status = 'default',
-  ...rest
+  target,
+  ouiaId,
+  ouiaSafe = true
 }: WizardNavItemProps) => {
-  const NavItemComponent = navItemComponent;
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
 
   React.useEffect(() => {
     setIsExpanded(isCurrent);
   }, [isCurrent]);
 
-  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+  if (NavItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.error('WizardNavItem: When using an anchor, please provide an href');
   }
@@ -87,12 +92,13 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
       )}
     >
       <NavItemComponent
-        {...rest}
-        {...(navItemComponent === 'a' ? { tabIndex: isDisabled ? -1 : undefined, href } : { disabled: isDisabled })}
+        {...(NavItemComponent === 'a'
+          ? { tabIndex: isDisabled ? -1 : undefined, href, target }
+          : { disabled: isDisabled })}
         {...(id && { id: id.toString() })}
         onClick={e => {
-          e.preventDefault();
-          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(stepIndex);
+          e.stopPropagation();
+          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick?.(e, stepIndex);
         }}
         className={css(
           styles.wizardNavLink,
@@ -103,6 +109,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         aria-current={isCurrent && !children ? 'step' : false}
         {...(isExpandable && { 'aria-expanded': isExpanded })}
         {...(ariaLabel && { 'aria-label': ariaLabel })}
+        {...ouiaProps}
       >
         {isExpandable ? (
           <>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardNavItemType } from './types';
+import { isWizardParentStep, WizardNavItemType } from './types';
 import { WizardBodyProps } from './WizardBody';
 import { useWizardContext } from './WizardContext';
 import { WizardFooterProps } from './WizardFooter';
@@ -15,7 +15,7 @@ export interface WizardStepProps {
   /** Unique identifier */
   id: string | number;
   /** Optional for when the step is used as a parent to sub-steps */
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
   body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'> | null;
   /** Optional list of sub-steps */
@@ -30,13 +30,14 @@ export interface WizardStepProps {
   footer?: React.ReactElement | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navigation item */
   status?: 'default' | 'error';
-  /** Flag to determine whether sub-steps can collapse or not */
-  isCollapsible?: boolean;
+  /** Flag to determine whether parent steps can expand or not. Defaults to false. */
+  isExpandable?: boolean;
 }
 
 export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepProps) => {
   const { activeStep, setStep } = useWizardContext();
   const { id, name, body, isDisabled, isHidden, navItem, footer, status } = props;
+  const isParentStep = isWizardParentStep(activeStep);
 
   // Update step in context when props change or when the step is active has yet to be marked as visited.
   React.useEffect(() => {
@@ -49,9 +50,22 @@ export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepP
       ...(navItem && { navItem }),
       ...(footer && { footer }),
       ...(status && { status }),
-      ...(id === activeStep?.id && !activeStep?.isVisited && { isVisited: true })
+      ...(!isParentStep && id === activeStep?.id && !activeStep?.isVisited && { isVisited: true })
     });
-  }, [body, footer, id, isDisabled, isHidden, name, navItem, status, activeStep?.id, activeStep?.isVisited, setStep]);
+  }, [
+    body,
+    footer,
+    id,
+    isDisabled,
+    isHidden,
+    name,
+    navItem,
+    status,
+    isParentStep,
+    setStep,
+    activeStep?.id,
+    activeStep?.isVisited
+  ]);
 
   return <>{children}</>;
 };

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

@@ -7,7 +7,7 @@ import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-ico
 
 import { KeyTypes } from '../../../helpers/constants';
 import { WizardNavProps, WizardBody, WizardStep, WizardStepProps } from '../Wizard';
-import { WizardControlStep, isWizardSubStep } from './types';
+import { WizardStepType, isWizardSubStep } from './types';
 
 /**
  * Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
@@ -15,9 +15,9 @@ import { WizardControlStep, isWizardSubStep } from './types';
 
 export interface WizardToggleProps {
   /** List of steps and/or sub-steps */
-  steps: WizardControlStep[];
+  steps: WizardStepType[];
   /** The current step */
-  activeStep: WizardControlStep;
+  activeStep: WizardStepType;
   /** Wizard footer */
   footer: React.ReactElement;
   /** Wizard navigation */
@@ -27,7 +27,7 @@ export interface WizardToggleProps {
   /** Flag to determine whether the dropdown navigation is expanded */
   isNavExpanded?: boolean;
   /** Callback to expand or collapse the dropdown navigation */
-  toggleNavExpanded?: () => void;
+  toggleNavExpanded?: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
 }
 
 export const WizardToggle = ({
@@ -49,7 +49,7 @@ export const WizardToggle = ({
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
       if (isNavExpanded && event.key === KeyTypes.Escape) {
-        toggleNavExpanded?.();
+        toggleNavExpanded?.(event);
       }
     },
     [isNavExpanded, toggleNavExpanded]