@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.3

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot by default 1`] = `
+<DocumentFragment>
+  <ul
+    class="pf-v5-c-tree-view__list"
+    role="tree"
+  >
+    Content
+  </ul>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot when toolbar is passed 1`] = `
+<DocumentFragment>
+  <div>
+    Toolbar content
+  </div>
+  <hr
+    class="pf-v5-c-divider"
+  />
+  <ul
+    class="pf-v5-c-tree-view__list"
+    role="tree"
+  >
+    Content
+  </ul>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with children 1`] = `
+<DocumentFragment>
+  <li
+    aria-expanded="false"
+    class="pf-v5-c-tree-view__list-item"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="pf-v5-c-tree-view__content"
+    >
+      <button
+        class="pf-v5-c-tree-view__node"
+        type="button"
+      >
+        <span
+          class="pf-v5-c-tree-view__node-container"
+        >
+          <span
+            class="pf-v5-c-tree-view__node-toggle"
+            tabindex="-1"
+          >
+            <span
+              class="pf-v5-c-tree-view__node-toggle-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                />
+              </svg>
+            </span>
+          </span>
+          <span
+            class="pf-v5-c-tree-view__node-text"
+          >
+            Item name
+          </span>
+        </span>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without children 1`] = `
+<DocumentFragment>
+  <li
+    aria-expanded="false"
+    class="pf-v5-c-tree-view__list-item"
+    role="treeitem"
+    tabindex="-1"
+  >
+    <div
+      class="pf-v5-c-tree-view__content"
+    >
+      <button
+        class="pf-v5-c-tree-view__node"
+        type="button"
+      >
+        <span
+          class="pf-v5-c-tree-view__node-container"
+        >
+          <span
+            class="pf-v5-c-tree-view__node-text"
+          >
+            Item name
+          </span>
+        </span>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tree-view"
+  >
+    <div
+      class="pf-v5-c-tree-view__node"
+      tabindex="0"
+    >
+      Content
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-tree-view__search"
+  >
+    <div
+      class="pf-v5-c-form-control pf-m-icon"
+    >
+      <input
+        type="search"
+      />
+      <div
+        class="pf-v5-c-form-control__utilities"
+      >
+        <div
+          class="pf-v5-c-form-control__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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' }}>

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Wizard, WizardFooterProps, WizardStep, WizardNavProps } from '../';
+import { Wizard, WizardFooterProps, WizardStep, WizardNavProps, WizardStepChangeScope } from '../';
 
 test('renders step when child is of type WizardStep', () => {
   render(
@@ -58,6 +58,27 @@ test('renders default footer with custom props', () => {
   expect(screen.getByRole('button', { name: 'Leave now!' })).toBeVisible();
 });
 
+test('can add props to default footer buttons', () => {
+  render(
+    <Wizard
+      footer={{
+        nextButtonProps: { id: 'next-button', className: 'custom-class' },
+        backButtonProps: { id: 'back-button' },
+        cancelButtonProps: { id: 'cancel-button' }
+      }}
+    >
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', { name: 'Next' });
+
+  expect(nextButton).toHaveProperty('id', 'next-button');
+  expect(nextButton).toHaveClass('custom-class');
+  expect(screen.getByRole('button', { name: 'Back' })).toHaveProperty('id', 'back-button');
+  expect(screen.getByRole('button', { name: 'Cancel' })).toHaveProperty('id', 'cancel-button');
+});
+
 test('renders custom footer', () => {
   render(
     <Wizard footer={<>Some footer</>}>
@@ -100,7 +121,6 @@ test('renders default nav with custom props', () => {
 });
 
 test('renders nav aria label', () => {
-
   render(
     <Wizard navAriaLabel="custom nav aria-label">
       <WizardStep id="test-step" name="Test step" />
@@ -174,28 +194,33 @@ test(`can customize the wizard's height and width`, () => {
   expect(wizard).toHaveStyle('width: 500px');
 });
 
-test('calls onNavByIndex on nav item click', async () => {
+test('calls onStepChange on nav item click', async () => {
   const user = userEvent.setup();
-  const onNavByIndex = jest.fn();
+  const onStepChange = jest.fn();
 
   render(
-    <Wizard onStepChange={onNavByIndex}>
+    <Wizard onStepChange={onStepChange}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
   );
 
   await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-  expect(onNavByIndex).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-2' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Nav
+  );
 });
 
-test('calls onNext and not onSave on next button click when not on the last step', async () => {
+test('calls onStepChange and not onSave on next button click when not on the last step', async () => {
   const user = userEvent.setup();
-  const onNext = jest.fn();
+  const onStepChange = jest.fn();
   const onSave = jest.fn();
 
   render(
-    <Wizard onStepChange={onNext} onSave={onSave}>
+    <Wizard onStepChange={onStepChange} onSave={onSave}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -203,16 +228,21 @@ test('calls onNext and not onSave on next button click when not on the last step
 
   await user.click(screen.getByRole('button', { name: 'Next' }));
 
-  expect(onNext).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-2' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Next
+  );
   expect(onSave).not.toHaveBeenCalled();
 });
 
-test('calls onBack on back button click', async () => {
+test('calls onStepChange on back button click', async () => {
   const user = userEvent.setup();
-  const onBack = jest.fn();
+  const onStepChange = jest.fn();
 
   render(
-    <Wizard onStepChange={onBack}>
+    <Wizard onStepChange={onStepChange}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -221,7 +251,12 @@ test('calls onBack on back button click', async () => {
   await user.click(screen.getByRole('button', { name: 'Test step 2' }));
   await user.click(screen.getByRole('button', { name: 'Back' }));
 
-  expect(onBack).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-1' }),
+    expect.objectContaining({ id: 'step-2' }),
+    WizardStepChangeScope.Back
+  );
 });
 
 test('calls onSave and not onClose on next button click when on the last step', async () => {
@@ -445,17 +480,153 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   ).toBeNull();
 });
 
-test('parent step can be non-collapsible by setting isCollapsible to false', () => {
+test('parent step can be expandable by setting isExpandable to true', () => {
+  render(
+    <Wizard>
+      <WizardStep
+        id="step-1"
+        name="Test step 1"
+        isExpandable
+        steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
+      />
+    </Wizard>
+  );
+
+  expect(screen.getByLabelText('step icon', { exact: false })).toBeVisible();
+});
+
+test('child steps are disabled when parent is disabled', () => {
   render(
     <Wizard>
       <WizardStep
         id="step-1"
         name="Test step 1"
-        isCollapsible={false}
+        isDisabled
         steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
       />
     </Wizard>
   );
 
-  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeDisabled();
+  expect(
+    screen.getByRole('button', {
+      name: 'Sub step 1'
+    })
+  ).toBeDisabled();
+});
+
+test('child steps are hidden when parent is hidden', () => {
+  render(
+    <Wizard>
+      <WizardStep id="step-1" name="Test step 1" isHidden steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]} />
+    </Wizard>
+  );
+
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeNull();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Sub step 1'
+    })
+  ).toBeNull();
+});
+
+test('onStepChange skips over disabled or hidden steps and substeps', async () => {
+  const user = userEvent.setup();
+  const onStepChange = jest.fn();
+
+  render(
+    <Wizard onStepChange={onStepChange}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep id="step-2" name="Test step 2" steps={[<WizardStep id="step2-sub1" name="Test Substep 1" />]} />
+      <WizardStep id="step-3" name="Test step 3" isDisabled />
+      <WizardStep
+        id="step-4"
+        name="Test step 4"
+        isDisabled
+        steps={[<WizardStep id="step4-sub1" name="Test Substep 1" />]}
+      />
+      <WizardStep
+        id="step-5"
+        name="Test step 4"
+        steps={[
+          <WizardStep id="step5-sub1" name="Test Substep 1" isDisabled />,
+          <WizardStep id="step5-sub2" name="Test Substep 2" />
+        ]}
+      />
+      <WizardStep id="step-6" name="Test step 6" isHidden />
+      <WizardStep
+        id="step-7"
+        name="Test step 7"
+        isHidden
+        steps={[<WizardStep id="step7-sub1" name="Test Substep 1" />]}
+      />
+      <WizardStep
+        id="step-8"
+        name="Test step 8"
+        steps={[
+          <WizardStep id="step8-sub1" name="Test Substep 1" isHidden />,
+          <WizardStep id="step8-sub2" name="Test Substep 2" />
+        ]}
+      />
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', { name: 'Next' });
+  const backButton = screen.getByRole('button', { name: 'Back' });
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub1' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step5-sub2' }),
+    expect.objectContaining({ id: 'step2-sub1' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step8-sub2' }),
+    expect.objectContaining({ id: 'step5-sub2' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step5-sub2' }),
+    expect.objectContaining({ id: 'step8-sub2' }),
+    WizardStepChangeScope.Back
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub1' }),
+    expect.objectContaining({ id: 'step5-sub2' }),
+    WizardStepChangeScope.Back
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-1' }),
+    expect.objectContaining({ id: 'step2-sub1' }),
+    WizardStepChangeScope.Back
+  );
 });

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

@@ -10,7 +10,7 @@ test('renders children without additional props', () => {
   expect(container).not.toHaveAttribute('aria-labelledby');
 });
 
-test('has no padding className when hasNoBodyPadding is not specified', () => {
+test('has no padding className when hasNoPadding is not specified', () => {
   render(<WizardBody>content</WizardBody>);
   expect(screen.getByText('content')).not.toHaveClass('pf-m-no-padding');
 });

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

@@ -58,7 +58,7 @@ test('renders only the active step content by default', async () => {
   render(<WizardToggle {...defaultProps} />);
 
   expect(screen.getByText('First step content')).toBeInTheDocument();
-  expect(screen.queryByText('Second step content')).toBeNull;
+  expect(screen.queryByText('Second step content')).toBeNull();
 });
 
 test('has expanded properties when the toggle dropdown button is clicked', async () => {
@@ -95,7 +95,7 @@ test('unsets expanded properties when using the Escape key', async () => {
   expect(toggleButton).not.toHaveClass('pf-m-expanded');
 });
 
-const WizardToggleExpand = props => {
+const WizardToggleExpand = (props) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   return (

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

@@ -31,7 +31,7 @@ describe('buildSteps', () => {
   });
 
   test('returns flattened array of steps and sub-steps when sub-steps exist', () => {
-    const CustomSubStep = props => <div {...props} />;
+    const CustomSubStep = (props) => <div {...props} />;
 
     const component = (
       <WizardStep