@patternfly/react-core 4.234.4 → 4.235.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.234.4",
+  "version": "4.235.2",
   "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",
@@ -50,9 +50,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.85.4",
-    "@patternfly/react-styles": "^4.84.4",
-    "@patternfly/react-tokens": "^4.86.4",
+    "@patternfly/react-icons": "^4.86.2",
+    "@patternfly/react-styles": "^4.85.2",
+    "@patternfly/react-tokens": "^4.87.2",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,21 +60,21 @@
   },
   "devDependencies": {
     "@patternfly/patternfly": "4.210.2",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-replace": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.78.0",
+    "rollup": "^2.58.0",
     "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-terser": "^7.0.0",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "e81e03d5ab610e49b5ce0a3cacaef33f90ae514e"
+  "gitHead": "481223940736dfb78100455556d8aa23738cec66"
 }

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

@@ -13,6 +13,8 @@ import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-ico
 import FinishedStep from './FinishedStep';
 import SampleForm from './SampleForm';
 
+If you seek a wizard solution that allows for more composition, see the [React next](/components/wizard/react-next) tab.
+
 ## Examples
 
 ### Basic
@@ -54,7 +56,7 @@ class SimpleWizard extends React.Component {
   render() {
     const steps = [
       { name: 'First step', component: <p>Step 1 content</p> },
-      { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true},
+      { 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' }
@@ -145,9 +147,24 @@ class IncrementallyEnabledStepsWizard extends React.Component {
 
     const steps = [
       { id: 'incrementally-enabled-1', name: 'First step', component: <p>Step 1 content</p> },
-      { id: 'incrementally-enabled-2', name: 'Second step', component: <p>Step 2 content</p>, canJumpTo: stepIdReached >= 2 },
-      { id: 'incrementally-enabled-3', name: 'Third step', component: <p>Step 3 content</p>, canJumpTo: stepIdReached >= 3 },
-      { id: 'incrementally-enabled-4', name: 'Fourth step', component: <p>Step 4 content</p>, canJumpTo: stepIdReached >= 4 },
+      {
+        id: 'incrementally-enabled-2',
+        name: 'Second step',
+        component: <p>Step 2 content</p>,
+        canJumpTo: stepIdReached >= 2
+      },
+      {
+        id: 'incrementally-enabled-3',
+        name: 'Third step',
+        component: <p>Step 3 content</p>,
+        canJumpTo: stepIdReached >= 3
+      },
+      {
+        id: 'incrementally-enabled-4',
+        name: 'Fourth step',
+        component: <p>Step 4 content</p>,
+        canJumpTo: stepIdReached >= 4
+      },
       {
         id: 'incrementally-enabled-5',
         name: 'Review',

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

@@ -0,0 +1,184 @@
+import React from 'react';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import {
+  DefaultWizardFooterProps,
+  DefaultWizardNavProps,
+  isCustomWizardFooter,
+  isWizardParentStep,
+  WizardNavStepFunction,
+  CustomWizardNavFunction
+} from './types';
+import { buildSteps, normalizeNavStep } from './utils';
+import { useWizardContext, WizardContextProvider } from './WizardContext';
+import { WizardStepProps } from './WizardStep';
+import { WizardFooter } from './WizardFooter';
+import { WizardToggle } from './WizardToggle';
+
+/**
+ * Wrapper for all steps and hosts state, including navigation helpers, within context.
+ * The WizardContext provided by default gives any child of wizard access to those resources.
+ */
+
+export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
+  /** Step components */
+  children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[];
+  /** Wizard header */
+  header?: React.ReactNode;
+  /** Wizard footer */
+  footer?: DefaultWizardFooterProps | React.ReactElement;
+  /** Default wizard nav props or a custom WizardNav (with callback) */
+  nav?: DefaultWizardNavProps | CustomWizardNavFunction;
+  /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
+  startIndex?: number;
+  /** Additional classes spread to the wizard */
+  className?: string;
+  /** Custom width of the wizard */
+  width?: number | string;
+  /** Custom height of the wizard */
+  height?: number | string;
+  /** Callback function when a step in the nav is clicked */
+  onNavByIndex?: WizardNavStepFunction;
+  /** Callback function after next button is clicked */
+  onNext?: WizardNavStepFunction;
+  /** Callback function after back button is clicked */
+  onBack?: WizardNavStepFunction;
+  /** Callback function to save at the end of the wizard, if not specified uses onClose */
+  onSave?: () => void;
+  /** Callback function to close the wizard */
+  onClose?: () => void;
+}
+
+export const Wizard = (props: WizardProps) => {
+  const { startIndex = 1, children, footer, onNavByIndex, onNext, onBack, onSave, onClose, ...internalProps } = props;
+  const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
+  const steps = buildSteps(children);
+
+  const goToStepByIndex = (index: number) => {
+    const lastStepIndex = steps.length;
+
+    if (index < 1) {
+      index = 1;
+    } else if (index > lastStepIndex) {
+      index = lastStepIndex;
+    }
+
+    const currStep = steps[index - 1];
+    const prevStep = steps[currentStepIndex - 1];
+    setCurrentStepIndex(index);
+
+    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+  };
+
+  const goToNextStep = () => {
+    // Save when on the last step, otherwise close
+    if (currentStepIndex >= steps.length) {
+      if (onSave) {
+        return onSave();
+      }
+
+      return onClose?.();
+    }
+
+    let currStep = steps[currentStepIndex];
+    let newStepIndex = currentStepIndex + 1;
+    const prevStep = steps[currentStepIndex - 1];
+
+    // Skip parent step and focus on the first sub-step if they exist
+    if (isWizardParentStep(currStep)) {
+      newStepIndex += 1;
+      currStep = steps[currentStepIndex + 1];
+    }
+
+    setCurrentStepIndex(newStepIndex);
+    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+  };
+
+  const goToPrevStep = () => {
+    if (steps.length < currentStepIndex) {
+      // Previous step was removed, just update the currentStep state
+      setCurrentStepIndex(steps.length);
+    } else {
+      let currStep = steps[currentStepIndex - 2];
+      let newStepIndex = currentStepIndex - 1;
+      const prevStep = steps[currentStepIndex - 1];
+
+      // // Skip parent step and focus on the step prior
+      if (isWizardParentStep(currStep)) {
+        newStepIndex -= 1;
+        currStep = steps[currentStepIndex - 3];
+      }
+
+      setCurrentStepIndex(newStepIndex);
+      return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    }
+  };
+
+  const goToStepById = (id: number | string) => {
+    const stepIndex = steps.findIndex(step => step.id === id) + 1;
+    stepIndex > 0 && setCurrentStepIndex(stepIndex);
+  };
+
+  const goToStepByName = (name: string) => {
+    const stepIndex = steps.findIndex(step => step.name === name) + 1;
+    stepIndex > 0 && setCurrentStepIndex(stepIndex);
+  };
+
+  return (
+    <WizardContextProvider
+      steps={steps}
+      currentStepIndex={currentStepIndex}
+      footer={isCustomWizardFooter(footer) && footer}
+      onNext={goToNextStep}
+      onBack={goToPrevStep}
+      onClose={onClose}
+      goToStepById={goToStepById}
+      goToStepByName={goToStepByName}
+      goToStepByIndex={goToStepByIndex}
+    >
+      <WizardInternal {...internalProps} footer={footer}>
+        {children}
+      </WizardInternal>
+    </WizardContextProvider>
+  );
+};
+
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
+const WizardInternal = ({ height, width, className, header, footer, nav, ...divProps }: WizardProps) => {
+  const { activeStep, steps, footer: customFooter, onNext, onBack, onClose, goToStepByIndex } = useWizardContext();
+
+  const wizardFooter = customFooter || (
+    <WizardFooter
+      activeStep={activeStep}
+      onNext={onNext}
+      onBack={onBack}
+      onClose={onClose}
+      disableBackButton={activeStep?.id === steps[0]?.id}
+      {...footer}
+    />
+  );
+
+  return (
+    <div
+      className={css(styles.wizard, className)}
+      style={{
+        ...(height ? { height } : {}),
+        ...(width ? { width } : {})
+      }}
+      {...divProps}
+    >
+      {header}
+      <WizardToggle
+        steps={steps}
+        activeStep={activeStep}
+        footer={wizardFooter}
+        nav={nav}
+        goToStepByIndex={goToStepByIndex}
+      />
+    </div>
+  );
+};
+
+Wizard.displayName = 'Wizard';

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
+ */
+
+export interface WizardBodyProps {
+  children?: React.ReactNode | React.ReactNode[];
+  /** Set to true to remove the default body padding */
+  hasNoBodyPadding?: boolean;
+  /** An aria-label to use for the wrapper element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute for the wrapper element */
+  'aria-labelledby'?: string;
+  /** Component used as the wrapping content container */
+  wrapperElement?: React.ElementType;
+}
+
+export const WizardBody = ({
+  children,
+  hasNoBodyPadding = false,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  wrapperElement: Wrapper = 'div'
+}: WizardBodyProps) => (
+  <Wrapper aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
+    <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+  </Wrapper>
+);
+
+WizardBody.displayName = 'WizardBody';

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { WizardControlStep } from './types';
+import { getActiveStep } from './utils';
+
+export interface WizardContextProps {
+  /** List of steps */
+  steps: WizardControlStep[];
+  /** Active step */
+  activeStep: WizardControlStep;
+  /** Footer element */
+  footer: React.ReactElement;
+  /** Navigate to the next step */
+  onNext: () => void;
+  /** Navigate to the previous step */
+  onBack: () => void;
+  /** Close the wizard */
+  onClose: () => void;
+  /** Navigate to step by ID */
+  goToStepById: (id: number | string) => void;
+  /** Navigate to step by name */
+  goToStepByName: (name: string) => void;
+  /** Navigate to step by index */
+  goToStepByIndex: (index: number) => void;
+  /** Update the footer with any react element */
+  setFooter: (footer: React.ReactElement) => void;
+}
+
+export const WizardContext = React.createContext({} as WizardContextProps);
+
+interface WizardContextRenderProps {
+  steps: WizardControlStep[];
+  activeStep: WizardControlStep;
+  footer: React.ReactElement;
+  onNext(): void;
+  onBack(): void;
+  onClose(): void;
+}
+
+export interface WizardContextProviderProps {
+  steps: WizardControlStep[];
+  currentStepIndex: number;
+  footer: React.ReactElement;
+  children: React.ReactElement | ((props: WizardContextRenderProps) => React.ReactElement);
+  onNext(): void;
+  onBack(): void;
+  onClose(): void;
+  goToStepById(id: number | string): void;
+  goToStepByName(name: string): void;
+  goToStepByIndex(index: number): void;
+}
+
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
+export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
+  steps: initialSteps,
+  footer: initialFooter,
+  currentStepIndex,
+  children,
+  onNext,
+  onBack,
+  onClose,
+  goToStepById,
+  goToStepByName,
+  goToStepByIndex
+}) => {
+  const [steps, setSteps] = React.useState(initialSteps);
+  const [footer, setFooter] = React.useState(initialFooter);
+  const activeStep = getActiveStep(steps, currentStepIndex);
+
+  // When the active step changes and the newly active step isn't visited, set the visited flag to true.
+  React.useEffect(() => {
+    if (activeStep && !activeStep?.visited) {
+      setSteps(prevSteps =>
+        prevSteps.map(step => {
+          if (step.id === activeStep.id) {
+            return { ...step, visited: true };
+          }
+
+          return step;
+        })
+      );
+    }
+  }, [activeStep]);
+
+  return (
+    <WizardContext.Provider
+      value={{
+        steps,
+        activeStep,
+        footer,
+        onNext,
+        onBack,
+        onClose,
+        goToStepById,
+        goToStepByName,
+        goToStepByIndex,
+        setFooter
+      }}
+    >
+      {typeof children === 'function' ? children({ activeStep, steps, footer, onNext, onBack, onClose }) : children}
+    </WizardContext.Provider>
+  );
+};
+
+export const useWizardContext = () => React.useContext(WizardContext);

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

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import { Button, ButtonVariant } from '../../../components/Button';
+import { WizardControlStep, WizardNavStepFunction } 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.
+ */
+
+export interface WizardFooterProps {
+  /** The currently active WizardStep */
+  activeStep: WizardControlStep;
+  /** Next button callback */
+  onNext: () => WizardNavStepFunction | void;
+  /** Back button callback */
+  onBack: () => WizardNavStepFunction | void;
+  /** Cancel link callback */
+  onClose: () => void;
+  /** Custom text for the Next button. The activeStep's nextButtonText takes precedence. */
+  nextButtonText?: React.ReactNode;
+  /** Custom text for the Back button */
+  backButtonText?: React.ReactNode;
+  /** Custom text for the Cancel link */
+  cancelButtonText?: React.ReactNode;
+  /** Optional flag to disable the first step's back button */
+  disableBackButton?: boolean;
+}
+
+export const WizardFooter = ({
+  onNext,
+  onBack,
+  onClose,
+  activeStep,
+  disableBackButton,
+  nextButtonText = 'Next',
+  backButtonText = 'Back',
+  cancelButtonText = 'Cancel'
+}: WizardFooterProps) => (
+  <footer className={css(styles.wizardFooter)}>
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={activeStep?.disableNext}>
+      {activeStep?.nextButtonText || nextButtonText}
+    </Button>
+
+    {!activeStep?.hideBackButton && (
+      <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={disableBackButton}>
+        {backButtonText}
+      </Button>
+    )}
+
+    {!activeStep?.hideCancelButton && (
+      <div className={styles.wizardFooterCancel}>
+        <Button variant={ButtonVariant.link} onClick={onClose}>
+          {cancelButtonText}
+        </Button>
+      </div>
+    )}
+  </footer>
+);
+
+WizardFooter.displayName = 'WizardFooter';

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../../../components/Button';
+import { Title } from '../../../components/Title';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export interface WizardHeaderProps {
+  /** Callback function called when the X (Close) button is clicked */
+  onClose?: () => void;
+  /** Title of the wizard */
+  title: string;
+  /** Description of the wizard */
+  description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
+  /** Flag indicating whether the close button should be in the header */
+  hideClose?: boolean;
+  /** Aria-label applied to the X (Close) button */
+  closeButtonAriaLabel?: string;
+  /** id for the title */
+  titleId?: string;
+  /** id for the description */
+  descriptionId?: string;
+}
+
+export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
+  onClose = () => undefined,
+  title,
+  description,
+  hideClose,
+  closeButtonAriaLabel,
+  titleId,
+  descriptionComponent: Component = 'p',
+  descriptionId
+}: WizardHeaderProps) => (
+  <div className={css(styles.wizardHeader)}>
+    {!hideClose && (
+      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
+        <TimesIcon aria-hidden="true" />
+      </Button>
+    )}
+    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
+      {title || <>&nbsp;</>}
+    </Title>
+    {description && (
+      <Component className={css(styles.wizardDescription)} id={descriptionId}>
+        {description}
+      </Component>
+    )}
+  </div>
+);
+WizardHeader.displayName = 'WizardHeader';

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import { css } from '@patternfly/react-styles';
+
+export interface WizardNavProps {
+  /** children should be WizardNavItem components */
+  children?: any;
+  /** Aria-label applied to the nav element */
+  'aria-label'?: string;
+  /** Sets the aria-labelledby attribute on the nav element */
+  'aria-labelledby'?: string;
+  /** Whether the nav is expanded */
+  isOpen?: boolean;
+  /** True to return the inner list without the wrapping nav element */
+  returnList?: boolean;
+}
+
+export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
+  children,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  isOpen = false,
+  returnList = false
+}: WizardNavProps) => {
+  const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
+
+  if (returnList) {
+    return innerList;
+  }
+
+  return (
+    <nav
+      className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <ol className={css(styles.wizardNavList)}>{children}</ol>
+    </nav>
+  );
+};
+WizardNav.displayName = 'WizardNav';

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

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+
+export interface WizardNavItemProps {
+  /** Can nest a WizardNav component for substeps */
+  children?: React.ReactNode;
+  /** The content to display in the nav item */
+  content?: React.ReactNode;
+  /** Whether the nav item is the currently active item */
+  isCurrent?: boolean;
+  /** Whether the nav item is disabled */
+  isDisabled?: boolean;
+  /** The step passed into the onNavItemClick callback */
+  step: number;
+  /** Callback for when the nav item is clicked */
+  onNavItemClick?: (step: number) => any;
+  /** Component used to render WizardNavItem */
+  navItemComponent?: 'button' | 'a';
+  /** An optional url to use for when using an anchor component */
+  href?: string;
+  /** Flag indicating that this NavItem has child steps and is expandable */
+  isExpandable?: boolean;
+  /** The id for the nav item */
+  id?: string | number;
+}
+
+export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
+  children = null,
+  content = '',
+  isCurrent = false,
+  isDisabled = false,
+  step,
+  onNavItemClick = () => undefined,
+  navItemComponent = 'button',
+  href = null,
+  isExpandable = false,
+  id,
+  ...rest
+}: WizardNavItemProps) => {
+  const NavItemComponent = navItemComponent;
+
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsExpanded(isCurrent);
+  }, [isCurrent]);
+
+  if (navItemComponent === 'a' && !href && process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.error('WizardNavItem: When using an anchor, please provide an href');
+  }
+
+  const btnProps = {
+    disabled: isDisabled
+  };
+
+  const linkProps = {
+    tabIndex: isDisabled ? -1 : undefined,
+    href
+  };
+
+  return (
+    <li
+      className={css(
+        styles.wizardNavItem,
+        isExpandable && styles.modifiers.expandable,
+        isExpandable && isExpanded && styles.modifiers.expanded
+      )}
+    >
+      <NavItemComponent
+        {...rest}
+        {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
+        {...(id && { id: id.toString() })}
+        onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
+        className={css(
+          styles.wizardNavLink,
+          isCurrent && styles.modifiers.current,
+          isDisabled && styles.modifiers.disabled
+        )}
+        aria-disabled={isDisabled ? true : null}
+        aria-current={isCurrent && !children ? 'step' : false}
+        {...(isExpandable && { 'aria-expanded': isExpanded })}
+      >
+        {isExpandable ? (
+          <>
+            <span className={css(styles.wizardNavLinkText)}>{content}</span>
+            <span className={css(styles.wizardNavLinkToggle)}>
+              <span className={css(styles.wizardNavLinkToggleIcon)}>
+                <AngleRightIcon />
+              </span>
+            </span>
+          </>
+        ) : (
+          content
+        )}
+      </NavItemComponent>
+      {children}
+    </li>
+  );
+};
+WizardNavItem.displayName = 'WizardNavItem';