@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/container/wizard/index.js

@@ -0,0 +1,861 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, {
+  memo,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  isValidElement,
+  cloneElement,
+  useRef,
+  Children
+} from "react";
+import { Box, Typography, Stepper } from "@mui/material";
+import clsx from "clsx";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import {
+  getNextValidStep,
+  getStepByName,
+  getStepByIndex,
+  handleNavigation,
+  extendNextFn,
+  extendPrevFn,
+  getPrevValidStep,
+  appendDatasetSteps,
+  trimStepsToLength
+} from "./utils";
+import WizardContext from "./WizardContext";
+import { WmWizardstep } from "./wizard-step";
+import { WizardStep } from "./components/WizardStep";
+import WmForm from "../../data/form";
+import { getFormData } from "../../../utils/form-utils";
+import { useParentFormData } from "../../data/form/form-context";
+import isEqual from "lodash-es/isEqual";
+import withStandalone from "../../../higherOrder/withStandalone";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  useShouldShowSkeleton
+} from "../../common/wm-skeleton";
+const DEFAULT_CLS = "app-wizard panel clearfix";
+const BODY_CLASS = "app-wizard-body panel-body";
+const WmWizardComponent = memo(
+  (props) => {
+    const {
+      listener,
+      stepstyle = "auto",
+      actionsalignment = "right",
+      defaultstep = "none",
+      defaultstepindex = 0,
+      cancelable = true,
+      enablenext = false,
+      nextbtnlabel = "Next",
+      previousbtnlabel = "Previous",
+      donebtnlabel = "Done",
+      cancelbtnlabel = "Cancel",
+      type = "static",
+      dataset = [],
+      nodatamessage = "No Data Found",
+      children,
+      className = "classic",
+      styles,
+      name = "",
+      onCancel,
+      onDone,
+      message,
+      orientation = "horizontal",
+      alternativeLabel = false,
+      nonLinear = true,
+      connector,
+      width,
+      height,
+      render,
+      standalone = false
+    } = props;
+    const [steps, setSteps] = useState([]);
+    const [wizardMessage, setWizardMessage] = useState(message || { caption: "", type: "" });
+    const [isInitialized, setIsInitialized] = useState(false);
+    const formRefs = useRef({});
+    const stepContainerRefs = useRef({});
+    const navIndexRef = useRef(-1);
+    const [formReady, setFormReady] = useState(false);
+    const parentFormContext = useParentFormData();
+    const isInsideOuterForm = !!parentFormContext && Object.keys(parentFormContext).length > 0;
+    const createDynamicSteps = useCallback(
+      (datasetItems, startIndex) => {
+        return datasetItems.map((item, index) => {
+          var _a, _b;
+          index = startIndex || index;
+          const stepData = render ? render(item, index, datasetItems) : item;
+          let stepProps = (stepData == null ? void 0 : stepData.props) || {};
+          if (isValidElement(stepData)) {
+            if (stepData.type === WmWizardstep) {
+              stepProps = stepData.props || {};
+            } else if ((_a = stepData.props) == null ? void 0 : _a.children) {
+              const childrenArray = Children.toArray(
+                (_b = stepData.props) == null ? void 0 : _b.children
+              );
+              const firstWizardStep = childrenArray.find(
+                (child) => isValidElement(child) && child.type === WmWizardstep
+              );
+              if (isValidElement(firstWizardStep)) {
+                stepProps = firstWizardStep.props || {};
+              }
+            }
+          }
+          return __spreadProps(__spreadValues({}, stepProps), {
+            name: `step_${index}`,
+            title: stepProps.title || `Step ${index + 1}`,
+            show: stepProps.show !== false,
+            enableskip: stepData.enableskip || false,
+            enableNext: stepData.enableNext !== false,
+            enablePrev: stepData.enablePrev !== false,
+            enableDone: stepData.enableDone !== false,
+            isDone: false,
+            done: false,
+            active: index === defaultstepindex,
+            disabled: false,
+            isValid: true,
+            isInitialized: false,
+            isdynamic: true,
+            dynamicStepIndex: index,
+            render: stepProps.render
+          });
+        });
+      },
+      [defaultstepindex]
+    );
+    const currentStep = useMemo(() => steps.find((step) => step.active) || null, [steps]);
+    const visibleSteps = useMemo(() => steps.filter((step) => step.show), [steps]);
+    const currentStepIndex = useMemo(() => {
+      if (!currentStep) return -1;
+      return visibleSteps.findIndex((step) => step.name === currentStep.name);
+    }, [currentStep, visibleSteps]);
+    useEffect(() => {
+      navIndexRef.current = currentStepIndex;
+    }, [currentStepIndex]);
+    const hasNextStep = useMemo(
+      () => currentStepIndex < visibleSteps.length - 1,
+      [currentStepIndex, visibleSteps]
+    );
+    const hasPrevStep = useMemo(() => currentStepIndex > 0, [currentStepIndex]);
+    const showDoneBtn = useMemo(
+      () => !hasNextStep && (currentStep == null ? void 0 : currentStep.enableDone) !== false,
+      [hasNextStep, currentStep]
+    );
+    const [isStepValid, setIsStepValid] = useState(true);
+    const [formValiditySignature, setFormValiditySignature] = useState("");
+    const formValidityMapRef = useRef(/* @__PURE__ */ new Map());
+    const getStepForms = useCallback((stepName) => {
+      var _a, _b;
+      const formElOrList = (_a = formRefs.current) == null ? void 0 : _a[stepName];
+      if (formElOrList) {
+        const cachedForms = Array.isArray(formElOrList) ? formElOrList : [formElOrList];
+        const stepContainer = (_b = cachedForms[0]) == null ? void 0 : _b.closest(".app-wizard-step-container");
+        if (stepContainer) {
+          const allForms = Array.from(stepContainer.querySelectorAll("form"));
+          if (allForms.length > 0) {
+            formRefs.current[stepName] = allForms.length === 1 ? allForms[0] : allForms;
+            return allForms;
+          }
+        }
+        return cachedForms;
+      }
+      return [];
+    }, []);
+    useEffect(() => {
+      const stepName = currentStep == null ? void 0 : currentStep.name;
+      if (!stepName) return;
+      const stepContainer = stepContainerRefs.current[stepName];
+      if (!stepContainer) return;
+      formValidityMapRef.current.clear();
+      setFormValiditySignature("");
+      const initialForms = getStepForms(stepName);
+      if (initialForms.length === 0) return;
+      const onValidity = (e) => {
+        const form = e.target.closest("form");
+        if (!form) return;
+        const detail = e.detail;
+        const isValid = (detail == null ? void 0 : detail.isValid) !== false;
+        const currentForms = getStepForms(stepName);
+        formValidityMapRef.current.set(form, isValid);
+        const allFormsValid = currentForms.every((f) => {
+          const validity = formValidityMapRef.current.get(f);
+          return validity === void 0 || validity === true;
+        });
+        setFormValiditySignature(allFormsValid ? "1" : "0");
+      };
+      stepContainer.addEventListener("wm:form-validity", onValidity);
+      return () => {
+        stepContainer.removeEventListener("wm:form-validity", onValidity);
+      };
+    }, [currentStep, formReady, getStepForms]);
+    const parentFormIsValid = parentFormContext == null ? void 0 : parentFormContext.isValid;
+    useEffect(() => {
+      const validateStep = () => {
+        var _a;
+        if (!currentStep) return;
+        const forms = getStepForms(currentStep.name);
+        if (forms.length === 0) {
+          if (isInsideOuterForm && parentFormContext) {
+            setIsStepValid(parentFormContext.isValid === true);
+            return;
+          }
+          setIsStepValid(true);
+          return;
+        }
+        const allFormsHidden = forms.every((form) => {
+          var _a2;
+          return form.hidden || ((_a2 = form.parentElement) == null ? void 0 : _a2.hidden);
+        });
+        if (allFormsHidden) {
+          setIsStepValid(true);
+          return;
+        }
+        let hasAnyFields = false;
+        let allFormsValid = true;
+        for (const form of forms) {
+          if (form.hidden || ((_a = form.parentElement) == null ? void 0 : _a.hidden)) continue;
+          const formdata = getFormData({ current: form });
+          if (!formdata) continue;
+          const hasFields = Object.keys(formdata.values || {}).length > 0;
+          if (hasFields) {
+            hasAnyFields = true;
+            if (formdata.isValid === false) {
+              allFormsValid = false;
+            }
+          }
+        }
+        if (!hasAnyFields) {
+          setIsStepValid(true);
+          return;
+        }
+        if (formValiditySignature === "") {
+          setIsStepValid(allFormsValid);
+        } else {
+          setIsStepValid(formValiditySignature === "1");
+        }
+      };
+      validateStep();
+    }, [
+      currentStep,
+      formValiditySignature,
+      formReady,
+      getStepForms,
+      isInsideOuterForm,
+      parentFormContext,
+      parentFormIsValid
+    ]);
+    const enableNext = useMemo(() => {
+      const enablenextBool = typeof enablenext === "string" ? enablenext.toLowerCase() === "true" || enablenext === "1" : Boolean(enablenext);
+      return enablenextBool || (currentStep == null ? void 0 : currentStep.enableNext) !== false && (currentStep == null ? void 0 : currentStep.isValid) !== false && isStepValid;
+    }, [enablenext, currentStep, isStepValid]);
+    const enablePrev = useMemo(() => (currentStep == null ? void 0 : currentStep.enablePrev) !== false, [currentStep]);
+    const enableDone = useMemo(
+      () => (currentStep == null ? void 0 : currentStep.enableDone) !== false && (currentStep == null ? void 0 : currentStep.isValid) !== false && isStepValid,
+      [currentStep, isStepValid]
+    );
+    const isFirstStep = useMemo(() => currentStepIndex === 0, [currentStepIndex]);
+    const isLastStep = useMemo(
+      () => currentStepIndex === visibleSteps.length - 1,
+      [currentStepIndex, visibleSteps]
+    );
+    const computedStepClass = useMemo(
+      () => stepstyle === "justified" ? "justified" : "auto",
+      [stepstyle]
+    );
+    const onStepHeaderClick = useCallback(
+      (event, step) => {
+        if ((step.done || step.isDone || nonLinear && type === "dynamic") && step.show && !step.disabled) {
+          setSteps(
+            (prevSteps) => prevSteps.map((s) => {
+              const stepIndex = prevSteps.findIndex((ps) => ps.name === s.name);
+              const targetIndex = prevSteps.findIndex((ps) => ps.name === step.name);
+              return __spreadProps(__spreadValues({}, s), {
+                active: s.name === step.name,
+                isDone: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex,
+                done: type === "dynamic" ? stepIndex < targetIndex : stepIndex < targetIndex || s.name === step.name && targetIndex > 0,
+                disabled: false,
+                // Ensure enableNext and isValid are preserved when activating a step
+                enableNext: s.name === step.name ? true : s.enableNext,
+                isValid: s.name === step.name ? true : s.isValid
+              });
+            })
+          );
+        }
+      },
+      [nonLinear, type]
+    );
+    const handleStepClick = useCallback(
+      (index) => {
+        const step = visibleSteps[index];
+        if (step && step.show && !step.disabled) {
+          if (step.done || step.isDone) {
+            onStepHeaderClick({}, step);
+          }
+        }
+      },
+      [visibleSteps, nonLinear, onStepHeaderClick, type]
+    );
+    const updateStep = useCallback((stepName, updates) => {
+      setSteps((prevSteps) => {
+        const stepIndex = prevSteps.findIndex((step) => step.name === stepName);
+        if (stepIndex === -1) return prevSteps;
+        const existing = prevSteps[stepIndex];
+        const hasChanges = Object.keys(updates).some(
+          (key) => existing[key] !== updates[key]
+        );
+        if (!hasChanges) return prevSteps;
+        const newSteps = [...prevSteps];
+        newSteps[stepIndex] = __spreadValues(__spreadValues({}, existing), updates);
+        return newSteps;
+      });
+    }, []);
+    const next = useCallback(
+      async (eventName = "next") => {
+        var _a, _b;
+        const fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
+        const fromStep = getStepByIndex(fromIndex, visibleSteps);
+        if (!fromStep) return;
+        const nextStep = getNextValidStep(fromIndex + 1, visibleSteps);
+        if (!nextStep) return;
+        const nextIndex = visibleSteps.findIndex((s) => s.name === nextStep.name);
+        if (eventName === "skip") {
+          const response = (_a = fromStep.onSkip) == null ? void 0 : _a.call(fromStep, fromStep, fromStep, fromIndex);
+          if (response !== void 0) {
+            await handleNavigation(
+              response,
+              () => extendNextFn(fromStep, fromIndex, visibleSteps, setSteps)
+            );
+          } else {
+            extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
+          }
+        } else if (fromStep.isValid && eventName === "next") {
+          const response = (_b = fromStep.onNext) == null ? void 0 : _b.call(fromStep, fromStep, fromStep, fromIndex);
+          if (response !== void 0) {
+            await handleNavigation(
+              response,
+              () => extendNextFn(fromStep, fromIndex, visibleSteps, setSteps)
+            );
+          } else {
+            extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
+          }
+        } else if (enablenext && !fromStep.isValid) {
+          console.warn("Cannot proceed: current step is invalid");
+        } else {
+          extendNextFn(fromStep, fromIndex, visibleSteps, setSteps);
+        }
+        navIndexRef.current = nextIndex;
+        setFormReady(false);
+      },
+      [currentStepIndex, visibleSteps, enablenext]
+    );
+    const prev = useCallback(async () => {
+      var _a;
+      const fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
+      const fromStep = getStepByIndex(fromIndex, visibleSteps);
+      if (!fromStep) return;
+      const targetStep = getPrevValidStep(fromIndex - 1, visibleSteps);
+      if (!targetStep) return;
+      const prevIndex = visibleSteps.findIndex((s) => s.name === targetStep.name);
+      const response = (_a = fromStep.onPrev) == null ? void 0 : _a.call(fromStep, fromStep, fromStep, fromIndex);
+      if (response !== void 0) {
+        await handleNavigation(
+          response,
+          () => extendPrevFn(fromStep, fromIndex, visibleSteps, setSteps)
+        );
+      } else {
+        extendPrevFn(fromStep, fromIndex, visibleSteps, setSteps);
+      }
+      navIndexRef.current = prevIndex;
+      setFormReady(false);
+    }, [currentStepIndex, visibleSteps]);
+    const registerStep = useCallback((stepData) => {
+      setSteps((prevSteps) => {
+        const existingIndex = prevSteps.findIndex((step) => step.name === stepData.name);
+        if (existingIndex >= 0) {
+          const existing = prevSteps[existingIndex];
+          const hasChanges = Object.keys(stepData).some(
+            (key) => existing[key] !== stepData[key]
+          );
+          if (hasChanges) {
+            const newSteps = [...prevSteps];
+            newSteps[existingIndex] = __spreadValues(__spreadValues({}, existing), stepData);
+            return newSteps;
+          }
+          return prevSteps;
+        }
+        return [...prevSteps, stepData];
+      });
+    }, []);
+    const skip = useCallback(() => {
+      next("skip");
+    }, [next]);
+    const done = useCallback(() => {
+      if (currentStep) {
+        updateStep(currentStep.name, { isDone: true, done: true });
+        if (onDone) {
+          onDone(currentStep, steps);
+        }
+      }
+    }, [currentStep, updateStep, onDone, steps]);
+    const cancel = useCallback(() => {
+      if (onCancel) {
+        onCancel(currentStep, steps);
+      }
+    }, [onCancel, steps]);
+    const gotoStep = useCallback(
+      (step) => {
+        let gotoStepIndex;
+        let targetStep = null;
+        if (typeof step === "string") {
+          gotoStepIndex = steps.map((s) => s.name).indexOf(step);
+          if (gotoStepIndex === -1) {
+            console.error(`Could not find step '${step}'`);
+            return;
+          }
+          targetStep = steps[gotoStepIndex];
+        } else if (typeof step === "number" && step >= 0) {
+          gotoStepIndex = step;
+          targetStep = getStepByIndex(step, visibleSteps);
+        } else {
+          console.error("Invalid step name or index provided");
+          return;
+        }
+        if (targetStep == null ? void 0 : targetStep.show) {
+          const visIndex = visibleSteps.findIndex((s) => s.name === (targetStep == null ? void 0 : targetStep.name));
+          if (visIndex >= 0) navIndexRef.current = visIndex;
+          onStepHeaderClick({}, targetStep);
+        } else {
+          console.error("The gotoStep function cannot navigate to hidden steps");
+        }
+      },
+      [steps, visibleSteps, onStepHeaderClick]
+    );
+    const setDefaultStep = useCallback(
+      (step) => {
+        if (step && step.show) {
+          setSteps(
+            (prevSteps) => prevSteps.map((s, index) => {
+              const stepIndex = prevSteps.findIndex((ps) => ps.name === s.name);
+              const defaultIndex = prevSteps.findIndex((ps) => ps.name === step.name);
+              return __spreadProps(__spreadValues({}, s), {
+                active: s.name === step.name,
+                isDone: false,
+                done: stepIndex < defaultIndex,
+                isInitialized: s.name === step.name ? true : s.isInitialized,
+                // Ensure enableNext and isValid are preserved for the active step
+                enableNext: s.name === step.name ? true : s.enableNext,
+                isValid: s.name === step.name ? true : s.isValid
+              });
+            })
+          );
+          setTimeout(() => {
+            if (step.onLoad) {
+              const stepIndex = visibleSteps.findIndex((s) => s.name === step.name);
+              step.onLoad(step, stepIndex);
+            }
+          }, 100);
+        } else {
+          const nextValidStep = getNextValidStep(0, visibleSteps);
+          if (nextValidStep) {
+            setDefaultStep(nextValidStep);
+          }
+        }
+      },
+      [visibleSteps]
+    );
+    const showSignature = steps.map(
+      (s) => {
+        var _a, _b, _c, _d;
+        return ((_b = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[s.name]) == null ? void 0 : _b.show) === false || ((_d = (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[s.name]) == null ? void 0 : _d.show) === "false" ? "0" : "1";
+      }
+    ).join("|");
+    useEffect(() => {
+      if (!(listener == null ? void 0 : listener.Widgets)) return;
+      steps.forEach((step, index) => {
+        var _a;
+        const widgetShow = (_a = listener.Widgets[step.name]) == null ? void 0 : _a.show;
+        if ((widgetShow === false || widgetShow === "false") && step.show !== false) {
+          updateStep(step.name, { show: false, enableskip: false });
+          const prevStep = steps[index - 1];
+          if (prevStep && step.active) {
+            updateStep(prevStep.name, { active: true });
+            navIndexRef.current = index - 1;
+          }
+        }
+      });
+    }, [showSignature]);
+    const updateListener = React.useCallback(() => {
+      if (listener && typeof listener.onChange === "function") {
+        listener.onChange(name, {
+          hasNextStep: () => hasNextStep,
+          hasPreviousStep: () => hasPrevStep,
+          hasNoNextStep: () => showDoneBtn,
+          next: () => next("next"),
+          previous: () => prev(),
+          done: () => done(),
+          cancel: () => cancel(),
+          skip: () => skip(),
+          disableNext: () => !enableNext,
+          disablePrevious: () => !enablePrev,
+          disableDone: () => !enableDone,
+          prev,
+          cancelable,
+          nextbtnlabel,
+          previousbtnlabel,
+          donebtnlabel,
+          cancelbtnlabel,
+          actionsalignment,
+          skippable: currentStep == null ? void 0 : currentStep.enableskip,
+          getCurrentStepIndex: () => currentStepIndex,
+          gotoStep: (step) => gotoStep(step),
+          isFirstStep,
+          isLastStep,
+          currentStepIndex,
+          currentStep
+        });
+      }
+    }, [
+      hasNextStep,
+      hasPrevStep,
+      showDoneBtn,
+      enableNext,
+      enablePrev,
+      enableDone,
+      cancelable,
+      currentStep == null ? void 0 : currentStep.enableskip,
+      nextbtnlabel,
+      previousbtnlabel,
+      donebtnlabel,
+      cancelbtnlabel,
+      actionsalignment,
+      currentStepIndex,
+      isFirstStep,
+      isLastStep,
+      visibleSteps
+    ]);
+    useEffect(() => {
+      updateListener();
+    }, [updateListener]);
+    useEffect(() => {
+      if (steps.length > 0 && !isInitialized && visibleSteps.length > 0 && type !== "dynamic") {
+        let defaultStepRef = null;
+        if (defaultstep !== "none") {
+          defaultStepRef = getStepByName(defaultstep, steps);
+        } else if (defaultstepindex >= 0 && defaultstepindex < visibleSteps.length) {
+          defaultStepRef = getStepByIndex(defaultstepindex, visibleSteps);
+        } else {
+          defaultStepRef = getNextValidStep(0, visibleSteps);
+        }
+        if (defaultStepRef) {
+          setDefaultStep(defaultStepRef);
+          setIsInitialized(true);
+        }
+      }
+    }, [
+      steps.length,
+      visibleSteps.length,
+      defaultstep,
+      defaultstepindex,
+      type,
+      isInitialized,
+      setDefaultStep,
+      visibleSteps
+    ]);
+    useEffect(() => {
+      if (currentStep == null ? void 0 : currentStep.onLoad) {
+        currentStep == null ? void 0 : currentStep.onLoad(currentStep, currentStepIndex);
+      }
+    }, [currentStep == null ? void 0 : currentStep.onLoad]);
+    useEffect(() => {
+      if (type === "dynamic" && dataset.length > 0 && steps.length === 0) {
+        const dynamicSteps = createDynamicSteps(dataset);
+        if (defaultstepindex >= 0 && defaultstepindex < dynamicSteps.length) {
+          const defaultStep = dynamicSteps[defaultstepindex];
+          if (defaultStep && defaultStep.show) {
+            const stepsWithDefault = dynamicSteps.map((step) => __spreadProps(__spreadValues({}, step), {
+              active: step.name === defaultStep.name,
+              isDone: false,
+              done: step.dynamicStepIndex !== void 0 ? step.dynamicStepIndex < defaultstepindex : false
+            }));
+            setSteps(stepsWithDefault);
+            setIsInitialized(true);
+          } else {
+            setSteps(dynamicSteps);
+          }
+        } else {
+          setSteps(dynamicSteps);
+        }
+        return;
+      }
+      if (type === "dynamic" && dataset.length > 0) {
+        if (steps.length > 0 && dataset.length > steps.length) {
+          const newItems = dataset.slice(steps.length);
+          const newSteps = createDynamicSteps(newItems, steps.length);
+          if (newSteps.length) {
+            setSteps((prev2) => appendDatasetSteps(prev2, newSteps));
+          }
+          return;
+        }
+        if (steps.length > 0 && dataset.length < steps.length) {
+          setSteps((prev2) => trimStepsToLength(prev2, dataset.length));
+          return;
+        }
+      }
+    }, [type, dataset, createDynamicSteps, defaultstepindex, dataset.length]);
+    const contextValue = useMemo(
+      () => ({
+        steps,
+        currentStep,
+        currentStepIndex,
+        hasNextStep,
+        hasPrevStep,
+        showDoneBtn: showDoneBtn || false,
+        enableNext: enableNext || false,
+        enablePrev: enablePrev || false,
+        enableDone: enableDone || false,
+        isFirstStep,
+        isLastStep,
+        registerStep,
+        updateStep,
+        next,
+        prev,
+        skip,
+        done,
+        cancel,
+        gotoStep,
+        onStepHeaderClick,
+        addStep: () => []
+      }),
+      [
+        steps,
+        currentStep,
+        currentStepIndex,
+        hasNextStep,
+        hasPrevStep,
+        showDoneBtn,
+        enableNext,
+        enablePrev,
+        enableDone,
+        isFirstStep,
+        isLastStep,
+        registerStep,
+        updateStep,
+        next,
+        prev,
+        skip,
+        done,
+        cancel,
+        gotoStep,
+        onStepHeaderClick
+      ]
+    );
+    const wizardSteps = [];
+    React.Children.forEach(children, (child) => {
+      if (isValidElement(child) && child.type === WmWizardstep) {
+        wizardSteps.push(child);
+      }
+    });
+    if (type === "dynamic" && (!dataset || dataset.length === 0)) {
+      return /* @__PURE__ */ jsx("div", { children: nodatamessage });
+    }
+    const classValue = className && className.trim() !== "" ? className : "classic";
+    return /* @__PURE__ */ jsx(WizardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues({
+        className: clsx(DEFAULT_CLS, classValue, computedStepClass, {
+          classic: classValue == null ? void 0 : classValue.includes("classic"),
+          number: classValue == null ? void 0 : classValue.includes("number"),
+          dottedstepper: classValue == null ? void 0 : classValue.includes("dottedstepper"),
+          "text-inline": classValue == null ? void 0 : classValue.includes("text-inline"),
+          iconstepper: classValue == null ? void 0 : classValue.includes("iconstepper")
+        }),
+        style: __spreadProps(__spreadValues({}, styles), { width, height }),
+        hidden: props.hidden
+      }, { name }), {
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: "app-wizard-heading", children: /* @__PURE__ */ jsx(
+            Stepper,
+            {
+              activeStep: currentStepIndex,
+              orientation,
+              alternativeLabel,
+              nonLinear,
+              connector,
+              className: clsx(
+                "app-wizard-steps",
+                computedStepClass,
+                stepstyle === "justified" ? "nav-justified" : ""
+              ),
+              children: steps.map((step, index) => {
+                const visibleIndex = steps.slice(0, index).filter((s) => s.show !== false && s.show !== "false").length;
+                const isCurrentStep = currentStepIndex === visibleIndex && step.show !== false && step.show !== "false";
+                return /* @__PURE__ */ jsx(
+                  WizardStep,
+                  {
+                    step,
+                    index,
+                    className: classValue,
+                    nonLinear,
+                    orientation,
+                    onStepClick: handleStepClick,
+                    current: isCurrentStep
+                  },
+                  step.name
+                );
+              })
+            }
+          ) }),
+          (orientation === "horizontal" || type === "dynamic") && /* @__PURE__ */ jsxs(Box, { className: BODY_CLASS, children: [
+            wizardMessage.caption && /* @__PURE__ */ jsx(Box, { component: "p", children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "body2",
+                color: wizardMessage.type === "error" ? "error" : "textSecondary",
+                children: wizardMessage.caption
+              }
+            ) }),
+            steps.map((step, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: (el) => {
+                  if (el) {
+                    stepContainerRefs.current[step.name] = el;
+                    const formElements = el.querySelectorAll("form");
+                    if (formElements.length > 0) {
+                      formRefs.current[step.name] = formElements.length === 1 ? formElements[0] : Array.from(formElements);
+                      if (formElements[0].classList.contains("app-form")) {
+                        setFormReady(true);
+                      }
+                    }
+                  }
+                },
+                className: clsx("app-wizard-step-container", {
+                  active: step.active
+                }),
+                hidden: !step.active,
+                name: step.name,
+                children: isInsideOuterForm ? (
+                  // Inside outer form - use div, fields/forms pass through to outer form context
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: clsx("app-wizard-step-content", {
+                        active: step.active
+                      }),
+                      children: (currentStep == null ? void 0 : currentStep.name) && step.active && currentStep.render ? currentStep.render(step, index) : step.children
+                    }
+                  )
+                ) : (
+                  // @ts-ignore Standalone wizard without inner form - wizard provides form context
+                  /* @__PURE__ */ jsx(
+                    WmForm,
+                    {
+                      standalone,
+                      show: step.active,
+                      name: step.name + `_form`,
+                      className: clsx("app-wizard-step-content", {
+                        active: step.active
+                      }),
+                      listener,
+                      isInsideWizard: true,
+                      children: (currentStep == null ? void 0 : currentStep.name) && step.active && currentStep.render ? currentStep.render(step, index) : step.children
+                    }
+                  )
+                )
+              },
+              step.name
+            ))
+          ] }),
+          children,
+          type === "static" && wizardSteps.map(
+            (step, index) => {
+              var _a;
+              return cloneElement(step, {
+                key: ((_a = step.props) == null ? void 0 : _a.name) || index
+              });
+            }
+          )
+        ]
+      })
+    ) });
+  },
+  (prev, next) => {
+    const keys = [
+      "render",
+      "dataset",
+      "className",
+      "styles",
+      "width",
+      "height",
+      "type",
+      "stepstyle",
+      "orientation",
+      "alternativeLabel",
+      "nonLinear",
+      "defaultstep",
+      "defaultstepindex",
+      "message",
+      "cancelable",
+      "enablenext",
+      "nextbtnlabel",
+      "previousbtnlabel",
+      "donebtnlabel",
+      "cancelbtnlabel",
+      "children",
+      "hidden",
+      "loading",
+      "showSkeleton",
+      "skeletonRows",
+      "skeletonColumns"
+    ];
+    return keys.every((key) => {
+      if (key === "children") {
+        return prev[key] === next[key];
+      }
+      return isEqual(prev[key], next[key]);
+    });
+  }
+);
+const WmWizard = (props) => {
+  if (useShouldShowSkeleton(props.loading, props.showSkeleton)) {
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmWizard"]), {
+        rows: props.skeletonRows,
+        columns: props.skeletonColumns,
+        className: clsx(DEFAULT_CLS, props.className),
+        styles: props.styles
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx(WmWizardComponent, __spreadValues({}, props));
+};
+WmWizard.displayName = "WmWizard";
+const WmWizardStandalone = withStandalone(WmWizard);
+WmWizardComponent.displayName = "WmWizardComponent";
+var wizard_default = withBaseWrapper(WmWizard);
+export {
+  WmWizardStandalone as WmWizard,
+  wizard_default as default
+};