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

package/components/data/form/base-form/hooks/useFormSubmission.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormSubmission = useFormSubmission;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+var _utils = require("../../../utils");
+var _utils2 = require("../../../table/utils");
+var _utils3 = require("../utils");
+var _props = require("../props");
+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; }
+/**
+ * Hook for managing form submission logic
+ *
+ * Handles:
+ * - Form data transformation before submit
+ * - Submit and delete operations
+ * - Success/error callbacks
+ * - Data output notification
+ */
+function useFormSubmission(_ref) {
+  var formName = _ref.formName,
+    formfields = _ref.formfields,
+    externalFormDataref = _ref.formDataref,
+    getValues = _ref.getValues,
+    formType = _ref.formType,
+    validateFieldsOnSubmit = _ref.validateFieldsOnSubmit,
+    resetFormData = _ref.resetFormData,
+    toggleMessage = _ref.toggleMessage,
+    setShowViewMode = _ref.setShowViewMode,
+    listener = _ref.listener,
+    datasource = _ref.datasource,
+    formSubmit = _ref.formSubmit,
+    widgettype = _ref.widgettype,
+    onBeforeSubmit = _ref.onBeforeSubmit,
+    onSubmit = _ref.onSubmit,
+    onResult = _ref.onResult,
+    onSuccess = _ref.onSuccess,
+    onError = _ref.onError,
+    insertmessage = _ref.insertmessage,
+    updatemessage = _ref.updatemessage,
+    deletemessage = _ref.deletemessage,
+    postmessage = _ref.postmessage,
+    errormessage = _ref.errormessage,
+    messagelayout = _ref.messagelayout,
+    standalone = _ref.standalone;
+  // Check if this form uses prefixed field registration
+  var hasPrefixedFields = (0, _props.usesPrefixedFields)(formType);
+
+  // Use the external ref directly for reading in handleFormSubmit
+  // Note: updateFormData is now defined in index.tsx to ensure stable ref access
+  var formDataref = externalFormDataref;
+  var notifyDataOutput = (0, _react.useCallback)(function (data) {
+    var _listener$onChange;
+    var cleanedData = (0, _utils2.cleanRowData)(data);
+    listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, formName, {
+      dataoutput: cleanedData
+    });
+  }, [formName]);
+  var updateFormDataOutput = (0, _react.useCallback)(function (data, formWidgets) {
+    Object.keys(formWidgets).forEach(function (key) {
+      if (!(0, _lodashEs.find)(data, {
+        key: key
+      })) {
+        data[key] = formWidgets[key];
+      }
+    });
+    return data;
+  }, []);
+  var prepareSubmitData = (0, _react.useCallback)(function (formData) {
+    var _datasource$name, _datasource$name$toLo;
+    if ((datasource === null || datasource === void 0 || (_datasource$name = datasource.name) === null || _datasource$name === void 0 || (_datasource$name$toLo = _datasource$name.toLowerCase) === null || _datasource$name$toLo === void 0 ? void 0 : _datasource$name$toLo.call(_datasource$name)) !== "crudvariable") {
+      return formData;
+    }
+    var primaryKeys = datasource.execute("getPrimaryKey");
+    var operation = (0, _utils.findOperationType)(formData, primaryKeys);
+    return {
+      inputFields: formData,
+      operation: operation === "insert" ? "create" : operation
+    };
+  }, [datasource]);
+  var getSuccessMessage = (0, _react.useCallback)(function (data) {
+    if (widgettype === "live-form") {
+      var operationType = data.operationType;
+      return operationType === "insert" && insertmessage || operationType === "update" && updatemessage || operationType === "delete" && deletemessage || postmessage;
+    }
+    return postmessage;
+  }, [widgettype, insertmessage, updatemessage, deletemessage, postmessage]);
+  var onResultCb = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(data, status, event) {
+      var errorMsg;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (onResult) {
+              onResult(event, {}, data);
+            }
+            if (status) {
+              onSuccess === null || onSuccess === void 0 || onSuccess(event, {}, data);
+              if (messagelayout === "Inline") {
+                toggleMessage(true, "Data saved successfully", "success");
+              }
+            } else {
+              onError === null || onError === void 0 || onError(event, {}, data);
+              if (messagelayout === "Inline") {
+                errorMsg = errormessage || data;
+                toggleMessage(true, errorMsg, "error");
+              }
+            }
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [onResult, onSuccess, onError, messagelayout, errormessage, toggleMessage]);
+  var handleSubmitSuccess = (0, _react.useCallback)(function (data, resolve) {
+    if (standalone) {
+      onResultCb(data === null || data === void 0 ? void 0 : data.params, "success");
+      var message = getSuccessMessage(data);
+      toggleMessage(true, message, "success");
+      resolve === null || resolve === void 0 || resolve(data);
+    } else {
+      var operationType = data.operationType;
+      if (widgettype === "live-form" && (operationType === "insert" || operationType === "delete")) {
+        resetFormData(data);
+        setShowViewMode(false);
+      }
+      onResultCb(data === null || data === void 0 ? void 0 : data.params, "success");
+      var _message = getSuccessMessage(data);
+      toggleMessage(true, _message, "success");
+      resolve(data);
+    }
+  }, [widgettype, resetFormData, setShowViewMode, onResultCb, getSuccessMessage, toggleMessage]);
+  var handleSubmitError = (0, _react.useCallback)(function (error, reject) {
+    var errorMsg = errormessage || (error === null || error === void 0 ? void 0 : error.message) || error;
+    onResultCb(errorMsg, "");
+    reject(error);
+  }, [errormessage, onResultCb]);
+  var executeFormSubmit = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(formData, operationType) {
+      var firstParam;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            firstParam = prepareSubmitData(formData);
+            return _context2.abrupt("return", new Promise(function (resolve, reject) {
+              formSubmit(firstParam, function (data) {
+                return handleSubmitSuccess(data, resolve);
+              }, function (error) {
+                return handleSubmitError(error, reject);
+              }, operationType);
+            }));
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x4, _x5) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [prepareSubmitData, formSubmit, handleSubmitSuccess, handleSubmitError]);
+  var handleFormSubmit = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(data, e, operationType) {
+      var _listener$Widgets;
+      var formWidgets, filteredData, filteredByRendered, 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");
+
+            // For forms with prefixed fields, unwrap data from form name wrapper
+            if (hasPrefixedFields && formName && data[formName] && (0, _typeof2["default"])(data[formName]) === "object") {
+              data = _objectSpread({}, data[formName]);
+            }
+            formWidgets = listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 || (_listener$Widgets = _listener$Widgets[formName]) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets.dataoutput;
+            if (formWidgets && Object.keys(formWidgets).length > 0) {
+              data = updateFormDataOutput(data, formWidgets);
+            }
+
+            // Filter and transform data
+            filteredData = (0, _utils3.filterTableColumns)(data);
+            filteredByRendered = (0, _utils3.filterArraysByRenderedForms)(filteredData, listener === null || listener === void 0 ? void 0 : listener.Widgets);
+            mergedData = (0, _utils3.mergeWithFormDataRef)(filteredByRendered, formDataref === null || formDataref === void 0 ? void 0 : formDataref.current); // Execute onBeforeSubmit hook
+            if (!onBeforeSubmit) {
+              _context3.next = 13;
+              break;
+            }
+            _context3.next = 10;
+            return onBeforeSubmit(e, {}, mergedData);
+          case 10:
+            result = _context3.sent;
+            if (!(result === false)) {
+              _context3.next = 13;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 13:
+            // Transform flat data to nested structure
+            formData = (0, _utils3.transformToNestedObject)(mergedData, formfields, formName); // Clean internal properties before submission
+            cleanedFormData = (0, _utils2.cleanRowData)(formData);
+            cleanedMergedData = (0, _utils2.cleanRowData)(mergedData); // Handle form submission with cleaned data
+            notifyDataOutput(cleanedMergedData);
+            onSubmit === null || onSubmit === void 0 || onSubmit(e, {}, cleanedFormData);
+            _context3.next = 20;
+            return executeFormSubmit(cleanedFormData, operationType);
+          case 20:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function (_x6, _x7, _x8) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [hasPrefixedFields, formName, formfields, onBeforeSubmit, onSubmit, updateFormDataOutput, notifyDataOutput, executeFormSubmit]);
+  var submit = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(e) {
+      var valid, data;
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            e === null || e === void 0 || e.preventDefault();
+            e === null || e === void 0 || e.stopPropagation();
+            _context4.next = 4;
+            return validateFieldsOnSubmit();
+          case 4:
+            valid = _context4.sent;
+            if (valid) {
+              _context4.next = 7;
+              break;
+            }
+            return _context4.abrupt("return");
+          case 7:
+            data = getValues();
+            handleFormSubmit(data, new Event("submit"));
+            return _context4.abrupt("return", true);
+          case 10:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function (_x9) {
+      return _ref5.apply(this, arguments);
+    };
+  }(), [validateFieldsOnSubmit, getValues, handleFormSubmit]);
+  var deleteEntry = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(e) {
+      var isValid, 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();
+            _context5.next = 4;
+            return validateFieldsOnSubmit();
+          case 4:
+            isValid = _context5.sent;
+            if (isValid) {
+              data = getValues();
+              handleFormSubmit(data, new Event("submit"), "delete");
+            }
+          case 6:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }));
+    return function (_x0) {
+      return _ref6.apply(this, arguments);
+    };
+  }(), [validateFieldsOnSubmit, getValues, handleFormSubmit]);
+  return {
+    submit: submit,
+    deleteEntry: deleteEntry,
+    handleFormSubmit: handleFormSubmit
+  };
+}

package/components/data/form/base-form/hooks/useFormValidation.d.ts

@@ -0,0 +1,11 @@
+import { UseFormValidationOptions, UseFormValidationReturn } from "../props";
+/**
+ * Hook for managing form validation and validation messages
+ *
+ * Handles:
+ * - Building validation message objects for fields with errors
+ * - Exposing validation messages on widget object and formRef
+ * - Validating fields on submit (including child forms)
+ * - Focusing on first invalid field
+ */
+export declare function useFormValidation({ formRef, formfields, formReff, control, trigger, errors, formName, listener, }: UseFormValidationOptions): UseFormValidationReturn;

package/components/data/form/base-form/hooks/useFormValidation.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormValidation = useFormValidation;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+var _formUtils = require("../../../../../utils/form-utils");
+var _utils = require("../utils");
+/**
+ * Hook for managing form validation and validation messages
+ *
+ * Handles:
+ * - Building validation message objects for fields with errors
+ * - Exposing validation messages on widget object and formRef
+ * - Validating fields on submit (including child forms)
+ * - Focusing on first invalid field
+ */
+function useFormValidation(_ref) {
+  var formRef = _ref.formRef,
+    formfields = _ref.formfields,
+    formReff = _ref.formReff,
+    control = _ref.control,
+    trigger = _ref.trigger,
+    errors = _ref.errors,
+    formName = _ref.formName,
+    listener = _ref.listener;
+  var validationMessagesRef = (0, _react.useRef)([]);
+
+  /**
+   * Creates a validation message object for a field with errors
+   */
+  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(".")) || formName || "",
+      fullyQualifiedFormName: prefix
+    });
+  }, [formRef, formName]);
+
+  /**
+   * Exposes validationMessages on widget object and formRef for external access
+   */
+  var exposeValidationMessages = (0, _react.useCallback)(function (validationMessages) {
+    (0, _utils.setWidgetValidationMessages)(listener, formName, validationMessages);
+    if (formRef.current) {
+      formRef.current.validationMessages = validationMessages;
+    }
+  }, [formRef, formName]);
+
+  /**
+   * Gets the form fields to validate and their keys
+   */
+  var getFormFieldsForValidation = (0, _react.useCallback)(function () {
+    var widgetFormFields = (0, _utils.getWidgetFormFields)(listener, formName);
+    var formFieldsToValidate = widgetFormFields || formfields;
+    var allFieldKeys = Object.keys(formFieldsToValidate);
+    var prefix = formName || "";
+    return {
+      formFieldsToValidate: formFieldsToValidate,
+      allFieldKeys: allFieldKeys,
+      prefix: prefix
+    };
+  }, [formName, formfields]);
+
+  /**
+   * Core validation messages builder that accepts a getFieldError function
+   */
+  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
+   */
+  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]);
+
+  /**
+   * Validates all fields on submit, including child forms
+   * Returns true if all forms are valid
+   */
+  var validateFieldsOnSubmit = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var childFormsValid, childForms, validationResults, currentFormValidState, validationMessages, _listener$onChange;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          // Validate all registered child forms FIRST
+          // This ensures child form validators run even if parent has errors
+          childFormsValid = true;
+          childForms = formReff.current ? Object.values(formReff.current) : [];
+          if (!childForms.length) {
+            _context.next = 7;
+            break;
+          }
+          _context.next = 5;
+          return Promise.all(childForms.map(function (childForm) {
+            var _childForm$validateFi, _childForm$validateFi2;
+            return (_childForm$validateFi = childForm === null || childForm === void 0 || (_childForm$validateFi2 = childForm.validateFieldsOnSubmit) === null || _childForm$validateFi2 === void 0 ? void 0 : _childForm$validateFi2.call(childForm)) !== null && _childForm$validateFi !== void 0 ? _childForm$validateFi : Promise.resolve(true);
+          }));
+        case 5:
+          validationResults = _context.sent;
+          childFormsValid = validationResults.every(Boolean);
+        case 7:
+          _context.next = 9;
+          return trigger();
+        case 9:
+          currentFormValidState = _context.sent;
+          // Build and expose validation messages AFTER trigger
+          validationMessages = buildValidationMessages();
+          exposeValidationMessages(validationMessages);
+
+          // If either current form or child forms have errors, focus and return false
+          if (!(!childFormsValid || !currentFormValidState)) {
+            _context.next = 16;
+            break;
+          }
+          if (!currentFormValidState) {
+            listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, formName, {
+              valid: false,
+              errors: errors
+            });
+          }
+          (0, _utils.focusOnFirstInvalidField)(formRef.current, Object.keys(errors));
+          return _context.abrupt("return", false);
+        case 16:
+          return _context.abrupt("return", true);
+        case 17:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [trigger, buildValidationMessages, exposeValidationMessages, formName, errors, formRef, formReff]);
+  return {
+    validationMessagesRef: validationMessagesRef,
+    validateFieldsOnSubmit: validateFieldsOnSubmit,
+    buildValidationMessages: buildValidationMessages,
+    exposeValidationMessages: exposeValidationMessages
+  };
+}

package/components/data/form/base-form/hooks/useParentFormRelationship.d.ts

@@ -0,0 +1,12 @@
+import { UseParentFormRelationshipOptions, UseParentFormRelationshipReturn } from "../props";
+/**
+ * Hook for detecting and managing parent-child form relationships
+ *
+ * Supports all nesting scenarios:
+ * - STANDALONE: Basic form (no parent)
+ * - DIRECT_CHILD: Form -> Form (direct nesting)
+ * - LIST_CHILD: Form -> List -> Form (array indexing)
+ * - PREFAB_CHILD: Form -> Prefab -> Form (context bridging)
+ * - LIST_PREFAB_CHILD: Form -> List -> Prefab -> Form
+ */
+export declare function useParentFormRelationship({ name, parentForm: propsParentForm, isParentList: isParentListRaw, parentListName, childdatasetnode, formArrayIndex: propsFormArrayIndex, }: UseParentFormRelationshipOptions): UseParentFormRelationshipReturn;

package/components/data/form/base-form/hooks/useParentFormRelationship.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useParentFormRelationship = useParentFormRelationship;
+var _react = require("react");
+var _PrefabContext = require("../../../../../context/PrefabContext");
+var _formContext = require("../../form-context");
+var _props = require("../props");
+/**
+ * Hook for detecting and managing parent-child form relationships
+ *
+ * Supports all nesting scenarios:
+ * - STANDALONE: Basic form (no parent)
+ * - DIRECT_CHILD: Form -> Form (direct nesting)
+ * - LIST_CHILD: Form -> List -> Form (array indexing)
+ * - PREFAB_CHILD: Form -> Prefab -> Form (context bridging)
+ * - LIST_PREFAB_CHILD: Form -> List -> Prefab -> Form
+ */
+function useParentFormRelationship(_ref) {
+  var _prefabContext$formAr;
+  var name = _ref.name,
+    propsParentForm = _ref.parentForm,
+    isParentListRaw = _ref.isParentList,
+    parentListName = _ref.parentListName,
+    childdatasetnode = _ref.childdatasetnode,
+    propsFormArrayIndex = _ref.formArrayIndex;
+  var prefabContext = (0, _react.useContext)(_PrefabContext.PrefabContext);
+  var parentFormDataContext = (0, _formContext.useParentFormData)();
+
+  // Parent form can come from props OR PrefabContext
+  var parentForm = propsParentForm || (prefabContext === null || prefabContext === void 0 ? void 0 : prefabContext.parentForm);
+
+  // isParentList can be boolean OR string "true" from JSX
+  var isParentList = isParentListRaw === true || isParentListRaw === "true";
+  var formArrayIndex = propsFormArrayIndex !== undefined ? propsFormArrayIndex : (_prefabContext$formAr = prefabContext === null || prefabContext === void 0 ? void 0 : prefabContext.formArrayIndex) !== null && _prefabContext$formAr !== void 0 ? _prefabContext$formAr : -1;
+
+  // Get parent form's data from context (instance-specific, not shared widget proxy)
+  var parentFormData = parentForm ? parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.formdata : undefined;
+
+  // Track the ROOT parent form - all nested forms should emit data to the root
+  var rootParentForm = (parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.rootParentForm) || parentForm;
+
+  // Determine the correct data key for child forms
+  var effectiveChildDatasetNode = (0, _react.useMemo)(function () {
+    if (!parentForm) return undefined;
+
+    // If this form is inside a list, use parentListName (the array field name)
+    if (isParentList && parentListName) {
+      return parentListName;
+    }
+
+    // Fall back to childdatasetnode or name
+    return childdatasetnode || name;
+  }, [parentForm, isParentList, parentListName, childdatasetnode, name]);
+
+  // Has explicit parent form relationship via props
+  var hasDirectChildRelationship = !!(propsParentForm || childdatasetnode);
+
+  // Has context-based relationship (form inside prefab)
+  var hasPrefabContext = !!(parentFormDataContext !== null && parentFormDataContext !== void 0 && parentFormDataContext.onChildDataChange && parentFormDataContext !== null && parentFormDataContext !== void 0 && parentFormDataContext.parentDataPath && !propsParentForm && !childdatasetnode);
+
+  // Detect form type using the centralized detection logic
+  var formType = (0, _react.useMemo)(function () {
+    return (0, _props.detectFormType)({
+      hasParentFormProp: !!parentForm && hasDirectChildRelationship,
+      hasChildDatasetNode: !!childdatasetnode,
+      hasPrefabContext: hasPrefabContext,
+      isInList: isParentList
+    });
+  }, [parentForm, hasDirectChildRelationship, childdatasetnode, hasPrefabContext, isParentList]);
+
+  // Get the configuration for this form type
+  var formTypeConfig = (0, _react.useMemo)(function () {
+    return (0, _props.getFormTypeConfig)(formType);
+  }, [formType]);
+
+  // Build the FULL data path for deeply nested forms
+  var fullDataPath = (0, _react.useMemo)(function () {
+    // For prefab forms: parentDataPath is already set by BasePrefab
+    if (formType === _props.FormType.PREFAB_CHILD || formType === _props.FormType.LIST_PREFAB_CHILD) {
+      var basePath = parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.parentDataPath;
+      // For LIST_PREFAB_CHILD (form inside list inside prefab), append the array index
+      // Guard against undefined basePath to prevent "undefined[0]" strings
+      if (formType === _props.FormType.LIST_PREFAB_CHILD && isParentList && formArrayIndex >= 0 && basePath) {
+        return "".concat(basePath, "[").concat(formArrayIndex, "]");
+      }
+      return basePath;
+    }
+
+    // Regular child forms need parentForm prop
+    if (!parentForm) return undefined;
+
+    // Get parent's data path prefix from context
+    var parentDataPathPrefix = (parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.parentDataPath) || "";
+    var currentPath = "";
+    if (isParentList && parentListName) {
+      // For list forms, include the array index
+      currentPath = formArrayIndex >= 0 ? "".concat(parentListName, "[").concat(formArrayIndex, "]") : parentListName;
+    } else {
+      // For regular child forms, use childdatasetnode
+      currentPath = childdatasetnode || name;
+    }
+
+    // Combine parent path with current path
+    if (parentDataPathPrefix) {
+      return "".concat(parentDataPathPrefix, ".").concat(currentPath);
+    }
+    return currentPath;
+  }, [parentForm, formType, isParentList, parentListName, childdatasetnode, name, parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.parentDataPath, formArrayIndex]);
+  return {
+    // Form type (new)
+    formType: formType,
+    formTypeConfig: formTypeConfig,
+    // Legacy compatibility (can be derived from formType)
+    parentForm: parentForm,
+    isParentList: isParentList,
+    formArrayIndex: formArrayIndex,
+    effectiveChildDatasetNode: effectiveChildDatasetNode,
+    fullDataPath: fullDataPath,
+    hasDirectChildRelationship: hasDirectChildRelationship,
+    rootParentForm: rootParentForm,
+    parentFormData: parentFormData,
+    parentFormDataContext: parentFormDataContext
+  };
+}

package/components/data/form/base-form/index.d.ts

@@ -0,0 +1,3 @@
+import BaseFormProps from "./props";
+declare const BaseForm: (WrappedComponent: React.ComponentType<any>) => (FormProps: BaseFormProps) => import("react/jsx-runtime").JSX.Element;
+export default BaseForm;