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

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

@@ -1,616 +1,503 @@
-"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 () {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useEffect, useCallback } from "react";
+import clsx from "clsx";
+import { useForm } from "react-hook-form";
+import get from "lodash-es/get";
+import { debounce } from "lodash-es";
+import { defaultProps } from "./props";
+import {
+  FormProvider,
+  useFormRef as useFormContextRef,
+  ParentFormDataContext
+} from "../form-context";
+import { cleanRowData } from "../../table/utils";
+import { getItemsPerRowClass } from "../../list/utils/list-helpers";
+import {
+  getFieldLayoutConfig,
+  isElementInViewport,
+  scrollToElement,
+  transformRangeFilterData,
+  getWidgetFormData,
+  setWidgetFormData,
+  getWidgetFormFields,
+  registerChildFieldInWidget
+} from "./utils";
+import {
+  useFormDataSync,
+  useParentFormRelationship,
+  useFormValidation,
+  useFormOperations,
+  useFormSubmission,
+  FormType,
+  isChildFormType,
+  usesPrefixedFields
+} from "./hooks";
+const DEFAULT_CLASS = "panel app-panel app-form";
+const BaseForm = (WrappedComponent) => {
+  const ControlledForm = (FormProps) => {
+    var _a, _b;
+    const props = __spreadValues(__spreadValues({}, defaultProps), FormProps);
+    const {
+      name: formName,
+      expanded: initialExpanded,
+      isInsideWizard,
+      formdata,
+      listener,
+      className,
+      collapsible,
+      captionwidth,
+      captionposition,
+      itemsperrow,
+      messagelayout,
+      errormessage,
+      standalone = false
+    } = props;
+    const parentFormRef = useFormContextRef();
+    const formReff = useRef(null);
+    const formRef = useRef(null);
+    const messageRef = useRef(null);
+    const formIdRef = useRef(Math.random().toString(36).substring(2, 15));
+    const formfieldsRef = useRef({});
+    const formDataref = useRef(null);
+    const lastEmittedValuesSerialized = useRef("");
+    const lastUpdateOriginRef = useRef("external");
+    const [expanded, setExpanded] = useState(initialExpanded);
+    const [childFormData, setChildFormData] = useState();
+    const [formfields, setFormfields] = useState({});
+    const [headerActions, setHeaderActions] = useState({});
+    const [showmessage, setShowMessage] = useState(false);
+    const [statusMessage, setStatusMessage] = useState({
+      caption: "",
+      type: ""
+    });
+    const {
+      control,
+      handleSubmit,
+      formState: { errors, isValid, submitCount },
+      reset,
+      watch,
+      trigger,
+      getValues,
+      clearErrors,
+      setValue
+    } = useForm({
+      defaultValues: formdata,
+      mode: "onTouched",
+      reValidateMode: "onBlur"
+    });
+    const {
+      formType,
+      formArrayIndex,
+      effectiveChildDatasetNode,
+      fullDataPath,
+      rootParentForm,
+      parentFormData,
+      parentFormDataContext
+    } = useParentFormRelationship({
+      name: formName || "",
+      parentForm: props.parentForm,
+      isParentList: props.isParentList,
+      parentListName: props.parentListName,
+      childdatasetnode: props.childdatasetnode,
+      formArrayIndex: props.formArrayIndex
+    });
+    const isChildForm = isChildFormType(formType);
+    const hasPrefixedFields = usesPrefixedFields(formType);
+    const {
+      currentFormData,
+      syncFormData,
+      resetFormData,
+      clearFormData,
+      markCurrentData,
+      isUpdating
+    } = useFormDataSync({
+      reset,
+      formType,
+      formName
+    });
+    const { captionCls, widgetCls } = useMemo(
+      () => getFieldLayoutConfig(captionwidth, captionposition, "os"),
+      [captionwidth, captionposition]
+    );
+    const itemsPerRow = useMemo(() => {
       if (itemsperrow == null || String(itemsperrow).trim() === "") {
-        // Match Angular when the prop was never set: no setListClass → often no derived class.
-        return undefined;
+        return void 0;
       }
-      return (0, _listHelpers.getItemsPerRowClass)(String(itemsperrow));
+      return 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 () {
+    const listenerWidgetFormdata = formName ? (_b = (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[formName]) == null ? void 0 : _b.formdata : void 0;
+    const widgetFormData = useMemo(() => {
       if (!formName) return formdata;
-      var widgetData = (0, _utils2.getWidgetFormData)(listener, formName);
-      var proxyFormdata = widgetData === null || widgetData === void 0 ? void 0 : widgetData.formdata;
+      const widgetData = getWidgetFormData(listener, formName);
+      const proxyFormdata = widgetData == null ? 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);
+    const formClassName = useMemo(() => {
+      return isInsideWizard ? clsx(className) : clsx(DEFAULT_CLASS, className);
     }, [isInsideWizard, className]);
-
-    // Compute fields for onDataSourceChange
-    var fields = (0, _react.useMemo)(function () {
-      var newFields = [];
+    const fields = useMemo(() => {
+      const newFields = [];
       if (!formName) return newFields;
-      var Widgets = (0, _utils2.getWidgetFormFields)(listener, formName) || {};
-      Object.keys(Widgets).forEach(function (key) {
+      const Widgets = getWidgetFormFields(listener, formName) || {};
+      Object.keys(Widgets).forEach((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) {
+    const registerHeaderAction = useCallback((actionName, action) => {
       if (!action || !actionName) return;
-      setHeaderActions(function (prev) {
+      setHeaderActions((prev) => {
         if (!prev[actionName]) {
-          return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, actionName, action));
+          return __spreadProps(__spreadValues({}, prev), { [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
-        })));
-      });
+    const onChangeHandler = useCallback((fieldName, value) => {
+      if (!fieldName || value === void 0) return;
+      setFormfields((prev) => __spreadProps(__spreadValues({}, prev), {
+        [fieldName]: __spreadProps(__spreadValues({}, prev[fieldName]), { value, datavalue: value })
+      }));
     }, []);
-
-    // Message callbacks (inlined from useFormMessage)
-    var checkAppServiceErrorMsg = (0, _react.useCallback)(function (type) {
-      var notificationAction = (0, _get["default"])(listener, "Actions.appNotification");
+    const checkAppServiceErrorMsg = useCallback((type) => {
+      var _a2;
+      const notificationAction = get(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 (_a2 = notificationAction == null ? void 0 : notificationAction.getMessage) == null ? void 0 : _a2.call(notificationAction);
       }
-      return undefined;
+      return void 0;
     }, []);
-    var clearMessage = (0, _react.useCallback)(function () {
-      setStatusMessage({
-        caption: "",
-        type: ""
-      });
+    const clearMessage = useCallback(() => {
+      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);
+    const toggleMessage = useCallback(
+      (state, msg, type) => {
+        var _a2, _b2, _c;
+        let template = msg;
+        if (state && msg) {
+          if (type === "error" && errormessage && errormessage.length > 0) {
+            template = errormessage;
           }
-          var formEl = formRef.current;
-          if (formEl && !(0, _utils2.isElementInViewport)(formEl)) {
-            (0, _utils2.scrollToElement)(formEl);
+          if (messagelayout === "Inline") {
+            template = checkAppServiceErrorMsg(type) || template;
+            setStatusMessage({ caption: template || "", type });
+            setShowMessage(true);
+            if ((_a2 = messageRef.current) == null ? void 0 : _a2.showMessage) {
+              messageRef.current.showMessage(template, type);
+            }
+            const formEl = formRef.current;
+            if (formEl && !isElementInViewport(formEl)) {
+              scrollToElement(formEl);
+            }
+          } else {
+            (_c = (_b2 = listener == null ? void 0 : listener.App) == null ? void 0 : _b2.notifyApp) == null ? void 0 : _c.call(_b2, template || "", type || "", true);
           }
         } 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);
+          setStatusMessage({ caption: "", type: "" });
+          setShowMessage(false);
         }
-      } 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") {
+        if (formRef.current) {
+          scrollToElement(formRef.current);
+        }
+      },
+      [messagelayout, errormessage, checkAppServiceErrorMsg]
+    );
+    const handleChildDataChange = useCallback(
+      (fullDataPath2, formData) => {
+        if (!fullDataPath2 || !formData) return;
+        const currentValues = getValues();
+        const pathParts = fullDataPath2.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let existingData = currentValues;
+        for (const part of pathParts) {
+          if (existingData && typeof existingData === "object") {
             existingData = existingData[part];
           } else {
-            existingData = undefined;
+            existingData = void 0;
             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) {
+        let mergedData;
+        if (existingData && typeof existingData === "object" && !Array.isArray(existingData)) {
+          const filteredExisting = {};
+          Object.keys(existingData).forEach((key) => {
+            const value = existingData[key];
+            if (!Array.isArray(value) || key in formData) {
+              filteredExisting[key] = value;
+            }
+          });
+          mergedData = __spreadValues(__spreadValues({}, filteredExisting), formData);
+        } else {
+          mergedData = formData;
+        }
+        setValue(fullDataPath2, mergedData, { shouldValidate: false, shouldDirty: true });
+        const currentData = getValues();
+        markCurrentData(currentData);
+        lastUpdateOriginRef.current = "child";
+        setWidgetFormData(listener, formName, currentData);
+      },
+      [setValue, getValues, markCurrentData, formName]
+    );
+    const handleRegisterChildField = useCallback(
+      (data) => {
+        const { childFormName, widget, formKey, fieldName } = data;
+        if (childFormName && widget && formKey && fieldName) {
+          registerChildFieldInWidget(listener, formName, { widget, formKey, fieldName });
+        }
+      },
+      [formName]
+    );
+    const notifyDataOutput = useCallback(
+      (data) => {
+        var _a2;
+        const cleanedData = cleanRowData(data);
+        if (formName) {
+          (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, formName, { dataoutput: cleanedData });
+        }
+      },
+      [formName]
+    );
+    const updateFormData = useCallback((data) => {
       if (typeof data === "function") {
         formDataref.current = data(formDataref.current || {});
       } else {
-        formDataref.current = _objectSpread(_objectSpread({}, formDataref.current || {}), data);
+        formDataref.current = __spreadValues(__spreadValues({}, 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);
+    const { validationMessagesRef, validateFieldsOnSubmit } = useFormValidation({
+      formRef,
+      formfields,
+      formReff,
+      control,
+      trigger,
+      errors,
+      formName: formName || "",
+      listener
+    });
+    const { submit, deleteEntry } = useFormSubmission({
+      formName: formName || "",
+      formfields,
+      formDataref,
+      getValues,
+      formType,
+      validateFieldsOnSubmit,
+      resetFormData,
+      toggleMessage,
+      setShowViewMode: (val) => setShowViewMode(val),
+      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,
+      messagelayout,
+      standalone: standalone || false
+    });
+    const livefilterFn = props.Livefilter || (() => {
+    });
+    const filter = useMemo(
+      () => handleSubmit((data, e) => {
+        e == null ? void 0 : e.preventDefault();
+        e == null ? void 0 : e.stopPropagation();
+        const transformedData = 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();
+      }),
+      [handleSubmit, livefilterFn]
+    );
+    const clearFilter = useMemo(
+      () => handleSubmit((data, e) => {
+        e == null ? void 0 : e.preventDefault();
+        e == null ? void 0 : e.stopPropagation();
         formresetFn();
-        var transformedData = (0, _utils2.transformRangeFilterData)(data);
+        const transformedData = transformRangeFilterData(data);
         livefilterFn(transformedData, true, formfieldsRef.current);
-      });
-    }, [handleSubmit, livefilterFn]);
-    var debouncedFilter = (0, _react.useCallback)(function () {
-      var debouncedFn = (0, _lodashEs.debounce)(filter, 250);
+      }),
+      [handleSubmit, livefilterFn]
+    );
+    const debouncedFilter = useCallback(() => {
+      const debouncedFn = 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 () {
+    const {
+      formreset: formresetFn,
+      create,
+      edit,
+      setFormData,
+      saveAndNew,
+      saveAndView,
+      showViewMode,
+      setShowViewMode
+    } = useFormOperations({
+      formName: formName || "",
+      formfields,
+      formRef,
+      formReff,
+      formType,
+      fullDataPath,
+      parentFormDataContext,
+      clearFormData,
+      resetFormData,
+      trigger,
+      submit,
+      listener,
+      widgetFormType: props["form-type"],
+      debouncedFilter
+    });
+    const expandCollapsePanel = useCallback(() => {
       if (collapsible) {
         setExpanded(!expanded);
       }
     }, [collapsible, expanded]);
-    var handleCancel = (0, _react.useCallback)(function () {
+    const handleCancel = useCallback(() => {
       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 () {
+      setShowViewMode(true);
+    }, [setShowViewMode, props]);
+    const getFieldValue = useCallback((fieldName) => watch(fieldName), [watch]);
+    const highlightInvalidFields = useCallback(async () => {
+      await validateFieldsOnSubmit();
+    }, [validateFieldsOnSubmit]);
+    useEffect(() => {
       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
-        });
+    useEffect(() => {
+      if ((listener == null ? void 0 : listener.onChange) && formName) {
+        listener.onChange(formName, { valid: isValid });
       }
     }, [isValid, formName]);
-
-    // Extract child form data from parent
-    (0, _react.useEffect)(function () {
+    useEffect(() => {
       if (parentFormData && effectiveChildDatasetNode) {
-        var dataAtNode = (0, _get["default"])(parentFormData, effectiveChildDatasetNode);
-        var isArrayData = Array.isArray(dataAtNode);
-        var childData;
+        const dataAtNode = get(parentFormData, effectiveChildDatasetNode);
+        const isArrayData = Array.isArray(dataAtNode);
+        let childData;
         if (isArrayData && formArrayIndex >= 0) {
           childData = formArrayIndex < dataAtNode.length ? dataAtNode[formArrayIndex] : {};
         } else {
-          childData = dataAtNode !== null && dataAtNode !== void 0 ? dataAtNode : {};
+          childData = dataAtNode != null ? 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") {
+    useEffect(() => {
+      var _a2;
+      if (isChildForm && (parentFormDataContext == null ? 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
+      let dataSource;
+      if (formType === FormType.DIRECT_CHILD || formType === FormType.LIST_CHILD) {
         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 if (formType === FormType.PREFAB_CHILD || formType === FormType.LIST_PREFAB_CHILD) {
+        const contextFormData = parentFormDataContext == null ? void 0 : parentFormDataContext.formdata;
+        if (formType === FormType.LIST_PREFAB_CHILD && Array.isArray(contextFormData) && formArrayIndex >= 0 && formArrayIndex < contextFormData.length) {
+          dataSource = (_a2 = contextFormData[formArrayIndex]) != null ? _a2 : void 0;
         } 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);
+        dataSource = widgetFormData || formdata || (parentFormDataContext == null ? void 0 : parentFormDataContext.formdata);
       }
-      if (dataSource && (0, _typeof2["default"])(dataSource) === "object" && !Array.isArray(dataSource)) {
+      if (dataSource && typeof 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;
+    }, [
+      formType,
+      isChildForm,
+      childFormData,
+      widgetFormData,
+      formdata,
+      formArrayIndex,
+      parentFormDataContext == null ? void 0 : parentFormDataContext.formdata,
+      parentFormDataContext == null ? void 0 : parentFormDataContext.lastUpdateOrigin,
+      syncFormData,
+      debouncedFilter
+    ]);
+    useEffect(() => {
+      return () => {
+        var _a2;
         if (!formName) return;
-        props === null || props === void 0 || (_props$destroy = props.destroy) === null || _props$destroy === void 0 || _props$destroy.call(props, formName);
+        (_a2 = props == null ? void 0 : props.destroy) == null ? void 0 : _a2.call(props, formName);
         formresetFn();
       };
     }, []);
-
-    // Prefab field registration
-    (0, _react.useEffect)(function () {
-      var registerFn = parentFormDataContext === null || parentFormDataContext === void 0 ? void 0 : parentFormDataContext.registerChildField;
+    useEffect(() => {
+      const registerFn = parentFormDataContext == null ? 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];
+      const widgetFormFields = getWidgetFormFields(listener, formName);
+      const formFieldsToRegister = widgetFormFields || formfields;
+      Object.entries(formFieldsToRegister).forEach(([key, widget]) => {
         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;
+        const typedWidget = widget;
+        const formKey = (typedWidget == null ? void 0 : typedWidget.formKey) || (typedWidget == null ? void 0 : typedWidget.fieldName) || key;
+        const fieldName = (typedWidget == null ? void 0 : typedWidget.fieldName) || key;
         registerFn({
           childFormName: formName,
-          widget: widget,
-          formKey: formKey,
-          fieldName: fieldName
+          widget,
+          formKey,
+          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;
+    }, [formfields, formName, parentFormDataContext == null ? void 0 : parentFormDataContext.registerChildField]);
+    useEffect(() => {
+      const el = formRef.current;
       if (!el) return;
-      var emit = function emit() {
-        el.dispatchEvent(new CustomEvent("wm:form-validity", {
-          bubbles: true,
-          detail: {
-            isValid: isValid
-          }
-        }));
+      const emit = () => {
+        el.dispatchEvent(
+          new CustomEvent("wm:form-validity", {
+            bubbles: true,
+            detail: { isValid }
+          })
+        );
       };
       emit();
-      var unsubscribe = watch(function (values) {
+      const unsubscribe = watch((values) => {
         emit();
         if (isUpdating()) return;
-        var serialized = JSON.stringify(values);
+        const 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) : [];
+          let normalizedValues = hasPrefixedFields && formName ? values[formName] : values;
+          if (isChildForm && normalizedValues && typeof normalizedValues === "object" && !Array.isArray(normalizedValues)) {
+            const 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") {
+              const filteredValues = {};
+              Object.keys(normalizedValues).forEach((key) => {
+                const value = normalizedValues[key];
+                if (value === null || typeof value !== "object") {
                   filteredValues[key] = value;
                 }
               });
@@ -618,185 +505,183 @@ var BaseForm = function BaseForm(WrappedComponent) {
             }
           }
           markCurrentData(normalizedValues);
-          if (fullDataPath && parentFormDataContext !== null && parentFormDataContext !== void 0 && parentFormDataContext.onChildDataChange) {
+          if (fullDataPath && (parentFormDataContext == null ? 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;
+          const autoupdate = props.autoupdate;
+          const isAutoupdateEnabled = autoupdate !== false && String(autoupdate).toLowerCase() !== "false" && String(autoupdate).toLowerCase() !== "0";
+          const isAutoUpdateLiveFilter = props["form-type"] === "live-filter" && isAutoupdateEnabled;
           if (isAutoUpdateLiveFilter) {
-            debouncedFilter === null || debouncedFilter === void 0 || debouncedFilter();
+            debouncedFilter == null ? void 0 : debouncedFilter();
           }
           notifyDataOutput(getValues());
         }
       });
-      return function () {
+      return () => {
         if (typeof unsubscribe === "function") {
           unsubscribe();
         }
       };
-    }, [watch, isValid, rootParentForm, fullDataPath, formName, formType, hasPrefixedFields, isChildForm, debouncedFilter]);
-    (0, _react.useEffect)(function () {
+    }, [
+      watch,
+      isValid,
+      rootParentForm,
+      fullDataPath,
+      formName,
+      formType,
+      hasPrefixedFields,
+      isChildForm,
+      debouncedFilter
+    ]);
+    useEffect(() => {
       if (props.onDataSourceChange && fields.length > 0) {
         props.onDataSourceChange(fields);
       }
     }, [fields, props.onDataSourceChange]);
-
-    // Form ref exposure (inlined from useFormRef)
-    (0, _react.useEffect)(function () {
+    useEffect(() => {
       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;
-        };
+        const formEl = formRef.current;
+        formEl.getFormData = () => ({ values: watch(), isValid });
+        formEl.validateForm = () => submitCount === 0 ? isValid : trigger();
+        formEl.clearErrors = () => clearErrors();
+        formEl.getProps = () => props;
         formEl.formWidgets = formfields;
-        formEl.getValidationMessages = function () {
-          return validationMessagesRef.current;
-        };
+        formEl.getValidationMessages = () => 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 () {
+    useEffect(() => {
       if (!parentFormRef) return;
-
-      // Ensure the ref has an object
       if (!parentFormRef.current) {
         parentFormRef.current = {};
       }
-      var formId = formIdRef.current;
-
-      // Register this form
+      const formId = formIdRef.current;
       parentFormRef.current[formId] = {
         formreset: formresetFn,
-        validateFieldsOnSubmit: validateFieldsOnSubmit
+        validateFieldsOnSubmit
       };
-
-      // Cleanup: unregister when unmounting
-      return function () {
+      return () => {
         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 {
+    const computedFormdata = widgetFormData || childFormData || formdata;
+    const ref = useMemo(
+      () => ({
         ref: formReff,
-        updateFormData: updateFormData,
-        control: control,
-        watch: watch,
-        registerHeaderAction: registerHeaderAction,
-        onChangeHandler: onChangeHandler,
-        trigger: trigger,
-        errors: errors,
+        updateFormData,
+        control,
+        watch,
+        registerHeaderAction,
+        onChangeHandler,
+        trigger,
+        errors,
         name: formName,
         captionposition: props.captionposition,
-        captionCls: captionCls,
-        widgetCls: widgetCls,
-        itemsPerRow: itemsPerRow,
+        captionCls,
+        widgetCls,
+        itemsPerRow,
         validationtype: props.validationtype,
-        showViewMode: showViewMode,
+        showViewMode,
         formdata: computedFormdata,
-        submit: 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,
+      }),
+      [
+        updateFormData,
+        control,
+        watch,
+        registerHeaderAction,
+        onChangeHandler,
+        trigger,
+        errors,
+        formName,
+        props.captionposition,
+        captionCls,
+        widgetCls,
+        itemsPerRow,
+        props.validationtype,
+        showViewMode,
+        computedFormdata,
+        submit,
+        formresetFn
+      ]
+    );
+    const conditionalProps = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props.target && { target: props.target }), props.method && { method: props.method }), props.encType && { encType: props.encType }), props.action && { action: props.action });
+    const formProps = __spreadProps(__spreadValues(__spreadValues({}, props), conditionalProps), {
+      submit,
       formreset: formresetFn,
-      formfields: formfields,
+      formfields,
       formWidgets: formfields,
-      headerActions: headerActions,
-      ref: ref,
+      headerActions,
+      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,
+      toggleMessage,
+      clearMessage,
+      expandCollapsePanel,
+      expanded,
+      showmessage,
+      statusMessage,
+      showViewMode,
+      filter,
+      clearFilter,
+      validateFieldsOnSubmit,
+      errors,
       validationMessages: validationMessagesRef.current,
-      "delete": deleteEntry,
+      delete: deleteEntry,
       cancel: handleCancel,
-      "new": create,
-      edit: edit,
-      setShowViewMode: _setShowViewMode,
+      new: create,
+      edit,
+      setShowViewMode,
       dataoutput: getValues(),
       save: submit,
-      setFormData: setFormData,
-      reset: reset,
+      setFormData,
+      reset,
       numberoffields: Object.keys(formfields).length,
       className: formClassName,
-      saveAndNew: saveAndNew,
-      saveAndView: saveAndView,
-      highlightInvalidFields: highlightInvalidFields,
+      saveAndNew,
+      saveAndView,
+      highlightInvalidFields,
       formdata: widgetFormData || childFormData || formdata,
-      captionCls: captionCls,
-      widgetCls: widgetCls,
-      itemsPerRow: itemsPerRow
+      captionCls,
+      widgetCls,
+      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
-    }))));
+    const parentFormDataContextValue = useMemo(
+      () => {
+        var _a2;
+        return {
+          formdata: (_a2 = currentFormData != null ? currentFormData : widgetFormData) != null ? _a2 : formdata,
+          formName: formName || "",
+          rootParentForm: isChildForm ? rootParentForm || "" : formName || "",
+          parentDataPath: isChildForm ? fullDataPath : void 0,
+          lastUpdateOrigin: isChildForm ? parentFormDataContext == null ? void 0 : parentFormDataContext.lastUpdateOrigin : lastUpdateOriginRef.current,
+          onChildDataChange: isChildForm ? parentFormDataContext == null ? void 0 : parentFormDataContext.onChildDataChange : handleChildDataChange,
+          registerChildField: isChildForm ? parentFormDataContext == null ? void 0 : parentFormDataContext.registerChildField : handleRegisterChildField
+        };
+      },
+      [
+        currentFormData,
+        widgetFormData,
+        formdata,
+        formName,
+        isValid,
+        isChildForm,
+        rootParentForm,
+        fullDataPath,
+        parentFormDataContext == null ? void 0 : parentFormDataContext.lastUpdateOrigin,
+        parentFormDataContext == null ? void 0 : parentFormDataContext.onChildDataChange,
+        parentFormDataContext == null ? void 0 : parentFormDataContext.registerChildField,
+        handleChildDataChange,
+        handleRegisterChildField
+      ]
+    );
+    return /* @__PURE__ */ jsx(ParentFormDataContext.Provider, { value: parentFormDataContextValue, children: /* @__PURE__ */ jsx(FormProvider, { value: ref, isViewMode: showViewMode, children: /* @__PURE__ */ jsx(WrappedComponent, __spreadProps(__spreadValues({}, formProps), { formWidgets: formfields, formfields })) }) });
   };
   return ControlledForm;
 };
-var _default = exports["default"] = BaseForm;
+var base_form_default = BaseForm;
+export {
+  base_form_default as default
+};