@patternfly/react-core 4.273.3 → 4.274.1

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

@@ -7,6 +7,8 @@ exports[`Chip closable 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-2"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    id="chip_one"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -50,6 +52,8 @@ exports[`Chip closable with tooltip 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-3"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    id="chip_one"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -94,6 +98,8 @@ exports[`Chip custom max-width text 1`] = `
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
     style="--pf-c-chip__text--MaxWidth: 100px;"
+    textmaxwidth="100px"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -134,9 +140,12 @@ exports[`Chip overflow 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-chip pf-m-overflow my-chp-cls"
+    closebtnarialabel="close"
+    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-1"
     data-ouia-component-type="PF4/OverflowChip"
     data-ouia-safe="true"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -154,6 +163,7 @@ exports[`Chip readonly 1`] = `
     data-ouia-component-id="OUIA-Generated-Chip-4"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -164,3 +174,48 @@ exports[`Chip readonly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Chip with role='gridcell' 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-chip my-chp-cls"
+    data-ouia-component-id="OUIA-Generated-Chip-6"
+    data-ouia-component-type="PF4/Chip"
+    data-ouia-safe="true"
+    role="gridcell"
+    tooltipposition="top"
+  >
+    <span
+      class="pf-c-chip__text"
+      id="pf-random-id-5"
+    >
+      I'm a roled chip
+    </span>
+    <button
+      aria-disabled="false"
+      aria-label="close"
+      aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="close"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      id="remove_pf-random-id-5"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;

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

@@ -25,6 +25,7 @@ exports[`ChipGroup chip group default 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-1"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -96,6 +97,7 @@ exports[`ChipGroup chip group with category 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-2"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -167,6 +169,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-9"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -238,6 +241,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
             data-ouia-component-id="OUIA-Generated-Chip-3"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"

package/src/components/Menu/MenuGroup.tsx

@@ -8,7 +8,7 @@ export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   /** Additional classes added to the MenuGroup */
   className?: string;
   /** Group label */
-  label?: React.ReactNode | React.FC;
+  label?: React.ReactNode;
   /** ID for title label */
   titleId?: string;
   /** Forwarded ref */
@@ -32,7 +32,7 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
       <>
         {['function', 'string'].includes(typeof label) ? (
           <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
-            {label as React.ReactNode}
+            {label}
           </Wrapper>
         ) : (
           label

package/src/components/Modal/examples/Modal.md

@@ -13,84 +13,119 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 ## Examples
 
-### Basic
+### Basic modals
+
+Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
 ```ts file="./ModalBasic.tsx"
 ```
 
-### With description
+### Scrollable modals
+
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<Modal>`.
+
+```ts file="ModalWithOverflowingContent.tsx"
+```
+
+### With a static description
+
+To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
 
 ```ts file="./ModalWithDescription.tsx"
 ```
 
 ### Top aligned
 
+To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
+
 ```ts file="./ModalTopAligned.tsx"
 ```
 
-### Small
+### Small modal
+
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default". 
+
+The following example displays a "small" modal by passing in `variant={ModalVariant.small}`.
 
 ```ts file="./ModalSmall.tsx"
 ```
 
-### Medium
+### Medium modal
+
+The following example displays a "medium" modal by passing in `variant={ModalVariant.medium}`.
 
 ```ts file="./ModalMedium.tsx"
 ```
 
-### Large
+### Large modal
+
+The following example displays a "large" modal by passing in `variant={ModalVariant.large}`.
 
 ```ts file="./ModalLarge.tsx"
 ```
 
 ### Custom width
 
+To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
+
 ```ts file="./ModalCustomWidth.tsx"
 ```
 
 ### Custom header and footer
 
+To add a custom header and footer to a modal, set the `header` and `footer` properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.
+
 ```ts file="./ModalCustomHeaderFooter.tsx"
 ```
 
 ### No header or footer
 
+To exclusively present information in a modal, remove the `header` and/or `footer`.
+
 ```ts file="./ModalNoHeaderFooter.tsx"
 ```
 
 ### Title icon
 
+To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "default" -- or to an imported custom icon. The following example uses a "warning" variant.
+
 ```ts file="./ModalTitleIcon.tsx"
 ```
 
 ### Custom title icon
 
+To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
+
 ```ts file="./ModalCustomTitleIcon.tsx"
 ```
 
 ### With wizard
 
+To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
+
 ```ts file="./ModalWithWizard.tsx"
 ```
 
 ### With dropdown
 
+To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+
 ```ts file="./ModalWithDropdown.tsx"
 ```
 
 ### With help
 
+To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
+
 ```ts file="./ModalWithHelp.tsx"
 ```
 
 ### With form
 
-```ts file="ModalWithForm.tsx"
-```
-
-### With overflowing content
+To collect user input within a modal, you can add a [form](/components/form). 
 
-If the content that you're passing to the modal is likely to overflow the modal content area, pass `tabIndex={0}` to the modal to enable keyboard accessible scrolling.
+To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id. 
 
-```ts file="ModalWithOverflowingContent.tsx"
+```ts file="ModalWithForm.tsx"
 ```
+

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

@@ -1859,6 +1859,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   data-ouia-component-id="OUIA-Generated-Chip-1"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
+                  tooltipposition="top"
                 >
                   <span
                     class="pf-c-chip__text"
@@ -1901,6 +1902,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                   data-ouia-component-id="OUIA-Generated-Chip-2"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
+                  tooltipposition="top"
                 >
                   <span
                     class="pf-c-chip__text"

package/src/components/Text/TextList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Content/content';
 import { css } from '@patternfly/react-styles';
 
 export enum TextListVariants {
@@ -14,18 +15,21 @@ export interface TextListProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The text list component */
   component?: 'ul' | 'ol' | 'dl';
+  /** Modifies the list to include plain styling */
+  isPlain?: boolean;
 }
 
 export const TextList: React.FunctionComponent<TextListProps> = ({
   children = null,
   className = '',
   component = TextListVariants.ul,
+  isPlain = false,
   ...props
 }: TextListProps) => {
   const Component: any = component;
 
   return (
-    <Component {...props} className={css(className)}>
+    <Component {...props} className={css(isPlain && styles.modifiers.plain, className)}>
       {children}
     </Component>
   );

package/src/components/Text/__tests__/TextList.test.tsx

@@ -41,6 +41,11 @@ test('Renders as "dl" element when component="dl"', () => {
   expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
 });
 
+test('Renders with plain modifier class when isPlain is set to true', () => {
+  render(<TextList isPlain>Test</TextList>);
+  expect(screen.getByRole('list')).toHaveClass('pf-m-plain');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<TextList aria-label="Test label">Test</TextList>);
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');

package/src/components/Text/examples/Text.md

@@ -29,6 +29,11 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 ```ts file="./TextOrderedList.tsx"
 ```
 
+### Plain list
+
+```ts file="./TextPlainList.tsx"
+```
+
 ### Description list
 
 ```ts file="./TextDescriptionList.tsx"

package/src/components/Text/examples/TextPlainList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, TextVariants, TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+
+export const TextPlainList: React.FunctionComponent = () => (
+  <TextContent>
+    <Text component={TextVariants.h3}>Plain unordered list</Text>
+    <TextList isPlain>
+      <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+      <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+      <TextListItem>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</TextListItem>
+      <TextListItem>Ut non enim metus.</TextListItem>
+    </TextList>
+    <Text component={TextVariants.h3}>Plain ordered list</Text>
+    <TextList component={TextListVariants.ol} isPlain>
+      <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
+      <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
+      <TextListItem>Integer in volutpat libero.</TextListItem>
+      <TextListItem>Donec a diam tellus.</TextListItem>
+      <TextListItem>Aenean nec tortor orci.</TextListItem>
+      <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
+      <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
+    </TextList>
+  </TextContent>
+);

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

@@ -297,6 +297,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     data-ouia-component-id="OUIA-Generated-Chip-1"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
+                    tooltipposition="top"
                   >
                     <span
                       class="pf-c-chip__text"
@@ -339,6 +340,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     data-ouia-component-id="OUIA-Generated-Chip-2"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
+                    tooltipposition="top"
                   >
                     <span
                       class="pf-c-chip__text"

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

@@ -1,20 +1,18 @@
 import React from 'react';
-import findLastIndex from 'lodash/findLastIndex';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import {
   isWizardParentStep,
-  WizardNavStepFunction,
-  WizardControlStep,
+  WizardStepType,
   isCustomWizardNav,
   WizardFooterType,
-  WizardNavType
+  WizardNavType,
+  WizardStepChangeScope
 } from './types';
-import { buildSteps, normalizeNavStep } from './utils';
+import { buildSteps } from './utils';
 import { useWizardContext, WizardContextProvider } from './WizardContext';
-import { WizardStepProps } from './WizardStep';
 import { WizardToggle } from './WizardToggle';
 import { WizardNavInternal } from './WizardNavInternal';
 
@@ -25,7 +23,7 @@ import { WizardNavInternal } from './WizardNavInternal';
 
 export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** Step components */
-  children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[];
+  children: React.ReactNode | React.ReactNode[];
   /** Wizard header */
   header?: React.ReactNode;
   /** Wizard footer */
@@ -40,18 +38,21 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   width?: number | string;
   /** Custom height of the wizard */
   height?: number | string;
-  /** Disables navigation items that haven't been visited. Defaults to false */
-  isStepVisitRequired?: boolean;
-  /** Callback function when a step in the navigation is clicked */
-  onNavByIndex?: WizardNavStepFunction;
-  /** Callback function after next button is clicked */
-  onNext?: WizardNavStepFunction;
-  /** Callback function after back button is clicked */
-  onBack?: WizardNavStepFunction;
+  /** Disables steps that haven't been visited. Defaults to false. */
+  isVisitRequired?: boolean;
+  /** Progressively shows steps, where all steps following the active step are hidden. Defaults to false. */
+  isProgressive?: boolean;
+  /** Callback function when navigating between steps */
+  onStepChange?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    currentStep: WizardStepType,
+    prevStep: WizardStepType,
+    scope: WizardStepChangeScope
+  ) => void | Promise<void>;
   /** Callback function to save at the end of the wizard, if not specified uses onClose */
-  onSave?: () => void | Promise<void>;
+  onSave?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
   /** Callback function to close the wizard */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const Wizard = ({
@@ -63,48 +64,61 @@ export const Wizard = ({
   header,
   nav,
   startIndex = 1,
-  isStepVisitRequired = false,
-  onNavByIndex,
-  onNext,
-  onBack,
+  isVisitRequired = false,
+  isProgressive = false,
+  onStepChange,
   onSave,
   onClose,
   ...wrapperProps
 }: WizardProps) => {
   const [activeStepIndex, setActiveStepIndex] = React.useState(startIndex);
   const initialSteps = buildSteps(children);
+  const firstStepRef = React.useRef(initialSteps[startIndex - 1]);
 
-  const goToNextStep = (steps: WizardControlStep[] = initialSteps) => {
-    const newStepIndex = steps.find(step => step.index > activeStepIndex && !step.isHidden && !isWizardParentStep(step))
-      ?.index;
+  // When the startIndex maps to a parent step, focus on the first sub-step
+  React.useEffect(() => {
+    if (isWizardParentStep(firstStepRef.current)) {
+      setActiveStepIndex(startIndex + 1);
+    }
+  }, [startIndex]);
+
+  const goToNextStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
+    const newStep = steps.find(
+      step => step.index > activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
+    );
 
-    if (activeStepIndex >= steps.length || !newStepIndex) {
-      return onSave ? onSave() : onClose?.();
+    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(newStepIndex);
-    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    setActiveStepIndex(newStep?.index);
+    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Next);
   };
 
-  const goToPrevStep = (steps: WizardControlStep[] = initialSteps) => {
-    const newStepIndex =
-      findLastIndex(
-        steps,
-        (step: WizardControlStep) => step.index < activeStepIndex && !step.isHidden && !isWizardParentStep(step)
-      ) + 1;
+  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];
 
-    setActiveStepIndex(newStepIndex);
-    return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    setActiveStepIndex(newStep?.index);
+    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Back);
   };
 
-  const goToStepByIndex = (steps: WizardControlStep[] = initialSteps, index: number) => {
+  const goToStepByIndex = (
+    event: React.MouseEvent<HTMLButtonElement>,
+    steps: WizardStepType[] = initialSteps,
+    index: number
+  ) => {
     const lastStepIndex = steps.length + 1;
 
     // Handle index when out of bounds or hidden
@@ -118,25 +132,25 @@ export const Wizard = ({
     const prevStep = steps[activeStepIndex - 1];
 
     setActiveStepIndex(index);
-    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Nav);
   };
 
-  const goToStepById = (steps: WizardControlStep[] = initialSteps, id: number | string) => {
+  const goToStepById = (steps: WizardStepType[] = initialSteps, id: number | string) => {
     const step = steps.find(step => step.id === id);
     const stepIndex = step?.index;
     const lastStepIndex = steps.length + 1;
 
-    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isHidden) {
+    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isDisabled && !step.isHidden) {
       setActiveStepIndex(stepIndex);
     }
   };
 
-  const goToStepByName = (steps: WizardControlStep[] = initialSteps, name: string) => {
+  const goToStepByName = (steps: WizardStepType[] = initialSteps, name: string) => {
     const step = steps.find(step => step.name === name);
     const stepIndex = step?.index;
     const lastStepIndex = steps.length + 1;
 
-    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isHidden) {
+    if (stepIndex > 0 && stepIndex < lastStepIndex && !step.isDisabled && !step.isHidden) {
       setActiveStepIndex(stepIndex);
     }
   };
@@ -162,13 +176,17 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} isStepVisitRequired={isStepVisitRequired} />
+        <WizardInternal nav={nav} isVisitRequired={isVisitRequired} isProgressive={isProgressive} />
       </div>
     </WizardContextProvider>
   );
 };
 
-const WizardInternal = ({ nav, isStepVisitRequired }: Pick<WizardProps, 'nav' | 'isStepVisitRequired'>) => {
+const WizardInternal = ({
+  nav,
+  isVisitRequired,
+  isProgressive
+}: Pick<WizardProps, 'nav' | 'isVisitRequired' | 'isProgressive'>) => {
   const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
@@ -177,8 +195,15 @@ const WizardInternal = ({ nav, isStepVisitRequired }: Pick<WizardProps, 'nav' |
       return typeof nav === 'function' ? nav(isNavExpanded, steps, activeStep, goToStepByIndex) : nav;
     }
 
-    return <WizardNavInternal nav={nav} isNavExpanded={isNavExpanded} isStepVisitRequired={isStepVisitRequired} />;
-  }, [activeStep, isStepVisitRequired, goToStepByIndex, isNavExpanded, nav, steps]);
+    return (
+      <WizardNavInternal
+        nav={nav}
+        isNavExpanded={isNavExpanded}
+        isVisitRequired={isVisitRequired}
+        isProgressive={isProgressive}
+      />
+    );
+  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, steps]);
 
   return (
     <WizardToggle