@patternfly/react-core 4.224.13 → 4.225.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.224.13",
+  "version": "4.225.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.75.13",
-    "@patternfly/react-styles": "^4.74.13",
-    "@patternfly/react-tokens": "^4.76.13",
+    "@patternfly/react-icons": "^4.76.0",
+    "@patternfly/react-styles": "^4.75.0",
+    "@patternfly/react-tokens": "^4.77.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.203.1",
+    "@patternfly/patternfly": "4.203.2",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "3da666f00f7e848913704c049a51c4085c4044a0"
+  "gitHead": "8d3e22b79bd4cf8aa1cd3ffd6b87e7a09822cbde"
 }

package/src/components/Wizard/Wizard.tsx

@@ -38,6 +38,8 @@ export interface WizardStep {
   hideCancelButton?: boolean;
   /** (Unused if footer is controlled) True to hide the Back button */
   hideBackButton?: boolean;
+  /** Flag to disable the step in the navigation */
+  isDisabled?: boolean;
 }
 
 export type WizardStepFunctionType = (
@@ -187,7 +189,19 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       }
       return onClose();
     } else {
-      const newStep = currentStep + 1;
+      let newStep = currentStep;
+
+      for (let nextStep = currentStep; nextStep <= maxSteps; nextStep++) {
+        if (!flattenedSteps[nextStep]) {
+          return;
+        }
+
+        if (!flattenedSteps[nextStep].isDisabled) {
+          newStep = nextStep + 1;
+          break;
+        }
+      }
+
       this.setState({
         currentStep: newStep
       });
@@ -208,7 +222,19 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
         currentStep: adjustedStep
       });
     } else {
-      const newStep = currentStep - 1 <= 0 ? 0 : currentStep - 1;
+      let newStep = currentStep;
+
+      for (let prevStep = currentStep; prevStep >= 0; prevStep--) {
+        if (!flattenedSteps[prevStep - 2]) {
+          return;
+        }
+
+        if (!flattenedSteps[prevStep - 2].isDisabled) {
+          newStep = prevStep - 1 <= 1 ? 1 : prevStep - 1;
+          break;
+        }
+      }
+
       this.setState({
         currentStep: newStep
       });
@@ -219,9 +245,14 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
   };
 
   private goToStep = (step: number): void => {
+    const flattenedSteps = this.getFlattenedSteps();
+
+    if (flattenedSteps[step - 1].isDisabled) {
+      return;
+    }
+
     const { onGoToStep } = this.props;
     const { currentStep } = this.state;
-    const flattenedSteps = this.getFlattenedSteps();
     const maxSteps = flattenedSteps.length;
     if (step < 1) {
       step = 1;
@@ -413,7 +444,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
                         return;
                       }
                       navItemStep = this.getFlattenedStepsIndex(flattenedSteps, childStep.name);
-                      enabled = childStep.canJumpTo;
+                      enabled = childStep.canJumpTo && !childStep.isDisabled;
                       return (
                         <WizardNavItem
                           key={`child_${indexChild}`}
@@ -431,7 +462,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               );
             }
             navItemStep = this.getFlattenedStepsIndex(flattenedSteps, step.name);
-            enabled = step.canJumpTo;
+            enabled = step.canJumpTo && !step.isDisabled;
+
             return (
               <WizardNavItem
                 {...step.stepNavItemProps}

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
 import { DrawerPanelContent, DrawerColorVariant, DrawerHead } from '../../Drawer';
+import userEvent from '@testing-library/user-event';
 
 describe('Wizard', () => {
   test('Wizard should match snapshot', () => {
@@ -222,3 +223,94 @@ describe('Wizard', () => {
     expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
   });
 });
+
+  test('wiz with disabled steps', () => {
+    const steps: WizardStep[] = [
+      { name: 'A', component: <p>Step 1</p>},
+      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+      { name: 'C', component: <p>Step 3</p>},
+      { name: 'E', component: <p>Step 4</p>, isDisabled: true },
+      { name: 'G', component: <p>Step 5</p> },
+
+    ];
+    
+    render(
+      <Wizard
+        navAriaLabel="nav aria-label"
+        description="This wizard step is disabled"
+        steps={steps}
+      />
+    );
+
+    expect(screen.getByRole('button',{ name: "B" })).toBeDisabled();
+    expect(screen.getByRole('button',{ name: "E" })).toBeDisabled();
+  });
+
+  test('wiz skip the step disabled when press the next/back button', () => {
+    const steps: WizardStep[] = [
+      { name: 'A', component: <p>Step 1</p>},
+      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+      { name: 'C', component: <p>Step 3</p>},
+
+    ];
+    
+    render(
+      <Wizard
+        navAriaLabel="nav aria-label"
+        description="This wizard step is disabled"
+        steps={steps}
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Next' }));
+    expect(screen.getByRole('button',{ name: "C" })).toHaveClass('pf-m-current')
+
+    userEvent.click(screen.getByRole('button', { name: 'Back' }));
+    expect(screen.getByRole('button',{ name: "A" })).toHaveClass('pf-m-current')
+  });
+  
+  test('wiz skip the step when click on the nav item disabled', () => {
+    const steps: WizardStep[] = [
+      { name: 'A', component: <p>Step 1</p>},
+      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+      { name: 'C', component: <p>Step 3</p>}
+    ];
+    
+    render(
+      <Wizard
+        navAriaLabel="nav aria-label"
+        description="This wizard step is disabled"
+        steps={steps}
+      />
+    );
+
+    const navItemButton = screen.getByRole('button',{ name: "B" })
+    const navItemButtonSelected = screen.getByRole('button',{ name: "A" })
+    
+    userEvent.click(navItemButton);
+
+    expect(navItemButton).not.toHaveClass('pf-m-current')
+    expect(navItemButtonSelected).toHaveClass('pf-m-current')
+  });
+
+  test('wiz with disable sub step', () => {
+    const steps: WizardStep[] =   [
+      {
+        name: 'A',
+        steps: [
+          { name: 'A-1', component: <p>Substep A content</p> },
+          { name: 'A-2', component: <p>Substep B content</p>,  isDisabled: true }
+        ]
+      },
+    ];
+    
+    render(
+      <Wizard
+        navAriaLabel="nav aria-label"
+        description="This wizard step is disabled"
+        steps={steps}
+      />
+    );
+
+    expect(screen.getByRole('button',{ name: "A-2" })).toBeDisabled();
+  });

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

@@ -40,6 +40,31 @@ class SimpleWizard extends React.Component {
 }
 ```
 
+### Basic with disabled steps
+
+```js
+import React from 'react';
+import { Button, Wizard } from '@patternfly/react-core';
+
+class SimpleWizard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const steps = [
+      { name: 'First step', component: <p>Step 1 content</p> },
+      { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true},
+      { name: 'Third step', component: <p>Step 3 content</p> },
+      { name: 'Fourth step', component: <p>Step 4 content</p>, isDisabled: true },
+      { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
+    ];
+    const title = 'Basic wizard';
+    return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+  }
+}
+```
+
 ### Anchors for nav items
 
 ```js

package/src/helpers/OUIA/ouia.ts

@@ -62,10 +62,8 @@ export const useOUIAProps = (componentType: string, id?: OuiaId, ouiaSafe: boole
  * @param {string} variant Optional variant to add to the generated ID
  */
 export const useOUIAId = (componentType: string, id?: OuiaId, variant?: string) => {
-  if (id !== undefined) {
-    return id;
-  }
-  return useMemo(() => getDefaultOUIAId(componentType, variant), [componentType, variant]);
+  const defaultOUIAId = useMemo(() => getDefaultOUIAId(componentType, variant), [componentType, variant]);
+  return id ?? defaultOUIAId;
 };
 
 /**