@patternfly/react-core 4.240.0 → 4.241.0

package/dist/js/next/components/Wizard/hooks/useWizardFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWizardFooter.d.ts","sourceRoot":"","sources":["../../../../../../src/next/components/Wizard/hooks/useWizardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,eAAO,MAAM,eAAe,WAAY,MAAM,YAAY,WAAW,MAAM,GAAG,MAAM,SAanF,CAAC"}
+{"version":3,"file":"useWizardFooter.d.ts","sourceRoot":"","sources":["../../../../../../src/next/components/Wizard/hooks/useWizardFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAGpD;;;;GAIG;AACH,eAAO,MAAM,eAAe,WAAY,wBAAwB,GAAG,MAAM,YAAY,WAAW,MAAM,GAAG,MAAM,SAa9G,CAAC"}

package/dist/js/next/components/Wizard/hooks/useWizardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWizardFooter.js","sourceRoot":"","sources":["../../../../../../src/next/components/Wizard/hooks/useWizardFooter.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,oDAAoD;AAEpD;;;;GAIG;AACI,MAAM,eAAe,GAAG,CAAC,MAA0B,EAAE,MAAwB,EAAE,EAAE;IACtF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,gCAAgB,EAAE,CAAC;IAErD,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,MAAM,IAAI,UAAU,CAAC,EAAE,KAAK,MAAM,EAAE;YACvC,SAAS,CAAC,MAAM,CAAC,CAAC;YAElB,+BAA+B;YAC/B,OAAO,GAAG,EAAE;gBACV,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAbW,QAAA,eAAe,mBAa1B"}
+{"version":3,"file":"useWizardFooter.js","sourceRoot":"","sources":["../../../../../../src/next/components/Wizard/hooks/useWizardFooter.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAG1B,oDAAoD;AAEpD;;;;GAIG;AACI,MAAM,eAAe,GAAG,CAAC,MAAqD,EAAE,MAAwB,EAAE,EAAE;IACjH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,gCAAgB,EAAE,CAAC;IAErD,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,MAAM,IAAI,UAAU,CAAC,EAAE,KAAK,MAAM,EAAE;YACvC,SAAS,CAAC,MAAM,CAAC,CAAC;YAElB,+BAA+B;YAC/B,OAAO,GAAG,EAAE;gBACV,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAbW,QAAA,eAAe,mBAa1B"}

package/dist/js/next/components/Wizard/types.d.ts

@@ -52,6 +52,12 @@ export interface DefaultWizardFooterProps {
     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 declare type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
@@ -60,7 +66,7 @@ export declare type WizardNavStepFunction = (currentStep: WizardNavStepData, pre
 /** Data returned for either parameter of WizardNavStepFunction. */
 export declare type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
 /** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
-export declare type CustomWizardNavFunction = (isOpen: boolean, steps: WizardControlStep[], activeStep: WizardControlStep, goToStepByIndex: (index: number) => void) => React.ReactElement<WizardNavProps>;
+export declare type CustomWizardNavFunction = (isExpanded: boolean, steps: WizardControlStep[], activeStep: WizardControlStep, goToStepByIndex: (index: number) => void) => React.ReactElement<WizardNavProps>;
 export declare function isCustomWizardNav(nav: DefaultWizardNavProps | CustomWizardNavFunction): nav is CustomWizardNavFunction;
 export declare function isCustomWizardFooter(footer: DefaultWizardFooterProps | React.ReactElement): footer is React.ReactElement;
 export declare function isWizardBasicStep(step: WizardControlStep): step is WizardBasicStep;

package/dist/js/next/components/Wizard/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/types.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/types.tsx"],"names":[],"mappings":"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"}

package/dist/js/next/components/Wizard/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/types.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AA8E1B,SAAgB,iBAAiB,CAC/B,GAAoD;IAEpD,OAAO,OAAO,GAAG,KAAK,UAAU,CAAC;AACnC,CAAC;AAJD,8CAIC;AAED,SAAgB,oBAAoB,CAClC,MAAqD;IAErD,OAAO,eAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AACtC,CAAC;AAJD,oDAIC;AAED,SAAgB,iBAAiB,CAAC,IAAuB;;IACvD,OAAO,CAAA,MAAC,IAAyB,0CAAE,UAAU,MAAK,SAAS,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;AACxF,CAAC;AAFD,8CAEC;AAED,SAAgB,eAAe,CAAC,IAAuB;;IACrD,OAAO,CAAA,MAAC,IAAsB,0CAAE,QAAQ,MAAK,SAAS,CAAC;AACzD,CAAC;AAFD,0CAEC;AAED,SAAgB,kBAAkB,CAAC,IAAuB;;IACxD,OAAO,CAAA,MAAC,IAAyB,0CAAE,UAAU,MAAK,SAAS,CAAC;AAC9D,CAAC;AAFD,gDAEC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/types.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAoF1B,SAAgB,iBAAiB,CAC/B,GAAoD;IAEpD,OAAO,OAAO,GAAG,KAAK,UAAU,CAAC;AACnC,CAAC;AAJD,8CAIC;AAED,SAAgB,oBAAoB,CAClC,MAAqD;IAErD,OAAO,eAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AACtC,CAAC;AAJD,oDAIC;AAED,SAAgB,iBAAiB,CAAC,IAAuB;;IACvD,OAAO,CAAA,MAAC,IAAyB,0CAAE,UAAU,MAAK,SAAS,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;AACxF,CAAC;AAFD,8CAEC;AAED,SAAgB,eAAe,CAAC,IAAuB;;IACrD,OAAO,CAAA,MAAC,IAAsB,0CAAE,QAAQ,MAAK,SAAS,CAAC;AACzD,CAAC;AAFD,0CAEC;AAED,SAAgB,kBAAkB,CAAC,IAAuB;;IACxD,OAAO,CAAA,MAAC,IAAyB,0CAAE,UAAU,MAAK,SAAS,CAAC;AAC9D,CAAC;AAFD,gDAEC"}

package/dist/js/next/components/Wizard/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAM3D;;;;GAIG;AACH,eAAO,MAAM,UAAU,aAAc,MAAM,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,YAAY,CAAC,eAAe,CAAC,EAAE,wBA4BxG,CAAC;AAET,eAAO,MAAM,gBAAgB,iBAAkB,iBAAiB;;;CAAmB,CAAC;AACpF,eAAO,MAAM,aAAa,UAAW,iBAAiB,EAAE,oBAAoB,MAAM,sBACxB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAM3D;;;;GAIG;AACH,eAAO,MAAM,UAAU,aAAc,MAAM,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,YAAY,CAAC,eAAe,CAAC,EAAE,wBA8BxG,CAAC;AAET,eAAO,MAAM,gBAAgB,iBAAkB,iBAAiB;;;CAAmB,CAAC;AACpF,eAAO,MAAM,aAAa,UAAW,iBAAiB,EAAE,oBAAoB,MAAM,sBACxB,CAAC"}

package/dist/js/next/components/Wizard/utils.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const WizardStep_1 = require("./WizardStep");
 function hasWizardStepProps(props) {
-    return props.name !== undefined && props.id !== undefined && props.children !== undefined;
+    return props.name !== undefined && props.id !== undefined;
 }
 /**
  * Accumulate list of step & sub-step props pulled from child components
@@ -13,23 +13,21 @@ function hasWizardStepProps(props) {
  * @returns WizardControlStep[]
  */
 const buildSteps = (children) => react_1.default.Children.toArray(children).reduce((acc, child) => {
-    if (react_1.default.isValidElement(child)) {
-        if (child.type === WizardStep_1.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 _a = child.props, { steps: subSteps, id, children } = _a, stepProps = tslib_1.__rest(_a, ["steps", "id", "children"]);
-            acc.push(Object.assign(Object.assign({ id, component: child }, stepProps), (subSteps && {
-                subStepIds: subSteps === null || subSteps === void 0 ? void 0 : subSteps.map(subStep => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const _a = subStep.props, { children } = _a, subStepProps = tslib_1.__rest(_a, ["children"]);
-                    acc.push(Object.assign(Object.assign({}, subStepProps), { component: subStep, parentId: id }));
-                    return subStep.props.id;
-                })
-            })));
-        }
-        else {
-            throw new Error('Wizard only accepts children of type WizardStep');
-        }
+    if (react_1.default.isValidElement(child) && (child.type === WizardStep_1.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 _a = child.props, { steps: subSteps, id, children } = _a, stepProps = tslib_1.__rest(_a, ["steps", "id", "children"]);
+        acc.push(Object.assign(Object.assign({ id, component: child }, stepProps), (subSteps && {
+            subStepIds: subSteps === null || subSteps === void 0 ? void 0 : subSteps.map(subStep => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const _a = subStep.props, { children } = _a, subStepProps = tslib_1.__rest(_a, ["children"]);
+                acc.push(Object.assign(Object.assign({}, subStepProps), { component: subStep, parentId: id }));
+                return subStep.props.id;
+            })
+        })));
+    }
+    else {
+        throw new Error('Wizard only accepts children of type WizardStep');
     }
     return acc;
 }, []);

package/dist/js/next/components/Wizard/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/utils.ts"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAG1B,6CAA2D;AAE3D,SAAS,kBAAkB,CAAC,KAA4B;IACtD,OAAO,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,EAAE,KAAK,SAAS,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC;AAC5F,CAAC;AAED;;;;GAIG;AACI,MAAM,UAAU,GAAG,CAAC,QAAqF,EAAE,EAAE,CAClH,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAwB,EAAE,KAAK,EAAE,EAAE;IAC1E,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;QAC/B,IAAI,KAAK,CAAC,IAAI,KAAK,uBAAU,IAAI,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;YAChE,6GAA6G;YAC7G,6DAA6D;YAC7D,MAAM,KAAkD,KAAK,CAAC,KAAwB,EAAhF,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,OAAiD,EAA5C,SAAS,sBAA7C,2BAA+C,CAAiC,CAAC;YAEvF,GAAG,CAAC,IAAI,+BACN,EAAE,EACF,SAAS,EAAE,KAAK,IACb,SAAS,GACT,CAAC,QAAQ,IAAI;gBACd,UAAU,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,OAAO,CAAC,EAAE;oBAClC,6DAA6D;oBAC7D,MAAM,KAAgC,OAAO,CAAC,KAAK,EAA7C,EAAE,QAAQ,OAAmC,EAA9B,YAAY,sBAA3B,YAA6B,CAAgB,CAAC;oBACpD,GAAG,CAAC,IAAI,iCAAM,YAAY,KAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,IAAG,CAAC;oBAEhE,OAAO,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC1B,CAAC,CAAC;aACH,CAAC,EACF,CAAC;SACJ;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;KACF;IAED,OAAO,GAAG,CAAC;AACb,CAAC,EAAE,EAAE,CAAC,CAAC;AA5BI,QAAA,UAAU,cA4Bd;AAEF,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;AAAvE,QAAA,gBAAgB,oBAAuD;AAC7E,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAE,gBAAwB,EAAE,EAAE,CACpF,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,KAAK,gBAAgB,CAAC,CAAC;AAD9C,QAAA,aAAa,iBACiC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/utils.ts"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAG1B,6CAA2D;AAE3D,SAAS,kBAAkB,CAAC,KAA4B;IACtD,OAAO,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,EAAE,KAAK,SAAS,CAAC;AAC5D,CAAC;AAED;;;;GAIG;AACI,MAAM,UAAU,GAAG,CAAC,QAAqF,EAAE,EAAE,CAClH,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAwB,EAAE,KAAK,EAAE,EAAE;IAC1E,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,uBAAU,IAAI,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE;QACjG,6GAA6G;QAC7G,6DAA6D;QAC7D,MAAM,KAAkD,KAAK,CAAC,KAAwB,EAAhF,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,OAAiD,EAA5C,SAAS,sBAA7C,2BAA+C,CAAiC,CAAC;QAEvF,GAAG,CAAC,IAAI,+BACN,EAAE,EACF,SAAS,EAAE,KAAK,IACb,SAAS,GACT,CAAC,QAAQ,IAAI;YACd,UAAU,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,OAAO,CAAC,EAAE;gBAClC,6DAA6D;gBAC7D,MAAM,KAAgC,OAAO,CAAC,KAAK,EAA7C,EAAE,QAAQ,OAAmC,EAA9B,YAAY,sBAA3B,YAA6B,CAAgB,CAAC;gBACpD,GAAG,CAAC,IAAI,iCACH,YAAY,KACf,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,EAAE,IACZ,CAAC;gBAEH,OAAO,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,CAAC,CAAC;SACH,CAAC,EACF,CAAC;KACJ;SAAM;QACL,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACpE;IAED,OAAO,GAAG,CAAC;AACb,CAAC,EAAE,EAAE,CAAC,CAAC;AA9BI,QAAA,UAAU,cA8Bd;AAEF,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;AAAvE,QAAA,gBAAgB,oBAAuD;AAC7E,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAE,gBAAwB,EAAE,EAAE,CACpF,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,KAAK,gBAAgB,CAAC,CAAC;AAD9C,QAAA,aAAa,iBACiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.240.0",
+  "version": "4.241.0",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.91.0",
-    "@patternfly/react-styles": "^4.90.0",
-    "@patternfly/react-tokens": "^4.92.0",
+    "@patternfly/react-icons": "^4.92.0",
+    "@patternfly/react-styles": "^4.91.0",
+    "@patternfly/react-tokens": "^4.93.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "2703bc1465144000deac49dab1b9d779093205c3"
+  "gitHead": "a2a8a79f20c5930b41ac016b84f9455764f3949a"
 }

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

@@ -6,16 +6,14 @@ 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 { WizardContextProvider } from './WizardContext';
 import { WizardStepProps } from './WizardStep';
-import { WizardFooter } from './WizardFooter';
-import { WizardToggle } from './WizardToggle';
+import { WizardToggleInternal } from './WizardToggle';
 
 /**
  * Wrapper for all steps and hosts state, including navigation helpers, within context.
@@ -29,7 +27,7 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   header?: React.ReactNode;
   /** Wizard footer */
   footer?: DefaultWizardFooterProps | React.ReactElement;
-  /** Default wizard nav props or a custom WizardNav (with callback) */
+  /** Wizard nav */
   nav?: DefaultWizardNavProps | CustomWizardNavFunction;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
@@ -39,6 +37,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   width?: number | string;
   /** Custom height of the wizard */
   height?: number | string;
+  /** Flag to unmount inactive steps instead of hiding. Defaults to true */
+  unmountInactiveSteps?: boolean;
   /** Callback function when a step in the nav is clicked */
   onNavByIndex?: WizardNavStepFunction;
   /** Callback function after next button is clicked */
@@ -51,8 +51,23 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   onClose?: () => void;
 }
 
-export const Wizard = (props: WizardProps) => {
-  const { startIndex = 1, children, footer, onNavByIndex, onNext, onBack, onSave, onClose, ...internalProps } = props;
+export const Wizard = ({
+  startIndex = 1,
+  children,
+  footer,
+  height,
+  width,
+  className,
+  header,
+  nav,
+  unmountInactiveSteps,
+  onNavByIndex,
+  onNext,
+  onBack,
+  onSave,
+  onClose,
+  ...wrapperProps
+}: WizardProps) => {
   const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
   const steps = buildSteps(children);
 
@@ -130,7 +145,7 @@ export const Wizard = (props: WizardProps) => {
     <WizardContextProvider
       steps={steps}
       currentStepIndex={currentStepIndex}
-      footer={isCustomWizardFooter(footer) && footer}
+      footer={footer}
       onNext={goToNextStep}
       onBack={goToPrevStep}
       onClose={onClose}
@@ -138,47 +153,19 @@ export const Wizard = (props: WizardProps) => {
       goToStepByName={goToStepByName}
       goToStepByIndex={goToStepByIndex}
     >
-      <WizardInternal {...internalProps} footer={footer}>
-        {children}
-      </WizardInternal>
+      <div
+        className={css(styles.wizard, className)}
+        style={{
+          ...(height ? { height } : {}),
+          ...(width ? { width } : {})
+        }}
+        {...wrapperProps}
+      >
+        {header}
+        <WizardToggleInternal nav={nav} unmountInactiveSteps={unmountInactiveSteps} />
+      </div>
     </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

@@ -8,7 +8,7 @@ import { css } from '@patternfly/react-styles';
  */
 
 export interface WizardBodyProps {
-  children?: React.ReactNode | React.ReactNode[];
+  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 */

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

@@ -1,6 +1,11 @@
 import React from 'react';
-import { WizardControlStep } from './types';
+
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+import { DefaultWizardFooterProps, isCustomWizardFooter, WizardControlStep } from './types';
 import { getActiveStep } from './utils';
+import { WizardFooter } from './WizardFooter';
 
 export interface WizardContextProps {
   /** List of steps */
@@ -22,7 +27,7 @@ export interface WizardContextProps {
   /** Navigate to step by index */
   goToStepByIndex: (index: number) => void;
   /** Update the footer with any react element */
-  setFooter: (footer: React.ReactElement) => void;
+  setFooter: (footer: DefaultWizardFooterProps | React.ReactElement) => void;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
@@ -39,7 +44,7 @@ interface WizardContextRenderProps {
 export interface WizardContextProviderProps {
   steps: WizardControlStep[];
   currentStepIndex: number;
-  footer: React.ReactElement;
+  footer: DefaultWizardFooterProps | React.ReactElement;
   children: React.ReactElement | ((props: WizardContextRenderProps) => React.ReactElement);
   onNext(): void;
   onBack(): void;
@@ -66,6 +71,23 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [footer, setFooter] = React.useState(initialFooter);
   const activeStep = getActiveStep(steps, currentStepIndex);
 
+  const wizardFooter = React.useMemo(
+    () =>
+      isCustomWizardFooter(footer) ? (
+        <div className={css(styles.wizardFooter)}>{footer}</div>
+      ) : (
+        <WizardFooter
+          activeStep={activeStep}
+          onNext={onNext}
+          onBack={onBack}
+          onClose={onClose}
+          disableBackButton={activeStep?.id === steps[0]?.id}
+          {...footer}
+        />
+      ),
+    [activeStep, footer, onBack, onClose, onNext, steps]
+  );
+
   // 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) {
@@ -86,7 +108,7 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
       value={{
         steps,
         activeStep,
-        footer,
+        footer: wizardFooter,
         onNext,
         onBack,
         onClose,
@@ -96,7 +118,9 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         setFooter
       }}
     >
-      {typeof children === 'function' ? children({ activeStep, steps, footer, onNext, onBack, onClose }) : children}
+      {typeof children === 'function'
+        ? children({ activeStep, steps, footer: wizardFooter, onNext, onBack, onClose })
+        : children}
     </WizardContext.Provider>
   );
 };

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

@@ -10,7 +10,7 @@ export interface WizardNavProps {
   /** Sets the aria-labelledby attribute on the nav element */
   'aria-labelledby'?: string;
   /** Whether the nav is expanded */
-  isOpen?: boolean;
+  isExpanded?: boolean;
   /** True to return the inner list without the wrapping nav element */
   returnList?: boolean;
 }
@@ -19,7 +19,7 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   children,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  isOpen = false,
+  isExpanded = false,
   returnList = false
 }: WizardNavProps) => {
   const innerList = <ol className={css(styles.wizardNavList)}>{children}</ol>;
@@ -30,7 +30,7 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 
   return (
     <nav
-      className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
     >

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

@@ -73,7 +73,10 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         {...rest}
         {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
         {...(id && { id: id.toString() })}
-        onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
+        onClick={e => {
+          e.preventDefault();
+          isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step);
+        }}
         className={css(
           styles.wizardNavLink,
           isCurrent && styles.modifiers.current,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardControlStep } from './types';
+import { WizardBasicStep } from './types';
 import { WizardBody, WizardBodyProps } from './WizardBody';
 
 /**
@@ -8,16 +8,16 @@ import { WizardBody, WizardBodyProps } from './WizardBody';
  * Also acts as a wrapper for content, with an optional inclusion of WizardBody.
  */
 
-export interface WizardStepProps extends Omit<WizardControlStep, 'parentId' | 'subStepIds' | 'visited'> {
+export interface WizardStepProps extends Omit<WizardBasicStep, 'visited'> {
   /** Optional for when the step is used as a parent to sub-steps */
   children?: React.ReactNode;
   /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
-  body?: WizardBodyProps | null;
+  body?: Omit<WizardBodyProps, 'children'> | null;
   /** Optional list of sub-steps */
   steps?: React.ReactElement<WizardStepProps>[];
 }
 
 export const WizardStep = ({ body, children }: WizardStepProps) =>
-  body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
+  body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : <>{children}</>;
 
 WizardStep.displayName = 'WizardStep';

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

@@ -6,16 +6,17 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 import { KeyTypes } from '../../../helpers/constants';
-import { WizardNav, WizardNavItem } from '../Wizard';
+import { WizardNav, WizardNavItem, WizardNavProps } from '../Wizard';
 import {
   WizardControlStep,
-  CustomWizardNavFunction,
-  DefaultWizardNavProps,
   isWizardBasicStep,
   isWizardParentStep,
   isWizardSubStep,
-  isCustomWizardNav
+  isCustomWizardNav,
+  DefaultWizardNavProps,
+  CustomWizardNavFunction
 } from './types';
+import { useWizardContext } from './WizardContext';
 
 /**
  * Used to toggle between step content, including the body and footer. This is also where the nav and its expandability is controlled.
@@ -26,16 +27,18 @@ export interface WizardToggleProps {
   steps: WizardControlStep[];
   /** The currently active WizardStep */
   activeStep: WizardControlStep;
-  /** The WizardFooter */
+  /** Wizard footer */
   footer: React.ReactElement;
-  /** Custom WizardNav or callback used to create a default WizardNav */
-  nav: DefaultWizardNavProps | CustomWizardNavFunction;
-  /** Navigate using the step index */
-  goToStepByIndex: (index: number) => void;
-  /** The button's aria-label */
+  /** Wizard nav */
+  nav: React.ReactElement<WizardNavProps>;
+  /** The expandable dropdown button's aria-label */
   'aria-label'?: string;
   /** Flag to unmount inactive steps instead of hiding. Defaults to true */
   unmountInactiveSteps?: boolean;
+  /** Flag to determine whether the dropdown nav is expanded */
+  isNavExpanded?: boolean;
+  /** Callback to expand or collapse the dropdown nav */
+  toggleNavExpanded?: () => void;
 }
 
 export const WizardToggle = ({
@@ -43,20 +46,20 @@ export const WizardToggle = ({
   activeStep,
   footer,
   nav,
-  goToStepByIndex,
+  isNavExpanded,
+  toggleNavExpanded,
   unmountInactiveSteps = true,
   'aria-label': ariaLabel = 'Wizard toggle'
 }: WizardToggleProps) => {
-  const [isNavOpen, setIsNavOpen] = React.useState(false);
   const isActiveSubStep = isWizardSubStep(activeStep);
 
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
-      if (isNavOpen && event.key === KeyTypes.Escape) {
-        setIsNavOpen(!isNavOpen);
+      if (isNavExpanded && event.key === KeyTypes.Escape) {
+        toggleNavExpanded();
       }
     },
-    [isNavOpen]
+    [isNavExpanded, toggleNavExpanded]
   );
 
   // Open/close collapsable nav on keydown event
@@ -84,19 +87,60 @@ export const WizardToggle = ({
         );
       });
 
+  return (
+    <>
+      <button
+        onClick={toggleNavExpanded}
+        className={css(styles.wizardToggle, isNavExpanded && 'pf-m-expanded')}
+        aria-label={ariaLabel}
+        aria-expanded={isNavExpanded}
+      >
+        <span className={css(styles.wizardToggleList)}>
+          <span className={css(styles.wizardToggleListItem)}>
+            {activeStep?.name}
+            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+          </span>
+          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
+        </span>
+
+        <span className={css(styles.wizardToggleIcon)}>
+          <CaretDownIcon aria-hidden="true" />
+        </span>
+      </button>
+      <div className={css(styles.wizardOuterWrap)}>
+        <div className={css(styles.wizardInnerWrap)}>
+          {nav}
+          {bodyContent}
+        </div>
+
+        {footer}
+      </div>
+    </>
+  );
+};
+
+interface WizardToggleInternalProps extends Pick<WizardToggleProps, 'unmountInactiveSteps'> {
+  /** Custom WizardNav or callback used to create a default WizardNav */
+  nav?: DefaultWizardNavProps | CustomWizardNavFunction;
+}
+
+export const WizardToggleInternal = ({ nav, unmountInactiveSteps }: WizardToggleInternalProps) => {
+  const [isNavExpanded, setIsNavExpanded] = React.useState(false);
+  const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
+
   const wizardNav = React.useMemo(() => {
     if (isCustomWizardNav(nav)) {
-      return nav(isNavOpen, steps, activeStep, goToStepByIndex);
+      return nav(isNavExpanded, steps, activeStep, goToStepByIndex);
     }
 
-    const props = {
-      isOpen: isNavOpen,
+    const navProps = {
+      isExpanded: isNavExpanded,
       'aria-label': nav?.ariaLabel || 'Wizard nav',
       ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
     };
 
     return (
-      <WizardNav {...props}>
+      <WizardNav {...navProps}>
         {steps.map((step, index) => {
           const stepIndex = index + 1;
           const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
@@ -148,7 +192,7 @@ export const WizardToggle = ({
                   step={firstSubStepIndex}
                   onNavItemClick={goToStepByIndex}
                 >
-                  <WizardNav {...props} returnList>
+                  <WizardNav {...navProps} returnList>
                     {subNavItems}
                   </WizardNav>
                 </WizardNavItem>
@@ -174,37 +218,18 @@ export const WizardToggle = ({
         })}
       </WizardNav>
     );
-  }, [activeStep?.id, goToStepByIndex, isNavOpen, nav, steps]);
+  }, [activeStep, goToStepByIndex, isNavExpanded, nav, steps]);
 
   return (
-    <>
-      <button
-        onClick={() => setIsNavOpen(prevIsOpen => !prevIsOpen)}
-        className={css(styles.wizardToggle, isNavOpen && 'pf-m-expanded')}
-        aria-label={ariaLabel}
-        aria-expanded={isNavOpen}
-      >
-        <span className={css(styles.wizardToggleList)}>
-          <span className={css(styles.wizardToggleListItem)}>
-            {activeStep?.name}
-            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
-          </span>
-          {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
-        </span>
-
-        <span className={css(styles.wizardToggleIcon)}>
-          <CaretDownIcon aria-hidden="true" />
-        </span>
-      </button>
-      <div className={css(styles.wizardOuterWrap)}>
-        <div className={css(styles.wizardInnerWrap)}>
-          {wizardNav}
-          {bodyContent}
-        </div>
-
-        {footer}
-      </div>
-    </>
+    <WizardToggle
+      nav={wizardNav}
+      footer={footer}
+      steps={steps}
+      activeStep={activeStep}
+      isNavExpanded={isNavExpanded}
+      toggleNavExpanded={() => setIsNavExpanded(prevIsExpanded => !prevIsExpanded)}
+      unmountInactiveSteps={unmountInactiveSteps}
+    />
   );
 };