@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

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

@@ -17,7 +17,8 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _validationContrustor = require("@wavemaker/react-runtime/components/data/form/form-controller/validation-contrustor");
 var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 var _formContext = require("@wavemaker/react-runtime/components/data/form/form-context");
-var _excluded = ["formRef", "formKey", "name", "datavalue", "defaultvalue", "validators", "asyncValidators", "required", "maxchars", "regexp", "validationmessage", "hint", "type", "observe", "onBlur", "fieldName"];
+var _utils = require("./utils");
+var _excluded = ["formRef", "formKey", "name", "datavalue", "maxDataValue", "isMaxWidget", "defaultvalue", "validators", "asyncValidators", "required", "maxchars", "minvalue", "maxvalue", "regexp", "validationmessage", "hint", "type", "observe", "onBlur", "fieldName"];
 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; }
@@ -42,35 +43,71 @@ var useExternalDataSync = function useExternalDataSync(datavalue, fieldRef) {
     }
   }, [datavalue]);
 };
-var useValidationRules = function useValidationRules(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, form) {
-  return (0, _react.useMemo)(function () {
-    if (validationType === "none") {
-      return {};
-    }
-    var combinedValidators = [].concat((0, _toConsumableArray2["default"])(validators || []), (0, _toConsumableArray2["default"])(asyncValidators || []));
-    if (required) {
-      combinedValidators.push({
-        type: "required",
-        validator: true,
-        errorMessage: validationmessage || "This field is required"
-      });
-    }
-    if (maxchars) {
-      combinedValidators.push({
-        type: "maxchars",
-        validator: maxchars,
-        errorMessage: "Maximum length is ".concat(maxchars, " characters.")
-      });
-    }
-    if (regexp) {
-      combinedValidators.push({
-        type: "regexp",
-        validator: regexp,
-        errorMessage: validationmessage || "Invalid format."
-      });
+var useDefaultValueSync = function useDefaultValueSync(defaultvalue, datavalue, fieldRef) {
+  var hasInitializedRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    // Only sync defaultvalue if:
+    // 1. We haven't initialized yet
+    // 2. There's a defaultvalue provided
+    // 3. There's no datavalue (datavalue takes precedence)
+    // 4. The field is registered
+    if (!hasInitializedRef.current && defaultvalue !== undefined && datavalue === undefined && fieldRef.current) {
+      var currentValue = fieldRef.current.value;
+      if (currentValue === undefined || currentValue === null || currentValue === "") {
+        fieldRef.current.onChange(defaultvalue);
+        hasInitializedRef.current = true;
+      }
     }
-    return (0, _validationContrustor.createValidationRules)(combinedValidators, form);
-  }, [validators, asyncValidators, required, maxchars, regexp, validationmessage, form, validationType]);
+  }, [defaultvalue, datavalue]);
+};
+var useValidationRules = function useValidationRules(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, minvalue, maxvalue, form) {
+  if (validationType === "none") {
+    return {};
+  }
+  var combinedValidators = [].concat((0, _toConsumableArray2["default"])(validators || []), (0, _toConsumableArray2["default"])(asyncValidators || []));
+  var hasValidatorType = function hasValidatorType(type) {
+    return validators === null || validators === void 0 ? void 0 : validators.some(function (v) {
+      return typeof v !== "function" && v.type === type;
+    });
+  };
+  if (required && !hasValidatorType("required")) {
+    combinedValidators.push({
+      type: "required",
+      validator: true,
+      errorMessage: validationmessage || "This field is required"
+    });
+  }
+  if (maxchars !== undefined) {
+    combinedValidators.push({
+      type: "maxchars",
+      validator: maxchars,
+      errorMessage: validationmessage || "Maximum length is ".concat(maxchars, " characters.")
+    });
+  }
+  var normalizedMin = minvalue !== undefined && minvalue !== null && minvalue !== "" ? Number(minvalue) : undefined;
+  var normalizedMax = maxvalue !== undefined && maxvalue !== null && maxvalue !== "" ? Number(maxvalue) : undefined;
+  if (normalizedMin !== undefined && !Number.isNaN(normalizedMin)) {
+    combinedValidators.push({
+      type: "minvalue",
+      validator: normalizedMin,
+      errorMessage: validationmessage || "Value must be greater than or equal to ".concat(normalizedMin, ".")
+    });
+  }
+  if (normalizedMax !== undefined && !Number.isNaN(normalizedMax)) {
+    combinedValidators.push({
+      type: "maxvalue",
+      validator: normalizedMax,
+      errorMessage: validationmessage || "Value must be less than or equal to ".concat(normalizedMax, ".")
+    });
+  }
+  if (regexp) {
+    combinedValidators.push({
+      type: "regexp",
+      validator: regexp,
+      errorMessage: validationmessage || "Invalid format."
+    });
+  }
+  return (0, _validationContrustor.createValidationRules)(combinedValidators, form);
 };
 var useHTMLValidationProps = function useHTMLValidationProps(validationType, required, maxchars, regexp) {
   return (0, _react.useMemo)(function () {
@@ -95,7 +132,7 @@ var useHTMLValidationProps = function useHTMLValidationProps(validationType, req
 var processFieldValue = function processFieldValue(fieldValue, type, datafield) {
   // If fieldValue is an object and datafield is specified, extract the value
   if (fieldValue && (0, _typeof2["default"])(fieldValue) === "object" && !Array.isArray(fieldValue) && datafield) {
-    fieldValue = fieldValue[datafield];
+    fieldValue = datafield === "All Fields" ? fieldValue : fieldValue[datafield];
   }
   if (type === "number") {
     return fieldValue === "" || fieldValue === null || fieldValue === undefined ? "" : fieldValue;
@@ -133,7 +170,7 @@ var getErrorState = function getErrorState(fieldState, validationType, touched)
   }
 };
 var shouldShowErrorMessage = function shouldShowErrorMessage(validationType, fieldState, touched) {
-  return validationType !== "none" && (validationType === "default" && touched && fieldState.error || validationType === "html" && touched && fieldState.error);
+  return validationType !== "none" && (validationType === "default" && fieldState.error || validationType === "html" && fieldState.error);
 };
 
 // HOC function
@@ -143,11 +180,16 @@ var withFormController = function withFormController(WrappedComponent) {
       formKey = props.formKey,
       name = props.name,
       datavalue = props.datavalue,
+      maxDataValue = props.maxDataValue,
+      isMaxWidgetProp = props.isMaxWidget,
       defaultvalue = props.defaultvalue,
-      validators = props.validators,
+      _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,
       hint = props.hint,
@@ -163,6 +205,8 @@ var withFormController = function withFormController(WrappedComponent) {
       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;
@@ -171,14 +215,46 @@ var withFormController = function withFormController(WrappedComponent) {
     var fieldProxy = (0, _WidgetProvider.useWidgetProxy)(name);
     var form = (0, _WidgetProvider.useWidgetProxy)(formRef === null || formRef === void 0 ? void 0 : formRef.name);
 
+    // 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
     useFormRegistration(name, fieldProxy, contextFormRef);
-    useExternalDataSync(datavalue, fieldRef);
-    var validationRules = useValidationRules(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, form);
+    // For max widgets: only sync maxdatavalue (don't sync datavalue as it shouldn't change)
+    // For regular widgets: sync datavalue
+    var syncValue = isMaxWidget ? maxDataValue !== undefined ? maxDataValue : undefined // Only sync maxDataValue for max widgets
+    : datavalue !== undefined ? datavalue : undefined; // Sync datavalue for regular widgets
+    useExternalDataSync(syncValue, fieldRef);
+    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 = useValidationRules(validationType, validators, asyncValidators, required, maxchars, regexp, validationmessage, ignoreRange ? undefined : minvalue, ignoreRange ? undefined : maxvalue, form);
+    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 = useHTMLValidationProps(validationType, required, maxchars, regexp);
 
     // Update observeRef when observe changes
@@ -186,9 +262,35 @@ var withFormController = function withFormController(WrappedComponent) {
       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")]);
+        }
+      };
+    }, [props.destroy, 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]);
+
     // Event handlers
     var createOnChangeHandler = (0, _react.useCallback)(function (field) {
-      return function (e, componentProps, newValue) {
+      return function (e, componentProps, newValue, oldValue, isValid) {
         var _props$onChange;
         var valueToSet;
         if (newValue !== undefined) {
@@ -208,7 +310,10 @@ var withFormController = function withFormController(WrappedComponent) {
         } else {
           field.onChange(valueToSet);
         }
-        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e, field, newValue, 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) {
@@ -219,7 +324,7 @@ var withFormController = function withFormController(WrappedComponent) {
         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(formKey || inputFieldName);
+            trigger(effectiveFormKey);
           });
         }
         onBlur === null || onBlur === void 0 || onBlur(e);
@@ -227,16 +332,16 @@ var withFormController = function withFormController(WrappedComponent) {
     }, [trigger, formKey, inputFieldName, onBlur, validationType]);
 
     // Render without Controller if no formRef
-    if (!(formRef !== null && formRef !== void 0 && formRef.control)) {
+    if (!(formRef !== null && formRef !== void 0 && formRef.control) || props.ignoreInForm) {
       return __jsx(WrappedComponent, props);
     }
     return __jsx(_reactHookForm.Controller, {
       control: formRef.control,
-      name: formKey || inputFieldName,
+      name: effectiveFormKey,
       rules: validationRules,
-      defaultValue: datavalue !== undefined ? datavalue : defaultvalue,
+      defaultValue: effectiveDataValue !== undefined ? effectiveDataValue : defaultvalue,
       render: function render(_ref) {
-        var _fieldState$error;
+        var _props$className, _fieldState$error;
         var field = _ref.field,
           fieldState = _ref.fieldState;
         // Store field reference for external updates
@@ -246,30 +351,64 @@ var withFormController = function withFormController(WrappedComponent) {
         var processedValue = processFieldValue(field.value, type, props.datafield);
         var errorState = 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
-        var controlledProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), validationType === "html" ? htmlValidationProps : {}), {}, {
-          value: processedValue !== undefined ? processedValue : defaultvalue,
-          datavalue: processedValue !== undefined ? processedValue : defaultvalue,
+        // 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 : undefined,
+          required: validationType === "html" || !propsFormRef ? required : extractedValidatorProps.required || required,
           isControlled: true,
           formfield: true,
           fieldName: inputFieldName,
           name: name,
-          isRequiredLabel: required,
-          maxchars: maxchars,
-          regexp: regexp,
+          isRequiredLabel: validationType === "html" || !propsFormRef ? required : extractedValidatorProps.required || required,
           className: (0, _clsx["default"])(wrappedComponentProps.className, {
             hidden: contextFormRef === null || contextFormRef === void 0 ? void 0 : contextFormRef.isViewMode
           })
         });
+        var wrapperStyle = props !== null && props !== void 0 && (_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes("w-100") ? {
+          width: "auto"
+        } : {
+          width: "100%"
+        };
         return __jsx("div", {
-          style: {
-            width: "100%"
-          }
+          style: wrapperStyle
         }, __jsx(WrappedComponent, (0, _extends2["default"])({}, controlledProps, {
           dataset: props.dataset,
           displayfield: props.displayfield
@@ -294,7 +433,7 @@ var withFormController = function withFormController(WrappedComponent) {
           "aria-hidden": "true",
           role: "alert",
           "aria-live": "polite",
-          sx: {
+          style: {
             textAlign: "start",
             width: "100%"
           }

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

@@ -9,19 +9,14 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
-var _composite = require("@wavemaker/react-runtime/components/input/composite");
 var _filterFieldUtil = require("../../utils/filter-field-util");
 var _formContext = require("@wavemaker/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 DEFAULT_CLASS = "ng-pristine ng-invalid ng-touched";
-var DEFAULT_COMPOSITE_CLASS = "app-composite-widget caption-left clearfix form-group live-field";
 var BaseField = function BaseField(WrappedComponent) {
   var FormField = function FormField(props) {
-    var _props$required;
     var fieldRef = (0, _react.useRef)(null);
     var _useState = (0, _react.useState)(props.validators || []),
       validators = _useState[0],
@@ -52,7 +47,8 @@ var BaseField = function BaseField(WrappedComponent) {
     function updateFormWidgetDataset(dataset, displayField) {
       setRelatedData({
         dataset: dataset.data,
-        displayfield: displayField || props.displayfield
+        displayfield: displayField || props.displayfield,
+        datafield: "All Fields"
       });
 
       // After updating the dataset, we need to ensure the form field value is synced
@@ -75,16 +71,52 @@ var BaseField = function BaseField(WrappedComponent) {
     }
 
     // Check if there's a required validator and update the required prop
-    var hasRequiredValidator = (0, _react.useMemo)(function () {
-      return validators.some(function (validator) {
-        return validator.type === "required" && validator.validator === true;
-      }) || asyncValidators.some(function (validator) {
-        return validator.type === "required" && validator.validator === true;
-      });
-    }, [validators]);
+    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
-    var isRequired = (_props$required = props.required) !== null && _props$required !== void 0 ? _props$required : hasRequiredValidator;
+    // 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;
+        }
+      }
+
+      // For any field where searchkey exists and differs from formKey, use searchkey
+      // This handles cases where searchkey contains the actual data key
+      if (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), {}, {
@@ -98,40 +130,29 @@ var BaseField = function BaseField(WrappedComponent) {
         widgetCls: widgetCls,
         captionCls: captionCls,
         fieldRef: fieldRef,
+        reset: resetField,
         fieldName: props.name,
+        formKey: transformedFormKey,
+        // Use transformed formKey
         setIsDataSetBound: setIsDataSetBound,
         isDataSetBound: isDataSetBound,
         updateFormWidgetDataset: updateFormWidgetDataset,
         setFieldDataSet: setFieldDataSet,
-        required: isRequired
+        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]);
-    return __jsx("div", {
-      className: (0, _clsx["default"])(props.className, DEFAULT_CLASS),
-      id: props.id,
-      style: _objectSpread({}, props.conditionalstyle),
-      "data-displayname": props.displayname,
-      "data-name": props.name,
-      "data-placeholder": props.placeholder,
-      name: props.name,
-      displayname: props.displayname,
-      placeholder: props.placeholder
-    }, __jsx(_composite.WmComposite, {
-      captionposition: captionposition || "left",
-      listener: {},
-      name: "",
-      className: DEFAULT_COMPOSITE_CLASS
-    }, __jsx(WrappedComponent, (0, _extends2["default"])({}, modifiedProps, {
+    }, [props, validators, asyncValidators, observe, observeOn, relatedData, isRequired, transformedFormKey]);
+    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;
 };

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

@@ -8,27 +8,50 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _baseField = _interopRequireDefault(require("./base-field"));
+var _composite = require("@wavemaker/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$formRef;
   // Use renderFormFields prop to render the actual form field component
   // This allows parent components to pass in form fields wrapped with withFormController
-  if (props.renderFormFields) {
+  function renderFormFields() {
     if (props.formRef) {
       return __jsx(_react["default"].Fragment, null, props.renderFormFields(_objectSpread({}, props)));
     } else {
       return null;
     }
   }
-
-  // Fallback: render nothing if no renderFormFields is provided
-  console.warn("WmFormField: renderFormFields prop is required");
-  return null;
+  var itemsPerRow = (props === null || props === void 0 || (_props$formRef = props.formRef) === null || _props$formRef === void 0 ? void 0 : _props$formRef.itemsPerRow) || "";
+  if (props.hidden) {
+    return null;
+  }
+  return __jsx("div", {
+    className: (0, _clsx["default"])(props.className, itemsPerRow, DEFAULT_CLASS),
+    id: props.id,
+    style: _objectSpread({}, props.conditionalstyle),
+    "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);
 });

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

@@ -33,12 +33,11 @@ var WmFormHeader = function WmFormHeader(props) {
   }, props.subheading)), __jsx("div", {
     className: "form-action panel-actions basic-btn-grp"
   }, (props === null || props === void 0 ? void 0 : props.headerActions) && ((_Object$keys = Object.keys(props === null || props === void 0 ? void 0 : props.headerActions)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (actionName, index) {
-    return __jsx("div", {
-      className: "form-action panel-actions basic-btn-grp",
+    return __jsx(_formAction["default"], (0, _extends2["default"])({
       key: index
-    }, __jsx(_formAction["default"], (0, _extends2["default"])({}, props === null || props === void 0 ? void 0 : props.headerActions[actionName], {
+    }, props === null || props === void 0 ? void 0 : props.headerActions[actionName], {
       headeraction: true
-    })));
+    }));
   })), props.collapsible && __jsx("div", {
     className: "form-action panel-actions basic-btn-grp"
   }, __jsx(_button.WmButton, {

package/components/data/form/index.js

@@ -6,15 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _message = require("@wavemaker/react-runtime/components/basic/message");
 var _baseForm = _interopRequireDefault(require("./base-form"));
 var _formHeader = _interopRequireDefault(require("./form-header"));
+var _attr = require("@wavemaker/react-runtime/utils/attr");
 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 WmForm = function WmForm(props) {
   var _props$headerActions, _props$statusMessage, _props$statusMessage2, _props$statusMessage3, _props$statusMessage4;
   var shouldHideHeader = props.isLayoutDialog || props.isInsideWizard;
-  return __jsx(_react["default"].Fragment, null, !shouldHideHeader && ((props === null || props === void 0 ? void 0 : props.title) || (props === null || props === void 0 ? void 0 : props.subheading) || (props === null || props === void 0 ? void 0 : props.iconclass) || (props === null || props === void 0 || (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.length) > 0 || (props === null || props === void 0 ? void 0 : props.collapsible)) && __jsx(_formHeader["default"], {
+  return __jsx("form", (0, _extends2["default"])({}, (0, _attr.removeInvalidAttributes)(props), {
+    hidden: props.hidden || false,
+    name: props.name,
+    defaultmode: props.defaultmode,
+    captionposition: props.captionposition,
+    captionalign: props.captionalign,
+    numberoffields: props.numberoffields,
+    className: props.className,
+    id: props.id,
+    onSubmit: props.submit,
+    style: _objectSpread(_objectSpread({}, props.styles), props.conditionalstyle),
+    onReset: props.formreset,
+    ref: props.formElementRef,
+    noValidate: props.validationtype !== "html"
+  }), !shouldHideHeader && ((props === null || props === void 0 ? void 0 : props.title) || (props === null || props === void 0 ? void 0 : props.subheading) || (props === null || props === void 0 ? void 0 : props.iconclass) || (props === null || props === void 0 || (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.length) > 0 || (props === null || props === void 0 ? void 0 : props.collapsible)) && __jsx(_formHeader["default"], {
     title: props.title,
     subheading: props.subheading,
     iconclass: props.iconclass,

package/components/data/list/components/ListDND.js

@@ -106,7 +106,8 @@ var SortableItem = exports.SortableItem = function SortableItem(_ref) {
     cursor: enableReorder && !disableItem ? "grab" : undefined,
     touchAction: "none",
     position: "relative",
-    willChange: "transform"
+    willChange: "transform",
+    width: "100%"
   };
   return __jsx("div", (0, _extends2["default"])({
     ref: setNodeRef,