@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/container/wizard/index.js

@@ -0,0 +1,967 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmWizard = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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-ai/react-runtime/higherOrder/withBaseWrapper");
+var _utils = require("./utils");
+var _WizardContext = _interopRequireDefault(require("./WizardContext"));
+var _wizardStep = require("./wizard-step");
+var _WizardStep = require("./components/WizardStep");
+var _form = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/data/form"));
+var _formUtils = require("@wavemaker-ai/react-runtime/utils/form-utils");
+var _formContext = require("@wavemaker-ai/react-runtime/components/data/form/form-context");
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
+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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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,
+    _props$standalone = props.standalone,
+    standalone = _props$standalone === void 0 ? false : _props$standalone;
+  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)({});
+  var stepContainerRefs = (0, _react.useRef)({});
+  var navIndexRef = (0, _react.useRef)(-1);
+  var _useState4 = (0, _react.useState)(false),
+    formReady = _useState4[0],
+    setFormReady = _useState4[1];
+
+  // Detect if wizard is inside an outer form
+  var parentFormContext = (0, _formContext.useParentFormData)();
+  var isInsideOuterForm = !!parentFormContext && Object.keys(parentFormContext).length > 0;
+
+  // Create dynamic steps callback
+  var createDynamicSteps = (0, _react.useCallback)(function (datasetItems, startIndex) {
+    return datasetItems.map(function (item, index) {
+      index = startIndex || index;
+      var stepData = render ? render(item, index, datasetItems) : item;
+      var stepProps = (stepData === null || stepData === void 0 ? void 0 : stepData.props) || {};
+      if (/*#__PURE__*/(0, _react.isValidElement)(stepData)) {
+        var _stepData$props;
+        if (stepData.type === _wizardStep.WmWizardstep) {
+          stepProps = stepData.props || {};
+        } else if ((_stepData$props = stepData.props) !== null && _stepData$props !== void 0 && _stepData$props.children) {
+          var _stepData$props2;
+          var childrenArray = _react.Children.toArray((_stepData$props2 = stepData.props) === null || _stepData$props2 === void 0 ? void 0 : _stepData$props2.children);
+          var firstWizardStep = childrenArray.find(function (child) {
+            return /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _wizardStep.WmWizardstep;
+          });
+          if (/*#__PURE__*/(0, _react.isValidElement)(firstWizardStep)) {
+            stepProps = firstWizardStep.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]);
+
+  // Sync navigation ref whenever the visible current index changes
+  (0, _react.useEffect)(function () {
+    navIndexRef.current = currentStepIndex;
+  }, [currentStepIndex]);
+  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 _useState5 = (0, _react.useState)(true),
+    isStepValid = _useState5[0],
+    setIsStepValid = _useState5[1];
+  var _useState6 = (0, _react.useState)(""),
+    formValiditySignature = _useState6[0],
+    setFormValiditySignature = _useState6[1];
+  var formValidityMapRef = (0, _react.useRef)(new Map());
+
+  // Helper to get all forms in the current step container
+  var getStepForms = (0, _react.useCallback)(function (stepName) {
+    var _formRefs$current;
+    // First try cached formRefs
+    var formElOrList = (_formRefs$current = formRefs.current) === null || _formRefs$current === void 0 ? void 0 : _formRefs$current[stepName];
+    if (formElOrList) {
+      var _cachedForms$;
+      var cachedForms = Array.isArray(formElOrList) ? formElOrList : [formElOrList];
+      // Re-query the DOM to get ALL forms (list items may have rendered after initial cache)
+      var stepContainer = (_cachedForms$ = cachedForms[0]) === null || _cachedForms$ === void 0 ? void 0 : _cachedForms$.closest(".app-wizard-step-container");
+      if (stepContainer) {
+        var allForms = Array.from(stepContainer.querySelectorAll("form"));
+        if (allForms.length > 0) {
+          // Update cache with all forms
+          formRefs.current[stepName] = allForms.length === 1 ? allForms[0] : allForms;
+          return allForms;
+        }
+      }
+      return cachedForms;
+    }
+    return [];
+  }, []);
+  (0, _react.useEffect)(function () {
+    var stepName = currentStep === null || currentStep === void 0 ? void 0 : currentStep.name;
+    if (!stepName) return;
+
+    // Get step container for event delegation
+    var stepContainer = stepContainerRefs.current[stepName];
+    if (!stepContainer) return;
+
+    // Reset validity state for new step
+    formValidityMapRef.current.clear();
+    setFormValiditySignature("");
+
+    // Only set up form validity tracking if forms are present inside the step
+    var initialForms = getStepForms(stepName);
+
+    // When inside outer form with no embedded forms, validity comes from context
+    // No DOM event listener needed - parentFormContext.isValid is reactive
+    if (initialForms.length === 0) return;
+
+    // Use event delegation - listen on container, forms bubble their events up
+    var onValidity = function onValidity(e) {
+      // Find the form that emitted this event (could be e.target or closest form)
+      var form = e.target.closest("form");
+      if (!form) return;
+      var detail = e.detail;
+      var isValid = (detail === null || detail === void 0 ? void 0 : detail.isValid) !== false;
+
+      // Re-query forms to get current list (handles dynamically added forms from lists)
+      var currentForms = getStepForms(stepName);
+
+      // Track validity per form element
+      formValidityMapRef.current.set(form, isValid);
+
+      // Check if ALL current forms are valid
+      var allFormsValid = currentForms.every(function (f) {
+        var validity = formValidityMapRef.current.get(f);
+        // If we haven't received an event for this form yet, assume valid
+        return validity === undefined || validity === true;
+      });
+      setFormValiditySignature(allFormsValid ? "1" : "0");
+    };
+
+    // Listen on container - captures events from all forms, including dynamically added ones
+    stepContainer.addEventListener("wm:form-validity", onValidity);
+    return function () {
+      stepContainer.removeEventListener("wm:form-validity", onValidity);
+    };
+  }, [currentStep, formReady, getStepForms]);
+  var parentFormIsValid = parentFormContext === null || parentFormContext === void 0 ? void 0 : parentFormContext.isValid;
+  (0, _react.useEffect)(function () {
+    var validateStep = function validateStep() {
+      if (!currentStep) return;
+
+      // Dynamically query for all forms (handles list items that render after initial mount)
+      var forms = getStepForms(currentStep.name);
+      if (forms.length === 0) {
+        // When inside outer form with no embedded forms, use context-based validity
+        if (isInsideOuterForm && parentFormContext) {
+          setIsStepValid(parentFormContext.isValid === true);
+          return;
+        }
+        setIsStepValid(true);
+        return;
+      }
+
+      // Check if all forms are hidden
+      var allFormsHidden = forms.every(function (form) {
+        var _form$parentElement;
+        return form.hidden || ((_form$parentElement = form.parentElement) === null || _form$parentElement === void 0 ? void 0 : _form$parentElement.hidden);
+      });
+      if (allFormsHidden) {
+        setIsStepValid(true);
+        return;
+      }
+
+      // Check if any form has fields and collect validity
+      var hasAnyFields = false;
+      var allFormsValid = true;
+      var _iterator = _createForOfIteratorHelper(forms),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _form$parentElement2;
+          var form = _step.value;
+          if (form.hidden || (_form$parentElement2 = form.parentElement) !== null && _form$parentElement2 !== void 0 && _form$parentElement2.hidden) continue;
+          var formdata = (0, _formUtils.getFormData)({
+            current: form
+          });
+          if (!formdata) continue;
+          var hasFields = Object.keys(formdata.values || {}).length > 0;
+          if (hasFields) {
+            hasAnyFields = true;
+            if (formdata.isValid === false) {
+              allFormsValid = false;
+            }
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      if (!hasAnyFields) {
+        setIsStepValid(true);
+        return;
+      }
+
+      // Use formValiditySignature which comes from the wm:form-validity event
+      // This reflects the most up-to-date validity state from the form
+      // "1" = valid, "0" = invalid, "" = no event received yet
+      if (formValiditySignature === "") {
+        // No validity event received yet - use collected validity from forms
+        setIsStepValid(allFormsValid);
+      } else {
+        // Use the validity from the event
+        setIsStepValid(formValiditySignature === "1");
+      }
+    };
+    validateStep();
+  }, [currentStep, formValiditySignature, formReady, getStepForms, isInsideOuterForm, parentFormContext, parentFormIsValid]);
+  var enableNext = (0, _react.useMemo)(function () {
+    var enablenextBool = typeof enablenext === "string" ? enablenext.toLowerCase() === "true" || enablenext === "1" : Boolean(enablenext);
+    return enablenextBool || (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 _callee() {
+    var eventName,
+      fromIndex,
+      fromStep,
+      nextStep,
+      nextIndex,
+      _fromStep$onSkip,
+      response,
+      _fromStep$onNext,
+      _response,
+      _args = arguments;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          eventName = _args.length > 0 && _args[0] !== undefined ? _args[0] : "next";
+          fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
+          fromStep = (0, _utils.getStepByIndex)(fromIndex, visibleSteps);
+          if (fromStep) {
+            _context.next = 5;
+            break;
+          }
+          return _context.abrupt("return");
+        case 5:
+          nextStep = (0, _utils.getNextValidStep)(fromIndex + 1, visibleSteps);
+          if (nextStep) {
+            _context.next = 8;
+            break;
+          }
+          return _context.abrupt("return");
+        case 8:
+          nextIndex = visibleSteps.findIndex(function (s) {
+            return s.name === nextStep.name;
+          });
+          if (!(eventName === "skip")) {
+            _context.next = 19;
+            break;
+          }
+          response = (_fromStep$onSkip = fromStep.onSkip) === null || _fromStep$onSkip === void 0 ? void 0 : _fromStep$onSkip.call(fromStep, fromStep, fromStep, fromIndex);
+          if (!(response !== undefined)) {
+            _context.next = 16;
+            break;
+          }
+          _context.next = 14;
+          return (0, _utils.handleNavigation)(response, function () {
+            return (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
+          });
+        case 14:
+          _context.next = 17;
+          break;
+        case 16:
+          (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
+        case 17:
+          _context.next = 30;
+          break;
+        case 19:
+          if (!(fromStep.isValid && eventName === "next")) {
+            _context.next = 29;
+            break;
+          }
+          _response = (_fromStep$onNext = fromStep.onNext) === null || _fromStep$onNext === void 0 ? void 0 : _fromStep$onNext.call(fromStep, fromStep, fromStep, fromIndex);
+          if (!(_response !== undefined)) {
+            _context.next = 26;
+            break;
+          }
+          _context.next = 24;
+          return (0, _utils.handleNavigation)(_response, function () {
+            return (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
+          });
+        case 24:
+          _context.next = 27;
+          break;
+        case 26:
+          (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
+        case 27:
+          _context.next = 30;
+          break;
+        case 29:
+          if (enablenext && !fromStep.isValid) {
+            console.warn("Cannot proceed: current step is invalid");
+          } else {
+            (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
+          }
+        case 30:
+          // update ref to reflect the logical next position immediately
+          navIndexRef.current = nextIndex;
+          setFormReady(false);
+        case 32:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [currentStepIndex, visibleSteps, enablenext]);
+  var prev = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _fromStep$onPrev;
+    var fromIndex, fromStep, targetStep, prevIndex, response;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
+          fromStep = (0, _utils.getStepByIndex)(fromIndex, visibleSteps);
+          if (fromStep) {
+            _context2.next = 4;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 4:
+          targetStep = (0, _utils.getPrevValidStep)(fromIndex - 1, visibleSteps);
+          if (targetStep) {
+            _context2.next = 7;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 7:
+          prevIndex = visibleSteps.findIndex(function (s) {
+            return s.name === targetStep.name;
+          });
+          response = (_fromStep$onPrev = fromStep.onPrev) === null || _fromStep$onPrev === void 0 ? void 0 : _fromStep$onPrev.call(fromStep, fromStep, fromStep, fromIndex);
+          if (!(response !== undefined)) {
+            _context2.next = 14;
+            break;
+          }
+          _context2.next = 12;
+          return (0, _utils.handleNavigation)(response, function () {
+            return (0, _utils.extendPrevFn)(fromStep, fromIndex, visibleSteps, setSteps);
+          });
+        case 12:
+          _context2.next = 15;
+          break;
+        case 14:
+          (0, _utils.extendPrevFn)(fromStep, fromIndex, visibleSteps, setSteps);
+        case 15:
+          navIndexRef.current = prevIndex;
+          setFormReady(false);
+        case 17:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })), [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) {
+      var visIndex = visibleSteps.findIndex(function (s) {
+        var _targetStep2;
+        return s.name === ((_targetStep2 = targetStep) === null || _targetStep2 === void 0 ? void 0 : _targetStep2.name);
+      });
+      if (visIndex >= 0) navIndexRef.current = visIndex;
+      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 showSignature = steps.map(function (s) {
+    var _listener$Widgets, _listener$Widgets2;
+    return (listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[s.name]) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets.show) === false || (listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 || (_listener$Widgets2 = _listener$Widgets2[s.name]) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2.show) === "false" ? "0" : "1";
+  }).join("|");
+  (0, _react.useEffect)(function () {
+    if (!(listener !== null && listener !== void 0 && listener.Widgets)) return;
+    steps.forEach(function (step, index) {
+      var _listener$Widgets$ste;
+      var widgetShow = (_listener$Widgets$ste = listener.Widgets[step.name]) === null || _listener$Widgets$ste === void 0 ? void 0 : _listener$Widgets$ste.show;
+      if ((widgetShow === false || widgetShow === "false") && step.show !== false) {
+        updateStep(step.name, {
+          show: false,
+          enableskip: false
+        });
+        var prevStep = steps[index - 1];
+        if (prevStep && step.active) {
+          updateStep(prevStep.name, {
+            active: true
+          });
+          navIndexRef.current = index - 1;
+        }
+      }
+    });
+  }, [showSignature]);
+  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;
+        },
+        prev: prev,
+        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,
+        currentStepIndex: currentStepIndex,
+        currentStep: currentStep
+      });
+    }
+  }, [_hasNextStep, hasPrevStep, showDoneBtn, enableNext, enablePrev, enableDone, cancelable, currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableskip, nextbtnlabel, previousbtnlabel, donebtnlabel, cancelbtnlabel, actionsalignment, currentStepIndex, isFirstStep, isLastStep, visibleSteps]);
+  (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 && steps.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);
+      }
+      return;
+    }
+    if (type === "dynamic" && dataset.length > 0) {
+      // Append new steps if dataset grew
+      if (steps.length > 0 && dataset.length > steps.length) {
+        var newItems = dataset.slice(steps.length);
+        var newSteps = createDynamicSteps(newItems, steps.length);
+        if (newSteps.length) {
+          setSteps(function (prev) {
+            return (0, _utils.appendDatasetSteps)(prev, newSteps);
+          });
+        }
+        return;
+      }
+      // Remove steps if dataset shrank
+      if (steps.length > 0 && dataset.length < steps.length) {
+        setSteps(function (prev) {
+          return (0, _utils.trimStepsToLength)(prev, dataset.length);
+        });
+        return;
+      }
+    }
+  }, [type, dataset, createDynamicSteps, defaultstepindex, dataset.length]);
+
+  // 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.WmWizardstep) {
+      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);
+  }
+  var classValue = className && className.trim() !== "" ? className : "classic";
+  return __jsx(_WizardContext["default"].Provider, {
+    value: contextValue
+  }, __jsx(_material.Box, {
+    className: (0, _clsx["default"])(DEFAULT_CLS, classValue, computedStepClass, {
+      classic: classValue === null || classValue === void 0 ? void 0 : classValue.includes("classic"),
+      number: classValue === null || classValue === void 0 ? void 0 : classValue.includes("number"),
+      dottedstepper: classValue === null || classValue === void 0 ? void 0 : classValue.includes("dottedstepper"),
+      "text-inline": classValue === null || classValue === void 0 ? void 0 : classValue.includes("text-inline"),
+      iconstepper: classValue === null || classValue === void 0 ? void 0 : classValue.includes("iconstepper")
+    }),
+    style: _objectSpread(_objectSpread({}, styles), {}, {
+      width: width,
+      height: height
+    }),
+    hidden: props.hidden,
+    name: name
+  }, __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, 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: classValue,
+      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) {
+          // Store the step container element for event delegation
+          stepContainerRefs.current[step.name] = el;
+          // Get all forms inside the step (handles lists with multiple forms)
+          var formElements = el.querySelectorAll("form");
+          if (formElements.length > 0) {
+            // Store as array if multiple forms, single element if one form
+            formRefs.current[step.name] = formElements.length === 1 ? formElements[0] : Array.from(formElements);
+            if (formElements[0].classList.contains("app-form")) {
+              setFormReady(true);
+            }
+          }
+        }
+      },
+      className: (0, _clsx["default"])("app-wizard-step-container", {
+        active: step.active
+      }),
+      hidden: !step.active,
+      name: step.name
+    }, isInsideOuterForm ?
+    // Inside outer form - use div, fields/forms pass through to outer form context
+    __jsx("div", {
+      className: (0, _clsx["default"])("app-wizard-step-content", {
+        active: step.active
+      })
+    }, currentStep !== null && currentStep !== 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
+    __jsx(_form["default"], {
+      standalone: standalone,
+      show: step.active,
+      name: step.name + "_form",
+      className: (0, _clsx["default"])("app-wizard-step-content", {
+        active: step.active
+      }),
+      listener: listener,
+      isInsideWizard: true
+    }, currentStep !== null && currentStep !== void 0 && currentStep.name && step.active && currentStep.render ? currentStep.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
+    });
+  })));
+}, function (prev, next) {
+  var keys = ["render", "dataset", "className", "styles", "width", "height", "type", "stepstyle", "orientation", "alternativeLabel", "nonLinear", "defaultstep", "defaultstepindex", "message", "cancelable", "enablenext", "nextbtnlabel", "previousbtnlabel", "donebtnlabel", "cancelbtnlabel", "children", "hidden"];
+  return keys.every(function (key) {
+    // Never deep-compare children; treat as referential
+    if (key === "children") {
+      return prev[key] === next[key];
+    }
+    return (0, _isEqual["default"])(prev[key], next[key]);
+  });
+});
+var WmWizardStandalone = exports.WmWizard = (0, _withStandalone["default"])(WmWizard);
+WmWizard.displayName = "WmWizard";
+
+/**
+ * The WmWizard component renders a multi-step wizard flow with navigation,
+ * validation, and configurable step content.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-wizard--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-wizard--docs)
+ *
+ * @param props - {@link WmWizardProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmWizard);