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

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

@@ -0,0 +1,802 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _reactHookForm = require("react-hook-form");
+var _get = _interopRequireDefault(require("lodash-es/get"));
+var _lodashEs = require("lodash-es");
+var _props = require("./props");
+var _formContext = require("../form-context");
+var _utils = require("../../table/utils");
+var _listHelpers = require("../../list/utils/list-helpers");
+var _utils2 = require("./utils");
+var _hooks = require("./hooks");
+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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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 DEFAULT_CLASS = "panel app-panel app-form";
+var BaseForm = function BaseForm(WrappedComponent) {
+  var ControlledForm = function ControlledForm(FormProps) {
+    var _listener$Widgets;
+    var props = _objectSpread(_objectSpread({}, _props.defaultProps), FormProps);
+    var formName = props.name,
+      initialExpanded = props.expanded,
+      isInsideWizard = props.isInsideWizard,
+      formdata = props.formdata,
+      listener = props.listener,
+      className = props.className,
+      collapsible = props.collapsible,
+      captionwidth = props.captionwidth,
+      captionposition = props.captionposition,
+      itemsperrow = props.itemsperrow,
+      messagelayout = props.messagelayout,
+      errormessage = props.errormessage,
+      _props$standalone = props.standalone,
+      standalone = _props$standalone === void 0 ? false : _props$standalone;
+
+    // ========== REFS ==========
+    var parentFormRef = (0, _formContext.useFormRef)();
+    var formReff = (0, _react.useRef)(null);
+    var formRef = (0, _react.useRef)(null);
+    var messageRef = (0, _react.useRef)(null);
+    var formIdRef = (0, _react.useRef)(Math.random().toString(36).substring(2, 15));
+    var formfieldsRef = (0, _react.useRef)({});
+    var formDataref = (0, _react.useRef)(null);
+    var lastEmittedValuesSerialized = (0, _react.useRef)("");
+    var lastUpdateOriginRef = (0, _react.useRef)("external");
+
+    // ========== STATE ==========
+    var _useState = (0, _react.useState)(initialExpanded),
+      expanded = _useState[0],
+      setExpanded = _useState[1];
+    var _useState2 = (0, _react.useState)(),
+      childFormData = _useState2[0],
+      setChildFormData = _useState2[1];
+    var _useState3 = (0, _react.useState)({}),
+      formfields = _useState3[0],
+      setFormfields = _useState3[1];
+    var _useState4 = (0, _react.useState)({}),
+      headerActions = _useState4[0],
+      setHeaderActions = _useState4[1];
+    var _useState5 = (0, _react.useState)(false),
+      showmessage = _useState5[0],
+      setShowMessage = _useState5[1];
+    var _useState6 = (0, _react.useState)({
+        caption: "",
+        type: ""
+      }),
+      statusMessage = _useState6[0],
+      setStatusMessage = _useState6[1];
+
+    // ========== REACT HOOK FORM ==========
+    var _useForm = (0, _reactHookForm.useForm)({
+        defaultValues: formdata,
+        mode: "onTouched",
+        reValidateMode: "onBlur"
+      }),
+      control = _useForm.control,
+      handleSubmit = _useForm.handleSubmit,
+      _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,
+      setValue = _useForm.setValue;
+
+    // ========== COMPLEX HOOKS ==========
+
+    // Parent-child form relationship detection
+    var _useParentFormRelatio = (0, _hooks.useParentFormRelationship)({
+        name: formName || "",
+        parentForm: props.parentForm,
+        isParentList: props.isParentList,
+        parentListName: props.parentListName,
+        childdatasetnode: props.childdatasetnode,
+        formArrayIndex: props.formArrayIndex
+      }),
+      formType = _useParentFormRelatio.formType,
+      formArrayIndex = _useParentFormRelatio.formArrayIndex,
+      effectiveChildDatasetNode = _useParentFormRelatio.effectiveChildDatasetNode,
+      fullDataPath = _useParentFormRelatio.fullDataPath,
+      rootParentForm = _useParentFormRelatio.rootParentForm,
+      parentFormData = _useParentFormRelatio.parentFormData,
+      parentFormDataContext = _useParentFormRelatio.parentFormDataContext;
+
+    // Derived flags from formType for clearer code
+    var isChildForm = (0, _hooks.isChildFormType)(formType);
+    var hasPrefixedFields = (0, _hooks.usesPrefixedFields)(formType);
+
+    // Form data sync manager
+    var _useFormDataSync = (0, _hooks.useFormDataSync)({
+        reset: reset,
+        formType: formType,
+        formName: formName
+      }),
+      currentFormData = _useFormDataSync.currentFormData,
+      syncFormData = _useFormDataSync.syncFormData,
+      resetFormData = _useFormDataSync.resetFormData,
+      clearFormData = _useFormDataSync.clearFormData,
+      markCurrentData = _useFormDataSync.markCurrentData,
+      isUpdating = _useFormDataSync.isUpdating;
+
+    // ========== MEMOIZED VALUES ==========
+
+    // Layout classes (inlined from useFormLayout)
+    var _useMemo = (0, _react.useMemo)(function () {
+        return (0, _utils2.getFieldLayoutConfig)(captionwidth, captionposition, "os");
+      }, [captionwidth, captionposition]),
+      captionCls = _useMemo.captionCls,
+      widgetCls = _useMemo.widgetCls;
+    var itemsPerRow = (0, _react.useMemo)(function () {
+      if (itemsperrow == null || String(itemsperrow).trim() === "") {
+        // Match Angular when the prop was never set: no setListClass → often no derived class.
+        return undefined;
+      }
+      return (0, _listHelpers.getItemsPerRowClass)(String(itemsperrow));
+    }, [itemsperrow]);
+    var listenerWidgetFormdata = formName ? 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.formdata : undefined;
+
+    // Widget form data
+    var widgetFormData = (0, _react.useMemo)(function () {
+      if (!formName) return formdata;
+      var widgetData = (0, _utils2.getWidgetFormData)(listener, formName);
+      var proxyFormdata = widgetData === null || widgetData === void 0 ? void 0 : widgetData.formdata;
+      return proxyFormdata && Object.keys(proxyFormdata).length > 0 ? proxyFormdata : formdata;
+    }, [formName, formdata, listenerWidgetFormdata]);
+
+    // Form class name
+    var formClassName = (0, _react.useMemo)(function () {
+      return isInsideWizard ? (0, _clsx["default"])(className) : (0, _clsx["default"])(DEFAULT_CLASS, className);
+    }, [isInsideWizard, className]);
+
+    // Compute fields for onDataSourceChange
+    var fields = (0, _react.useMemo)(function () {
+      var newFields = [];
+      if (!formName) return newFields;
+      var Widgets = (0, _utils2.getWidgetFormFields)(listener, formName) || {};
+      Object.keys(Widgets).forEach(function (key) {
+        if (!key.includes("formWidget") && Widgets[key]) {
+          newFields.push(Widgets[key]);
+        }
+      });
+      return newFields;
+    }, [formName]);
+
+    // ========== CALLBACKS ==========
+
+    // Field registry callbacks (inlined from useFormFieldRegistry)
+    var registerHeaderAction = (0, _react.useCallback)(function (actionName, action) {
+      if (!action || !actionName) return;
+      setHeaderActions(function (prev) {
+        if (!prev[actionName]) {
+          return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, actionName, action));
+        }
+        return prev;
+      });
+    }, []);
+    var onChangeHandler = (0, _react.useCallback)(function (fieldName, value) {
+      if (!fieldName || value === undefined) return;
+      setFormfields(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, fieldName, _objectSpread(_objectSpread({}, prev[fieldName]), {}, {
+          value: value,
+          datavalue: value
+        })));
+      });
+    }, []);
+
+    // Message callbacks (inlined from useFormMessage)
+    var checkAppServiceErrorMsg = (0, _react.useCallback)(function (type) {
+      var notificationAction = (0, _get["default"])(listener, "Actions.appNotification");
+      if (notificationAction && type === "error") {
+        var _notificationAction$g;
+        return notificationAction === null || notificationAction === void 0 || (_notificationAction$g = notificationAction.getMessage) === null || _notificationAction$g === void 0 ? void 0 : _notificationAction$g.call(notificationAction);
+      }
+      return undefined;
+    }, []);
+    var clearMessage = (0, _react.useCallback)(function () {
+      setStatusMessage({
+        caption: "",
+        type: ""
+      });
+      setShowMessage(false);
+    }, []);
+    var toggleMessage = (0, _react.useCallback)(function (state, msg, type) {
+      var template = msg;
+      if (state && msg) {
+        if (type === "error" && errormessage && errormessage.length > 0) {
+          template = errormessage;
+        }
+        if (messagelayout === "Inline") {
+          var _messageRef$current;
+          template = checkAppServiceErrorMsg(type) || template;
+          setStatusMessage({
+            caption: template || "",
+            type: type
+          });
+          setShowMessage(true);
+          if ((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.showMessage) {
+            messageRef.current.showMessage(template, type);
+          }
+          var formEl = formRef.current;
+          if (formEl && !(0, _utils2.isElementInViewport)(formEl)) {
+            (0, _utils2.scrollToElement)(formEl);
+          }
+        } else {
+          var _listener$App, _listener$App$notifyA;
+          listener === null || listener === void 0 || (_listener$App = listener.App) === null || _listener$App === void 0 || (_listener$App$notifyA = _listener$App.notifyApp) === null || _listener$App$notifyA === void 0 || _listener$App$notifyA.call(_listener$App, template || "", type || "", true);
+        }
+      } else {
+        setStatusMessage({
+          caption: "",
+          type: ""
+        });
+        setShowMessage(false);
+      }
+      if (formRef.current) {
+        (0, _utils2.scrollToElement)(formRef.current);
+      }
+    }, [messagelayout, errormessage, checkAppServiceErrorMsg]);
+
+    // Child form callbacks (inlined from useChildFormCallbacks)
+    var handleChildDataChange = (0, _react.useCallback)(function (fullDataPath, formData) {
+      if (!fullDataPath || !formData) return;
+      var currentValues = getValues();
+      var pathParts = fullDataPath.replace(/\[(\d+)\]/g, ".$1").split(".");
+      var existingData = currentValues;
+      var _iterator = _createForOfIteratorHelper(pathParts),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var part = _step.value;
+          if (existingData && (0, _typeof2["default"])(existingData) === "object") {
+            existingData = existingData[part];
+          } else {
+            existingData = undefined;
+            break;
+          }
+        }
+
+        // When merging, filter out arrays from existingData that aren't in formData
+        // This prevents nested arrays (managed by sibling forms) from being merged back in
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var mergedData;
+      if (existingData && (0, _typeof2["default"])(existingData) === "object" && !Array.isArray(existingData)) {
+        // Filter existingData to exclude arrays not present in formData
+        var filteredExisting = {};
+        Object.keys(existingData).forEach(function (key) {
+          var value = existingData[key];
+          // Keep non-array values, or arrays that are also in formData
+          if (!Array.isArray(value) || key in formData) {
+            filteredExisting[key] = value;
+          }
+        });
+        mergedData = _objectSpread(_objectSpread({}, filteredExisting), formData);
+      } else {
+        mergedData = formData;
+      }
+      setValue(fullDataPath, mergedData, {
+        shouldValidate: false,
+        shouldDirty: true
+      });
+      var currentData = getValues();
+      markCurrentData(currentData);
+      lastUpdateOriginRef.current = "child";
+
+      // Sync to widget proxy (synchronous, same as stage branch)
+      (0, _utils2.setWidgetFormData)(listener, formName, currentData);
+    }, [setValue, getValues, markCurrentData, formName]);
+    var handleRegisterChildField = (0, _react.useCallback)(function (data) {
+      var childFormName = data.childFormName,
+        widget = data.widget,
+        formKey = data.formKey,
+        fieldName = data.fieldName;
+      if (childFormName && widget && formKey && fieldName) {
+        (0, _utils2.registerChildFieldInWidget)(listener, formName, {
+          widget: widget,
+          formKey: formKey,
+          fieldName: fieldName
+        });
+      }
+    }, [formName]);
+
+    // Notify data output helper
+    var notifyDataOutput = (0, _react.useCallback)(function (data) {
+      var cleanedData = (0, _utils.cleanRowData)(data);
+      if (formName) {
+        var _listener$onChange;
+        listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, formName, {
+          dataoutput: cleanedData
+        });
+      }
+    }, [formName]);
+
+    // updateFormData - defined here (not in hook) to ensure stable ref access
+    // This is called by table's inline edit to sync data to parent form
+    var updateFormData = (0, _react.useCallback)(function (data) {
+      if (typeof data === "function") {
+        formDataref.current = data(formDataref.current || {});
+      } else {
+        formDataref.current = _objectSpread(_objectSpread({}, formDataref.current || {}), data);
+      }
+    }, []);
+
+    // ========== COMPLEX HOOKS (continued) ==========
+
+    // Validation
+    var _useFormValidation = (0, _hooks.useFormValidation)({
+        formRef: formRef,
+        formfields: formfields,
+        formReff: formReff,
+        control: control,
+        trigger: trigger,
+        errors: errors,
+        formName: formName || "",
+        listener: listener
+      }),
+      validationMessagesRef = _useFormValidation.validationMessagesRef,
+      validateFieldsOnSubmit = _useFormValidation.validateFieldsOnSubmit;
+
+    // Submission
+    var _useFormSubmission = (0, _hooks.useFormSubmission)({
+        formName: formName || "",
+        formfields: formfields,
+        formDataref: formDataref,
+        getValues: getValues,
+        formType: formType,
+        validateFieldsOnSubmit: validateFieldsOnSubmit,
+        resetFormData: resetFormData,
+        toggleMessage: toggleMessage,
+        setShowViewMode: function setShowViewMode(val) {
+          return _setShowViewMode(val);
+        },
+        listener: listener,
+        datasource: props.datasource,
+        formSubmit: props.formSubmit,
+        widgettype: props.widgettype,
+        onBeforeSubmit: props.onBeforeSubmit,
+        onSubmit: props.onSubmit,
+        onResult: props.onResult,
+        onSuccess: props.onSuccess,
+        onError: props.onError,
+        insertmessage: props.insertmessage,
+        updatemessage: props.updatemessage,
+        deletemessage: props.deletemessage,
+        postmessage: props.postmessage,
+        errormessage: errormessage,
+        messagelayout: messagelayout,
+        standalone: standalone || false
+      }),
+      submit = _useFormSubmission.submit,
+      deleteEntry = _useFormSubmission.deleteEntry;
+
+    // Live filter (inlined from useLiveFilter)
+    var livefilterFn = props.Livefilter || function () {};
+    var filter = (0, _react.useMemo)(function () {
+      return handleSubmit(function (data, e) {
+        e === null || e === void 0 || e.preventDefault();
+        e === null || e === void 0 || e.stopPropagation();
+        var transformedData = (0, _utils2.transformRangeFilterData)(data);
+        return livefilterFn(transformedData, false, formfieldsRef.current);
+      });
+    }, [handleSubmit, livefilterFn]);
+    var clearFilter = (0, _react.useMemo)(function () {
+      return handleSubmit(function (data, e) {
+        e === null || e === void 0 || e.preventDefault();
+        e === null || e === void 0 || e.stopPropagation();
+        formresetFn();
+        var transformedData = (0, _utils2.transformRangeFilterData)(data);
+        livefilterFn(transformedData, true, formfieldsRef.current);
+      });
+    }, [handleSubmit, livefilterFn]);
+    var debouncedFilter = (0, _react.useCallback)(function () {
+      var debouncedFn = (0, _lodashEs.debounce)(filter, 250);
+      debouncedFn();
+    }, [filter]);
+
+    // Form operations
+    var _useFormOperations = (0, _hooks.useFormOperations)({
+        formName: formName || "",
+        formfields: formfields,
+        formRef: formRef,
+        formReff: formReff,
+        formType: formType,
+        fullDataPath: fullDataPath,
+        parentFormDataContext: parentFormDataContext,
+        clearFormData: clearFormData,
+        resetFormData: resetFormData,
+        trigger: trigger,
+        submit: submit,
+        listener: listener,
+        widgetFormType: props["form-type"],
+        debouncedFilter: debouncedFilter
+      }),
+      formresetFn = _useFormOperations.formreset,
+      create = _useFormOperations.create,
+      edit = _useFormOperations.edit,
+      setFormData = _useFormOperations.setFormData,
+      saveAndNew = _useFormOperations.saveAndNew,
+      saveAndView = _useFormOperations.saveAndView,
+      showViewMode = _useFormOperations.showViewMode,
+      _setShowViewMode = _useFormOperations.setShowViewMode;
+
+    // ========== MORE CALLBACKS ==========
+
+    var expandCollapsePanel = (0, _react.useCallback)(function () {
+      if (collapsible) {
+        setExpanded(!expanded);
+      }
+    }, [collapsible, expanded]);
+    var handleCancel = (0, _react.useCallback)(function () {
+      if (typeof props.cancel === "function") {
+        props.cancel();
+        return;
+      }
+      _setShowViewMode(true);
+    }, [_setShowViewMode, props]);
+    var getFieldValue = (0, _react.useCallback)(function (fieldName) {
+      return watch(fieldName);
+    }, [watch]);
+    var highlightInvalidFields = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return validateFieldsOnSubmit();
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })), [validateFieldsOnSubmit]);
+
+    // ========== EFFECTS ==========
+
+    // Keep formfieldsRef in sync
+    (0, _react.useEffect)(function () {
+      formfieldsRef.current = formfields;
+    }, [formfields]);
+
+    // Update valid state
+    (0, _react.useEffect)(function () {
+      if (listener !== null && listener !== void 0 && listener.onChange && formName) {
+        listener.onChange(formName, {
+          valid: isValid
+        });
+      }
+    }, [isValid, formName]);
+
+    // Extract child form data from parent
+    (0, _react.useEffect)(function () {
+      if (parentFormData && effectiveChildDatasetNode) {
+        var dataAtNode = (0, _get["default"])(parentFormData, effectiveChildDatasetNode);
+        var isArrayData = Array.isArray(dataAtNode);
+        var childData;
+        if (isArrayData && formArrayIndex >= 0) {
+          childData = formArrayIndex < dataAtNode.length ? dataAtNode[formArrayIndex] : {};
+        } else {
+          childData = dataAtNode !== null && dataAtNode !== void 0 ? dataAtNode : {};
+        }
+        setChildFormData(childData);
+      }
+    }, [parentFormData, effectiveChildDatasetNode, formArrayIndex]);
+
+    // Sync form when external data source changes
+    // Data source selection based on formType config
+    (0, _react.useEffect)(function () {
+      // Skip sync if the data change originated from a child (would be circular)
+      if (isChildForm && (parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.lastUpdateOrigin) === "child") {
+        return;
+      }
+      var dataSource;
+
+      // Use formTypeConfig.dataSourcePriority to determine data source
+      if (formType === _hooks.FormType.DIRECT_CHILD || formType === _hooks.FormType.LIST_CHILD) {
+        // Props-based child forms: use extracted child data
+        dataSource = childFormData;
+      } else if (formType === _hooks.FormType.PREFAB_CHILD || formType === _hooks.FormType.LIST_PREFAB_CHILD) {
+        // Prefab forms: use context-provided form data
+        var contextFormData = parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.formdata;
+        // For LIST_PREFAB_CHILD, the context formdata might be an array - extract the item at formArrayIndex
+        if (formType === _hooks.FormType.LIST_PREFAB_CHILD && Array.isArray(contextFormData) && formArrayIndex >= 0 && formArrayIndex < contextFormData.length) {
+          var _contextFormData$form;
+          // Safely extract the item at formArrayIndex, with fallback to undefined
+          dataSource = (_contextFormData$form = contextFormData[formArrayIndex]) !== null && _contextFormData$form !== void 0 ? _contextFormData$form : undefined;
+        } else {
+          dataSource = contextFormData;
+        }
+      } else {
+        // Standalone forms: use widget data or props
+        // Also check parentFormDataContext.formdata for forms inside parent forms
+        // (e.g., wizard step forms inside a parent form)
+        dataSource = widgetFormData || formdata || (parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.formdata);
+      }
+      if (dataSource && (0, _typeof2["default"])(dataSource) === "object" && !Array.isArray(dataSource)) {
+        syncFormData(dataSource);
+        lastUpdateOriginRef.current = "external";
+        if (props["form-type"] === "live-filter" && Object.keys(dataSource).length > 0) {
+          debouncedFilter();
+        }
+      }
+    }, [formType, isChildForm, childFormData, widgetFormData, formdata, formArrayIndex, parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.formdata, parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.lastUpdateOrigin, syncFormData, debouncedFilter]);
+
+    // Cleanup on unmount
+    (0, _react.useEffect)(function () {
+      return function () {
+        var _props$destroy;
+        if (!formName) return;
+        props === null || props === void 0 || (_props$destroy = props.destroy) === null || _props$destroy === void 0 || _props$destroy.call(props, formName);
+        formresetFn();
+      };
+    }, []);
+
+    // Prefab field registration
+    (0, _react.useEffect)(function () {
+      var registerFn = parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.registerChildField;
+      if (!registerFn || !formName) return;
+      var widgetFormFields = (0, _utils2.getWidgetFormFields)(listener, formName);
+      var formFieldsToRegister = widgetFormFields || formfields;
+      Object.entries(formFieldsToRegister).forEach(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+          key = _ref3[0],
+          widget = _ref3[1];
+        if (key.includes("formWidget")) return;
+        var typedWidget = widget;
+        var formKey = (typedWidget === null || typedWidget === void 0 ? void 0 : typedWidget.formKey) || (typedWidget === null || typedWidget === void 0 ? void 0 : typedWidget.fieldName) || key;
+        var fieldName = (typedWidget === null || typedWidget === void 0 ? void 0 : typedWidget.fieldName) || key;
+        registerFn({
+          childFormName: formName,
+          widget: widget,
+          formKey: formKey,
+          fieldName: fieldName
+        });
+      });
+    }, [formfields, formName, parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.registerChildField]);
+
+    // Watch for form changes and emit to parent
+    (0, _react.useEffect)(function () {
+      var el = formRef.current;
+      if (!el) return;
+      var emit = function emit() {
+        el.dispatchEvent(new CustomEvent("wm:form-validity", {
+          bubbles: true,
+          detail: {
+            isValid: isValid
+          }
+        }));
+      };
+      emit();
+      var unsubscribe = watch(function (values) {
+        emit();
+        if (isUpdating()) return;
+        var serialized = JSON.stringify(values);
+        if (serialized !== lastEmittedValuesSerialized.current) {
+          lastEmittedValuesSerialized.current = serialized;
+
+          // Forms with prefixed fields have data wrapped under form name; others don't
+          var normalizedValues = hasPrefixedFields && formName ? values[formName] : values;
+
+          // For any nested child form, filter out nested objects AND arrays
+          // that are managed by their own child forms. This prevents a middle-level
+          // form from overwriting grandchild form data that has already propagated to root.
+          if (isChildForm && normalizedValues && (0, _typeof2["default"])(normalizedValues) === "object" && !Array.isArray(normalizedValues)) {
+            var childFormNames = formReff.current ? Object.keys(formReff.current) : [];
+            if (childFormNames.length > 0) {
+              var filteredValues = {};
+              Object.keys(normalizedValues).forEach(function (key) {
+                var value = normalizedValues[key];
+                // Keep only primitive values and null
+                // Filter out objects AND arrays (arrays contain nested form data)
+                if (value === null || (0, _typeof2["default"])(value) !== "object") {
+                  filteredValues[key] = value;
+                }
+              });
+              normalizedValues = filteredValues;
+            }
+          }
+          markCurrentData(normalizedValues);
+          if (fullDataPath && parentFormDataContext !== null && parentFormDataContext !== void 0 && parentFormDataContext.onChildDataChange) {
+            parentFormDataContext.onChildDataChange(fullDataPath, normalizedValues);
+          }
+          var autoupdate = props.autoupdate;
+          var isAutoupdateEnabled = autoupdate !== false && String(autoupdate).toLowerCase() !== "false" && String(autoupdate).toLowerCase() !== "0";
+          var isAutoUpdateLiveFilter = props["form-type"] === "live-filter" && isAutoupdateEnabled;
+          if (isAutoUpdateLiveFilter) {
+            debouncedFilter === null || debouncedFilter === void 0 || debouncedFilter();
+          }
+          notifyDataOutput(getValues());
+        }
+      });
+      return function () {
+        if (typeof unsubscribe === "function") {
+          unsubscribe();
+        }
+      };
+    }, [watch, isValid, rootParentForm, fullDataPath, formName, formType, hasPrefixedFields, isChildForm, debouncedFilter]);
+    (0, _react.useEffect)(function () {
+      if (props.onDataSourceChange && fields.length > 0) {
+        props.onDataSourceChange(fields);
+      }
+    }, [fields, props.onDataSourceChange]);
+
+    // Form ref exposure (inlined from useFormRef)
+    (0, _react.useEffect)(function () {
+      if (formRef.current) {
+        var formEl = formRef.current;
+        formEl.getFormData = function () {
+          return {
+            values: watch(),
+            isValid: isValid
+          };
+        };
+        formEl.validateForm = function () {
+          return submitCount === 0 ? isValid : trigger();
+        };
+        formEl.clearErrors = function () {
+          return clearErrors();
+        };
+        formEl.getProps = function () {
+          return props;
+        };
+        formEl.formWidgets = formfields;
+        formEl.getValidationMessages = function () {
+          return validationMessagesRef.current;
+        };
+        formEl.validationMessages = validationMessagesRef.current;
+      }
+    }, [watch, trigger, isValid, errors, formfields, clearErrors, props, submitCount]);
+
+    // ========== CHILD FORM REGISTRATION ==========
+    // Register this form with parent using a direct mutation approach instead of useImperativeHandle
+    // This prevents the race condition where multiple forms registering via useImperativeHandle
+    // overwrite each other's registrations
+    (0, _react.useEffect)(function () {
+      if (!parentFormRef) return;
+
+      // Ensure the ref has an object
+      if (!parentFormRef.current) {
+        parentFormRef.current = {};
+      }
+      var formId = formIdRef.current;
+
+      // Register this form
+      parentFormRef.current[formId] = {
+        formreset: formresetFn,
+        validateFieldsOnSubmit: validateFieldsOnSubmit
+      };
+
+      // Cleanup: unregister when unmounting
+      return function () {
+        if (parentFormRef.current && parentFormRef.current[formId]) {
+          delete parentFormRef.current[formId];
+        }
+      };
+    }, [parentFormRef, formresetFn, validateFieldsOnSubmit]);
+
+    // ========== RENDER PROPS ==========
+
+    // Compute formdata outside memo to use in dependency array
+    var computedFormdata = widgetFormData || childFormData || formdata;
+
+    // Memoize the ref object to prevent unnecessary re-renders of FormProvider consumers.
+    // Only recalculates when legitimately changing values change (errors, showViewMode, submitCount, etc.)
+    var ref = (0, _react.useMemo)(function () {
+      return {
+        ref: formReff,
+        updateFormData: updateFormData,
+        control: control,
+        watch: watch,
+        registerHeaderAction: registerHeaderAction,
+        onChangeHandler: onChangeHandler,
+        trigger: trigger,
+        errors: errors,
+        name: formName,
+        captionposition: props.captionposition,
+        captionCls: captionCls,
+        widgetCls: widgetCls,
+        itemsPerRow: itemsPerRow,
+        validationtype: props.validationtype,
+        showViewMode: showViewMode,
+        formdata: computedFormdata,
+        submit: submit,
+        formreset: formresetFn
+      };
+    }, [updateFormData, control, watch, registerHeaderAction, onChangeHandler, trigger, errors, formName, props.captionposition, captionCls, widgetCls, itemsPerRow, props.validationtype, showViewMode, computedFormdata, submit, formresetFn]);
+    var conditionalProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.target && {
+      target: props.target
+    }), props.method && {
+      method: props.method
+    }), props.encType && {
+      encType: props.encType
+    }), props.action && {
+      action: props.action
+    });
+    var formProps = _objectSpread(_objectSpread(_objectSpread({}, props), conditionalProps), {}, {
+      submit: submit,
+      formreset: formresetFn,
+      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,
+      className: formClassName,
+      saveAndNew: saveAndNew,
+      saveAndView: saveAndView,
+      highlightInvalidFields: highlightInvalidFields,
+      formdata: widgetFormData || childFormData || formdata,
+      captionCls: captionCls,
+      widgetCls: widgetCls,
+      itemsPerRow: itemsPerRow
+    });
+
+    // All nested child forms (direct, list, or prefab) should pass through to parent
+    var parentFormDataContextValue = (0, _react.useMemo)(function () {
+      var _ref4;
+      return {
+        formdata: (_ref4 = currentFormData !== null && currentFormData !== void 0 ? currentFormData : widgetFormData) !== null && _ref4 !== void 0 ? _ref4 : formdata,
+        formName: formName || "",
+        rootParentForm: isChildForm ? rootParentForm || "" : formName || "",
+        parentDataPath: isChildForm ? fullDataPath : undefined,
+        lastUpdateOrigin: isChildForm ? parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.lastUpdateOrigin : lastUpdateOriginRef.current,
+        onChildDataChange: isChildForm ? parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.onChildDataChange : handleChildDataChange,
+        registerChildField: isChildForm ? parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.registerChildField : handleRegisterChildField
+      };
+    }, [currentFormData, widgetFormData, formdata, formName, isValid, isChildForm, rootParentForm, fullDataPath, parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.lastUpdateOrigin, parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.onChildDataChange, parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.registerChildField, handleChildDataChange, handleRegisterChildField]);
+    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;
+};
+var _default = exports["default"] = BaseForm;