@patternfly/react-core 5.2.0-prerelease.3 → 5.2.0-prerelease.30

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/Truncate/__tests__/Truncate.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Truncate } from '../Truncate';
+import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, position, children, ...props }) => (
@@ -12,12 +13,12 @@ jest.mock('../../Tooltip', () => ({
   )
 }));
 
-test('renders with class pf-v5-c-truncate', () => {
+test(`renders with class ${styles.truncate}`, () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
 
-  expect(test).toHaveClass('pf-v5-c-truncate');
+  expect(test).toHaveClass(styles.truncate);
 });
 
 test('renders with custom class name passed via prop', () => {
@@ -44,13 +45,13 @@ test('renders truncate with content', () => {
   expect(test).toHaveTextContent('Test');
 });
 
-test('only renders pf-v5-c-truncate__start with default position', () => {
+test(`only renders ${styles.truncateStart} with default position`, () => {
   render(<Truncate content={'Testing truncate content'} />);
 
   const start = screen.getByText('Testing truncate content');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
-  expect(start).not.toHaveClass('pf-v5-c-truncate__end');
+  expect(start).toHaveClass(styles.truncateStart);
+  expect(start).not.toHaveClass(styles.truncateEnd);
 });
 
 test('renders default truncation', () => {
@@ -80,11 +81,11 @@ test('renders middle truncation', () => {
 
   const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est ac');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
+  expect(start).toHaveClass(styles.truncateStart);
 
   const end = screen.getByText('cumsan.');
 
-  expect(end).toHaveClass('pf-v5-c-truncate__end');
+  expect(end).toHaveClass(styles.truncateEnd);
 });
 
 test('renders different content when trailingNumChars is passed with middle truncate', () => {
@@ -98,11 +99,11 @@ test('renders different content when trailingNumChars is passed with middle trun
 
   const start = screen.getByText('Vestibulum interdum risus et enim faucibus, sit amet molestie est accums');
 
-  expect(start).toHaveClass('pf-v5-c-truncate__start');
+  expect(start).toHaveClass(styles.truncateStart);
 
   const end = screen.getByText('an.');
 
-  expect(end).toHaveClass('pf-v5-c-truncate__end');
+  expect(end).toHaveClass(styles.truncateEnd);
 });
 
 test('renders tooltip position', () => {

package/src/components/Truncate/examples/Truncate.md

@@ -12,7 +12,8 @@ import './TruncateExamples.css';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
   />
@@ -20,11 +21,11 @@ import { Truncate } from '@patternfly/react-core';
 ```
 
 ### Middle
-
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
     trailingNumChars={10}
@@ -37,7 +38,8 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     position={'start'}
@@ -49,7 +51,8 @@ import { Truncate } from '@patternfly/react-core';
 ```js
 import React from 'react';
 import { Truncate } from '@patternfly/react-core';
-<div className="pf-v5-c-truncate--example">
+
+<div className="truncate-example-resize">
   <Truncate
     content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
     tooltipPosition={'bottom'}

package/src/components/Truncate/examples/TruncateExamples.css

@@ -1,4 +1,4 @@
-.pf-v5-c-truncate--example {
+.truncate-example-resize {
   width: 320px;
   resize: horizontal;
   overflow: auto;

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,13 +23,15 @@ 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 */
   footer?: WizardFooterType;
   /** Wizard navigation */
   nav?: WizardNavType;
+  /** Aria-label for the Nav */
+  navAriaLabel?: string;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
   /** Additional classes spread to the wizard */
@@ -63,6 +65,7 @@ export const Wizard = ({
   className,
   header,
   nav,
+  navAriaLabel,
   startIndex = 1,
   isVisitRequired = false,
   isProgressive = false,
@@ -83,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 = (
@@ -176,7 +167,12 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} isVisitRequired={isVisitRequired} isProgressive={isProgressive} />
+        <WizardInternal
+          nav={nav}
+          navAriaLabel={navAriaLabel}
+          isVisitRequired={isVisitRequired}
+          isProgressive={isProgressive}
+        />
       </div>
     </WizardContextProvider>
   );
@@ -184,9 +180,10 @@ export const Wizard = ({
 
 const WizardInternal = ({
   nav,
+  navAriaLabel,
   isVisitRequired,
   isProgressive
-}: Pick<WizardProps, 'nav' | 'isVisitRequired' | 'isProgressive'>) => {
+}: Pick<WizardProps, 'nav' | 'navAriaLabel' | 'isVisitRequired' | 'isProgressive'>) => {
   const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
@@ -198,12 +195,13 @@ const WizardInternal = ({
     return (
       <WizardNavInternal
         nav={nav}
+        navAriaLabel={navAriaLabel}
         isNavExpanded={isNavExpanded}
         isVisitRequired={isVisitRequired}
         isProgressive={isProgressive}
       />
     );
-  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, steps]);
+  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, navAriaLabel, steps]);
 
   return (
     <WizardToggle