@wavemaker/react-runtime 11.14.1-rc.236

package/components/data/form/form-controller/validation-contrustor.js

@@ -0,0 +1,313 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createValidationRules = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lodashEs = require("lodash-es");
+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 validationHandlers = {
+  required: function required(config, rules) {
+    if (config.validator) {
+      rules.required = config.errorMessage;
+    }
+    rules.validate = _objectSpread(_objectSpread({}, rules.validate), {}, {
+      noWhitespaces: function noWhitespaces(value) {
+        if (typeof value === "string" && value.length > 0 && value.trim() === "") {
+          return config.errorMessage;
+        }
+        return true;
+      }
+    });
+    return rules;
+  },
+  maxchars: function maxchars(config, rules) {
+    rules.maxLength = {
+      value: config.validator,
+      message: config.errorMessage
+    };
+    return rules;
+  },
+  minvalue: function minvalue(config, rules) {
+    rules.min = {
+      value: config.validator,
+      message: config.errorMessage
+    };
+    return rules;
+  },
+  maxvalue: function maxvalue(config, rules) {
+    rules.max = {
+      value: config.validator,
+      message: config.errorMessage
+    };
+    return rules;
+  },
+  regexp: function regexp(config, rules) {
+    var pattern;
+    try {
+      pattern = (0, _lodashEs.isString)(config.validator) ? new RegExp(config.validator.replace(/^\/|\/$/g, "")) : config.validator;
+    } catch (e) {
+      console.warn("Invalid regexp string:", config.validator);
+      return rules;
+    }
+    rules.pattern = {
+      value: pattern,
+      message: config.errorMessage
+    };
+    return rules;
+  },
+  mindate: function mindate(config, rules) {
+    rules.validate = _objectSpread(_objectSpread({}, rules.validate), {}, {
+      minDate: function minDate(value) {
+        if (!value) return true;
+        var inputDate = new Date(value);
+        var minDate = new Date(config.validator);
+        if (isNaN(inputDate.getTime()) || isNaN(minDate.getTime())) {
+          return "Invalid date format";
+        }
+        return inputDate >= minDate || config.errorMessage;
+      }
+    });
+    return rules;
+  },
+  maxdate: function maxdate(config, rules) {
+    rules.validate = _objectSpread(_objectSpread({}, rules.validate), {}, {
+      maxDate: function maxDate(value) {
+        if (!value) return true;
+        var inputDate = new Date(value);
+        var maxDate = new Date(config.validator);
+        if (isNaN(inputDate.getTime()) || isNaN(maxDate.getTime())) {
+          return "Invalid date format";
+        }
+        return inputDate <= maxDate || config.errorMessage;
+      }
+    });
+    return rules;
+  },
+  mintime: function mintime(config, rules) {
+    rules.validate = _objectSpread(_objectSpread({}, rules.validate), {}, {
+      minTime: function minTime(value) {
+        if (!value) return true;
+        var parseTime = function parseTime(time) {
+          var _time$split$map = time.split(":").map(Number),
+            _time$split$map2 = (0, _slicedToArray2["default"])(_time$split$map, 2),
+            hours = _time$split$map2[0],
+            minutes = _time$split$map2[1];
+          return hours * 60 + minutes;
+        };
+        try {
+          var inputMinutes = parseTime(value);
+          var minMinutes = parseTime(config.validator);
+          return inputMinutes >= minMinutes || config.errorMessage;
+        } catch (_unused) {
+          return "Invalid time format";
+        }
+      }
+    });
+    return rules;
+  },
+  maxtime: function maxtime(config, rules) {
+    rules.validate = _objectSpread(_objectSpread({}, rules.validate), {}, {
+      maxTime: function maxTime(value) {
+        if (!value) return true;
+        var parseTime = function parseTime(time) {
+          var _time$split$map3 = time.split(":").map(Number),
+            _time$split$map4 = (0, _slicedToArray2["default"])(_time$split$map3, 2),
+            hours = _time$split$map4[0],
+            minutes = _time$split$map4[1];
+          return hours * 60 + minutes;
+        };
+        try {
+          var inputMinutes = parseTime(value);
+          var maxMinutes = parseTime(config.validator);
+          return inputMinutes <= maxMinutes || config.errorMessage;
+        } catch (_unused2) {
+          return "Invalid time format";
+        }
+      }
+    });
+    return rules;
+  },
+  excludedates: function excludedates(config, rules) {
+    rules.validate = _objectSpread(_objectSpread({}, rules.validate), {}, {
+      excludeDates: function excludeDates(value) {
+        if (!value) return true;
+        var inputDate = new Date(value);
+        if (isNaN(inputDate.getTime())) return "Invalid date format";
+        var formatDate = function formatDate(date) {
+          var d = (0, _lodashEs.isDate)(date) ? date : new Date(date);
+          return d.toISOString().split("T")[0];
+        };
+        var inputDateStr = formatDate(value);
+        var isExcluded = config.validator.some(function (excludedDate) {
+          return formatDate(excludedDate) === inputDateStr;
+        });
+        return !isExcluded || config.errorMessage;
+      }
+    });
+    return rules;
+  },
+  excludedays: function excludedays(config, rules) {
+    rules.validate = _objectSpread(_objectSpread({}, rules.validate), {}, {
+      excludeDays: function excludeDays(value) {
+        if (!value) return true;
+        var inputDate = new Date(value);
+        if (isNaN(inputDate.getTime())) return "Invalid date format";
+        var dayOfWeek = inputDate.getDay();
+        var isExcluded = config.validator.includes(dayOfWeek);
+        return !isExcluded || config.errorMessage;
+      }
+    });
+    return rules;
+  }
+};
+
+// Type guard functions using lodash
+var isValidatorConfig = function isValidatorConfig(config) {
+  return config && (0, _typeof2["default"])(config) === "object" && !Array.isArray(config) && typeof config !== "function" && (0, _lodashEs.isString)(config.type) && (0, _lodashEs.isString)(config.errorMessage) && config.validator !== undefined;
+};
+var isFunctionValidator = function isFunctionValidator(config) {
+  return typeof config === "function";
+};
+var validateValidatorConfig = function validateValidatorConfig(config) {
+  var type = config.type,
+    validator = config.validator;
+  switch (type) {
+    case "required":
+      return (0, _lodashEs.isBoolean)(validator);
+    case "maxchars":
+    case "minvalue":
+    case "maxvalue":
+      return (0, _lodashEs.isNumber)(validator);
+    case "regexp":
+      return (0, _lodashEs.isRegExp)(validator) || (0, _lodashEs.isString)(validator) && function () {
+        try {
+          new RegExp(validator.replace(/^\/|\/$/g, ""));
+          return true;
+        } catch (_unused3) {
+          return false;
+        }
+      }();
+    case "mindate":
+    case "maxdate":
+      return (0, _lodashEs.isString)(validator) || (0, _lodashEs.isDate)(validator);
+    case "mintime":
+    case "maxtime":
+      return (0, _lodashEs.isString)(validator) && /^\d{2}:\d{2}$/.test(validator);
+    case "excludedates":
+      return (0, _lodashEs.isArray)(validator) && validator.every(function (v) {
+        return (0, _lodashEs.isString)(v) || (0, _lodashEs.isDate)(v);
+      });
+    case "excludedays":
+      return (0, _lodashEs.isArray)(validator) && validator.every(function (v) {
+        return (0, _lodashEs.isNumber)(v) && v >= 0 && v <= 6;
+      });
+    default:
+      return false;
+  }
+};
+var createValidationRules = exports.createValidationRules = function createValidationRules(validators) {
+  var form = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var fieldName = arguments.length > 2 ? arguments[2] : undefined;
+  var functionValidators = validators.filter(isFunctionValidator);
+  var configValidators = validators.filter(isValidatorConfig);
+  var unrecognized = validators.filter(function (v) {
+    return !isFunctionValidator(v) && !isValidatorConfig(v);
+  });
+  if (unrecognized.length > 0) {
+    console.warn("Unrecognized validator configurations:", unrecognized);
+  }
+  var validConfigs = configValidators.filter(function (config) {
+    if (!validateValidatorConfig(config)) {
+      console.warn("Invalid validator values for type:", config.type, config);
+      return false;
+    }
+    return true;
+  });
+  var rules = (0, _lodashEs.reduce)(validConfigs, function (acc, config) {
+    var handler = validationHandlers[config.type];
+    if (handler) return handler(config, acc);
+    console.warn("No handler found for validator type: ".concat(config.type));
+    return acc;
+  }, {});
+  if (functionValidators.length > 0) {
+    var functionValidateRules = (0, _lodashEs.reduce)(functionValidators, function (acc, validator, index) {
+      acc["customValidator".concat(index)] = /*#__PURE__*/function () {
+        var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(value) {
+          var result;
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                if (value) {
+                  _context.next = 3;
+                  break;
+                }
+                return _context.abrupt("return", true);
+              case 3:
+                _context.next = 5;
+                return validator({
+                  value: value,
+                  fieldName: fieldName
+                }, form);
+              case 5:
+                result = _context.sent;
+                if (!(typeof result === "string")) {
+                  _context.next = 8;
+                  break;
+                }
+                return _context.abrupt("return", result);
+              case 8:
+                if (!(typeof result === "boolean")) {
+                  _context.next = 10;
+                  break;
+                }
+                return _context.abrupt("return", result || "Validation failed");
+              case 10:
+                if (!(result !== null && result !== void 0 && result.errorMessage)) {
+                  _context.next = 12;
+                  break;
+                }
+                return _context.abrupt("return", result.errorMessage);
+              case 12:
+                return _context.abrupt("return", true);
+              case 15:
+                _context.prev = 15;
+                _context.t0 = _context["catch"](0);
+                if (!(_context.t0 !== null && _context.t0 !== void 0 && _context.t0.errorMessage)) {
+                  _context.next = 19;
+                  break;
+                }
+                return _context.abrupt("return", _context.t0.errorMessage);
+              case 19:
+                if (!(typeof _context.t0 === "string")) {
+                  _context.next = 21;
+                  break;
+                }
+                return _context.abrupt("return", _context.t0);
+              case 21:
+                console.warn("Function validator threw an error:", _context.t0);
+                return _context.abrupt("return", "Validation error occurred");
+              case 23:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee, null, [[0, 15]]);
+        }));
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      return acc;
+    }, {});
+    rules.validate = _objectSpread(_objectSpread({}, rules.validate), functionValidateRules);
+  }
+  return rules;
+};

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

@@ -0,0 +1,320 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _reactHookForm = require("react-hook-form");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+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"];
+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; }
+// Custom hooks for better separation of concerns
+var useFormRegistration = function useFormRegistration(name, fieldProxy, contextFormRef) {
+  var hasRegisteredRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (contextFormRef !== null && contextFormRef !== void 0 && contextFormRef.registerFormWidget && fieldProxy && !hasRegisteredRef.current) {
+      contextFormRef.registerFormWidget(name, fieldProxy);
+      hasRegisteredRef.current = true;
+    }
+  }, [fieldProxy, name, contextFormRef]);
+};
+var useExternalDataSync = function useExternalDataSync(datavalue, fieldRef) {
+  (0, _react.useEffect)(function () {
+    if (fieldRef.current && datavalue !== undefined) {
+      var currentValue = fieldRef.current.value;
+      if (currentValue !== datavalue) {
+        fieldRef.current.onChange(datavalue);
+      }
+    }
+  }, [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."
+      });
+    }
+    return (0, _validationContrustor.createValidationRules)(combinedValidators, form);
+  }, [validators, asyncValidators, required, maxchars, regexp, validationmessage, form, validationType]);
+};
+var useHTMLValidationProps = function useHTMLValidationProps(validationType, required, maxchars, regexp) {
+  return (0, _react.useMemo)(function () {
+    if (validationType !== "html") {
+      return {};
+    }
+    var htmlProps = {};
+    if (required) {
+      htmlProps.required = true;
+    }
+    if (maxchars) {
+      htmlProps.maxLength = maxchars;
+    }
+    if (regexp) {
+      htmlProps.pattern = typeof regexp === "string" ? regexp : regexp.source;
+    }
+    return htmlProps;
+  }, [validationType, required, maxchars, regexp]);
+};
+
+// Utility functions
+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];
+  }
+  if (type === "number") {
+    return fieldValue === "" || fieldValue === null || fieldValue === undefined ? "" : fieldValue;
+  }
+  return fieldValue;
+};
+var getErrorState = function getErrorState(fieldState, validationType, touched) {
+  switch (validationType) {
+    case "default":
+      return {
+        error: touched && !!fieldState.error,
+        errorMessage: touched && fieldState.error ? fieldState.error.message : undefined,
+        fieldState: fieldState
+      };
+    case "html":
+      return {
+        error: touched && !!fieldState.error,
+        errorMessage: touched && fieldState.error ? fieldState.error.message : undefined,
+        fieldState: fieldState
+      };
+    case "none":
+      return {
+        error: false,
+        errorMessage: undefined,
+        fieldState: _objectSpread(_objectSpread({}, fieldState), {}, {
+          error: undefined
+        })
+      };
+    default:
+      return {
+        error: false,
+        errorMessage: undefined,
+        fieldState: undefined
+      };
+  }
+};
+var shouldShowErrorMessage = function shouldShowErrorMessage(validationType, fieldState, touched) {
+  return validationType !== "none" && (validationType === "default" && touched && fieldState.error || validationType === "html" && touched && fieldState.error);
+};
+
+// 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,
+      defaultvalue = props.defaultvalue,
+      validators = props.validators,
+      asyncValidators = props.asyncValidators,
+      required = props.required,
+      maxchars = props.maxchars,
+      regexp = props.regexp,
+      validationmessage = props.validationmessage,
+      hint = props.hint,
+      type = props.type,
+      observe = props.observe,
+      onBlur = props.onBlur,
+      fieldName = props.fieldName,
+      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);
+
+    // Context and proxy setup
+    var inputFieldName = fieldName || name;
+    var contextFormRef = (0, _formContext.useFormContext)();
+    var formRef = propsFormRef || contextFormRef;
+    var fieldProxy = (0, _WidgetProvider.useWidgetProxy)(name);
+    var form = (0, _WidgetProvider.useWidgetProxy)(formRef === null || formRef === void 0 ? void 0 : formRef.name);
+
+    // 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);
+    var htmlValidationProps = useHTMLValidationProps(validationType, required, maxchars, regexp);
+
+    // Update observeRef when observe changes
+    (0, _react.useEffect)(function () {
+      observeRef.current = observe;
+    }, [observe]);
+
+    // Event handlers
+    var createOnChangeHandler = (0, _react.useCallback)(function (field) {
+      return function (e, componentProps, newValue) {
+        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) {
+          valueToSet = valueToSet[props.datafield];
+        }
+        if (type === "number") {
+          field.onChange(valueToSet === "" || valueToSet === null ? "" : valueToSet);
+        } else {
+          field.onChange(valueToSet);
+        }
+        (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e, field, newValue, valueToSet);
+      };
+    }, [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(formKey || inputFieldName);
+          });
+        }
+        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)) {
+      return __jsx(WrappedComponent, props);
+    }
+    return __jsx(_reactHookForm.Controller, {
+      control: formRef.control,
+      name: formKey || inputFieldName,
+      rules: validationRules,
+      defaultValue: datavalue !== undefined ? datavalue : 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 = processFieldValue(field.value, type, props.datafield);
+        var errorState = getErrorState(fieldState, validationType, touched);
+
+        // Build controlled props
+        var controlledProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), validationType === "html" ? htmlValidationProps : {}), {}, {
+          value: processedValue !== undefined ? processedValue : defaultvalue,
+          datavalue: processedValue !== undefined ? processedValue : defaultvalue,
+          onChange: createOnChangeHandler(field),
+          onBlur: createOnBlurHandler(field, fieldState),
+          ref: field.ref
+        }, errorState), {}, {
+          required: validationType === "html" || !propsFormRef ? required : undefined,
+          isControlled: true,
+          formfield: true,
+          fieldName: inputFieldName,
+          name: name,
+          isRequiredLabel: required,
+          maxchars: maxchars,
+          regexp: regexp,
+          className: (0, _clsx["default"])(wrappedComponentProps.className, {
+            hidden: contextFormRef === null || contextFormRef === void 0 ? void 0 : contextFormRef.isViewMode
+          })
+        });
+        return __jsx(_Box["default"], {
+          sx: {
+            width: "inherit"
+          }
+        }, __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 && !shouldShowErrorMessage(validationType, fieldState, touched) && __jsx(_Box["default"], {
+          component: "p",
+          className: "help-block",
+          "aria-hidden": "true",
+          role: "alert",
+          "aria-live": "polite",
+          sx: {
+            textAlign: "start",
+            width: "100%"
+          }
+        }, hint), shouldShowErrorMessage(validationType, fieldState, touched) && __jsx(_Box["default"], {
+          component: "p",
+          className: "help-block text-danger",
+          "aria-hidden": "false",
+          role: "alert",
+          "aria-live": "assertive",
+          sx: {
+            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;