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

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

@@ -1,102 +1,141 @@
-"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,
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import clsx from "clsx";
+import { useCallback, memo, useRef, useEffect, useState } from "react";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import { useFormContext } from "../form-context";
+import {
+  extractDynamicValidationProps,
+  processFieldValue,
+  getErrorState,
+  shouldShowErrorMessage
+} from "./utils";
+import {
+  useFormRegistration,
+  useDefaultValueSync,
+  useValidationRules,
+  useHTMLValidationProps
+} from "./hooks";
+const withFormController = (WrappedComponent) => {
+  const WithFormControllerComponent = memo((props) => {
+    const _a = props, {
+      formRef: propsFormRef,
+      formKey,
+      name,
+      datavalue,
+      maxDataValue,
+      isMaxWidget: isMaxWidgetProp,
+      defaultvalue,
+      validators = [],
+      asyncValidators,
+      required,
+      maxchars,
+      minvalue,
+      maxvalue,
+      regexp,
+      validationmessage,
+      customValidationMsg,
+      setValidationMessage,
+      hint,
+      type,
+      observe,
+      onBlur,
+      fieldName,
+      standalone = false
+    } = _a, wrappedComponentProps = __objRest(_a, [
+      "formRef",
+      "formKey",
+      "name",
+      "datavalue",
+      "maxDataValue",
+      "isMaxWidget",
+      "defaultvalue",
+      "validators",
+      "asyncValidators",
+      "required",
+      "maxchars",
+      "minvalue",
+      "maxvalue",
+      "regexp",
+      "validationmessage",
+      "customValidationMsg",
+      "setValidationMessage",
+      "hint",
+      "type",
+      "observe",
+      "onBlur",
+      "fieldName",
+      "standalone"
+    ]);
+    const [touched, setTouched] = useState(false);
+    const fieldRef = useRef(null);
+    const observeRef = useRef(observe);
+    const isInitialMountRef = useRef(true);
+    const hasEverBeenTouchedRef = useRef(false);
+    const inputFieldName = fieldName || name;
+    const contextFormRef = useFormContext();
+    const formRef = propsFormRef || contextFormRef;
+    const fieldProxy = useWidgetProxy(name, standalone);
+    const form = useWidgetProxy(formRef == null ? void 0 : formRef.name, standalone);
+    const isMaxWidget = isMaxWidgetProp === true || isMaxWidgetProp === "true" || isMaxWidgetProp === "{true}";
+    const effectiveFormKey = isMaxWidget && formKey ? `${formKey}_maxWidget` : formKey || inputFieldName;
+    const effectiveDataValue = isMaxWidget ? maxDataValue !== void 0 ? maxDataValue : datavalue : datavalue;
+    const trigger = formRef == null ? void 0 : formRef.trigger;
+    const validationType = (form == null ? void 0 : form.validationtype) || (formRef == null ? void 0 : formRef.validationtype) || "default";
+    useFormRegistration(name, fieldProxy, contextFormRef);
+    useDefaultValueSync(defaultvalue, datavalue, fieldRef);
+    const widget = WrappedComponent == null ? void 0 : WrappedComponent.displayName;
+    const ignoreRange = ["WmRadioset", "WmCheckboxset"].includes(widget != null ? widget : "");
+    const validationRules = useValidationRules(
+      validationType,
+      validators,
+      asyncValidators,
+      required,
+      maxchars,
+      regexp,
+      validationmessage,
+      ignoreRange ? void 0 : minvalue,
+      ignoreRange ? void 0 : maxvalue,
+      form,
+      customValidationMsg
+    );
+    const rules = {
+      required,
+      maxchars,
+      regexp,
+      minvalue,
+      maxvalue,
       excludedays: props.excludedays,
       excludedates: props.excludedates,
       mintime: props.mintime,
@@ -104,41 +143,40 @@ var withFormController = function withFormController(WrappedComponent) {
       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 () {
+    const extractedValidatorProps = extractDynamicValidationProps(validators || [], rules);
+    const htmlValidationProps = useHTMLValidationProps(validationType, required, maxchars, regexp);
+    useEffect(() => {
       observeRef.current = observe;
     }, [observe]);
-
-    // Destroy widget when component unmounts
-    (0, _react.useEffect)(function () {
-      return function () {
+    useEffect(() => {
+      return () => {
         if (props.destroy) {
-          props.destroy([props.name, effectiveFormKey, "".concat(effectiveFormKey, "_formWidget"), "".concat(effectiveFormKey, "_formLabel")]);
+          props.destroy([
+            props.name,
+            effectiveFormKey,
+            `${effectiveFormKey}_formWidget`,
+            `${effectiveFormKey}_formLabel`
+          ]);
         }
       };
     }, [effectiveFormKey]);
-
-    // Track if field has ever been touched
-    (0, _react.useEffect)(function () {
+    useEffect(() => {
       if (touched && !hasEverBeenTouchedRef.current) {
         hasEverBeenTouchedRef.current = true;
       }
     }, [touched]);
-    (0, _react.useEffect)(function () {
+    useEffect(() => {
       if (isInitialMountRef.current) {
         isInitialMountRef.current = false;
         return;
       }
-      var hasBeenTouchedOrSubmitted = hasEverBeenTouchedRef.current || (formRef === null || formRef === void 0 ? void 0 : formRef.submitCount) && formRef.submitCount > 0;
+      const hasBeenTouchedOrSubmitted = hasEverBeenTouchedRef.current || (formRef == null ? void 0 : formRef.submitCount) && formRef.submitCount > 0;
       if (trigger && effectiveFormKey && hasBeenTouchedOrSubmitted) {
         trigger(effectiveFormKey);
       }
     }, [validationmessage]);
-    var customMsgInitialRef = (0, _react.useRef)(true);
-    (0, _react.useEffect)(function () {
+    const customMsgInitialRef = useRef(true);
+    useEffect(() => {
       if (customMsgInitialRef.current) {
         customMsgInitialRef.current = false;
         return;
@@ -147,163 +185,175 @@ var withFormController = function withFormController(WrappedComponent) {
         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);
-            }
+    const createOnChangeHandler = useCallback(
+      (field) => {
+        return (e, componentProps, newValue, oldValue, isValid) => {
+          var _a2;
+          let valueToSet;
+          if (newValue !== void 0) {
+            valueToSet = newValue;
+          } else if (e && e.target) {
+            valueToSet = e.target.value;
+          } else if (e !== void 0) {
+            valueToSet = e;
+          }
+          if (valueToSet && typeof 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;
           }
-          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%"
+          (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e, componentProps, newValue, oldValue);
+        };
+      },
+      [type, props.datafield]
+    );
+    const createOnBlurHandler = useCallback(
+      (field, fieldState) => {
+        return (e) => {
+          var _a2;
+          setTouched(true);
+          field.onBlur();
+          const shouldTriggerValidation = validationType === "html" && trigger && !!fieldState.error || validationType !== "none" && ((_a2 = observeRef.current) == null ? void 0 : _a2.length) && trigger;
+          if (shouldTriggerValidation) {
+            setTimeout(() => {
+              trigger(effectiveFormKey);
+            });
           }
-        }, 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%"
+          onBlur == null ? void 0 : onBlur(e);
+        };
+      },
+      [trigger, formKey, inputFieldName, onBlur, validationType]
+    );
+    if (!(formRef == null ? void 0 : formRef.control) || props.ignoreInForm) {
+      return /* @__PURE__ */ jsx(WrappedComponent, __spreadValues({}, props));
+    }
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formRef.control,
+        name: effectiveFormKey,
+        rules: validationRules,
+        defaultValue: effectiveDataValue !== void 0 ? effectiveDataValue : defaultvalue,
+        render: ({ field, fieldState }) => {
+          var _a2;
+          fieldRef.current = field;
+          const processedValue = processFieldValue(field.value, type, props.datafield);
+          const errorState = getErrorState(fieldState, validationType, touched);
+          let valueToUse;
+          if (processedValue !== void 0) {
+            valueToUse = processedValue;
+          } else {
+            valueToUse = defaultvalue;
           }
-        }, (_fieldState$error = fieldState.error) === null || _fieldState$error === void 0 ? void 0 : _fieldState$error.message));
+          const effectiveValue = processedValue !== void 0 ? processedValue : defaultvalue;
+          const displayValueStr = effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue.toString() : "";
+          const maxWidgetProps = isMaxWidget ? {
+            datavalue: props.datavalue !== void 0 ? props.datavalue : void 0,
+            // Keep original, don't update
+            value: props.value !== void 0 ? props.value : void 0,
+            // Keep original, don't update
+            displayValue: props.displayValue !== void 0 ? props.displayValue : void 0,
+            // 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 !== void 0 ? props.maxvalue : void 0
+            // Keep original, don't update
+          };
+          const controlledProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, props), extractedValidatorProps), validationType === "html" ? htmlValidationProps : {}), maxWidgetProps), {
+            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,
+            isRequiredLabel: validationType === "html" || !propsFormRef ? required : extractedValidatorProps.required || required,
+            className: clsx(wrappedComponentProps.className, {
+              hidden: contextFormRef == null ? void 0 : contextFormRef.isViewMode
+            })
+          });
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              WrappedComponent,
+              __spreadProps(__spreadValues({}, controlledProps), {
+                dataset: props.dataset,
+                displayfield: props.displayfield
+              })
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  alignSelf: "flex-start"
+                },
+                className: "form-control-static app-label",
+                hidden: !(contextFormRef == null ? void 0 : contextFormRef.isViewMode),
+                children: (() => {
+                  let value = controlledProps.datavalue;
+                  if (value && typeof value === "object") {
+                    if (props.datafield || props.displayfield) {
+                      value = value[props.datafield || props.displayfield];
+                    } else {
+                      value = JSON.stringify(value);
+                    }
+                  }
+                  return value;
+                })()
+              }
+            ),
+            hint && !shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "help-block",
+                "aria-hidden": "true",
+                role: "alert",
+                "aria-live": "polite",
+                style: {
+                  textAlign: "start",
+                  width: "100%"
+                },
+                children: hint
+              }
+            ),
+            shouldShowErrorMessage(validationType, fieldState, touched) && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "help-block text-danger",
+                "aria-hidden": "false",
+                role: "alert",
+                "aria-live": "assertive",
+                style: {
+                  textAlign: "start",
+                  width: "100%"
+                },
+                children: (_a2 = fieldState.error) == null ? void 0 : _a2.message
+              }
+            )
+          ] });
+        }
       }
-    });
+    );
   });
-  WithFormControllerComponent.displayName = "withFormController(".concat(WrappedComponent.displayName || WrappedComponent.name || "Component", ")");
+  WithFormControllerComponent.displayName = `withFormController(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
   return WithFormControllerComponent;
 };
-var _default = exports["default"] = withFormController;
+var withFormController_default = withFormController;
+export {
+  withFormController_default as default
+};