@patternfly/react-core 4.273.3 → 4.274.1

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardWithHeader: React.FunctionComponent = () => (
+  <Wizard
+    height={400}
+    title="Header wizard"
+    header={
+      <WizardHeader
+        title="You're a wizard, Harry"
+        description="To be clear, all those not named Harry are not wizards."
+        closeButtonAriaLabel="Close header"
+      />
+    }
+  >
+    <WizardStep name="Step 1" id="header-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="header-second-step">
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Review" id="header-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Button } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
+
+export const WizardWithNavAnchors: React.FunctionComponent = () => (
+  <Wizard height={400} title="Anchor link wizard">
+    <WizardStep
+      name={
+        <>
+          <ExternalLinkAltIcon /> PF3
+        </>
+      }
+      id="navanchors-pf3-step"
+      navItem={{ component: 'a', href: 'https://www.patternfly.org/v3', target: '_blank' }}
+    >
+      Step 1: Read about PF3
+    </WizardStep>
+    <WizardStep
+      name={
+        <>
+          <ExternalLinkAltIcon /> PF4
+        </>
+      }
+      id="navanchors-pf4-step"
+      navItem={{ component: 'a', href: 'https://www.patternfly.org/v4', target: '_blank' }}
+    >
+      Step 2: Read about PF4
+    </WizardStep>
+    <WizardStep
+      name={
+        <>
+          <SlackHashIcon /> Join us on slack
+        </>
+      }
+      id="navanchors-slack-step"
+      navItem={{ component: 'a', href: 'https://patternfly.slack.com', target: '_blank' }}
+    >
+      <Button variant="link" component="a" target="_blank" href="https://patternfly.slack.com">
+        Join the conversation
+      </Button>
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions,
+  Title,
+  Progress,
+  Button
+} from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+
+interface ValidationProgressProps {
+  onClose(): void;
+}
+
+const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {
+  const [percentValidated, setPercentValidated] = React.useState(0);
+
+  const tick = React.useCallback(() => {
+    if (percentValidated < 100) {
+      setPercentValidated(prevValue => prevValue + 20);
+    }
+  }, [percentValidated]);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => tick(), 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [tick]);
+
+  return (
+    <div className="pf-l-bullseye">
+      <EmptyState variant="large">
+        <EmptyStateIcon icon={CogsIcon} />
+        <Title headingLevel="h4" size="lg">
+          {percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        </Title>
+        <EmptyStateBody>
+          <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
+        </EmptyStateBody>
+        <EmptyStateBody>
+          Description can be used to further elaborate on the validation step, or give the user a better idea of how
+          long the process will take.
+        </EmptyStateBody>
+        <EmptyStateSecondaryActions>
+          <Button isDisabled={percentValidated !== 100} onClick={onClose}>
+            Log to console
+          </Button>
+        </EmptyStateSecondaryActions>
+      </EmptyState>
+    </div>
+  );
+};
+
+export const WizardWithSubmitProgress: React.FunctionComponent = () => {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  // eslint-disable-next-line no-console
+  const onClose = () => console.log('Some close action occurs here.');
+
+  if (isSubmitted) {
+    return <ValidationProgress onClose={onClose} />;
+  }
+
+  return (
+    <Wizard height={400} title="Submit progress wizard" onClose={onClose}>
+      <WizardStep name="Step 1" id="submit-progress-step-1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep name="Step 2" id="submit-progress-step-2">
+        Step 2 content
+      </WizardStep>
+      <WizardStep
+        name="Review"
+        id="submit-progress-review"
+        footer={{ nextButtonText: 'Finish', onNext: () => setIsSubmitted(true) }}
+      >
+        Review step content
+      </WizardStep>
+    </Wizard>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+import { Wizard, WizardStep, WizardHeader } from '@patternfly/react-core/next';
+
+export const WizardWithinModal = () => {
+  const [isModelOpen, setIsModalOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)}>Show Modal</Button>
+
+      <Modal
+        isOpen={isModelOpen}
+        showClose={false}
+        aria-label="Wizard modal"
+        hasNoBodyWrapper
+        variant={ModalVariant.medium}
+      >
+        <Wizard
+          height={400}
+          title="In modal wizard"
+          header={<WizardHeader title="Wizard in modal" description="Simple wizard description" />}
+        >
+          <WizardStep name="Step 1" id="in-modal-step-1">
+            Step 1 content
+          </WizardStep>
+          <WizardStep name="Step 2" id="in-modal-step-2">
+            Step 2 content
+          </WizardStep>
+          <WizardStep
+            name="Review"
+            id="in-modal-review-step"
+            footer={{ nextButtonText: 'Finish', onNext: () => setIsModalOpen(false) }}
+          >
+            Review step content
+          </WizardStep>
+        </Wizard>
+      </Modal>
+    </>
+  );
+};

package/src/next/components/Wizard/hooks/index.ts

@@ -1 +1,2 @@
 export { useWizardFooter } from './useWizardFooter';
+export { useGetMergedSteps } from './useGetMergedSteps';

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import isEqual from 'fast-deep-equal';
+import { WizardStepType } from '../types';
+
+/**
+ * Get stable ref of combined initial (prop provided) and current (context stored) steps.
+ * @param initialSteps
+ * @param currentSteps
+ * @returns WizardStepType[]
+ */
+export const useGetMergedSteps = (initialSteps: WizardStepType[], currentSteps: WizardStepType[]): WizardStepType[] => {
+  const initialStepsRef = React.useRef(initialSteps);
+  const currentStepsRef = React.useRef(currentSteps);
+
+  // Check each value within the array of initialSteps (props) and currentSteps (context).
+  // If any value changes for either of these, update the reference.
+  if (!isEqual(initialStepsRef.current, initialSteps)) {
+    initialStepsRef.current = initialSteps;
+  }
+  if (!isEqual(currentStepsRef.current, currentSteps)) {
+    currentStepsRef.current = currentSteps;
+  }
+
+  // Combine both initial and current steps, where prop provided values
+  // take precedence over what's stored in context.
+  const mergedSteps = React.useMemo(
+    () =>
+      initialSteps.reduce((acc, initialStepProps, index) => {
+        const currentStepProps = currentSteps[index];
+
+        if (initialStepProps.id === currentStepProps.id) {
+          acc.push({
+            ...currentStepProps,
+            ...initialStepProps
+          });
+        }
+
+        return acc;
+      }, []),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [initialStepsRef.current, currentStepsRef.current]
+  );
+
+  return mergedSteps;
+};

package/src/next/components/Wizard/index.ts

@@ -6,6 +6,6 @@ export * from './WizardStep';
 export * from './WizardNav';
 export * from './WizardNavItem';
 export * from './WizardHeader';
-export * from './hooks';
 export * from './types';
-export { useWizardContext } from './WizardContext';
+export { useWizardFooter } from './hooks';
+export { useWizardContext, WizardContext } from './WizardContext';

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

@@ -34,8 +34,8 @@ export enum WizardNavItemStatus {
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */
   subStepIds: (string | number)[];
-  /** Flag to determine whether sub-steps can collapse or not */
-  isCollapsible?: boolean;
+  /** Flag to determine whether the step can expand or not. */
+  isExpandable?: boolean;
 }
 
 /** Type used to define sub-steps. */
@@ -45,22 +45,12 @@ export interface WizardSubStep extends WizardBasicStep {
 }
 
 /** Encompasses all step type variants that are internally controlled by the Wizard. */
-export type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
+export type WizardStepType = WizardBasicStep | WizardParentStep | WizardSubStep;
 
-/** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties. */
-export type WizardNavStepFunction = (
-  currentStep: WizardNavStepData,
-  previousStep: WizardNavStepData
-) => void | Promise<void>;
-
-/** Data returned for either parameter of WizardNavStepFunction. */
-export interface WizardNavStepData {
-  /** Unique identifier */
-  id: string | number;
-  /** Name of the step */
-  name: string;
-  /** Index of the step (starts at 1) */
-  index: number;
+export enum WizardStepChangeScope {
+  Next = 'next',
+  Back = 'back',
+  Nav = 'nav'
 }
 
 export type WizardFooterType = Partial<WizardFooterProps> | CustomWizardFooterFunction | React.ReactElement;
@@ -70,25 +60,25 @@ export type WizardNavItemType = Partial<WizardNavItemProps> | CustomWizardNavIte
 /** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
 export type CustomWizardNavFunction = (
   isExpanded: boolean,
-  steps: WizardControlStep[],
-  activeStep: WizardControlStep,
+  steps: WizardStepType[],
+  activeStep: WizardStepType,
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavProps>;
 
 /** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navigation item. */
 export type CustomWizardNavItemFunction = (
-  step: WizardControlStep,
-  activeStep: WizardControlStep,
-  steps: WizardControlStep[],
+  step: WizardStepType,
+  activeStep: WizardStepType,
+  steps: WizardStepType[],
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavItemProps>;
 
 /** Callback for the Wizard's 'footer' property. Returns element which replaces the Wizard's default footer. */
 export type CustomWizardFooterFunction = (
-  activeStep: WizardControlStep,
-  onNext: () => void | Promise<void>,
-  onBack: () => void | Promise<void>,
-  onClose: () => void | Promise<void>
+  activeStep: WizardStepType,
+  onNext: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,
+  onBack: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>,
+  onClose: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>
 ) => React.ReactElement<WizardFooterProps>;
 
 export function isCustomWizardNav(nav: WizardNavType): nav is CustomWizardNavFunction | React.ReactElement {
@@ -107,14 +97,14 @@ export function isCustomWizardFooter(
   return typeof footer === 'function' || React.isValidElement(footer);
 }
 
-export function isWizardBasicStep(step: WizardControlStep): step is WizardBasicStep {
+export function isWizardBasicStep(step: WizardStepType): step is WizardBasicStep {
   return (step as WizardParentStep)?.subStepIds === undefined && !isWizardSubStep(step);
 }
 
-export function isWizardSubStep(step: WizardControlStep): step is WizardSubStep {
+export function isWizardSubStep(step: WizardStepType): step is WizardSubStep {
   return (step as WizardSubStep)?.parentId !== undefined;
 }
 
-export function isWizardParentStep(step: WizardControlStep): step is WizardParentStep {
+export function isWizardParentStep(step: WizardStepType): step is WizardParentStep {
   return (step as WizardParentStep)?.subStepIds !== undefined;
 }

package/src/next/components/Wizard/utils.ts

@@ -1,45 +1,45 @@
 import React from 'react';
 
-import { WizardControlStep, WizardNavStepData } from './types';
+import { WizardStepType } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 /**
  * Accumulate list of step & sub-step props pulled from child components
  * @param children
- * @returns WizardControlStep[]
+ * @returns WizardStepType[]
  */
-export const buildSteps = (children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[]) =>
-  React.Children.toArray(children).reduce((acc: WizardControlStep[], child: React.ReactNode) => {
+export const buildSteps = (children: React.ReactNode | React.ReactNode[]) =>
+  React.Children.toArray(children).reduce((acc: WizardStepType[], child: React.ReactNode, index: number) => {
     if (isWizardStep(child)) {
-      const { steps: subSteps, id, isHidden, isDisabled } = child.props;
-      const subControlledSteps: WizardControlStep[] = [];
+      const { props: childProps } = child;
+      const { steps: childStepComponents, id } = childProps;
       const stepIndex = acc.length + 1;
+      const subSteps: WizardStepType[] = [];
 
       acc.push(
         {
           index: stepIndex,
           component: child,
-          ...(stepIndex === 1 && { isVisited: true }),
-          ...(subSteps && {
-            subStepIds: subSteps?.map((subStep, subStepIndex) => {
-              subControlledSteps.push({
-                isHidden,
-                isDisabled,
-                component: subStep,
-                parentId: id,
+          ...(index === 0 && !childStepComponents?.length && { isVisited: true }),
+          ...(childStepComponents && {
+            subStepIds: childStepComponents?.map((childStepComponent, subStepIndex) => {
+              subSteps.push({
                 index: stepIndex + subStepIndex + 1,
-                ...normalizeStep(subStep.props)
+                component: childStepComponent,
+                parentId: id,
+                ...(index === 0 && subStepIndex === 0 && { isVisited: true }),
+                ...normalizeStepProps(childStepComponent.props)
               });
 
-              return subStep.props.id;
+              return childStepComponent.props.id;
             })
           }),
-          ...normalizeStep(child.props)
+          ...normalizeStepProps(childProps)
         },
-        ...subControlledSteps
+        ...subSteps
       );
     } else {
-      throw new Error('Wizard only accepts children with required WizardStepProps.');
+      throw new Error('Wizard only accepts children of type WizardStep.');
     }
 
     return acc;
@@ -48,21 +48,15 @@ export const buildSteps = (children: React.ReactElement<WizardStepProps> | React
 export function isWizardStep(
   child: any | React.ReactElement<WizardStepProps>
 ): child is React.ReactElement<WizardStepProps> {
-  return (
-    (React.isValidElement(child) && (child as React.ReactElement<WizardStepProps>).type === WizardStep) ||
-    (child.props?.name !== undefined && child.props?.id !== undefined)
-  );
+  return React.isValidElement(child) && (child as React.ReactElement<WizardStepProps>).type === WizardStep;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const normalizeStep = ({ children, steps, ...controlStep }: WizardStepProps): Omit<WizardControlStep, 'index'> =>
-  controlStep;
-
-export const normalizeNavStep = (navStep: WizardControlStep): WizardNavStepData => ({
-  id: navStep.id,
-  index: navStep.index,
-  name: navStep.name.toString()
-});
+// Omit "children" and "steps" when building steps for the Wizard's context
+export const normalizeStepProps = ({
+  children: _children,
+  steps: _steps,
+  ...controlStep
+}: WizardStepProps): Omit<WizardStepType, 'index'> => controlStep;
 
-export const getActiveStep = (steps: WizardControlStep[], activeStepIndex: number) =>
+export const getActiveStep = (steps: WizardStepType[], activeStepIndex: number) =>
   steps.find(step => step.index === activeStepIndex);