@patternfly/react-core 4.249.0 → 4.250.0

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

@@ -1,34 +1,37 @@
 import React from 'react';
-import { WizardNavProps, WizardNavItemProps } from '../Wizard';
+import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '../Wizard';
 
 /** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
 export interface WizardBasicStep {
-  /** Name of the step's nav item */
+  /** Name of the step's navigation item */
   name: React.ReactNode;
   /** Unique identifier */
   id: string | number;
-  /** Flag to disable the step's nav item */
+  /** Flag to disable the step's navigation item */
   isDisabled?: boolean;
   /** Flag to represent whether the step has been visited (navigated to) */
-  visited?: boolean;
-  /** Content shown when the step's nav item is selected. When treated as a parent step, only sub-step content will be shown. */
+  isVisited?: boolean;
+  /** Flag to determine whether the step is hidden */
+  isHidden?: boolean;
+  /** Content shown when the step's navigation item is selected. When treated as a parent step, only sub-step content will be shown. */
   component?: React.ReactElement;
-  /** (Unused if nav is controlled) Custom WizardNavItem */
-  navItem?: React.ReactElement<WizardNavItemProps>;
-  /** (Unused if footer is controlled) Can change the Next button text. If nextButtonText is also set for the Wizard, this step specific one overrides it. */
-  nextButtonText?: React.ReactNode;
-  /** (Unused if footer is controlled) The condition needed to disable the Next button */
-  disableNext?: boolean;
-  /** (Unused if footer is controlled) True to hide the Cancel button */
-  hideCancelButton?: boolean;
-  /** (Unused if footer is controlled) True to hide the Back button */
-  hideBackButton?: boolean;
+  /** Replaces the step's navigation item or its properties. */
+  navItem?: WizardNavItemType;
+  /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
+  footer?: React.ReactElement | Partial<WizardFooterProps>;
+  /** Used to determine icon next to the step's navItem */
+  status?: 'default' | 'error';
+}
+
+export enum WizardNavItemStatus {
+  Default = 'default',
+  Error = 'error'
 }
 
 /** Type used to define parent steps. */
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */
-  subStepIds: string[];
+  subStepIds: (string | number)[];
 }
 
 /** Type used to define sub-steps. */
@@ -37,34 +40,6 @@ export interface WizardSubStep extends WizardBasicStep {
   parentId: string | number;
 }
 
-/** Used to customize aspects of the Wizard's default navigation. */
-export interface DefaultWizardNavProps {
-  /** Flag indicating nav items with sub steps are expandable */
-  isExpandable?: boolean;
-  /** Aria-label for the Nav */
-  ariaLabel?: string;
-  /** Sets aria-labelledby on nav element */
-  ariaLabelledBy?: string;
-  /** Disable step nav items until they are visited */
-  forceStepVisit?: boolean;
-}
-
-/** Used to customize aspects of the Wizard's default footer. */
-export interface DefaultWizardFooterProps {
-  /** The Next button text */
-  nextButtonText?: React.ReactNode;
-  /** The Back button text */
-  backButtonText?: React.ReactNode;
-  /** The Cancel button text */
-  cancelButtonText?: React.ReactNode;
-  /** Next button callback */
-  onNext?: () => WizardNavStepFunction | void;
-  /** Back button callback */
-  onBack?: () => WizardNavStepFunction | void;
-  /** Cancel link callback */
-  onClose?: () => void;
-}
-
 /** Encompasses all step type variants that are internally controlled by the Wizard. */
 export type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
 
@@ -72,26 +47,57 @@ export type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubSt
 export type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;
 
 /** Data returned for either parameter of WizardNavStepFunction. */
-export type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
+export interface WizardNavStepData {
+  /** Unique identifier */
+  id: string | number;
+  /** Name of the step */
+  name: string;
+  /** Index of the step (starts at 1) */
+  index: number;
+}
+
+export type WizardFooterType = Partial<WizardFooterProps> | CustomWizardFooterFunction | React.ReactElement;
+export type WizardNavType = Partial<WizardNavProps> | CustomWizardNavFunction | React.ReactElement;
+export type WizardNavItemType = Partial<WizardNavItemProps> | CustomWizardNavItemFunction | React.ReactElement;
 
 /** 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,
+  currentStep: WizardControlStep,
   goToStepByIndex: (index: number) => void
 ) => React.ReactElement<WizardNavProps>;
 
-export function isCustomWizardNav(
-  nav: DefaultWizardNavProps | CustomWizardNavFunction
-): nav is CustomWizardNavFunction {
-  return typeof nav === 'function';
+/** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navigation item. */
+export type CustomWizardNavItemFunction = (
+  step: WizardControlStep,
+  currentStep: WizardControlStep,
+  steps: WizardControlStep[],
+  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 = (
+  currentStep: WizardControlStep,
+  onNext: () => void,
+  onBack: () => void,
+  onClose: () => void
+) => React.ReactElement<WizardFooterProps>;
+
+export function isCustomWizardNav(nav: WizardNavType): nav is CustomWizardNavFunction | React.ReactElement {
+  return typeof nav === 'function' || React.isValidElement(nav);
+}
+
+export function isCustomWizardNavItem(
+  navItem: WizardNavItemType
+): navItem is CustomWizardNavItemFunction | React.ReactElement {
+  return typeof navItem === 'function' || React.isValidElement(navItem);
 }
 
 export function isCustomWizardFooter(
-  footer: DefaultWizardFooterProps | React.ReactElement
-): footer is React.ReactElement {
-  return React.isValidElement(footer);
+  footer: WizardFooterType
+): footer is CustomWizardFooterFunction | React.ReactElement {
+  return typeof footer === 'function' || React.isValidElement(footer);
 }
 
 export function isWizardBasicStep(step: WizardControlStep): step is WizardBasicStep {

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

@@ -3,32 +3,23 @@ import React from 'react';
 import { WizardControlStep, WizardNavStepData } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
-function hasWizardStepProps(props: WizardStepProps | any): props is WizardStepProps {
-  return props.name !== undefined && props.id !== undefined;
-}
-
 /**
  * Accumulate list of step & sub-step props pulled from child components
  * @param children
  * @returns WizardControlStep[]
  */
 export const buildSteps = (children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[]) =>
-  React.Children.toArray(children).reduce((acc: WizardControlStep[], child) => {
-    if (React.isValidElement(child) && (child.type === WizardStep || hasWizardStepProps(child.props))) {
-      // Omit "children" and use the whole "child" (WizardStep) for the component prop. Sub-steps will do the same.
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { steps: subSteps, id, children, ...stepProps } = child.props as WizardStepProps;
+  React.Children.toArray(children).reduce((acc: WizardControlStep[], child: React.ReactChild | React.ReactFragment) => {
+    if (isWizardStep(child)) {
+      const { steps: subSteps, id } = child.props;
 
       acc.push({
-        id,
         component: child,
-        ...stepProps,
+        ...normalizeStep(child.props),
         ...(subSteps && {
           subStepIds: subSteps?.map(subStep => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { children, ...subStepProps } = subStep.props;
             acc.push({
-              ...subStepProps,
+              ...normalizeStep(subStep.props),
               component: subStep,
               parentId: id
             });
@@ -44,6 +35,24 @@ export const buildSteps = (children: React.ReactElement<WizardStepProps> | React
     return acc;
   }, []);
 
-export const normalizeNavStep = ({ id, name }: WizardNavStepData) => ({ id, name });
-export const getActiveStep = (steps: WizardControlStep[], currentStepIndex: number) =>
+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)
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const normalizeStep = ({ children, steps, body, ...controlStep }: WizardStepProps): WizardControlStep =>
+  controlStep;
+
+export const normalizeNavStep = (navStep: WizardControlStep, steps: WizardControlStep[]): WizardNavStepData => ({
+  id: navStep.id,
+  name: navStep.name.toString(),
+  index: steps.indexOf(navStep) + 1
+});
+
+export const getCurrentStep = (steps: WizardControlStep[], currentStepIndex: number) =>
   steps.find((_, index) => index + 1 === currentStepIndex);

package/src/next/components/index.ts

@@ -1,2 +1,3 @@
-export * from './Wizard';
 export * from './Dropdown';
+export * from './Select';
+export * from './Wizard';