@patternfly/react-core 4.274.0 → 4.275.0

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);

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

@@ -1,243 +0,0 @@
-import React from 'react';
-
-import {
-  FormGroup,
-  TextInput,
-  Drawer,
-  DrawerContent,
-  Button,
-  Flex,
-  DrawerPanelContent,
-  DrawerColorVariant,
-  DrawerHead,
-  DrawerActions,
-  DrawerCloseButton,
-  Checkbox
-} from '@patternfly/react-core';
-import {
-  Wizard,
-  WizardStep,
-  WizardBody,
-  WizardFooter,
-  useWizardContext,
-  WizardHeader,
-  WizardFooterWrapper,
-  WizardNavStepFunction,
-  WizardNavStepData
-} from '@patternfly/react-core/next';
-
-const StepId = {
-  StepOne: 'sink-step-1',
-  StepTwo: 'sink-step-2',
-  StepTwoSubOne: 'sink-step-2-1',
-  StepTwoSubTwo: 'sink-step-2-2',
-  StepThree: 'sink-step-3',
-  StepFour: 'sink-step-4',
-  ReviewStep: 'sink-review-step'
-};
-
-interface SomeContextProps {
-  isToggleStepChecked: boolean;
-  errorMessage: string | undefined;
-  setIsToggleStepChecked(isHidden: boolean): void;
-  setErrorMessage(error: string | undefined): void;
-}
-type SomeContextRenderProps = Pick<SomeContextProps, 'isToggleStepChecked' | 'errorMessage'>;
-interface SomeContextProviderProps {
-  children: (context: SomeContextRenderProps) => React.ReactElement;
-}
-
-const SomeContext = React.createContext({} as SomeContextProps);
-
-const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
-  const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
-  const [errorMessage, setErrorMessage] = React.useState<string>();
-
-  return (
-    <SomeContext.Provider value={{ isToggleStepChecked, errorMessage, setIsToggleStepChecked, setErrorMessage }}>
-      {children({ isToggleStepChecked, errorMessage })}
-    </SomeContext.Provider>
-  );
-};
-
-const CustomWizardFooter = () => {
-  const { activeStep, onNext, onBack, onClose } = useWizardContext();
-
-  return (
-    <WizardFooter
-      activeStep={activeStep}
-      onNext={onNext}
-      onBack={onBack}
-      onClose={onClose}
-      isBackDisabled={activeStep.index === 1}
-    />
-  );
-};
-
-const StepContentWithDrawer = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
-
-  const onWizardExpand = () => {
-    drawerRef.current && drawerRef.current.focus();
-  };
-
-  return (
-    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
-      <DrawerContent
-        panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
-            <DrawerHead>
-              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
-                drawer content
-              </span>
-              <DrawerActions>
-                <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />
-              </DrawerActions>
-            </DrawerHead>
-          </DrawerPanelContent>
-        }
-      >
-        <WizardBody>
-          <Flex direction={{ default: 'column' }}>
-            {!isDrawerExpanded && (
-              <Button isInline variant="link" onClick={() => setIsDrawerExpanded(prevExpanded => !prevExpanded)}>
-                Open drawer
-              </Button>
-            )}
-
-            <FormGroup fieldId="some-text-input" label="Text input label">
-              <TextInput aria-label="Some Text Input Label" />
-            </FormGroup>
-          </Flex>
-        </WizardBody>
-      </DrawerContent>
-    </Drawer>
-  );
-};
-
-const CustomStepThreeFooter = () => {
-  const { onNext: goToNextStep, onBack, onClose } = useWizardContext();
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  async function onNext(goToStep: () => void) {
-    setIsLoading(true);
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    setIsLoading(false);
-
-    goToStep();
-  }
-
-  return (
-    <WizardFooterWrapper>
-      <Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
-        Async Next
-      </Button>
-      <Button variant="secondary" onClick={onBack} isDisabled={isLoading}>
-        Back
-      </Button>
-      <Button variant="link" onClick={onClose} isDisabled={isLoading}>
-        Cancel
-      </Button>
-    </WizardFooterWrapper>
-  );
-};
-
-const StepContentWithActions = () => {
-  const { isToggleStepChecked, errorMessage, setIsToggleStepChecked, setErrorMessage } = React.useContext(SomeContext);
-
-  return (
-    <>
-      <Checkbox
-        label="Give this step an error status"
-        isChecked={!!errorMessage}
-        onChange={checked => setErrorMessage(checked ? 'Some error message' : undefined)}
-        id="toggle-error-checkbox"
-        name="Toggle Error Checkbox"
-      />
-      <Checkbox
-        label="Toggle visibility of the next step"
-        isChecked={isToggleStepChecked}
-        onChange={checked => setIsToggleStepChecked(checked)}
-        id="toggle-hide-step-checkbox"
-        name="Toggle Hide Step Checkbox"
-      />
-    </>
-  );
-};
-
-export const WizardKitchenSink: React.FunctionComponent = () => {
-  const onNext: WizardNavStepFunction = (_currentStep: WizardNavStepData, _previousStep: WizardNavStepData) => {};
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-
-  async function onSubmit(): Promise<void> {
-    setIsSubmitting(true);
-
-    await new Promise(resolve => setTimeout(resolve, 5000));
-
-    setIsSubmitting(false);
-    alert('50 points to Gryffindor!');
-  }
-
-  return (
-    <SomeContextProvider>
-      {({ isToggleStepChecked, errorMessage }) => (
-        <Wizard
-          height={400}
-          header={<WizardHeader title="You're a wizard, Harry" closeButtonAriaLabel="Close header" />}
-          footer={<CustomWizardFooter />}
-          onNext={onNext}
-          isStepVisitRequired
-        >
-          <WizardStep id={StepId.StepOne} name="Step 1" body={null} status="error">
-            <StepContentWithDrawer />
-          </WizardStep>
-          <WizardStep
-            id={StepId.StepTwo}
-            name="Step 2"
-            steps={[
-              <WizardStep
-                status={errorMessage ? 'error' : 'default'}
-                id={StepId.StepTwoSubOne}
-                key={StepId.StepTwoSubOne}
-                name="Substep 1"
-              >
-                <StepContentWithActions />
-              </WizardStep>,
-              <WizardStep
-                id={StepId.StepTwoSubTwo}
-                key={StepId.StepTwoSubTwo}
-                name="Substep 2"
-                isHidden={isToggleStepChecked}
-              >
-                Substep 2 content
-              </WizardStep>
-            ]}
-          />
-          <WizardStep
-            id={StepId.StepThree}
-            name="Step 3"
-            navItem={{
-              content: <span style={{ color: 'var(--pf-global--default-color--200)' }}>Custom item</span>
-            }}
-            footer={<CustomStepThreeFooter />}
-          >
-            Step 3 content w/ custom async footer
-          </WizardStep>
-          <WizardStep
-            id={StepId.ReviewStep}
-            name="Review"
-            footer={{
-              nextButtonText: 'Submit',
-              onNext: onSubmit,
-              isNextDisabled: isSubmitting,
-              isBackDisabled: isSubmitting
-            }}
-          >
-            {isSubmitting ? 'Calculating wizard score...' : 'Review step content'}
-          </WizardStep>
-        </Wizard>
-      )}
-    </SomeContextProvider>
-  );
-};