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

package/components/data/form/form-controller/withFormController.js

@@ -0,0 +1,309 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _reactHookForm = require("react-hook-form");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
+var _formContext = require("@wavemaker-ai/react-runtime/components/data/form/form-context");
+var _utils = require("./utils");
+var _hooks = require("./hooks");
+var _excluded = ["formRef", "formKey", "name", "datavalue", "maxDataValue", "isMaxWidget", "defaultvalue", "validators", "asyncValidators", "required", "maxchars", "minvalue", "maxvalue", "regexp", "validationmessage", "customValidationMsg", "setValidationMessage", "hint", "type", "observe", "onBlur", "fieldName", "standalone"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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; }
+// HOC function
+var withFormController = function withFormController(WrappedComponent) {
+  var WithFormControllerComponent = /*#__PURE__*/(0, _react.memo)(function (props) {
+    var propsFormRef = props.formRef,
+      formKey = props.formKey,
+      name = props.name,
+      datavalue = props.datavalue,
+      maxDataValue = props.maxDataValue,
+      isMaxWidgetProp = props.isMaxWidget,
+      defaultvalue = props.defaultvalue,
+      _props$validators = props.validators,
+      validators = _props$validators === void 0 ? [] : _props$validators,
+      asyncValidators = props.asyncValidators,
+      required = props.required,
+      maxchars = props.maxchars,
+      minvalue = props.minvalue,
+      maxvalue = props.maxvalue,
+      regexp = props.regexp,
+      validationmessage = props.validationmessage,
+      customValidationMsg = props.customValidationMsg,
+      setValidationMessage = props.setValidationMessage,
+      hint = props.hint,
+      type = props.type,
+      observe = props.observe,
+      onBlur = props.onBlur,
+      fieldName = props.fieldName,
+      _props$standalone = props.standalone,
+      standalone = _props$standalone === void 0 ? false : _props$standalone,
+      wrappedComponentProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+    // State and refs
+    var _useState = (0, _react.useState)(false),
+      touched = _useState[0],
+      setTouched = _useState[1];
+    var fieldRef = (0, _react.useRef)(null);
+    var observeRef = (0, _react.useRef)(observe);
+    var isInitialMountRef = (0, _react.useRef)(true);
+    var hasEverBeenTouchedRef = (0, _react.useRef)(false);
+
+    // Context and proxy setup
+    var inputFieldName = fieldName || name;
+    var contextFormRef = (0, _formContext.useFormContext)();
+    var formRef = propsFormRef || contextFormRef;
+    var fieldProxy = (0, _WidgetProvider.useWidgetProxy)(name, standalone);
+    var form = (0, _WidgetProvider.useWidgetProxy)(formRef === null || formRef === void 0 ? void 0 : formRef.name, standalone);
+
+    // Normalize isMaxWidget - handle string "true" from markup
+    var isMaxWidget = isMaxWidgetProp === true || isMaxWidgetProp === "true" || isMaxWidgetProp === "{true}";
+
+    // For max widgets, use a modified formKey to differentiate from min widget
+    // This allows both widgets to coexist in the form while maintaining the same base field name
+    var effectiveFormKey = isMaxWidget && formKey ? "".concat(formKey, "_maxWidget") : formKey || inputFieldName;
+
+    // Use maxdatavalue when isMaxWidget is true, otherwise use datavalue
+    var effectiveDataValue = isMaxWidget ? maxDataValue !== undefined ? maxDataValue : datavalue : datavalue;
+
+    // Form properties
+    var trigger = formRef === null || formRef === void 0 ? void 0 : formRef.trigger;
+    var validationType = (form === null || form === void 0 ? void 0 : form.validationtype) || (formRef === null || formRef === void 0 ? void 0 : formRef.validationtype) || "default";
+
+    // Custom hooks
+    (0, _hooks.useFormRegistration)(name, fieldProxy, contextFormRef);
+    // For max widgets: only sync maxdatavalue (don't sync datavalue as it shouldn't change)
+    // For regular widgets: sync datavalue
+    (0, _hooks.useDefaultValueSync)(defaultvalue, datavalue, fieldRef);
+    // ignoring min/max range validation for Radioset and Checkboxset widgets
+    var widget = WrappedComponent === null || WrappedComponent === void 0 ? void 0 : WrappedComponent.displayName;
+    var ignoreRange = ["WmRadioset", "WmCheckboxset"].includes(widget !== null && widget !== void 0 ? widget : "");
+    var validationRules = (0, _hooks.useValidationRules)(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, ignoreRange ? undefined : minvalue, ignoreRange ? undefined : maxvalue, form, customValidationMsg);
+    var rules = {
+      required: required,
+      maxchars: maxchars,
+      regexp: regexp,
+      minvalue: minvalue,
+      maxvalue: maxvalue,
+      excludedays: props.excludedays,
+      excludedates: props.excludedates,
+      mintime: props.mintime,
+      maxtime: props.maxtime,
+      mindate: props.mindate,
+      maxdate: props.maxdate
+    };
+    var extractedValidatorProps = (0, _utils.extractDynamicValidationProps)(validators || [], rules);
+    var htmlValidationProps = (0, _hooks.useHTMLValidationProps)(validationType, required, maxchars, regexp);
+
+    // Update observeRef when observe changes
+    (0, _react.useEffect)(function () {
+      observeRef.current = observe;
+    }, [observe]);
+
+    // Destroy widget when component unmounts
+    (0, _react.useEffect)(function () {
+      return function () {
+        if (props.destroy) {
+          props.destroy([props.name, effectiveFormKey, "".concat(effectiveFormKey, "_formWidget"), "".concat(effectiveFormKey, "_formLabel")]);
+        }
+      };
+    }, [effectiveFormKey]);
+
+    // Track if field has ever been touched
+    (0, _react.useEffect)(function () {
+      if (touched && !hasEverBeenTouchedRef.current) {
+        hasEverBeenTouchedRef.current = true;
+      }
+    }, [touched]);
+    (0, _react.useEffect)(function () {
+      if (isInitialMountRef.current) {
+        isInitialMountRef.current = false;
+        return;
+      }
+      var hasBeenTouchedOrSubmitted = hasEverBeenTouchedRef.current || (formRef === null || formRef === void 0 ? void 0 : formRef.submitCount) && formRef.submitCount > 0;
+      if (trigger && effectiveFormKey && hasBeenTouchedOrSubmitted) {
+        trigger(effectiveFormKey);
+      }
+    }, [validationmessage]);
+    var customMsgInitialRef = (0, _react.useRef)(true);
+    (0, _react.useEffect)(function () {
+      if (customMsgInitialRef.current) {
+        customMsgInitialRef.current = false;
+        return;
+      }
+      if (trigger && effectiveFormKey) {
+        trigger(effectiveFormKey);
+      }
+    }, [customValidationMsg]);
+
+    // Event handlers
+    var createOnChangeHandler = (0, _react.useCallback)(function (field) {
+      return function (e, componentProps, newValue, oldValue, isValid) {
+        var _props$onChange;
+        var valueToSet;
+        if (newValue !== undefined) {
+          valueToSet = newValue;
+        } else if (e && e.target) {
+          valueToSet = e.target.value;
+        } else if (e !== undefined) {
+          valueToSet = e;
+        }
+
+        // If the incoming value is an object and we have a datafield, extract the value
+        if (valueToSet && (0, _typeof2["default"])(valueToSet) === "object" && !Array.isArray(valueToSet) && props.datafield && props.datafield !== "All Fields") {
+          valueToSet = valueToSet[props.datafield];
+        }
+        if (type === "number") {
+          field.onChange(valueToSet === "" || valueToSet === null ? "" : valueToSet);
+        } else {
+          field.onChange(valueToSet);
+        }
+        if (isValid === false) {
+          return;
+        }
+        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e, componentProps, newValue, oldValue);
+      };
+    }, [type, props.datafield]);
+    var createOnBlurHandler = (0, _react.useCallback)(function (field, fieldState) {
+      return function (e) {
+        var _observeRef$current;
+        setTouched(true);
+        field.onBlur();
+        var shouldTriggerValidation = validationType === "html" && trigger && !!fieldState.error || validationType !== "none" && ((_observeRef$current = observeRef.current) === null || _observeRef$current === void 0 ? void 0 : _observeRef$current.length) && trigger;
+        if (shouldTriggerValidation) {
+          setTimeout(function () {
+            trigger(effectiveFormKey);
+          });
+        }
+        onBlur === null || onBlur === void 0 || onBlur(e);
+      };
+    }, [trigger, formKey, inputFieldName, onBlur, validationType]);
+
+    // Render without Controller if no formRef
+    if (!(formRef !== null && formRef !== void 0 && formRef.control) || props.ignoreInForm) {
+      return __jsx(WrappedComponent, props);
+    }
+    return __jsx(_reactHookForm.Controller, {
+      control: formRef.control,
+      name: effectiveFormKey,
+      rules: validationRules,
+      defaultValue: effectiveDataValue !== undefined ? effectiveDataValue : defaultvalue,
+      render: function render(_ref) {
+        var _fieldState$error;
+        var field = _ref.field,
+          fieldState = _ref.fieldState;
+        // Store field reference for external updates
+        fieldRef.current = field;
+
+        // Process field value and get error state
+        var processedValue = (0, _utils.processFieldValue)(field.value, type, props.datafield);
+        var errorState = (0, _utils.getErrorState)(fieldState, validationType, touched);
+
+        // Determine the value to use with proper fallback chain
+        // Priority: field.value (if not undefined) -> datavalue (if not undefined) -> defaultvalue
+        var valueToUse;
+        if (processedValue !== undefined) {
+          valueToUse = processedValue;
+        } else {
+          valueToUse = defaultvalue;
+        }
+
+        // Build controlled props
+        // For max widgets: use max-prefixed properties (maxdatavalue, maxvalue, maxdisplayValue)
+        // For regular widgets: use regular properties (datavalue, value, displayValue)
+        var effectiveValue = processedValue !== undefined ? processedValue : defaultvalue;
+        var displayValueStr = effectiveValue !== null && effectiveValue !== undefined ? effectiveValue.toString() : "";
+
+        // For max widgets: use max-prefixed properties, keep regular properties unchanged
+        // For regular widgets: use regular properties
+        var maxWidgetProps = isMaxWidget ? {
+          datavalue: props.datavalue !== undefined ? props.datavalue : undefined,
+          // Keep original, don't update
+          value: props.value !== undefined ? props.value : undefined,
+          // Keep original, don't update
+          displayValue: props.displayValue !== undefined ? props.displayValue : undefined,
+          // Keep original, don't update
+          maxDataValue: effectiveValue,
+          // Update max-prefixed properties
+          maxdisplayValue: displayValueStr
+        } : {
+          // For regular widgets: use regular properties
+          datavalue: valueToUse,
+          value: valueToUse,
+          displayValue: displayValueStr,
+          maxvalue: props.maxvalue !== undefined ? props.maxvalue : undefined // Keep original, don't update
+        };
+        var controlledProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), extractedValidatorProps), validationType === "html" ? htmlValidationProps : {}), maxWidgetProps), {}, {
+          isMaxWidget: isMaxWidget,
+          // Ensure isMaxWidget is passed through
+          onChange: createOnChangeHandler(field),
+          onBlur: createOnBlurHandler(field, fieldState),
+          ref: field.ref
+        }, errorState), {}, {
+          required: validationType === "html" || !propsFormRef ? required : extractedValidatorProps.required || required,
+          isControlled: true,
+          formfield: true,
+          fieldName: inputFieldName,
+          name: name,
+          isRequiredLabel: validationType === "html" || !propsFormRef ? required : extractedValidatorProps.required || required,
+          className: (0, _clsx["default"])(wrappedComponentProps.className, {
+            hidden: contextFormRef === null || contextFormRef === void 0 ? void 0 : contextFormRef.isViewMode
+          })
+        });
+        return __jsx(_react["default"].Fragment, null, __jsx(WrappedComponent, (0, _extends2["default"])({}, controlledProps, {
+          dataset: props.dataset,
+          displayfield: props.displayfield
+        })), __jsx("span", {
+          style: {
+            alignSelf: "flex-start"
+          },
+          className: "form-control-static app-label",
+          hidden: !(contextFormRef !== null && contextFormRef !== void 0 && contextFormRef.isViewMode)
+        }, function () {
+          var value = controlledProps.datavalue;
+          if (value && (0, _typeof2["default"])(value) === "object") {
+            if (props.datafield || props.displayfield) {
+              value = value[props.datafield || props.displayfield];
+            } else {
+              value = JSON.stringify(value);
+            }
+          }
+          return value;
+        }()), hint && !(0, _utils.shouldShowErrorMessage)(validationType, fieldState, touched) && __jsx("p", {
+          className: "help-block",
+          "aria-hidden": "true",
+          role: "alert",
+          "aria-live": "polite",
+          style: {
+            textAlign: "start",
+            width: "100%"
+          }
+        }, hint), (0, _utils.shouldShowErrorMessage)(validationType, fieldState, touched) && __jsx("p", {
+          className: "help-block text-danger",
+          "aria-hidden": "false",
+          role: "alert",
+          "aria-live": "assertive",
+          style: {
+            textAlign: "start",
+            width: "100%"
+          }
+        }, (_fieldState$error = fieldState.error) === null || _fieldState$error === void 0 ? void 0 : _fieldState$error.message));
+      }
+    });
+  });
+  WithFormControllerComponent.displayName = "withFormController(".concat(WrappedComponent.displayName || WrappedComponent.name || "Component", ")");
+  return WithFormControllerComponent;
+};
+var _default = exports["default"] = withFormController;

package/components/data/form/form-dynamic-section/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { FormDynamicFieldsSectionProps } from "./props";
+declare function FormDynamicFieldsSectionComponent({ formName, metadata, listener, }: FormDynamicFieldsSectionProps): import("react/jsx-runtime").JSX.Element;
+declare const FormDynamicFieldsSection: React.MemoExoticComponent<typeof FormDynamicFieldsSectionComponent>;
+export default FormDynamicFieldsSection;

package/components/data/form/form-dynamic-section/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _formBody = _interopRequireDefault(require("../form-body"));
+var _container = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/container"));
+var _dynamicFields = _interopRequireDefault(require("../dynamic-fields"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var DYNAMIC_FORM_BODY_SUFFIX = "_dynamic_form_body";
+var DYNAMIC_FORM_CONTAINER_SUFFIX = "_dynamic_form_container";
+var DYNAMIC_FIELDS_SUFFIX = "_dynamic_fields";
+function FormDynamicFieldsSectionComponent(_ref) {
+  var formName = _ref.formName,
+    metadata = _ref.metadata,
+    listener = _ref.listener;
+  var formBodyName = formName + DYNAMIC_FORM_BODY_SUFFIX;
+  var containerName = formName + DYNAMIC_FORM_CONTAINER_SUFFIX;
+  var dynamicFieldsName = formName + DYNAMIC_FIELDS_SUFFIX;
+  return __jsx(_formBody["default"], {
+    name: formBodyName,
+    listener: listener,
+    "data-widget-id": "widget-".concat(formName, "-dynamic-body")
+  }, __jsx(_container["default"], {
+    name: containerName,
+    listener: listener,
+    "data-widget-id": "widget-".concat(formName, "-dynamic-container"),
+    className: "dynamic-form-container"
+  }, __jsx(_dynamicFields["default"], {
+    name: dynamicFieldsName,
+    metadata: metadata,
+    listener: listener,
+    "data-widget-id": "widget-".concat(formName, "-dynamic-fields")
+  })));
+}
+function propsAreEqual(prev, next) {
+  return prev.formName === next.formName && prev.metadata === next.metadata;
+}
+var FormDynamicFieldsSection = /*#__PURE__*/(0, _react.memo)(FormDynamicFieldsSectionComponent, propsAreEqual);
+FormDynamicFieldsSection.displayName = "FormDynamicFieldsSection";
+var _default = exports["default"] = FormDynamicFieldsSection;

package/components/data/form/form-dynamic-section/props.d.ts

@@ -0,0 +1,5 @@
+export interface FormDynamicFieldsSectionProps {
+    formName: string;
+    metadata: any;
+    listener?: any;
+}

package/components/data/form/form-dynamic-section/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,3 @@
+import { WmFormFieldProps } from "./props";
+declare const BaseField: (WrappedComponent: any) => (props: WmFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default BaseField;

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

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _filterFieldUtil = require("../../utils/filter-field-util");
+var _formContext = require("@wavemaker-ai/react-runtime/components/data/form/form-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var initialRelatedData = {
+  dataset: [],
+  displayfield: "",
+  displaylabel: "",
+  datafield: "",
+  searchkey: ""
+};
+var BaseField = function BaseField(WrappedComponent) {
+  var FormField = function FormField(props) {
+    var formContext = (0, _formContext.useFormContext)();
+    var fieldRef = (0, _react.useRef)(null);
+    var _ref = formContext || {},
+      widgetCls = _ref.widgetCls,
+      captionCls = _ref.captionCls,
+      captionposition = _ref.captionposition;
+    var _useState = (0, _react.useState)(props.validators || []),
+      validators = _useState[0],
+      setValidators = _useState[1];
+    var _useState2 = (0, _react.useState)([]),
+      asyncValidators = _useState2[0],
+      setAsyncValidators = _useState2[1];
+    var _useState3 = (0, _react.useState)([]),
+      observe = _useState3[0],
+      observeOn = _useState3[1];
+    var _useState4 = (0, _react.useState)(false),
+      isDataSetBound = _useState4[0],
+      setIsDataSetBound = _useState4[1];
+    var _useState5 = (0, _react.useState)(initialRelatedData),
+      relatedData = _useState5[0],
+      setRelatedData = _useState5[1];
+    var _useState6 = (0, _react.useState)(null),
+      customValidationMsg = _useState6[0],
+      setCustomValidationMsg = _useState6[1];
+    var setValidationMessage = (0, _react.useCallback)(function (val) {
+      setTimeout(function () {
+        setCustomValidationMsg(val || null);
+      });
+    }, []);
+    function updateFormWidgetDataset(dataset, displayField) {
+      setRelatedData({
+        dataset: dataset.data,
+        displayfield: displayField || props.displayfield,
+        datafield: "All Fields"
+      });
+
+      // After updating the dataset, we need to ensure the form field value is synced
+      // This is especially important for related fields where the datafield changes
+      if (formContext !== null && formContext !== void 0 && formContext.trigger && props.formKey) {
+        // Trigger validation for this field to force react-hook-form to re-evaluate
+        setTimeout(function () {
+          formContext.trigger(props.formKey);
+        }, 0);
+      }
+    }
+    function setFieldDataSet(dataset, options) {
+      setRelatedData({
+        displaylabel: props.displayfield = options.aliasColumn || _filterFieldUtil.LIVE_CONSTANTS.LABEL_VALUE,
+        displayfield: props.displayfield = options.aliasColumn || _filterFieldUtil.LIVE_CONSTANTS.LABEL_VALUE,
+        datafield: options.aliasColumn || _filterFieldUtil.LIVE_CONSTANTS.LABEL_KEY,
+        searchkey: options.distinctField || _filterFieldUtil.LIVE_CONSTANTS.LABEL_KEY,
+        dataset: dataset
+      });
+    }
+
+    // Check if there's a required validator and update the required prop
+    var hasRequiredValidator = function hasRequiredValidator() {
+      var checkRequiredValidator = function checkRequiredValidator(validator) {
+        if (validator.type === "required") {
+          if (typeof validator.validator === "function") {
+            try {
+              return validator.validator() === true;
+            } catch (error) {
+              console.warn("Error calling required validator function:", error);
+              return false;
+            }
+          }
+          return validator.validator === true;
+        }
+        return false;
+      };
+      return validators.some(checkRequiredValidator) || asyncValidators.some(checkRequiredValidator);
+    };
+
+    // Use the required prop from validators if present, otherwise use the original required prop
+    // If validators indicate required, that takes precedence
+    var isRequired = hasRequiredValidator() || props.required || false;
+
+    // Transform formKey to match actual data keys
+    var transformedFormKey = (0, _react.useMemo)(function () {
+      // Check if this is a child form (has parentForm or formKey contains child form pattern)
+      var isChildForm = props.parentForm;
+      if (isChildForm) {
+        // For child forms, use searchkey directly as it contains the actual field name
+        if (props.searchkey) {
+          return props.searchkey;
+        }
+      }
+
+      // Prefer searchkey over formKey only for dotted form paths (related / nested binding).
+      // Chips and other widgets set searchkey for dataset lookup (e.g. "name"); that must not
+      // become the react-hook-form field id or every such field collides on the same key.
+      if (props.formKey && props.searchkey && props.searchkey !== props.formKey) {
+        return props.searchkey;
+      }
+
+      // For parent forms or when no transformation needed, use original formKey
+      return props.formKey;
+    }, [props.formKey, props.searchkey, props.formName, props.name, props.parentForm]);
+    function resetField() {
+      var fieldName = props.formKey || props.name;
+      (formContext === null || formContext === void 0 ? void 0 : formContext.resetField) && (formContext === null || formContext === void 0 ? void 0 : formContext.resetField(fieldName));
+    }
+    var modifiedProps = (0, _react.useMemo)(function () {
+      var _relatedData$dataset;
+      return _objectSpread(_objectSpread({}, props), {}, {
+        formRef: formContext,
+        itemsPerRow: formContext === null || formContext === void 0 ? void 0 : formContext.itemsPerRow,
+        validators: validators,
+        asyncValidators: asyncValidators,
+        observe: observe,
+        observeOn: observeOn,
+        setValidators: setValidators,
+        setAsyncValidators: setAsyncValidators,
+        widgetCls: widgetCls,
+        captionCls: captionCls,
+        fieldRef: fieldRef,
+        reset: resetField,
+        setValidationMessage: setValidationMessage,
+        customValidationMsg: customValidationMsg,
+        fieldName: props.name,
+        formKey: transformedFormKey,
+        // Use transformed formKey
+        setIsDataSetBound: setIsDataSetBound,
+        isDataSetBound: isDataSetBound,
+        updateFormWidgetDataset: updateFormWidgetDataset,
+        setFieldDataSet: setFieldDataSet,
+        required: isRequired,
+        captionposition: captionposition
+      }, relatedData.dataset && ((_relatedData$dataset = relatedData.dataset) === null || _relatedData$dataset === void 0 ? void 0 : _relatedData$dataset.length) > 0 ? {
+        datafield: relatedData.datafield,
+        dataset: relatedData.dataset,
+        displayfield: relatedData.displayfield
+      } : {});
+    }, [props, validators, asyncValidators, observe, observeOn, relatedData, isRequired, transformedFormKey, customValidationMsg]);
+    return __jsx(WrappedComponent, (0, _extends2["default"])({}, modifiedProps, {
+      validators: validators,
+      asyncValidators: asyncValidators,
+      setValidators: setValidators,
+      datavalue: props.datavalue || props.defaultvalue,
+      key: "".concat(props.formKey, "-").concat(relatedData.displayfield || "initial")
+    }));
+  };
+  return FormField;
+};
+var _default = exports["default"] = BaseField;

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

@@ -0,0 +1,14 @@
+import { WmFormFieldProps } from "./props";
+declare const WmFormFieldStandalone: (props: WmFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export { WmFormFieldStandalone as WmFormField };
+/**
+ * The WmFormField component represents a single field within a form.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-form-field--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-form-field--docs#tab-overview)
+ *
+ * @param props - {@link WmFormFieldProps}
+ */
+declare const _default: (props: WmFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmFormField = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _baseField = _interopRequireDefault(require("./base-field"));
+var _composite = require("@wavemaker-ai/react-runtime/components/input/composite");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "ng-pristine ng-invalid ng-touched";
+var DEFAULT_COMPOSITE_CLASS = "app-composite-widget caption-left clearfix form-group live-field";
+var WmFormField = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$formRef2;
+  (0, _react.useEffect)(function () {
+    // destroy form field when component unmounts
+    if (props.name && props.destroy) {
+      props.destroy([props.name]);
+    }
+  }, []);
+
+  // Use renderFormFields prop to render the actual form field component
+  // This allows parent components to pass in form fields wrapped with withFormController
+  function renderFormFields() {
+    if (props.formRef) {
+      var _props$formRef, _formKey, _props$renderFormFiel;
+      var errors = (_props$formRef = props.formRef) === null || _props$formRef === void 0 ? void 0 : _props$formRef.errors;
+      var formKey = (_formKey = props.formKey) !== null && _formKey !== void 0 ? _formKey : props.name;
+      var fieldError = formKey && errors ? (0, _get["default"])(errors, formKey) : undefined;
+      var invalid = Boolean(fieldError);
+      var invalidCls = invalid ? " text-danger " : "";
+      return __jsx(_react["default"].Fragment, null, props === null || props === void 0 || (_props$renderFormFiel = props.renderFormFields) === null || _props$renderFormFiel === void 0 ? void 0 : _props$renderFormFiel.call(props, _objectSpread(_objectSpread({}, props), {}, {
+        fieldError: fieldError,
+        invalid: invalid,
+        invalidCls: invalidCls
+      })));
+    } else {
+      return null;
+    }
+  }
+  var itemsPerRow = (props === null || props === void 0 || (_props$formRef2 = props.formRef) === null || _props$formRef2 === void 0 ? void 0 : _props$formRef2.itemsPerRow) || "";
+  if (props.hidden) {
+    return null;
+  }
+  return __jsx("div", {
+    className: (0, _clsx["default"])(props.className, itemsPerRow, DEFAULT_CLASS),
+    id: props.id,
+    style: _objectSpread(_objectSpread({}, props.conditionalstyle), props.styles),
+    "data-displayname": props.displayname,
+    "data-name": props.name,
+    "data-placeholder": props.placeholder,
+    name: props.name,
+    displayname: props.displayname,
+    placeholder: props.placeholder,
+    hidden: props.hidden,
+    "data-role": props.role || "form-field"
+  }, __jsx(_composite.WmComposite, {
+    captionposition: props.captionposition || "left",
+    listener: {},
+    name: "",
+    className: DEFAULT_COMPOSITE_CLASS
+  }, renderFormFields()));
+}, function (prev, next) {
+  return (0, _isEqual["default"])(prev, next);
+});
+WmFormField.displayName = "WmFormField";
+var WmFormFieldStandalone = exports.WmFormField = (0, _baseField["default"])(WmFormField);
+/**
+ * The WmFormField component represents a single field within a form.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-form-field--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-form-field--docs#tab-overview)
+ *
+ * @param props - {@link WmFormFieldProps}
+ */
+var _default = exports["default"] = (0, _baseField["default"])((0, _withBaseWrapper["default"])(WmFormField));