@wavemaker/react-runtime 11.14.2-rc.6311 → 11.15.0-1.246

package/components/container/wizard/components/WizardStep.js

@@ -49,7 +49,8 @@ var WizardStep = exports.WizardStep = function WizardStep(_ref) {
     }),
     "aria-current": step.active ? "step" : undefined,
     "aria-label": step.subtitle ? "step ".concat(index + 1, " ").concat(step.title, " ").concat(step.subtitle) : "step ".concat(index + 1, " ").concat(step.title),
-    "aria-disabled": step.disabled
+    "aria-disabled": step.disabled,
+    title: step.title
   }, __jsx(_material.StepLabel, (0, _extends2["default"])({}, labelProps, {
     slots: {
       stepIcon: _StepComponents.CustomStepIcon

package/components/container/wizard/index.js

@@ -95,8 +95,9 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
     setFormReady = _useState4[1];
 
   // Create dynamic steps callback
-  var createDynamicSteps = (0, _react.useCallback)(function (datasetItems) {
+  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.props || {};
       return _objectSpread(_objectSpread({}, stepProps), {}, {
@@ -115,7 +116,8 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
         isInitialized: false,
         isdynamic: true,
         dynamicStepIndex: index,
-        render: stepProps.render
+        render: stepProps.render,
+        haveForm: stepProps.haveForm || false
       });
     });
   }, [defaultstepindex]);
@@ -189,7 +191,8 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
   (0, _react.useEffect)(function () {
     var validateStep = /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var currentStepForm, formdata, hasFields, result;
+        var _currentStepForm$pare;
+        var currentStepForm, isFormHidden, formdata, hasFields, result;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -206,31 +209,39 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
               }
               return _context.abrupt("return");
             case 5:
+              isFormHidden = currentStepForm.hidden || ((_currentStepForm$pare = currentStepForm.parentElement) === null || _currentStepForm$pare === void 0 ? void 0 : _currentStepForm$pare.hidden);
+              if (!isFormHidden) {
+                _context.next = 9;
+                break;
+              }
+              setIsStepValid(true);
+              return _context.abrupt("return");
+            case 9:
               formdata = (0, _formUtils.getFormData)({
                 current: currentStepForm
               });
               if (formdata) {
-                _context.next = 8;
+                _context.next = 12;
                 break;
               }
               return _context.abrupt("return");
-            case 8:
+            case 12:
               hasFields = Object.keys(formdata.values || {}).length > 0;
               if (hasFields) {
-                _context.next = 12;
+                _context.next = 16;
                 break;
               }
               setIsStepValid(true);
               return _context.abrupt("return");
-            case 12:
-              _context.next = 14;
+            case 16:
+              _context.next = 18;
               return (0, _formUtils.formValidate)({
                 current: currentStepForm
               });
-            case 14:
+            case 18:
               result = _context.sent;
               setIsStepValid(result);
-            case 16:
+            case 20:
             case "end":
               return _context.stop();
           }
@@ -243,7 +254,8 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
     validateStep();
   }, [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;
+    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;
@@ -640,7 +652,7 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
         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]);
+  }, [_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]);
@@ -672,7 +684,7 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
 
   // Handle dataset changes for dynamic wizard
   (0, _react.useEffect)(function () {
-    if (type === "dynamic" && dataset.length > 0) {
+    if (type === "dynamic" && dataset.length > 0 && steps.length === 0) {
       var dynamicSteps = createDynamicSteps(dataset);
       if (defaultstepindex >= 0 && defaultstepindex < dynamicSteps.length) {
         var defaultStep = dynamicSteps[defaultstepindex];
@@ -692,8 +704,29 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
       } else {
         setSteps(dynamicSteps);
       }
+      return;
     }
-  }, [type, dataset, createDynamicSteps, defaultstepindex]);
+    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 () {
@@ -736,20 +769,22 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
   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, 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")
+    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"
@@ -759,7 +794,7 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
     alternativeLabel: alternativeLabel,
     nonLinear: nonLinear,
     connector: connector,
-    className: (0, _clsx["default"])("app-wizard-steps", computedStepClass, className, stepstyle === "justified" ? "nav-justified" : "")
+    className: (0, _clsx["default"])("app-wizard-steps", computedStepClass, classValue, 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) {
@@ -770,7 +805,7 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
       key: step.name,
       step: step,
       index: index,
-      className: className,
+      className: classValue,
       nonLinear: nonLinear,
       orientation: orientation,
       onStepClick: handleStepClick,
@@ -783,9 +818,7 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, __jsx(_material.Typography, {
     variant: "body2",
     color: wizardMessage.type === "error" ? "error" : "textSecondary"
-  }, wizardMessage.caption)), (type === "dynamic" ? steps.filter(function (s) {
-    return s.active;
-  }) : steps).map(function (step, index) {
+  }, wizardMessage.caption)), steps.map(function (step, index) {
     return __jsx("div", {
       key: step.name,
       ref: function ref(el) {
@@ -797,29 +830,25 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
               setFormReady(true);
             }
           }
-          if (step.haveForm === undefined) {
-            var hasFormNow = !!formElement;
-            updateStep(step.name, {
-              haveForm: hasFormNow
-            });
-          }
         }
       },
       className: (0, _clsx["default"])("app-wizard-step-container", {
         current: step.active
-      })
+      }),
+      hidden: !step.active,
+      name: step.name
     }, 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"], {
+    }, currentStep !== null && currentStep !== void 0 && currentStep.name && step.active && currentStep.render ? currentStep.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));
+    }, 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, {
@@ -827,7 +856,7 @@ var WmWizard = /*#__PURE__*/(0, _react.memo)(function (props) {
     });
   })));
 }, 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"];
+  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") {

package/components/container/wizard/utils.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateStepFocus = exports.isPromise = exports.handleNavigation = exports.getStepByName = exports.getStepByIndex = exports.getPrevValidStep = exports.getNextValidStep = exports.extendPrevFn = exports.extendNextFn = void 0;
+exports.updateStepFocus = exports.trimStepsToLength = exports.isPromise = exports.handleNavigation = exports.getStepByName = exports.getStepByIndex = exports.getPrevValidStep = exports.getNextValidStep = exports.extendPrevFn = exports.extendNextFn = exports.appendDatasetSteps = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -130,4 +131,48 @@ var extendPrevFn = exports.extendPrevFn = function extendPrevFn(currentStep, cur
     });
     updateStepFocus();
   }
+};
+
+// Append deduped dynamic steps to existing steps
+var appendDatasetSteps = exports.appendDatasetSteps = function appendDatasetSteps(prev, incoming) {
+  if (!incoming || incoming.length === 0) {
+    return prev;
+  }
+  var existingNames = new Set(prev.map(function (s) {
+    return s.name;
+  }));
+  var deduped = incoming.filter(function (s) {
+    if (existingNames.has(s.name)) {
+      return false;
+    }
+    existingNames.add(s.name);
+    return true;
+  });
+  return deduped.length ? [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(deduped)) : prev;
+};
+
+// Trim steps to target length and normalize flags after shrink
+var trimStepsToLength = exports.trimStepsToLength = function trimStepsToLength(prev, targetLen) {
+  var sliced = prev.slice(0, targetLen);
+  if (sliced.length === 0) {
+    return sliced;
+  }
+  var activeIndex = sliced.findIndex(function (s) {
+    return s.active;
+  });
+  if (activeIndex === -1 || activeIndex >= targetLen) {
+    activeIndex = Math.max(0, targetLen - 1);
+  }
+  return sliced.map(function (s, idx) {
+    return _objectSpread(_objectSpread({}, s), {}, {
+      active: idx === activeIndex,
+      isDone: false,
+      done: idx < activeIndex,
+      disabled: false,
+      isInitialized: idx === activeIndex ? true : s.isInitialized,
+      enableNext: idx === activeIndex ? true : s.enableNext,
+      isValid: idx === activeIndex ? true : s.isValid,
+      dynamicStepIndex: typeof s.dynamicStepIndex === "number" ? idx : s.dynamicStepIndex
+    });
+  });
 };

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

@@ -47,6 +47,10 @@ var WmWizardstep = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _useState = (0, _react.useState)(false),
     isRegistered = _useState[0],
     setIsRegistered = _useState[1];
+  var renderRef = (0, _react.useRef)(render);
+  (0, _react.useEffect)(function () {
+    renderRef.current = render;
+  }, [render]);
   var stepData = (0, _react.useMemo)(function () {
     return {
       name: name || "wizardstep_".concat(Date.now()),
@@ -60,6 +64,13 @@ var WmWizardstep = /*#__PURE__*/(0, _react.memo)(function (props) {
       enablePrev: !disableprevious,
       enableDone: !disabledone,
       isDone: false,
+      render: function render() {
+        var _renderRef$current;
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return (_renderRef$current = renderRef.current) === null || _renderRef$current === void 0 ? void 0 : _renderRef$current.call.apply(_renderRef$current, [renderRef].concat(args));
+      },
       done: false,
       active: false,
       disabled: false,
@@ -73,7 +84,6 @@ var WmWizardstep = /*#__PURE__*/(0, _react.memo)(function (props) {
       onNext: onNext,
       onPrev: onPrev,
       onSkip: onSkip,
-      render: render,
       children: children
     };
   }, [name, title, subtitle, iconclass, doneiconclass, show, enableskip, disablenext, disableprevious, disabledone, content, children, dynamicStepIndex, isdynamic, haveForm, onLoad, onNext, onPrev, onSkip]);

package/components/data/card/card-content/index.js

@@ -33,6 +33,6 @@ var WmCardContent = function WmCardContent(props) {
     }
   }), __jsx(_material.Box, {
     style: _objectSpread({}, styles)
-  }, children));
+  }, props.renderPartial ? props.renderPartial(props, props.onLoad) : children));
 };
 var _default = exports["default"] = (0, _withBaseWrapper["default"])(/*#__PURE__*/_react["default"].memo(WmCardContent));