@wavemaker/react-runtime 11.15.3-rc.647481 → 11.15.4-rc.250

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

@@ -27,6 +27,7 @@ var _PrefabContext = require("../../../../context/PrefabContext");
 var _events = require("../../../../core/constants/events");
 var _merge = _interopRequireDefault(require("lodash-es/merge"));
 var _formUtils = require("../../../../utils/form-utils");
+var _utils3 = require("../../table/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; }
@@ -34,7 +35,7 @@ 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 _prefabContext$formAr, _props$listener, _props$listener2, _props$listener14;
+    var _prefabContext$formAr, _props$listener, _props$listener12;
     // setting up default props for form
     var props = _objectSpread(_objectSpread({}, _props.defaultProps), FormProps);
     var parentFormRef = (0, _formContext.useFormRef)();
@@ -45,9 +46,6 @@ var BaseForm = function BaseForm(WrappedComponent) {
     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)({}),
@@ -68,19 +66,45 @@ var BaseForm = function BaseForm(WrappedComponent) {
       }),
       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;
+
+    // Use context to get parent form's data (instance-specific, not shared widget proxy)
+    var parentFormDataContext = (0, _formContext.useParentFormData)();
+    var parentFormData = parentForm ? parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.formdata : undefined;
+
+    // For child forms, determine the correct data key dynamically.
+    // - If parent has an array at parentListName, this is a direct list child → use parentListName
+    // - Otherwise, use childdatasetnode (nested object child)
+    var effectiveChildDatasetNode = (0, _react.useMemo)(function () {
+      if (!parentForm) return undefined;
+
+      // Check if parentListName exists as an array in parent's data
+      if (props.parentListName && parentFormDataContext !== null && parentFormDataContext !== void 0 && parentFormDataContext.formdata) {
+        var dataAtParentListName = (0, _get["default"])(parentFormDataContext.formdata, props.parentListName);
+        if (Array.isArray(dataAtParentListName)) {
+          return props.parentListName;
+        }
+      }
+      // Fall back to childdatasetnode or name
+      return props.childdatasetnode || props.name;
+    }, [parentForm, parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.formdata, props.parentListName, props.childdatasetnode, props.name]);
     var _useState6 = (0, _react.useState)(),
       childFormData = _useState6[0],
       setChildFormData = _useState6[1];
+
+    // Track current form's data to provide to children via context
+    var _useState7 = (0, _react.useState)(null),
+      currentFormData = _useState7[0],
+      setCurrentFormData = _useState7[1];
     var messageRef = (0, _react.useRef)(null);
-    var _useState7 = (0, _react.useState)(false),
-      showViewMode = _useState7[0],
-      setShowViewMode = _useState7[1];
+    var _useState8 = (0, _react.useState)(false),
+      showViewMode = _useState8[0],
+      setShowViewMode = _useState8[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 formIdRef = (0, _react.useRef)(Math.random().toString(36).substring(2, 15));
+    var widgetFormData = props.name && (_props$listener = props.listener) !== null && _props$listener !== void 0 && (_props$listener = _props$listener.Widgets) !== null && _props$listener !== void 0 && (_props$listener = _props$listener[props.name]) !== null && _props$listener !== void 0 && _props$listener.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") {
@@ -112,13 +136,23 @@ var BaseForm = function BaseForm(WrappedComponent) {
 
     // 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) {
+      var _props$listener2;
+      if ((_props$listener2 = props.listener) !== null && _props$listener2 !== void 0 && _props$listener2.onChange && props.name) {
         props.listener.onChange(props.name, {
           valid: isValid
         });
       }
     }, [isValid]);
+
+    // Helper function to notify listeners of form data output changes
+    // Cleans internal properties before emitting
+    var notifyDataOutput = function notifyDataOutput(data) {
+      var _props$listener3, _props$listener3$onCh;
+      var cleanedData = (0, _utils3.cleanRowData)(data);
+      (_props$listener3 = props.listener) === null || _props$listener3 === void 0 || (_props$listener3$onCh = _props$listener3.onChange) === null || _props$listener3$onCh === void 0 || _props$listener3$onCh.call(_props$listener3, props.name, {
+        dataoutput: cleanedData
+      });
+    };
     var childFormEventListeners = function childFormEventListeners() {
       if (parentForm && props.name) {
         // Listen for parent relationship events (context, acknowledgments, etc.)
@@ -233,7 +267,7 @@ var BaseForm = function BaseForm(WrappedComponent) {
             isListForm = data.isListForm,
             formArrayIndex = data.formArrayIndex;
           if (childdatasetnode && formData) {
-            var _props$listener4, _props$listener5, _props$listener5$onCh;
+            var _props$listener4;
             // Get current parent form values
             var currentParentData = getValues();
 
@@ -297,9 +331,7 @@ var BaseForm = function BaseForm(WrappedComponent) {
             }, 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
-            });
+            notifyDataOutput(updatedParentData);
           }
         });
         return function () {
@@ -308,17 +340,17 @@ var BaseForm = function BaseForm(WrappedComponent) {
       }
     };
     var parentFormFieldRegisterListeners = function parentFormFieldRegisterListeners() {
-      var _props$listener6;
+      var _props$listener5;
       // 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) {
+      if (!parentForm && props.name && (_props$listener5 = props.listener) !== null && _props$listener5 !== void 0 && _props$listener5.Widgets) {
         var unsubscribe = _events.EVENTEMITTER_METHODS.CHILD_FORM_FIELD_REGISTER_ON(props.name, function (data) {
-          var _props$listener7;
+          var _props$listener6;
           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]) {
+          if (childFormName && widget && formKey && fieldName && (_props$listener6 = props.listener) !== null && _props$listener6 !== void 0 && (_props$listener6 = _props$listener6.Widgets) !== null && _props$listener6 !== void 0 && _props$listener6[props.name]) {
             // Ensure the form structure exists in the parent form's widgetsContext
             var parentFormContext = props.listener.Widgets[props.name];
             parentFormContext.formfields = parentFormContext.formfields || {};
@@ -346,25 +378,31 @@ var BaseForm = function BaseForm(WrappedComponent) {
     // This prevents unnecessary resets when formdata prop reference changes but values are the same
 
     (0, _react.useEffect)(function () {
-      if (parentFormData) {
+      if (parentFormData && effectiveChildDatasetNode) {
         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];
+
+        // Get data at the effective node
+        var dataAtNode = (0, _get["default"])(parentFormData, effectiveChildDatasetNode);
+        var isArrayData = Array.isArray(dataAtNode);
+        if (isArrayData && formArrayIndex >= 0) {
+          // This form is a direct child of a list - read from array index
+          if (formArrayIndex < dataAtNode.length) {
+            childData = dataAtNode[formArrayIndex];
           } else {
-            childData = null;
+            // New list item, no data yet
+            childData = {};
           }
-        } else if (effectiveChildDatasetNode) {
-          // Regular child forms use object properties: parentForm.formdata[childDatasetNode]
-          childData = (0, _get["default"])(parentFormData, effectiveChildDatasetNode);
         } else {
-          childData = null;
+          // This is a nested object child - read the property directly
+          childData = dataAtNode;
+          // If no data, use empty object for new records
+          if (childData === undefined || childData === null) {
+            childData = {};
+          }
         }
         setChildFormData(childData);
       }
-    }, [parentFormData, props === null || props === void 0 ? void 0 : props.dataKey, effectiveChildDatasetNode, props === null || props === void 0 ? void 0 : props.name, isParentList, formArrayIndex]);
+    }, [parentFormData, effectiveChildDatasetNode, formArrayIndex]);
 
     // Register child form with parent form if parentForm exists
     (0, _react.useEffect)(function () {
@@ -438,6 +476,17 @@ var BaseForm = function BaseForm(WrappedComponent) {
         }
       }
     }, [props.formdata, widgetFormData, childFormData, reset, getValues, props.parentForm]);
+
+    // Initialize currentFormData for root forms or when data is first available
+    // This ensures child forms can read from context on initial render
+    (0, _react.useEffect)(function () {
+      if (!parentForm && currentFormData === null) {
+        var initialData = widgetFormData || props.formdata;
+        if (initialData && (0, _typeof2["default"])(initialData) === "object" && !Array.isArray(initialData)) {
+          setCurrentFormData(initialData);
+        }
+      }
+    }, [parentForm, currentFormData, widgetFormData, props.formdata]);
     function debouncedFilter() {
       var debouncedFilter = (0, _lodashEs.debounce)(filter, 250);
       debouncedFilter();
@@ -536,8 +585,8 @@ var BaseForm = function BaseForm(WrappedComponent) {
             scrollToElement(formEl);
           }
         } else {
-          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);
+          var _props$listener7;
+          props === null || props === void 0 || (_props$listener7 = props.listener) === null || _props$listener7 === void 0 || (_props$listener7 = _props$listener7.App) === null || _props$listener7 === void 0 || _props$listener7.notifyApp(template, type, true);
         }
       } else {
         setStatusMessage({
@@ -583,8 +632,8 @@ var BaseForm = function BaseForm(WrappedComponent) {
      * 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]) {
+      var _props$listener8;
+      if ((_props$listener8 = props.listener) !== null && _props$listener8 !== void 0 && (_props$listener8 = _props$listener8.Widgets) !== null && _props$listener8 !== void 0 && _props$listener8[props.name]) {
         props.listener.Widgets[props.name].validationMessages = validationMessages;
       }
       if (formRef.current) {
@@ -597,8 +646,8 @@ var BaseForm = function BaseForm(WrappedComponent) {
      * 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 _props$listener9;
+      var formFieldsToValidate = ((_props$listener9 = props.listener) === null || _props$listener9 === void 0 || (_props$listener9 = _props$listener9.Widgets) === null || _props$listener9 === void 0 || (_props$listener9 = _props$listener9[props.name]) === null || _props$listener9 === void 0 ? void 0 : _props$listener9.formfields) || formfields;
       var allFieldKeys = Object.keys(formFieldsToValidate);
       var prefix = props.name || "";
       return {
@@ -641,7 +690,7 @@ var BaseForm = function BaseForm(WrappedComponent) {
       });
     }, [buildValidationMessagesCore, control]);
     var validateFieldsOnSubmit = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var isValid, childForms, validationResults, validationMessages, currentFormValidState, _props$listener1;
+      var isValid, childForms, validationResults, currentFormValidState, validationMessages, _props$listener0;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -661,19 +710,19 @@ var BaseForm = function BaseForm(WrappedComponent) {
             validationResults = _context2.sent;
             isValid = validationResults.every(Boolean);
           case 7:
-            // Build and expose validation messages immediately after trigger
-            validationMessages = buildValidationMessages();
-            exposeValidationMessages(validationMessages);
-            _context2.next = 11;
+            _context2.next = 9;
             return trigger();
-          case 11:
+          case 9:
             currentFormValidState = _context2.sent;
+            // Build and expose validation messages AFTER trigger so control.getFieldState() has latest errors
+            validationMessages = buildValidationMessages();
+            exposeValidationMessages(validationMessages);
             if (!(!isValid || !currentFormValidState)) {
               _context2.next = 16;
               break;
             }
             if (!currentFormValidState) {
-              props === null || props === void 0 || (_props$listener1 = props.listener) === null || _props$listener1 === void 0 || _props$listener1.onChange(props.name, {
+              props === null || props === void 0 || (_props$listener0 = props.listener) === null || _props$listener0 === void 0 || _props$listener0.onChange(props.name, {
                 valid: false,
                 errors: errors
               });
@@ -701,13 +750,13 @@ var BaseForm = function BaseForm(WrappedComponent) {
     };
     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;
+        var _props$listener1, _props$onSubmit;
+        var formWidgets, filteredData, mergedData, result, formData, cleanedFormData, cleanedMergedData;
         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;
+              formWidgets = (_props$listener1 = props.listener) === null || _props$listener1 === void 0 || (_props$listener1 = _props$listener1.Widgets) === null || _props$listener1 === void 0 || (_props$listener1 = _props$listener1[props.name]) === null || _props$listener1 === void 0 ? void 0 : _props$listener1.dataoutput;
               if (formWidgets && Object.keys(formWidgets).length > 0) {
                 data = updateFormDataOutput(data, formWidgets);
               }
@@ -730,14 +779,16 @@ var BaseForm = function BaseForm(WrappedComponent) {
               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:
+              formData = transformToNestedObject(mergedData); // Clean internal properties before submission
+              cleanedFormData = (0, _utils3.cleanRowData)(formData);
+              cleanedMergedData = (0, _utils3.cleanRowData)(mergedData); // Handle form submission with cleaned data
+              notifyDataOutput(cleanedMergedData);
+              _context3.next = 17;
+              return executeFormSubmit(cleanedFormData, operationType);
+            case 17:
+              // Execute onSubmit hook with cleaned data
+              props === null || props === void 0 || (_props$onSubmit = props.onSubmit) === null || _props$onSubmit === void 0 || _props$onSubmit.call(props, e, props, cleanedFormData);
+            case 18:
             case "end":
               return _context3.stop();
           }
@@ -774,12 +825,6 @@ var BaseForm = function BaseForm(WrappedComponent) {
       });
       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;
@@ -1101,7 +1146,7 @@ var BaseForm = function BaseForm(WrappedComponent) {
       setShowViewMode(false);
     }
     function setFormData(data) {
-      var _props$listener12;
+      var _props$listener10;
       if (!data || (0, _typeof2["default"])(data) !== "object" || Array.isArray(data)) {
         return;
       }
@@ -1112,7 +1157,9 @@ var BaseForm = function BaseForm(WrappedComponent) {
       reset(cleanedData);
       // Update the ref to track this as the last reset formdata
       lastResetFormDataRef.current = cleanedData;
-      if ((_props$listener12 = props.listener) !== null && _props$listener12 !== void 0 && _props$listener12.Widgets && props.name) {
+      // Update context so child forms see the latest data
+      setCurrentFormData(cleanedData);
+      if ((_props$listener10 = props.listener) !== null && _props$listener10 !== void 0 && _props$listener10.Widgets && props.name) {
         props.listener.Widgets[props.name].formdata = cleanedData;
       }
       if (props["form-type"] === "live-filter") {
@@ -1134,16 +1181,16 @@ var BaseForm = function BaseForm(WrappedComponent) {
       setShowViewMode(true);
     }
     var fields = (0, _react.useMemo)(function () {
-      var _props$listener13;
+      var _props$listener11;
       var newFields = [];
-      var Widgets = ((_props$listener13 = props.listener) === null || _props$listener13 === void 0 || (_props$listener13 = _props$listener13.Widgets) === null || _props$listener13 === void 0 || (_props$listener13 = _props$listener13[props.name]) === null || _props$listener13 === void 0 ? void 0 : _props$listener13.formfields) || {};
+      var Widgets = ((_props$listener11 = props.listener) === null || _props$listener11 === void 0 || (_props$listener11 = _props$listener11.Widgets) === null || _props$listener11 === void 0 || (_props$listener11 = _props$listener11[props.name]) === null || _props$listener11 === void 0 ? void 0 : _props$listener11.formfields) || {};
       Object.keys(Widgets).forEach(function (key) {
         if (!key.includes("formWidget") && Widgets[key]) {
           newFields.push(Widgets[key]);
         }
       });
       return newFields;
-    }, [(_props$listener14 = props.listener) === null || _props$listener14 === void 0 ? void 0 : _props$listener14.Widgets[props.name], props.name]);
+    }, [(_props$listener12 = props.listener) === null || _props$listener12 === void 0 ? void 0 : _props$listener12.Widgets[props.name], props.name]);
 
     // Call onDataSourceChange when formfields change
     (0, _react.useEffect)(function () {
@@ -1166,8 +1213,13 @@ var BaseForm = function BaseForm(WrappedComponent) {
     // Helper function to reset form with new data
     var resetFormWithData = function resetFormWithData(newData) {
       var cleanNulls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (newData._wmListItemId) {
+        return;
+      }
       reset(newData);
       lastResetFormDataRef.current = newData;
+      // Update context so child forms can read this instance's data
+      setCurrentFormData(newData);
     };
     (0, _react.useEffect)(function () {
       // Added for wizard validations please do not remove the blow emit code changes.
@@ -1187,46 +1239,33 @@ var BaseForm = function BaseForm(WrappedComponent) {
         emit();
         var serialized = JSON.stringify(values);
         if (serialized !== lastEmittedValuesSerialized.current) {
-          var _props$listener15;
           lastEmittedValuesSerialized.current = serialized;
+
+          // Update context so child forms see the latest data
+          setCurrentFormData(values);
+
           // 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
-              });
-            }
+          // Determine if this is a list child by checking if parent has an array at our node
+          if (parentForm && effectiveChildDatasetNode) {
+            var parentData = parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.formdata;
+            var dataAtNode = parentData ? (0, _get["default"])(parentData, effectiveChildDatasetNode) : undefined;
+            var isActuallyListChild = Array.isArray(dataAtNode);
+            _events.EVENTEMITTER_METHODS.CHILD_FORM_DATA_UPDATE_EMIT(parentForm, {
+              childFormName: props.name,
+              childdatasetnode: effectiveChildDatasetNode,
+              formArrayIndex: isActuallyListChild && formArrayIndex >= 0 ? formArrayIndex : undefined,
+              formData: (0, _utils3.cleanRowData)(values),
+              childFormInstance: {
+                getValues: getValues,
+                reset: reset,
+                setFormData: setFormData
+              },
+              isListForm: isActuallyListChild
+            });
           }
 
           // Emit current form's dataoutput
-          if (props !== null && props !== void 0 && (_props$listener15 = props.listener) !== null && _props$listener15 !== void 0 && _props$listener15.onChange && props !== null && props !== void 0 && props.name) {
-            props.listener.onChange(props.name, {
-              dataoutput: getValues()
-            });
-          }
+          notifyDataOutput(getValues());
         }
       });
       return function () {
@@ -1284,18 +1323,30 @@ var BaseForm = function BaseForm(WrappedComponent) {
     //  if parentFormRef is not null, register methods to parent form with form name as key
     (0, _react.useImperativeHandle)(parentFormRef, function () {
       var existing = (parentFormRef === null || parentFormRef === void 0 ? void 0 : parentFormRef.current) || {};
-      return _objectSpread(_objectSpread({}, existing), {}, (0, _defineProperty2["default"])({}, props.name, {
+      return _objectSpread(_objectSpread({}, existing), {}, (0, _defineProperty2["default"])({}, formIdRef.current, {
         formreset: formreset,
         validateFieldsOnSubmit: validateFieldsOnSubmit
       }));
-    }, [props.name, formreset, validateFieldsOnSubmit]);
-    return __jsx(_formContext.FormProvider, {
+    }, [props.name, formIdRef.current, formreset, validateFieldsOnSubmit]);
+
+    // Provide current form's data to children via context
+    // This ensures each form instance provides its own data, solving the
+    // shared widget proxy problem for forms inside lists
+    var parentFormDataContextValue = (0, _react.useMemo)(function () {
+      return {
+        formdata: currentFormData,
+        formName: props.name
+      };
+    }, [currentFormData, props.name]);
+    return __jsx(_formContext.ParentFormDataContext.Provider, {
+      value: parentFormDataContextValue
+    }, __jsx(_formContext.FormProvider, {
       value: ref,
       isViewMode: showViewMode
     }, __jsx(WrappedComponent, (0, _extends2["default"])({}, formProps, {
       formWidgets: formfields,
       formfields: formfields
-    })));
+    }))));
   };
   return ControlledForm;
 };

package/components/data/form/form-context.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useIsViewMode = exports.useFormRef = exports.useFormContext = exports["default"] = exports.FormProvider = void 0;
+exports.useParentFormData = exports.useIsViewMode = exports.useFormRef = exports.useFormContext = exports["default"] = exports.ParentFormDataContext = exports.FormProvider = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 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); }
@@ -13,6 +13,22 @@ var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * ParentFormDataContext provides instance-specific form data to child forms.
+ *
+ * This solves the problem where multiple instances of the same form exist inside
+ * a list (e.g., DeptEmpContactForm2 at index 0, 1, 2). The shared Widgets proxy
+ * (Widgets["DeptEmpContactForm2"].formdata) is contaminated across instances.
+ *
+ * With this context, each form instance provides its own formdata, and child forms
+ * consume from the nearest parent provider - naturally scoping to the correct instance.
+ */
+
+var ParentFormDataContext = exports.ParentFormDataContext = /*#__PURE__*/(0, _react.createContext)(null);
+var useParentFormData = exports.useParentFormData = function useParentFormData() {
+  return (0, _react.useContext)(ParentFormDataContext);
+};
 var FormProvider = exports.FormProvider = function FormProvider(_ref) {
   var value = _ref.value,
     isViewMode = _ref.isViewMode,

package/components/data/form/form-controller/hooks/index.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useValidationRules = exports.useHTMLValidationProps = exports.useFormRegistration = exports.useExternalDataSync = exports.useDefaultValueSync = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _validationContrustor = require("../validation-contrustor");
+// Custom hooks for better separation of concerns
+var useFormRegistration = exports.useFormRegistration = function useFormRegistration(name, fieldProxy, contextFormRef) {
+  var hasRegisteredRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (contextFormRef !== null && contextFormRef !== void 0 && contextFormRef.registerFormWidget && fieldProxy && !hasRegisteredRef.current) {
+      contextFormRef.registerFormWidget(name, fieldProxy);
+      hasRegisteredRef.current = true;
+    }
+  }, [fieldProxy, name, contextFormRef]);
+};
+var useExternalDataSync = exports.useExternalDataSync = function useExternalDataSync(datavalue, fieldRef) {
+  (0, _react.useEffect)(function () {
+    if (fieldRef.current && datavalue !== undefined) {
+      var currentValue = fieldRef.current.value;
+      if (currentValue !== datavalue) {
+        fieldRef.current.onChange(datavalue);
+      }
+    }
+  }, [datavalue]);
+};
+var useDefaultValueSync = exports.useDefaultValueSync = function useDefaultValueSync(defaultvalue, datavalue, fieldRef) {
+  var hasInitializedRef = (0, _react.useRef)(false);
+  var prevDefaultValueRef = (0, _react.useRef)(defaultvalue);
+  (0, _react.useEffect)(function () {
+    if (!fieldRef.current) return;
+
+    // Initial sync: only when datavalue is undefined and we haven't initialized yet
+    if (!hasInitializedRef.current && defaultvalue !== undefined && datavalue === undefined) {
+      var currentValue = fieldRef.current.value;
+      if (currentValue === undefined || currentValue === null || currentValue === "") {
+        fieldRef.current.onChange(defaultvalue);
+        hasInitializedRef.current = true;
+      }
+      prevDefaultValueRef.current = defaultvalue;
+      return;
+    }
+
+    // Dynamic defaultvalue sync: when defaultvalue prop changes (e.g. conditional default from toggle)
+    // React Hook Form's Controller uses defaultValue only at registration; we must sync on prop change
+    if (prevDefaultValueRef.current !== defaultvalue) {
+      var _currentValue = fieldRef.current.value;
+      // Only update if current value matches previous default - user hasn't typed something different
+      var valueWasFromDefault = _currentValue === prevDefaultValueRef.current || prevDefaultValueRef.current === "" && (_currentValue === undefined || _currentValue === null || _currentValue === "");
+      if (valueWasFromDefault) {
+        fieldRef.current.onChange(defaultvalue);
+      }
+      prevDefaultValueRef.current = defaultvalue;
+    }
+  }, [defaultvalue, datavalue]);
+};
+var useValidationRules = exports.useValidationRules = function useValidationRules(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, minvalue, maxvalue, form) {
+  if (validationType === "none") {
+    return {};
+  }
+  var combinedValidators = [].concat((0, _toConsumableArray2["default"])(validators || []), (0, _toConsumableArray2["default"])(asyncValidators || []));
+  var hasValidatorType = function hasValidatorType(type) {
+    return validators === null || validators === void 0 ? void 0 : validators.some(function (v) {
+      return typeof v !== "function" && v.type === type;
+    });
+  };
+  if (required && !hasValidatorType("required")) {
+    combinedValidators.push({
+      type: "required",
+      validator: true,
+      errorMessage: validationmessage || "This field is required"
+    });
+  }
+  if (maxchars !== undefined) {
+    combinedValidators.push({
+      type: "maxchars",
+      validator: maxchars,
+      errorMessage: validationmessage || "Maximum length is ".concat(maxchars, " characters.")
+    });
+  }
+  var normalizedMin = minvalue !== undefined && minvalue !== null && minvalue !== "" ? Number(minvalue) : undefined;
+  var normalizedMax = maxvalue !== undefined && maxvalue !== null && maxvalue !== "" ? Number(maxvalue) : undefined;
+  if (normalizedMin !== undefined && !Number.isNaN(normalizedMin)) {
+    combinedValidators.push({
+      type: "minvalue",
+      validator: normalizedMin,
+      errorMessage: validationmessage || "Value must be greater than or equal to ".concat(normalizedMin, ".")
+    });
+  }
+  if (normalizedMax !== undefined && !Number.isNaN(normalizedMax)) {
+    combinedValidators.push({
+      type: "maxvalue",
+      validator: normalizedMax,
+      errorMessage: validationmessage || "Value must be less than or equal to ".concat(normalizedMax, ".")
+    });
+  }
+  if (regexp) {
+    combinedValidators.push({
+      type: "regexp",
+      validator: regexp,
+      errorMessage: validationmessage || "Invalid format."
+    });
+  }
+  return (0, _validationContrustor.createValidationRules)(combinedValidators, form);
+};
+var useHTMLValidationProps = exports.useHTMLValidationProps = function useHTMLValidationProps(validationType, required, maxchars, regexp) {
+  return (0, _react.useMemo)(function () {
+    if (validationType !== "html") {
+      return {};
+    }
+    var htmlProps = {};
+    if (required) {
+      htmlProps.required = true;
+    }
+    if (maxchars) {
+      htmlProps.maxLength = maxchars;
+    }
+    if (regexp) {
+      htmlProps.pattern = typeof regexp === "string" ? regexp : regexp.source;
+    }
+    return htmlProps;
+  }, [validationType, required, maxchars, regexp]);
+};