@wavemaker/react-runtime 11.14.1-16.6404

package/components/container/wizard/index.js

@@ -0,0 +1,710 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _utils = require("./utils");
+var _WizardContext = _interopRequireDefault(require("./WizardContext"));
+var _wizardStep = _interopRequireDefault(require("./wizard-step"));
+var _WizardStep = require("./components/WizardStep");
+var _form = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form"));
+var _formUtils = require("@wavemaker/react-runtime/utils/form-utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLS = "app-wizard panel clearfix";
+var BODY_CLASS = "app-wizard-body panel-body";
+
+// Main Wizard Component
+var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var listener = props.listener,
+    _props$stepstyle = props.stepstyle,
+    stepstyle = _props$stepstyle === void 0 ? "auto" : _props$stepstyle,
+    _props$actionsalignme = props.actionsalignment,
+    actionsalignment = _props$actionsalignme === void 0 ? "right" : _props$actionsalignme,
+    _props$defaultstep = props.defaultstep,
+    defaultstep = _props$defaultstep === void 0 ? "none" : _props$defaultstep,
+    _props$defaultstepind = props.defaultstepindex,
+    defaultstepindex = _props$defaultstepind === void 0 ? 0 : _props$defaultstepind,
+    _props$cancelable = props.cancelable,
+    cancelable = _props$cancelable === void 0 ? true : _props$cancelable,
+    _props$enablenext = props.enablenext,
+    enablenext = _props$enablenext === void 0 ? false : _props$enablenext,
+    _props$nextbtnlabel = props.nextbtnlabel,
+    nextbtnlabel = _props$nextbtnlabel === void 0 ? "Next" : _props$nextbtnlabel,
+    _props$previousbtnlab = props.previousbtnlabel,
+    previousbtnlabel = _props$previousbtnlab === void 0 ? "Previous" : _props$previousbtnlab,
+    _props$donebtnlabel = props.donebtnlabel,
+    donebtnlabel = _props$donebtnlabel === void 0 ? "Done" : _props$donebtnlabel,
+    _props$cancelbtnlabel = props.cancelbtnlabel,
+    cancelbtnlabel = _props$cancelbtnlabel === void 0 ? "Cancel" : _props$cancelbtnlabel,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "static" : _props$type,
+    _props$dataset = props.dataset,
+    dataset = _props$dataset === void 0 ? [] : _props$dataset,
+    _props$nodatamessage = props.nodatamessage,
+    nodatamessage = _props$nodatamessage === void 0 ? "No Data Found" : _props$nodatamessage,
+    children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "classic" : _props$className,
+    styles = props.styles,
+    _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    onCancel = props.onCancel,
+    onDone = props.onDone,
+    message = props.message,
+    _props$orientation = props.orientation,
+    orientation = _props$orientation === void 0 ? "horizontal" : _props$orientation,
+    _props$alternativeLab = props.alternativeLabel,
+    alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
+    _props$nonLinear = props.nonLinear,
+    nonLinear = _props$nonLinear === void 0 ? true : _props$nonLinear,
+    connector = props.connector,
+    width = props.width,
+    height = props.height,
+    render = props.render;
+  var _useState = (0, _react.useState)([]),
+    steps = _useState[0],
+    setSteps = _useState[1];
+  var _useState2 = (0, _react.useState)(message || {
+      caption: "",
+      type: ""
+    }),
+    wizardMessage = _useState2[0],
+    setWizardMessage = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isInitialized = _useState3[0],
+    setIsInitialized = _useState3[1];
+  var formRefs = (0, _react.useRef)({});
+
+  // Create dynamic steps callback
+  var createDynamicSteps = (0, _react.useCallback)(function (datasetItems) {
+    return datasetItems.map(function (item, index) {
+      var stepData = render ? render(item, index, datasetItems) : item;
+      var stepProps = stepData.props || {};
+      return _objectSpread(_objectSpread({}, stepProps), {}, {
+        name: "step_".concat(index),
+        title: stepProps.title || "Step ".concat(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]);
+
+  // Computed properties
+  var currentStep = (0, _react.useMemo)(function () {
+    return steps.find(function (step) {
+      return step.active;
+    }) || null;
+  }, [steps]);
+  var visibleSteps = (0, _react.useMemo)(function () {
+    return steps.filter(function (step) {
+      return step.show;
+    });
+  }, [steps]);
+  var currentStepIndex = (0, _react.useMemo)(function () {
+    if (!currentStep) return -1;
+    return visibleSteps.findIndex(function (step) {
+      return step.name === currentStep.name;
+    });
+  }, [currentStep, visibleSteps]);
+  var _hasNextStep = (0, _react.useMemo)(function () {
+    return currentStepIndex < visibleSteps.length - 1;
+  }, [currentStepIndex, visibleSteps]);
+  var hasPrevStep = (0, _react.useMemo)(function () {
+    return currentStepIndex > 0;
+  }, [currentStepIndex]);
+  var showDoneBtn = (0, _react.useMemo)(function () {
+    return !_hasNextStep && (currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableDone) !== false;
+  }, [_hasNextStep, currentStep]);
+  var _useState4 = (0, _react.useState)(true),
+    isStepValid = _useState4[0],
+    setIsStepValid = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var validateStep = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var currentStepForm, formdata, hasFields, result;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (currentStep) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              currentStepForm = formRefs.current[currentStep.name];
+              if (currentStepForm) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return");
+            case 5:
+              formdata = (0, _formUtils.getFormData)({
+                current: currentStepForm
+              });
+              if (formdata) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return");
+            case 8:
+              hasFields = Object.keys(formdata.values || {}).length > 0;
+              if (hasFields) {
+                _context.next = 12;
+                break;
+              }
+              setIsStepValid(true);
+              return _context.abrupt("return");
+            case 12:
+              _context.next = 14;
+              return (0, _formUtils.formValidate)({
+                current: currentStepForm
+              });
+            case 14:
+              result = _context.sent;
+              setIsStepValid(result);
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function validateStep() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    validateStep();
+  }, [currentStep]);
+  var enableNext = (0, _react.useMemo)(function () {
+    return enablenext || (currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableNext) !== false && (currentStep === null || currentStep === void 0 ? void 0 : currentStep.isValid) !== false && isStepValid;
+  }, [enablenext, currentStep, isStepValid]);
+  var enablePrev = (0, _react.useMemo)(function () {
+    return (currentStep === null || currentStep === void 0 ? void 0 : currentStep.enablePrev) !== false;
+  }, [currentStep]);
+  var enableDone = (0, _react.useMemo)(function () {
+    return (currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableDone) !== false && (currentStep === null || currentStep === void 0 ? void 0 : currentStep.isValid) !== false && isStepValid;
+  }, [currentStep, isStepValid]);
+  var isFirstStep = (0, _react.useMemo)(function () {
+    return currentStepIndex === 0;
+  }, [currentStepIndex]);
+  var isLastStep = (0, _react.useMemo)(function () {
+    return currentStepIndex === visibleSteps.length - 1;
+  }, [currentStepIndex, visibleSteps]);
+  var computedStepClass = (0, _react.useMemo)(function () {
+    return stepstyle === "justified" ? "justified" : "auto";
+  }, [stepstyle]);
+
+  // Step click handler
+  var onStepHeaderClick = (0, _react.useCallback)(function (event, step) {
+    if ((step.done || step.isDone || nonLinear && type === "dynamic") && step.show && !step.disabled) {
+      setSteps(function (prevSteps) {
+        return prevSteps.map(function (s) {
+          var stepIndex = prevSteps.findIndex(function (ps) {
+            return ps.name === s.name;
+          });
+          var targetIndex = prevSteps.findIndex(function (ps) {
+            return ps.name === step.name;
+          });
+          return _objectSpread(_objectSpread({}, 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]);
+  var handleStepClick = (0, _react.useCallback)(function (index) {
+    var step = visibleSteps[index];
+    if (step && step.show && !step.disabled) {
+      if (step.done || step.isDone) {
+        onStepHeaderClick({}, step);
+      }
+    }
+  }, [visibleSteps, nonLinear, onStepHeaderClick, type]);
+
+  // Step management functions
+  var updateStep = (0, _react.useCallback)(function (stepName, updates) {
+    setSteps(function (prevSteps) {
+      var stepIndex = prevSteps.findIndex(function (step) {
+        return step.name === stepName;
+      });
+      if (stepIndex === -1) return prevSteps;
+      var existing = prevSteps[stepIndex];
+      var hasChanges = Object.keys(updates).some(function (key) {
+        return existing[key] !== updates[key];
+      });
+      if (!hasChanges) return prevSteps;
+      var newSteps = (0, _toConsumableArray2["default"])(prevSteps);
+      newSteps[stepIndex] = _objectSpread(_objectSpread({}, existing), updates);
+      return newSteps;
+    });
+  }, []);
+
+  // Navigation functions
+  var _next = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var eventName,
+      _currentStep$onSkip,
+      response,
+      _currentStep$onNext,
+      _response,
+      _args2 = arguments;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          eventName = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : "next";
+          if (currentStep) {
+            _context2.next = 3;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 3:
+          if (!(eventName === "skip")) {
+            _context2.next = 13;
+            break;
+          }
+          response = (_currentStep$onSkip = currentStep.onSkip) === null || _currentStep$onSkip === void 0 ? void 0 : _currentStep$onSkip.call(currentStep, currentStep, currentStep, currentStepIndex);
+          if (!(response !== undefined)) {
+            _context2.next = 10;
+            break;
+          }
+          _context2.next = 8;
+          return (0, _utils.handleNavigation)(response, function () {
+            return (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+          });
+        case 8:
+          _context2.next = 11;
+          break;
+        case 10:
+          (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+        case 11:
+          _context2.next = 24;
+          break;
+        case 13:
+          if (!(currentStep.isValid && eventName === "next")) {
+            _context2.next = 23;
+            break;
+          }
+          _response = (_currentStep$onNext = currentStep.onNext) === null || _currentStep$onNext === void 0 ? void 0 : _currentStep$onNext.call(currentStep, currentStep, currentStep, currentStepIndex);
+          if (!(_response !== undefined)) {
+            _context2.next = 20;
+            break;
+          }
+          _context2.next = 18;
+          return (0, _utils.handleNavigation)(_response, function () {
+            return (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+          });
+        case 18:
+          _context2.next = 21;
+          break;
+        case 20:
+          (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+        case 21:
+          _context2.next = 24;
+          break;
+        case 23:
+          if (enablenext && !currentStep.isValid) {
+            console.warn("Cannot proceed: current step is invalid");
+          } else {
+            (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+          }
+        case 24:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })), [currentStep, currentStepIndex, visibleSteps, enablenext]);
+  var prev = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _currentStep$onPrev;
+    var response;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (currentStep) {
+            _context3.next = 2;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 2:
+          response = (_currentStep$onPrev = currentStep.onPrev) === null || _currentStep$onPrev === void 0 ? void 0 : _currentStep$onPrev.call(currentStep, currentStep, currentStep, currentStepIndex);
+          if (!(response !== undefined)) {
+            _context3.next = 8;
+            break;
+          }
+          _context3.next = 6;
+          return (0, _utils.handleNavigation)(response, function () {
+            return (0, _utils.extendPrevFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+          });
+        case 6:
+          _context3.next = 9;
+          break;
+        case 8:
+          (0, _utils.extendPrevFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+        case 9:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })), [currentStep, currentStepIndex, visibleSteps]);
+  var registerStep = (0, _react.useCallback)(function (stepData) {
+    setSteps(function (prevSteps) {
+      var existingIndex = prevSteps.findIndex(function (step) {
+        return step.name === stepData.name;
+      });
+      if (existingIndex >= 0) {
+        var existing = prevSteps[existingIndex];
+        var hasChanges = Object.keys(stepData).some(function (key) {
+          return existing[key] !== stepData[key];
+        });
+        if (hasChanges) {
+          var newSteps = (0, _toConsumableArray2["default"])(prevSteps);
+          newSteps[existingIndex] = _objectSpread(_objectSpread({}, existing), stepData);
+          return newSteps;
+        }
+        return prevSteps;
+      }
+      return [].concat((0, _toConsumableArray2["default"])(prevSteps), [stepData]);
+    });
+  }, []);
+  var _skip = (0, _react.useCallback)(function () {
+    _next("skip");
+  }, [_next]);
+  var _done = (0, _react.useCallback)(function () {
+    if (currentStep) {
+      updateStep(currentStep.name, {
+        isDone: true,
+        done: true
+      });
+      if (onDone) {
+        onDone(currentStep, steps);
+      }
+    }
+  }, [currentStep, updateStep, onDone, steps]);
+  var _cancel = (0, _react.useCallback)(function () {
+    if (onCancel) {
+      onCancel(currentStep, steps);
+    }
+  }, [onCancel, steps]);
+  var _gotoStep = (0, _react.useCallback)(function (step) {
+    var _targetStep;
+    var gotoStepIndex;
+    var targetStep = null;
+    if (typeof step === "string") {
+      gotoStepIndex = steps.map(function (s) {
+        return s.name;
+      }).indexOf(step);
+      if (gotoStepIndex === -1) {
+        console.error("Could not find step '".concat(step, "'"));
+        return;
+      }
+      targetStep = steps[gotoStepIndex];
+    } else if (typeof step === "number" && step >= 0) {
+      gotoStepIndex = step;
+      targetStep = (0, _utils.getStepByIndex)(step, visibleSteps);
+    } else {
+      console.error("Invalid step name or index provided");
+      return;
+    }
+    if ((_targetStep = targetStep) !== null && _targetStep !== void 0 && _targetStep.show) {
+      onStepHeaderClick({}, targetStep);
+    } else {
+      console.error("The gotoStep function cannot navigate to hidden steps");
+    }
+  }, [steps, visibleSteps, onStepHeaderClick]);
+
+  // Initialize default step
+  var setDefaultStep = (0, _react.useCallback)(function (step) {
+    if (step && step.show) {
+      setSteps(function (prevSteps) {
+        return prevSteps.map(function (s, index) {
+          var stepIndex = prevSteps.findIndex(function (ps) {
+            return ps.name === s.name;
+          });
+          var defaultIndex = prevSteps.findIndex(function (ps) {
+            return ps.name === step.name;
+          });
+          return _objectSpread(_objectSpread({}, 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(function () {
+        if (step.onLoad) {
+          var stepIndex = visibleSteps.findIndex(function (s) {
+            return s.name === step.name;
+          });
+          step.onLoad(step, stepIndex);
+        }
+      }, 100);
+    } else {
+      var nextValidStep = (0, _utils.getNextValidStep)(0, visibleSteps);
+      if (nextValidStep) {
+        setDefaultStep(nextValidStep);
+      }
+    }
+  }, [visibleSteps]);
+  var updateListener = _react["default"].useCallback(function () {
+    if (listener && typeof listener.onChange === "function") {
+      listener.onChange(name, {
+        hasNextStep: function hasNextStep() {
+          return _hasNextStep;
+        },
+        hasPreviousStep: function hasPreviousStep() {
+          return hasPrevStep;
+        },
+        hasNoNextStep: function hasNoNextStep() {
+          return showDoneBtn;
+        },
+        next: function next() {
+          return _next("next");
+        },
+        previous: function previous() {
+          return prev();
+        },
+        done: function done() {
+          return _done();
+        },
+        cancel: function cancel() {
+          return _cancel();
+        },
+        skip: function skip() {
+          return _skip();
+        },
+        disableNext: function disableNext() {
+          return !enableNext;
+        },
+        disablePrevious: function disablePrevious() {
+          return !enablePrev;
+        },
+        disableDone: function disableDone() {
+          return !enableDone;
+        },
+        cancelable: cancelable,
+        nextbtnlabel: nextbtnlabel,
+        previousbtnlabel: previousbtnlabel,
+        donebtnlabel: donebtnlabel,
+        cancelbtnlabel: cancelbtnlabel,
+        actionsalignment: actionsalignment,
+        skippable: currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableskip,
+        getCurrentStepIndex: function getCurrentStepIndex() {
+          return currentStepIndex;
+        },
+        gotoStep: function gotoStep(step) {
+          return _gotoStep(step);
+        },
+        isFirstStep: isFirstStep,
+        isLastStep: isLastStep
+      });
+    }
+  }, [_hasNextStep, hasPrevStep, showDoneBtn, enableNext, enablePrev, enableDone, cancelable, currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableskip, nextbtnlabel, previousbtnlabel, donebtnlabel, cancelbtnlabel, actionsalignment, currentStepIndex]);
+  (0, _react.useEffect)(function () {
+    updateListener();
+  }, [updateListener]);
+
+  // Initialize default step for STATIC wizards only
+  (0, _react.useEffect)(function () {
+    if (steps.length > 0 && !isInitialized && visibleSteps.length > 0 && type !== "dynamic") {
+      var defaultStepRef = null;
+      if (defaultstep !== "none") {
+        defaultStepRef = (0, _utils.getStepByName)(defaultstep, steps);
+      } else if (defaultstepindex >= 0 && defaultstepindex < visibleSteps.length) {
+        // CHANGED: Removed type === "dynamic" check and added bounds checking
+        // REASON: This effect only runs for static wizards, and bounds checking prevents runtime errors
+        defaultStepRef = (0, _utils.getStepByIndex)(defaultstepindex, visibleSteps);
+      } else {
+        defaultStepRef = (0, _utils.getNextValidStep)(0, visibleSteps);
+      }
+      if (defaultStepRef) {
+        setDefaultStep(defaultStepRef);
+        setIsInitialized(true);
+      }
+    }
+  }, [steps.length, visibleSteps.length, defaultstep, defaultstepindex, type, isInitialized, setDefaultStep, visibleSteps]);
+  (0, _react.useEffect)(function () {
+    if (currentStep !== null && currentStep !== void 0 && currentStep.onLoad) {
+      currentStep === null || currentStep === void 0 || currentStep.onLoad(currentStep, currentStepIndex);
+    }
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.onLoad]);
+
+  // Handle dataset changes for dynamic wizard
+  (0, _react.useEffect)(function () {
+    if (type === "dynamic" && dataset.length > 0) {
+      var dynamicSteps = createDynamicSteps(dataset);
+      if (defaultstepindex >= 0 && defaultstepindex < dynamicSteps.length) {
+        var defaultStep = dynamicSteps[defaultstepindex];
+        if (defaultStep && defaultStep.show) {
+          var stepsWithDefault = dynamicSteps.map(function (step) {
+            return _objectSpread(_objectSpread({}, step), {}, {
+              active: step.name === defaultStep.name,
+              isDone: false,
+              done: step.dynamicStepIndex !== undefined ? step.dynamicStepIndex < defaultstepindex : false
+            });
+          });
+          setSteps(stepsWithDefault);
+          setIsInitialized(true); // CHANGED: Mark as initialized immediately
+        } else {
+          setSteps(dynamicSteps);
+        }
+      } else {
+        setSteps(dynamicSteps);
+      }
+    }
+  }, [type, dataset, createDynamicSteps, defaultstepindex]);
+
+  // Context value
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      steps: steps,
+      currentStep: currentStep,
+      currentStepIndex: currentStepIndex,
+      hasNextStep: _hasNextStep,
+      hasPrevStep: hasPrevStep,
+      showDoneBtn: showDoneBtn || false,
+      enableNext: enableNext || false,
+      enablePrev: enablePrev || false,
+      enableDone: enableDone || false,
+      isFirstStep: isFirstStep,
+      isLastStep: isLastStep,
+      registerStep: registerStep,
+      updateStep: updateStep,
+      next: _next,
+      prev: prev,
+      skip: _skip,
+      done: _done,
+      cancel: _cancel,
+      gotoStep: _gotoStep,
+      onStepHeaderClick: onStepHeaderClick,
+      addStep: function addStep() {
+        return [];
+      }
+    };
+  }, [steps, currentStep, currentStepIndex, _hasNextStep, hasPrevStep, showDoneBtn, enableNext, enablePrev, enableDone, isFirstStep, isLastStep, registerStep, updateStep, _next, prev, _skip, _done, _cancel, _gotoStep, onStepHeaderClick]);
+
+  // Extract wizard steps from children
+  var wizardSteps = [];
+  _react["default"].Children.forEach(children, function (child) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _wizardStep["default"]) {
+      wizardSteps.push(child);
+    }
+  });
+
+  // If no data in dynamic mode, show no data message
+  if (type === "dynamic" && (!dataset || dataset.length === 0)) {
+    return __jsx("div", null, nodatamessage);
+  }
+  return __jsx(_WizardContext["default"].Provider, {
+    value: contextValue
+  }, __jsx(_material.Box, {
+    className: (0, _clsx["default"])(DEFAULT_CLS, className, computedStepClass, {
+      classic: className === null || className === void 0 ? void 0 : className.includes("classic"),
+      number: className === null || className === void 0 ? void 0 : className.includes("number"),
+      dottedstepper: className === null || className === void 0 ? void 0 : className.includes("dottedstepper"),
+      "text-inline": className === null || className === void 0 ? void 0 : className.includes("text-inline"),
+      iconstepper: className === null || className === void 0 ? void 0 : className.includes("iconstepper")
+    }),
+    style: _objectSpread(_objectSpread({}, styles), {}, {
+      width: width,
+      height: height
+    })
+  }, __jsx(_material.Box, {
+    className: "app-wizard-heading"
+  }, __jsx(_material.Stepper, {
+    activeStep: currentStepIndex,
+    orientation: orientation,
+    alternativeLabel: alternativeLabel,
+    nonLinear: nonLinear,
+    connector: connector,
+    className: (0, _clsx["default"])("app-wizard-steps", computedStepClass, className, stepstyle === "justified" ? "nav-justified" : "")
+  }, steps.map(function (step, index) {
+    // Calculate the visible index by counting only visible steps before this one
+    var visibleIndex = steps.slice(0, index).filter(function (s) {
+      return s.show !== false && s.show !== "false";
+    }).length;
+    var isCurrentStep = currentStepIndex === visibleIndex && step.show !== false && step.show !== "false";
+    return __jsx(_WizardStep.WizardStep, {
+      key: step.name,
+      step: step,
+      index: index,
+      className: className,
+      nonLinear: nonLinear,
+      orientation: orientation,
+      onStepClick: handleStepClick,
+      current: isCurrentStep
+    });
+  }))), (orientation === "horizontal" || type === "dynamic") && __jsx(_material.Box, {
+    className: BODY_CLASS
+  }, wizardMessage.caption && __jsx(_material.Box, {
+    component: "p"
+  }, __jsx(_material.Typography, {
+    variant: "body2",
+    color: wizardMessage.type === "error" ? "error" : "textSecondary"
+  }, wizardMessage.caption)), steps.map(function (step, index) {
+    return __jsx("div", {
+      key: step.name,
+      ref: function ref(el) {
+        if (el) {
+          var formElement = el.querySelector("form");
+          if (formElement) {
+            formRefs.current[step.name] = formElement;
+          }
+        }
+      },
+      className: (0, _clsx["default"])("app-wizard-step-container", {
+        current: step.active
+      })
+    }, step.haveForm ? __jsx("div", {
+      className: (0, _clsx["default"])("app-wizard-step-content", {
+        current: step.active
+      })
+    }, step.render ? step.render(step, index) : step.children) : __jsx(_form["default"], {
+      name: step.name,
+      className: (0, _clsx["default"])("app-wizard-step-content", {
+        current: step.active
+      }),
+      listener: listener,
+      isInsideWizard: true
+    }, step.render ? step.render(step, index) : step.children));
+  })), children, type === "static" && wizardSteps.map(function (step, index) {
+    var _step$props;
+    return /*#__PURE__*/(0, _react.cloneElement)(step, {
+      key: ((_step$props = step.props) === null || _step$props === void 0 ? void 0 : _step$props.name) || index
+    });
+  })));
+});
+WmWizard.displayName = "WmWizard";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmWizard);