@patternfly/react-core 5.2.0-prerelease.20 → 5.2.0-prerelease.22

package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`renders compact no background successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -75,6 +76,7 @@ exports[`renders compact no background successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -125,6 +127,7 @@ exports[`renders compact no background successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -177,6 +180,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -227,6 +231,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -277,6 +282,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -343,6 +349,7 @@ exports[`renders compact successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -396,6 +403,7 @@ exports[`renders compact successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -446,6 +454,7 @@ exports[`renders compact successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -498,6 +507,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -548,6 +558,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -598,6 +609,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -664,6 +676,7 @@ exports[`renders guides successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -713,6 +726,7 @@ exports[`renders guides successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -759,6 +773,7 @@ exports[`renders guides successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -807,6 +822,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -853,6 +869,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -899,6 +916,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -961,6 +979,7 @@ exports[`tree view renders active successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1010,6 +1029,7 @@ exports[`tree view renders active successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1056,6 +1076,7 @@ exports[`tree view renders active successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1104,6 +1125,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1150,6 +1172,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1196,6 +1219,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1258,6 +1282,7 @@ exports[`tree view renders badges successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1316,6 +1341,7 @@ exports[`tree view renders badges successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1371,6 +1397,7 @@ exports[`tree view renders badges successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1428,6 +1455,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1483,6 +1511,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1538,6 +1567,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1609,6 +1639,7 @@ exports[`tree view renders basic successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1658,6 +1689,7 @@ exports[`tree view renders basic successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1704,6 +1736,7 @@ exports[`tree view renders basic successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1752,6 +1785,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1798,6 +1832,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1844,6 +1879,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1915,6 +1951,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id25"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="0"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -1976,6 +2013,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     aria-labelledby="label-checkbox-id26"
                     class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2034,6 +2072,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     aria-labelledby="label-checkbox-id27"
                     class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2094,6 +2133,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id28"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2152,6 +2192,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id29"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2210,6 +2251,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id30"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2274,6 +2316,7 @@ exports[`tree view renders icons successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2340,6 +2383,7 @@ exports[`tree view renders icons successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -2403,6 +2447,7 @@ exports[`tree view renders icons successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -2468,6 +2513,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2531,6 +2577,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2594,6 +2641,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2683,6 +2731,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 aria-labelledby="label-checkbox-id43"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2751,6 +2800,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -2797,6 +2847,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -2854,6 +2905,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2936,6 +2988,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2982,6 +3035,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -3090,6 +3144,7 @@ exports[`tree view renders toolbar successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -3139,6 +3194,7 @@ exports[`tree view renders toolbar successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -3185,6 +3241,7 @@ exports[`tree view renders toolbar successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -3233,6 +3290,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -3279,6 +3337,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -3325,6 +3384,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"

package/src/components/Wizard/Wizard.tsx

@@ -11,7 +11,7 @@ import {
   WizardNavType,
   WizardStepChangeScope
 } from './types';
-import { buildSteps } from './utils';
+import { buildSteps, isStepEnabled } from './utils';
 import { useWizardContext, WizardContextProvider } from './WizardContext';
 import { WizardToggle } from './WizardToggle';
 import { WizardNavInternal } from './WizardNavInternal';
@@ -23,7 +23,7 @@ import { WizardNavInternal } from './WizardNavInternal';
 
 export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** Step components */
-  children: React.ReactNode | React.ReactNode[];
+  children: React.ReactNode;
   /** Wizard header */
   header?: React.ReactNode;
   /** Wizard footer */
@@ -86,35 +86,23 @@ export const Wizard = ({
   }, [startIndex]);
 
   const goToNextStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
-    const newStep = steps.find(
-      (step) => step.index > activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
-    );
+    const newStep = steps.find((step) => step.index > activeStepIndex && isStepEnabled(steps, step));
 
     if (activeStepIndex >= steps.length || !newStep?.index) {
       return onSave ? onSave(event) : onClose?.(event);
     }
 
-    const currStep = isWizardParentStep(steps[activeStepIndex]) ? steps[activeStepIndex + 1] : steps[activeStepIndex];
-    const prevStep = steps[activeStepIndex - 1];
-
     setActiveStepIndex(newStep?.index);
-    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Next);
+    onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Next);
   };
 
   const goToPrevStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
     const newStep = [...steps]
       .reverse()
-      .find(
-        (step: WizardStepType) =>
-          step.index < activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
-      );
-    const currStep = isWizardParentStep(steps[activeStepIndex - 2])
-      ? steps[activeStepIndex - 3]
-      : steps[activeStepIndex - 2];
-    const prevStep = steps[activeStepIndex - 1];
+      .find((step: WizardStepType) => step.index < activeStepIndex && isStepEnabled(steps, step));
 
     setActiveStepIndex(newStep?.index);
-    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Back);
+    onStepChange?.(event, newStep, steps[activeStepIndex - 1], WizardStepChangeScope.Back);
   };
 
   const goToStepByIndex = (

package/src/components/Wizard/WizardBody.tsx

@@ -12,7 +12,7 @@ import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export interface WizardBodyProps {
   /** Anything that can be rendered in the Wizard body */
-  children: React.ReactNode | React.ReactNode[];
+  children: React.ReactNode;
   /** Flag to remove the default body padding */
   hasNoPadding?: boolean;
   /** Adds an accessible name to the wrapper element when the content overflows and renders
@@ -67,7 +67,7 @@ export const WizardBody = ({
     return () => {
       observer();
     };
-  }, []);
+  }, [previousWidth]);
 
   return (
     <WrapperComponent

package/src/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 '../Button';
-import { isCustomWizardFooter, WizardStepType } from './types';
+import { isCustomWizardFooter, WizardFooterButtonProps, 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.
@@ -33,6 +33,12 @@ export interface WizardFooterProps {
   isBackHidden?: boolean;
   /** Flag to hide the cancel button */
   isCancelHidden?: boolean;
+  /** Additional props for the Next button. */
+  nextButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled' | 'type'>;
+  /** Additional props for the Back button. */
+  backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
+  /** Additional props for the Cancel button. */
+  cancelButtonProps?: WizardFooterButtonProps;
 }
 
 /**
@@ -62,22 +68,31 @@ const InternalWizardFooter = ({
   isCancelHidden,
   nextButtonText = 'Next',
   backButtonText = 'Back',
-  cancelButtonText = 'Cancel'
+  cancelButtonText = 'Cancel',
+  nextButtonProps,
+  backButtonProps,
+  cancelButtonProps
 }: Omit<WizardFooterProps, 'activeStep'>) => (
   <WizardFooterWrapper>
     {!isBackHidden && (
-      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled}>
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
         {backButtonText}
       </Button>
     )}
 
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
+    <Button
+      variant={ButtonVariant.primary}
+      type="submit"
+      onClick={onNext}
+      isDisabled={isNextDisabled}
+      {...nextButtonProps}
+    >
       {nextButtonText}
     </Button>
 
     {!isCancelHidden && (
       <div className={styles.wizardFooterCancel}>
-        <Button variant={ButtonVariant.link} onClick={onClose}>
+        <Button variant={ButtonVariant.link} onClick={onClose} {...cancelButtonProps}>
           {cancelButtonText}
         </Button>
       </div>

package/src/components/Wizard/WizardNavInternal.tsx

@@ -85,7 +85,7 @@ export const WizardNavInternal = ({
                     id={subStep.id}
                     content={subStep.name}
                     isCurrent={activeStep?.id === subStep.id}
-                    isDisabled={isSubStepDisabled}
+                    isDisabled={isSubStepDisabled || isStepDisabled}
                     isVisited={subStep.isVisited}
                     stepIndex={subStep.index}
                     onClick={() => goToStepByIndex(subStep.index)}
@@ -109,7 +109,7 @@ export const WizardNavInternal = ({
                   content={step.name}
                   isExpandable={step.isExpandable}
                   isCurrent={hasActiveChild}
-                  isDisabled={!hasEnabledChildren}
+                  isDisabled={!hasEnabledChildren || isStepDisabled}
                   isVisited={step.isVisited}
                   stepIndex={firstSubStepIndex}
                   onClick={() => goToStepByIndex(firstSubStepIndex)}

package/src/components/Wizard/WizardToggle.tsx

@@ -71,7 +71,7 @@ export const WizardToggle = ({
 
     return (
       <React.Fragment key={step.id}>
-        {activeStep?.name === step.name &&
+        {activeStep?.id === step.id &&
           (body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : children)}
 
         <div key={step.id} style={{ display: 'none' }}>