@wavemaker/react-runtime 11.14.1-rc.241 → 11.14.2-1.6423

package/components/container/panel/index.js

@@ -35,15 +35,13 @@ var WmPanel = function WmPanel(props) {
     fullscreen = _props$fullscreen === void 0 ? false : _props$fullscreen,
     helptext = props.helptext,
     hint = props.hint,
-    _props$iconclass = props.iconclass,
-    iconclass = _props$iconclass === void 0 ? "wi wi-account-circle" : _props$iconclass,
+    iconclass = props.iconclass,
     iconheight = props.iconheight,
     iconmargin = props.iconmargin,
     iconurl = props.iconurl,
     iconwidth = props.iconwidth,
     subheading = props.subheading,
-    _props$title = props.title,
-    title = _props$title === void 0 ? "Title" : _props$title,
+    title = props.title,
     className = props.className,
     style = props.style,
     children = props.children,
@@ -77,6 +75,7 @@ var WmPanel = function WmPanel(props) {
   var _useState2 = (0, _react.useState)(true),
     show = _useState2[0],
     setShow = _useState2[1];
+  var hasTriggeredOnLoadRef = (0, _react.useRef)(false);
 
   //   Manages expand/collapse state
   var _usePanelExpansion = (0, _hooks.usePanelExpansion)(expanded, onExpand, onCollapse, name, listener),
@@ -134,8 +133,10 @@ var WmPanel = function WmPanel(props) {
   // onLoad handler
   (0, _react.useEffect)(function () {
     var _listener$Widgets6;
+    if (hasTriggeredOnLoadRef.current || !isExpanded) return;
+    hasTriggeredOnLoadRef.current = true;
     onLoad === null || onLoad === void 0 || onLoad(listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[name]);
-  }, []);
+  }, [isExpanded]);
   (0, _react.useEffect)(function () {
     if (isExpanded) {
       computeDimensions();
@@ -156,6 +157,7 @@ var WmPanel = function WmPanel(props) {
       };
     }
   }, [closable]);
+  var showHeader = Boolean(iconurl || iconclass || collapsible || actions && (Array.isArray(actions) ? actions.length > 0 : true) || title || subheading || enablefullscreen);
 
   // Panel methods exposed via listener
   var collapse = function collapse() {
@@ -219,7 +221,7 @@ var WmPanel = function WmPanel(props) {
     onMouseOut: handleMouseOut,
     hidden: !show,
     component: "div"
-  }, componentProps), __jsx(_material.Box, {
+  }, componentProps), showHeader && __jsx(_material.Box, {
     className: (0, _clsx["default"])("panel-heading", {
       "show-help": helpVisible
     }),
@@ -251,7 +253,8 @@ var WmPanel = function WmPanel(props) {
     onToggleHelp: toggleHelp,
     onClose: handleClose,
     onActionsclick: onActionsclick
-  })), isExpanded && __jsx(_material.Box, {
+  })), __jsx(_material.Box, {
+    hidden: !isExpanded,
     className: "panel-content",
     ref: panelContentRef
   }, __jsx(_material.Box, {
@@ -276,9 +279,10 @@ var WmPanel = function WmPanel(props) {
 var WmPanelFooter = exports.WmPanelFooter = function WmPanelFooter(_ref) {
   var children = _ref.children,
     name = _ref.name;
-  return __jsx(_material.Box, {
+  return __jsx("div", {
     className: "app-panel-footer panel-footer clearfix",
-    "aria-label": name
+    "aria-label": name,
+    name: name
   }, children);
 };
 WmPanelFooter.displayName = "WmPanelFooter";

package/components/container/tabs/index.js

@@ -333,6 +333,7 @@ var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
       display: "flex",
       flexDirection: getFlexDirection()
     }),
+    name: name,
     value: selectedIndex,
     onValueChange: function onValueChange(value) {
       var newIndex = value;

package/components/container/tabs/tab-pane/index.js

@@ -1,16 +1,18 @@
 "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.WmTabpane = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _clsx2 = _interopRequireDefault(require("clsx"));
 var _tabs = require("@base-ui-components/react/tabs");
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _ = require("..");
+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; }
@@ -22,10 +24,44 @@ var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
     name = props.name,
     index = props.index;
   var _useTabsContext = (0, _.useTabsContext)(),
-    selectedIndex = _useTabsContext.selectedIndex;
+    selectedIndex = _useTabsContext.selectedIndex,
+    setSelectedIndex = _useTabsContext.setSelectedIndex;
+  var wasActiveRef = _react["default"].useRef(false);
+  var loadedRef = _react["default"].useRef(false);
+  (0, _react.useEffect)(function () {
+    var _props$listener;
+    var isActive = selectedIndex === index;
+    var widgetInstance = props === null || props === void 0 || (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.Widgets) === null || _props$listener === void 0 ? void 0 : _props$listener[name];
+    if (isActive) {
+      if (!loadedRef.current) {
+        var _props$onLoad;
+        props === null || props === void 0 || (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 || _props$onLoad.call(props, null, widgetInstance);
+        loadedRef.current = true;
+      }
+      if (!wasActiveRef.current) {
+        var _props$onSelect;
+        props === null || props === void 0 || (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, null, widgetInstance, index);
+        wasActiveRef.current = true;
+      }
+    } else if (wasActiveRef.current) {
+      var _props$onDeselect;
+      props === null || props === void 0 || (_props$onDeselect = props.onDeselect) === null || _props$onDeselect === void 0 || _props$onDeselect.call(props, null, widgetInstance, index);
+      wasActiveRef.current = false;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedIndex, name]);
+  (0, _react.useEffect)(function () {
+    if (props.listener && props.listener.onChange) {
+      props.listener.onChange(name, {
+        select: function select() {
+          return setSelectedIndex(index);
+        }
+      });
+    }
+  }, []);
   return __jsx(_tabs.Tabs.Panel, {
     value: index,
-    className: (0, _clsx2["default"])((_clsx = {
+    className: (0, _clsx2["default"])("tab-pane", (_clsx = {
       disabled: disabled
     }, (0, _defineProperty2["default"])(_clsx, className, !!className), (0, _defineProperty2["default"])(_clsx, "active", selectedIndex === index), _clsx)),
     role: "tabpanel",

package/components/container/wizard/index.js

@@ -20,6 +20,7 @@ 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");
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
 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; }
@@ -88,6 +89,10 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
     isInitialized = _useState3[0],
     setIsInitialized = _useState3[1];
   var formRefs = (0, _react.useRef)({});
+  var navIndexRef = (0, _react.useRef)(-1);
+  var _useState4 = (0, _react.useState)(false),
+    formReady = _useState4[0],
+    setFormReady = _useState4[1];
 
   // Create dynamic steps callback
   var createDynamicSteps = (0, _react.useCallback)(function (datasetItems) {
@@ -132,6 +137,11 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
       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]);
@@ -141,9 +151,41 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
   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];
+  var _useState5 = (0, _react.useState)(true),
+    isStepValid = _useState5[0],
+    setIsStepValid = _useState5[1];
+  var _useState6 = (0, _react.useState)(""),
+    formValiditySignature = _useState6[0],
+    setFormValiditySignature = _useState6[1];
+  (0, _react.useEffect)(function () {
+    var unbind = null;
+    var bindEmitEvent = function bindEmitEvent() {
+      var _formRefs$current;
+      var stepName = currentStep === null || currentStep === void 0 ? void 0 : currentStep.name;
+      if (!stepName) return false;
+      var formElOrList = (_formRefs$current = formRefs.current) === null || _formRefs$current === void 0 ? void 0 : _formRefs$current[stepName];
+      var forms = formElOrList ? Array.isArray(formElOrList) ? formElOrList : [formElOrList] : [];
+      if (forms.length === 0) return false;
+      var onValidity = function onValidity(e) {
+        var detail = e.detail;
+        var isValid = (detail === null || detail === void 0 ? void 0 : detail.isValid) !== false;
+        setFormValiditySignature(isValid ? "1" : "0");
+      };
+      forms.forEach(function (f) {
+        return f.addEventListener("wm:form-validity", onValidity);
+      });
+      unbind = function unbind() {
+        forms.forEach(function (f) {
+          return f.removeEventListener("wm:form-validity", onValidity);
+        });
+      };
+      return true;
+    };
+    bindEmitEvent();
+    return function () {
+      if (unbind) unbind();
+    };
+  }, [currentStep, formReady]);
   (0, _react.useEffect)(function () {
     var validateStep = /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -199,7 +241,7 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
       };
     }();
     validateStep();
-  }, [currentStep]);
+  }, [currentStep, formValiditySignature, formReady]);
   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]);
@@ -273,108 +315,143 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
   // Navigation functions
   var _next = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     var eventName,
-      _currentStep$onSkip,
+      fromIndex,
+      fromStep,
+      nextStep,
+      nextIndex,
+      _fromStep$onSkip,
       response,
-      _currentStep$onNext,
+      _fromStep$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;
+          fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
+          fromStep = (0, _utils.getStepByIndex)(fromIndex, visibleSteps);
+          if (fromStep) {
+            _context2.next = 5;
             break;
           }
           return _context2.abrupt("return");
-        case 3:
+        case 5:
+          nextStep = (0, _utils.getNextValidStep)(fromIndex + 1, visibleSteps);
+          if (nextStep) {
+            _context2.next = 8;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 8:
+          nextIndex = visibleSteps.findIndex(function (s) {
+            return s.name === nextStep.name;
+          });
           if (!(eventName === "skip")) {
-            _context2.next = 13;
+            _context2.next = 19;
             break;
           }
-          response = (_currentStep$onSkip = currentStep.onSkip) === null || _currentStep$onSkip === void 0 ? void 0 : _currentStep$onSkip.call(currentStep, currentStep, currentStep, currentStepIndex);
+          response = (_fromStep$onSkip = fromStep.onSkip) === null || _fromStep$onSkip === void 0 ? void 0 : _fromStep$onSkip.call(fromStep, fromStep, fromStep, fromIndex);
           if (!(response !== undefined)) {
-            _context2.next = 10;
+            _context2.next = 16;
             break;
           }
-          _context2.next = 8;
+          _context2.next = 14;
           return (0, _utils.handleNavigation)(response, function () {
-            return (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+            return (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
           });
-        case 8:
-          _context2.next = 11;
+        case 14:
+          _context2.next = 17;
           break;
-        case 10:
-          (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
-        case 11:
-          _context2.next = 24;
+        case 16:
+          (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
+        case 17:
+          _context2.next = 30;
           break;
-        case 13:
-          if (!(currentStep.isValid && eventName === "next")) {
-            _context2.next = 23;
+        case 19:
+          if (!(fromStep.isValid && eventName === "next")) {
+            _context2.next = 29;
             break;
           }
-          _response = (_currentStep$onNext = currentStep.onNext) === null || _currentStep$onNext === void 0 ? void 0 : _currentStep$onNext.call(currentStep, currentStep, currentStep, currentStepIndex);
+          _response = (_fromStep$onNext = fromStep.onNext) === null || _fromStep$onNext === void 0 ? void 0 : _fromStep$onNext.call(fromStep, fromStep, fromStep, fromIndex);
           if (!(_response !== undefined)) {
-            _context2.next = 20;
+            _context2.next = 26;
             break;
           }
-          _context2.next = 18;
+          _context2.next = 24;
           return (0, _utils.handleNavigation)(_response, function () {
-            return (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+            return (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
           });
-        case 18:
-          _context2.next = 21;
+        case 24:
+          _context2.next = 27;
           break;
-        case 20:
-          (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
-        case 21:
-          _context2.next = 24;
+        case 26:
+          (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
+        case 27:
+          _context2.next = 30;
           break;
-        case 23:
-          if (enablenext && !currentStep.isValid) {
+        case 29:
+          if (enablenext && !fromStep.isValid) {
             console.warn("Cannot proceed: current step is invalid");
           } else {
-            (0, _utils.extendNextFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+            (0, _utils.extendNextFn)(fromStep, fromIndex, visibleSteps, setSteps);
           }
-        case 24:
+        case 30:
+          // update ref to reflect the logical next position immediately
+          navIndexRef.current = nextIndex;
+          setFormReady(false);
+        case 32:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
-  })), [currentStep, currentStepIndex, visibleSteps, enablenext]);
+  })), [currentStepIndex, visibleSteps, enablenext]);
   var prev = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    var _currentStep$onPrev;
-    var response;
+    var _fromStep$onPrev;
+    var fromIndex, fromStep, targetStep, prevIndex, response;
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          if (currentStep) {
-            _context3.next = 2;
+          fromIndex = navIndexRef.current >= 0 ? navIndexRef.current : currentStepIndex;
+          fromStep = (0, _utils.getStepByIndex)(fromIndex, visibleSteps);
+          if (fromStep) {
+            _context3.next = 4;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 4:
+          targetStep = (0, _utils.getPrevValidStep)(fromIndex - 1, visibleSteps);
+          if (targetStep) {
+            _context3.next = 7;
             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);
+        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)) {
-            _context3.next = 8;
+            _context3.next = 14;
             break;
           }
-          _context3.next = 6;
+          _context3.next = 12;
           return (0, _utils.handleNavigation)(response, function () {
-            return (0, _utils.extendPrevFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
+            return (0, _utils.extendPrevFn)(fromStep, fromIndex, visibleSteps, setSteps);
           });
-        case 6:
-          _context3.next = 9;
+        case 12:
+          _context3.next = 15;
           break;
-        case 8:
-          (0, _utils.extendPrevFn)(currentStep, currentStepIndex, visibleSteps, setSteps);
-        case 9:
+        case 14:
+          (0, _utils.extendPrevFn)(fromStep, fromIndex, visibleSteps, setSteps);
+        case 15:
+          navIndexRef.current = prevIndex;
+          setFormReady(false);
+        case 17:
         case "end":
           return _context3.stop();
       }
     }, _callee3);
-  })), [currentStep, currentStepIndex, visibleSteps]);
+  })), [currentStepIndex, visibleSteps]);
   var registerStep = (0, _react.useCallback)(function (stepData) {
     setSteps(function (prevSteps) {
       var existingIndex = prevSteps.findIndex(function (step) {
@@ -435,6 +512,11 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
       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");
@@ -478,6 +560,30 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
       }
     }
   }, [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, {
@@ -514,6 +620,7 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
         disableDone: function disableDone() {
           return !enableDone;
         },
+        prev: prev,
         cancelable: cancelable,
         nextbtnlabel: nextbtnlabel,
         previousbtnlabel: previousbtnlabel,
@@ -528,10 +635,12 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
           return _gotoStep(step);
         },
         isFirstStep: isFirstStep,
-        isLastStep: isLastStep
+        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]);
+  }, [_hasNextStep, hasPrevStep, showDoneBtn, enableNext, enablePrev, enableDone, cancelable, currentStep === null || currentStep === void 0 ? void 0 : currentStep.enableskip, nextbtnlabel, previousbtnlabel, donebtnlabel, cancelbtnlabel, actionsalignment, currentStepIndex, isFirstStep, isLastStep]);
   (0, _react.useEffect)(function () {
     updateListener();
   }, [updateListener]);
@@ -640,7 +749,8 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
     style: _objectSpread(_objectSpread({}, styles), {}, {
       width: width,
       height: height
-    })
+    }),
+    name: name
   }, __jsx(_material.Box, {
     className: "app-wizard-heading"
   }, __jsx(_material.Stepper, {
@@ -673,7 +783,9 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, __jsx(_material.Typography, {
     variant: "body2",
     color: wizardMessage.type === "error" ? "error" : "textSecondary"
-  }, wizardMessage.caption)), steps.map(function (step, index) {
+  }, wizardMessage.caption)), (type === "dynamic" ? steps.filter(function (s) {
+    return s.active;
+  }) : steps).map(function (step, index) {
     return __jsx("div", {
       key: step.name,
       ref: function ref(el) {
@@ -681,6 +793,15 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
           var formElement = el.querySelector("form");
           if (formElement) {
             formRefs.current[step.name] = formElement;
+            if (formElement.classList.contains("app-form")) {
+              setFormReady(true);
+            }
+          }
+          if (step.haveForm === undefined) {
+            var hasFormNow = !!formElement;
+            updateStep(step.name, {
+              haveForm: hasFormNow
+            });
           }
         }
       },
@@ -705,6 +826,15 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
       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"];
+  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]);
+  });
 });
 WmWizard.displayName = "WmWizard";
 var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmWizard);

package/components/container/wizard/utils.js

@@ -36,7 +36,7 @@ var getPrevValidStep = exports.getPrevValidStep = function getPrevValidStep(from
 var getStepByName = exports.getStepByName = function getStepByName(stepName, steps) {
   return steps.find(function (step) {
     return step.name === stepName;
-  }) || null;
+  }) || steps[0];
 };
 var getStepByIndex = exports.getStepByIndex = function getStepByIndex(index, visibleSteps) {
   return visibleSteps[index] || null;

package/components/container/wizard/wizard-action/index.js

@@ -1,22 +1,27 @@
 "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 _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+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;
 var ACTIONS_CLASS = "app-wizard-actions panel-footer";
-var WmWizardAction = function WmWizardAction(_ref) {
+var WmWizardAction = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var children = _ref.children,
     _ref$actionsalignment = _ref.actionsalignment,
     actionsalignment = _ref$actionsalignment === void 0 ? "right" : _ref$actionsalignment;
   return __jsx(_material.Box, {
     className: (0, _clsx["default"])(ACTIONS_CLASS, actionsalignment)
   }, children);
-};
+}, function (prev, next) {
+  return prev.actionsalignment === next.actionsalignment && prev.children === next.children && prev.listener === next.listener;
+});
 WmWizardAction.displayName = "WmWizardAction";
-var _default = exports["default"] = WmWizardAction;
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmWizardAction);

package/components/container/wizard/wizard-step/index.js

@@ -1,11 +1,17 @@
 "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 _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _WizardContext = require("../WizardContext");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+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;
 var WmWizardstep = /*#__PURE__*/(0, _react.memo)(function (props) {
   var name = props.name,
     _props$title = props.title,
@@ -81,14 +87,21 @@ var WmWizardstep = /*#__PURE__*/(0, _react.memo)(function (props) {
     if (isRegistered && name) {
       context.updateStep(name, {
         content: content || children,
-        onLoad: onLoad,
-        onNext: onNext,
-        onPrev: onPrev,
-        onSkip: onSkip
+        enableNext: !disablenext,
+        enablePrev: !disableprevious,
+        enableDone: !disabledone,
+        title: title,
+        enableskip: enableskip,
+        show: show
       });
     }
-  }, [context, name, content, children, onLoad, onNext, onPrev, onSkip, isRegistered]);
-  return null;
+  }, [name, title, enableskip, show, disablenext, disableprevious, disabledone, content]);
+  return __jsx(_react["default"].Fragment, null);
+}, function (prev, next) {
+  var keys = ["name", "title", "subtitle", "iconclass", "doneiconclass", "show", "enableskip", "disablenext", "disableprevious", "disabledone", "content", "dynamicStepIndex", "isdynamic", "haveForm", "onLoad", "onNext", "onPrev", "onSkip", "render"];
+  return keys.every(function (key) {
+    return (0, _isEqual["default"])(prev[key], next[key]);
+  });
 });
 WmWizardstep.displayName = "WmWizardstep";
-var _default = exports["default"] = WmWizardstep;
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmWizardstep);