@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

package/components/data/form/base-form/index.js

@@ -16,10 +16,17 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _reactHookForm = require("react-hook-form");
 var _get = _interopRequireDefault(require("lodash-es/get"));
 var _set = _interopRequireDefault(require("lodash-es/set"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
 var _props = require("./props");
 var _utils = require("./utils");
 var _formContext = require("../form-context");
 var _lodashEs = require("lodash-es");
+var _utils2 = require("../../utils");
+var _listHelpers = require("../../list/utils/list-helpers");
+var _PrefabContext = require("../../../../context/PrefabContext");
+var _events = require("../../../../core/constants/events");
+var _merge = _interopRequireDefault(require("lodash-es/merge"));
+var _formUtils = require("../../../../utils/form-utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(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; }
@@ -27,9 +34,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var DEFAULT_CLASS = "panel app-panel app-form";
 var BaseForm = function BaseForm(WrappedComponent) {
   var ControlledForm = function ControlledForm(FormProps) {
-    var _props$listener4;
+    var _prefabContext$formAr, _props$listener, _props$listener2, _props$listener15;
     // setting up default props for form
     var props = _objectSpread(_objectSpread({}, _props.defaultProps), FormProps);
+    var parentFormRef = (0, _formContext.useFormRef)();
+    var formReff = (0, _react.useRef)(null);
+
+    // Get parent form from prefab context if available
+    var prefabContext = (0, _react.useContext)(_PrefabContext.PrefabContext);
+    var parentForm = props.parentForm || (prefabContext === null || prefabContext === void 0 ? void 0 : prefabContext.parentForm);
+    var isParentList = props.isParentList !== undefined ? props.isParentList : (prefabContext === null || prefabContext === void 0 ? void 0 : prefabContext.isParentList) || false;
+    var formArrayIndex = props.formArrayIndex !== undefined ? props.formArrayIndex : (_prefabContext$formAr = prefabContext === null || prefabContext === void 0 ? void 0 : prefabContext.formArrayIndex) !== null && _prefabContext$formAr !== void 0 ? _prefabContext$formAr : -1;
+
+    // For child forms, use childdatasetnode if provided, otherwise use form name as fallback
+    var effectiveChildDatasetNode = parentForm ? (prefabContext === null || prefabContext === void 0 ? void 0 : prefabContext.parentListName) || props.parentListName || props.childdatasetnode || props.name : undefined;
     var isInsideWizard = props.isInsideWizard || false;
     var formRef = (0, _react.useRef)(null);
     var _useState = (0, _react.useState)({}),
@@ -38,26 +56,43 @@ var BaseForm = function BaseForm(WrappedComponent) {
     var _useState2 = (0, _react.useState)({}),
       headerActions = _useState2[0],
       setHeaderActions = _useState2[1];
-    var _useState3 = (0, _react.useState)({}),
-      initialValues = _useState3[0];
-    var _useState4 = (0, _react.useState)(props.expanded),
-      expanded = _useState4[0],
-      setExpanded = _useState4[1];
-    var _useState5 = (0, _react.useState)(false),
-      showmessage = _useState5[0],
-      setShowMessage = _useState5[1];
-    var _useState6 = (0, _react.useState)({
+    var _useState3 = (0, _react.useState)(props.expanded),
+      expanded = _useState3[0],
+      setExpanded = _useState3[1];
+    var _useState4 = (0, _react.useState)(false),
+      showmessage = _useState4[0],
+      setShowMessage = _useState4[1];
+    var _useState5 = (0, _react.useState)({
         caption: "",
         type: ""
       }),
-      statusMessage = _useState6[0],
-      setStatusMessage = _useState6[1];
+      statusMessage = _useState5[0],
+      setStatusMessage = _useState5[1];
+    var parentFormData = parentForm ? (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.Widgets) === null || _props$listener === void 0 || (_props$listener = _props$listener[parentForm]) === null || _props$listener === void 0 ? void 0 : _props$listener.formdata : undefined;
+    var _useState6 = (0, _react.useState)(),
+      childFormData = _useState6[0],
+      setChildFormData = _useState6[1];
     var messageRef = (0, _react.useRef)(null);
     var _useState7 = (0, _react.useState)(false),
       showViewMode = _useState7[0],
       setShowViewMode = _useState7[1];
+    var lastResetFormDataRef = (0, _react.useRef)(null);
+    var childFormUnsubscribeRef = (0, _react.useRef)(null);
+    var parentFormUnsubscribeRef = (0, _react.useRef)(null);
+    var validationMessagesRef = (0, _react.useRef)([]);
+    var widgetFormData = props.name && (_props$listener2 = props.listener) !== null && _props$listener2 !== void 0 && (_props$listener2 = _props$listener2.Widgets) !== null && _props$listener2 !== void 0 && (_props$listener2 = _props$listener2[props.name]) !== null && _props$listener2 !== void 0 && _props$listener2.formdata && Object.keys(props.listener.Widgets[props.name].formdata).length > 0 ? props.listener.Widgets[props.name].formdata : props.formdata;
+    var formDataref = (0, _react.useRef)(null);
+    var updateFormData = function updateFormData(data) {
+      if (typeof data === "function") {
+        // If data is a function, call it with current form data
+        formDataref.current = data(formDataref.current || {});
+      } else {
+        // Otherwise, merge as before
+        formDataref.current = (0, _merge["default"])({}, formDataref.current, data);
+      }
+    };
     var _useForm = (0, _reactHookForm.useForm)({
-        defaultValues: props.formData,
+        defaultValues: props.formdata,
         mode: "onTouched",
         reValidateMode: "onBlur"
       }),
@@ -66,41 +101,386 @@ var BaseForm = function BaseForm(WrappedComponent) {
       _useForm$formState = _useForm.formState,
       errors = _useForm$formState.errors,
       isValid = _useForm$formState.isValid,
+      submitCount = _useForm$formState.submitCount,
       reset = _useForm.reset,
       watch = _useForm.watch,
       trigger = _useForm.trigger,
       getValues = _useForm.getValues,
-      clearErrors = _useForm.clearErrors;
+      clearErrors = _useForm.clearErrors,
+      setValue = _useForm.setValue,
+      resetField = _useForm.resetField;
+
+    // update valid state
+    (0, _react.useEffect)(function () {
+      var _props$listener3;
+      if ((_props$listener3 = props.listener) !== null && _props$listener3 !== void 0 && _props$listener3.onChange && props.name) {
+        props.listener.onChange(props.name, {
+          valid: isValid
+        });
+      }
+    }, [isValid]);
+    var childFormEventListeners = function childFormEventListeners() {
+      if (parentForm && props.name) {
+        // Listen for parent relationship events (context, acknowledgments, etc.)
+        var parentContextUnsubscribe = _events.EVENTEMITTER_METHODS.CHILD_FORM_RELATIONSHIP_ON(props.name, function (parentContext) {
+          // Only process context updates (not registration events)
+          if (parentContext && parentContext.action === "context" && parentContext.formData !== undefined) {
+            var childData = parentContext.formData;
+
+            // For list forms, the formData is already the specific array item, use it directly
+            if (effectiveChildDatasetNode && (0, _typeof2["default"])(parentContext.formData) === "object" && !Array.isArray(parentContext.formData)) {
+              // For regular child forms, check if the data is already the child data or if we need to extract it
+              // If the parent form data has the childdatasetnode as a key, extract it
+              // Otherwise, assume the formData is already the child data
+              if (parentContext.formData.hasOwnProperty(effectiveChildDatasetNode)) {
+                childData = (0, _get["default"])(parentContext.formData, effectiveChildDatasetNode);
+              }
+              // The formData is already the child data, use it directly
+            }
+            if (childData && (0, _typeof2["default"])(childData) === "object" && !Array.isArray(childData)) {
+              // Update child form with data from parent context
+              var currentValues = getValues();
+              if (!(0, _isEqual["default"])(childData, currentValues) && !(0, _isEqual["default"])(childData, lastResetFormDataRef.current)) {
+                reset(childData);
+                lastResetFormDataRef.current = childData;
+              }
+            } else if (childData === null || childData === undefined || Array.isArray(childData) && childData.length === 0) {
+              // Handle empty data case
+              var emptyData = {};
+              if (!(0, _isEqual["default"])(emptyData, getValues())) {
+                reset(emptyData);
+                lastResetFormDataRef.current = emptyData;
+              }
+            }
+          }
+        }, false, props["data-widget-id"], false // isRegistration = false for context updates
+        );
+
+        // Register child form with parent
+        _events.EVENTEMITTER_METHODS.CHILD_FORM_RELATIONSHIP_EMIT(parentForm, {
+          childFormName: props.name,
+          childdatasetnode: effectiveChildDatasetNode,
+          childWidgetId: props["data-widget-id"],
+          isListForm: isParentList,
+          formArrayIndex: isParentList ? formArrayIndex : undefined,
+          formInstance: {
+            getValues: getValues,
+            reset: reset,
+            setFormData: setFormData
+          },
+          action: "register"
+        }, true, undefined,
+        // No widget ID for registration event names
+        true // isRegistration = true
+        ); // isParent = true to emit to parent's listening channel
+
+        return function () {
+          parentContextUnsubscribe();
+        };
+      }
+    };
+    var parentFormEventListeners = function parentFormEventListeners() {
+      if (props.name) {
+        var unsubscribe = _events.EVENTEMITTER_METHODS.CHILD_FORM_RELATIONSHIP_ON(props.name, function (data) {
+          var childFormName = data.childFormName,
+            childdatasetnode = data.childdatasetnode,
+            action = data.action,
+            childWidgetId = data.childWidgetId;
+          if (action === "register" && childFormName && childdatasetnode) {
+            // Send current parent context to the newly registered child
+            var currentParentData = getValues();
+
+            // For list forms, extract the specific array item based on formArrayIndex
+            var _childFormData = currentParentData;
+            if (data.isListForm && typeof data.formArrayIndex === "number" && data.formArrayIndex >= 0) {
+              var listData = (0, _get["default"])(currentParentData, childdatasetnode);
+              if (Array.isArray(listData) && data.formArrayIndex < listData.length) {
+                _childFormData = listData[data.formArrayIndex];
+              } else {
+                _childFormData = {};
+              }
+            } else if (!data.isListForm && childdatasetnode) {
+              // For regular child forms, get the object property
+              _childFormData = (0, _get["default"])(currentParentData, childdatasetnode);
+            }
+            _events.EVENTEMITTER_METHODS.CHILD_FORM_RELATIONSHIP_EMIT(childFormName, {
+              parentFormName: props.name,
+              childFormName: childFormName,
+              childdatasetnode: childdatasetnode,
+              formData: _childFormData,
+              timestamp: Date.now(),
+              action: "context"
+            }, false, childWidgetId, false // isRegistration = false for context updates
+            ); // isParent = false to emit to child's listening channel
+          }
+        }, true,
+        // isParent = true
+        undefined,
+        // No widget ID for registration listening
+        true // isRegistration = true
+        );
+        return function () {
+          unsubscribe();
+        };
+      }
+    };
+    var parentFormDataUpdateListeners = function parentFormDataUpdateListeners() {
+      // Only set up listeners for parent forms (forms that have child forms), not for child forms themselves
+      if (!parentForm && props.name) {
+        var unsubscribe = _events.EVENTEMITTER_METHODS.CHILD_FORM_DATA_UPDATE_ON(props.name, function (data) {
+          var childdatasetnode = data.childdatasetnode,
+            formData = data.formData,
+            isListForm = data.isListForm,
+            formArrayIndex = data.formArrayIndex;
+          if (childdatasetnode && formData) {
+            var _props$listener4, _props$listener5, _props$listener5$onCh;
+            // Get current parent form values
+            var currentParentData = getValues();
+
+            // Update the parent form's data
+            var updatedParentData = _objectSpread({}, currentParentData);
+            if (isListForm && typeof formArrayIndex === "number" && formArrayIndex >= 0) {
+              // Handle array updates for forms inside lists
+              var listData = (0, _get["default"])(updatedParentData, childdatasetnode);
+              if (Array.isArray(listData)) {
+                // Update the specific array index
+                listData[formArrayIndex] = _objectSpread(_objectSpread({}, listData[formArrayIndex]), formData);
+                (0, _set["default"])(updatedParentData, childdatasetnode, listData);
+              } else {
+                // Initialize array if it doesn't exist
+                var newArray = [];
+                newArray[formArrayIndex] = formData;
+                (0, _set["default"])(updatedParentData, childdatasetnode, newArray);
+              }
+            } else {
+              // Handle object property updates for regular child forms
+              (0, _set["default"])(updatedParentData, childdatasetnode, formData);
+            }
+
+            // First update the widget formdata to ensure consistency
+            if ((_props$listener4 = props.listener) !== null && _props$listener4 !== void 0 && (_props$listener4 = _props$listener4.Widgets) !== null && _props$listener4 !== void 0 && _props$listener4[props.name]) {
+              props.listener.Widgets[props.name].formdata = updatedParentData;
+            }
+
+            // Update the parent form's React Hook Form state
+            reset(updatedParentData);
+
+            // Additionally, ensure the nested data is properly set using setValue
+            setTimeout(function () {
+              try {
+                if (isListForm && typeof formArrayIndex === "number" && formArrayIndex >= 0) {
+                  // For list forms, update the specific array index
+                  var arrayPath = "".concat(childdatasetnode, "[").concat(formArrayIndex, "]");
+                  setValue(arrayPath, formData, {
+                    shouldValidate: false,
+                    shouldDirty: true
+                  });
+                } else {
+                  // For regular child forms, update the object property
+                  setValue(childdatasetnode, formData, {
+                    shouldValidate: false,
+                    shouldDirty: true
+                  });
+                }
+              } catch (error) {
+                // Fallback: try to set individual fields within the nested object/array
+                if ((0, _typeof2["default"])(formData) === "object" && formData !== null) {
+                  Object.keys(formData).forEach(function (subField) {
+                    var fullPath = isListForm && typeof formArrayIndex === "number" ? "".concat(childdatasetnode, "[").concat(formArrayIndex, "].").concat(subField) : "".concat(childdatasetnode, ".").concat(subField);
+                    setValue(fullPath, formData[subField], {
+                      shouldValidate: false,
+                      shouldDirty: true
+                    });
+                  });
+                }
+              }
+            }, 0);
+
+            // Emit the updated parent form data
+            (_props$listener5 = props.listener) === null || _props$listener5 === void 0 || (_props$listener5$onCh = _props$listener5.onChange) === null || _props$listener5$onCh === void 0 || _props$listener5$onCh.call(_props$listener5, props.name, {
+              dataoutput: updatedParentData
+            });
+          }
+        });
+        return function () {
+          unsubscribe();
+        };
+      }
+    };
+    var parentFormFieldRegisterListeners = function parentFormFieldRegisterListeners() {
+      var _props$listener6;
+      // Only set up listeners for parent forms (forms that have child forms), not for child forms themselves
+      if (!parentForm && props.name && (_props$listener6 = props.listener) !== null && _props$listener6 !== void 0 && _props$listener6.Widgets) {
+        var unsubscribe = _events.EVENTEMITTER_METHODS.CHILD_FORM_FIELD_REGISTER_ON(props.name, function (data) {
+          var _props$listener7;
+          var childFormName = data.childFormName,
+            widget = data.widget,
+            widgetProps = data.widgetProps,
+            formKey = data.formKey,
+            fieldName = data.fieldName;
+          if (childFormName && widget && formKey && fieldName && (_props$listener7 = props.listener) !== null && _props$listener7 !== void 0 && (_props$listener7 = _props$listener7.Widgets) !== null && _props$listener7 !== void 0 && _props$listener7[props.name]) {
+            // Ensure the form structure exists in the parent form's widgetsContext
+            var parentFormContext = props.listener.Widgets[props.name];
+            parentFormContext.formfields = parentFormContext.formfields || {};
+            parentFormContext.formWidgets = parentFormContext.formWidgets || {};
+
+            // Register the field using the formKey (primary key)
+            parentFormContext.formfields[formKey] = widget;
+
+            // Register using fieldName for direct access
+            parentFormContext.formWidgets[fieldName] = widget;
+
+            // Register formWidget variants (for form field wrapper components)
+            parentFormContext.formfields["".concat(fieldName, "_formWidget")] = widget;
+            parentFormContext.formWidgets["".concat(fieldName, "_formWidget")] = widget;
+          }
+        });
+        return function () {
+          unsubscribe();
+        };
+      }
+      return undefined;
+    };
+
+    // Track the last formdata that was used to reset the form
+    // This prevents unnecessary resets when formdata prop reference changes but values are the same
+
+    (0, _react.useEffect)(function () {
+      if (parentFormData) {
+        var childData;
+        if (isParentList && formArrayIndex >= 0 && effectiveChildDatasetNode) {
+          // Forms inside lists read from array indices: parentForm.formdata[listName][formArrayIndex]
+          var listData = (0, _get["default"])(parentFormData, effectiveChildDatasetNode);
+          if (listData && Array.isArray(listData) && formArrayIndex < listData.length) {
+            childData = listData[formArrayIndex];
+          } else {
+            childData = null;
+          }
+        } else if (effectiveChildDatasetNode) {
+          // Regular child forms use object properties: parentForm.formdata[childDatasetNode]
+          childData = (0, _get["default"])(parentFormData, effectiveChildDatasetNode);
+        } else {
+          childData = null;
+        }
+        setChildFormData(childData);
+      }
+    }, [parentFormData, props === null || props === void 0 ? void 0 : props.dataKey, effectiveChildDatasetNode, props === null || props === void 0 ? void 0 : props.name, isParentList, formArrayIndex]);
+
+    // Register child form with parent form if parentForm exists
+    (0, _react.useEffect)(function () {
+      if (prefabContext !== null && prefabContext !== void 0 && prefabContext.parentForm && props.name) {
+        childFormEventListeners();
+      }
+    }, [parentForm, props.name, effectiveChildDatasetNode, getValues, reset]);
+
+    // Listen for child form relationship events (for parent forms)
+    (0, _react.useEffect)(function () {
+      parentFormEventListeners();
+      parentFormDataUpdateListeners();
+      parentFormFieldRegisterListeners();
+    }, [props.name, getValues, reset]);
+
+    // Listen for external parent formdata changes (for child forms)
+    (0, _react.useEffect)(function () {
+      if (!parentForm || !effectiveChildDatasetNode) return;
+      var handleParentFormDataChange = function handleParentFormDataChange(data) {
+        var parentFormName = data.parentFormName,
+          formData = data.formData;
+        if (parentFormName === parentForm && formData) {
+          // Extract child data from the updated parent form data
+          var childData = (0, _get["default"])(formData, effectiveChildDatasetNode);
+          var finalChildData = childData;
+          if (isParentList && formArrayIndex >= 0 && Array.isArray(childData)) {
+            finalChildData = childData[formArrayIndex];
+          }
+          if (finalChildData && (0, _typeof2["default"])(finalChildData) === "object") {
+            resetFormWithData(finalChildData);
+          }
+        }
+      };
+      var unsubscribe = _events.EVENTEMITTER_METHODS.PARENT_FORM_EXTERNAL_DATA_CHANGE_ON(handleParentFormDataChange);
+      return unsubscribe;
+    }, [parentForm, effectiveChildDatasetNode, props.name, getValues, reset]);
 
     // update the form data when the formdata prop changes
     (0, _react.useEffect)(function () {
-      if (props.formdata && (0, _typeof2["default"])(props.formdata) === "object" && !Array.isArray(props.formdata) && Object.keys(props.formdata).length > 0) {
-        reset(props.formdata);
-        if (props["form-type"] === "live-filter") {
-          debouncedFilter();
+      // For child forms, prioritize childFormData over widgetFormData
+      var formDataToUse = props.parentForm ? childFormData || widgetFormData || props.formdata : widgetFormData || childFormData || props.formdata;
+      if (formDataToUse && (0, _typeof2["default"])(formDataToUse) === "object" && !Array.isArray(formDataToUse)) {
+        // Get current form values to compare
+        var currentFormValues = getValues();
+
+        // Deep compare with the last formdata that was used to reset
+        // Only reset if formdata has actually changed (not just reference change)
+        var hasFormDataChanged = !(0, _isEqual["default"])(formDataToUse, lastResetFormDataRef.current);
+
+        // Also check if formDataToUse differs from current form values
+        // This prevents resetting when form is already in the correct state
+        var differsFromCurrentValues = !(0, _isEqual["default"])(formDataToUse, currentFormValues);
+        if (hasFormDataChanged && differsFromCurrentValues) {
+          // when adding new row if the formdata is empty it should be reset here this code is added to not avoid the empty formdata case
+          // Reset to empty if formdata is empty object (for new records)
+          if (Object.keys(formDataToUse).length === 0) {
+            // Get all currently registered field names and create explicit empty values
+            var currentValues = getValues();
+            var emptyValues = {};
+            Object.keys(currentValues).forEach(function (key) {
+              emptyValues[key] = currentValues[key]; // Explicitly set each field to empty string
+            });
+            resetFormWithData(emptyValues);
+          } else {
+            // Reset with actual data (for editing)
+            resetFormWithData(formDataToUse);
+            if (props["form-type"] === "live-filter") {
+              debouncedFilter();
+            }
+          }
         }
       }
-    }, [props.formdata, reset]);
+    }, [props.formdata, widgetFormData, childFormData, reset, getValues, props.parentForm]);
     function debouncedFilter() {
       var debouncedFilter = (0, _lodashEs.debounce)(filter, 250);
       debouncedFilter();
     }
-    var formreset = function formreset() {
-      Object.keys(formfields).forEach(function (key) {
-        formfields[key].datavalue = formfields[key].defaultvalue;
-        formfields[key].value = formfields[key].defaultvalue;
-      });
-      setTimeout(function () {
-        setFormfields(function (prev) {
-          Object.keys(prev).forEach(function (key) {
-            prev[key].datavalue = prev[key].defaultvalue;
-            prev[key].value = prev[key].defaultvalue;
-          });
-          return prev;
-        });
-      }, 100);
-      reset(initialValues);
-    };
+    var formreset = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var _formReff$current;
+        var cleanedData, el;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              cleanedData = {};
+              Object.keys(formfields).forEach(function (key) {
+                if (formfields[key].formName !== props.name) return;
+                // do not reset for readonly and disabled fields
+                if (formfields[key].readonly || formfields[key].readOnly || formfields[key].disabled) {
+                  cleanedData[key] = formfields[key].defaultvalue || formfields[key].value;
+                } else {
+                  cleanedData[key] = "";
+                }
+              });
+              _context.next = 4;
+              return reset(cleanedData);
+            case 4:
+              trigger();
+              // dispatching an event for uncontrolled widget like seach widget clear inside the chips widget.
+              el = formRef.current;
+              if (el) {
+                el.dispatchEvent(new CustomEvent("wmformreset", {
+                  bubbles: true
+                }));
+              }
+              (formReff === null || formReff === void 0 ? void 0 : formReff.current) && (formReff === null || formReff === void 0 || (_formReff$current = formReff.current) === null || _formReff$current === void 0 ? void 0 : _formReff$current.formreset());
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function formreset() {
+        return _ref.apply(this, arguments);
+      };
+    }();
     var isElementInViewport = function isElementInViewport(el) {
       if (!el) return false;
       var rect = el.getBoundingClientRect();
@@ -147,8 +527,8 @@ var BaseForm = function BaseForm(WrappedComponent) {
             scrollToElement(formEl);
           }
         } else {
-          var _props$listener;
-          props === null || props === void 0 || (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.App) === null || _props$listener === void 0 || _props$listener.notifyApp(template, type);
+          var _props$listener8;
+          props === null || props === void 0 || (_props$listener8 = props.listener) === null || _props$listener8 === void 0 || (_props$listener8 = _props$listener8.App) === null || _props$listener8 === void 0 || _props$listener8.notifyApp(template, type, true);
         }
       } else {
         setStatusMessage({
@@ -160,111 +540,422 @@ var BaseForm = function BaseForm(WrappedComponent) {
         scrollToElement(formRef.current);
       }
     };
-    var validateFieldsOnSubmit = (0, _react.useCallback)(function () {
-      return trigger();
-    }, [trigger]);
-    var handleFormSubmit = /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(data, e, operation) {
-        var isValid, _props$listener2, result, FormData, _props$listener3;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!e) {
-                e = new Event("submit");
-              }
-              // check form is valid or not
-              _context.next = 3;
-              return validateFieldsOnSubmit();
-            case 3:
-              isValid = _context.sent;
-              if (isValid) {
-                _context.next = 7;
-                break;
-              }
-              props === null || props === void 0 || (_props$listener2 = props.listener) === null || _props$listener2 === void 0 || _props$listener2.onChange(props.name, {
+
+    /**
+     * Creates a validation message object for a field with errors.
+     * Simplified - only adds entries (array is cleared before each build).
+     */
+    var addValidationMessage = (0, _react.useCallback)(function (fieldErrors, fieldKey, field, prefix) {
+      var _field$value;
+      var errorTypes = (0, _formUtils.getErrorTypes)(fieldErrors);
+      validationMessagesRef.current.push({
+        field: fieldKey,
+        value: (_field$value = field === null || field === void 0 ? void 0 : field.value) !== null && _field$value !== void 0 ? _field$value : field === null || field === void 0 ? void 0 : field.datavalue,
+        errorType: errorTypes,
+        message: (field === null || field === void 0 ? void 0 : field.validationmessage) || (fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors.message) || "",
+        getElement: function getElement() {
+          var formEl = formRef.current;
+          if (formEl) {
+            var fieldEl = formEl.querySelector("[name=\"".concat(fieldKey, "\"]"));
+            if (fieldEl) {
+              return fieldEl.closest("[focus-target]") || fieldEl.querySelector("[focus-target]") || fieldEl;
+            }
+          }
+          return null;
+        },
+        formName: (0, _lodashEs.last)(prefix.split(".")) || props.name || "",
+        fullyQualifiedFormName: prefix
+      });
+    }, [props.name]);
+
+    /**
+     * Exposes validationMessages on widget object and formRef for external access.
+     * DRY helper to avoid repeating this pattern.
+     */
+    var exposeValidationMessages = (0, _react.useCallback)(function (validationMessages) {
+      var _props$listener9;
+      if ((_props$listener9 = props.listener) !== null && _props$listener9 !== void 0 && (_props$listener9 = _props$listener9.Widgets) !== null && _props$listener9 !== void 0 && _props$listener9[props.name]) {
+        props.listener.Widgets[props.name].validationMessages = validationMessages;
+      }
+      if (formRef.current) {
+        formRef.current.validationMessages = validationMessages;
+      }
+    }, [props.name]);
+
+    /**
+     * Gets the form fields to validate and their keys.
+     * DRY helper for shared iteration setup.
+     */
+    var getFormFieldsForValidation = (0, _react.useCallback)(function () {
+      var _props$listener0;
+      var formFieldsToValidate = ((_props$listener0 = props.listener) === null || _props$listener0 === void 0 || (_props$listener0 = _props$listener0.Widgets) === null || _props$listener0 === void 0 || (_props$listener0 = _props$listener0[props.name]) === null || _props$listener0 === void 0 ? void 0 : _props$listener0.formfields) || formfields;
+      var allFieldKeys = Object.keys(formFieldsToValidate);
+      var prefix = props.name || "";
+      return {
+        formFieldsToValidate: formFieldsToValidate,
+        allFieldKeys: allFieldKeys,
+        prefix: prefix
+      };
+    }, [props.name, formfields]);
+
+    /**
+     * Core validation messages builder that accepts a getFieldError function.
+     * This allows both sync and async validation to share the same iteration logic.
+     */
+    var buildValidationMessagesCore = (0, _react.useCallback)(function (getFieldError) {
+      validationMessagesRef.current = [];
+      var _getFormFieldsForVali = getFormFieldsForValidation(),
+        formFieldsToValidate = _getFormFieldsForVali.formFieldsToValidate,
+        allFieldKeys = _getFormFieldsForVali.allFieldKeys,
+        prefix = _getFormFieldsForVali.prefix;
+      allFieldKeys.forEach(function (fieldKey) {
+        if ((0, _formUtils.shouldSkipFieldKey)(fieldKey, allFieldKeys)) return;
+        var field = formFieldsToValidate[fieldKey];
+        var fieldErrors = getFieldError(fieldKey, field);
+        if (fieldErrors) {
+          addValidationMessage(fieldErrors, fieldKey, field, prefix);
+        }
+      });
+      return validationMessagesRef.current;
+    }, [getFormFieldsForValidation, addValidationMessage]);
+
+    /**
+     * Builds validation messages using react-hook-form's state.
+     * Uses control.getFieldState() to get error state.
+     * Call trigger() before this to ensure validation has run.
+     */
+    var buildValidationMessages = (0, _react.useCallback)(function () {
+      return buildValidationMessagesCore(function (fieldKey) {
+        var fieldState = control.getFieldState(fieldKey);
+        return fieldState === null || fieldState === void 0 ? void 0 : fieldState.error;
+      });
+    }, [buildValidationMessagesCore, control]);
+    var validateFieldsOnSubmit = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var isValid, currentFormValidState, _props$listener1;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!formReff.current) {
+              _context2.next = 6;
+              break;
+            }
+            _context2.next = 3;
+            return formReff.current.validateFieldsOnSubmit();
+          case 3:
+            _context2.t0 = _context2.sent;
+            _context2.next = 7;
+            break;
+          case 6:
+            _context2.t0 = true;
+          case 7:
+            isValid = _context2.t0;
+            _context2.next = 10;
+            return trigger();
+          case 10:
+            currentFormValidState = _context2.sent;
+            if (!(!isValid || !currentFormValidState)) {
+              _context2.next = 14;
+              break;
+            }
+            if (!currentFormValidState) {
+              props === null || props === void 0 || (_props$listener1 = props.listener) === null || _props$listener1 === void 0 || _props$listener1.onChange(props.name, {
                 valid: false,
                 errors: errors
               });
-              return _context.abrupt("return");
-            case 7:
+            }
+            return _context2.abrupt("return", false);
+          case 14:
+            return _context2.abrupt("return", true);
+          case 15:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    })), [formReff, trigger, buildValidationMessages, exposeValidationMessages, errors, props.name]);
+    var updateFormDataOutput = function updateFormDataOutput(data, formWidgets) {
+      // Set the values of the widgets inside the live form (other than form fields) in form data
+      Object.keys(formWidgets).forEach(function (key) {
+        if (!(0, _lodashEs.find)(data, {
+          key: key
+        })) {
+          data[key] = formWidgets[key];
+        }
+      });
+      return data;
+    };
+    var handleFormSubmit = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(data, e, operationType) {
+        var _props$listener10, _props$onSubmit;
+        var formWidgets, filteredData, mergedData, result, formData;
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              e = e || new Event("submit");
+              formWidgets = (_props$listener10 = props.listener) === null || _props$listener10 === void 0 || (_props$listener10 = _props$listener10.Widgets) === null || _props$listener10 === void 0 || (_props$listener10 = _props$listener10[props.name]) === null || _props$listener10 === void 0 ? void 0 : _props$listener10.dataoutput;
+              if (formWidgets && Object.keys(formWidgets).length > 0) {
+                data = updateFormDataOutput(data, formWidgets);
+              }
+
+              // Filter and merge data
+              filteredData = filterTableColumns(data);
+              mergedData = mergeWithFormDataRef(filteredData); // Execute onBeforeSubmit hook
               if (!props.onBeforeSubmit) {
-                _context.next = 13;
+                _context3.next = 11;
                 break;
               }
-              _context.next = 10;
-              return props.onBeforeSubmit(e, props, data);
-            case 10:
-              result = _context.sent;
+              _context3.next = 8;
+              return props.onBeforeSubmit(e, props, mergedData);
+            case 8:
+              result = _context3.sent;
               if (!(result === false)) {
-                _context.next = 13;
+                _context3.next = 11;
                 break;
               }
-              return _context.abrupt("return");
-            case 13:
-              FormData = {};
-              Object.keys(data).forEach(function (key) {
-                (0, _set["default"])(FormData, key, data[key]);
-              });
-
-              // form submit
-              if (props.formSubmit) {
-                if ((_props$listener3 = props.listener) !== null && _props$listener3 !== void 0 && _props$listener3.onChange) {
-                  props.listener.onChange(props.name, {
-                    dataoutput: data
-                  });
-                }
+              return _context3.abrupt("return");
+            case 11:
+              // Transform flat data to nested structure
+              formData = transformToNestedObject(mergedData); // Handle form submission
+              notifyDataOutput(mergedData);
+              _context3.next = 15;
+              return executeFormSubmit(formData, operationType);
+            case 15:
+              // Execute onSubmit hook
+              props === null || props === void 0 || (_props$onSubmit = props.onSubmit) === null || _props$onSubmit === void 0 || _props$onSubmit.call(props, e, props, formData);
+            case 16:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      return function handleFormSubmit(_x, _x2, _x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
 
-                // get the operation type
-                props.formSubmit(FormData, function (data) {
-                  if (props.widgettype === "live-form" && data.operationType === "insert") {
-                    reset(data);
-                  }
-                  onResultCb((0, _get["default"])(data, "params"), "success");
-                  var hasCustomOnSuccess = props.onSuccess !== _props.defaultProps.onSuccess;
-                  if (!hasCustomOnSuccess && props.widgettype === "live-form") {
-                    var successMsg = data.operationType === "insert" && props.insertmessage || data.operationType === "update" && props.updatemessage || data.operationType === "delete" && props.deletemessage || props.postmessage;
-                    toggleMessage(true, successMsg, "success");
-                    return;
-                  }
-                  toggleMessage(true, props.postmessage, "success");
+    // Helper functions
+    var filterTableColumns = function filterTableColumns(data) {
+      return Object.keys(data).reduce(function (acc, key) {
+        if (!key.startsWith("wm_table_column_")) {
+          acc[key] = data[key];
+        }
+        return acc;
+      }, {});
+    };
+    var mergeWithFormDataRef = function mergeWithFormDataRef(data) {
+      if (!formDataref.current) return data;
+      var merged = _objectSpread({}, data);
+      Object.keys(formDataref.current).forEach(function (key) {
+        if (formDataref.current.hasOwnProperty(key)) {
+          merged[key] = formDataref.current[key] || [];
+        }
+      });
+      return merged;
+    };
+    var transformToNestedObject = function transformToNestedObject(data) {
+      var result = {};
+      Object.keys(data).forEach(function (key) {
+        (0, _set["default"])(result, key, data[key]);
+      });
+      return result;
+    };
+    var notifyDataOutput = function notifyDataOutput(data) {
+      var _props$listener11, _props$listener11$onC;
+      (_props$listener11 = props.listener) === null || _props$listener11 === void 0 || (_props$listener11$onC = _props$listener11.onChange) === null || _props$listener11$onC === void 0 || _props$listener11$onC.call(_props$listener11, props.name, {
+        dataoutput: data
+      });
+    };
+    var executeFormSubmit = /*#__PURE__*/function () {
+      var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(formData, operationType) {
+        var firstParam;
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              firstParam = prepareSubmitData(formData);
+              return _context4.abrupt("return", new Promise(function (resolve, reject) {
+                props.formSubmit(firstParam, function (data) {
+                  return handleSubmitSuccess(data, resolve);
                 }, function (error) {
-                  toggleMessage(true, props.errormessage || error || error.message, "error");
-                  onResultCb(error, "");
-                });
-              }
-              if (props !== null && props !== void 0 && props.onSubmit) {
-                props.onSubmit(e, props, FormData);
-              }
-            case 17:
+                  return handleSubmitError(error, reject);
+                }, operationType);
+              }));
+            case 2:
             case "end":
-              return _context.stop();
+              return _context4.stop();
           }
-        }, _callee);
+        }, _callee4);
       }));
-      return function handleFormSubmit(_x, _x2, _x3) {
-        return _ref.apply(this, arguments);
+      return function executeFormSubmit(_x4, _x5) {
+        return _ref4.apply(this, arguments);
       };
     }();
+    var prepareSubmitData = function prepareSubmitData(formData) {
+      var _props$datasource, _props$datasource$toL;
+      if ((props === null || props === void 0 || (_props$datasource = props.datasource) === null || _props$datasource === void 0 || (_props$datasource = _props$datasource.name) === null || _props$datasource === void 0 || (_props$datasource$toL = _props$datasource.toLowerCase) === null || _props$datasource$toL === void 0 ? void 0 : _props$datasource$toL.call(_props$datasource)) !== "crudvariable") {
+        return formData;
+      }
+      var primaryKeys = props.datasource.execute("getPrimaryKey");
+      var operation = (0, _utils2.findOperationType)(formData, primaryKeys);
+      return {
+        inputFields: formData,
+        operation: operation === "insert" ? "create" : operation
+      };
+    };
+    var handleSubmitSuccess = function handleSubmitSuccess(data, resolve) {
+      var operationType = data.operationType;
+
+      // Handle live-form reset
+      if (props.widgettype === "live-form" && (operationType === "insert" || operationType === "delete")) {
+        reset(data);
+        setShowViewMode(false);
+      }
+      onResultCb((0, _get["default"])(data, "params"), "success");
+
+      // Show success message
+      var message = getSuccessMessage(data);
+      toggleMessage(true, message, "success");
+      resolve(data);
+    };
+    var getSuccessMessage = function getSuccessMessage(data) {
+      if (props.widgettype === "live-form") {
+        var operationType = data.operationType;
+        return operationType === "insert" && props.insertmessage || operationType === "update" && props.updatemessage || operationType === "delete" && props.deletemessage || props.postmessage;
+      }
+      return props.postmessage;
+    };
+    var handleSubmitError = function handleSubmitError(error, reject) {
+      var errorMessage = props.errormessage || (error === null || error === void 0 ? void 0 : error.message) || error;
+      toggleMessage(true, errorMessage, "error");
+      onResultCb(error, "");
+      reject(error);
+    };
     var formfieldsRef = (0, _react.useRef)(formfields);
-    var submit = handleSubmit(function (data, e) {
-      return handleFormSubmit(data, e);
-    });
-    var deleteEntry = handleSubmit(function (data, e) {
-      return handleFormSubmit(data, e, "delete");
-    });
+    var submit = (0, _react.useCallback)(/*#__PURE__*/function () {
+      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(e) {
+        var currentFormValidState, validationMessages, childFormsValid, _props$listener12, data;
+        return _regenerator["default"].wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              e === null || e === void 0 || e.preventDefault();
+              e === null || e === void 0 || e.stopPropagation();
+
+              // Trigger validation and wait for completion
+              _context5.next = 4;
+              return trigger();
+            case 4:
+              currentFormValidState = _context5.sent;
+              // Build and expose validation messages after validation completes
+              validationMessages = buildValidationMessages();
+              exposeValidationMessages(validationMessages);
+
+              // Check child form validation
+              if (!formReff.current) {
+                _context5.next = 13;
+                break;
+              }
+              _context5.next = 10;
+              return formReff.current.validateFieldsOnSubmit();
+            case 10:
+              _context5.t0 = _context5.sent;
+              _context5.next = 14;
+              break;
+            case 13:
+              _context5.t0 = true;
+            case 14:
+              childFormsValid = _context5.t0;
+              if (!(!childFormsValid || !currentFormValidState)) {
+                _context5.next = 18;
+                break;
+              }
+              props === null || props === void 0 || (_props$listener12 = props.listener) === null || _props$listener12 === void 0 || _props$listener12.onChange(props.name, {
+                valid: false,
+                errors: errors,
+                validationMessages: validationMessages
+              });
+              return _context5.abrupt("return", false);
+            case 18:
+              data = getValues();
+              handleFormSubmit(data, new Event("submit"));
+              return _context5.abrupt("return", true);
+            case 21:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      }));
+      return function (_x6) {
+        return _ref5.apply(this, arguments);
+      };
+    }(), [handleFormSubmit, trigger, buildValidationMessages, exposeValidationMessages, props.name, errors]);
+    var deleteEntry = (0, _react.useCallback)(/*#__PURE__*/function () {
+      var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6(e) {
+        var isValid, data;
+        return _regenerator["default"].wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              e === null || e === void 0 || e.preventDefault();
+              e === null || e === void 0 || e.stopPropagation();
+              _context6.next = 4;
+              return validateFieldsOnSubmit();
+            case 4:
+              isValid = _context6.sent;
+              if (isValid) {
+                data = getValues();
+                handleFormSubmit(data, new Event("submit"), "delete");
+              }
+            case 6:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6);
+      }));
+      return function (_x7) {
+        return _ref6.apply(this, arguments);
+      };
+    }(), [handleFormSubmit, validateFieldsOnSubmit]);
     var livefilterFn = props.Livefilter || function () {};
     var filter = handleSubmit(function (data, e) {
-      return livefilterFn(data, false, formfieldsRef.current);
+      e === null || e === void 0 || e.preventDefault();
+      e === null || e === void 0 || e.stopPropagation();
+      var transformedData = (0, _utils.transformRangeFilterData)(data);
+      return livefilterFn(transformedData, false, formfieldsRef.current);
     });
     var clearFilter = handleSubmit(function (data, e) {
+      e === null || e === void 0 || e.preventDefault();
+      e === null || e === void 0 || e.stopPropagation();
       formreset();
-      livefilterFn(data, true, formfieldsRef.current);
+      var transformedData = (0, _utils.transformRangeFilterData)(data);
+      livefilterFn(transformedData, true, formfieldsRef.current);
     });
+    var highlightInvalidFields = /*#__PURE__*/function () {
+      var _ref7 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+        return _regenerator["default"].wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
+            case 0:
+              _context7.next = 2;
+              return validateFieldsOnSubmit();
+            case 2:
+            case "end":
+              return _context7.stop();
+          }
+        }, _callee7);
+      }));
+      return function highlightInvalidFields() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+    var saveAndNew = function saveAndNew() {
+      submit();
+      reset({});
+    };
+    var saveAndView = function saveAndView() {
+      submit();
+      setShowViewMode(true);
+    };
     var onResultCb = /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(data, status, event) {
+      var _ref8 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8(data, status, event) {
         var params;
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regenerator["default"].wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
             case 0:
               params = {
                 $event: event,
@@ -291,12 +982,12 @@ var BaseForm = function BaseForm(WrappedComponent) {
               }
             case 3:
             case "end":
-              return _context2.stop();
+              return _context8.stop();
           }
-        }, _callee2);
+        }, _callee8);
       }));
-      return function onResultCb(_x4, _x5, _x6) {
-        return _ref2.apply(this, arguments);
+      return function onResultCb(_x8, _x9, _x0) {
+        return _ref8.apply(this, arguments);
       };
     }();
 
@@ -331,6 +1022,9 @@ var BaseForm = function BaseForm(WrappedComponent) {
       }, [props.captionwidth, props.captionposition]),
       captionCls = _useMemo.captionCls,
       widgetCls = _useMemo.widgetCls;
+    var itemsPerRow = (0, _react.useMemo)(function () {
+      return (0, _listHelpers.getItemsPerRowClass)(props.itemsperrow);
+    }, [props.itemsperrow]);
     function expandCollapsePanel() {
       if (props.collapsible) {
         // flip the active flag
@@ -341,6 +1035,8 @@ var BaseForm = function BaseForm(WrappedComponent) {
       return watch(fieldName);
     };
     var ref = {
+      ref: formReff,
+      updateFormData: updateFormData,
       control: control,
       watch: watch,
       registerHeaderAction: registerHeaderAction,
@@ -353,37 +1049,15 @@ var BaseForm = function BaseForm(WrappedComponent) {
       widgetCls: widgetCls,
       validationtype: props.validationtype,
       showViewMode: showViewMode,
-      formdata: props.formdata,
-      getFieldValue: getFieldValue
+      formdata: widgetFormData || childFormData || props.formdata,
+      getFieldValue: getFieldValue,
+      itemsPerRow: itemsPerRow,
+      saveAndNew: saveAndNew,
+      saveAndView: saveAndView,
+      highlightInvalidFields: highlightInvalidFields,
+      resetField: resetField,
+      submitCount: submitCount
     };
-    var formProps = _objectSpread(_objectSpread({}, props), {}, {
-      submit: submit,
-      formreset: formreset,
-      formfields: formfields,
-      formWidgets: formfields,
-      headerActions: headerActions,
-      ref: ref,
-      toggleMessage: toggleMessage,
-      clearMessage: clearMessage,
-      expandCollapsePanel: expandCollapsePanel,
-      expanded: expanded,
-      showmessage: showmessage,
-      statusMessage: statusMessage,
-      showViewMode: showViewMode,
-      filter: filter,
-      clearFilter: clearFilter,
-      validateFieldsOnSubmit: validateFieldsOnSubmit,
-      valid: isValid,
-      errors: errors,
-      "delete": deleteEntry,
-      cancel: cancel,
-      "new": create,
-      edit: edit,
-      setShowViewMode: setShowViewMode,
-      dataoutput: getValues(),
-      save: submit,
-      reset: reset
-    });
     var conditionalProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.target && {
       target: props.target
     }), props.method && {
@@ -402,7 +1076,7 @@ var BaseForm = function BaseForm(WrappedComponent) {
           };
         };
         formRef.current.validateForm = function () {
-          return trigger();
+          return submitCount === 0 ? isValid : trigger();
         };
         formRef.current.clearErrors = function () {
           clearErrors();
@@ -411,38 +1085,82 @@ var BaseForm = function BaseForm(WrappedComponent) {
           return props;
         };
         formRef.current.formWidgets = formfields;
+        // Expose validationMessages getter
+        formRef.current.getValidationMessages = function () {
+          return validationMessagesRef.current;
+        };
+        formRef.current.validationMessages = validationMessagesRef.current;
       }
     }, [watch, trigger, isValid, errors, formfields]);
     function create() {
+      formreset();
       formreset();
       setShowViewMode(false);
     }
     function edit(data) {
       if (data) {
-        reset(data);
+        // Convert null values to empty strings to avoid React Hook Form using old defaultValues
+        var cleanedData = {};
+        Object.keys(data).forEach(function (key) {
+          cleanedData[key] = data[key] === null ? "" : data[key];
+        });
+        reset(cleanedData);
+        // Update the ref to track this as the last reset formdata
+        lastResetFormDataRef.current = cleanedData;
       }
       setShowViewMode(false);
     }
-    function cancel() {
+    function setFormData(data) {
+      var _props$listener13;
+      if (!data || (0, _typeof2["default"])(data) !== "object" || Array.isArray(data)) {
+        return;
+      }
+      var cleanedData = {};
+      Object.keys(data).forEach(function (key) {
+        cleanedData[key] = data[key] === null ? "" : data[key];
+      });
+      reset(cleanedData);
+      // Update the ref to track this as the last reset formdata
+      lastResetFormDataRef.current = cleanedData;
+      if ((_props$listener13 = props.listener) !== null && _props$listener13 !== void 0 && _props$listener13.Widgets && props.name) {
+        props.listener.Widgets[props.name].formdata = cleanedData;
+      }
+      if (props["form-type"] === "live-filter") {
+        debouncedFilter();
+      }
+    }
+    (0, _react.useEffect)(function () {
+      return function () {
+        var _props$destroy;
+        props === null || props === void 0 || (_props$destroy = props.destroy) === null || _props$destroy === void 0 || _props$destroy.call(props, props.name);
+        formreset();
+      };
+    }, [props.name]);
+    function handleCancel() {
+      if (typeof props.cancel === "function") {
+        props.cancel();
+        return;
+      }
       setShowViewMode(true);
     }
-    var fields = (0, _get["default"])((_props$listener4 = props.listener) === null || _props$listener4 === void 0 ? void 0 : _props$listener4.Widgets[props.name], "formfields", {});
-    var FormFields = (0, _react.useMemo)(function () {
+    var fields = (0, _react.useMemo)(function () {
+      var _props$listener14;
       var newFields = [];
-      Object.keys(fields).forEach(function (key) {
-        if (!key.includes("formWidget") && fields[key]) {
-          newFields.push(fields[key]);
+      var Widgets = ((_props$listener14 = props.listener) === null || _props$listener14 === void 0 || (_props$listener14 = _props$listener14.Widgets) === null || _props$listener14 === void 0 || (_props$listener14 = _props$listener14[props.name]) === null || _props$listener14 === void 0 ? void 0 : _props$listener14.formfields) || {};
+      Object.keys(Widgets).forEach(function (key) {
+        if (!key.includes("formWidget") && Widgets[key]) {
+          newFields.push(Widgets[key]);
         }
       });
       return newFields;
-    }, [fields]);
+    }, [(_props$listener15 = props.listener) === null || _props$listener15 === void 0 ? void 0 : _props$listener15.Widgets[props.name], props.name]);
 
     // Call onDataSourceChange when formfields change
     (0, _react.useEffect)(function () {
-      if (props.onDataSourceChange && FormFields.length > 0) {
-        props.onDataSourceChange(FormFields);
+      if (props.onDataSourceChange && fields.length > 0) {
+        props.onDataSourceChange(fields);
       }
-    }, [FormFields, props.onDataSourceChange]);
+    }, [fields, props.onDataSourceChange]);
 
     // Determine form classes based on wizard context
     var formClassName = (0, _react.useMemo)(function () {
@@ -452,8 +1170,18 @@ var BaseForm = function BaseForm(WrappedComponent) {
       return (0, _clsx["default"])(DEFAULT_CLASS, props.className);
     }, [isInsideWizard, props.className]);
 
-    // Notify parent containers (wizard) about validity changes
+    // Keep track of last emitted values to avoid redundant emissions
+    var lastEmittedValuesSerialized = (0, _react.useRef)("");
+
+    // Helper function to reset form with new data
+    var resetFormWithData = function resetFormWithData(newData) {
+      var cleanNulls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      reset(newData);
+      lastResetFormDataRef.current = newData;
+    };
     (0, _react.useEffect)(function () {
+      // Added for wizard validations please do not remove the blow emit code changes.
+      // Notify parent containers (wizard) about validity changes
       var el = formRef.current;
       if (!el) return;
       var emit = function emit() {
@@ -465,35 +1193,118 @@ var BaseForm = function BaseForm(WrappedComponent) {
         }));
       };
       emit();
-      var unsubscribe = watch(function () {
-        return emit();
+      var unsubscribe = watch(function (values) {
+        emit();
+        var serialized = JSON.stringify(values);
+        if (serialized !== lastEmittedValuesSerialized.current) {
+          var _props$listener16;
+          lastEmittedValuesSerialized.current = serialized;
+          // For child forms, emit data update event to parent form
+          if (parentForm) {
+            if (isParentList && formArrayIndex >= 0) {
+              // Forms inside lists update array indices in parent form
+              _events.EVENTEMITTER_METHODS.CHILD_FORM_DATA_UPDATE_EMIT(parentForm, {
+                childFormName: props.name,
+                childdatasetnode: effectiveChildDatasetNode,
+                formArrayIndex: formArrayIndex,
+                formData: values,
+                childFormInstance: {
+                  getValues: getValues,
+                  reset: reset,
+                  setFormData: setFormData
+                },
+                isListForm: true
+              });
+            } else if (effectiveChildDatasetNode) {
+              // Regular child forms update object properties
+              _events.EVENTEMITTER_METHODS.CHILD_FORM_DATA_UPDATE_EMIT(parentForm, {
+                childFormName: props.name,
+                childdatasetnode: effectiveChildDatasetNode,
+                formData: values,
+                childFormInstance: {
+                  getValues: getValues,
+                  reset: reset,
+                  setFormData: setFormData
+                },
+                isListForm: false
+              });
+            }
+          }
+
+          // Emit current form's dataoutput
+          if (props !== null && props !== void 0 && (_props$listener16 = props.listener) !== null && _props$listener16 !== void 0 && _props$listener16.onChange && props !== null && props !== void 0 && props.name) {
+            props.listener.onChange(props.name, {
+              dataoutput: getValues()
+            });
+          }
+        }
       });
       return function () {
         if (typeof unsubscribe === "function") {
           unsubscribe();
         }
+        // Clean up child and parent form event listeners
+        if (childFormUnsubscribeRef.current) {
+          childFormUnsubscribeRef.current();
+          childFormUnsubscribeRef.current = null;
+        }
+        if (parentFormUnsubscribeRef.current) {
+          parentFormUnsubscribeRef.current();
+          parentFormUnsubscribeRef.current = null;
+        }
       };
-    }, [watch, isValid]);
-    return __jsx("form", (0, _extends2["default"])({
-      name: props.name,
-      defaultmode: props.defaultmode,
-      captionposition: props.captionposition,
-      captionalign: props.captionalign,
+    }, [watch, isValid, parentForm, effectiveChildDatasetNode, props.name, props["data-widget-id"]]);
+    var formProps = _objectSpread(_objectSpread(_objectSpread({}, props), conditionalProps), {}, {
+      submit: submit,
+      formreset: formreset,
+      formfields: formfields,
+      formWidgets: formfields,
+      headerActions: headerActions,
+      ref: ref,
+      formElementRef: formRef,
+      toggleMessage: toggleMessage,
+      clearMessage: clearMessage,
+      expandCollapsePanel: expandCollapsePanel,
+      expanded: expanded,
+      showmessage: showmessage,
+      statusMessage: statusMessage,
+      showViewMode: showViewMode,
+      filter: filter,
+      clearFilter: clearFilter,
+      validateFieldsOnSubmit: validateFieldsOnSubmit,
+      errors: errors,
+      validationMessages: validationMessagesRef.current,
+      "delete": deleteEntry,
+      cancel: handleCancel,
+      "new": create,
+      edit: edit,
+      setShowViewMode: setShowViewMode,
+      dataoutput: getValues(),
+      save: submit,
+      setFormData: setFormData,
+      reset: reset,
       numberoffields: Object.keys(formfields).length,
-      ref: formRef,
       className: formClassName,
-      id: props.id,
-      onSubmit: submit
-    }, conditionalProps, {
-      style: _objectSpread(_objectSpread({}, props.styles), props.conditionalstyle)
-    }), __jsx(_formContext.FormProvider, {
+      saveAndNew: saveAndNew,
+      saveAndView: saveAndView,
+      highlightInvalidFields: highlightInvalidFields,
+      formdata: widgetFormData || childFormData || props.formdata
+    });
+
+    //  if parentFormRef is not null, register methods to parent form
+    (0, _react.useImperativeHandle)(parentFormRef, function () {
+      return {
+        formreset: formreset,
+        validateFieldsOnSubmit: validateFieldsOnSubmit
+      };
+    });
+    return __jsx(_formContext.FormProvider, {
       value: ref,
       isViewMode: showViewMode
     }, __jsx(WrappedComponent, (0, _extends2["default"])({}, formProps, {
-      valid: isValid,
       formWidgets: formfields,
       formfields: formfields
-    }))));
+    })));
   };
   return ControlledForm;
 };