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

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

@@ -1,176 +1,127 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFormValidation = useFormValidation;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _react = require("react");
-var _lodashEs = require("lodash-es");
-var _formUtils = require("../../../../../utils/form-utils");
-var _utils = require("../utils");
-/**
- * Hook for managing form validation and validation messages
- *
- * Handles:
- * - Building validation message objects for fields with errors
- * - Exposing validation messages on widget object and formRef
- * - Validating fields on submit (including child forms)
- * - Focusing on first invalid field
- */
-function useFormValidation(_ref) {
-  var formRef = _ref.formRef,
-    formfields = _ref.formfields,
-    formReff = _ref.formReff,
-    control = _ref.control,
-    trigger = _ref.trigger,
-    errors = _ref.errors,
-    formName = _ref.formName,
-    listener = _ref.listener;
-  var validationMessagesRef = (0, _react.useRef)([]);
-
-  /**
-   * Creates a validation message object for a field with errors
-   */
-  var addValidationMessage = (0, _react.useCallback)(function (fieldErrors, fieldKey, field, prefix) {
-    var _field$value;
-    var errorTypes = (0, _formUtils.getErrorTypes)(fieldErrors);
-    validationMessagesRef.current.push({
-      field: fieldKey,
-      value: (_field$value = field === null || field === void 0 ? void 0 : field.value) !== null && _field$value !== void 0 ? _field$value : field === null || field === void 0 ? void 0 : field.datavalue,
-      errorType: errorTypes,
-      message: (field === null || field === void 0 ? void 0 : field.validationmessage) || (fieldErrors === null || fieldErrors === void 0 ? void 0 : fieldErrors.message) || "",
-      getElement: function getElement() {
-        var formEl = formRef.current;
-        if (formEl) {
-          var fieldEl = formEl.querySelector("[name=\"".concat(fieldKey, "\"]"));
-          if (fieldEl) {
-            return fieldEl.closest("[focus-target]") || fieldEl.querySelector("[focus-target]") || fieldEl;
+import { useRef, useCallback } from "react";
+import { last } from "lodash-es";
+import { getErrorTypes, shouldSkipFieldKey } from "../../../../../utils/form-utils";
+import {
+  focusOnFirstInvalidField,
+  getWidgetFormFields,
+  setWidgetValidationMessages
+} from "../utils";
+function useFormValidation({
+  formRef,
+  formfields,
+  formReff,
+  control,
+  trigger,
+  errors,
+  formName,
+  listener
+}) {
+  const validationMessagesRef = useRef([]);
+  const addValidationMessage = useCallback(
+    (fieldErrors, fieldKey, field, prefix) => {
+      var _a;
+      const errorTypes = getErrorTypes(fieldErrors);
+      validationMessagesRef.current.push({
+        field: fieldKey,
+        value: (_a = field == null ? void 0 : field.value) != null ? _a : field == null ? void 0 : field.datavalue,
+        errorType: errorTypes,
+        message: (field == null ? void 0 : field.validationmessage) || (fieldErrors == null ? void 0 : fieldErrors.message) || "",
+        getElement: () => {
+          const formEl = formRef.current;
+          if (formEl) {
+            const fieldEl = formEl.querySelector(`[name="${fieldKey}"]`);
+            if (fieldEl) {
+              return fieldEl.closest("[focus-target]") || fieldEl.querySelector("[focus-target]") || fieldEl;
+            }
           }
-        }
-        return null;
-      },
-      formName: (0, _lodashEs.last)(prefix.split(".")) || formName || "",
-      fullyQualifiedFormName: prefix
-    });
-  }, [formRef, formName]);
-
-  /**
-   * Exposes validationMessages on widget object and formRef for external access
-   */
-  var exposeValidationMessages = (0, _react.useCallback)(function (validationMessages) {
-    (0, _utils.setWidgetValidationMessages)(listener, formName, validationMessages);
-    if (formRef.current) {
-      formRef.current.validationMessages = validationMessages;
-    }
-  }, [formRef, formName]);
-
-  /**
-   * Gets the form fields to validate and their keys
-   */
-  var getFormFieldsForValidation = (0, _react.useCallback)(function () {
-    var widgetFormFields = (0, _utils.getWidgetFormFields)(listener, formName);
-    var formFieldsToValidate = widgetFormFields || formfields;
-    var allFieldKeys = Object.keys(formFieldsToValidate);
-    var prefix = formName || "";
-    return {
-      formFieldsToValidate: formFieldsToValidate,
-      allFieldKeys: allFieldKeys,
-      prefix: prefix
-    };
-  }, [formName, formfields]);
-
-  /**
-   * Core validation messages builder that accepts a getFieldError function
-   */
-  var buildValidationMessagesCore = (0, _react.useCallback)(function (getFieldError) {
-    validationMessagesRef.current = [];
-    var _getFormFieldsForVali = getFormFieldsForValidation(),
-      formFieldsToValidate = _getFormFieldsForVali.formFieldsToValidate,
-      allFieldKeys = _getFormFieldsForVali.allFieldKeys,
-      prefix = _getFormFieldsForVali.prefix;
-    allFieldKeys.forEach(function (fieldKey) {
-      if ((0, _formUtils.shouldSkipFieldKey)(fieldKey, allFieldKeys)) return;
-      var field = formFieldsToValidate[fieldKey];
-      var fieldErrors = getFieldError(fieldKey, field);
-      if (fieldErrors) {
-        addValidationMessage(fieldErrors, fieldKey, field, prefix);
+          return null;
+        },
+        formName: last(prefix.split(".")) || formName || "",
+        fullyQualifiedFormName: prefix
+      });
+    },
+    [formRef, formName]
+  );
+  const exposeValidationMessages = useCallback(
+    (validationMessages) => {
+      setWidgetValidationMessages(listener, formName, validationMessages);
+      if (formRef.current) {
+        formRef.current.validationMessages = validationMessages;
       }
-    });
-    return validationMessagesRef.current;
-  }, [getFormFieldsForValidation, addValidationMessage]);
-
-  /**
-   * Builds validation messages using react-hook-form's state
-   */
-  var buildValidationMessages = (0, _react.useCallback)(function () {
-    return buildValidationMessagesCore(function (fieldKey) {
-      var fieldState = control.getFieldState(fieldKey);
-      return fieldState === null || fieldState === void 0 ? void 0 : fieldState.error;
+    },
+    [formRef, formName]
+  );
+  const getFormFieldsForValidation = useCallback(() => {
+    const widgetFormFields = getWidgetFormFields(listener, formName);
+    const formFieldsToValidate = widgetFormFields || formfields;
+    const allFieldKeys = Object.keys(formFieldsToValidate);
+    const prefix = formName || "";
+    return { formFieldsToValidate, allFieldKeys, prefix };
+  }, [formName, formfields]);
+  const buildValidationMessagesCore = useCallback(
+    (getFieldError) => {
+      validationMessagesRef.current = [];
+      const { formFieldsToValidate, allFieldKeys, prefix } = getFormFieldsForValidation();
+      allFieldKeys.forEach((fieldKey) => {
+        if (shouldSkipFieldKey(fieldKey, allFieldKeys)) return;
+        const field = formFieldsToValidate[fieldKey];
+        const fieldErrors = getFieldError(fieldKey, field);
+        if (fieldErrors) {
+          addValidationMessage(fieldErrors, fieldKey, field, prefix);
+        }
+      });
+      return validationMessagesRef.current;
+    },
+    [getFormFieldsForValidation, addValidationMessage]
+  );
+  const buildValidationMessages = useCallback(() => {
+    return buildValidationMessagesCore((fieldKey) => {
+      const fieldState = control.getFieldState(fieldKey);
+      return fieldState == null ? void 0 : fieldState.error;
     });
   }, [buildValidationMessagesCore, control]);
-
-  /**
-   * Validates all fields on submit, including child forms
-   * Returns true if all forms are valid
-   */
-  var validateFieldsOnSubmit = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var childFormsValid, childForms, validationResults, currentFormValidState, validationMessages, _listener$onChange;
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          // Validate all registered child forms FIRST
-          // This ensures child form validators run even if parent has errors
-          childFormsValid = true;
-          childForms = formReff.current ? Object.values(formReff.current) : [];
-          if (!childForms.length) {
-            _context.next = 7;
-            break;
-          }
-          _context.next = 5;
-          return Promise.all(childForms.map(function (childForm) {
-            var _childForm$validateFi, _childForm$validateFi2;
-            return (_childForm$validateFi = childForm === null || childForm === void 0 || (_childForm$validateFi2 = childForm.validateFieldsOnSubmit) === null || _childForm$validateFi2 === void 0 ? void 0 : _childForm$validateFi2.call(childForm)) !== null && _childForm$validateFi !== void 0 ? _childForm$validateFi : Promise.resolve(true);
-          }));
-        case 5:
-          validationResults = _context.sent;
-          childFormsValid = validationResults.every(Boolean);
-        case 7:
-          _context.next = 9;
-          return trigger();
-        case 9:
-          currentFormValidState = _context.sent;
-          // Build and expose validation messages AFTER trigger
-          validationMessages = buildValidationMessages();
-          exposeValidationMessages(validationMessages);
-
-          // If either current form or child forms have errors, focus and return false
-          if (!(!childFormsValid || !currentFormValidState)) {
-            _context.next = 16;
-            break;
-          }
-          if (!currentFormValidState) {
-            listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, formName, {
-              valid: false,
-              errors: errors
-            });
+  const validateFieldsOnSubmit = useCallback(async () => {
+    var _a;
+    let childFormsValid = true;
+    const childForms = formReff.current ? Object.values(formReff.current) : [];
+    if (childForms.length) {
+      const validationResults = await Promise.all(
+        childForms.map(
+          (childForm) => {
+            var _a2, _b;
+            return (_b = (_a2 = childForm == null ? void 0 : childForm.validateFieldsOnSubmit) == null ? void 0 : _a2.call(childForm)) != null ? _b : Promise.resolve(true);
           }
-          (0, _utils.focusOnFirstInvalidField)(formRef.current, Object.keys(errors));
-          return _context.abrupt("return", false);
-        case 16:
-          return _context.abrupt("return", true);
-        case 17:
-        case "end":
-          return _context.stop();
+        )
+      );
+      childFormsValid = validationResults.every(Boolean);
+    }
+    const currentFormValidState = await trigger();
+    const validationMessages = buildValidationMessages();
+    exposeValidationMessages(validationMessages);
+    if (!childFormsValid || !currentFormValidState) {
+      if (!currentFormValidState) {
+        (_a = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a.call(listener, formName, { valid: false, errors });
       }
-    }, _callee);
-  })), [trigger, buildValidationMessages, exposeValidationMessages, formName, errors, formRef, formReff]);
+      focusOnFirstInvalidField(formRef.current, Object.keys(errors));
+      return false;
+    }
+    return true;
+  }, [
+    trigger,
+    buildValidationMessages,
+    exposeValidationMessages,
+    formName,
+    errors,
+    formRef,
+    formReff
+  ]);
   return {
-    validationMessagesRef: validationMessagesRef,
-    validateFieldsOnSubmit: validateFieldsOnSubmit,
-    buildValidationMessages: buildValidationMessages,
-    exposeValidationMessages: exposeValidationMessages
+    validationMessagesRef,
+    validateFieldsOnSubmit,
+    buildValidationMessages,
+    exposeValidationMessages
   };
-}
+}
+export {
+  useFormValidation
+};

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

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